Collapse Re-Flex demo

re-flex-demo-collapse.jsx

/////////////////////////////////////////////////////////
// Re-Flex Size Collapsible element demo
//
/////////////////////////////////////////////////////////
class CollapsibleElementCls extends React.Component {

  componentWillReceiveProps (nextProps) {

    if (this.props.onCollapse && 
        this.getSize() < this.props.threshold) {

       this.props.onCollapse()
    }
  }

  getSize () {

    const domElement = ReactDOM.findDOMNode(this)

    switch (this.props.orientation) {

      case 'horizontal':
        return domElement.offsetHeight

      case 'vertical':
        return domElement.offsetWidth

      default:
        return 0
    }
  }

  render () {

    return (
      <ReflexElement {...this.props}>
        <div className="pane-content">
         <label>
            I will collapse when I get smaller than 
            &nbsp;{this.props.threshold}px
          </label>
        </div>
      </ReflexElement>
    )
  }
}

const CollapsibleElement = React.forwardRef((props, ref) => {
  return (
    <CollapsibleElementCls innerRef={ref} {...props}/>
  )
})

class ReflexCollapseDemo
  extends React.Component {

  constructor (props) {

    super (props)

    this.state = {
      collapseRight: false,
      collapseLeft: false
    }
  }

  collapseLeft (collapseLeft) {

    this.setState({
      ...this.state, 
      collapseLeft
    })
  }

  collapseRight (collapseRight) {

    this.setState({
      ...this.state, 
      collapseRight
    })
  }

  render () {

    return (
      <ReflexContainer orientation="horizontal">

        <ReflexElement className="header" minSize={30} maxSize={30}>    
          <div style={{margin: '6px'}}>  
            {
              this.state.collapseLeft &&
              <button onClick={() => this.collapseLeft(false)}>
                <label> Show Left Pane </label>
              </button>
            }
            {
              this.state.collapseRight &&
              <button onClick={() => this.collapseRight(false)}>
                <label> Show Right Pane </label>
              </button>
            }
          </div>  
        </ReflexElement>  

        <ReflexElement>

          <ReflexContainer orientation="vertical">

            {
              !this.state.collapseLeft &&
              <CollapsibleElement className="left-pane" 
                onCollapse={() => this.collapseLeft(true)}
                threshold={40}
              />
            }

            {
              !this.state.collapseLeft &&
              <ReflexSplitter propagate={true}/>
            }

            <ReflexElement minSize={100} className="middle-pane">
              <div className="pane-content">
                <label>
                  Minimum size: <br/> 100 px
                </label>
              </div>
            </ReflexElement>

            {
              !this.state.collapseRight &&
              <ReflexSplitter propagate={true}/>
            }

             {
              !this.state.collapseRight &&
              <CollapsibleElement className="right-pane" 
                onCollapse={() => this.collapseRight(true)}
                threshold={60}
              />
             }

          </ReflexContainer>

        </ReflexElement>

      </ReflexContainer>
    )
  }
}