@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.
70 lines (69 loc) • 2.57 kB
JavaScript
"use client";
import * as React from "react";
import cx from "clsx";
import { ModalContext } from "../ModalContext";
import useModalContextFunctions from "../helpers/useModalContextFunctions";
const getChildFlex = (flex, key) => {
if (Array.isArray(flex)) {
return flex.length !== 1 ? flex[key] || flex[0] : flex[0];
}
return flex;
};
const wrappedChildren = (children, flex) => {
if (!Array.isArray(children)) return children;
return React.Children.map(children, (child, key) => {
if (! /*#__PURE__*/React.isValidElement(child)) return null;
return /*#__PURE__*/React.createElement("div", {
className: "orbit-modal-footer-child pe-xs box-border p-0",
style: {
flex: getChildFlex(flex, key)
},
"data-test": "footer-el-wrapper"
}, /*#__PURE__*/React.cloneElement(child, {
// @ts-expect-error React.cloneElement issue
ref: child.ref ? node => {
// Call the original ref, if any
// @ts-expect-error React.cloneElement issue
const {
ref
} = child;
if (typeof ref === "function") {
ref(node);
} else if (ref !== null) {
ref.current = node;
}
} : null
}));
});
};
const ModalFooter = ({
dataTest,
children,
flex = "0 1 auto"
}) => {
const {
isMobileFullPage,
setFooterHeight
} = React.useContext(ModalContext);
const containerRef = React.useRef(null);
const childrenLength = React.Children.toArray(children).length;
useModalContextFunctions();
React.useEffect(() => {
function transitionEndHandler() {
if (setFooterHeight && containerRef.current) {
setFooterHeight(containerRef.current.clientHeight);
}
}
const containerEl = containerRef.current;
containerEl?.addEventListener("transitionend", transitionEndHandler);
return () => {
containerEl?.removeEventListener("transitionend", transitionEndHandler);
};
}, [setFooterHeight]);
return /*#__PURE__*/React.createElement("div", {
className: cx("orbit-modal-footer", "z-overlay bg-white-normal px-md pb-md box-border flex w-full pt-0", "duration-fast transition-shadow ease-in-out", "sm-lm:[&_.orbit-button-primitive]:h-form-box-normal sm-lm:[&_.orbit-button-primitive]:text-button-normal", childrenLength > 1 ? "lm:justify-between" : "lm:justify-end", !isMobileFullPage && "lm:rounded-b-modal", "[&_.orbit-modal-footer-child:last-of-type]:p-0"),
ref: containerRef,
"data-test": dataTest
}, flex && wrappedChildren(children, flex));
};
export default ModalFooter;