forgeplus-react/src/forge/DevOps/Infos.jsx

57 lines
1.9 KiB
JavaScript

import React , { useEffect , useState , useRef } from 'react';
import { Banner } from '../Component/layout';
import { Link } from 'react-router-dom';
import Dispost from './Dispose';
import Structure from './Structure';
import styled from 'styled-components';
const Div = styled.div`{
padding:24px 30px;
}`;
export default ((props)=>{
const [ menu , setMenu ] = useState(false);
const [ permission , setPermission ] = useState("");
const childRef = useRef();
const path = props.location.pathname;
const owner = props.match.params.owner;
const projectsId = props.match.params.projectsId;
const projectDetail = props.projectDetail;
useEffect(()=>{
if(path === `/projects/${owner}/${projectsId}/devops/list`){
setMenu(true);
}else{
setMenu(false);
}
},[path])
useEffect(()=>{
if(projectDetail){
setPermission(props.projectDetail.permission);
}
},[projectDetail])
const updateChildState = () => {
// changeVal就是子组件暴露给父组件的方法
if (childRef.current) {
childRef.current.changeVal();
}
}
return(
<div className="disposePanel">
<Banner>
{ permission !=="Reporter" && <Link to={`/projects/${owner}/${props.match.params.projectsId}/devops/dispose`} className={menu===false && "color-blue"} style={{ marginRight:"66px"}}>工作流配置</Link>}
<Link to={`/projects/${owner}/${props.match.params.projectsId}/devops/list`}className={menu===true && "color-blue"}>构建列表</Link>
{ menu===true && <a onClick={updateChildState} style={{float:"right",fontSize:"14px",color:"#FF6E21",marginTop:"5px"}}>刷新</a>}
</Banner>
<Div>
{ menu === true && <Structure {...props} wrappedComponentRef={(form) => childRef.current = form} ref={childRef}/> }
{ menu === false && permission !=="Reporter" && <Dispost {...props}/> }
</Div>
</div>
)
})