@helpscout/hsds-react/components/Accordion/Accordion.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = exports.AccordionContext = exports.getSortableProps = exports.classNameStrings = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

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

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

var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));

var _Accordion = _interopRequireDefault(require("./Accordion.Body"));

var _Accordion2 = _interopRequireDefault(require("./Accordion.Heading"));

var _Accordion3 = _interopRequireDefault(require("./Accordion.Link"));

var _Accordion4 = _interopRequireDefault(require("./Accordion.Section"));

var _Accordion5 = _interopRequireDefault(require("./Accordion.Subheading"));

var _Accordion6 = _interopRequireDefault(require("./Accordion.Title"));

var _classnames = _interopRequireDefault(require("classnames"));

var _Accordion7 = require("./Accordion.css");

var _Page = require("../Page/Page");

var _Sortable = _interopRequireDefault(require("../Sortable"));

var _jsxRuntime = require("react/jsx-runtime");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var classNameStrings = {
  baseComponentClassName: 'c-Accordion',
  isAllowMultipleClassName: 'is-allow-multiple',
  isPageClassName: 'is-page',
  isSeamlessClassName: 'is-seamless',
  isSortableClassName: 'is-sortable',
  isSortingClassName: 'is-sorting'
};
exports.classNameStrings = classNameStrings;

var getComponentClassName = function getComponentClassName(_ref) {
  var allowMultiple = _ref.allowMultiple,
      className = _ref.className,
      isPage = _ref.isPage,
      isSeamless = _ref.isSeamless,
      isSorting = _ref.isSorting,
      isSortable = _ref.isSortable;
  var baseComponentClassName = classNameStrings.baseComponentClassName,
      isAllowMultipleClassName = classNameStrings.isAllowMultipleClassName,
      isPageClassName = classNameStrings.isPageClassName,
      isSeamlessClassName = classNameStrings.isSeamlessClassName,
      isSortableClassName = classNameStrings.isSortableClassName,
      isSortingClassName = classNameStrings.isSortingClassName;
  return (0, _classnames.default)(baseComponentClassName, allowMultiple && isAllowMultipleClassName, isPage && isPageClassName, isSeamless && isSeamlessClassName, isSortable && isSortableClassName, isSorting && isSortingClassName, className);
};

var getSortableProps = function getSortableProps(_ref2) {
  var distance = _ref2.distance,
      pressDelay = _ref2.pressDelay;
  return distance > 0 ? {
    distance: distance
  } : {
    pressDelay: pressDelay
  };
};

exports.getSortableProps = getSortableProps;

var useSectionState = function useSectionState(originalState, allowMultiple) {
  var _useState = (0, _react.useState)(originalState),
      openSections = _useState[0],
      setOpenSections = _useState[1];

  var setSectionState = function setSectionState(uuid, isOpen) {
    setOpenSections(isOpen ? [uuid] : []);
  };

  var setMultipleState = function setMultipleState(uuid, isOpen) {
    if (isOpen) {
      var newSections = [].concat(openSections, [uuid]);
      setOpenSections(newSections.filter(function (item, pos) {
        return newSections.indexOf(item) === pos;
      }));
    } else {
      setOpenSections(openSections.filter(function (id) {
        return id !== uuid;
      }));
    }
  };

  return [openSections, allowMultiple ? setMultipleState : setSectionState];
};

var AccordionContext = /*#__PURE__*/(0, _react.createContext)(null);
exports.AccordionContext = AccordionContext;

