revenge-react-components/lib/Panel/Panel.js

react-components for revenge https://github.com/buildo/revenge

'use strict';

exports.__esModule = true;

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

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; };

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _revenge = require('revenge');

var _PanelHeader = require('./PanelHeader');

var _PanelHeader2 = _interopRequireDefault(_PanelHeader);

var _PanelMenu = require('./PanelMenu');

var _lodashStringCapitalize = require('lodash/string/capitalize');

var _lodashStringCapitalize2 = _interopRequireDefault(_lodashStringCapitalize);

var _buildoReactComponents = require('buildo-react-components');

require('./panel.scss');

var Props = {
  type: _revenge.t.enums.of(['docked-top', 'docked-left', 'docked-right', 'docked-bottom', 'floating']),
  header: _revenge.t.maybe(_revenge.t.struct({
    collapse: _revenge.t.maybe(_revenge.t.struct({
      direction: _revenge.t.enums.of(['up', 'left', 'right', 'down']),
      onExpand: _revenge.t.maybe(_revenge.t.Func),
      onCollapse: _revenge.t.maybe(_revenge.t.Func),
      initiallyExpanded: _revenge.t.maybe(_revenge.t.Bool)
    })),
    content: _revenge.t.maybe(_revenge.t.ReactNode),
    title: _revenge.t.maybe(_revenge.t.Str),
    hideTitleWhenExpanded: _revenge.t.maybe(_revenge.t.Bool),
    menu: _revenge.t.maybe(_revenge.t.struct(_extends({}, _PanelMenu.Props)))
  })),
  loading: _revenge.t.maybe(_revenge.t.Bool),
  softLoading: _revenge.t.maybe(_revenge.t.Bool),
  softLoadingDelay: _revenge.t.maybe(_revenge.t.refinement(_revenge.t.Num, function (v) {
    return v >= 0;
  }, 'NonNegativeNumber')),
  children: _revenge.t.ReactNode,
  className: _revenge.t.maybe(_revenge.t.Str),
  clearMargin: _revenge.t.maybe(_revenge.t.enums.of(['top', 'left', 'right', 'bottom'])),
  style: _revenge.t.maybe(_revenge.t.Obj)
};

exports.Props = Props;

