@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
66 lines (65 loc) • 2.48 kB
JavaScript
"use client";
require("../../_virtual/_rolldown/runtime.cjs");
const require_get_size = require("../../core/utils/get-size/get-size.cjs");
const require_create_vars_resolver = require("../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
const require_factory = require("../../core/factory/factory.cjs");
const require_Box = require("../../core/Box/Box.cjs");
const require_Marquee_module = require("./Marquee.module.cjs");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/Marquee/Marquee.tsx
const defaultProps = {
repeat: 4,
duration: 1e5,
orientation: "horizontal",
fadeEdges: true
};
const varsResolver = require_create_vars_resolver.createVarsResolver((_, { duration, gap, repeat, fadeEdgeColor, fadeEdgeSize }) => ({ root: {
"--marquee-duration": `${duration}ms`,
"--marquee-gap": require_get_size.getSpacing(gap),
"--marquee-repeat": (repeat ?? 4).toString(),
"--marquee-fade-color": fadeEdgeColor,
"--marquee-fade-size": fadeEdgeSize
} }));
const Marquee = require_factory.factory((_props) => {
const props = require_use_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 = require_use_styles.useStyles({
name: "Marquee",
classes: require_Marquee_module.default,
props,
className,
style,
classNames,
styles,
unstyled,
attributes,
vars,
varsResolver
});
const repeatedChildren = Array(repeat).fill(0).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
...getStyles("group"),
children
}, index));
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
...getStyles("root"),
mod: [{
orientation,
reverse,
pauseOnHover,
"fade-edges": fadeEdges
}, mod],
...others,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
...getStyles("content"),
children: repeatedChildren
})
});
});
Marquee.classes = require_Marquee_module.default;
Marquee.varsResolver = varsResolver;
Marquee.displayName = "@mantine/core/Marquee";
//#endregion
exports.Marquee = Marquee;
//# sourceMappingURL=Marquee.cjs.map