deepsea-components 5.15.21 → 5.15.23

package/src/components/Skeleton.tsx

@@ -1,45 +1,45 @@
-"use client"
-
-import { css } from "@emotion/css"
-import { clsx } from "deepsea-tools"
-import { HTMLAttributes, forwardRef } from "react"
-
-export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
-    loading?: boolean
-}
-
-export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>((props, ref) => {
-    const { className, children, loading = children === undefined || children === null, ...rest } = props
-
-    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 { HTMLAttributes, forwardRef } from "react"
+
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    loading?: boolean
+}
+
+export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>((props, ref) => {
+    const { className, children, loading = children === undefined || children === null, ...rest } = props
+
+    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>
+    )
+})

package/src/components/Title.tsx

@@ -1,27 +1,27 @@
-"use client"
-
-import { isBrowser } from "deepsea-tools"
-import { ComponentPropsWithoutRef, forwardRef, useImperativeHandle, useLayoutEffect, useRef } from "react"
-import { createPortal } from "react-dom"
-
-import { getReactVersion } from "@/utils/getReactVersion"
-
-export type TitleProps = ComponentPropsWithoutRef<"title">
-
-const [major] = getReactVersion()
-
-export const Title = forwardRef<HTMLTitleElement, TitleProps>((props, ref) => {
-    if (major >= 19) return <title ref={ref} {...props} />
-
-    const ele = useRef<HTMLTitleElement>(null)
-
-    useImperativeHandle(ref, () => ele.current as HTMLTitleElement, [ele.current])
-
-    useLayoutEffect(() => {
-        const title = document.head.querySelector("title")
-        if (title === ele.current) return
-        document.head.insertBefore(ele.current as HTMLTitleElement, title)
-    }, [])
-
-    return isBrowser && createPortal(<title ref={ele} {...props} />, document.head)
-})
+"use client"
+
+import { isBrowser } from "deepsea-tools"
+import { ComponentPropsWithoutRef, forwardRef, useImperativeHandle, useLayoutEffect, useRef } from "react"
+import { createPortal } from "react-dom"
+
+import { getReactVersion } from "@/utils/getReactVersion"
+
+export type TitleProps = ComponentPropsWithoutRef<"title">
+
+const [major] = getReactVersion()
+
+export const Title = forwardRef<HTMLTitleElement, TitleProps>((props, ref) => {
+    if (major >= 19) return <title ref={ref} {...props} />
+
+    const ele = useRef<HTMLTitleElement>(null)
+
+    useImperativeHandle(ref, () => ele.current as HTMLTitleElement, [ele.current])
+
+    useLayoutEffect(() => {
+        const title = document.head.querySelector("title")
+        if (title === ele.current) return
+        document.head.insertBefore(ele.current as HTMLTitleElement, title)
+    }, [])
+
+    return isBrowser && createPortal(<title ref={ele} {...props} />, document.head)
+})

package/src/components/TransitionBox.tsx

