wix-style-react/dist/src/SelectableAccordion/SelectableAccordion.js

wix-style-react

"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 _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Item = _interopRequireDefault(require("./Item"));
var _SelectableAccordionSt = require("./SelectableAccordion.st.css");
var _constants = require("./constants");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/SelectableAccordion/SelectableAccordion.js";
/** SelectableAccordion */
class SelectableAccordion extends _react.default.PureComponent {
  constructor() {
    super(...arguments);
    this.state = {
      openIndices: this._populateInitiallyOpenIndices()
    };
    this._onItemChanged = (idx, open) => {
      var {
        type,
        onSelectionChanged
      } = this.props;
      var openIndices;
      if (open) {
        if (type === 'radio') {
          openIndices = [idx];
        } else {
          openIndices = [...this.state.openIndices, idx];
        }
      } else {
        openIndices = [...this.state.openIndices].filter(openIndex => idx !== openIndex);
      }
      this.setState({
        openIndices
      }, () => onSelectionChanged && onSelectionChanged(openIndices));
    };
  }
  static getDerivedStateFromProps(_ref, state) {
    var {
      items
    } = _ref;
    var controlled = items.some(item => item.open);
    return controlled ? {
      openIndices: items.map((item, index) => item.open ? index : null).filter(index => index !== null)
    } : state;
  }
  _populateInitiallyOpenIndices() {
    var {
      items
    } = this.props;
    var controlled = items.some(item => item.open);
    return items.map((item, index) => item[controlled ? 'open' : 'initiallyOpen'] ? index : null).filter(index => index !== null);
  }
  render() {
    var {
      dataHook,
      className,
      items,
      verticalPadding,
      type
    } = this.props;
    var {
      openIndices
    } = this.state;
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _SelectableAccordionSt.st)(_SelectableAccordionSt.classes.root, className),
      "data-hook": dataHook,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 110,
        columnNumber: 7
      }
    }, items.map((item, idx) => /*#__PURE__*/_react.default.createElement(_Item.default, (0, _extends2.default)({
      key: idx,
      idx: idx,
      type: type,
      verticalPadding: verticalPadding,
      onChange: (e, index, open) => {
        this._onItemChanged(index, open);
        item.onClick && item.onClick(e, {
          open
        });
      }
    }, item, {
      open: openIndices.includes(idx),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 112,
        columnNumber: 11
      }
    }))));
  }
}
SelectableAccordion.propTypes = {
  /** Applied as data-hook HTML attribute that can be used in the tests */
  dataHook: _propTypes.default.string,
  /** A css class to be applied to the component's root element */
  className: _propTypes.default.string,
  /** A type can be ether radio, checkbox, or toggle, which will effect the way an accordion item is selected */
  type: _propTypes.default.oneOf(['radio', 'checkbox', 'toggle']),
  /** An array of Accordion items:
   * - `title`: A title of the item
   * - `subtitle`: An optional second row of the header
   * - `content`: A content of the item
   * - `initiallyOpen`: Whether the item is initially open
   * - `open`: Whether the item is open
   * - `disabled`: Whether the item is disabled
   * - `onClick`: A callback which is invoked when item's selection is changed
   * */
  items: _propTypes.default.arrayOf(_propTypes.default.shape({
    title: _propTypes.default.node,
    subtitle: _propTypes.default.node,
    content: _propTypes.default.node,
    initiallyOpen: _propTypes.default.bool,
    open: _propTypes.default.bool,
    disabled: _propTypes.default.bool,
    onClick: _propTypes.default.func
  })),
  /** Extra space on top and bottom of selectable accordion item */
  verticalPadding: _propTypes.default.oneOf(['medium', 'small', 'tiny']),
  /** A callback which is invoked every time the selection is changed */
  onSelectionChanged: _propTypes.default.func
};
SelectableAccordion.defaultProps = {
  type: 'radio',
  items: [],
  verticalPadding: _constants.VERTICAL_PADDING.small
};
SelectableAccordion.displayName = 'SelectableAccordion';
var _default = exports.default = SelectableAccordion;
//# sourceMappingURL=SelectableAccordion.js.map