@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";

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 _randomID = _interopRequireDefault(require("../../utils/randomID"));

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

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

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

var CardSection = function CardSection(_ref) {
  var title = _ref.title,
      icon = _ref.icon,
      description = _ref.description,
      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 = _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 === _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");
  }, []);
  var labelID = React.useMemo(function () {
    return (0, _randomID.default)("labelID");
  }, []);
  return React.createElement(_CardWrapper.default, {
    dataTest: dataTest,
    roundedTop: roundedBorders.top,
    roundedBottom: roundedBorders.bottom,
    expanded: opened,
    expandable: expandable,
    noBorderTop: noBorderTop
  }, (title || header) && React.createElement(_SectionHeader.default, {
    title: title,
    icon: icon,
    slideID: slideID,
    labelID: labelID,
    header: header,
    expandable: expandable,
    expanded: opened,
    actions: actions,
    onClick: expandable ? handleClick : undefined,
    description: description,
    handleKeyDown: handleKeyDown
  }), children ? React.createElement(_SectionContent.default, {
    expanded: opened,
    slideID: slideID,
    labelID: labelID,
    hasPaddingTop: !!(title != null || header != null || expanded),
    noSeparator: noSeparator,
    expandable: expandable
  }, children) : null);
};

var _default = CardSection;
exports.default = _default;