{"version":3,"file":"static/chunks/1772.d9110f9a9e817cb5.js","mappings":"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","sources":["webpack://_N_E/../src/components/Marquee.tsx"],"sourcesContent":["import React, {\n Fragment,\n useEffect,\n useState,\n useRef,\n useCallback,\n useMemo,\n ReactNode,\n CSSProperties,\n FC,\n forwardRef,\n Children,\n MutableRefObject,\n RefAttributes,\n} from \"react\";\nimport \"./Marquee.scss\";\n\ntype MarqueeProps = {\n /**\n * @description Inline style for the container div\n * @type {CSSProperties}\n * @default {}\n */\n style?: CSSProperties;\n /**\n * @description Class name to style the container div\n * @type {string}\n * @default \"\"\n */\n className?: string;\n /**\n * @description Whether to automatically fill blank space in the marquee with copies of the children or not\n * @type {boolean}\n * @default false\n */\n autoFill?: boolean;\n /**\n * @description Whether to play or pause the marquee\n * @type {boolean}\n * @default true\n */\n play?: boolean;\n /**\n * @description Whether to pause the marquee when hovered\n * @type {boolean}\n * @default false\n */\n pauseOnHover?: boolean;\n /**\n * @description Whether to pause the marquee when clicked\n * @type {boolean}\n * @default false\n */\n pauseOnClick?: boolean;\n /**\n * @description The direction the marquee is sliding\n * @type {\"left\" | \"right\" | \"up\" | \"down\"}\n * @default \"left\"\n */\n direction?: \"left\" | \"right\" | \"up\" | \"down\";\n /**\n * @description Speed calculated as pixels/second\n * @type {number}\n * @default 50\n */\n speed?: number;\n /**\n * @description Duration to delay the animation after render, in seconds\n * @type {number}\n * @default 0\n */\n delay?: number;\n /**\n * @description The number of times the marquee should loop, 0 is equivalent to infinite\n * @type {number}\n * @default 0\n */\n loop?: number;\n /**\n * @description Whether to show the gradient or not\n * @type {boolean}\n * @default false\n */\n gradient?: boolean;\n /**\n * @description The color of the gradient\n * @type {string}\n * @default \"white\"\n */\n gradientColor?: string;\n /**\n * @description The width of the gradient on either side\n * @type {number | string}\n * @default 200\n */\n gradientWidth?: number | string;\n /**\n * @description A callback for when the marquee finishes scrolling and stops. Only calls if loop is non-zero.\n * @type {() => void}\n * @default null\n */\n onFinish?: () => void;\n /**\n * @description A callback for when the marquee finishes a loop. Does not call if maximum loops are reached (use onFinish instead).\n * @type {() => void}\n * @default null\n */\n onCycleComplete?: () => void;\n /**\n * @description: A callback function that is invoked once the marquee has finished mounting. It can be utilized to recalculate the page size, if necessary.\n * @type {() => void}\n * @default null\n */\n onMount?: () => void;\n /**\n * @description The children rendered inside the marquee\n * @type {ReactNode}\n * @default null\n */\n children?: ReactNode;\n} & RefAttributes;\n\nconst Marquee: FC = forwardRef(function Marquee(\n {\n style = {},\n className = \"\",\n autoFill = false,\n play = true,\n pauseOnHover = false,\n pauseOnClick = false,\n direction = \"left\",\n speed = 50,\n delay = 0,\n loop = 0,\n gradient = false,\n gradientColor = \"white\",\n gradientWidth = 200,\n onFinish,\n onCycleComplete,\n onMount,\n children,\n },\n ref\n) {\n // React Hooks\n const [containerWidth, setContainerWidth] = useState(0);\n const [marqueeWidth, setMarqueeWidth] = useState(0);\n const [multiplier, setMultiplier] = useState(1);\n const [isMounted, setIsMounted] = useState(false);\n const rootRef = useRef(null);\n const containerRef = (ref as MutableRefObject) || rootRef;\n const marqueeRef = useRef(null);\n\n // Calculate width of container and marquee and set multiplier\n const calculateWidth = useCallback(() => {\n if (marqueeRef.current && containerRef.current) {\n const containerRect = containerRef.current.getBoundingClientRect();\n const marqueeRect = marqueeRef.current.getBoundingClientRect();\n let containerWidth = containerRect.width;\n let marqueeWidth = marqueeRect.width;\n\n // Swap width and height if direction is up or down\n if (direction === \"up\" || direction === \"down\") {\n containerWidth = containerRect.height;\n marqueeWidth = marqueeRect.height;\n }\n\n if (autoFill && containerWidth && marqueeWidth) {\n setMultiplier(\n marqueeWidth < containerWidth\n ? Math.ceil(containerWidth / marqueeWidth)\n : 1\n );\n } else {\n setMultiplier(1);\n }\n\n setContainerWidth(containerWidth);\n setMarqueeWidth(marqueeWidth);\n }\n }, [autoFill, containerRef, direction]);\n\n // Calculate width and multiplier on mount and on window resize\n useEffect(() => {\n if (!isMounted) return;\n\n calculateWidth();\n if (marqueeRef.current && containerRef.current) {\n const resizeObserver = new ResizeObserver(() => calculateWidth());\n resizeObserver.observe(containerRef.current);\n resizeObserver.observe(marqueeRef.current);\n return () => {\n if (!resizeObserver) return;\n resizeObserver.disconnect();\n };\n }\n }, [calculateWidth, containerRef, isMounted]);\n\n // Recalculate width when children change\n useEffect(() => {\n calculateWidth();\n }, [calculateWidth, children]);\n\n useEffect(() => {\n setIsMounted(true);\n }, []);\n\n // Runs the onMount callback, if it is a function, when Marquee is mounted.\n useEffect(() => {\n if (typeof onMount === \"function\") {\n onMount();\n }\n }, []);\n\n // Animation duration\n const duration = useMemo(() => {\n if (autoFill) {\n return (marqueeWidth * multiplier) / speed;\n } else {\n return marqueeWidth < containerWidth\n ? containerWidth / speed\n : marqueeWidth / speed;\n }\n }, [autoFill, containerWidth, marqueeWidth, multiplier, speed]);\n\n const containerStyle = useMemo(\n () => ({\n ...style,\n [\"--pause-on-hover\" as string]:\n !play || pauseOnHover ? \"paused\" : \"running\",\n [\"--pause-on-click\" as string]:\n !play || (pauseOnHover && !pauseOnClick) || pauseOnClick\n ? \"paused\"\n : \"running\",\n [\"--width\" as string]:\n direction === \"up\" || direction === \"down\" ? `100vh` : \"100%\",\n [\"--transform\" as string]:\n direction === \"up\"\n ? \"rotate(-90deg)\"\n : direction === \"down\"\n ? \"rotate(90deg)\"\n : \"none\",\n }),\n [style, play, pauseOnHover, pauseOnClick, direction]\n );\n\n const gradientStyle = useMemo(\n () => ({\n [\"--gradient-color\" as string]: gradientColor,\n [\"--gradient-width\" as string]:\n typeof gradientWidth === \"number\"\n ? `${gradientWidth}px`\n : gradientWidth,\n }),\n [gradientColor, gradientWidth]\n );\n\n const marqueeStyle = useMemo(\n () => ({\n [\"--play\" as string]: play ? \"running\" : \"paused\",\n [\"--direction\" as string]: direction === \"left\" ? \"normal\" : \"reverse\",\n [\"--duration\" as string]: `${duration}s`,\n [\"--delay\" as string]: `${delay}s`,\n [\"--iteration-count\" as string]: !!loop ? `${loop}` : \"infinite\",\n [\"--min-width\" as string]: autoFill ? `auto` : \"100%\",\n }),\n [play, direction, duration, delay, loop, autoFill]\n );\n\n const childStyle = useMemo(\n () => ({\n [\"--transform\" as string]:\n direction === \"up\"\n ? \"rotate(90deg)\"\n : direction === \"down\"\n ? \"rotate(-90deg)\"\n : \"none\",\n }),\n [direction]\n );\n\n // Render {multiplier} number of children\n const multiplyChildren = useCallback(\n (multiplier: number) => {\n return [\n ...Array(\n Number.isFinite(multiplier) && multiplier >= 0 ? multiplier : 0\n ),\n ].map((_, i) => (\n \n {Children.map(children, (child) => {\n return (\n
\n {child}\n
\n );\n })}\n \n ));\n },\n [childStyle, children]\n );\n\n return !isMounted ? null : (\n \n {gradient &&
}\n \n
\n {Children.map(children, (child) => {\n return (\n
\n {child}\n
\n );\n })}\n
\n {multiplyChildren(multiplier - 1)}\n
\n
\n {multiplyChildren(multiplier)}\n
\n \n );\n});\n\nexport default Marquee;\n"],"names":["Marquee","forwardRef","param","ref","style","className","autoFill","play","pauseOnHover","pauseOnClick","direction","speed","delay","loop","gradient","gradientColor","gradientWidth","onFinish","onCycleComplete","onMount","children","containerWidth","setContainerWidth","useState","marqueeWidth","setMarqueeWidth","multiplier","setMultiplier","isMounted","setIsMounted","rootRef","useRef","containerRef","marqueeRef","calculateWidth","useCallback","current","containerRect","getBoundingClientRect","marqueeRect","width","height","Math","ceil","useEffect","resizeObserver","ResizeObserver","observe","disconnect","duration","useMemo","containerStyle","Object","assign","gradientStyle","concat","marqueeStyle","childStyle","multiplyChildren","Array","Number","isFinite","map","_","i","React","Fragment","key","Children","child","onAnimationIteration","onAnimationEnd"],"sourceRoot":""}