@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 _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

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

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

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 _useRandomId = _interopRequireDefault(require("../../hooks/useRandomId"));

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

const CardSection = ({
  title,
  titleAs = _consts.ELEMENT_OPTIONS.DIV,
  icon,
  description,
  onClick,
  children,
  expandable = false,
  expanded,
  initialExpanded = false,
  onClose,
  header,
  onExpand,
  dataTest,
  actions,
  noSeparator
}) => {
  const {
    addSection,
    removeSection,
    index,
    roundedBorders,
    noBorderTop,
    isOpened
  } = (0, _CardContext.useCard)();
  const [opened, setOpened] = React.useState(isOpened || initialExpanded);
  const isControlled = React.useMemo(() => expanded != null, [expanded]); // effect that solves controlled component

  React.useEffect(() => {
    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(() => {
    if (initialExpanded) {
      addSection(index);
      setOpened(true);
    }
  }, [addSection, index, initialExpanded]);

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

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

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

  const handleKeyDown = ev => {
    if (ev.keyCode === _keyMaps.default.SPACE) {
      ev.preventDefault();
    }

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

  const slideID = (0, _useRandomId.default)();
  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;