@age/quantum/Accordion/Accordion.js

Catho react components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

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

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _slugify = _interopRequireDefault(require("slugify"));

var _theme = require("../shared/theme");

var _Icon = _interopRequireDefault(require("../Icon"));

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

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

var Wrapper = _styledComponents.default.ul.withConfig({
  displayName: "Accordion__Wrapper",
  componentId: "sc-1oh2u4b-0"
})(["", " list-style-type:none;background-color:inherit;"], function (_ref) {
  var _ref$theme = _ref.theme,
      medium = _ref$theme.spacing.medium,
      baseFontSize = _ref$theme.baseFontSize,
      color = _ref$theme.colors.neutral[900];
  return "\n    font-size: ".concat(baseFontSize, "px;\n    padding: 0 ").concat(medium, "px;\n    color: ").concat(color, ";\n  ");
});

var AccordionItem = _styledComponents.default.li.withConfig({
  displayName: "Accordion__AccordionItem",
  componentId: "sc-1oh2u4b-1"
})(["border-bottom:1px solid ", ";&:last-child{border-bottom:1px solid transparent;}"], function (_ref2) {
  var opened = _ref2.opened,
      color = _ref2.color;
  return opened ? 'transparent' : color;
});

var AccordionTitle = _styledComponents.default.span.withConfig({
  displayName: "Accordion__AccordionTitle",
  componentId: "sc-1oh2u4b-2"
})(["", " font-weight:bold;line-height:inherit;"], function (_ref3) {
  var baseFontSize = _ref3.theme.baseFontSize;
  return "\n    font-size: ".concat(baseFontSize, "px;\n  ");
});

var AccordionHeader = _styledComponents.default.button.attrs({
  type: 'button'
}).withConfig({
  displayName: "Accordion__AccordionHeader",
  componentId: "sc-1oh2u4b-3"
})(["", " cursor:pointer;display:inline-flex;justify-content:space-between;width:100%;background:inherit;border:none;box-sizing:content-box;", ""], function (_ref4) {
  var _ref4$spacing = _ref4.spacing,
      large = _ref4$spacing.large,
      medium = _ref4$spacing.medium;
  return "\n    line-height: ".concat(large, "px;\n    height: ").concat(large, "px;\n    padding: ").concat(medium, "px 0;\n  ");
}, function (_ref5) {
  var as = _ref5.as;
  return as === 'button' ? "cursor: pointer;" : null;
});

var AccordionContent = _styledComponents.default.div.withConfig({
  displayName: "Accordion__AccordionContent",
  componentId: "sc-1oh2u4b-4"
})(["", ""], function (_ref6) {
  var _ref6$theme = _ref6.theme,
      xsmall = _ref6$theme.spacing.xsmall,
      baseFontSize = _ref6$theme.baseFontSize,
      opened = _ref6.opened;
  return "\n    height: ".concat(opened ? 'auto' : '0', ";\n    transform: scaleY(").concat(opened ? '1' : '0', ");\n    transform-origin: top;\n    overflow: hidden;\n    transition: transform 0.2s ease;\n    font-size: ").concat(baseFontSize - 2, "px;\n\n    a {\n      color: inherit;\n      text-decoration: none;\n      font-size: ").concat(baseFontSize - 2, "px;\n    }\n\n    ul {\n      list-style-type: none;\n      padding: 0;\n\n      & > li {\n        padding: ").concat(xsmall, "px 0;\n      }\n    }\n\n    p {\n      margin: 0;\n    }\n  ");
});

var StyledIcon = (0, _styledComponents.default)(_Icon.default).withConfig({
  displayName: "Accordion__StyledIcon",
  componentId: "sc-1oh2u4b-5"
})(["", " line-height:inherit;"], function (_ref7) {
  var baseFontSize = _ref7.theme.baseFontSize;
  return "\n    font-size: ".concat(baseFontSize * 1.5, "px;\n  ");
});
AccordionItem.displayName = 'AccordionItem';
AccordionHeader.displayName = 'AccordionHeader';
AccordionContent.displayName = 'AccordionContent';

