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

Front-end components library

'use strict';

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

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 _expandBoard = require('kitten/components/expandable/expand-board');

var _list = require('kitten/components/lists/list');

var _grid = require('kitten/components/grid/grid');

var _text = require('kitten/components/typography/text');

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

var _colorsConfig2 = _interopRequireDefault(_colorsConfig);

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 ExpandBoardWithButtonItemList = exports.ExpandBoardWithButtonItemList = function (_Component) {
  _inherits(ExpandBoardWithButtonItemList, _Component);

  function ExpandBoardWithButtonItemList() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, ExpandBoardWithButtonItemList);

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

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ExpandBoardWithButtonItemList.__proto__ || Object.getPrototypeOf(ExpandBoardWithButtonItemList)).call.apply(_ref, [this].concat(args))), _this), _this.list = [{
      size: 'Size XS',
      availability: 'Availability: 10/30',
      disabled: false
    }, {
      size: 'Size M',
      availability: 'Availability: 10/30',
      disabled: true
    }, {
      size: 'Size XXL',
      availability: 'Availability: 10/30',
      disabled: false
    }], _this.state = {
      isShrinking: false,
      expanded: false
    }, _this.handleClick = function (_ref2) {
      var isShrinking = _ref2.isShrinking,
          expanded = _ref2.expanded;

      _this.setState({ isShrinking: isShrinking, expanded: expanded });
    }, _this.buttonListItemStyle = function (key) {
      if (!_this.props.withAnimation) return null;

      if (_this.state.expanded) {
        return [styles.buttonListItem.expandAnimation, { animationDelay: 0.2 * key + 's' }];
      }

      return [styles.buttonListItem.shrinkAnimation, { animationDelay: 0.1 * key + 's' }];
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

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

      var _props = this.props,
          withAnimation = _props.withAnimation,
          expandedButtonText = _props.expandedButtonText,
          buttonText = _props.buttonText;

      return _react2.default.createElement(
        _expandBoard.ExpandBoard,
        { onClick: this.handleClick, withAnimation: withAnimation },
        _react2.default.createElement(
          _expandBoard.ExpandBoard.Button,
          { expandChildren: expandedButtonText },
          buttonText
        ),
        _react2.default.createElement(
          _expandBoard.ExpandBoard.Content,
          null,
          _react2.default.createElement(
            _list.List,
            null,
            this.list.map(function (item, key) {
              return _react2.default.createElement(
                _list.List.ButtonItem,
                {
                  key: item.size,
                  disabled: item.disabled,
                  style: _this2.buttonListItemStyle(key)
                },
                _react2.default.createElement(
                  'div',
                  { style: styles.buttonListItem.base },
                  _react2.default.createElement(
                    _text.Text,
                    {
                      tag: 'p',
                      weight: 'regular',
                      color: 'font1',
                      size: 'tiny',
                      style: styles.buttonListItem.content
                    },
                    item.size
                  ),
                  _react2.default.createElement(
                    _text.Text,
                    {
                      tag: 'small',
                      color: item.disabled ? 'font2' : 'font1',
                      size: 'micro'
                    },
                    item.availability
                  )
                )
              );
            })
          )
        )
      );
    }
  }]);

  return ExpandBoardWithButtonItemList;
}(_react.Component);

var fadeInAnimation = _radium2.default.keyframes({
  '0%': { opacity: 0 },
  '100%': { opacity: 1 }
}, 'fadeIn');

var fadeOutAnimation = _radium2.default.keyframes({
  '0%': { opacity: 1, height: 'auto' },
  '100%': { opacity: 0, height: 0 }
}, 'fadeOut');

var styles = {
  buttonListItem: {
    content: {
      margin: 0,
      padding: 0,
      lineHeight: '1.2rem'
    },
    base: {
      margin: '1rem 0',
      padding: 0
    },
    expandAnimation: {
      opacity: 0,
      animationDuration: '1s',
      animationIterationCount: 1,
      animationFillMode: 'forwards',
      animationName: fadeInAnimation,
      animationTimingFunction: 'ease-in-out'
    },
    shrinkAnimation: {
      opacity: 1,
      animationDuration: '.6s',
      animationIterationCount: 1,
      animationFillMode: 'forwards',
      animationName: fadeOutAnimation,
      animationTimingFunction: 'ease-in-out'
    }
  }
};