@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
70 lines (69 loc) • 2.59 kB
JavaScript
"use client";
import { useMantineEnv } from "../../core/MantineProvider/Mantine.context.mjs";
import { useMantineTheme } from "../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.mjs";
import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
import { getStyleObject } from "../../core/Box/get-style-object/get-style-object.mjs";
import { factory } from "../../core/factory/factory.mjs";
import { Box } from "../../core/Box/Box.mjs";
import { Activity } from "react";
import { useCollapse, useHorizontalCollapse, useReducedMotion } from "@mantine/hooks";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/Collapse/Collapse.tsx
const defaultProps = {
transitionDuration: 200,
transitionTimingFunction: "ease",
animateOpacity: true,
orientation: "vertical"
};
const Collapse = factory((props) => {
const { children, expanded, transitionDuration, transitionTimingFunction, style, onTransitionEnd, onTransitionStart, animateOpacity, keepMounted, ref, orientation, ...others } = useProps("Collapse", defaultProps, props);
const env = useMantineEnv();
const theme = useMantineTheme();
const shouldReduceMotion = useReducedMotion();
const duration = (theme.respectReducedMotion ? shouldReduceMotion : false) ? 0 : transitionDuration;
const collapse = (orientation === "horizontal" ? useHorizontalCollapse : useCollapse)({
expanded,
transitionDuration: duration,
transitionTimingFunction,
onTransitionEnd,
onTransitionStart,
keepMounted: false
});
if (duration === 0) {
if (keepMounted === true && env !== "test") return /* @__PURE__ */ jsx(Activity, {
mode: expanded ? "visible" : "hidden",
children: /* @__PURE__ */ jsx(Box, {
...others,
children
})
});
return expanded ? /* @__PURE__ */ jsx(Box, {
...others,
children
}) : null;
}
const isExited = collapse.state === "exited";
let content;
if (keepMounted === false) content = isExited ? null : children;
else if (keepMounted === true) content = /* @__PURE__ */ jsx(Activity, {
mode: isExited ? "hidden" : "visible",
children
});
else content = children;
return /* @__PURE__ */ jsx(Box, {
...others,
...collapse.getCollapseProps({
style: {
opacity: expanded || !animateOpacity ? 1 : 0,
transition: animateOpacity ? `opacity ${duration}ms ${transitionTimingFunction}` : "none",
...getStyleObject(style, theme)
},
ref
}),
children: content
});
});
Collapse.displayName = "@mantine/core/Collapse";
//#endregion
export { Collapse };
//# sourceMappingURL=Collapse.mjs.map