var Accordion =
/*#__PURE__*/
function (_React$Component) {
  _inherits(Accordion, _React$Component);

  function Accordion(props) {
    var _this;

    _classCallCheck(this, Accordion);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Accordion).call(this, props));

    _this.toggleItem = function (indexToChange) {
      var items = _this.state.items;
      var keepOnlyOneOpen = _this.props.keepOnlyOneOpen;
      var newItems = items;

      if (keepOnlyOneOpen) {
        newItems = _this.closeAllContents();
      }

      newItems = _this.toggleItemVisibility(newItems, indexToChange);

      _this.setAccordionItems(newItems);
    };

    _this.handleCustomItem = function (items) {
      return items.map(function (item, index) {
        var customItem = item;

        customItem.onItemClick = function (i) {
          if (typeof item.onClick === 'function') {
            item.onClick();
          }

          _this.toggleItem(i);
        };

        customItem.opened = !!item.opened;
        return _this.renderItem(customItem, index);
      });
    };

    _this.state = {
      items: props.items
    };
    return _this;
  }

  _createClass(Accordion, [{
    key: "setAccordionItems",
    value: function setAccordionItems(items) {
      this.setState({
        items: items
      });
    }
  }, {
    key: "closeAllContents",
    value: function closeAllContents() {
      var items = this.state.items;
      return items.map(function (item) {
        return _objectSpread({}, item, {
          opened: false
        });
      });
    }
  }, {
    key: "toggleItemVisibility",
    value: function toggleItemVisibility(newItems, indexToChange) {
      var items = this.state.items;
      var itemsToReturn = newItems;
      itemsToReturn[indexToChange].opened = !items[indexToChange].opened;
      return itemsToReturn;
    }
  }, {
    key: "renderItem",
    value: function renderItem(item, itemIndex) {
      var title = item.title,
          content = item.content,
          opened = item.opened,
          onItemClick = item.onItemClick;
      var theme = this.props.theme;
      var color = theme.colors.neutral[900],
          spacing = theme.spacing;
      var itemId = "".concat((0, _slugify.default)(title), "-").concat(itemIndex);
      var contentId = "".concat(itemId, "-content");
      var headerId = "".concat(itemId, "-header");
      return _react.default.createElement(AccordionItem, {
        key: title,
        opened: opened,
        color: color
      }, _react.default.createElement(AccordionHeader, {
        spacing: spacing,
        onClick: function onClick() {
          return onItemClick(itemIndex);
        },
        "aria-controls": contentId,
        id: headerId
      }, _react.default.createElement(AccordionTitle, {
        theme: theme
      }, title), _react.default.createElement(StyledIcon, {
        theme: theme,
        name: opened ? 'expand_less' : 'expand_more'
      })), content && _react.default.createElement(AccordionContent, {
        id: contentId,
        "aria-labelledby": headerId,
        opened: opened,
        "aria-hidden": !opened,
        theme: theme
      }, content));
    }
  }, {
    key: "render",
    value: function render() {
      var theme = this.props.theme;
      var items = this.state.items;
      return _react.default.createElement(Wrapper, {
        theme: theme
      }, this.handleCustomItem(items));
    }
  }]);

  return Accordion;
}(_react.default.Component);

Accordion.defaultProps = {
  theme: {
    colors: _theme.colors,
    spacing: _theme.spacing,
    baseFontSize: _theme.baseFontSize
  },
  keepOnlyOneOpen: false
};
Accordion.propTypes = {
  /** Edit only for themification */
  theme: _propTypes.default.shape({
    colors: _propTypes.default.object,
    spacing: _propTypes.default.object,
    baseFontSize: _propTypes.default.number
  }),

  /** Set true to keep only one item open and close the remainings on click */
  keepOnlyOneOpen: _propTypes.default.bool,

  /** Items to render in accordion */
  items: _propTypes.default.arrayOf(_propTypes.default.shape({
    title: _propTypes.default.string,
    content: _propTypes.default.node,
    opened: _propTypes.default.bool,
    onClick: _propTypes.default.func
  })).isRequired
};
var _default = Accordion;
exports.default = _default;