@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.
68 lines (67 loc) • 2.16 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
import React from "react";
import { useAccordion } from "../AccordionContext";
import useRandomId from "../../hooks/useRandomId";
import useBoundingRect from "../../hooks/useBoundingRect";
import Slide from "../../utils/Slide";
import Loading from "../../Loading";
import SectionHeader from "./components/SectionHeader";
import SectionFooter from "./components/SectionFooter";
import SectionContent from "./components/SectionContent";
const AccordionSection = ({
children,
header,
footer,
actions,
dataTest,
expandable = true,
expandOnTileClick = false
}) => {
const {
expanded,
onExpand,
loading,
loadingTitle,
loadingHidden
} = useAccordion();
const slideId = useRandomId();
const isExpanded = expandable && expanded;
const [{
height
}, ref] = useBoundingRect({
height: isExpanded ? null : 0
});
return /*#__PURE__*/React.createElement("div", {
// Note: update SectionFooter's border-radius in case border-width or border-radius of this component changes
className: "border-elevation-flat-border-color rounded-100 my-200 bg-elevation-flat relative w-full border border-solid",
"data-test": dataTest
}, /*#__PURE__*/React.createElement(Loading, _extends({
loading: loading,
type: "boxLoader",
dataTest: dataTest && `${dataTest}Loading`
}, loadingHidden ? {
ariaHidden: true
} : {
title: loadingTitle
}), header && /*#__PURE__*/React.createElement(SectionHeader, {
actions: actions,
expanded: Boolean(isExpanded),
onExpand: onExpand,
expandable: expandable,
expandOnTileClick: expandOnTileClick,
dataTest: dataTest,
ariaControls: slideId
}, header), /*#__PURE__*/React.createElement(Slide, {
maxHeight: height,
expanded: isExpanded,
id: slideId
}, /*#__PURE__*/React.createElement("div", {
ref: ref
}, children && /*#__PURE__*/React.createElement(SectionContent, {
dataTest: dataTest
}, children), footer && /*#__PURE__*/React.createElement(SectionFooter, {
dataTest: dataTest
}, footer)))));
};
export default AccordionSection;