116 lines
3.6 KiB
JavaScript
116 lines
3.6 KiB
JavaScript
import React , { useState , useEffect } from 'react';
|
|
import { Popover , Input , Spin } from 'antd';
|
|
import './branch.scss';
|
|
import { getBranch , getTag } from '../GetData/getData';
|
|
|
|
|
|
export default (({ projectsId , branch , owner , changeBranch , branchList , tagflag = true })=>{
|
|
const [ showValue , setShowValue ] = useState(branch);
|
|
const [ inputValue , setInputValue] = useState(undefined);
|
|
const [ nav , setNav ] = useState(0);
|
|
const [ isSpin , setIsSpin ] = useState(true);
|
|
const [ flag , setFlag ] = useState(false);
|
|
|
|
const [ data , setData ] = useState(undefined);
|
|
const [ datas , setDatas ] = useState(undefined);
|
|
|
|
useEffect(()=>{
|
|
setShowValue(branch);
|
|
},[branch])
|
|
|
|
useEffect(()=>{
|
|
document.body.addEventListener('click', e => {
|
|
let name = e.target.className;
|
|
let turn = name === "ant-input OptionsInput" || name === "navli active"|| name === "navli" || name === "padding10 bor-bottom-greyE";
|
|
if(turn){
|
|
return;
|
|
}else{
|
|
setFlag(false);
|
|
}
|
|
})
|
|
})
|
|
|
|
useEffect(()=>{
|
|
if(branchList){
|
|
setData(branchList);
|
|
setDatas(branchList);
|
|
setIsSpin(false);
|
|
}
|
|
},[branchList])
|
|
|
|
|
|
async function getBranchs(id,owner){
|
|
let result = await getBranch(id,owner);
|
|
setData(result);
|
|
setDatas(result);
|
|
setIsSpin(false);
|
|
}
|
|
async function getTags(id,owner){
|
|
let result = await getTag(id,owner);
|
|
setData(result);
|
|
setDatas(result);
|
|
setIsSpin(false);
|
|
}
|
|
|
|
function changeInputValue(e){
|
|
setInputValue(e.target.value);
|
|
let filter = e.target.value ? data && data.length>0 && data.filter(item=>item.name.indexOf(e.target.value)>-1) : data;
|
|
setDatas(filter);
|
|
}
|
|
|
|
function changeNav(nav){
|
|
setNav(nav);
|
|
setIsSpin(true);
|
|
if(nav === 0){
|
|
getBranchs(projectsId,owner);
|
|
}else{
|
|
getTags(projectsId,owner);
|
|
}
|
|
}
|
|
function chooseitem(value){
|
|
// setShowValue(value);
|
|
changeBranch(value);
|
|
}
|
|
|
|
|
|
const menu = (
|
|
<div>
|
|
<div className="padding10 bor-bottom-greyE">
|
|
<Input
|
|
placeholder="请输入分支或标签名称搜索"
|
|
autocomplete="off" className="OptionsInput" value={inputValue}
|
|
onChange={changeInputValue} style={{width:"220px"}}
|
|
/>
|
|
<ul className="navUl">
|
|
<li className={nav === 0?"navli active":"navli"} onClick={()=>changeNav(0)}><i className="iconfont icon-fenzhi1 font-14 mr3"></i>分支列表</li>
|
|
{ tagflag && <li className={nav === 1?"navli active":"navli"} onClick={()=>changeNav(1)}><i className="iconfont icon-biaoqian3 font-14 mr3"></i>标签列表</li> }
|
|
</ul>
|
|
</div>
|
|
<Spin spinning={isSpin}>
|
|
<ul className="OptionsUl" id="ul-btn">
|
|
{
|
|
datas && datas.length>0 ?
|
|
datas.map((item,key)=>{
|
|
return(
|
|
<li key={key} onClick={()=>chooseitem(item.name)}><a className="task-hide ulALink">{item.name}</a></li>
|
|
)
|
|
}):
|
|
<p className="listTips">暂无{inputValue}{nav === 0 ?"分支":"标签"}~</p>
|
|
}
|
|
</ul>
|
|
</Spin>
|
|
</div>
|
|
);
|
|
return(
|
|
<Popover placement='bottomLeft' visible={flag} content={menu} onClick={()=>setFlag(!flag)} overlayClassName="branch-tagBox-list">
|
|
<div className="branch-tagBox">
|
|
{/* {nav === 0 ?"分支":"标签"} */}
|
|
<span className="color-grey-9 mr3 ml8"><i className="iconfont icon-fenzhi2 font-18"></i></span>
|
|
<a className="ant-dropdown-link">
|
|
{showValue}
|
|
</a>
|
|
<i className="showtag iconfont icon-xiajiantou font-14 color-grey-9 mr8" />
|
|
</div>
|
|
</Popover>
|
|
)
|
|
}) |