deepsea-components 5.17.4 → 5.17.6

package/src/components/InfiniteScroll.tsx

@@ -1,8 +1,8 @@
 "use client"
 
+import { CSSProperties, ComponentPropsWithoutRef, MouseEvent as ReactMouseEvent, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
-import { CSSProperties, ComponentPropsWithoutRef, MouseEvent as ReactMouseEvent, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
 import { useSize } from "soda-hooks"
 
 export type InfiniteScrollProps = ComponentPropsWithoutRef<"div"> & {

package/src/components/LoopSwiper.tsx

@@ -15,6 +15,7 @@ export interface LoopSwiperProps extends ComponentProps<"div"> {
     direction?: "horizontal" | "vertical"
     reverse?: boolean
     period: number
+    pauseOnHover?: boolean
     gap?: number
 }
 
@@ -27,6 +28,7 @@ export const LoopSwiper: FC<LoopSwiperProps> = ({
     direction,
     period,
     reverse,
+    pauseOnHover = true,
     gap = 0,
     ...rest
 }) => {
@@ -58,6 +60,7 @@ export const LoopSwiper: FC<LoopSwiperProps> = ({
         let wrapperHeight = 0
         let containerWidth = 0
         let containerHeight = 0
+
         const observer = new ResizeObserver(entries => {
             entries.forEach(entry => {
                 if (entry.target === wrapperEle) {
@@ -68,8 +71,10 @@ export const LoopSwiper: FC<LoopSwiperProps> = ({
                     containerHeight = entry.contentRect.height
                 }
             })
+
             setSwiper(directionRef.current === "vertical" ? containerHeight > wrapperHeight : containerWidth > wrapperWidth)
         })
+
         observer.observe(wrapperEle)
         observer.observe(containerEle)
     }, [])
@@ -89,7 +94,7 @@ export const LoopSwiper: FC<LoopSwiperProps> = ({
                             transform: translateX(0);
                         }
                         to {
-                            transform: translateX(-100%);
+                            transform: translateX(calc(-100% - ${gap}px));
                         }
                     }
 
@@ -98,7 +103,7 @@ export const LoopSwiper: FC<LoopSwiperProps> = ({
                             transform: translateX(0);
                         }
                         to {
-                            transform: translateX(100%);
+                            transform: translateX(calc(100% + ${gap}px));
                         }
                     }
 
@@ -107,7 +112,7 @@ export const LoopSwiper: FC<LoopSwiperProps> = ({
                             transform: translateY(0);
                         }
                         to {
-                            transform: translateY(-100%);
+                            transform: translateY(calc(-100% - ${gap}px));
                         }
                     }
 
@@ -116,9 +121,15 @@ export const LoopSwiper: FC<LoopSwiperProps> = ({
                             transform: translateY(0);
                         }
                         to {
-                            transform: translateY(100%);
+                            transform: translateY(calc(100% + ${gap}px));
                         }
                     }
+
+                    ${pauseOnHover
+                        ? `&:hover > * {
+                        animation-play-state: paused;
+                    }`
+                        : ""}
                 `,
                 className,
                 rootClassName,

package/src/components/ReadSheet.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { WorkBookData, WorkSheetData, readSheet } from "deepsea-tools"
 import { FC } from "react"
+import { WorkBookData, WorkSheetData, readSheet } from "deepsea-tools"
 
 import { InputFile, InputFileProps } from "./InputFile"
 

package/src/components/Scroll.tsx

@@ -1,8 +1,8 @@
 "use client"
 
+import { CSSProperties, ForwardedRef, HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react"
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
-import { CSSProperties, ForwardedRef, HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react"
 import Scrollbar from "smooth-scrollbar"
 import type { ScrollListener, ScrollbarOptions } from "smooth-scrollbar/interfaces"
 

package/src/components/ScrollMask.tsx

@@ -1,5 +1,5 @@
-import { clsx, isNonNullable } from "deepsea-tools"
 import { CSSProperties, ComponentProps, FC, useRef } from "react"
+import { clsx, isNonNullable } from "deepsea-tools"
 import { useSize } from "soda-hooks"
 
 import styles from "./ScrollMask.module.css"

package/src/components/SectionRing.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { DrawArcOptions, drawArc } from "deepsea-tools"
 import { HTMLAttributes, forwardRef } from "react"
+import { DrawArcOptions, drawArc } from "deepsea-tools"
 
 export interface SectionRingProps extends HTMLAttributes<HTMLDivElement> {
     outerRadius: number

package/src/components/Skeleton.tsx

@@ -1,8 +1,8 @@
 "use client"
 
+import { HTMLAttributes, forwardRef } from "react"
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
-import { HTMLAttributes, forwardRef } from "react"
 
 export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
     loading?: boolean

package/src/components/TransitionNum.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { setFrameInterval } from "deepsea-tools"
 import { ForwardedRef, HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
+import { setFrameInterval } from "deepsea-tools"
 
 export interface TransitionNumProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     /** 当前数字 */

package/src/components/Trapezium.tsx

@@ -1,8 +1,8 @@
 "use client"
 
+import { HTMLAttributes, forwardRef } from "react"
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
-import { HTMLAttributes, forwardRef } from "react"
 
 import { px, transformCSSVariable } from "@/utils"
 

package/src/components/Unify.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { clsx } from "deepsea-tools"
 import { CSSProperties, ComponentProps, FC, JSX, JSXElementConstructor, ReactNode, createContext, createElement, useContext } from "react"
+import { clsx } from "deepsea-tools"
 
 export interface UnifyConfig {
     className?: string

package/src/components/WriteSheet.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { WriteSheetParams, writeSheet } from "deepsea-tools"
 import { ComponentProps, JSX, JSXElementConstructor, MouseEvent as ReactMouseEvent, createElement } from "react"
+import { WriteSheetParams, writeSheet } from "deepsea-tools"
 
 export type WriteSheetProps<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "button"> = Omit<ComponentProps<AS>, "as" | "excel"> & {
     as?: AS