@@ -1,44 +1,44 @@
-"use client"
-
-import { CSSProperties, FC, HTMLAttributes, forwardRef, useEffect, useRef, useState } from "react"
-import { useSize } from "soda-hooks"
-
-export interface TransitionBoxProps extends HTMLAttributes<HTMLDivElement> {
-    containerClassName?: string
-    containerStyle?: CSSProperties
-    vertical?: boolean
-    horizontal?: boolean
-    time?: number
-}
-
-/** 尺寸渐变的组件 */
-export const TransitionBox: FC<TransitionBoxProps> = forwardRef<HTMLDivElement, TransitionBoxProps>((props, ref) => {
-    const { style, containerClassName, containerStyle, children, vertical = true, horizontal = true, time = 3000, ...rest } = props
-    const container = useRef<HTMLDivElement>(null)
-    const size = useSize(container)
-    const width = size?.width ?? 0
-    const height = size?.height ?? 0
-    const [count, setCount] = useState(0)
-
-    useEffect(() => {
-        setCount(count => Math.min(count + 1, 3))
-    }, [width, height])
-
-    const outerStyle: CSSProperties = {
-        transitionProperty: count === 3 ? [horizontal && "width", vertical && "height"].filter(Boolean).join(", ") : undefined,
-        transitionDuration: count === 3 ? `${time}ms` : undefined,
-        width,
-        height,
-        overflow: "hidden",
-        position: "relative",
-        ...style,
-    }
-
-    return (
-        <div ref={ref} style={outerStyle} {...rest}>
-            <div className={containerClassName} style={{ position: "absolute", ...containerStyle }} ref={container}>
-                {children}
-            </div>
-        </div>
-    )
-})
+"use client"
+
+import { CSSProperties, FC, HTMLAttributes, forwardRef, useEffect, useRef, useState } from "react"
+import { useSize } from "soda-hooks"
+
+export interface TransitionBoxProps extends HTMLAttributes<HTMLDivElement> {
+    containerClassName?: string
+    containerStyle?: CSSProperties
+    vertical?: boolean
+    horizontal?: boolean
+    time?: number
+}
+
+/** 尺寸渐变的组件 */
+export const TransitionBox: FC<TransitionBoxProps> = forwardRef<HTMLDivElement, TransitionBoxProps>((props, ref) => {
+    const { style, containerClassName, containerStyle, children, vertical = true, horizontal = true, time = 3000, ...rest } = props
+    const container = useRef<HTMLDivElement>(null)
+    const size = useSize(container)
+    const width = size?.width ?? 0
+    const height = size?.height ?? 0
+    const [count, setCount] = useState(0)
+
+    useEffect(() => {
+        setCount(count => Math.min(count + 1, 3))
+    }, [width, height])
+
+    const outerStyle: CSSProperties = {
+        transitionProperty: count === 3 ? [horizontal && "width", vertical && "height"].filter(Boolean).join(", ") : undefined,
+        transitionDuration: count === 3 ? `${time}ms` : undefined,
+        width,
+        height,
+        overflow: "hidden",
+        position: "relative",
+        ...style,
+    }
+
+    return (
+        <div ref={ref} style={outerStyle} {...rest}>
+            <div className={containerClassName} style={{ position: "absolute", ...containerStyle }} ref={container}>
+                {children}
+            </div>
+        </div>
+    )
+})

package/src/components/TransitionNum.tsx

