@drivy/cobalt
Version:
Opinionated design system for Drivy's projects.
107 lines (106 loc) • 4.27 kB
JavaScript
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import classnames from "classnames";
import react, { useEffect, useState } from "react";
import react_dom from "react-dom";
import { getA11yOnClick } from "../../helpers/index.js";
import useBreakpoint from "../../hooks/useBreakpoint.js";
import Button from "../Buttons/Button/index.js";
import { CloseIcon } from "../Icon/index.js";
import { Fixed } from "../Layout/Surfaces/index.js";
import Modal from "../Modal/index.js";
const SidepanelFooter = ({ children, className })=>/*#__PURE__*/ jsx("div", {
className: classnames("c-p-sm c-border-t c-border-outline", className),
children: children
});
function _SidepanelContent({ title, close, children }) {
return /*#__PURE__*/ jsxs(Fragment, {
children: [
title && /*#__PURE__*/ jsxs("div", {
className: "c-flex c-gap-sm c-items-start c-px-sm c-py-md c-border-b c-border-outline",
children: [
/*#__PURE__*/ jsx("div", {
className: "c-text-title-md c-flex-1",
children: title
}),
close && /*#__PURE__*/ jsx(Button, {
className: "cobalt-sidepanel__close",
icon: /*#__PURE__*/ jsx(CloseIcon, {}),
text: true,
...getA11yOnClick(close)
})
]
}),
children
]
});
}
function areSidepanelContentEqual(_prevProps, nextProps) {
return !nextProps.isOpen;
}
const SidepanelContent = /*#__PURE__*/ react.memo(_SidepanelContent, areSidepanelContentEqual);
SidepanelContent.displayName = "SidepanelContent";
const SidepanelFooterAPI = (_props)=>null;
const isSidepanelFooterAPIComponent = (component)=>/*#__PURE__*/ react.isValidElement(component) && component.type === SidepanelFooterAPI;
const _Sidepanel = ({ isOpen, title, close, withDesktopOverlay, onPointerDownOutside, width = 420, children })=>{
const { isMobile } = useBreakpoint();
const [isPanelVisible, setIsPanelVisible] = useState(false);
useEffect(()=>{
isOpen && setIsPanelVisible(true);
}, [
isOpen
]);
const sidepanelFooter = react.Children.toArray(children).find((c)=>isSidepanelFooterAPIComponent(c));
let footer = null;
if (/*#__PURE__*/ react.isValidElement(sidepanelFooter)) footer = isMobile ? /*#__PURE__*/ jsx(Modal.Footer, {
...sidepanelFooter.props
}) : /*#__PURE__*/ jsx(SidepanelFooter, {
...sidepanelFooter.props
});
return isMobile ? /*#__PURE__*/ jsxs(Modal, {
"aria-label": "Sidepanel",
isOpen: isOpen,
bodySpacing: false,
close: close,
title: title,
fullScreen: true,
children: [
children,
footer
]
}) : /*#__PURE__*/ react_dom.createPortal(/*#__PURE__*/ jsxs(Fragment, {
children: [
/*#__PURE__*/ jsx("div", {
className: classnames("cobalt-sidepanel", {
"cobalt-sidepanel--show": isOpen,
"cobalt-sidepanel--visible": isPanelVisible
}),
onTransitionEnd: ()=>{
isOpen || setIsPanelVisible(false);
},
children: /*#__PURE__*/ jsx(Fixed, {
width: width,
isFullHeight: true,
children: /*#__PURE__*/ jsxs(SidepanelContent, {
isOpen: isOpen,
title: title,
close: close,
children: [
children,
footer
]
})
})
}),
withDesktopOverlay && /*#__PURE__*/ jsx("div", {
className: "cobalt-sidepanel-overlay",
...onPointerDownOutside ? getA11yOnClick(onPointerDownOutside) : {}
})
]
}), document.body);
};
_Sidepanel.displayName = "Sidepanel";
const Sidepanel = Object.assign(_Sidepanel, {
Footer: SidepanelFooterAPI
});
export { Sidepanel };
//# sourceMappingURL=index.js.map