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

Basic UX components

'use strict';

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

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _DefaultPane2 = _interopRequireDefault(_DefaultPane);

var _moreVertIcon = require('part:@lyra/base/more-vert-icon');

var _moreVertIcon2 = _interopRequireDefault(_moreVertIcon);

var _default = require('part:@lyra/components/buttons/default');

var _default2 = _interopRequireDefault(_default);

var _Styleable = require('../utilities/Styleable');

var _Styleable2 = _interopRequireDefault(_Styleable);

var _scrollContainer = require('part:@lyra/components/utilities/scroll-container');

var _scrollContainer2 = _interopRequireDefault(_scrollContainer);

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

class Pane extends _react2.default.PureComponent {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.state = {
      headerStyle: {
        opacity: 0,
        boxShadow: 'none'
      }
    }, this.handleMenuToggle = event => {
      if (this.props.isCollapsed) {
        this.props.onExpand(event);
      } else {
        this.props.onMenuToggle(event);
      }
    }, this.handleToggle = event => {
      if (this.props.isCollapsed) {
        this.props.onExpand(this);
      } else {
        this.props.onCollapse(this);
      }
    }, this.setScrollShadow = scrollTop => {
      const threshold = 100;
      if (scrollTop < threshold) {
        const ratio = scrollTop / threshold;
        this.setState({
          headerStyle: {
            opacity: ratio + 0.5,
            boxShadow: `0 2px ${3 * ratio}px rgba(0, 0, 0, ${ratio * 0.3})`
          }
        });
      } else {
        this.setState({
          headerStyle: {
            opacity: 1,
            boxShadow: '0 2px 3px rgba(0, 0, 0, 0.3)'
          }
        });
      }

      if (scrollTop < 0) {
        this.setState({
          headerStyle: {
            boxShadow: 'none'
          }
        });
      }
    }, this.handleContentScroll = event => {
      this.setScrollShadow(event.target.scrollTop);
    }, _temp;
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.scrollTop !== this.props.scrollTop) {
      this.setScrollShadow(nextProps.scrollTop);
    }
  }

  render() {
    var _props = this.props;
    const title = _props.title,
          children = _props.children,
          isSelected = _props.isSelected,
          renderFunctions = _props.renderFunctions,
          renderMenu = _props.renderMenu,
          isCollapsed = _props.isCollapsed,
          styles = _props.styles;


    return _react2.default.createElement(
      'div',
      {
        className: `
          ${isCollapsed ? styles.isCollapsed : styles.root}
          ${isSelected ? styles.isActive : styles.isDisabled}
        `,
        ref: this.setRootElement
      },
      _react2.default.createElement(
        'div',
        {
          className: styles.header,
          style: {
            boxShadow: isCollapsed ? '' : this.state.headerStyle.boxShadow
          }
        },
        _react2.default.createElement(
          'div',
          { className: styles.headerContent },
          _react2.default.createElement(
            'h2',
            { className: styles.title, onClick: this.handleToggle },
            title
          ),
          renderFunctions(isCollapsed)
        ),
        _react2.default.createElement(
          'div',
          { className: styles.menuWrapper },
          _react2.default.createElement(
            'div',
            { className: styles.menuButtonContainer },
            renderMenu(isCollapsed) && _react2.default.createElement(_default2.default, {
              kind: 'simple',
              icon: _moreVertIcon2.default,
              onClick: this.handleMenuToggle,
              className: styles.menuButton
            })
          ),
          _react2.default.createElement(
            'div',
            { className: styles.menuContainer },
            renderMenu(isCollapsed)
          )
        ),
        _react2.default.createElement('div', {
          className: styles.headerBackground,
          style: {
            opacity: isCollapsed ? '' : this.state.headerStyle.opacity
          }
        })
      ),
      _react2.default.createElement(
        'div',
        { className: styles.main },
        _react2.default.createElement(
          _scrollContainer2.default,
          {
            className: styles.scrollContainer,
            onScroll: this.handleContentScroll
          },
          children
        )
      )
    );
  }
}

Pane.propTypes = {
  title: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node]),
  isCollapsed: _propTypes2.default.bool,
  onExpand: _propTypes2.default.func,
  onCollapse: _propTypes2.default.func,
  minWidth: _propTypes2.default.number,
  width: _propTypes2.default.number,
  renderMenu: _propTypes2.default.func,
  renderFunctions: _propTypes2.default.func,
  children: _propTypes2.default.node,
  isSelected: _propTypes2.default.bool,
  onMenuToggle: _propTypes2.default.func,
  className: _propTypes2.default.string,
  styles: _propTypes2.default.object,
  scrollTop: _propTypes2.default.number
};
Pane.defaultProps = {
  title: 'Untitled',
  isCollapsed: false,
  className: '',
  isScrollable: true,
  minWidth: 0,
  width: 0,
  styles: {},
  children: _react2.default.createElement('div', null),
  onCollapse() {},
  onExpand() {},
  renderMenu() {
    return false;
  },
  renderFunctions() {},
  isActive: false,
  updateId: 0,
  scrollTop: undefined,
  onMenuToggle() {
    return true;
  }
};
exports.default = (0, _Styleable2.default)(Pane, _DefaultPane2.default);