@kiwicom/orbit-components/lib/Card/CardSection/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

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

var _keyMaps = _interopRequireDefault(require("../../common/keyMaps"));

var _CardWrapper = _interopRequireDefault(require("../components/CardWrapper"));

var _CardContext = require("../CardContext");

var _SectionHeader = _interopRequireDefault(require("./components/SectionHeader"));

var _SectionContent = _interopRequireDefault(require("./components/SectionContent"));

var _randomID = _interopRequireDefault(require("../../utils/randomID"));

var _consts = require("../../Heading/consts");

var CardSection = function CardSection(_ref) {
  var title = _ref.title,
      _ref$titleAs = _ref.titleAs,
      titleAs = _ref$titleAs === void 0 ? _consts.ELEMENT_OPTIONS.DIV : _ref$titleAs,
      icon = _ref.icon,
      description = _ref.description,
      onClick = _ref.onClick,
      children = _ref.children,
      _ref$expandable = _ref.expandable,
      expandable = _ref$expandable === void 0 ? false : _ref$expandable,
      expanded = _ref.expanded,
      _ref$initialExpanded = _ref.initialExpanded,
      initialExpanded = _ref$initialExpanded === void 0 ? false : _ref$initialExpanded,
      onClose = _ref.onClose,
      header = _ref.header,
      onExpand = _ref.onExpand,
      dataTest = _ref.dataTest,
      actions = _ref.actions,
      noSeparator = _ref.noSeparator;

  var _useCard = (0, _CardContext.useCard)(),
      addSection = _useCard.addSection,
      removeSection = _useCard.removeSection,
      index = _useCard.index,
      roundedBorders = _useCard.roundedBorders,
      noBorderTop = _useCard.noBorderTop,
      isOpened = _useCard.isOpened;

  var _React$useState = React.useState(isOpened || initialExpanded),
      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
      opened = _React$useState2[0],
      setOpened = _React$useState2[1];

  var isControlled = React.useMemo(function () {
    return expanded != null;
  }, [expanded]); // effect that solves controlled component

  React.useEffect(function () {
    if (isControlled) {
      if (expanded) {
        addSection(index);
        setOpened(true);
      } else {
        removeSection(index);
        setOpened(false);
      }
    }
  }, [addSection, expanded, index, isControlled, removeSection]); // effect that solves initialExpanded behavior

  React.useEffect(function () {
    if (initialExpanded) {
      addSection(index);
      setOpened(true);
    }
  }, [addSection, index, initialExpanded]);

  var handleClick = function handleClick() {
    if (!isControlled) {
      if (!opened) {
        addSection(index);
        setOpened(true);
      } else {
        removeSection(index);
        setOpened(false);
      }
    }

    if (opened && onClose) {
      onClose();
    }

    if (!opened && onExpand) {
      onExpand();
    }
  };

  var handleKeyDown = function handleKeyDown(ev) {
    if (ev.keyCode === _keyMaps.default.SPACE) {
      ev.preventDefault();
    }

    if (ev.keyCode === _keyMaps.default.ENTER || ev.keyCode === _keyMaps.default.SPACE) {
      handleClick();
    }
  };

  var slideID = React.useMemo(function () {
    return (0, _randomID.default)("slideID");
  }, []);
  return /*#__PURE__*/React.createElement(_CardWrapper.default, {
    dataTest: dataTest,
    roundedTop: roundedBorders.top,
    roundedBottom: roundedBorders.bottom,
    expanded: opened,
    onClick: onClick,
    expandable: expandable,
    noBorderTop: noBorderTop
  }, (title || header) && /*#__PURE__*/React.createElement(_SectionHeader.default, {
    title: title,
    titleAs: titleAs,
    icon: icon,
    slideID: slideID,
    labelID: slideID,
    header: header,
    expandable: expandable,
    expanded: opened,
    actions: actions,
    isContent: !!children,
    onClick: expandable ? handleClick : undefined,
    description: description,
    handleKeyDown: handleKeyDown
  }), children ? /*#__PURE__*/React.createElement(_SectionContent.default, {
    expanded: opened,
    slideID: slideID,
    labelID: slideID,
    hasPaddingTop: !!(title != null || header != null || expanded),
    noSeparator: noSeparator,
    expandable: expandable
  }, children) : null);
};

var _default = CardSection;
exports.default = _default;