@@ -1,54 +1,54 @@
-"use client"
-
-import { setFrameInterval } from "deepsea-tools"
-import { ForwardedRef, HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
-
-export interface TransitionNumProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
-    /** 当前数字 */
-    children: number
-    /** 变换周期，单位帧 */
-    period: number
-    /** 数字转换为字符串的方法 */
-    numToStr?: (num: number) => string
-    /** 实例 */
-    ins?: ForwardedRef<TransitionNumIns>
-}
-
-export interface TransitionNumIns {
-    get(): number
-}
-
-/** 渐变数字组件 */
-export const TransitionNum = forwardRef<HTMLDivElement, TransitionNumProps>((props, ref) => {
-    const { children: num, period, numToStr, ins, ...rest } = props
-    if (!Number.isInteger(num) || !Number.isInteger(period) || period <= 0) {
-        throw new RangeError("目标数字必须是整数，周期必须是正整数")
-    }
-    const ele = useRef<HTMLDivElement>(null)
-    const cache = useRef({ num, period, numToStr, show: num })
-    cache.current = { ...cache.current, num, period, numToStr }
-
-    useImperativeHandle(ref, () => ele.current!, [])
-    useImperativeHandle(ins, () => ({ get: () => cache.current.show }), [])
-
-    useEffect(() => {
-        const { num, period, show, numToStr } = cache.current
-        ele.current!.innerText = (numToStr || String)(show)
-        if (num === show) return
-        const div = ele.current!
-        const speed = (num - show) / period
-        const cancel = setFrameInterval(() => {
-            const { num, numToStr } = cache.current
-            cache.current.show += speed
-            if ((speed > 0 && cache.current.show > num) || (speed < 0 && cache.current.show < num)) {
-                cancel()
-                cache.current.show = num
-            }
-            div.innerText = (numToStr || String)(speed > 0 ? Math.floor(cache.current.show) : Math.ceil(cache.current.show))
-        }, 1)
-
-        return cancel
-    }, [num])
-
-    return <div ref={ele} {...rest} />
-})
+"use client"
+
+import { setFrameInterval } from "deepsea-tools"
+import { ForwardedRef, HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
+
+export interface TransitionNumProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** 当前数字 */
+    children: number
+    /** 变换周期，单位帧 */
+    period: number
+    /** 数字转换为字符串的方法 */
+    numToStr?: (num: number) => string
+    /** 实例 */
+    ins?: ForwardedRef<TransitionNumIns>
+}
+
+export interface TransitionNumIns {
+    get(): number
+}
+
+/** 渐变数字组件 */
+export const TransitionNum = forwardRef<HTMLDivElement, TransitionNumProps>((props, ref) => {
+    const { children: num, period, numToStr, ins, ...rest } = props
+    if (!Number.isInteger(num) || !Number.isInteger(period) || period <= 0) {
+        throw new RangeError("目标数字必须是整数，周期必须是正整数")
+    }
+    const ele = useRef<HTMLDivElement>(null)
+    const cache = useRef({ num, period, numToStr, show: num })
+    cache.current = { ...cache.current, num, period, numToStr }
+
+    useImperativeHandle(ref, () => ele.current!, [])
+    useImperativeHandle(ins, () => ({ get: () => cache.current.show }), [])
+
+    useEffect(() => {
+        const { num, period, show, numToStr } = cache.current
+        ele.current!.innerText = (numToStr || String)(show)
+        if (num === show) return
+        const div = ele.current!
+        const speed = (num - show) / period
+        const cancel = setFrameInterval(() => {
+            const { num, numToStr } = cache.current
+            cache.current.show += speed
+            if ((speed > 0 && cache.current.show > num) || (speed < 0 && cache.current.show < num)) {
+                cancel()
+                cache.current.show = num
+            }
+            div.innerText = (numToStr || String)(speed > 0 ? Math.floor(cache.current.show) : Math.ceil(cache.current.show))
+        }, 1)
+
+        return cancel
+    }, [num])
+
+    return <div ref={ele} {...rest} />
+})

package/src/components/Trapezium.tsx

