cjd-parkball/src/components/page/left-right/index.js

> 中后台业务组件库，中后台就像公园，进入需要买门票（登录），所以以 Parkball(公园球) 命名，公园内必定捕获！作为一个组件库，提供使用方法文档，方便开发者的调用

import React from 'react'
import PropTypes from 'prop-types'
import './index.scss'

export default class TreeLayout extends React.Component {
  static defaultProps = {
    leftBlockWidth: 200,
    tree: null,
  }

  static propTypes = {
    leftBlockWidth: PropTypes.number,
    tree: PropTypes.element,
  }

  state = {
    blockVisible: true,
  }

  calcComponentWidth (blockVisible) {
    const leftBlockWidth = blockVisible ? this.props.leftBlockWidth + 12 : 0
    return leftBlockWidth
  }

  hideTree = () => {
    this.setState({
      blockVisible: !this.state.blockVisible,
    })
  }

  render () {
    const {
      tree = null, children = null,
    } = this.props
    const { blockVisible } = this.state
    const componentWidth = this.calcComponentWidth(blockVisible)

    return (
      <div className="pk-horizontal-layout-container">
        <div className="pk-left-container" style={{ width: this.props.leftBlockWidth }}>
          <i onClick={this.hideTree} className={`pk-block-control terminus-sapp ${blockVisible ? 'anticon-mulushouqi' : 'anticon-muluzhankai'}`} />
          <div style={{ display: blockVisible ? 'block' : 'none' }}>
            {tree}
          </div>
        </div>
        <div className="pk-right-container" style={{width: componentWidth ? `calc(100% - ${componentWidth}px)`: '100%'}}>
          {children}
        </div>
      </div>
    )
  }
}