kitten-components/dist/javascripts/kitten/components/expandable/expand-board.js

Front-end components library

'use strict';

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

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 _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 _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _radium = require('radium');

var _radium2 = _interopRequireDefault(_radium);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _button = require('kitten/components/buttons/button');

var _arrowIcon = require('kitten/components/icons/arrow-icon');

var _colorsConfig = require('kitten/constants/colors-config');

var _colorsConfig2 = _interopRequireDefault(_colorsConfig);

var _typography = require('kitten/helpers/utils/typography');

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 _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

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 Button = (0, _radium2.default)(_button.Button);

var ExpandBoardButton = function (_Component) {
  _inherits(ExpandBoardButton, _Component);

  function ExpandBoardButton() {
    _classCallCheck(this, ExpandBoardButton);

    return _possibleConstructorReturn(this, (ExpandBoardButton.__proto__ || Object.getPrototypeOf(ExpandBoardButton)).apply(this, arguments));
  }

  _createClass(ExpandBoardButton, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          children = _props.children,
          expandChildren = _props.expandChildren,
          expanded = _props.expanded,
          disabled = _props.disabled,
          style = _props.style,
          onClick = _props.onClick,
          ariaId = _props.ariaId;

      var defaultExpandChildren = expandChildren ? expandChildren : children;
      var buttonStyles = expanded ? _extends({}, style.base, style.expanded) : style.base;

      return _react2.default.createElement(
        Button,
        {
          icon: true,
          iconOnRight: true,
          size: 'big',
          modifier: 'helium',
          disabled: disabled,
          'aria-expanded': expanded,
          'aria-controls': ariaId,
          style: buttonStyles,
          onClick: onClick,
          type: 'button'
        },
        _react2.default.createElement(
          'div',
          null,
          expanded ? defaultExpandChildren : children,
          _react2.default.createElement(_arrowIcon.ArrowIcon, {
            version: 'solid',
            direction: expanded ? 'top' : 'bottom',
            fill: _colorsConfig2.default.background1,
            style: style.arrow
          })
        )
      );
    }
  }]);

  return ExpandBoardButton;
}(_react.Component);

ExpandBoardButton.propTypes = {
  children: _propTypes2.default.node.isRequired,
  ariaId: _propTypes2.default.string,
  expandChildren: _propTypes2.default.node,
  expanded: _propTypes2.default.bool,
  disabled: _propTypes2.default.bool,
  style: _propTypes2.default.object,
  onClick: _propTypes2.default.func
};
ExpandBoardButton.defaultProps = {
  expandChildren: null,
  expanded: false,
  disabled: false,
  style: {},
  onClick: function onClick() {},
  ariaId: ''
};

var ExpandBoardContentBase = function (_Component2) {
  _inherits(ExpandBoardContentBase, _Component2);

  function ExpandBoardContentBase() {
    _classCallCheck(this, ExpandBoardContentBase);

    return _possibleConstructorReturn(this, (ExpandBoardContentBase.__proto__ || Object.getPrototypeOf(ExpandBoardContentBase)).apply(this, arguments));
  }

  _createClass(ExpandBoardContentBase, [{
    key: 'render',
    value: function render() {
      var _props2 = this.props,
          children = _props2.children,
          ariaId = _props2.ariaId,
          style = _props2.style;


      return _react2.default.createElement(
        'div',
        { id: ariaId, style: style },
        children
      );
    }
  }]);

  return ExpandBoardContentBase;
}(_react.Component);

ExpandBoardContentBase.propTypes = {
  children: _propTypes2.default.node.isRequired,
  ariaId: _propTypes2.default.string
};
ExpandBoardContentBase.defaultProps = {
  ariaId: ''
};


var ExpandBoardContent = (0, _radium2.default)(ExpandBoardContentBase);