var Accordion = function Accordion(props) {
  var allowMultiple = props.allowMultiple,
      children = props.children,
      duration = props.duration,
      isPageProps = props.isPage,
      isSeamlessProps = props.isSeamless,
      isSortable = props.isSortable,
      _onSortEnd = props.onSortEnd,
      openSectionIds = props.openSectionIds,
      size = props.size,
      useWindowAsScrollContainer = props.useWindowAsScrollContainer,
      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["allowMultiple", "children", "duration", "isPage", "isSeamless", "isSortable", "onSortEnd", "openSectionIds", "size", "useWindowAsScrollContainer"]);

  var _useState2 = (0, _react.useState)(false),
      isSorting = _useState2[0],
      setIsSorting = _useState2[1];

  var _useSectionState = useSectionState(openSectionIds, allowMultiple),
      openSections = _useSectionState[0],
      setSectionState = _useSectionState[1];

  var _useContext = (0, _react.useContext)(_Page.PageContext),
      _useContext$accordion = _useContext.accordion,
      accordion = _useContext$accordion === void 0 ? {} : _useContext$accordion;

  var isPage = accordion.isPage || isPageProps;
  var isSeamless = accordion.isSeamless || isSeamlessProps;

  var onClose = function onClose(uuid) {
    props.onClose(uuid, openSections);
  };

  var onOpen = function onOpen(uuid) {
    props.onOpen(uuid, openSections);
  };

  var getContainer = function getContainer() {
    return document.querySelector('.hsds-react') || document.querySelector('.hsds-beacon') || document.body;
  };

  var contextValue = {
    duration: duration,
    isPage: isPage,
    isSeamless: isSeamless,
    isSortable: isSortable,
    isSorting: isSorting,
    onClose: onClose,
    onOpen: onOpen,
    // WARN: we use the internal state only if there is no outside method to update the list of open sections
    openSections: props.setSectionState ? openSectionIds : openSections,
    setSectionState: props.setSectionState || setSectionState,
    size: size
  };
  var content = children;

  if (isSortable) {
    content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Sortable.default, (0, _extends2.default)({
      helperClass: "is-sorting-item",
      lockAxis: "y",
      helperContainer: getContainer,
      onSortStart: function onSortStart() {
        return setIsSorting(true);
      },
      onSortEnd: function onSortEnd() {
        setIsSorting(false);

        _onSortEnd.apply(void 0, arguments);
      },
      useWindowAsScrollContainer: useWindowAsScrollContainer
    }, getSortableProps(rest), {
      children: children
    }));
  }

  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion7.AccordionUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
    className: getComponentClassName((0, _extends2.default)({}, props, {
      isSeamless: isSeamless,
      isPage: isPage,
      isSortable: isSortable,
      isSorting: isSorting
    })),
    role: "tablist",
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AccordionContext.Provider, {
      value: contextValue,
      children: content
    })
  }));
};

function noop() {}

Accordion.defaultProps = {
  'data-cy': 'Accordion',
  distance: 5,
  isPage: false,
  isSeamless: false,
  isSortable: false,
  onClose: noop,
  onOpen: noop,
  onSortEnd: noop,
  openSectionIds: [],
  pressDelay: 0,
  size: 'md',
  useWindowAsScrollContainer: false
};
Accordion.propTypes = {
  /** Allows multiple sections to have their body revealed simultaneously. */
  allowMultiple: _propTypes.default.bool,

  /** Sections to be stacked and controlled. */
  children: _propTypes.default.any,

  /** Custom class names to be added to the component. */
  className: _propTypes.default.string,

  /** When isSortable is true, the distance determines how far a user must drag in order to sort. */
  distance: _propTypes.default.number,

  /** Exclude borders and horizontal padding. */
  isSeamless: _propTypes.default.bool,

  /** Adds styling to fit inside a <Page> component */
  isPage: _propTypes.default.bool,

  /** Enable sections to be re-ordered by drag and drop. */
  isSortable: _propTypes.default.bool,

  /** Callback to be invoked when the body of a section is revealed. */
  onOpen: _propTypes.default.func,

  /** Callback to be invoked when the body of a section is concealed. */
  onClose: _propTypes.default.func,

  /** When is sortable is true, callback to be invoked when sorting ends. */
  onSortEnd: _propTypes.default.func,

  /** An array of ids corresponding to sections that should be open. */
  openSectionIds: _propTypes.default.array,

  /** When isSortable is true and distance is 0, the time in ms that must elapse on a press in order to sort. */
  pressDelay: _propTypes.default.number,

  /** The amount of padding. */
  size: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string
};
Accordion.Body = _Accordion.default;
Accordion.Heading = _Accordion2.default;
Accordion.Link = _Accordion3.default;
Accordion.Section = _Accordion4.default;
Accordion.Subheading = _Accordion5.default;
Accordion.Title = _Accordion6.default;
var _default = Accordion;
exports.default = _default;