forgeplus-react/src/forge/Component/AddMember.jsx

// import React, { useEffect, useState } from 'react';
// import { AutoComplete , Button , Icon , Select } from 'antd';
// import axios from 'axios';
// import { getImageUrl } from 'educoder';

// const { Option } = Select;
// function AddMember({getID,login,showNotification}){
//   const [ id , setID ] = useState(undefined);
//   const [ source , setSource ] = useState(undefined);
//   const [ searchKey , setSearchKey ] = useState(undefined);
  
//   useEffect(()=>{
//       getUserList();
//   },[searchKey])

//   function getUserList(){
//     const url = `/users/list.json`;
//     axios.get(url, {
//       params: {
//         search: searchKey,
//       },
//     }).then((result) => {
//       if (result) {
//         setSource(result.data.users);
//       }
//     })
//     .catch((error) => {
//       console.log(error);
//     });
//   };

//   function changeInputUser(e){
//     setSearchKey(e);
//   };

//   // 选择用户
//   function selectInputUser(e, option){
//     setID(login ? e : option.props.login);
//     setSearchKey(option.props.name);
//   };

//   function addCollaborator(){
//     if(source && source.length>0&&searchKey){
//       getID && getID(id);
//       setSearchKey(undefined);
//       setID(undefined)
//     }else{
//       showNotification("请选择存在的用户!");
//     }
//   }

//   return(
//     <div className="addPanel">
//       <Select 
//         showSearch
//         style={{ width: 300 }}
//         placeholder="搜索需要添加的用户..."
//         className="plateAutoComplete"
//         optionFilterProp="children"
//         filterOption={(input, option) =>
//           option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
//         }
//         >
//         {source && source.length > 0 &&
//           source.map((item,key)=>{
//             return(
//               <Option value={`${item.user_id}`}
//               login={`${item.login}`}
//               name={item.username}
//               >
//                 <img
//                   className="user_img radius"
//                   width="28"
//                   height="28"
//                   src={getImageUrl(`/${item && item.image_url}`)}
//                   alt=""
//                 />
//                 <span className="ml10" style={{ verticalAlign: "middle" }}>
//                   {item.username}
//                   <span className="color-grey ml10">({item.login})</span>
//                 </span>
//               </Option>
//             )
//           })
//         }
//       </Select>
//       <Select
//         value={searchKey}
//         style={{ width: 300 }}
//         // onChange={changeInputUser}
//         onSearch={(e)=>{setSearchKey(e)}}
//         onSelect={selectInputUser}
//         placeholder="搜索需要添加的用户..."
//         allowClear
//         showSearch
//         suffixIcon={<i className="iconfont icon-sousuo1 font-14"></i>}
//       >
//         {
//           source && source.length > 0 &&
//           source.map((item,key)=>{
//             return(
//               <Option
//                 key={key}
//                 value={`${item.user_id}`}
//                 login={`${item.login}`}
//                 name={item.username}
//               >
//                 <img
//                   className="user_img radius"
//                   width="28"
//                   height="28"
//                   src={getImageUrl(`/${item && item.image_url}`)}
//                   alt=""
//                 />
//                 <span className="ml10" style={{ verticalAlign: "middle" }}>
//                   {item.username}
//                   <span className="color-grey ml10">({item.login})</span>
//                 </span>
//               </Option>
//             )
//           })
//         }
//       </Select>
//       <Button
//         type="primary"
//         ghost
//         onClick={addCollaborator}
//         className="ml15"
//       >
//         <Icon type="plus" size="16"></Icon>
//         添加成员
//       </Button>
//     </div>
//   )
// }
// export default AddMember;

import React, { useEffect, useMemo, useRef, useState } from 'react';
import debounce from 'lodash/debounce';
import { Select, Spin , Button , Icon } from 'antd';
import axios from 'axios';
import { getImageUrl } from 'educoder';
function DebounceSelect({ fetchOptions, debounceTimeout = 600,login, ...props }) {
  const [fetching, setFetching] = useState(false);
  const [options, setOptions] = useState([]);
  const fetchRef = useRef(0);

  useEffect(()=>{
    fetchOptions("").then((newOptions) => {
      setOptions(newOptions);
    });
  },[])

  const debounceFetcher = useMemo(() => {
    const loadOptions = (value) => {
      fetchRef.current += 1;
      const fetchId = fetchRef.current;
      setOptions([]);
      setFetching(true);
      fetchOptions(value).then((newOptions) => {
        if (fetchId !== fetchRef.current) {
          // for fetch callback order
          return;
        }
        setOptions(newOptions);
        setFetching(false);
      });
    };
    return debounce(loadOptions, debounceTimeout);
  }, [fetchOptions, debounceTimeout]);

  return (
    <Select
      labelInValue
      filterOption={false}
      onSearch={debounceFetcher}
      notFoundContent={fetching ? <Spin size="small" /> : null}
      {...props}
      defaultActiveFirstOption={false}
    >
      {
        options && options.length >0 &&
        options.map((i)=>{
          return(
            <Select.Option value={login ? i.value : i.login}>
              {/* <img
                className="user_img radius"
                width="28"
                height="28"
                src={getImageUrl(`/${i && i.image_url}`)}
                alt=""
              /> */}
              <span style={{ verticalAlign: "middle" }}>
                {i.label}
                <span className="color-grey ml10">({i.login})</span>
              </span>
            </Select.Option>
          )
        })
      }
    </Select>
  );
}

// Usage of DebounceSelect

async function fetchUserList(username) {
  const url = `/users/list.json`;
  let list = [];
  await axios.get(url, {
    params: {
      search: username,
    },
  }).then((result) => {
    if (result && result.data) {
      list = result.data.users && result.data.users.map((i)=>({
        label:i.username,
        value:i.user_id,
        image_url:i.image_url,
        login:i.login
      }));
    }
  })
  return list;
}
const App = ({getID,login,showNotification}) => {
  const [value, setValue] = useState([]);
  const [ chooseValue , setChooseValue ] = useState(undefined);

  function addCollaborator(){
    if(chooseValue){
      getID(chooseValue);
      setValue([])
    } else{
      showNotification("请选择存在的用户!");
    }
  }
  function selectValue(e){
    setChooseValue(e.key);
  }
  return (
    <div>
      <DebounceSelect
        value={value}
        style={{width:300}}
        login={login}
        placeholder="搜索需要添加的用户..."
        fetchOptions={fetchUserList}
        onChange={(newValue) => {
          setValue(newValue);
        }}
        showSearch
        onSelect={selectValue}
      />
      <Button
        type="primary"
        ghost
        onClick={addCollaborator}
        className="ml15"
      >
        <Icon type="plus" size="16"></Icon>
        添加成员 
      </Button>
    </div>
  );
};
export default App;