@kiwicom/orbit-components/lib/Tile/components/TileExpandable/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 _Slide = _interopRequireDefault(require("../../../utils/Slide"));

var _useRandomId = require("../../../hooks/useRandomId");

var _TileContent = _interopRequireDefault(require("../TileContent"));

var _TileWrapper = _interopRequireDefault(require("../TileWrapper"));

var _TileHeader = _interopRequireDefault(require("../TileHeader"));

var _handleKeyDown = _interopRequireDefault(require("../../../utils/handleKeyDown"));

var _useBoundingRect = _interopRequireDefault(require("../../../hooks/useBoundingRect"));

const TileExpandable = ({
  initialExpanded,
  noPadding,
  children,
  onClick,
  title,
  description,
  header,
  icon,
  dataTest,
  htmlTitle
}) => {
  const [expanded, setExpanded] = React.useState(initialExpanded);
  const [{
    height
  }, node] = (0, _useBoundingRect.default)({
    height: initialExpanded ? null : 0
  });

  const handleClick = ev => {
    if (onClick) onClick(ev);
    setExpanded(prevExpanded => !prevExpanded);
  };

  const hasHeader = !!(title || description || icon || header);
  const randomId = (0, _useRandomId.useRandomIdSeed)();
  const slideID = randomId("slideID");
  const labelID = randomId("labelID");
  return /*#__PURE__*/React.createElement(_TileWrapper.default, {
    onClick: handleClick,
    onKeyDown: (0, _handleKeyDown.default)(onClick, () => setExpanded(prevExpanded => !prevExpanded)),
    role: "button",
    ariaExpanded: expanded,
    ariaControls: slideID,
    tabIndex: "0",
    id: labelID,
    dataTest: dataTest,
    htmlTitle: htmlTitle
  }, hasHeader && /*#__PURE__*/React.createElement(_TileHeader.default, {
    title: title,
    description: description,
    icon: icon,
    header: header,
    expanded: expanded,
    expandable: true
  }), /*#__PURE__*/React.createElement(_Slide.default, {
    maxHeight: height,
    expanded: expanded,
    id: slideID,
    ariaLabelledBy: labelID
  }, /*#__PURE__*/React.createElement(_TileContent.default, {
    noPadding: noPadding,
    ref: node,
    withBorder: hasHeader
  }, children)));
};

var _default = TileExpandable;
exports.default = _default;