var Panel = (function (_React$Component) {
  _inherits(Panel, _React$Component);

  function Panel(props) {
    var _this = this;

    _classCallCheck(this, _Panel);

    _React$Component.call(this, props);
    this._softLoadingActive = false;
    this._softLoadingTimer = null;

    this.notifyParent = function () {
      var header = _this.props.header;

      if (header && header.collapse) {
        if (_this.state.isExpanded && header.collapse.onExpand) {
          header.collapse.onExpand();
        } else if (header.collapse.onCollapse) {
          header.collapse.onCollapse();
        }
      }
    };

    this.toggleExpanded = function () {
      _this.setState({ isExpanded: !_this.state.isExpanded }, _this.notifyParent);
    };

    this.getStyle = function () {
      var style = {};
      if (_this.props.clearMargin) {
        var marginToClear = 'margin' + _lodashStringCapitalize2['default'](_this.props.clearMargin);
        style[marginToClear] = 0;
      }
      return _extends({}, _this.props.style, style);
    };

    this.templateSoftLoading = function (_ref) {
      var softLoading = _ref.softLoading;
      var isExpanded = _ref.isExpanded;

      return softLoading && isExpanded ? _react2['default'].createElement(
        'div',
        { className: 'panel-soft-loader' },
        _react2['default'].createElement('div', { className: 'loader gradient' }),
        _react2['default'].createElement('div', { className: 'loader' })
      ) : null;
    };

    this.templateHeader = function (_ref2) {
      var header = _ref2.header;
      var isExpanded = _ref2.isExpanded;
      var toggleExpanded = _ref2.toggleExpanded;

      return header ? _react2['default'].createElement(_PanelHeader2['default'], {
        title: header.hideTitleWhenExpanded && isExpanded ? undefined : header.title,
        content: header.content,
        menu: header.menu,
        collapse: header.collapse ? {
          direction: header.collapse.direction,
          isExpanded: isExpanded,
          onToggleExpanded: toggleExpanded
        } : null }) : null;
    };

    this.templateExpandedContent = function (_ref3) {
      var children = _ref3.children;
      var loading = _ref3.loading;

      return _react2['default'].createElement(
        _buildoReactComponents.FlexView,
        { className: 'panel-content', column: true, grow: true, style: { position: 'relative' } },
        children,
        loading && _react2['default'].createElement(_buildoReactComponents.LoadingSpinner, null)
      );
    };

    this.templateCollapsedContent = function (_ref4) {
      var header = _ref4.header;
      var verticalDirection = _ref4.verticalDirection;

      return !verticalDirection && header && header.title ? _react2['default'].createElement(
        _buildoReactComponents.FlexView,
        { className: 'panel-content', column: true, grow: true },
        _react2['default'].createElement(
          _buildoReactComponents.FlexView,
          { grow: true, className: 'panel-content-title' },
          header.title
        )
      ) : null;
    };

    this.state = {
      isExpanded: props.header && props.header.collapse && typeof props.header.collapse.initiallyExpanded !== 'undefined' ? props.header.collapse.initiallyExpanded : true
    };
  }

  Panel.prototype.updateSoftLoadingState = function updateSoftLoadingState(_ref5) {
    var _this2 = this;

    var prevSoftLoading = _ref5.softLoading;
    var _props = this.props;
    var softLoading = _props.softLoading;
    var softLoadingDelay = _props.softLoadingDelay;

    if (!softLoading) {
      if (this._softLoadingTimer) {
        clearTimeout(this._softLoadingTimer);
      }
      this._softLoadingActive = false;
      if (prevSoftLoading) {
        this.forceUpdate();
      }
    } else if (!prevSoftLoading && softLoading && softLoadingDelay > 0) {
      // delay === 0 is handled without timer
      this._softLoadingTimer = setTimeout(function () {
        _this2._softLoadingActive = true;
        _this2.forceUpdate();
      }, softLoadingDelay);
    }
  };

  Panel.prototype.isSoftLoading = function isSoftLoading(_ref6) {
    var softLoading = _ref6.softLoading;
    var softLoadingDelay = _ref6.softLoadingDelay;

    return this._softLoadingActive || softLoading && softLoadingDelay === 0; // optimization for the default delay === 0;
  };

  Panel.prototype.componentDidMount = function componentDidMount() {
    this.updateSoftLoadingState({ softLoading: false });
  };

  Panel.prototype.componentDidUpdate = function componentDidUpdate(oldProps) {
    this.updateSoftLoadingState(oldProps);
  };

  Panel.prototype.componentWillUnmount = function componentWillUnmount() {
    if (this._softLoadingTimer) {
      clearTimeout(this._softLoadingTimer);
    }
  };

  Panel.prototype.getLocals = function getLocals() {
    var panelState = this.state.isExpanded ? 'expanded' : 'collapsed';
    var _props2 = this.props;
    var header = _props2.header;
    var children = _props2.children;
    var loading = _props2.loading;
    var softLoading = _props2.softLoading;
    var softLoadingDelay = _props2.softLoadingDelay;
    var type = _props2.type;
    var className = _props2.className;

    var collapsable = header && header.collapse;
    var directionClass = collapsable ? 'collapse-' + header.collapse.direction : '';
    var verticalDirection = collapsable && (collapsable.direction === 'up' || collapsable.direction === 'down');

    return {
      header: header,
      className: _classnames2['default']('panel', type, { collapsable: collapsable }, directionClass, panelState, className),
      style: this.getStyle(),
      isExpanded: this.state.isExpanded,
      toggleExpanded: this.toggleExpanded,
      verticalDirection: verticalDirection,
      children: children,
      loading: loading,
      softLoading: this.isSoftLoading({ softLoading: softLoading, softLoadingDelay: softLoadingDelay })
    };
  };

  Panel.prototype.template = function template(_ref7) {
    var header = _ref7.header;
    var children = _ref7.children;
    var loading = _ref7.loading;
    var softLoading = _ref7.softLoading;
    var className = _ref7.className;
    var style = _ref7.style;
    var isExpanded = _ref7.isExpanded;
    var toggleExpanded = _ref7.toggleExpanded;
    var verticalDirection = _ref7.verticalDirection;

    return _react2['default'].createElement(
      _buildoReactComponents.FlexView,
      { className: className, grow: true, style: style, column: true },
      this.templateSoftLoading({ softLoading: softLoading, isExpanded: isExpanded }),
      this.templateHeader({ header: header, isExpanded: isExpanded, toggleExpanded: toggleExpanded }),
      isExpanded ? this.templateExpandedContent({ children: children, loading: loading }) : this.templateCollapsedContent({ header: header, verticalDirection: verticalDirection })
    );
  };

  _createClass(Panel, null, [{
    key: 'defaultProps',
    value: {
      style: {},
      loading: false,
      softLoading: false,
      softLoadingDelay: 0
    },
    enumerable: true
  }]);

  var _Panel = Panel;
  Panel = _revenge.props(Props)(Panel) || Panel;
  Panel = _revenge.skinnable()(Panel) || Panel;
  Panel = _revenge.pure(Panel) || Panel;
  return Panel;
})(_react2['default'].Component);

exports['default'] = Panel;