deepsea-components 5.7.0 → 5.7.2

package/src/components/LoopSwiper.tsx

@@ -1,101 +1,125 @@
-"use client"
-
-import { css } from "@emotion/css"
-import { clsx } from "deepsea-tools"
-import { CSSProperties, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useRef, useState } from "react"
-
-export interface LoopSwiperProps extends HTMLAttributes<HTMLDivElement> {
-    direction?: "horizontal" | "vertical"
-    reverse?: boolean
-    period: number
-    gap?: CSSProperties["gap"]
-}
-
-/** 循环播放组件 */
-export const LoopSwiper = forwardRef<HTMLDivElement, LoopSwiperProps>((props, ref) => {
-    const { className, style, children, direction, period, reverse, gap, ...rest } = props
-    const wrapper = useRef<HTMLDivElement>(null)
-    const container = useRef<HTMLDivElement>(null)
-    const [swiper, setSwiper] = useState(false)
-    const directionRef = useRef(direction)
-    directionRef.current = direction
-    const flexDirection: CSSProperties["flexDirection"] = direction === "vertical" ? (reverse ? "column-reverse" : "column") : reverse ? "row-reverse" : "row"
-    const animationName = swiper ? (direction === "vertical" ? (reverse ? "deepsea-reverse-vertical-loop-swipe" : "deepsea-vertical-loop-swipe") : reverse ? "deepsea-reverse-horizontal-loop-swipe" : "deepsea-horizontal-loop-swipe") : "none"
-    const animationDuration = `${period}ms`
-    const animationTimingFunction = "linear"
-    const animationIterationCount = "infinite"
-
-    useImperativeHandle(ref, () => wrapper.current!, [])
-
-    useEffect(() => {
-        const wrapperEle = wrapper.current!
-        const containerEle = container.current!
-        let wrapperWidth = 0
-        let wrapperHeight = 0
-        let containerWidth = 0
-        let containerHeight = 0
-        const observer = new ResizeObserver(entries => {
-            entries.forEach(entry => {
-                if (entry.target === wrapperEle) {
-                    wrapperWidth = entry.contentRect.width
-                    wrapperHeight = entry.contentRect.height
-                } else if (entry.target === containerEle) {
-                    containerWidth = entry.contentRect.width
-                    containerHeight = entry.contentRect.height
-                }
-            })
-            setSwiper(directionRef.current === "vertical" ? containerHeight > wrapperHeight : containerWidth > wrapperWidth)
-        })
-        observer.observe(wrapperEle)
-        observer.observe(containerEle)
-    }, [])
-
-    return (
-        <div
-            ref={wrapper}
-            className={clsx(
-                css`
-                    @keyframes deepsea-horizontal-loop-swipe {
-                        from {
-                            transform: translateX(0);
-                        }
-                        to {
-                            transform: translateX(-100%);
-                        }
-                    }
-                    @keyframes deepsea-reverse-horizontal-loop-swipe {
-                        from {
-                            transform: translateX(0);
-                        }
-                        to {
-                            transform: translateX(100%);
-                        }
-                    }
-                    @keyframes deepsea-vertical-loop-swipe {
-                        from {
-                            transform: translateY(0);
-                        }
-                        to {
-                            transform: translateY(-100%);
-                        }
-                    }
-                    @keyframes deepsea-reverse-vertical-loop-swipe {
-                        from {
-                            transform: translateY(0);
-                        }
-                        to {
-                            transform: translateY(100%);
-                        }
-                    }
-                `,
-                className
-            )}
-            style={{ display: "flex", flexDirection, gap, ...style }}
-            {...rest}>
-            <div ref={container} style={{ display: "flex", flexDirection, gap, animationName, animationTimingFunction, animationDuration, animationIterationCount }}>
-                {children}
-            </div>
-            <div style={{ display: swiper ? "flex" : "none", flexDirection, gap, animationName, animationTimingFunction, animationDuration, animationIterationCount }}>{children}</div>
-        </div>
-    )
-})
+"use client"
+
+import { css } from "@emotion/css"
+import { clsx } from "deepsea-tools"
+import { CSSProperties, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useRef, useState } from "react"
+
+export interface LoopSwiperProps extends HTMLAttributes<HTMLDivElement> {
+    direction?: "horizontal" | "vertical"
+    reverse?: boolean
+    period: number
+    gap?: CSSProperties["gap"]
+}
+
+/** 循环播放组件 */
+export const LoopSwiper = forwardRef<HTMLDivElement, LoopSwiperProps>((props, ref) => {
+    const { className, style, children, direction, period, reverse, gap, ...rest } = props
+    const wrapper = useRef<HTMLDivElement>(null)
+    const container = useRef<HTMLDivElement>(null)
+    const [swiper, setSwiper] = useState(false)
+    const directionRef = useRef(direction)
+    directionRef.current = direction
+    const flexDirection: CSSProperties["flexDirection"] = direction === "vertical" ? (reverse ? "column-reverse" : "column") : reverse ? "row-reverse" : "row"
+    const animationName = swiper
+        ? direction === "vertical"
+            ? reverse
+                ? "deepsea-reverse-vertical-loop-swipe"
+                : "deepsea-vertical-loop-swipe"
+            : reverse
+              ? "deepsea-reverse-horizontal-loop-swipe"
+              : "deepsea-horizontal-loop-swipe"
+        : "none"
+    const animationDuration = `${period}ms`
+    const animationTimingFunction = "linear"
+    const animationIterationCount = "infinite"
+
+    useImperativeHandle(ref, () => wrapper.current!, [])
+
+    useEffect(() => {
+        const wrapperEle = wrapper.current!
+        const containerEle = container.current!
+        let wrapperWidth = 0
+        let wrapperHeight = 0
+        let containerWidth = 0
+        let containerHeight = 0
+        const observer = new ResizeObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.target === wrapperEle) {
+                    wrapperWidth = entry.contentRect.width
+                    wrapperHeight = entry.contentRect.height
+                } else if (entry.target === containerEle) {
+                    containerWidth = entry.contentRect.width
+                    containerHeight = entry.contentRect.height
+                }
+            })
+            setSwiper(directionRef.current === "vertical" ? containerHeight > wrapperHeight : containerWidth > wrapperWidth)
+        })
+        observer.observe(wrapperEle)
+        observer.observe(containerEle)
+    }, [])
+
+    return (
+        <div
+            ref={wrapper}
+            className={clsx(
+                css`
+                    @keyframes deepsea-horizontal-loop-swipe {
+                        from {
+                            transform: translateX(0);
+                        }
+                        to {
+                            transform: translateX(-100%);
+                        }
+                    }
+                    @keyframes deepsea-reverse-horizontal-loop-swipe {
+                        from {
+                            transform: translateX(0);
+                        }
+                        to {
+                            transform: translateX(100%);
+                        }
+                    }
+                    @keyframes deepsea-vertical-loop-swipe {
+                        from {
+                            transform: translateY(0);
+                        }
+                        to {
+                            transform: translateY(-100%);
+                        }
+                    }
+                    @keyframes deepsea-reverse-vertical-loop-swipe {
+                        from {
+                            transform: translateY(0);
+                        }
+                        to {
+                            transform: translateY(100%);
+                        }
+                    }
+                `,
+                className,
+            )}
+            style={{ display: "flex", flexDirection, gap, ...style }}
+            {...rest}
+        >
+            <div
+                ref={container}
+                style={{ display: "flex", flexDirection, gap, animationName, animationTimingFunction, animationDuration, animationIterationCount }}
+            >
+                {children}
+            </div>
+            <div
+                style={{
+                    display: swiper ? "flex" : "none",
+                    flexDirection,
+                    gap,
+                    animationName,
+                    animationTimingFunction,
+                    animationDuration,
+                    animationIterationCount,
+                }}
+            >
+                {children}
+            </div>
+        </div>
+    )
+})