@@ -1,60 +1,60 @@
-"use client"
-
-import { css } from "@emotion/css"
-import { clsx } from "deepsea-tools"
-import { HTMLAttributes, forwardRef } from "react"
-
-import { px, transformCSSVariable } from "@/utils"
-
-export interface TrapeziumProps extends HTMLAttributes<HTMLDivElement> {
-    top: number
-    bottom: number
-    height: number
-    borderRadius: number
-}
-
-/** 梯形组件 */
-export const Trapezium = forwardRef<HTMLDivElement, TrapeziumProps>((props, ref) => {
-    const { top, bottom, height, borderRadius, className, style, ...rest } = props
-
-    const diff = (bottom - top) / 2
-
-    const a = Math.atan(height / diff) / 2
-
-    const b = borderRadius / Math.tan(a)
-
-    const c = b * Math.cos(a * 2)
-
-    const d = b * Math.sin(a * 2)
-
-    const e = Math.PI / 2 - a
-
-    const f = borderRadius / Math.tan(e)
-
-    const g = f * Math.cos(a * 2)
-
-    const h = f * Math.sin(a * 2)
-
-    return (
-        <div
-            ref={ref}
-            className={clsx(
-                css`
-                    width: var(--width);
-                    height: var(--height);
-                    clip-path: var(--clip-path);
-                `,
-                className,
-            )}
-            style={transformCSSVariable(
-                {
-                    width: px(bottom),
-                    height: px(height),
-                    clipath: `path("M ${diff + f} ${0}  A ${borderRadius} ${borderRadius} 0 0 0 ${diff - g} ${h} L ${c} ${height - d} A ${borderRadius} ${borderRadius} 0 0 0 ${b} ${height} L ${bottom - b} ${height} A ${borderRadius} ${borderRadius} 0 0 0 ${bottom - c} ${height - d} L ${top + diff + g} ${h} A ${borderRadius} ${borderRadius} 0 0 0 ${top + diff - f} ${0} Z")`,
-                },
-                style,
-            )}
-            {...rest}
-        />
-    )
-})
+"use client"
+
+import { css } from "@emotion/css"
+import { clsx } from "deepsea-tools"
+import { HTMLAttributes, forwardRef } from "react"
+
+import { px, transformCSSVariable } from "@/utils"
+
+export interface TrapeziumProps extends HTMLAttributes<HTMLDivElement> {
+    top: number
+    bottom: number
+    height: number
+    borderRadius: number
+}
+
+/** 梯形组件 */
+export const Trapezium = forwardRef<HTMLDivElement, TrapeziumProps>((props, ref) => {
+    const { top, bottom, height, borderRadius, className, style, ...rest } = props
+
+    const diff = (bottom - top) / 2
+
+    const a = Math.atan(height / diff) / 2
+
+    const b = borderRadius / Math.tan(a)
+
+    const c = b * Math.cos(a * 2)
+
+    const d = b * Math.sin(a * 2)
+
+    const e = Math.PI / 2 - a
+
+    const f = borderRadius / Math.tan(e)
+
+    const g = f * Math.cos(a * 2)
+
+    const h = f * Math.sin(a * 2)
+
+    return (
+        <div
+            ref={ref}
+            className={clsx(
+                css`
+                    width: var(--width);
+                    height: var(--height);
+                    clip-path: var(--clip-path);
+                `,
+                className,
+            )}
+            style={transformCSSVariable(
+                {
+                    width: px(bottom),
+                    height: px(height),
+                    clipath: `path("M ${diff + f} ${0}  A ${borderRadius} ${borderRadius} 0 0 0 ${diff - g} ${h} L ${c} ${height - d} A ${borderRadius} ${borderRadius} 0 0 0 ${b} ${height} L ${bottom - b} ${height} A ${borderRadius} ${borderRadius} 0 0 0 ${bottom - c} ${height - d} L ${top + diff + g} ${h} A ${borderRadius} ${borderRadius} 0 0 0 ${top + diff - f} ${0} Z")`,
+                },
+                style,
+            )}
+            {...rest}
+        />
+    )
+})

package/src/components/Unify.tsx

@@ -1,38 +1,38 @@
-"use client"
-
-import { clsx } from "deepsea-tools"
-import { CSSProperties, ComponentProps, FC, JSX, JSXElementConstructor, ReactNode, createContext, createElement, useContext } from "react"
-
-export interface UnifyConfig {
-    className?: string
-    style?: CSSProperties
-}
-
-const UnifyConfigContext = createContext<UnifyConfig>({})
-
-export interface UnifyConfigProviderProps extends UnifyConfig {
-    children?: ReactNode
-}
-
-export const UnifyConfigProvider: FC<UnifyConfigProviderProps> = ({ className, style, children }) => {
-    const { className: _className, style: _style } = useContext(UnifyConfigContext)
-
-    return (
-        <UnifyConfigContext.Provider value={{ className: clsx(_className, className), style: { ..._style, ...style } }}>{children}</UnifyConfigContext.Provider>
-    )
-}
-
-export type UnifyProps<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "div"> = Omit<ComponentProps<AS>, "as"> & {
-    as?: AS
-}
-
-export function Unify<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "div">(props: UnifyProps<AS>) {
-    const { as = "div", className, style, ...rest } = props
-    const { className: _className, style: _style } = useContext(UnifyConfigContext)
-
-    return createElement(as, {
-        className: clsx(_className, className),
-        style: { ..._style, ...style },
-        ...rest,
-    }) as ReactNode
-}
+"use client"
+
+import { clsx } from "deepsea-tools"
+import { CSSProperties, ComponentProps, FC, JSX, JSXElementConstructor, ReactNode, createContext, createElement, useContext } from "react"
+
+export interface UnifyConfig {
+    className?: string
+    style?: CSSProperties
+}
+
+const UnifyConfigContext = createContext<UnifyConfig>({})
+
+export interface UnifyConfigProviderProps extends UnifyConfig {
+    children?: ReactNode
+}
+
+export const UnifyConfigProvider: FC<UnifyConfigProviderProps> = ({ className, style, children }) => {
+    const { className: _className, style: _style } = useContext(UnifyConfigContext)
+
+    return (
+        <UnifyConfigContext.Provider value={{ className: clsx(_className, className), style: { ..._style, ...style } }}>{children}</UnifyConfigContext.Provider>
+    )
+}
+
+export type UnifyProps<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "div"> = Omit<ComponentProps<AS>, "as"> & {
+    as?: AS
+}
+
+export function Unify<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "div">(props: UnifyProps<AS>) {
+    const { as = "div", className, style, ...rest } = props
+    const { className: _className, style: _style } = useContext(UnifyConfigContext)
+
+    return createElement(as, {
+        className: clsx(_className, className),
+        style: { ..._style, ...style },
+        ...rest,
+    }) as ReactNode
+}

