@lyra/components/lib/panes/Controller.js

Basic UX components

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _debounce2 = require('lodash/debounce');

var _debounce3 = _interopRequireDefault(_debounce2);

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Controller = require('./styles/Controller.css');

var _Controller2 = _interopRequireDefault(_Controller);

var _DefaultPane = require('./DefaultPane');

var _DefaultPane2 = _interopRequireDefault(_DefaultPane);

var _elementResizeDetector = require('element-resize-detector');

var _elementResizeDetector2 = _interopRequireDefault(_elementResizeDetector);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

class PanesController extends _react2.default.Component {

  constructor(props) {
    super();
    this._elementResizeDetector = (0, _elementResizeDetector2.default)({ strategy: 'scroll' });

    this.updatePanesStatus = panes => {
      console.log('Update Panes Status'); // eslint-disable-line

      const newPanesStatus = _react2.default.Children.toArray(panes).map((pane, i) => {
        const minWidth = pane.props.minWidth;
        const width = this.panesStatus[i] && this.panesStatus[i].element && this.panesStatus[i].element.offsetWidth;
        let isCollapsed = this.panesStatus[i] && this.panesStatus[i].isCollapsed;

        if (width < minWidth) {
          isCollapsed = true;
        }

        return {
          isCollapsed: isCollapsed,
          minWidth: minWidth,
          width: width || null,
          element: this.panesStatus[i] && this.panesStatus[i].element,
          isSelected: this.props.selectedIndex === i
        };
      });

      console.log('old', this.panesStatus); // eslint-disable-line
      this.panesStatus = newPanesStatus;
      console.log('new', this.panesStatus); // eslint-disable-line

      // if (newPanesStatus.length < this.panesStatus.length) {
      //   this.panesStatus = this.panesStatus.slice(0, newPanesStatus.length)
      //   console.log('remove pane', this.panesStatus)
      // } else {
      //   this.panesStatus = this.panesStatus.concat(
      //     newPanesStatus.slice()
      //   )
      //   console.log('new pane', this.panesStatus)
      // }
    };

    this.applyPanesStatusToState = () => {
      console.log('Applying PanesStatus To State'); // eslint-disable-line
      // const panesState = this.panesStatus(pane => {
      //   return {isCollapsed: pane.isCollapsed}
      // })
      // this.setState({
      //   panesState: panesState
      // })
    };

    this.handleResize = (0, _debounce3.default)(event => {
      // this.setWidth()
      // this.checkPanes()
    }, 400);

    this.setWidth = () => {
      this.width = this._rootElement.offsetWidth;
    };

    this.setRootElement = element => {
      console.log('Set root elment'); // eslint-disable-line
      this._rootElement = element;
    };

    this.checkPanes = panes => {
      console.log('Check panes'); // eslint-disable-line

      let totalMinWidth = 0;

      panes.forEach(pane => {
        if (pane.element) {
          pane.width = pane.element.offsetWidth;

          if (pane.isCollapsed) {
            totalMinWidth += 30;
          } else {
            totalMinWidth += pane.minWidth;
          }
        } else {
          console.log('no element'); // eslint-disable-line
        }

        this.render();
      });

      if (totalMinWidth < this.width) {
        console.log('totalMinWidth', totalMinWidth); //eslint-disable-line
        this.expandAll();
      } else {
        console.log('collapse some', totalMinWidth, '<', this.width); // eslint-disable-line
        this.collapseSome(panes);
      }
    };

    this.expandAll = panes => {
      console.log('Expand All Panes'); // eslint-disable-line
      this.panesStatus = this.panesStatus.map(pane => {
        pane.isCollapsed = false;
        return pane;
      });
      this.render();
    };

    this.collapseSome = panes => {
      console.log('Collapse some'); // eslint-disable-line
      // this.applyPanesStatusToState()
    };

    this.setPaneElement = (element, i) => {
      if (element) {
        this.panesStatus[i].element = element;
      }
    };

    this.state = {
      currentSelectedIndex: props.selectedIndex,
      updateId: 0,
      panesState: []
    };

    this.width = 0;

    this.panesStatus = _react2.default.Children.toArray(props.children).map((pane, i) => {
      return {
        isCollapsed: false,
        minWidth: pane.props.minWidth,
        width: pane.props.minWidth + 1,
        element: null,
        isSelected: props.selectedIndex === i
      };
    });
  }

  componentDidMount() {
    this.setWidth();
    this.updatePanesStatus(this.props.children);
    this.checkPanes(this.props.children);
    // this._elementResizeDetector.listenTo(
    //   this._rootElement,
    //   this.handleResize
    // )
  }

  componentDidUpdate() {
    console.log('Component Did Update'); // eslint-disable-line
    this.checkPanes(this.props.children);
  }

  shouldComponentUpdate(nextProps, nextState) {
    this.updatePanesStatus(nextProps.children);

    if (nextProps.children.length !== this.props.children.length) {
      return true;
    }

    if (nextProps.selectedIndex !== this.props.selectedIndex) {
      return true;
    }

    if (nextState.panesState !== this.state.panesState) {
      return true;
    }

    return false;
  }

  componentWillUnmount() {
    this._elementResizeDetector.uninstall(this._rootElement);
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      currentSelectedIndex: nextProps.selectedIndex
    });
    // if (nextProps.children.length !== this.props.children.length) {
    //this.updatePanesStatus(nextProps.children)
    // this.checkPanes(nextProps.children)
    // }
  }
  // onResize = debounce(() => {
  //  console.log('resize')
  // }, 1000 / 60)

  // Handle click
  handleClick(index, pane, event) {
    if (pane.props.onActive) {
      pane.props.onActive(pane);
    }
    if (this.props.onChange) {
      this.props.onChange(index, pane.props.value, pane, event);
    }
  }

  // Set panes element to panesStatus


  render() {
    const children = this.props.children;
    const currentSelectedIndex = this.state.currentSelectedIndex;


    const panes = _react2.default.Children.toArray(children);

    panes.forEach(pane => {
      console.log('pane', pane);
    });

    console.log('Render panes', panes); // eslint-disable-line
    const paneElements = panes.map((pane, i) => {
      const width = this.panesStatus[i].width;
      const isSelected = i === currentSelectedIndex;
      const isCollapsed = !isSelected || !isSelected && this.panesStatus[i].isCollapsed;
      return _react2.default.createElement(
        'div',
        {
          className: isCollapsed ? _Controller2.default.paneCollapsed : _Controller2.default.pane,
          key: pane.props.title,
          ref: element => this.setPaneElement(element, i)
        },
        _react2.default.createElement(_DefaultPane2.default, _extends({}, pane.props, {
          index: i,
          width: width,
          isCollapsed: isCollapsed,
          isSelected: isSelected,
          updateId: this.state.updateId,
          onToggle: event => this.handleClick(i, pane, event)
        }))
      );
    });

    return _react2.default.createElement(
      'div',
      { className: _Controller2.default.root, ref: this.setRootElement },
      paneElements
    );
  }
}
exports.default = PanesController;
PanesController.propTypes = {
  children: _propTypes2.default.node.isRequired,
  selectedIndex: _propTypes2.default.number,
  onChange: _propTypes2.default.func
};