var ExpandBoardBase = function (_Component3) {
  _inherits(ExpandBoardBase, _Component3);

  function ExpandBoardBase() {
    var _ref;

    var _temp, _this3, _ret;

    _classCallCheck(this, ExpandBoardBase);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this3 = _possibleConstructorReturn(this, (_ref = ExpandBoardBase.__proto__ || Object.getPrototypeOf(ExpandBoardBase)).call.apply(_ref, [this].concat(args))), _this3), _this3.state = {
      expanded: false,
      isShrinking: false,
      isExpanding: false
    }, _this3.isButtonComponent = function (component) {
      return component.type === ExpandBoardButton;
    }, _this3.isContentComponent = function (component) {
      return component.type === ExpandBoardContent;
    }, _this3.growAnimation = _radium2.default.keyframes({
      '0%': { opacity: 0, maxHeight: 0 },
      '100%': { opacity: 1, maxHeight: _this3.props.animationMaxHeight }
    }, 'grow'), _this3.shrinkAnimation = _radium2.default.keyframes({
      '0%': { opacity: 1, maxHeight: _this3.props.animationMaxHeight },
      '100%': { opacity: 0, maxHeight: 0 }
    }, 'schrink'), _this3.handleAfterClick = function () {
      var _this3$state = _this3.state,
          expanded = _this3$state.expanded,
          isShrinking = _this3$state.isShrinking,
          isExpanding = _this3$state.isExpanding;


      document.activeElement.blur();
      _this3.props.onClick({ expanded: expanded, isShrinking: isShrinking, isExpanding: isExpanding });
    }, _this3.updateExpandState = function () {
      _this3.setState(function (prevState) {
        return {
          expanded: !prevState.expanded,
          isShrinking: false,
          isExpanding: false
        };
      }, _this3.handleAfterClick);
    }, _this3.handleClick = function () {
      var _this3$props = _this3.props,
          withAnimation = _this3$props.withAnimation,
          animationShrinkingDuration = _this3$props.animationShrinkingDuration;


      if (!withAnimation) return _this3.updateExpandState();

      return _this3.setState(function (prevState) {
        if (prevState.expanded) {
          return { isShrinking: true };
        }

        return { isExpanding: true };
      }, function () {
        if (_this3.state.isShrinking) {
          return setTimeout(_this3.updateExpandState, animationShrinkingDuration * 1000);
        }

        return _this3.updateExpandState();
      });
    }, _this3.contentStyle = function () {
      var _this3$props2 = _this3.props,
          withAnimation = _this3$props2.withAnimation,
          animationShrinkingDuration = _this3$props2.animationShrinkingDuration,
          animationMaxHeight = _this3$props2.animationMaxHeight;


      if (!withAnimation) return null;

      if (_this3.state.isShrinking) {
        return {
          maxHeight: animationMaxHeight,
          opacity: 1,
          animationDuration: animationShrinkingDuration + 's',
          animationDelay: 0,
          animationIterationCount: 1,
          animationFillMode: 'forwards',
          animationName: _this3.shrinkAnimation,
          animationTimingFunction: 'ease-in-out'
        };
      }

      return {
        maxHeight: 0,
        opacity: 0,
        animationDuration: '1s',
        animationDelay: 0,
        animationIterationCount: 1,
        animationFillMode: 'forwards',
        animationName: _this3.growAnimation,
        animationTimingFunction: 'ease-in-out'
      };
    }, _temp), _possibleConstructorReturn(_this3, _ret);
  }

  _createClass(ExpandBoardBase, [{
    key: 'render',
    value: function render() {
      var _this4 = this;

      var _props3 = this.props,
          children = _props3.children,
          style = _props3.style,
          disabled = _props3.disabled,
          ariaId = _props3.ariaId;


      var button = null;
      var content = null;

      _react2.default.Children.forEach(children, function (child) {
        if (!_react2.default.isValidElement(child)) return null;

        if (_this4.isButtonComponent(child)) {
          button = _react2.default.cloneElement(child, {
            disabled: disabled,
            expanded: _this4.state.expanded,
            onClick: _this4.handleClick,
            style: styles.button,
            ariaId: ariaId
          });
        }

        if (_this4.isContentComponent(child)) {
          content = _react2.default.cloneElement(child, {
            ariaId: ariaId,
            style: _this4.contentStyle()
          });
        }
      });

      return _react2.default.createElement(
        'div',
        { style: style },
        button,
        this.state.expanded && content
      );
    }
  }]);

  return ExpandBoardBase;
}(_react.Component);

ExpandBoardBase.Button = ExpandBoardButton;
ExpandBoardBase.Content = ExpandBoardContent;
ExpandBoardBase.propTypes = {
  children: _propTypes2.default.node.isRequired,
  disabled: _propTypes2.default.bool,
  style: _propTypes2.default.object,
  onClick: _propTypes2.default.func,
  ariaId: _propTypes2.default.string.isRequired,
  withAnimation: _propTypes2.default.bool,
  animationMaxHeight: _propTypes2.default.string,
  animationShrinkingDuration: _propTypes2.default.number
};
ExpandBoardBase.defaultProps = {
  disabled: false,
  style: {},
  onClick: function onClick() {},
  ariaId: 'k-ExpandBoard',
  withAnimation: false,
  animationMaxHeight: '100vh',
  animationShrinkingDuration: 0.5
};


var styles = {
  button: {
    base: {
      width: '100%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      lineHeight: '1.3rem',
      padding: (0, _typography.pxToRem)(22) + ' ' + (0, _typography.pxToRem)(30)
    },
    expanded: {
      backgroundColor: _colorsConfig2.default.font1,
      borderColor: _colorsConfig2.default.font1
    },
    arrow: {
      width: (0, _typography.pxToRem)(8),
      height: '0.75rem', // half of button base line-height
      marginLeft: (0, _typography.pxToRem)(10)
    }
  }
};

var ExpandBoard = exports.ExpandBoard = (0, _radium2.default)(ExpandBoardBase);