人员搜索select

import { Select } from 'antd';
import React, { useState } from 'react';
import { getUser } from '@/services/common';

export interface PeopleInfoType {
  buMail: number;
  displayName: string;
  empId: string;
  lastName: string;
  nickNameCn: string;
  userDesc: string;
}

const { Option } = Select;

let timeout: ReturnType<typeof setTimeout> | null;
let currentValue: string;

const fetch = (value: string, callback: (data: { value: string; text: string }[]) => void) => {
  if (timeout) {
    clearTimeout(timeout);
    timeout = null;
  }
  currentValue = value;

  const fake = () => {
    getUser({ keywords: value })
      .then((response: any) => {
        if (currentValue === value) {
          const data = (response || []).map((item: PeopleInfoType) => ({
            value: item.displayName,
            text: item.displayName,
          }));
          callback(data);
        }
      });
  };

  timeout = setTimeout(fake, 300);
};

const PeopleSelect: React.FC<{
  placeholder?: string;
  style?: React.CSSProperties;
  mode?: any;
  disabled?: boolean
}> = (props) => {
  const [data, setData] = useState<any[]>([]);
  const [value, setValue] = useState<string>();

  const handleSearch = (newValue: string) => {
    if (newValue) {
      fetch(newValue, setData);
    } else {
      setData([]);
    }
  };

  const handleChange = (newValue: string) => {
    setValue(newValue);
  };

  const options = (data || []).map(d => <Option key={d.value}>{d.text}</Option>);

  return (
    <Select
      showSearch
      value={value}
      defaultActiveFirstOption={false}
      showArrow={false}
      filterOption={false}
      onSearch={handleSearch}
      onChange={handleChange}
      notFoundContent={null}
      {...props}
    >
      {options}
    </Select>
  );
};

export default PeopleSelect;