@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 _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 _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 _useBoundingRect3 = _interopRequireDefault(require("../../../hooks/useBoundingRect"));

var TileExpandable = function TileExpandable(_ref) {
  var initialExpanded = _ref.initialExpanded,
      noPadding = _ref.noPadding,
      children = _ref.children,
      onClick = _ref.onClick,
      title = _ref.title,
      description = _ref.description,
      header = _ref.header,
      icon = _ref.icon,
      dataTest = _ref.dataTest,
      htmlTitle = _ref.htmlTitle;

  var _React$useState = React.useState(initialExpanded),
      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
      expanded = _React$useState2[0],
      setExpanded = _React$useState2[1];

  var _useBoundingRect = (0, _useBoundingRect3.default)({
    height: initialExpanded ? null : 0
  }),
      _useBoundingRect2 = (0, _slicedToArray2.default)(_useBoundingRect, 2),
      height = _useBoundingRect2[0].height,
      node = _useBoundingRect2[1];

  var handleClick = function handleClick(event) {
    if (onClick) {
      onClick(event);
    }

    setExpanded(function (prevExpanded) {
      return !prevExpanded;
    });
  };

  var hasHeader = !!(title || description || icon || header);
  var randomId = (0, _useRandomId.useRandomIdSeed)();
  var slideID = randomId("slideID");
  var labelID = randomId("labelID");
  return /*#__PURE__*/React.createElement(_TileWrapper.default, {
    onClick: handleClick,
    onKeyDown: (0, _handleKeyDown.default)(onClick, function () {
      return setExpanded(function (prevExpanded) {
        return !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;