forgeplus-react/src/forge/DevOps/Dispose/PipelineName.jsx

import React , { useEffect , useState } from 'react';
import { Modal , Input , Select } from 'antd';
const { Option }= Select;

const EVENT = ["push","pull_request","tag","cron","custom","promote","rollback"]
function PipelineName({visible,onCancel,onOk,value ,branchList}){
  const [ name , setName ] = useState(undefined);
  const [ branchValue , setBranchValue ] = useState(undefined);
  const [ eventValue , setEventValue ] = useState(EVENT[0]);

  useEffect(()=>{
    if(branchList && branchList.length>0){
      setBranchValue(branchList[0].name);
    }
  },[branchList])

  useEffect(()=>{
    if(value){
      setName(value.pipeline_name);
      setBranchValue(value.branch);
      setEventValue(value.event);
    }
  },[value])

  function onSure(){
    onOk(name,value && value.id,branchValue,eventValue);
  }
  return(
    <Modal
      visible={visible}
      title="流水线名称"
      width={"500px"}
      onCancel={onCancel}
      onOk={onSure}
      centered={true}
    >
      <div className="choosenList">
        <span>流水线名称:</span>
        <Input value={name} onChange={(e)=>setName(e.target.value)} placeholder="请输入名称" style={{width:"340px",margin:"6px 0px"}}/>
      </div>
      <div className="choosenList mt20">
        <span>触发条件:</span>
        <Select value={branchValue} style={{width:"150px"}} onChange={(e)=>setBranchValue(e)}>
          {
            branchList && branchList.length>0 && branchList.map((item,key)=>{
              return(
                <Option value={item.name} key={key}>{item.name}</Option>
              )
            })
          }
        </Select>
        <Select mode="multiple" allowClear value={eventValue} style={{width:"180px",marginLeft:"10px"}} onChange={(e)=>{console.log(e);setEventValue(e)}}>
          {
            EVENT.map((item,key)=>{
              return(
                <Option value={item} key={key}>{item}</Option>
              )
            })
          }
        </Select>
      </div>
    </Modal>
  )
}
export default PipelineName;