@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.
107 lines (106 loc) • 3.35 kB
JavaScript
"use client";
import * as React from "react";
import cx from "clsx";
import Heading from "../Heading";
import Stack from "../Stack";
import ButtonLink from "../ButtonLink";
import ChevronDown from "../icons/ChevronDown";
import Slide from "../utils/Slide";
import { useRandomIdSeed } from "../hooks/useRandomId";
import useBoundingRect from "../hooks/useBoundingRect";
const AnimatedIcon = ({
expanded
}) => {
return /*#__PURE__*/React.createElement(ChevronDown, {
className: cx("duration-fast transition-transform ease-in-out", expanded && "rotate-180 "),
color: "secondary",
ariaHidden: true
});
};
const Collapse = ({
initialExpanded = false,
customLabel,
expanded: expandedProp,
label,
children,
dataTest,
id,
onClick,
actions,
expandButtonLabel,
collapseButtonLabel
}) => {
const isControlledComponent = expandedProp != null;
const [expandedState, setExpandedState] = React.useState(isControlledComponent ? expandedProp : initialExpanded);
const expanded = isControlledComponent ? expandedProp : expandedState;
const [{
height
}, node] = useBoundingRect({
height: expanded ? null : 0
});
const randomId = useRandomIdSeed();
const slideID = randomId("slideID");
const labelID = randomId("labelID");
const handleClick = React.useCallback(event => {
if (!isControlledComponent) {
if (onClick) {
onClick(event, !expanded);
}
setExpandedState(!expanded);
} else if (onClick) {
onClick(event, !expanded);
}
}, [expanded, isControlledComponent, onClick]);
return /*#__PURE__*/React.createElement("div", {
className: "border-b-cloud-normal pb-300 mb-400 block w-full border-b border-solid last:m-0 last:border-none",
"data-test": dataTest,
id: id
}, /*#__PURE__*/React.createElement("div", {
className: "flex items-center justify-between"
}, label || customLabel ? /*#__PURE__*/React.createElement("div", {
className: "flex w-full self-stretch",
id: labelID,
role: "button",
tabIndex: 0,
"aria-expanded": expanded,
"aria-controls": slideID,
onClick: handleClick,
onKeyDown: e => {
if (e.key === "Enter" || e.key === " ") {
handleClick(e);
}
}
}, /*#__PURE__*/React.createElement(Stack, {
justify: "between",
align: "center"
}, label && !customLabel && /*#__PURE__*/React.createElement(Heading, {
type: "title4"
}, label), customLabel)) : /*#__PURE__*/React.createElement("div", {
className: "flex w-full self-stretch"
}), /*#__PURE__*/React.createElement(Stack, {
inline: true,
grow: false,
align: "center",
spacing: "none"
}, actions && /*#__PURE__*/React.createElement("div", {
className: "mx-300 flex items-center"
}, actions), /*#__PURE__*/React.createElement(ButtonLink, {
iconLeft: /*#__PURE__*/React.createElement(AnimatedIcon, {
expanded: expanded
}),
size: "small",
type: "secondary",
title: expanded ? collapseButtonLabel : expandButtonLabel,
onClick: handleClick,
ariaControls: slideID,
ariaExpanded: expanded
}))), /*#__PURE__*/React.createElement(Slide, {
maxHeight: height,
expanded: expanded,
id: slideID
}, /*#__PURE__*/React.createElement("div", {
className: "my-300 mx-0",
ref: node
}, children)));
};
export default Collapse;