deepsea-components 5.6.0 → 5.7.1

package/src/components/Title.tsx

@@ -1,24 +1,23 @@
-import { ComponentProps, forwardRef, useImperativeHandle, useLayoutEffect, useRef } from "react"
-import { createPortal } from "react-dom"
-import { getReactVersion } from "../utils/getReactVersion"
-
-export type TitleProps = ComponentProps<"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 createPortal(<title ref={ele} {...props} />, document.head)
-})
+import { ComponentProps, forwardRef, useImperativeHandle, useLayoutEffect, useRef } from "react"
+import { createPortal } from "react-dom"
+import { getReactVersion } from "../utils/getReactVersion"
+
+export type TitleProps = ComponentProps<"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 createPortal(<title ref={ele} {...props} />, document.head)
+})

package/src/components/TransitionBox.tsx

@@ -1,36 +1,44 @@
-"use client"
-
-import { useSize } from "ahooks"
-import { CSSProperties, FC, forwardRef, HTMLAttributes, useEffect, useRef, useState } from "react"
-
-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 { useSize } from "ahooks"
+import { CSSProperties, FC, forwardRef, HTMLAttributes, useEffect, useRef, useState } from "react"
+
+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,59 +1,59 @@
-"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/index.ts

@@ -2,6 +2,7 @@ export * from "@components/AutoFit"
 export * from "@components/AutoScroll"
 export * from "@components/AutoSizeTextarea"
 export * from "@components/CircleText"
+export * from "@components/CopyButton"
 export * from "@components/Echart"
 export * from "@components/Flow"
 export * from "@components/FormLabel"

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)
+}

package/src/utils/index.ts

@@ -1,33 +1,33 @@
-import { CSSProperties } from "react"
-
-export type CSSVariableName = `--${string}`
-
-export type CSSVariableValue = string | number | undefined
-
-export interface StyleWithCSSVariable extends CSSProperties {
-    [X: CSSVariableName]: CSSVariableValue
-}
-
-const cssVariableReg = /[A-Z]/
-
-function addCSSVariableLine(match: string): string {
-    return `-${match}`
-}
-
-export function transformCSSVariableName(name: string): CSSVariableName {
-    return `--${name.replace(cssVariableReg, addCSSVariableLine).toLowerCase()}`
-}
-
-export function transformCSSVariable(style: Partial<Record<string, CSSVariableValue>>, style2?: CSSProperties): CSSProperties {
-    return Object.assign(
-        Object.entries(style).reduce((acc: StyleWithCSSVariable, [key, value]) => {
-            acc[transformCSSVariableName(key)] = value
-            return acc
-        }, {}),
-        style2
-    )
-}
-
-export function px(value: string | number | undefined): string | undefined {
-    return typeof value === "number" ? `${value}px` : value
-}
+import { CSSProperties } from "react"
+
+export type CSSVariableName = `--${string}`
+
+export type CSSVariableValue = string | number | undefined
+
+export interface StyleWithCSSVariable extends CSSProperties {
+    [X: CSSVariableName]: CSSVariableValue
+}
+
+const cssVariableReg = /[A-Z]/
+
+function addCSSVariableLine(match: string): string {
+    return `-${match}`
+}
+
+export function transformCSSVariableName(name: string): CSSVariableName {
+    return `--${name.replace(cssVariableReg, addCSSVariableLine).toLowerCase()}`
+}
+
+export function transformCSSVariable(style: Partial<Record<string, CSSVariableValue>>, style2?: CSSProperties): CSSProperties {
+    return Object.assign(
+        Object.entries(style).reduce((acc: StyleWithCSSVariable, [key, value]) => {
+            acc[transformCSSVariableName(key)] = value
+            return acc
+        }, {}),
+        style2,
+    )
+}
+
+export function px(value: string | number | undefined): string | undefined {
+    return typeof value === "number" ? `${value}px` : value
+}