96 lines
3.3 KiB
JavaScript
96 lines
3.3 KiB
JavaScript
import React from "@modules/react";
|
|
import Utilities from "@modules/utilities";
|
|
import WebpackModules from "@modules/webpackmodules";
|
|
|
|
const Spring = WebpackModules.getByProps("useSpring", "animated");
|
|
const Anims = WebpackModules.getByProps("Easing");
|
|
|
|
|
|
export const Sizes = Object.freeze({
|
|
SMALL: "bd-modal-small",
|
|
MEDIUM: "bd-modal-medium",
|
|
LARGE: "bd-modal-large",
|
|
DYNAMIC: ""
|
|
});
|
|
|
|
export const Styles = Object.freeze({
|
|
STANDARD: "bd-modal-standard",
|
|
CUSTOM: ""
|
|
});
|
|
|
|
|
|
const AccessibilityContext = WebpackModules.getModule(m => m?._currentValue?.reducedMotion, {searchExports: true});
|
|
const FocusLock = WebpackModules.getModule(m => m?.render?.toString().includes("impressionProperties") && m?.render?.toString().includes(".Provider"), {searchExports: true}) ?? React.Fragment;
|
|
|
|
export default function ModalRoot({className, transitionState, children, size = Sizes.DYNAMIC, style = Styles.CUSTOM}) {
|
|
const visible = transitionState == 0 || transitionState == 1; // 300 ms
|
|
|
|
const preferences = React.useContext(AccessibilityContext ?? {});
|
|
const reducedMotion = preferences?.reducedMotion?.enabled ?? document.documentElement?.classList.contains("reduce-motion");
|
|
|
|
const springStyles = Spring.useSpring({
|
|
opacity: visible ? 1 : 0,
|
|
transform: visible || reducedMotion ? "scale(1)" : "scale(0.7)",
|
|
config: {
|
|
duration: visible ? 300 : 100,
|
|
easing: visible ? Anims.Easing.inOut(Anims.Easing.back()) : Anims.Easing.quad,
|
|
clamp: true
|
|
}
|
|
});
|
|
|
|
return <FocusLock disableTrack={true}>
|
|
<Spring.animated.div
|
|
className={Utilities.className("bd-modal-root", size, className, style)}
|
|
style={springStyles}
|
|
>
|
|
{children}
|
|
</Spring.animated.div>
|
|
</FocusLock>;
|
|
// const [visible, setVisible] = React.useState(true);
|
|
|
|
// const visible = transitionState < 2;
|
|
// const springTransition = Spring.useTransition(transitionState, {
|
|
// keys: e => e ? "backdrop" : "empty",
|
|
// from: {
|
|
// opacity: 0,
|
|
// transform: "scale(0.7)"
|
|
// },
|
|
// enter: {
|
|
// opacity: 1,
|
|
// transform: "scale(1)"
|
|
// },
|
|
// leave: {
|
|
// opacity: 0,
|
|
// transform: "scale(0.7)"
|
|
// },
|
|
// // config: (a, b, c, d) => {
|
|
// // console.log({a, b, c, d});
|
|
// // return {
|
|
// // duration: a ? 300 : 100,
|
|
// // easing: a ? Anims.Easing.inOut(Anims.Easing.back()) : Anims.Easing.quad,
|
|
// // clamp: true
|
|
// // };
|
|
// // }
|
|
// config: (a, b, c) => {
|
|
// console.log({a, b, c});
|
|
// return {
|
|
// duration: true ? 300 : 100,
|
|
// easing: true ? Anims.Easing.inOut(Anims.Easing.back()) : Anims.Easing.quad,
|
|
// clamp: true
|
|
// };
|
|
// }
|
|
// });
|
|
|
|
// return springTransition((styles, isVisible) => {
|
|
// if (!isVisible) console.log("not visible");
|
|
// return <Spring.animated.div
|
|
// className={Utilities.className("bd-modal-root", size, className, style)}
|
|
// style={styles}
|
|
// >
|
|
// {children}
|
|
// </Spring.animated.div>;
|
|
// });
|
|
}
|
|
|
|
ModalRoot.Sizes = Sizes;
|
|
ModalRoot.Styles = Styles; |