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

import React , { Component } from 'react';
import { Dropdown , Icon , Input } from 'antd';

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
    }
  }
  componentDidMount() { 
    document.body.addEventListener('click', e => { 
      let v= this.state.visible;
      let other = e.target && (e.target.matches('#m-btn') || e.target.matches("#navUl-btn") || e.target.matches("#input-btn")|| e.target.matches("#ul-btn"));
      let classF = e.target.className === "navs" || e.target.className === "navs active";
      if(e.target && e.target.matches("#down-btn")){
        this.setState({
          visible:!v,
          value:undefined
        })
        return;
      }else if (other || classF) { 
        return; 
      } else{
        this.setState({
          visible:false,
          value:undefined
        })
      }  
    });             
  } 
  componentDidUpdate=(prevProps)=>{
    if(this.props.repo_id && prevProps.repo_id != this.props.repo_id){
      this.getTagList();
    }
  }

  getTagList=()=>{
    const { repo_id } = this.props;
    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
    })
  }

  // 选择分支
  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 } = this.state;
    const { branchs , branch } = this.props;

    let array = branchs;
    if(search === "tag"){
      array = tags;
    }

    let branchsFilter = value ? (array && array.length>0 && array.filter(item=>item.name.indexOf(value)>-1)) : array;
    const menu = (
      <div className="branchOptions" id="m-btn" onClick={this.stopPropagations}>
        <div className="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"?"navs active":"navs"} onClick={()=>this.changeSearch("branch")}><i className="iconfont icon-fenzhi1 font-14 mr3"></i>分支列表</li>
            <li className={search ==="tag"?"navs active":"navs"} onClick={()=>this.changeSearch("tag")}><i className="iconfont icon-biaoqian3 font-14 mr3"></i>标签列表</li>
          </ul>
        </div>
        <ul className="OptionsUl" id="ul-btn">
          {
            branchsFilter && branchsFilter.map((item,key)=>{
              return(
                <li key={key}><a className="task-hide ulALink" onClick={(e)=>this.changeBranchs(e,`${item.name}`)}>{item.name}</a></li>
              )
            })
          }
        </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>
            <Icon type="down" />
          </span>
        </Dropdown>
      </div>
    )
  }
}
export default SelectBranch;