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

/*
 * @Author: 赵伟
 * @Date: 2024-04-16 13:58:08
 * @Description: 数据集、模型、镜像选择表单组件
 */

import KFIcon from '@/components/KFIcon';
import ResourceSelectorModal, {
  type ResourceSelectorResponse,
  ResourceSelectorType,
  selectorTypeConfig,
} from '@/components/ResourceSelectorModal';
import { CommonTabKeys } from '@/enums';
import { openAntdModal } from '@/utils/modal';
import { Button, ConfigProvider } from 'antd';
import classNames from 'classnames';
import ParameterInput, { type ParameterInputProps } from '../ParameterInput';
import './index.less';

export {
  requiredValidator,
  type ParameterInputObject,
  type ParameterInputValue,
} from '../ParameterInput';
export { ResourceSelectorType, selectorTypeConfig, type ResourceSelectorResponse };

interface ResourceSelectProps extends ParameterInputProps {
  /** 类型，数据集、模型、镜像 */
  type: ResourceSelectorType;
  /** 值 */
  value?: ResourceSelectorResponse;
}

// 获取选择数据集、模型、镜像后面按钮 icon
const getSelectBtnIcon = (type: ResourceSelectorType) => {
  return <KFIcon type={selectorTypeConfig[type].buttonIcon} font={16} />;
};

/** 数据集、模型、镜像选择表单组件 */
function ResourceSelect({
  type,
  value,
  size,
  disabled,
  className,
  style,
  onChange,
  ...rest
}: ResourceSelectProps) {
  const { componentSize } = ConfigProvider.useConfig();
  const mySize = size || componentSize;
  let defaultActiveTab: CommonTabKeys | undefined,
    defaultExpandedKeys: string[] = [],
    defaultCheckedKeys: string[] = [];
  if (value && typeof value === 'object') {
    defaultActiveTab = value.activeTab;
    if (type === ResourceSelectorType.Mirror) {
      if (value.image_id && value.id) {
        defaultExpandedKeys = [`${value.image_id}`];
        defaultCheckedKeys = [`${value.image_id}-${value.id}`];
      }
    } else if (value.id && value.version) {
      defaultExpandedKeys = [value.id];
      defaultCheckedKeys = [`${value.id}-${value.version}`];
    }
  }

  // 选择数据集、模型、镜像
  const selectResource = () => {
    const { close } = openAntdModal(ResourceSelectorModal, {
      type,
      defaultExpandedKeys: defaultExpandedKeys,
      defaultCheckedKeys: defaultCheckedKeys,
      defaultActiveTab: defaultActiveTab,
      onOk: (res) => {
        if (res) {
          if (type === ResourceSelectorType.Mirror) {
            const { activeTab, ...rest } = res;
            const { url } = rest;
            onChange?.({
              ...rest,
              value: url,
              showValue: url,
              fromSelect: true,
              activeTab,
            });
          } else {
            const { activeTab, ...rest } = res;
            const { name, version } = rest;
            const showValue = `${name}:${version}`;
            onChange?.({
              ...rest,
              value: showValue,
              showValue,
              fromSelect: true,
              activeTab,
            });
          }
        } else {
          onChange?.(undefined);
        }
        close();
      },
    });
  };

  // 删除
  const handleRemove = () => {
    onChange?.(undefined);
  };

  return (
    <div className={classNames('kf-resource-select', className)} style={style}>
      <ParameterInput
        {...rest}
        disabled={disabled}
        value={value}
        size={mySize}
        onChange={onChange}
        onRemove={handleRemove}
        onClick={selectResource}
      ></ParameterInput>
      <Button
        className="kf-resource-select__button"
        size={mySize}
        type="link"
        icon={getSelectBtnIcon(type)}
        disabled={disabled}
        onClick={selectResource}
      >
        {selectorTypeConfig[type].buttontTitle}
      </Button>
    </div>
  );
}

export default ResourceSelect;