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

import { PipelineGlobalParamType, type PipelineGlobalParam } from '@/types';
import { formatEnum } from '@/utils/format';
import { Typography, type SelectProps } from 'antd';
import classNames from 'classnames';
import './index.less';

type FormInfoProps = {
  /** 值 */
  value?: any;
  /** 如果 `value` 是对象，取对象的哪个属性作为值 */
  valuePropName?: string;
  /** 是否是多行文本 */
  textArea?: boolean;
  /** 是否是下拉框 */
  select?: boolean;
  /** 下拉框数据 */
  options?: SelectProps['options'];
  /** 自定义节点 label、value 的字段 */
  fieldNames?: SelectProps['fieldNames'];
  /** 全局参数 */
  globalParams?: PipelineGlobalParam[] | null;
  /** 自定义类名 */
  className?: string;
  /** 自定义样式 */
  style?: React.CSSProperties;
};

/**
 * 模拟禁用的输入框，但是内容超长时，hover 时显示所有内容
 */
function FormInfo({
  value,
  valuePropName,
  textArea = false,
  select = false,
  options,
  fieldNames,
  globalParams,
  className,
  style,
}: FormInfoProps) {
  let showValue = value;
  if (value && typeof value === 'object' && valuePropName) {
    showValue = value[valuePropName];
    const reg = /^\$\{(.*)\}$/;
    if (value.fromSelect && Array.isArray(globalParams) && globalParams.length > 0) {
      const match = reg.exec(showValue);
      if (match) {
        const paramName = match[1];
        const foundParam = globalParams.find((v) => v.param_name === paramName);
        if (foundParam) {
          showValue =
            foundParam.param_type === PipelineGlobalParamType.Boolean // 布尔类型转换
              ? foundParam.param_value
                ? 'true'
                : 'false'
              : foundParam.param_value;
        }
      }
    }
  } else if (select === true && options) {
    let _options: SelectProps['options'] = options;
    if (fieldNames) {
      _options = options.map((v) => {
        return {
          ...v,
          label: fieldNames.label && v[fieldNames.label],
          value: fieldNames.value && v[fieldNames.value],
          options: fieldNames.options && v[fieldNames.options],
        };
      });
    }
    showValue = formatEnum(_options)(value);
  }

  return (
    <div
      className={classNames(
        'form-info',
        {
          'form-info--multiline': textArea,
        },
        className,
      )}
      style={style}
    >
      <Typography.Paragraph ellipsis={textArea ? false : { tooltip: showValue }}>
        {showValue}
      </Typography.Paragraph>
    </div>
  );
}

export default FormInfo;