package/src/components/WriteExcel.tsx

@@ -1,13 +1,13 @@
-"use client"
-
-import { WriteSheet, WriteSheetProps } from "./WriteSheet"
-
-/**
- * @deprecated 请使用 WriteSheetProps 代替
- */
-export type WriteExcelProps = WriteSheetProps
-
-/**
- * @deprecated 请使用 WriteSheet 代替
- */
-export const WriteExcel = WriteSheet
+"use client"
+
+import { WriteSheet, WriteSheetProps } from "./WriteSheet"
+
+/**
+ * @deprecated 请使用 WriteSheetProps 代替
+ */
+export type WriteExcelProps = WriteSheetProps
+
+/**
+ * @deprecated 请使用 WriteSheet 代替
+ */
+export const WriteExcel = WriteSheet

package/src/components/WriteSheet.tsx

@@ -1,25 +1,25 @@
-"use client"
-
-import { WriteSheetParams, writeSheet } from "deepsea-tools"
-import { ComponentProps, JSX, JSXElementConstructor, MouseEvent as ReactMouseEvent, createElement } from "react"
-
-export type WriteSheetProps<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "button"> = Omit<ComponentProps<AS>, "as" | "excel"> & {
-    as?: AS
-    excel?: WriteSheetParams
-}
-
-/** 导出 excel 的 button 组件 */
-export function WriteSheet<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "button">(props: WriteSheetProps<AS>) {
-    const { as, excel, onClick: _onClick, ...rest } = props
-
-    function onClick(e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) {
-        _onClick?.(e)
-        if (!excel) return
-        writeSheet(excel)
-    }
-
-    return createElement(as ?? "button", {
-        onClick,
-        ...rest,
-    })
-}
+"use client"
+
+import { WriteSheetParams, writeSheet } from "deepsea-tools"
+import { ComponentProps, JSX, JSXElementConstructor, MouseEvent as ReactMouseEvent, createElement } from "react"
+
+export type WriteSheetProps<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "button"> = Omit<ComponentProps<AS>, "as" | "excel"> & {
+    as?: AS
+    excel?: WriteSheetParams
+}
+
+/** 导出 excel 的 button 组件 */
+export function WriteSheet<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "button">(props: WriteSheetProps<AS>) {
+    const { as, excel, onClick: _onClick, ...rest } = props
+
+    function onClick(e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) {
+        _onClick?.(e)
+        if (!excel) return
+        writeSheet(excel)
+    }
+
+    return createElement(as ?? "button", {
+        onClick,
+        ...rest,
+    })
+}

package/src/utils/getReactVersion.ts

@@ -1,7 +1,7 @@
-import { version } from "react"
-
-const reg = /(\d+)\.(\d+)\.(\d+)/
-
-export function getReactVersion() {
-    return version.match(reg)!.slice(1).map(Number)
-}
+import { version } from "react"
+
+const reg = /(\d+)\.(\d+)\.(\d+)/
+
+export function getReactVersion() {
+    return version.match(reg)!.slice(1).map(Number)
+}