ci4sManagement-cloud/react-ui/src/components/BasicInfo/index.tsx

import { Link } from '@umijs/max';
import { Typography } from 'antd';
import classNames from 'classnames';
import './index.less';

export type BasicInfoLink = {
  value: string;
  link?: string;
  url?: string;
};

export type BasicInfoData = {
  label: string;
  value?: any;
  ellipsis?: boolean;
  format?: (_value?: any) => string | BasicInfoLink | BasicInfoLink[] | undefined;
};

type BasicInfoProps = {
  datas: BasicInfoData[];
  className?: string;
  style?: React.CSSProperties;
  labelWidth: number;
};

type BasicInfoItemProps = {
  data: BasicInfoData;
  labelWidth: number;
  classPrefix: string;
};

type BasicInfoItemValueProps = BasicInfoLink & {
  ellipsis?: boolean;
  classPrefix: string;
};

export default function BasicInfo({ datas, className, style, labelWidth }: BasicInfoProps) {
  return (
    <div className={classNames('kf-basic-info', className)} style={style}>
      {datas.map((item) => (
        <BasicInfoItem
          key={item.label}
          data={item}
          labelWidth={labelWidth}
          classPrefix="kf-basic-info"
        />
      ))}
    </div>
  );
}

export function BasicInfoItem({ data, labelWidth, classPrefix }: BasicInfoItemProps) {
  const { label, value, format, ellipsis } = data;
  const formatValue = format ? format(value) : value;
  const myClassName = `${classPrefix}__item`;
  let valueComponent = undefined;
  if (Array.isArray(formatValue)) {
    valueComponent = (
      <div className={`${myClassName}__value-container`}>
        {formatValue.map((item: BasicInfoLink) => (
          <BasicInfoItemValue
            key={item.value}
            value={item.value}
            link={item.link}
            url={item.url}
            ellipsis={ellipsis}
            classPrefix={classPrefix}
          />
        ))}
      </div>
    );
  } else if (typeof formatValue === 'object' && formatValue) {
    valueComponent = (
      <BasicInfoItemValue
        value={formatValue.value}
        link={formatValue.link}
        url={formatValue.url}
        ellipsis={ellipsis}
        classPrefix={classPrefix}
      />
    );
  } else {
    valueComponent = (
      <BasicInfoItemValue value={formatValue} ellipsis={ellipsis} classPrefix={classPrefix} />
    );
  }
  return (
    <div className={myClassName} key={label}>
      <div className={`${myClassName}__label`} style={{ width: labelWidth }}>
        {label}
      </div>
      {valueComponent}
    </div>
  );
}

export function BasicInfoItemValue({
  value,
  link,
  url,
  ellipsis,
  classPrefix,
}: BasicInfoItemValueProps) {
  const myClassName = `${classPrefix}__item__value`;
  let component = undefined;
  if (url && value) {
    component = (
      <a className={`${myClassName}__link`} href={url} target="_blank" rel="noopener noreferrer">
        {value}
      </a>
    );
  } else if (link && value) {
    component = (
      <Link to={link} className={`${myClassName}__link`}>
        {value}
      </Link>
    );
  } else {
    component = <span className={`${myClassName}__text`}>{value ?? '--'}</span>;
  }

  return (
    <div className={myClassName}>
      <Typography.Text ellipsis={ellipsis ? { tooltip: value } : false}>
        {component}
      </Typography.Text>
    </div>
  );
}