@wix/design-system/dist/cjs/SelectableAccordion/SelectableAccordion.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _Item = _interopRequireDefault(require("./Item"));
var _SelectableAccordionSt = require("./SelectableAccordion.st.css.js");
var _constants = require("./constants");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/SelectableAccordion/SelectableAccordion.jsx";
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
/** SelectableAccordion */
var SelectableAccordion = /*#__PURE__*/function (_React$PureComponent) {
  function SelectableAccordion() {
    var _this;
    (0, _classCallCheck2["default"])(this, SelectableAccordion);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper(this, SelectableAccordion, [].concat(args));
    _this.state = {
      openIndices: _this._populateInitiallyOpenIndices()
    };
    _this._onItemChanged = function (idx, open) {
      var _this$props = _this.props,
        type = _this$props.type,
        onSelectionChanged = _this$props.onSelectionChanged;
      var openIndices;
      if (open) {
        if (type === 'radio') {
          openIndices = [idx];
        } else {
          openIndices = [].concat((0, _toConsumableArray2["default"])(_this.state.openIndices), [idx]);
        }
      } else {
        openIndices = (0, _toConsumableArray2["default"])(_this.state.openIndices).filter(function (openIndex) {
          return idx !== openIndex;
        });
      }
      _this.setState({
        openIndices: openIndices
      }, function () {
        return onSelectionChanged && onSelectionChanged(openIndices);
      });
    };
    return _this;
  }
  (0, _inherits2["default"])(SelectableAccordion, _React$PureComponent);
  return (0, _createClass2["default"])(SelectableAccordion, [{
    key: "_populateInitiallyOpenIndices",
    value: function _populateInitiallyOpenIndices() {
      var items = this.props.items;
      var controlled = items.some(function (item) {
        return item.open;
      });
      return items.map(function (item, index) {
        return item[controlled ? 'open' : 'initiallyOpen'] ? index : null;
      }).filter(function (index) {
        return index !== null;
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;
      var _this$props2 = this.props,
        dataHook = _this$props2.dataHook,
        className = _this$props2.className,
        items = _this$props2.items,
        verticalPadding = _this$props2.verticalPadding,
        type = _this$props2.type;
      var openIndices = this.state.openIndices;
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: (0, _SelectableAccordionSt.st)(_SelectableAccordionSt.classes.root, className),
        "data-hook": dataHook,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 70,
          columnNumber: 7
        }
      }, items.map(function (item, idx) {
        return /*#__PURE__*/_react["default"].createElement(_Item["default"], (0, _extends2["default"])({
          key: idx,
          idx: idx,
          type: type,
          verticalPadding: verticalPadding,
          onChange: function onChange(e, index, open) {
            _this2._onItemChanged(index, open);
            item.onClick && item.onClick(e, {
              open: open
            });
          }
        }, item, {
          open: openIndices.includes(idx),
          __self: _this2,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 72,
            columnNumber: 11
          }
        }));
      }));
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(_ref, state) {
      var items = _ref.items;
      var controlled = items.some(function (item) {
        return item.open;
      });
      return controlled ? {
        openIndices: items.map(function (item, index) {
          return item.open ? index : null;
        }).filter(function (index) {
          return index !== null;
        })
      } : state;
    }
  }]);
}(_react["default"].PureComponent);
SelectableAccordion.defaultProps = {
  type: 'radio',
  items: [],
  verticalPadding: _constants.VERTICAL_PADDING.small
};
SelectableAccordion.displayName = 'SelectableAccordion';
var _default = exports["default"] = SelectableAccordion;