@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,
  expanded,
  description,
  header,
  icon,
  dataTest,
  htmlTitle
}) => {
  const [isExpanded, setExpanded] = React.useState(initialExpanded);
  const [{
    height
  }, node] = useBoundingRect({
    height: initialExpanded ? null : 0
  });
  const isControlled = React.useMemo(() => expanded != null, [expanded]);
  const handleClick = ev => {
    if (onClick) onClick(ev);
    setExpanded(prevExpanded => !prevExpanded);
  };
  React.useEffect(() => {
    if (initialExpanded) setExpanded(true);
  }, [initialExpanded]);
  React.useEffect(() => {
    if (isControlled) setExpanded(expanded);
  }, [expanded, isControlled]);
  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: isExpanded,
    ariaControls: slideID,
    tabIndex: 0,
    id: labelID,
    dataTest: dataTest,
    htmlTitle: htmlTitle
  }, hasHeader && /*#__PURE__*/React.createElement(TileHeader, {
    title: title,
    description: description,
    icon: icon,
    header: header,
    expanded: isExpanded,
    expandable: true
  }), /*#__PURE__*/React.createElement(Slide, {
    maxHeight: height,
    expanded: isExpanded,
    id: slideID,
    ariaLabelledBy: labelID
  }, /*#__PURE__*/React.createElement(TileContent, {
    noPadding: noPadding,
    ref: node,
    withBorder: hasHeader
  }, children)));
};
export default TileExpandable;