marqy 1.0.2 → 1.1.0

package/marqy.css

@@ -1,131 +0,0 @@
-[data-marqy] {
-  position: relative;
-  width: 100%;
-}
-
-[data-marqy][data-direction='left'],
-[data-marqy][data-direction='right'] {
-  overflow-x: clip;
-}
-
-[data-marqy][data-direction='up'],
-[data-marqy][data-direction='down'] {
-  overflow-y: clip;
-}
-
-[data-marqy-inner] {
-  display: flex;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-[data-marqy][data-direction='up'] [data-marqy-inner],
-[data-marqy][data-direction='down'] [data-marqy-inner],
-[data-marqy][data-direction='up'] [data-marqy-content],
-[data-marqy][data-direction='down'] [data-marqy-content] {
-  flex-direction: column;
-}
-
-[data-marqy-inner]::-webkit-scrollbar {
-  display: none;
-}
-
-[data-marqy][data-direction='right'] [data-marqy-inner] {
-  justify-content: flex-end;
-}
-
-[data-marqy][data-direction='down'] [data-marqy-inner],
-[data-marqy][data-direction='down'] [data-marqy-content] {
-  justify-content: flex-end;
-}
-
-[data-marqy-content] {
-  display: flex;
-  flex: 1 0 auto;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-  animation-play-state: running;
-  will-change: transform;
-}
-
-[data-marqy-static] [data-marqy-content] {
-  animation: none !important;
-}
-
-[data-marqy][data-direction='left'] [data-marqy-content] {
-  animation-name: marqyL;
-}
-
-[data-marqy][data-direction='right'] [data-marqy-content] {
-  animation-name: marqyR;
-}
-
-[data-marqy][data-direction='up'] [data-marqy-content] {
-  animation-name: marqyU;
-}
-
-[data-marqy][data-direction='down'] [data-marqy-content] {
-  animation-name: marqyD;
-}
-
-[data-marqy][data-pause-on-hover]:hover
-  > [data-marqy-inner]
-  > [data-marqy-content] {
-  animation-play-state: paused;
-}
-
-[data-marqy-item] {
-  flex-grow: 0;
-}
-
-@keyframes marqyL {
-  0% {
-    transform: translate3d(0, 0, 0);
-  }
-  100% {
-    transform: translate3d(-100%, 0, 0);
-  }
-}
-
-@keyframes marqyR {
-  0% {
-    transform: translate3d(0, 0, 0);
-  }
-  100% {
-    transform: translate3d(100%, 0, 0);
-  }
-}
-
-@keyframes marqyU {
-  0% {
-    transform: translate3d(0, 0, 0);
-  }
-  100% {
-    transform: translate3d(0, -100%, 0);
-  }
-}
-
-@keyframes marqyD {
-  0% {
-    transform: translate3d(0, -100%, 0);
-  }
-  100% {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@media (prefers-reduced-motion) {
-  [data-marqy][data-direction='left'] [data-marqy-inner],
-  [data-marqy][data-direction='right'] [data-marqy-inner] {
-    overflow-x: scroll;
-  }
-
-  [data-marqy][data-direction='up'],
-  [data-marqy][data-direction='down'] {
-    overflow-y: scroll;
-  }
-
-  [data-marqy-content] {
-    animation: none !important;
-  }
-}

package/src/marqy.tsx

@@ -1,97 +0,0 @@
-import * as React from 'react'
-
-export interface MarqyProps extends React.ComponentPropsWithoutRef<'div'> {
-  speed?: number
-  direction?: 'left' | 'right' | 'up' | 'down'
-  pauseOnHover?: boolean
-  manual?: boolean
-  children: React.ReactNode
-}
-
-export function Marqy({
-  speed = 0.5,
-  direction = 'left',
-  pauseOnHover,
-  manual = false,
-  children,
-  ...rest
-}: MarqyProps): React.ReactElement {
-  const [reps, setReps] = React.useState(1)
-
-  const [container, containerDimensions] = useDimensions()
-  const [item, itemDimensions] = useDimensions()
-
-  const isVertical = direction === 'up' || direction === 'down'
-
-  const getAnimationDuration = React.useCallback(
-    (itemDimension: number) => {
-      return `${((itemDimension ?? 0) * reps) / (100 * speed)}s`
-    },
-    [reps, speed]
-  )
-
-  React.useEffect(() => {
-    if (!isVertical && containerDimensions.width && itemDimensions.width) {
-      setReps(Math.ceil(containerDimensions.width / itemDimensions.width))
-    }
-    if (isVertical && containerDimensions.height && itemDimensions.height) {
-      setReps(Math.ceil(containerDimensions.height / itemDimensions.height))
-    }
-  }, [isVertical, containerDimensions, itemDimensions])
-
-  return (
-    <div
-      ref={container}
-      data-marqy=""
-      data-direction={direction}
-      data-pause-on-hover={pauseOnHover ? '' : null}
-      {...rest}
-    >
-      <div data-marqy-inner="">
-        {new Array(2).fill(0).map((_, clone) => (
-          <div
-            key={clone}
-            data-marqy-content=""
-            {...(manual
-              ? { 'data-marqy-static': getAnimationDuration(isVertical ? itemDimensions.height : itemDimensions.width) }
-              : { style: { animationDuration: getAnimationDuration(isVertical ? itemDimensions.height : itemDimensions.width) } }
-            )}
-          >
-            {new Array(reps).fill(0).map((_, rep) => {
-              const isFirstItem = clone === 0 && rep === 0
-              return (
-                <div
-                  key={rep}
-                  ref={isFirstItem ? item : null}
-                  aria-hidden={!isFirstItem || null}
-                  data-marqy-item=""
-                >
-                  {children}
-                </div>
-              )
-            })}
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-function useDimensions() {
-  const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 })
-  const observer = React.useRef<ResizeObserver | null>(null)
-
-  const ref = React.useCallback((node: HTMLElement | null) => {
-    observer.current?.disconnect()
-    if (!node) return
-    observer.current = new ResizeObserver(([entry]) =>
-      setDimensions({
-        width: entry.contentRect.width,
-        height: entry.contentRect.height,
-      })
-    )
-    observer.current.observe(node)
-  }, [])
-
-  return [ref, dimensions] as const
-}

package/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "declaration": true,
-  "compilerOptions": {
-    "jsx": "react",
-    "moduleResolution": "node",
-    "esModuleInterop": true,
-    "lib": ["dom", "es2015"]
-  }
-}