deepsea-components 5.6.0 → 5.7.1

package/src/components/AutoScroll.tsx

@@ -1,132 +1,148 @@
-"use client"
-
-import { css } from "@emotion/css"
-import { useSize } from "ahooks"
-import { clsx, getArray } from "deepsea-tools"
-import { CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from "react"
-import Scrollbar from "smooth-scrollbar"
-import { ScrollStatus } from "smooth-scrollbar/interfaces/scrollbar"
-import { px, transformCSSVariable } from "../utils"
-import { Scroll, ScrollProps } from "./Scroll"
-
-export interface AutoScrollProps extends ScrollProps {
-    /** 轮播元素的个数 */
-    count: number
-
-    /** 轮播元素的高度 */
-    itemHeight: number
-
-    /**
-     * 轮播动画的时间，单位毫秒
-     * @default 1000
-     */
-    animation?: number
-
-    /**
-     * 每个元素的停留时间，单位毫秒
-     * @default 3000
-     */
-    duration?: number
-
-    /**
-     * 元素之间的间距
-     * @default 0
-     */
-    gap?: number
-
-    /** 容器类名 */
-    containerClassName?: string
-
-    /** 容器样式 */
-    containerStyle?: CSSProperties
-
-    /**
-     * 在鼠标移入时是否继续播放
-     * @default false
-     */
-    playOnMouseEnter?: boolean
-
-    /**
-     * 是否暂停
-     * @default false
-     */
-    paused?: boolean
-}
-
-export const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, ref) => {
-    const { count, itemHeight, animation = 1000, duration = 3000, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, scrollbar, paused, ...rest } = props
-    const bar = useRef<Scrollbar | null>(null)
-    const timeout = useRef<NodeJS.Timeout | undefined>(undefined)
-    const ele = useRef<HTMLDivElement>(null)
-    const size = useSize(ele)
-    const pausedRef = useRef(false)
-    const pausedProps = useRef(paused)
-    pausedProps.current = paused
-
-    useImperativeHandle(ref, () => ele.current!, [])
-    useImperativeHandle(scrollbar, () => bar.current!, [])
-
-    useEffect(() => {
-        if (playOnMouseEnter) pausedRef.current = false
-    }, [playOnMouseEnter])
-
-    useEffect(() => {
-        if (!size || count === 0) return
-        const { height } = size
-        const range = getArray(count, index => (itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0))
-        const scrollHeight = range[range.length - 1]
-        if (height >= scrollHeight) return
-        function scroll(target: number) {
-            clearTimeout(timeout.current)
-            timeout.current = setTimeout(() => {
-                if (pausedRef.current || pausedProps.current) return scroll(target)
-                bar.current?.scrollTo(0, target, animation)
-            }, duration)
-        }
-        scroll(range[0])
-        function listener(status: ScrollStatus) {
-            const { y } = status.offset
-            const scrollToBottom = Math.abs(y + height - scrollHeight) / itemHeight <= 0.05
-            const target = scrollToBottom ? 0 : range.find(item => item > y)!
-            scroll(target)
-        }
-        bar.current?.addListener(listener)
-        return () => {
-            clearTimeout(timeout.current)
-            bar.current?.removeListener(listener)
-            bar.current?.scrollTo(0, 0)
-        }
-    }, [size, count, itemHeight, gap, duration, animation])
-
-    function onContainerMouseEnter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {
-        if (playOnMouseEnter) return
-        pausedRef.current = true
-        onMouseEnter?.(e)
-    }
-
-    function onContainerMouseLeave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {
-        if (playOnMouseEnter) return
-        pausedRef.current = false
-        onMouseLeave?.(e)
-    }
-
-    return (
-        <Scroll ref={ele} scrollbar={bar} onMouseEnter={onContainerMouseEnter} onMouseLeave={onContainerMouseLeave} {...rest}>
-            <div
-                className={clsx(
-                    css`
-                        display: flex;
-                        flex-direction: column;
-                        gap: var(--gap, 0);
-                        & > * {
-                            flex: none;
-                        }
-                    `,
-                    containerClassName
-                )}
-                style={transformCSSVariable({ gap: px(gap) }, containerStyle)}>
-                {children}
-            </div>
-        </Scroll>
-    )
-})
+"use client"
+
+import { css } from "@emotion/css"
+import { useSize } from "ahooks"
+import { clsx, getArray } from "deepsea-tools"
+import { CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from "react"
+import Scrollbar from "smooth-scrollbar"
+import { ScrollStatus } from "smooth-scrollbar/interfaces/scrollbar"
+import { px, transformCSSVariable } from "../utils"
+import { Scroll, ScrollProps } from "./Scroll"
+
+export interface AutoScrollProps extends ScrollProps {
+    /** 轮播元素的个数 */
+    count: number
+
+    /** 轮播元素的高度 */
+    itemHeight: number
+
+    /**
+     * 轮播动画的时间，单位毫秒
+     * @default 1000
+     */
+    animation?: number
+
+    /**
+     * 每个元素的停留时间，单位毫秒
+     * @default 3000
+     */
+    duration?: number
+
+    /**
+     * 元素之间的间距
+     * @default 0
+     */
+    gap?: number
+
+    /** 容器类名 */
+    containerClassName?: string
+
+    /** 容器样式 */
+    containerStyle?: CSSProperties
+
+    /**
+     * 在鼠标移入时是否继续播放
+     * @default false
+     */
+    playOnMouseEnter?: boolean
+
+    /**
+     * 是否暂停
+     * @default false
+     */
+    paused?: boolean
+}
+
+export const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, ref) => {
+    const {
+        count,
+        itemHeight,
+        animation = 1000,
+        duration = 3000,
+        onMouseEnter,
+        onMouseLeave,
+        gap = 0,
+        containerClassName,
+        containerStyle,
+        children,
+        playOnMouseEnter,
+        scrollbar,
+        paused,
+        ...rest
+    } = props
+    const bar = useRef<Scrollbar | null>(null)
+    const timeout = useRef<NodeJS.Timeout | undefined>(undefined)
+    const ele = useRef<HTMLDivElement>(null)
+    const size = useSize(ele)
+    const pausedRef = useRef(false)
+    const pausedProps = useRef(paused)
+    pausedProps.current = paused
+
+    useImperativeHandle(ref, () => ele.current!, [])
+    useImperativeHandle(scrollbar, () => bar.current!, [])
+
+    useEffect(() => {
+        if (playOnMouseEnter) pausedRef.current = false
+    }, [playOnMouseEnter])
+
+    useEffect(() => {
+        if (!size || count === 0) return
+        const { height } = size
+        const range = getArray(count, index => (itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0))
+        const scrollHeight = range[range.length - 1]
+        if (height >= scrollHeight) return
+        function scroll(target: number) {
+            clearTimeout(timeout.current)
+            timeout.current = setTimeout(() => {
+                if (pausedRef.current || pausedProps.current) return scroll(target)
+                bar.current?.scrollTo(0, target, animation)
+            }, duration)
+        }
+        scroll(range[0])
+        function listener(status: ScrollStatus) {
+            const { y } = status.offset
+            const scrollToBottom = Math.abs(y + height - scrollHeight) / itemHeight <= 0.05
+            const target = scrollToBottom ? 0 : range.find(item => item > y)!
+            scroll(target)
+        }
+        bar.current?.addListener(listener)
+        return () => {
+            clearTimeout(timeout.current)
+            bar.current?.removeListener(listener)
+            bar.current?.scrollTo(0, 0)
+        }
+    }, [size, count, itemHeight, gap, duration, animation])
+
+    function onContainerMouseEnter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {
+        if (playOnMouseEnter) return
+        pausedRef.current = true
+        onMouseEnter?.(e)
+    }
+
+    function onContainerMouseLeave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {
+        if (playOnMouseEnter) return
+        pausedRef.current = false
+        onMouseLeave?.(e)
+    }
+
+    return (
+        <Scroll ref={ele} scrollbar={bar} onMouseEnter={onContainerMouseEnter} onMouseLeave={onContainerMouseLeave} {...rest}>
+            <div
+                className={clsx(
+                    css`
+                        display: flex;
+                        flex-direction: column;
+                        gap: var(--gap, 0);
+                        & > * {
+                            flex: none;
+                        }
+                    `,
+                    containerClassName,
+                )}
+                style={transformCSSVariable({ gap: px(gap) }, containerStyle)}
+            >
+                {children}
+            </div>
+        </Scroll>
+    )
+})

