backpack-ui/dist/components/accordion/accordion.js

Lonely Planet's Components

"use strict";

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

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

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _colors = require("../../styles/colors");

var _colors2 = _interopRequireDefault(_colors);

var _dimensions = require("../../styles/dimensions");

var _dimensions2 = _interopRequireDefault(_dimensions);

var _propTypes3 = require("../../utils/propTypes");

var _propTypes4 = _interopRequireDefault(_propTypes3);

var _accordionItem = require("./accordionItem");

var _accordionItem2 = _interopRequireDefault(_accordionItem);

var _createQAHook = require("../../utils/createQAHook");

var _createQAHook2 = _interopRequireDefault(_createQAHook);

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

var styles = {
  container: {
    borderTop: "1px solid " + _colors2.default.borderPrimary,
    maxWidth: _dimensions2.default.maxWidth + "px"
  }
};

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

    _this.state = {
      expandedItemId: _this.findExpandedChild()
    };

    _this.createItemId = _this.createItemId.bind(_this);
    _this.findExpandedChild = _this.findExpandedChild.bind(_this);
    _this.toggleItem = _this.toggleItem.bind(_this);
    return _this;
  }

  (0, _createClass3.default)(Accordion, [{
    key: "createItemId",
    value: function createItemId(index) {
      return this.props.id + "-accordionItem-" + (index + 1);
    }
  }, {
    key: "findExpandedChild",
    value: function findExpandedChild() {
      var _this2 = this;

      var expandedChildren = [];

      _react2.default.Children.forEach(this.props.children, function (child, index) {
        if (child.props.expanded) {
          expandedChildren.push(_this2.createItemId(index));
        }
      });

      return expandedChildren.length && expandedChildren[0];
    }
  }, {
    key: "toggleItem",
    value: function toggleItem(itemId) {
      this.setState({
        expandedItemId: this.state.expandedItemId === itemId ? null : itemId
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      var _props = this.props,
          id = _props.id,
          children = _props.children,
          style = _props.style,
          qaHook = _props.qaHook;
      var expandedItemId = this.state.expandedItemId;


      return _react2.default.createElement(
        "div",
        {
          className: "Accordion",
          id: id,
          "data-testid": qaHook ? (0, _createQAHook2.default)(qaHook, "accordion", "btn") : null,
          style: [styles.container, style],
          role: "tablist"
        },
        _react2.default.Children.map(children, function (child, index) {
          var itemId = _this3.createItemId(index);

          return _react2.default.cloneElement(child, {
            key: index,
            id: itemId,
            expanded: expandedItemId === itemId,
            onClick: function onClick() {
              _this3.toggleItem(itemId);
            }
          });
        })
      );
    }
  }]);
  return Accordion;
}(_react.Component);

Accordion.propTypes = {
  id: _propTypes2.default.string.isRequired,
  children: function children(props, propName, componentName) {
    var prop = props[propName];
    var error = null;

    _react2.default.Children.forEach(prop, function (child) {
      if (child.type !== _accordionItem2.default) {
        error = new Error(componentName + " children should be of type \"AccordionItem\".");
      }
    });

    return error;
  },
  style: _propTypes4.default.style,
  qaHook: _propTypes2.default.string
};

Accordion.defaultProps = {
  qaHook: null
};

exports.default = (0, _radium2.default)(Accordion);