deepsea-components 5.7.0 → 5.7.2

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

@@ -1,29 +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} />
-})
+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} />
+})

package/src/components/Echart.tsx

@@ -1,44 +1,67 @@
-import { BarSeriesOption, ComposeOption, DatasetComponentOption, ECharts, GridComponentOption, init, LineSeriesOption, PieSeriesOption, TitleComponentOption, TooltipComponentOption } from "echarts"
-import { ComponentProps, ForwardedRef, forwardRef, ForwardRefExoticComponent, RefAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react"
-
-export type PieOption = ComposeOption<PieSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>
-
-export type BarOption = ComposeOption<BarSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>
-
-export type LineOption = ComposeOption<LineSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>
-
-export interface EchartProps<T extends any = any> extends Omit<ComponentProps<"div">, "children"> {
-    width: number
-    height: number
-    option: T
-    chart?: ForwardedRef<ECharts>
-}
-
-export type EchartComponent<T extends PieOption | BarOption | LineOption> = ForwardRefExoticComponent<Omit<EchartProps<T>, "ref"> & RefAttributes<HTMLDivElement>>
-
-const Echart = forwardRef<HTMLDivElement, EchartProps>((props, ref) => {
-    const { width, height, option, chart, ...rest } = props
-    const container = useRef<HTMLDivElement>(null)
-    const chartRef = useRef<ECharts | null>(null)
-
-    useLayoutEffect(() => {
-        const ele = container.current!
-        chartRef.current = init(ele, option, { width, height })
-        return () => chartRef.current?.dispose()
-    }, [])
-
-    useImperativeHandle(ref, () => container.current!, [])
-
-    useImperativeHandle(chart, () => chartRef.current!, [])
-
-    useEffect(() => {
-        chartRef.current?.setOption(option)
-        chartRef.current?.resize({ width, height })
-    })
-
-    return <div ref={container} {...rest} />
-})
-
-export const Pie = Echart as EchartComponent<PieOption>
-export const Bar = Echart as EchartComponent<BarOption>
-export const Line = Echart as EchartComponent<LineOption>
+import {
+    BarSeriesOption,
+    ComposeOption,
+    DatasetComponentOption,
+    ECharts,
+    GridComponentOption,
+    init,
+    LineSeriesOption,
+    PieSeriesOption,
+    TitleComponentOption,
+    TooltipComponentOption,
+} from "echarts"
+import {
+    ComponentProps,
+    ForwardedRef,
+    forwardRef,
+    ForwardRefExoticComponent,
+    RefAttributes,
+    useEffect,
+    useImperativeHandle,
+    useLayoutEffect,
+    useRef,
+} from "react"
+
+export type PieOption = ComposeOption<PieSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>
+
+export type BarOption = ComposeOption<BarSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>
+
+export type LineOption = ComposeOption<LineSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>
+
+export interface EchartProps<T extends any = any> extends Omit<ComponentProps<"div">, "children"> {
+    width: number
+    height: number
+    option: T
+    chart?: ForwardedRef<ECharts>
+}
+
+export type EchartComponent<T extends PieOption | BarOption | LineOption> = ForwardRefExoticComponent<
+    Omit<EchartProps<T>, "ref"> & RefAttributes<HTMLDivElement>
+>
+
+const Echart = forwardRef<HTMLDivElement, EchartProps>((props, ref) => {
+    const { width, height, option, chart, ...rest } = props
+    const container = useRef<HTMLDivElement>(null)
+    const chartRef = useRef<ECharts | null>(null)
+
+    useLayoutEffect(() => {
+        const ele = container.current!
+        chartRef.current = init(ele, option, { width, height })
+        return () => chartRef.current?.dispose()
+    }, [])
+
+    useImperativeHandle(ref, () => container.current!, [])
+
+    useImperativeHandle(chart, () => chartRef.current!, [])
+
+    useEffect(() => {
+        chartRef.current?.setOption(option)
+        chartRef.current?.resize({ width, height })
+    })
+
+    return <div ref={container} {...rest} />
+})
+
+export const Pie = Echart as EchartComponent<PieOption>
+export const Bar = Echart as EchartComponent<BarOption>
+export const Line = Echart as EchartComponent<LineOption>