@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
65 lines (64 loc) • 2.15 kB
JavaScript
"use client";
import { getSpacing } from "../../core/utils/get-size/get-size.mjs";
import { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
import { factory } from "../../core/factory/factory.mjs";
import { Box } from "../../core/Box/Box.mjs";
import Marquee_module_default from "./Marquee.module.mjs";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/Marquee/Marquee.tsx
const defaultProps = {
repeat: 4,
duration: 1e5,
orientation: "horizontal",
fadeEdges: true
};
const varsResolver = createVarsResolver((_, { duration, gap, repeat, fadeEdgeColor, fadeEdgeSize }) => ({ root: {
"--marquee-duration": `${duration}ms`,
"--marquee-gap": getSpacing(gap),
"--marquee-repeat": (repeat ?? 4).toString(),
"--marquee-fade-color": fadeEdgeColor,
"--marquee-fade-size": fadeEdgeSize
} }));
const Marquee = factory((_props) => {
const props = useProps("Marquee", defaultProps, _props);
const { classNames, className, style, styles, unstyled, vars, children, reverse, pauseOnHover, orientation, repeat, duration, gap, fadeEdges, fadeEdgeColor, fadeEdgeSize, mod, attributes, ...others } = props;
const getStyles = useStyles({
name: "Marquee",
classes: Marquee_module_default,
props,
className,
style,
classNames,
styles,
unstyled,
attributes,
vars,
varsResolver
});
const repeatedChildren = Array(repeat).fill(0).map((_, index) => /* @__PURE__ */ jsx("div", {
...getStyles("group"),
children
}, index));
return /* @__PURE__ */ jsx(Box, {
...getStyles("root"),
mod: [{
orientation,
reverse,
pauseOnHover,
"fade-edges": fadeEdges
}, mod],
...others,
children: /* @__PURE__ */ jsx("div", {
...getStyles("content"),
children: repeatedChildren
})
});
});
Marquee.classes = Marquee_module_default;
Marquee.varsResolver = varsResolver;
Marquee.displayName = "@mantine/core/Marquee";
//#endregion
export { Marquee };
//# sourceMappingURL=Marquee.mjs.map