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

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from "react";
import Slide from "../../../utils/Slide/index";
import randomID from "../../../utils/randomID/index";
import TileContent from "../TileContent";
import TileWrapper from "../TileWrapper";
import TileHeader from "../TileHeader";
import handleKeyDown from "../../../utils/handleKeyDown";
import useBoundingRect from "../../../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 = _slicedToArray(_React$useState, 2),
      expanded = _React$useState2[0],
      setExpanded = _React$useState2[1];

  var _useBoundingRect = useBoundingRect({
    height: initialExpanded ? null : 0
  }),
      _useBoundingRect2 = _slicedToArray(_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 slideID = React.useMemo(function () {
    return randomID("slideID");
  }, []);
  var labelID = React.useMemo(function () {
    return randomID("labelID");
  }, []);
  return /*#__PURE__*/React.createElement(TileWrapper, {
    onClick: handleClick,
    onKeyDown: handleKeyDown(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, {
    title: title,
    description: description,
    icon: icon,
    header: header,
    expanded: expanded,
    expandable: true
  }), /*#__PURE__*/React.createElement(Slide, {
    maxHeight: height,
    expanded: expanded,
    id: slideID,
    ariaLabelledBy: labelID
  }, /*#__PURE__*/React.createElement(TileContent, {
    noPadding: noPadding,
    ref: node,
    withBorder: hasHeader
  }, children)));
};

export default TileExpandable;