package/src/components/Ring.tsx

@@ -1,19 +1,30 @@
-"use client"
-
-import { forwardRef, HTMLAttributes } from "react"
-
-export interface RingProps extends HTMLAttributes<HTMLDivElement> {
-    outerWidth: number
-    innerWidth: number
-}
-
-/** 环形组件 */
-export const Ring = forwardRef<HTMLDivElement, RingProps>((props, ref) => {
-    const { outerWidth, innerWidth, style, ...rest } = props
-
-    const outerRadius = outerWidth / 2
-
-    const innerRadius = innerWidth / 2
-
-    return <div ref={ref} style={{ ...style, width: `${outerWidth}px`, height: `${outerWidth}px`, clipPath: `path("M0,${outerRadius} a${outerRadius},${outerRadius},0,1,0,${outerWidth},0 a${outerRadius},${outerRadius},0,1,0,-${outerWidth},0 l${outerRadius - innerRadius},0 a${innerRadius},${innerRadius},0,0,1,${innerRadius * 2},0 a${innerRadius},${innerRadius},0,0,1,-${innerRadius * 2},0 Z")` }} {...rest} />
-})
+"use client"
+
+import { forwardRef, HTMLAttributes } from "react"
+
+export interface RingProps extends HTMLAttributes<HTMLDivElement> {
+    outerWidth: number
+    innerWidth: number
+}
+
+/** 环形组件 */
+export const Ring = forwardRef<HTMLDivElement, RingProps>((props, ref) => {
+    const { outerWidth, innerWidth, style, ...rest } = props
+
+    const outerRadius = outerWidth / 2
+
+    const innerRadius = innerWidth / 2
+
+    return (
+        <div
+            ref={ref}
+            style={{
+                ...style,
+                width: `${outerWidth}px`,
+                height: `${outerWidth}px`,
+                clipPath: `path("M0,${outerRadius} a${outerRadius},${outerRadius},0,1,0,${outerWidth},0 a${outerRadius},${outerRadius},0,1,0,-${outerWidth},0 l${outerRadius - innerRadius},0 a${innerRadius},${innerRadius},0,0,1,${innerRadius * 2},0 a${innerRadius},${innerRadius},0,0,1,-${innerRadius * 2},0 Z")`,
+            }}
+            {...rest}
+        />
+    )
+})

