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

/*
 * @Author: 赵伟
 * @Date: 2024-04-16 08:42:57
 * @Description: 参数下拉选择组件，支持资源规格、数据集、模型、服务
 */

import jccResourceState from '@/state/jcdResource';
import systemResourceState, { getSystemResources } from '@/state/systemResource';
import { to } from '@/utils/promise';
import { useSnapshot } from '@umijs/max';
import { Select, type SelectProps } from 'antd';
import { useCallback, useEffect, useMemo, useState } from 'react';
import FormInfo from '../FormInfo';
import { paramSelectConfig, type ParameterSelectDataType } from './config';

export { ParameterSelectTypeList, type ParameterSelectDataType } from './config';

export type ParameterSelectObject = {
  value: any;
  [key: string]: any;
};

type SelectOptions = SelectProps['options'];

const identityFunc = (value: any) => value;

export interface ParameterSelectProps extends SelectProps {
  /** 类型 */
  dataType: ParameterSelectDataType;
  /** 是否只是展示信息 */
  display?: boolean;
  /** 值，支持对象，对象必须包含 value */
  value?: string | ParameterSelectObject;
  /** 修改后回调 */
  onChange?: (value: string | ParameterSelectObject) => void;
}

/** 参数选择器，支持资源规格、数据集、模型、服务 */
function ParameterSelect({
  dataType,
  display = false,
  value,
  onChange,
  ...rest
}: ParameterSelectProps) {
  const [options, setOptions] = useState<SelectOptions>([]);
  const propsConfig = paramSelectConfig[dataType];
  const {
    getLabel = identityFunc,
    getValue = identityFunc,
    getOptions,
    filterOption,
    fieldNames,
    optionFilterProp,
    isObjectValue,
  } = propsConfig;
  const selectValue = typeof value === 'object' && value !== null ? value.value : value;
  // 数据集、模型、服务，对象转换成 json 字符串
  const valueText =
    typeof selectValue === 'object' && selectValue !== null ? getValue(selectValue) : selectValue;
  const jccResourceSnap = useSnapshot(jccResourceState);
  const { getResourceTypes } = jccResourceSnap;
  const systemResourceSnap = useSnapshot(systemResourceState);

  const objectOptions = useMemo(() => {
    return dataType === 'remote-resource-type'
      ? jccResourceSnap.types
      : dataType === 'remote-image'
      ? jccResourceSnap.images
      : dataType === 'remote-resource'
      ? jccResourceSnap.resources
      : options;
  }, [dataType, options, jccResourceSnap.types, jccResourceSnap.images, jccResourceSnap.resources]);

  // 将对象类型转换为 Select Options
  const converObjectToOptions = useCallback(
    (v: any) => {
      return {
        label: getLabel(v),
        value: getValue(v),
      };
    },
    [getLabel, getValue],
  );

  // 数据集、模型、服务获取数据后，进行转换
  const objectSelectOptions = useMemo(() => {
    return objectOptions?.map(converObjectToOptions);
  }, [converObjectToOptions, objectOptions]);

  // 快速得到选中的对象
  const valueMap = useMemo(() => {
    const map = new Map<string | number, any>();
    objectOptions?.forEach((v) => {
      map.set(getValue(v), v);
    });

    return map;
  }, [objectOptions, getValue]);

  useEffect(() => {
    // 获取下拉数据
    const getSelectOptions = async () => {
      if (getOptions) {
        const [res] = await to(getOptions());
        if (res) {
          setOptions(res);
        }
      } else if (dataType === 'remote-resource-type') {
        getResourceTypes();
      } else if (dataType === 'resource') {
        getSystemResources();
      }
    };
    getSelectOptions();
  }, [getOptions, dataType, getResourceTypes]);

  const selectOptions = (
    dataType === 'resource' ? systemResourceSnap.resources : objectSelectOptions
  ) as SelectOptions;

  const handleChange = (text: string) => {
    // 数据集、模型、服务，转换成对象
    if (isObjectValue) {
      // 设置为 null 是因为 antv g6 的 bug
      // 如果值为 undefined 时， graph.changeData(data) 会保留前面的值
      const selectValue = text ? valueMap.get(text) : null;
      if (typeof value === 'object' && value !== null) {
        onChange?.({
          ...value,
          value: selectValue,
        });
      } else {
        onChange?.(selectValue);
      }
    } else {
      const selectValue = text ? text : '';
      if (typeof value === 'object' && value !== null) {
        onChange?.({
          ...value,
          value: selectValue,
        });
      } else {
        onChange?.(selectValue);
      }
    }
  };

  // 只用于展示，FormInfo 组件带有 Tooltip
  if (display) {
    return (
      <FormInfo select value={valueText} options={selectOptions} fieldNames={fieldNames}></FormInfo>
    );
  }

  return (
    <Select
      {...rest}
      options={selectOptions}
      fieldNames={fieldNames}
      optionFilterProp={optionFilterProp}
      filterOption={filterOption}
      value={valueText}
      onChange={handleChange}
      showSearch
      allowClear
    />
  );
}

export default ParameterSelect;