@kiwicom/orbit-components/es/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.

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from "react";
import KEY_CODE_MAP from "../../common/keyMaps";
import CardWrapper from "../components/CardWrapper";
import { useCard } from "../CardContext";
import SectionHeader from "./components/SectionHeader";
import SectionContent from "./components/SectionContent";
import useRandomId from "../../hooks/useRandomId";
import { ELEMENT_OPTIONS } from "../../Heading/consts";

var CardSection = function CardSection(_ref) {
  var title = _ref.title,
      _ref$titleAs = _ref.titleAs,
      titleAs = _ref$titleAs === void 0 ? 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 = 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 = _slicedToArray(_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 === KEY_CODE_MAP.SPACE) {
      ev.preventDefault();
    }

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

  var slideID = useRandomId();
  return /*#__PURE__*/React.createElement(CardWrapper, {
    dataTest: dataTest,
    roundedTop: roundedBorders.top,
    roundedBottom: roundedBorders.bottom,
    expanded: opened,
    onClick: onClick,
    expandable: expandable,
    noBorderTop: noBorderTop
  }, (title || header) && /*#__PURE__*/React.createElement(SectionHeader, {
    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, {
    expanded: opened,
    slideID: slideID,
    labelID: slideID,
    hasPaddingTop: !!(title != null || header != null || expanded),
    noSeparator: noSeparator,
    expandable: expandable
  }, children) : null);
};

export default CardSection;