随笔——带有loading的select

带有loading的select
import React, { useEffect } from 'react';
import { Select, Spin } from 'antd';
import { useRequest, request } from 'umi';
import { useImmer } from 'use-immer';

export interface Employee {
  id: number;
  employeeName: string;
  employeeCode: string;
}

const { Option } = Select;

interface IProps {
  mode?: string;
  onChange?(value?: any, options?: any, record?: any): void;
  dataLoadFinish?(data: Employee[]): void;
  valueKey?: 'id' | 'code';
  list?: Employee[];
  params?: {
    isSystemOperator?: number; // 是否是系统操作员1.是2.不是
    employeeStatus?: number; // 1.入职2.离职
  };
  value?: string | string[] | number | number[];
}

const EmployeeSelect: React.FC<IProps> = props => {
  const { mode, onChange = () => {}, value, valueKey = 'id', list, params } = props;
  const [employeeList, setEmployeeList] = useImmer<Employee[]>([]);
  const [fetching, setFetching] = useImmer<boolean>(false);

  useEffect(() => {
    if (list && list.length > 0) {
      setEmployeeList(() => list);
    }
  }, [list && list.length]);

  const getReq = (employeeCodeOrName?: string) => {
    return request('xxx/xxx/xxxxx/xxxxxx', {
      method: 'post',
      data: {
        ...params,
        employeeCodeOrName
      }
    });
  };

  const { run } = useRequest(getReq, {
    debounceInterval: 800,
    manual: true,
    onSuccess: data => {
      setEmployeeList(() => data);
      setFetching(() => false);
    }
  });

  const onSearch = (val: string) => {
    setEmployeeList(() => []);
    setFetching(() => true);
    run(val);
  };

  const onFocus = () => {
    if (employeeList.length <= 0) {
      setFetching(() => true);
      run();
    }
  };

  return (
    <Select
      showSearch
      allowClear
      mode={mode as any}
      value={value}
      onSearch={onSearch}
      onChange={(val, options) => {
        const employee = employeeList.find(
          item => item[valueKey === 'code' ? 'employeeCode' : 'id'] === val
        );
        onChange(val, options, employee);
      }}
      filterOption={false}
      optionLabelProp="label"
      placeholder="请输入员工名称或编码"
      notFoundContent={fetching ? <Spin size="small" /> : null}
      onFocus={onFocus}
    >
      {employeeList?.map(item => (
        <Option
          value={item[valueKey]!}
          label={`${item.employeeCode}\\${item.employeeName}`}
          key={item.employeeCode}
        >
          <div>
            <span style={{ marginRight: '20px' }}>{item.employeeCode}</span>
            <span>{item.employeeName}</span>
          </div>
        </Option>
      ))}
    </Select>
  );
};

export default React.memo(EmployeeSelect);