boldr-ui/Accordion/Accordion.js

UI components for Boldr

"use strict";

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

var _toConsumableArray2 = require("babel-runtime/helpers/toConsumableArray");

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require("babel-runtime/helpers/createClass");

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require("babel-runtime/helpers/inherits");

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var Accordion = function (_Component) {
  (0, _inherits3.default)(Accordion, _Component);

  function Accordion(props) {
    (0, _classCallCheck3.default)(this, Accordion);

    var _this = (0, _possibleConstructorReturn3.default)(this, (Accordion.__proto__ || (0, _getPrototypeOf2.default)(Accordion)).call(this, props));

    var activeItems = _this.preExpandedItems();
    _this.state = {
      activeItems: activeItems,
      accordion: true
    };
    _this.renderItems = _this.renderItems.bind(_this);
    return _this;
  }

  (0, _createClass3.default)(Accordion, [{
    key: "preExpandedItems",
    value: function preExpandedItems() {
      var _this2 = this;

      var activeItems = [];
      _react2.default.Children.map(this.props.children, function (item, index) {
        if (item.props.expanded) {
          if (_this2.props.accordion) {
            if (activeItems.length === 0) {
              activeItems.push(index);
            }
          } else {
            activeItems.push(index);
          }
        }
      });
      return activeItems;
    }
  }, {
    key: "handleClick",
    value: function handleClick(key) {
      var activeItems = this.state.activeItems;

      if (this.props.accordion) {
        activeItems = activeItems[0] === key ? [] : [key];
      } else {
        activeItems = [].concat((0, _toConsumableArray3.default)(activeItems));
        var index = activeItems.indexOf(key);
        var isActive = index > -1;
        if (isActive) {
          // remove active state
          activeItems.splice(index, 1);
        } else {
          activeItems.push(key);
        }
      }
      this.setState({
        activeItems: activeItems
      });

      this.props.onChange(this.props.accordion ? activeItems[0] : activeItems);
    }
  }, {
    key: "renderItems",
    value: function renderItems() {
      var _this3 = this;

      var _props = this.props,
          accordion = _props.accordion,
          children = _props.children;


      return _react2.default.Children.map(children, function (item, index) {
        var key = index;
        var expanded = _this3.state.activeItems.indexOf(key) !== -1 && !item.props.disabled;

        return _react2.default.cloneElement(item, {
          disabled: item.props.disabled,
          accordion: accordion,
          expanded: expanded,
          key: "boldrui-accordion__item-" + key,
          onClick: _this3.handleClick.bind(_this3, key)
        });
      });
    }
  }, {
    key: "render",
    value: function render() {
      var children = this.props.children;

      return _react2.default.createElement(
        "div",
        { className: "boldrui-accordion" },
        this.renderItems()
      );
    }
  }]);
  return Accordion;
}(_react.Component);

Accordion.defaultProps = {
  accordion: true,
  onChange: function onChange() {}
};
Accordion.propTypes = process.env.NODE_ENV !== "production" ? {
  accordion: require("prop-types").bool.isRequired,
  children: typeof ReactChildren === "function" ? require("prop-types").instanceOf(ReactChildren).isRequired : require("prop-types").any.isRequired,
  className: require("prop-types").string.isRequired,
  onChange: require("prop-types").func.isRequired
} : {};
exports.default = Accordion;