package/src/components/Scroll.tsx

@@ -1,95 +1,96 @@
-"use client"
-
-import { css } from "@emotion/css"
-import { clsx } from "deepsea-tools"
-import { CSSProperties, ForwardedRef, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react"
-import Scrollbar from "smooth-scrollbar"
-import type { ScrollbarOptions, ScrollListener } from "smooth-scrollbar/interfaces"
-import { px, transformCSSVariable } from "../utils"
-export { default as Scrollbar } from "smooth-scrollbar"
-export * from "smooth-scrollbar/interfaces"
-
-export interface ScrollOptions extends Partial<ScrollbarOptions> {
-    /** 滑块宽度 */
-    thumbWidth?: number | string
-    /** 滑块圆角大小 */
-    thumbRadius?: number | string
-    /** 滑块背景颜色 */
-    thumbColor?: CSSProperties["backgroundColor"]
-    /** 滚动条背景颜色 */
-    trackColor?: CSSProperties["backgroundColor"]
-}
-
-export interface ScrollProps extends HTMLAttributes<HTMLDivElement> {
-    /** 滚动的配置 */
-    options?: ScrollOptions
-    /** 滚动条实例 */
-    scrollbar?: ForwardedRef<Scrollbar>
-    /** 滚动条滚动事件 */
-    onScrollbar?: ScrollListener
-}
-
-export const Scroll = forwardRef<HTMLDivElement, ScrollProps>((props, ref) => {
-    const { children, options, className, style, scrollbar, onScrollbar, ...rest } = props
-    const { thumbWidth, thumbRadius, thumbColor, trackColor, ...scrollbarOptions } = options || {}
-    const ele = useRef<HTMLDivElement>(null)
-    const bar = useRef<Scrollbar | null>(null)
-
-    useLayoutEffect(() => {
-        bar.current = Scrollbar.init(ele.current!, scrollbarOptions)
-        return () => bar.current?.destroy()
-    }, [])
-
-    useImperativeHandle(ref, () => ele.current!, [])
-
-    useImperativeHandle(scrollbar, () => bar.current!, [])
-
-    useEffect(() => {
-        if (!onScrollbar) return
-        bar.current?.addListener(onScrollbar)
-        return () => bar.current?.removeListener(onScrollbar)
-    }, [onScrollbar])
-
-    return (
-        <div
-            ref={ele}
-            className={clsx(
-                css`
-                    .scrollbar-track.scrollbar-track-x {
-                        ${thumbWidth !== undefined ? "height: var(--thumb-width);" : ""}
-                        ${trackColor !== undefined ? "background-color: var(--track-color);" : ""}
-                    }
-
-                    .scrollbar-thumb.scrollbar-thumb-x {
-                        ${thumbWidth !== undefined ? "height: var(--thumb-width);" : ""}
-                        ${thumbRadius !== undefined ? "border-radius: var(--thumb-radius);" : ""}
-                        ${thumbColor !== undefined ? "background-color: var(--thumb-color);" : ""}
-                    }
-
-                    .scrollbar-track.scrollbar-track-y {
-                        ${thumbWidth !== undefined ? "width: var(--thumb-width);" : ""}
-                        ${trackColor !== undefined ? "background-color: var(--track-color);" : ""}
-                    }
-
-                    .scrollbar-thumb.scrollbar-thumb-y {
-                        ${thumbWidth !== undefined ? "width: var(--thumb-width);" : ""}
-                        ${thumbRadius !== undefined ? "border-radius: var(--thumb-radius);" : ""}
-                        ${thumbColor !== undefined ? "background-color: var(--thumb-color);" : ""}
-                    }
-                `,
-                className
-            )}
-            style={transformCSSVariable(
-                {
-                    thumbWidth: px(thumbWidth),
-                    thumbRadius: px(thumbRadius),
-                    thumbColor,
-                    trackColor
-                },
-                style
-            )}
-            {...rest}>
-            {children}
-        </div>
-    )
-})
+"use client"
+
+import { css } from "@emotion/css"
+import { clsx } from "deepsea-tools"
+import { CSSProperties, ForwardedRef, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react"
+import Scrollbar from "smooth-scrollbar"
+import type { ScrollbarOptions, ScrollListener } from "smooth-scrollbar/interfaces"
+import { px, transformCSSVariable } from "../utils"
+export { default as Scrollbar } from "smooth-scrollbar"
+export * from "smooth-scrollbar/interfaces"
+
+export interface ScrollOptions extends Partial<ScrollbarOptions> {
+    /** 滑块宽度 */
+    thumbWidth?: number | string
+    /** 滑块圆角大小 */
+    thumbRadius?: number | string
+    /** 滑块背景颜色 */
+    thumbColor?: CSSProperties["backgroundColor"]
+    /** 滚动条背景颜色 */
+    trackColor?: CSSProperties["backgroundColor"]
+}
+
+export interface ScrollProps extends HTMLAttributes<HTMLDivElement> {
+    /** 滚动的配置 */
+    options?: ScrollOptions
+    /** 滚动条实例 */
+    scrollbar?: ForwardedRef<Scrollbar>
+    /** 滚动条滚动事件 */
+    onScrollbar?: ScrollListener
+}
+
+export const Scroll = forwardRef<HTMLDivElement, ScrollProps>((props, ref) => {
+    const { children, options, className, style, scrollbar, onScrollbar, ...rest } = props
+    const { thumbWidth, thumbRadius, thumbColor, trackColor, ...scrollbarOptions } = options || {}
+    const ele = useRef<HTMLDivElement>(null)
+    const bar = useRef<Scrollbar | null>(null)
+
+    useLayoutEffect(() => {
+        bar.current = Scrollbar.init(ele.current!, scrollbarOptions)
+        return () => bar.current?.destroy()
+    }, [])
+
+    useImperativeHandle(ref, () => ele.current!, [])
+
+    useImperativeHandle(scrollbar, () => bar.current!, [])
+
+    useEffect(() => {
+        if (!onScrollbar) return
+        bar.current?.addListener(onScrollbar)
+        return () => bar.current?.removeListener(onScrollbar)
+    }, [onScrollbar])
+
+    return (
+        <div
+            ref={ele}
+            className={clsx(
+                css`
+                    .scrollbar-track.scrollbar-track-x {
+                        ${thumbWidth !== undefined ? "height: var(--thumb-width);" : ""}
+                        ${trackColor !== undefined ? "background-color: var(--track-color);" : ""}
+                    }
+
+                    .scrollbar-thumb.scrollbar-thumb-x {
+                        ${thumbWidth !== undefined ? "height: var(--thumb-width);" : ""}
+                        ${thumbRadius !== undefined ? "border-radius: var(--thumb-radius);" : ""}
+                        ${thumbColor !== undefined ? "background-color: var(--thumb-color);" : ""}
+                    }
+
+                    .scrollbar-track.scrollbar-track-y {
+                        ${thumbWidth !== undefined ? "width: var(--thumb-width);" : ""}
+                        ${trackColor !== undefined ? "background-color: var(--track-color);" : ""}
+                    }
+
+                    .scrollbar-thumb.scrollbar-thumb-y {
+                        ${thumbWidth !== undefined ? "width: var(--thumb-width);" : ""}
+                        ${thumbRadius !== undefined ? "border-radius: var(--thumb-radius);" : ""}
+                        ${thumbColor !== undefined ? "background-color: var(--thumb-color);" : ""}
+                    }
+                `,
+                className,
+            )}
+            style={transformCSSVariable(
+                {
+                    thumbWidth: px(thumbWidth),
+                    thumbRadius: px(thumbRadius),
+                    thumbColor,
+                    trackColor,
+                },
+                style,
+            )}
+            {...rest}
+        >
+            {children}
+        </div>
+    )
+})

package/src/components/SectionRing.tsx

@@ -1,36 +1,39 @@
-"use client"
-
-import { DrawArcOptions, drawArc } from "deepsea-tools"
-import { FC, HTMLAttributes } from "react"
-
-export interface SectionRingProps extends HTMLAttributes<HTMLDivElement> {
-    outerRadius: number
-    innerRadius: number
-    count: number
-    angel: number
-}
-
-export const SectionRing: FC<SectionRingProps> = props => {
-    const { outerRadius: o, innerRadius: i, count: c, angel: a, style, ...rest } = props
-
-    const s = (Math.PI * 2) / c - a
-
-    function arc(radius: number, startAngle: number, endAngle: number, options: DrawArcOptions = {}) {
-        return drawArc(o, o, radius, startAngle, endAngle, options)
-    }
-
-    return (
-        <div
-            style={{
-                ...style,
-                width: o * 2,
-                height: o * 2,
-                clipPath: `path("${Array(c)
-                    .fill(0)
-                    .map((it, idx) => `${arc(o, idx * (a + s), idx * (a + s) + a)} ${arc(i, idx * (a + s) + a, idx * (a + s), { line: true, anticlockwise: true })}`)
-                    .join(" ")} Z")`
-            }}
-            {...rest}
-        />
-    )
-}
+"use client"
+
+import { DrawArcOptions, drawArc } from "deepsea-tools"
+import { FC, HTMLAttributes } from "react"
+
+export interface SectionRingProps extends HTMLAttributes<HTMLDivElement> {
+    outerRadius: number
+    innerRadius: number
+    count: number
+    angel: number
+}
+
+export const SectionRing: FC<SectionRingProps> = props => {
+    const { outerRadius: o, innerRadius: i, count: c, angel: a, style, ...rest } = props
+
+    const s = (Math.PI * 2) / c - a
+
+    function arc(radius: number, startAngle: number, endAngle: number, options: DrawArcOptions = {}) {
+        return drawArc(o, o, radius, startAngle, endAngle, options)
+    }
+
+    return (
+        <div
+            style={{
+                ...style,
+                width: o * 2,
+                height: o * 2,
+                clipPath: `path("${Array(c)
+                    .fill(0)
+                    .map(
+                        (it, idx) =>
+                            `${arc(o, idx * (a + s), idx * (a + s) + a)} ${arc(i, idx * (a + s) + a, idx * (a + s), { line: true, anticlockwise: true })}`,
+                    )
+                    .join(" ")} Z")`,
+            }}
+            {...rest}
+        />
+    )
+}

package/src/components/Skeleton.tsx

@@ -1,46 +1,47 @@
-"use client"
-
-import { css } from "@emotion/css"
-import { clsx } from "deepsea-tools"
-import { forwardRef, HTMLAttributes } from "react"
-
-export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
-    loading?: boolean
-}
-
-export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>((props, ref) => {
-    let { className, loading, children, ...rest } = props
-
-    loading ??= children === undefined || children === null
-
-    return (
-        <div
-            ref={ref}
-            className={clsx(
-                css`
-                    @keyframes shimmer {
-                        0% {
-                            background-position: -400px 0px;
-                        }
-                        100% {
-                            background-position: 400px 0px;
-                        }
-                    }
-                `,
-                loading &&
-                    css`
-                        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);
-                        animation-duration: 1s;
-                        animation-fill-mode: forwards;
-                        animation-iteration-count: infinite;
-                        animation-name: shimmer;
-                        animation-timing-function: linear;
-                        background-size: 800px 104px;
-                    `,
-                className
-            )}
-            {...rest}>
-            {children}
-        </div>
-    )
-})
+"use client"
+
+import { css } from "@emotion/css"
+import { clsx } from "deepsea-tools"
+import { forwardRef, HTMLAttributes } from "react"
+
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    loading?: boolean
+}
+
+export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>((props, ref) => {
+    let { className, loading, children, ...rest } = props
+
+    loading ??= children === undefined || children === null
+
+    return (
+        <div
+            ref={ref}
+            className={clsx(
+                css`
+                    @keyframes shimmer {
+                        0% {
+                            background-position: -400px 0px;
+                        }
+                        100% {
+                            background-position: 400px 0px;
+                        }
+                    }
+                `,
+                loading &&
+                    css`
+                        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);
+                        animation-duration: 1s;
+                        animation-fill-mode: forwards;
+                        animation-iteration-count: infinite;
+                        animation-name: shimmer;
+                        animation-timing-function: linear;
+                        background-size: 800px 104px;
+                    `,
+                className,
+            )}
+            {...rest}
+        >
+            {children}
+        </div>
+    )
+})