forgeplus-react/src/forge/Issues/Component/editMenus.jsx

import React ,{ useState , useEffect , useRef } from 'react';
import { Dropdown , Menu , Input, message } from 'antd';
import { findDOMNode } from 'react-dom';
import { getImageUrl } from 'educoder';

const { Search } = Input;

// name：显示的标题
// list[]：选项
// value[]：显示的值
// onAdd：标记管理、只针对标记
// searchFlag：是否显示搜索输入框
// editFlag：是否有编辑按钮
// double：可多选
// onChange:选择项后返回id数组
function EditMenus({ name , emptyName='未设置',list,value , onAdd , searchFlag , editFlag , searchFunc ,double , onChange , imgFlag}){
  const [ menus , setMenus ] = useState([]);
  const [ searchValue , setSearchValue ]= useState(undefined);
  const [ showValue , setShowValue ] = useState(undefined);
  const [ valueId , setValueId ] = useState([]);
  const [ visible , setVisible ] = useState(false);

  const refFa = useRef(null);
  const refBox = useRef(null);

  useEffect(()=>{
    setMenus(list);
    if(value && value.length>0 && list && list.length>0){
      let n = value.map(item=>{
        let n = list.filter(j=>j.id.toString() === item);
        return n.length>0 && n[0].name;
      });
      setValueId(value);
      setShowValue(n.join(","));
    }
  },[list,value])

  useEffect(() => {
    document.addEventListener('click', clickMe , false);
  }, [])

  const clickMe = ({ target }) => {
    // 查找父组件
    const faComponent = findDOMNode(refFa.current);
    const boxComponent = findDOMNode(refBox.current);
    if (faComponent && boxComponent) {
      const isChild = faComponent.contains(target);
      const isBox = boxComponent.contains(target);
      if(!isChild && !isBox){
        setVisible(false);
      }
    }
  }

  function chooseMenu(i){
    setVisible(false);
    let l = valueId;
    let idStr = i && i.id ? i.id.toString() :i.name;
    // 分支列表没有id，只能根据name判断
    if(double){
      if(l.indexOf(idStr)>=0){
        l = l.filter(k=>k.toString() !== idStr);
      }else{
        if(valueId.length > double){
          message.info(`最多只能添加${double}个${name}`);
          return;
        }
        l.push(idStr);
      }
      setValueId(l);
      console.log(l);
      let nameList = i && i.id ? getByid(l) : getByName(l);
      setShowValue(nameList.length >0 ? nameList.join(",") : undefined);
      onChange(l);
    }else{
      if(l.indexOf(idStr)>=0){
        setValueId([]);
        onChange([]);
        setShowValue(undefined);
      }else{
        setValueId([`${i.id || i.name}`]);
        onChange([`${i.id || i.name}`]);
        setShowValue(i.name);
      }
    }
  }

  function getByid(l){
    return l.length>0 ? l.map(item=>{
      let n = list.filter(j=>j.id.toString() === item);
      return n.length>0 && n[0].name;
    }) :"";
  }
  function getByName(l){
    return l.length>0 ? l.map(item=>{
      let n = list.filter(j=>j.name === item);
      return n.length>0 && n[0].name;
    }) :"";
  }

  // 搜索
  function changeSearchvalue(e){
    setSearchValue(e.target.value);
    searchFunc(e.target.value);
  }


  return(
    <li>
      <span>
        {name}
        {!editFlag && <a ref={refBox} onClick={()=>setVisible(visible ? false : true)}><i className="iconfont icon-a-bianji12 font-13" style={{color:"#898d9d"}}></i></a>}
      </span>
      <Dropdown 
        visible={visible} 
        overlayClassName={"overlayStyle"} 
        placement="bottomLeft" 
        trigger={['click']} 
        overlay={
          <div className="branch-tagBox" ref={refFa}>
            { searchFlag && 
              <div className="searchbox">
                <Search   
                  placeholder={`搜索${name}`} 
                  value={searchValue} 
                  onChange={changeSearchvalue} 
                  style={{marginRight:"18px"}}
                />
              </div>
            }
            {
              menus && menus.length >0?
              <Menu className="piecemenu" selectedKeys={valueId}>
                {
                  menus.map((i,k)=>{
                    return(
                      <Menu.Item key={i.id || i.name} onClick={()=>chooseMenu(i)}>
                        { imgFlag && <img src={getImageUrl(i.image_url)} alt="" width="22px" className="mr5 radius"/>}
                        {i.color && <span style={{backgroundColor:i.color}} className="colorpiece"></span>}
                        {i.name}
                      </Menu.Item>
                    )
                  })
                }
              </Menu>
              :
              <div className="menusEmpty">
                <p>{searchValue ?  <span>暂无{name}“{searchValue}”</span>: `暂无${name}`}</p>
                { name === "标记" && <a className="color-blue font-15" onClick={()=>{setVisible(false);onAdd()}}><i className="iconfont icon-a-bianji12 font-14 mr5"></i>标记管理</a>}
              </div>
            }
          </div>
        }>
        <p className={showValue?"operatevalue color-grey-3 task-hide":"operatevalue task-hide"}>{showValue || emptyName}</p>
      </Dropdown>
    </li>
  )
}
export default EditMenus;