86 lines
2.8 KiB
JavaScript
86 lines
2.8 KiB
JavaScript
|
import { Icon} from 'antd';
|
||
|
|
import React from 'react';
|
||
|
|
import cloneDeep from 'lodash/cloneDeep'
|
||
|
|
import './index.less'
|
||
|
|
|
||
|
|
|
||
|
|
export class PrjTaskLayout extends React.Component {
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
this.state = {
|
||
|
|
showLeft:props.defaultShowLeft || true,
|
||
|
|
isHover:false,
|
||
|
|
leftWidth:props.leftWidth || 250,
|
||
|
|
treeWidth:props.treeWidth || 250
|
||
|
|
//showRight:false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
componentWillReceiveProps(nextProps){
|
||
|
|
if(this.props.showRight !== nextProps.showRight){
|
||
|
|
// this.showright(nextProps.showRight);
|
||
|
|
this.rightShowCo(nextProps.showRight);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
componentDidMount(props){
|
||
|
|
let $this = $(this.refs._container)
|
||
|
|
let handle = $this.find(this.props.handle)
|
||
|
|
// let isDrag = false;
|
||
|
|
// let _timer =
|
||
|
|
$this.click(function(){
|
||
|
|
rightShowCo(false);
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
leftShowCo(e){
|
||
|
|
const {showLeft,leftWidth,treeWidth} = this.state;
|
||
|
|
const { onLeftChange,leftCom} = this.props;
|
||
|
|
if(showLeft){
|
||
|
|
jQuery(".three-side-right").animate({width:0},300,"linear",onLeftChange && onLeftChange(false))
|
||
|
|
}else{
|
||
|
|
jQuery(".three-side-right").animate({width:leftCom? leftWidth:treeWidth},300,"linear",onLeftChange && onLeftChange(true))
|
||
|
|
}
|
||
|
|
this.setState({showLeft:!showLeft});
|
||
|
|
e.stopPropagation();
|
||
|
|
e.preventDefault();
|
||
|
|
e.nativeEvent.preventDefault();
|
||
|
|
}
|
||
|
|
|
||
|
|
rightShowCo(showRight){
|
||
|
|
// const {showLeft,leftWidth,treeWidth} = this.state;
|
||
|
|
const { rightCom,rightWidth} = this.props;
|
||
|
|
if(showRight){
|
||
|
|
jQuery(".prj-layout-right").animate({width:0},300,"linear")
|
||
|
|
}else{
|
||
|
|
jQuery(".prj-layout-right").animate({width:rightCom? rightWidth:0},300,"linear")
|
||
|
|
}
|
||
|
|
//this.setState({showLeft:!showLeft});
|
||
|
|
// e.stopPropagation();
|
||
|
|
// e.preventDefault();
|
||
|
|
// e.nativeEvent.preventDefault();
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const {leftCom,rightCom,rightWidth} = this.props;
|
||
|
|
return (
|
||
|
|
<div className="wea-prj-task-layout">
|
||
|
|
<div className="prj-layout-right" style={{width: 0}}>
|
||
|
|
<div className="prj-layout-board" style={{width:rightWidth}}>
|
||
|
|
<div style={{background:"#fff",height:"100%"}} style={{width:rightWidth}}>
|
||
|
|
{rightCom && rightCom}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="prj-layout-left">
|
||
|
|
<div className="prj-layout-container" rsf="_container">
|
||
|
|
<div style={{background:"#fff",height:"100%"}}>
|
||
|
|
{leftCom && leftCom}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|