forgeplus-react/src/forge/Branch/SelectBranch.js

import React , { Component } from 'react';
import { Dropdown , Icon , Input } from 'antd';
import { getBranch } from '../GetData/getData';
import "./branch.css"
import axios from 'axios';
const $ = window.$;
class SelectBranch extends Component{
  constructor(props){
    super(props);
    this.state={
      visible:false,
      value:undefined,
      search:"branch",
      tags:undefined,
      branchsFilter:undefined,
      data:undefined
    }
  }
  componentDidMount() { 
    this.getTagList();

    document.body.addEventListener('click', e => { 
      let v= this.state.visible;
      if(e.target.className && e.target.className.animVal!=undefined) return;
        
      let s = e.target && e.target.className && e.target.className.indexOf('showtag')> -1;
      let classF =e.target && e.target.className && e.target.className.indexOf("downobject") > -1 || e.target.className==="ant-input OptionsInput";
      if(e.target && e.target.className === "ant-dropdown-trigger" || s){
        this.setState({
          visible:!v,
          value:undefined
        })
        if(!v){
          this.getBranchs();
        }
        return;
      }else if (classF) { 
        return; 
      } else{
        this.setState({
          visible:false,
          value:undefined
        })
      } 
    });             
  } 
  componentDidUpdate=(prevProps)=>{
    if(this.props.repo_id && this.props.repo_id!=prevProps.repo_id){
      this.getTagList();
    }
  }
  // 获取分支
  getBranchs=()=>{
    debugger;
    const { projectsId } = this.props;
    let result = getBranch(projectsId);
    if(result){
      this.setState({
        data:result.data
      })
      if(result.data && result.data.length>0){
        this.setState({
          search:"branch"
        })
      }
    }
  }
  getTagList=()=>{
    const { repo_id } = this.props;
    if(repo_id){
      const url = `/repositories/${repo_id}/tags.json`;
      axios.get(url).then((result)=>{
        if(result){
          this.setState({
            tags:result.data
          })
        }
      }).catch(error=>{
        console.log(error);
      })
    }
  }

  InputClick=(e)=>{
    this.stopPropagations(e);
  }

  stopPropagations=(e)=>{
    e.stopPropagation();
  }

  // 输入搜索内容
  changeValue=(e)=>{
    this.setState({
      value:e.target.value
    })
    let { branchs } = this.props;
    const { tags } = this.state;
    let array = branchs;
    if(search === "tag" && tags.length>0){
      array = tags;
    }
    let branchsFilter = e.target.value ? (array && array.length>0 && array.filter(item=>item.name.indexOf(e.target.value)>-1)) : array;
    this.setState({
      branchsFilter
    })
  }

  // 选择分支
  changeBranchs=(e,value)=>{
    e.stopPropagation();
    this.setState({
      visible:false,
      value
    })
    const { changeBranch } = this.props;
    changeBranch && changeBranch(value);
  }

  // 切换搜索的列表
  changeSearch=(search)=>{
    this.setState({
      search
    })
  }

  render(){
    const { visible , value , search , tags , branchsFilter , data } = this.state;
    const { branchs , branch } = this.props;

    
    console.log(data);
    const menu = (
      <div className="branchOptions" id="m-btn" onClick={this.stopPropagations}>
        <div className="downobject padding10 bor-bottom-greyE">
          <Input placeholder="请输入分支或标签名称搜索" autocomplete="off" id="input-btn" value={value} className="OptionsInput" onChange={this.changeValue} onClick={this.InputClick}/>
          <ul className="navUl" id="navUl-btn">
            <li className={search ==="branch"?"downobject active":"downobject"} onClick={()=>this.changeSearch("branch")}><i className="iconfont icon-fenzhi1 font-14 mr3"></i>分支列表</li>
            <li className={search ==="tag"?"downobject active":"downobject"} onClick={()=>this.changeSearch("tag")}><i className="iconfont icon-biaoqian3 font-14 mr3"></i>标签列表</li>
          </ul>
        </div>
        <ul className="OptionsUl" id="ul-btn">
          {
            data && data.length> 0 ? data.map((item,key)=>{
              return(
                <li key={key}><a className="task-hide ulALink" onClick={(e)=>this.changeBranchs(e,`${item.name}`)}>{item.name}</a></li>
              )
            })
            :
            <p className="listTips">暂无{value}{search === "tag" ?"标签":"分支"}~</p>
          }
        </ul>
      </div>
    );
    return(
      <div className="branchDropdown f-wrap-alignCenter" >
        <Dropdown overlay={menu} trigger={['click']} placement="bottomLeft" visible={visible}>
          <span id="down-btn">
            <span>
              <span className="color-grey-9 mr3">{search ==="branch"?"分支":"标签"}:</span>
              <a className="ant-dropdown-link">
                {branch} 
              </a>
            </span>
            <i className="showtag iconfont icon-xiajiantou font-14 color-grey-9" />
          </span>
        </Dropdown>
      </div>
    )
  }
}
export default SelectBranch;