package/src/components/AutoSizeTextarea.tsx

@@ -1,49 +1,49 @@
-"use client"
-
-import { css } from "@emotion/css"
-import { clsx } from "deepsea-tools"
-import { forwardRef, TextareaHTMLAttributes, useImperativeHandle, useLayoutEffect, useRef, useState } from "react"
-import { px, transformCSSVariable } from "../utils"
-
-/**
- * 自适应高度的文本域
- */
-export const AutoSizeTextArea = forwardRef<HTMLTextAreaElement, TextareaHTMLAttributes<HTMLTextAreaElement>>((props, ref) => {
-    const { className, style, ...rest } = props
-    const [height, setHeight] = useState<string | undefined>(undefined)
-    const ele = useRef<HTMLTextAreaElement>(null)
-
-    useImperativeHandle(ref, () => ele.current!, [])
-
-    useLayoutEffect(() => {
-        const textarea = ele.current!
-        function resizeTextarea() {
-            setHeight("auto")
-            setHeight(px(textarea.scrollHeight + textarea.offsetHeight - textarea.clientHeight))
-        }
-        resizeTextarea()
-        textarea.addEventListener("input", resizeTextarea)
-        textarea.addEventListener("change", resizeTextarea)
-
-        return () => {
-            textarea.removeEventListener("input", resizeTextarea)
-            textarea.removeEventListener("change", resizeTextarea)
-        }
-    }, [])
-
-    return (
-        <textarea
-            ref={ele}
-            className={clsx(
-                css`
-                    height: var(--height);
-                    resize: none;
-                    overflow-y: hidden;
-                `,
-                className
-            )}
-            style={transformCSSVariable({ height }, style)}
-            {...rest}
-        />
-    )
-})
+"use client"
+
+import { css } from "@emotion/css"
+import { clsx } from "deepsea-tools"
+import { forwardRef, TextareaHTMLAttributes, useImperativeHandle, useLayoutEffect, useRef, useState } from "react"
+import { px, transformCSSVariable } from "../utils"
+
+/**
+ * 自适应高度的文本域
+ */
+export const AutoSizeTextArea = forwardRef<HTMLTextAreaElement, TextareaHTMLAttributes<HTMLTextAreaElement>>((props, ref) => {
+    const { className, style, ...rest } = props
+    const [height, setHeight] = useState<string | undefined>(undefined)
+    const ele = useRef<HTMLTextAreaElement>(null)
+
+    useImperativeHandle(ref, () => ele.current!, [])
+
+    useLayoutEffect(() => {
+        const textarea = ele.current!
+        function resizeTextarea() {
+            setHeight("auto")
+            setHeight(px(textarea.scrollHeight + textarea.offsetHeight - textarea.clientHeight))
+        }
+        resizeTextarea()
+        textarea.addEventListener("input", resizeTextarea)
+        textarea.addEventListener("change", resizeTextarea)
+
+        return () => {
+            textarea.removeEventListener("input", resizeTextarea)
+            textarea.removeEventListener("change", resizeTextarea)
+        }
+    }, [])
+
+    return (
+        <textarea
+            ref={ele}
+            className={clsx(
+                css`
+                    height: var(--height);
+                    resize: none;
+                    overflow-y: hidden;
+                `,
+                className,
+            )}
+            style={transformCSSVariable({ height }, style)}
+            {...rest}
+        />
+    )
+})

