deepsea-components 5.15.21 → 5.15.23

package/src/components/Scroll.tsx

@@ -1,97 +1,97 @@
-"use client"
-
-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"
-
-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, HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react"
+import Scrollbar from "smooth-scrollbar"
+import type { ScrollListener, ScrollbarOptions } 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/ScrollMask.module.css

@@ -1,87 +1,87 @@
-.scroll-mask {
-    position: sticky;
-    z-index: 10;
-    pointer-events: none;
-}
-
-.top-scroll-mask {
-    width: 100%;
-    height: 0;
-    top: 0;
-    right: 0;
-    bottom: 100%;
-    left: 0;
-}
-
-.scroll-mask-content {
-    position: absolute;
-    background-image: linear-gradient(
-        to var(--scroll-mask-direction),
-        var(--scroll-mask-color-from, rgba(0, 0, 0, 0.1)),
-        var(--scroll-mask-color-to, rgba(0, 0, 0, 0))
-    );
-    clip-path: var(--scroll-mask-clip-path, none);
-}
-
-.top-scroll-mask-content {
-    width: 100%;
-    height: var(--scroll-mask-size, 8px);
-    top: 0;
-    right: 50%;
-    transform: translateX(50%);
-    --scroll-mask-direction: bottom;
-}
-
-.bottom-scroll-mask {
-    width: 100%;
-    height: 0;
-    top: 100%;
-    right: 0;
-    bottom: 0;
-    left: 0;
-}
-
-.bottom-scroll-mask-content {
-    width: 100%;
-    height: var(--scroll-mask-size, 8px);
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    --scroll-mask-direction: top;
-}
-
-.left-scroll-mask {
-    width: 0;
-    height: 100%;
-    top: 0;
-    right: 100%;
-    bottom: 0;
-    left: 0;
-}
-
-.left-scroll-mask-content {
-    width: var(--scroll-mask-size, 8px);
-    height: 100%;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    --scroll-mask-direction: right;
-}
-
-.right-scroll-mask {
-    width: 0;
-    height: 100%;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 100%;
-}
-
-.right-scroll-mask-content {
-    width: var(--scroll-mask-size, 8px);
-    height: 100%;
-    right: 0;
-    bottom: 50%;
-    transform: translateY(50%);
-    --scroll-mask-direction: left;
-}
+.scroll-mask {
+    position: sticky;
+    z-index: 10;
+    pointer-events: none;
+}
+
+.top-scroll-mask {
+    width: 100%;
+    height: 0;
+    top: 0;
+    right: 0;
+    bottom: 100%;
+    left: 0;
+}
+
+.scroll-mask-content {
+    position: absolute;
+    background-image: linear-gradient(
+        to var(--scroll-mask-direction),
+        var(--scroll-mask-color-from, rgba(0, 0, 0, 0.1)),
+        var(--scroll-mask-color-to, rgba(0, 0, 0, 0))
+    );
+    clip-path: var(--scroll-mask-clip-path, none);
+}
+
+.top-scroll-mask-content {
+    width: 100%;
+    height: var(--scroll-mask-size, 8px);
+    top: 0;
+    right: 50%;
+    transform: translateX(50%);
+    --scroll-mask-direction: bottom;
+}
+
+.bottom-scroll-mask {
+    width: 100%;
+    height: 0;
+    top: 100%;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.bottom-scroll-mask-content {
+    width: 100%;
+    height: var(--scroll-mask-size, 8px);
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    --scroll-mask-direction: top;
+}
+
+.left-scroll-mask {
+    width: 0;
+    height: 100%;
+    top: 0;
+    right: 100%;
+    bottom: 0;
+    left: 0;
+}
+
+.left-scroll-mask-content {
+    width: var(--scroll-mask-size, 8px);
+    height: 100%;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    --scroll-mask-direction: right;
+}
+
+.right-scroll-mask {
+    width: 0;
+    height: 100%;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 100%;
+}
+
+.right-scroll-mask-content {
+    width: var(--scroll-mask-size, 8px);
+    height: 100%;
+    right: 0;
+    bottom: 50%;
+    transform: translateY(50%);
+    --scroll-mask-direction: left;
+}

package/src/components/ScrollMask.tsx

@@ -1,68 +1,68 @@
-import { clsx, isNonNullable } from "deepsea-tools"
-import { CSSProperties, ComponentProps, FC, useRef } from "react"
-import { useSize } from "soda-hooks"
-
-import styles from "./ScrollMask.module.css"
-
-export type ScrollMaskPosition = "top" | "bottom" | "left" | "right"
-
-export interface ScrollMaskProps extends Omit<ComponentProps<"div">, "children"> {
-    position?: ScrollMaskPosition
-    size?: number
-    from?: CSSProperties["color"]
-    to?: CSSProperties["color"]
-    contentClassName?: string
-    contentStyle?: CSSProperties
-    showRadian?: boolean
-}
-
-export const ScrollMask: FC<ScrollMaskProps> = ({
-    className,
-    style,
-    position = "top",
-    size = 8,
-    from = "rgba(0, 0, 0, 0.1)",
-    to = "rgba(0, 0, 0, 0)",
-    contentClassName,
-    contentStyle,
-    showRadian = false,
-    ...rest
-}) => {
-    const ref = useRef<HTMLDivElement>(null)
-    const contentSize = useSize(ref)
-    const radius = isNonNullable(contentSize)
-        ? position === "top" || position === "bottom"
-            ? (contentSize.width ** 2 / 4 + contentSize.height ** 2) / (contentSize.height * 2)
-            : (contentSize.height ** 2 / 4 + contentSize.width ** 2) / (contentSize.width * 2)
-        : undefined
-    const clipPath =
-        showRadian && isNonNullable(radius)
-            ? position === "top"
-                ? `circle(${radius}px at 50% -${radius - contentSize!.height}px)`
-                : position === "bottom"
-                  ? `circle(${radius}px at 50% ${radius}px)`
-                  : position === "left"
-                    ? `circle(${radius}px at -${radius - contentSize!.width}px 50%)`
-                    : position === "right"
-                      ? `circle(${radius}px at ${radius}px 50%)`
-                      : "none"
-            : "none"
-
-    return (
-        <div
-            className={clsx(styles["scroll-mask"], styles[`${position}-scroll-mask`], className)}
-            style={
-                {
-                    "--scroll-mask-size": `${size}px`,
-                    "--scroll-mask-color-from": from,
-                    "--scroll-mask-color-to": to,
-                    "--scroll-mask-clip-path": clipPath,
-                    ...style,
-                } as CSSProperties
-            }
-            {...rest}
-        >
-            <div ref={ref} className={clsx(styles["scroll-mask-content"], styles[`${position}-scroll-mask-content`], contentClassName)} style={contentStyle} />
-        </div>
-    )
-}
+import { clsx, isNonNullable } from "deepsea-tools"
+import { CSSProperties, ComponentProps, FC, useRef } from "react"
+import { useSize } from "soda-hooks"
+
+import styles from "./ScrollMask.module.css"
+
+export type ScrollMaskPosition = "top" | "bottom" | "left" | "right"
+
+export interface ScrollMaskProps extends Omit<ComponentProps<"div">, "children"> {
+    position?: ScrollMaskPosition
+    size?: number
+    from?: CSSProperties["color"]
+    to?: CSSProperties["color"]
+    contentClassName?: string
+    contentStyle?: CSSProperties
+    showRadian?: boolean
+}
+
+export const ScrollMask: FC<ScrollMaskProps> = ({
+    className,
+    style,
+    position = "top",
+    size = 8,
+    from = "rgba(0, 0, 0, 0.1)",
+    to = "rgba(0, 0, 0, 0)",
+    contentClassName,
+    contentStyle,
+    showRadian = false,
+    ...rest
+}) => {
+    const ref = useRef<HTMLDivElement>(null)
+    const contentSize = useSize(ref)
+    const radius = isNonNullable(contentSize)
+        ? position === "top" || position === "bottom"
+            ? (contentSize.width ** 2 / 4 + contentSize.height ** 2) / (contentSize.height * 2)
+            : (contentSize.height ** 2 / 4 + contentSize.width ** 2) / (contentSize.width * 2)
+        : undefined
+    const clipPath =
+        showRadian && isNonNullable(radius)
+            ? position === "top"
+                ? `circle(${radius}px at 50% -${radius - contentSize!.height}px)`
+                : position === "bottom"
+                  ? `circle(${radius}px at 50% ${radius}px)`
+                  : position === "left"
+                    ? `circle(${radius}px at -${radius - contentSize!.width}px 50%)`
+                    : position === "right"
+                      ? `circle(${radius}px at ${radius}px 50%)`
+                      : "none"
+            : "none"
+
+    return (
+        <div
+            className={clsx(styles["scroll-mask"], styles[`${position}-scroll-mask`], className)}
+            style={
+                {
+                    "--scroll-mask-size": `${size}px`,
+                    "--scroll-mask-color-from": from,
+                    "--scroll-mask-color-to": to,
+                    "--scroll-mask-clip-path": clipPath,
+                    ...style,
+                } as CSSProperties
+            }
+            {...rest}
+        >
+            <div ref={ref} className={clsx(styles["scroll-mask-content"], styles[`${position}-scroll-mask-content`], contentClassName)} style={contentStyle} />
+        </div>
+    )
+}

package/src/components/SectionRing.tsx

@@ -1,40 +1,40 @@
-"use client"
-
-import { DrawArcOptions, drawArc } from "deepsea-tools"
-import { HTMLAttributes, forwardRef } from "react"
-
-export interface SectionRingProps extends HTMLAttributes<HTMLDivElement> {
-    outerRadius: number
-    innerRadius: number
-    count: number
-    angel: number
-}
-
-export const SectionRing = forwardRef<HTMLDivElement, SectionRingProps>((props, ref) => {
-    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
-            ref={ref}
-            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")`,
-                ...style,
-            }}
-            {...rest}
-        />
-    )
-})
+"use client"
+
+import { DrawArcOptions, drawArc } from "deepsea-tools"
+import { HTMLAttributes, forwardRef } from "react"
+
+export interface SectionRingProps extends HTMLAttributes<HTMLDivElement> {
+    outerRadius: number
+    innerRadius: number
+    count: number
+    angel: number
+}
+
+export const SectionRing = forwardRef<HTMLDivElement, SectionRingProps>((props, ref) => {
+    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
+            ref={ref}
+            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")`,
+                ...style,
+            }}
+            {...rest}
+        />
+    )
+})