tld_wms/packages/app/src/components/form-field/Select.tsx

import css from './index.module.css';
import {Select, Space} from 'antd';
import classNames from 'classnames';
import {FC} from 'react';
import {Controller, UseControllerProps} from 'react-hook-form';
import {useSelectFilterOptions} from '@hooks';

type Props = {
  label: string;
  placeholder?: string;
  options: {value: string; label: string}[];
  /** @deprecated */
  showSearch?: boolean;
  onSearch?: (value: string) => void;
  loading?: boolean;
} & UseControllerProps<any, any>;

const ModalSelect: FC<Props> = function ({
  control,
  name,
  label,
  placeholder,
  options,
  onSearch,
  loading,
}) {
  const [filterOptions, {onSelectSearch}] = useSelectFilterOptions(options);

  return (
    <Space direction='vertical' className='width-full'>
      <label htmlFor={`operation_${name}`}>{label}</label>
      <Controller
        name={name}
        control={control}
        render={function ({
          field: {value, onChange, ref},
          formState: {errors},
        }) {
          const errorTips = errors[name]?.message?.toString() ?? '';

          return (
            <>
              <Select
                filterOption={false}
                showSearch
                data-testid={`select_${name}`}
                defaultActiveFirstOption={false}
                placeholder={placeholder ?? '请选择'}
                id={`operation_${name}`}
                // 处理placeholder不显示问题
                value={value?.length ? value : void 0}
                onChange={onChange}
                ref={ref}
                options={filterOptions}
                className='width-full'
                getPopupContainer={(node: HTMLElement) =>
                  node.parentNode as HTMLElement
                }
                onSearch={onSearch ? onSearch : onSelectSearch}
                listHeight={150}
                loading={loading}
              />
              <p
                className={classNames([
                  css.errorTips,
                  {[css.errorTipsHidden]: !errorTips},
                ])}
              >
                {errorTips}
              </p>
            </>
          );
        }}
      />
    </Space>
  );
};

export default ModalSelect;