package/src/components/CircleText.tsx

@@ -1,56 +1,81 @@
-"use client"
-
-import { FC, Fragment, HTMLAttributes } from "react"
-
-export interface CircleTextProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
-    /** 每一个方块的宽度 */
-    width: number
-    /** 每一个方块的高度 */
-    height: number
-    /** 圆弧的半径，不包含方块的高度 */
-    radius: number
-    /** 开始旋转的弧度，逆时针增加，0 为 x 轴方向 */
-    startAngel?: number
-    /** 每一个方块之间间隔的弧度 */
-    gapAngel?: number
-    /** 文字对齐的方式，默认居中 */
-    align?: "left" | "center" | "right"
-    /** 文字朝向圆心还是外侧，默认外侧 */
-    direction?: "inner" | "outer"
-    /** 是否反转文字顺序 */
-    reverse?: boolean
-    /** 分割文字的方法 */
-    separator?: string | RegExp | ((text: string) => string[])
-    /** 显示的文字 */
-    children: string
-}
-
-/** 环形文字 */
-export const CircleText: FC<CircleTextProps> = props => {
-    const { width, height, radius, startAngel = 0, gapAngel = 0, align = "center", style, direction = "outer", reverse = false, separator, children, ...rest } = props
-    const unitAngle = Math.atan(width / 2 / radius) * 2
-    const totalAngle = (unitAngle + gapAngel) * children.length - gapAngel
-    const offsetAngle = align === "left" ? 0 : align === "right" ? totalAngle : totalAngle / 2
-
-    function getTransform(idx: number) {
-        const angle = startAngel - idx * (unitAngle + gapAngel) + offsetAngle - unitAngle / 2
-        const x = (radius + height / 2) * Math.cos(angle) - width / 2
-        const y = (radius + height / 2) * Math.sin(angle) * -1 - height / 2
-        const z = Math.PI / 2 - angle + (direction === "inner" ? Math.PI : 0)
-        return `translateX(${x}px) translateY(${y}px) rotateZ(${(z / Math.PI) * 180}deg)`
-    }
-
-    const words = typeof separator === "function" ? separator(children) : children.split(separator ?? "")
-
-    if (reverse) words.reverse()
-
-    return (
-        <Fragment>
-            {words.map((w, idx) => (
-                <span key={idx} style={{ position: "absolute", ...style, transform: getTransform(idx), textAlign: "center", width, lineHeight: `${height}px`, height: height }} {...rest}>
-                    {w}
-                </span>
-            ))}
-        </Fragment>
-    )
-}
+"use client"
+
+import { FC, Fragment, HTMLAttributes } from "react"
+
+export interface CircleTextProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+    /** 每一个方块的宽度 */
+    width: number
+    /** 每一个方块的高度 */
+    height: number
+    /** 圆弧的半径，不包含方块的高度 */
+    radius: number
+    /** 开始旋转的弧度，逆时针增加，0 为 x 轴方向 */
+    startAngel?: number
+    /** 每一个方块之间间隔的弧度 */
+    gapAngel?: number
+    /** 文字对齐的方式，默认居中 */
+    align?: "left" | "center" | "right"
+    /** 文字朝向圆心还是外侧，默认外侧 */
+    direction?: "inner" | "outer"
+    /** 是否反转文字顺序 */
+    reverse?: boolean
+    /** 分割文字的方法 */
+    separator?: string | RegExp | ((text: string) => string[])
+    /** 显示的文字 */
+    children: string
+}
+
+/** 环形文字 */
+export const CircleText: FC<CircleTextProps> = props => {
+    const {
+        width,
+        height,
+        radius,
+        startAngel = 0,
+        gapAngel = 0,
+        align = "center",
+        style,
+        direction = "outer",
+        reverse = false,
+        separator,
+        children,
+        ...rest
+    } = props
+    const unitAngle = Math.atan(width / 2 / radius) * 2
+    const totalAngle = (unitAngle + gapAngel) * children.length - gapAngel
+    const offsetAngle = align === "left" ? 0 : align === "right" ? totalAngle : totalAngle / 2
+
+    function getTransform(idx: number) {
+        const angle = startAngel - idx * (unitAngle + gapAngel) + offsetAngle - unitAngle / 2
+        const x = (radius + height / 2) * Math.cos(angle) - width / 2
+        const y = (radius + height / 2) * Math.sin(angle) * -1 - height / 2
+        const z = Math.PI / 2 - angle + (direction === "inner" ? Math.PI : 0)
+        return `translateX(${x}px) translateY(${y}px) rotateZ(${(z / Math.PI) * 180}deg)`
+    }
+
+    const words = typeof separator === "function" ? separator(children) : children.split(separator ?? "")
+
+    if (reverse) words.reverse()
+
+    return (
+        <Fragment>
+            {words.map((w, idx) => (
+                <span
+                    key={idx}
+                    style={{
+                        position: "absolute",
+                        ...style,
+                        transform: getTransform(idx),
+                        textAlign: "center",
+                        width,
+                        lineHeight: `${height}px`,
+                        height: height,
+                    }}
+                    {...rest}
+                >
+                    {w}
+                </span>
+            ))}
+        </Fragment>
+    )
+}

package/src/components/CopyButton.tsx

@@ -0,0 +1,29 @@
+import { useLatest } from "ahooks"
+import ClipboardJS, { Event } from "clipboard"
+import { ComponentProps, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
+
+export { Event } from "clipboard"
+
+export type CopyButtonProps = ComponentProps<"button"> & {
+    text?: string
+    onCopySuccess?: (e: Event) => void
+    onCopyError?: (e: Event) => void
+}
+
+export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>((props, ref) => {
+    const { text, onCopySuccess: _onCoptSuccess, onCopyError: _onCopyError, ...rest } = props
+    const ele = useRef<HTMLButtonElement>(null)
+    const onCopySuccess = useLatest(_onCoptSuccess)
+    const onCopyError = useLatest(_onCopyError)
+
+    useImperativeHandle(ref, () => ele.current!, [ele.current])
+
+    useEffect(() => {
+        const clipboard = new ClipboardJS(ele.current!)
+        clipboard.on("success", event => onCopySuccess.current?.(event))
+        clipboard.on("error", event => onCopyError.current?.(event))
+        return () => clipboard.destroy()
+    }, [])
+
+    return <button ref={ele} {...rest} data-clipboard-text={text} />
+})