@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 * as React from "react";
import Slide from "../../../utils/Slide";
import { useRandomIdSeed } from "../../../hooks/useRandomId";
import TileContent from "../TileContent";
import TileWrapper from "../TileWrapper";
import TileHeader from "../TileHeader";
import handleKeyDown from "../../../utils/handleKeyDown";
import useBoundingRect from "../../../hooks/useBoundingRect";

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

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

  const hasHeader = !!(title || description || icon || header);
  const randomId = useRandomIdSeed();
  const slideID = randomId("slideID");
  const labelID = randomId("labelID");
  return /*#__PURE__*/React.createElement(TileWrapper, {
    onClick: handleClick,
    onKeyDown: handleKeyDown(onClick, () => setExpanded(prevExpanded => !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;