deepsea-components 5.18.5 → 5.18.7

package/src/components/CircleText.tsx

@@ -1,81 +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 { type FC, type HTMLAttributes, Fragment } 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

@@ -2,12 +2,12 @@
 
 /* eslint-disable no-restricted-syntax */
 
-import { ComponentPropsWithoutRef, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
+import { type ComponentPropsWithoutRef, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
 
-import ClipboardJS, { Event } from "clipboard"
+import ClipboardJS, { type Event } from "clipboard"
 import { useLatest } from "soda-hooks"
 
-export { Event } from "clipboard"
+export type { Event } from "clipboard"
 
 export type CopyButtonProps = ComponentPropsWithoutRef<"button"> & {
     text?: string
@@ -28,6 +28,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>((props,
         const clipboard = new ClipboardJS(ele.current!)
         clipboard.on("success", event => onCopySuccess.current?.(event))
         clipboard.on("error", event => onCopyError.current?.(event))
+
         return () => clipboard.destroy()
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])

package/src/components/DraggableGrid.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable no-restricted-syntax */
 
-import { ComponentProps, CSSProperties, Key, ReactNode, useEffect, useMemo, useRef, useState } from "react"
+import { type ComponentProps, type CSSProperties, type Key, type ReactNode, useEffect, useMemo, useRef, useState } from "react"
 
 import { clsx, getArray, isNullable } from "deepsea-tools"
-import { DragMoveEvent, DragMoveEvents, useDragMove } from "soda-hooks"
+import { type DragMoveEvent, type DragMoveEvents, useDragMove } from "soda-hooks"
 
 import styles from "./DraggableGrid.module.css"
 
@@ -349,6 +349,7 @@ export function DraggableGrid<T, K extends Key = T extends Key ? T : never>({
             setKeyToOrder(newOrderMap)
             onOrderMapChange?.(newOrderMap)
             const newRenderKeys = new Set(newOrderMap.keys())
+
             // eslint-disable-next-line react-hooks/immutability
             setRenderKeys(prev => prev.intersection(newRenderKeys).union(newRenderKeys.difference(prev)))
         }

package/src/components/Echart.tsx

@@ -1,71 +1,71 @@
 "use client"
 
-import { ComponentProps, FC, ReactNode, Ref, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react"
+import { type ComponentProps, type FC, type ReactNode, type Ref, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react"
 
 import {
-    AngleAxisComponentOption,
-    AriaComponentOption,
-    AxisPointerComponentOption,
-    BarSeriesOption,
-    BoxplotSeriesOption,
-    BrushComponentOption,
-    CalendarComponentOption,
-    CandlestickSeriesOption,
-    ChordSeriesOption,
-    ComposeOption,
-    ContinousVisualMapComponentOption,
-    CustomSeriesOption,
-    DatasetComponentOption,
-    DataZoomComponentOption,
-    ECharts,
-    EChartsInitOpts,
-    EffectScatterSeriesOption,
-    FunnelSeriesOption,
-    GaugeSeriesOption,
-    GeoComponentOption,
-    GraphicComponentOption,
-    GraphSeriesOption,
-    GridComponentOption,
-    HeatmapSeriesOption,
+    type AngleAxisComponentOption,
+    type AriaComponentOption,
+    type AxisPointerComponentOption,
+    type BarSeriesOption,
+    type BoxplotSeriesOption,
+    type BrushComponentOption,
+    type CalendarComponentOption,
+    type CandlestickSeriesOption,
+    type ChordSeriesOption,
+    type ComposeOption,
+    type ContinousVisualMapComponentOption,
+    type CustomSeriesOption,
+    type DatasetComponentOption,
+    type DataZoomComponentOption,
+    type ECharts,
+    type EChartsInitOpts,
+    type EffectScatterSeriesOption,
+    type FunnelSeriesOption,
+    type GaugeSeriesOption,
+    type GeoComponentOption,
+    type GraphicComponentOption,
+    type GraphSeriesOption,
+    type GridComponentOption,
+    type HeatmapSeriesOption,
+    type InsideDataZoomComponentOption,
+    type LegendComponentOption,
+    type LineSeriesOption,
+    type LinesSeriesOption,
+    type MapSeriesOption,
+    type MarkAreaComponentOption,
+    type MarkLineComponentOption,
+    type MarkPointComponentOption,
+    type MatrixComponentOption,
+    type ParallelSeriesOption,
+    type PictorialBarSeriesOption,
+    type PiecewiseVisualMapComponentOption,
+    type PieSeriesOption,
+    type PlainLegendComponentOption,
+    type PolarComponentOption,
+    type RadarComponentOption,
+    type RadarSeriesOption,
+    type RadiusAxisComponentOption,
+    type SankeySeriesOption,
+    type ScatterSeriesOption,
+    type ScrollableLegendComponentOption,
+    type SeriesOption,
+    type SingleAxisComponentOption,
+    type SliderDataZoomComponentOption,
+    type SunburstSeriesOption,
+    type ThemeRiverSeriesOption,
+    type ThumbnailComponentOption,
+    type TimelineComponentOption,
+    type TitleComponentOption,
+    type ToolboxComponentOption,
+    type TooltipComponentOption,
+    type TreemapSeriesOption,
+    type TreeSeriesOption,
+    type VisualMapComponentOption,
+    type XAXisComponentOption,
+    type YAXisComponentOption,
     init,
-    InsideDataZoomComponentOption,
-    LegendComponentOption,
-    LineSeriesOption,
-    LinesSeriesOption,
-    MapSeriesOption,
-    MarkAreaComponentOption,
-    MarkLineComponentOption,
-    MarkPointComponentOption,
-    MatrixComponentOption,
-    ParallelSeriesOption,
-    PictorialBarSeriesOption,
-    PiecewiseVisualMapComponentOption,
-    PieSeriesOption,
-    PlainLegendComponentOption,
-    PolarComponentOption,
-    RadarComponentOption,
-    RadarSeriesOption,
-    RadiusAxisComponentOption,
-    SankeySeriesOption,
-    ScatterSeriesOption,
-    ScrollableLegendComponentOption,
-    SeriesOption,
-    SingleAxisComponentOption,
-    SliderDataZoomComponentOption,
-    SunburstSeriesOption,
-    ThemeRiverSeriesOption,
-    ThumbnailComponentOption,
-    TimelineComponentOption,
-    TitleComponentOption,
-    ToolboxComponentOption,
-    TooltipComponentOption,
-    TreemapSeriesOption,
-    TreeSeriesOption,
-    VisualMapComponentOption,
-    XAXisComponentOption,
-    YAXisComponentOption,
 } from "echarts"
-import { ECBasicOption } from "echarts/types/src/util/types.js"
+import type { ECBasicOption } from "echarts/types/src/util/types.js"
 import hash from "stable-hash"
 
 export type ChartOption<T extends SeriesOption = never> = ComposeOption<
@@ -179,6 +179,7 @@ export function Echart<T extends ECBasicOption = ECBasicOption>({
     useLayoutEffect(() => {
         const ele = container.current!
         chartRef.current = init(ele, option, { ...initOption, width, height, locale })
+
         return () => chartRef.current?.dispose()
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])

package/src/components/Flow.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { CSSProperties, HTMLAttributes, Key, ReactNode, Ref, useEffect, useImperativeHandle, useRef, useState } from "react"
+import { type CSSProperties, type HTMLAttributes, type Key, type ReactNode, type Ref, useEffect, useImperativeHandle, useRef, useState } from "react"
 
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
@@ -268,12 +268,16 @@ export function Flow<T>(props: FlowProps<T>): ReactNode {
     const ele = useRef<HTMLDivElement>(null)
     const size = useSize(ele)
     const width = useRef(size?.width || 0)
+
     // eslint-disable-next-line react-hooks/refs
     if (size && size.width !== 0) width.current = size.width
+
     // eslint-disable-next-line react-hooks/exhaustive-deps, react-hooks/refs
     useImperativeHandle(element, () => ele.current!, [ele.current])
+
     // eslint-disable-next-line react-hooks/refs
     if (width.current === 0) return <div ref={ele} {...rest} />
+
     // eslint-disable-next-line react-hooks/refs
     return <ManualFlow element={ele} {...props} width={width.current} />
 }

package/src/components/FormLabel.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { ComponentPropsWithoutRef, createContext, FC, Fragment, ReactNode, useContext } from "react"
+import { type ComponentPropsWithoutRef, type FC, type ReactNode, createContext, Fragment, useContext } from "react"
 
 export interface FormLabelConfig {
     /**

package/src/components/HlsPlayer.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { ComponentProps, FC, useEffect, useImperativeHandle, useRef } from "react"
+import { type ComponentProps, type FC, useEffect, useImperativeHandle, useRef } from "react"
 
 import Hls from "hls.js"
 

package/src/components/IconFileType.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps, FC } from "react"
+import type { ComponentProps, FC } from "react"
 
 const GOLD = (Math.sqrt(5) - 1) / 2
 const GOLD_T = Math.sqrt(1 - GOLD * GOLD)

package/src/components/InfiniteScroll.tsx

@@ -2,7 +2,15 @@
 
 /* eslint-disable no-restricted-syntax */
 
-import { ComponentPropsWithoutRef, CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from "react"
+import {
+    type ComponentPropsWithoutRef,
+    type CSSProperties,
+    type MouseEvent as ReactMouseEvent,
+    forwardRef,
+    useEffect,
+    useImperativeHandle,
+    useRef,
+} from "react"
 
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
@@ -90,6 +98,7 @@ export const InfiniteScroll = forwardRef<HTMLDivElement, InfiniteScrollProps>((p
             },
             { duration, iterations: Infinity },
         )
+
         return () => animation.current?.cancel()
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [wrapperSize, containerSize, overflow, direction, duration])

package/src/components/InputFile.tsx

@@ -2,7 +2,7 @@
 
 /* eslint-disable no-restricted-syntax */
 
-import { ChangeEvent, ComponentProps, ReactNode, useState } from "react"
+import { type ChangeEvent, type ComponentProps, type ReactNode, useState } from "react"
 
 export interface InputFileDataTypeMap {
     base64: string
@@ -23,9 +23,11 @@ export function getFileData<T extends InputFileDataType>(file: File, type: T): P
         fileReader.addEventListener("load", () => {
             resolve(fileReader.result as any)
         })
+
         fileReader.addEventListener("error", () => {
             reject(fileReader.error ?? new Error("Failed to read file"))
         })
+
         fileReader.addEventListener("abort", () => {
             reject(fileReader.error ?? new Error("File reading was aborted"))
         })

package/src/components/InputFileButton.tsx

@@ -3,29 +3,29 @@
 /* eslint-disable no-restricted-syntax */
 
 import {
-    ComponentProps,
-    ComponentRef,
+    type ComponentProps,
+    type ComponentRef,
+    type DragEvent,
+    type JSX,
+    type JSXElementConstructor,
+    type MouseEvent as ReactMouseEvent,
     createElement,
-    DragEvent,
     Fragment,
-    JSX,
-    JSXElementConstructor,
-    MouseEvent as ReactMouseEvent,
     useImperativeHandle,
     useRef,
     useState,
 } from "react"
 
 import {
-    DataType,
-    FileType,
+    type DataType,
+    type FileType,
+    type InputFileBaseProps,
+    type InputFileDataType,
+    type InputFileDataTypeMap,
+    type InputFileExtraProps,
+    type ValueType,
     getFileData,
     InputFile,
-    InputFileBaseProps,
-    InputFileDataType,
-    InputFileDataTypeMap,
-    InputFileExtraProps,
-    ValueType,
 } from "./InputFile"
 
 export type InputFileButtonProps<

package/src/components/LoopSwiper.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { ComponentProps, CSSProperties, FC, useEffect, useImperativeHandle, useRef, useState } from "react"
+import { type ComponentProps, type CSSProperties, type FC, useEffect, useImperativeHandle, useRef, useState } from "react"
 
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"

package/src/components/ReadExcel.tsx

@@ -1,13 +1,13 @@
-"use client"
-
-import { ReadSheet, ReadSheetProps } from "./ReadSheet"
-
-/**
- * @deprecated 请使用 ReadSheetProps 代替
- */
-export type ReadExcelProps = ReadSheetProps
-
-/**
- * @deprecated 请使用 ReadSheet 代替
- */
-export const ReadExcel = ReadSheet
+"use client"
+
+import { type ReadSheetProps, ReadSheet } from "./ReadSheet"
+
+/**
+ * @deprecated 请使用 ReadSheetProps 代替
+ */
+export type ReadExcelProps = ReadSheetProps
+
+/**
+ * @deprecated 请使用 ReadSheet 代替
+ */
+export const ReadExcel = ReadSheet

package/src/components/ReadSheet.tsx

@@ -1,8 +1,8 @@
 "use client"
 
-import { readSheet, WorkBookData, WorkSheetData } from "deepsea-tools"
+import { type WorkBookData, type WorkSheetData, readSheet } from "deepsea-tools"
 
-import { InputFile, InputFileProps } from "./InputFile"
+import { type InputFileProps, InputFile } from "./InputFile"
 
 export interface ReadSheetProps<Sheet = WorkSheetData> extends Omit<InputFileProps<false, "arrayBuffer">, "multiple" | "accept" | "type" | "onValueChange"> {
     onValueChange?: (data: WorkBookData<Sheet>) => void

package/src/components/Ring.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { forwardRef, HTMLAttributes } from "react"
+import { type HTMLAttributes, forwardRef } from "react"
 
 export interface RingProps extends HTMLAttributes<HTMLDivElement> {
     outerWidth: number

package/src/components/RtspPlayer.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { ComponentProps, FC, useEffect, useImperativeHandle, useRef } from "react"
+import { type ComponentProps, type FC, useEffect, useImperativeHandle, useRef } from "react"
 
 import { MediaMTXWebRTCReader } from "@/components/rtspPlayer/reader"
 
@@ -15,9 +15,7 @@ export interface RtspPlayerProps extends Omit<ComponentProps<"video">, "src" | "
 function getWhepUrl(src: string) {
     const url = new URL(src, window.location.href)
 
-    if (url.protocol !== "http:" && url.protocol !== "https:") {
-        throw new Error("RtspPlayer expects a MediaMTX HTTP(S) playback URL, not an RTSP URL")
-    }
+    if (url.protocol !== "http:" && url.protocol !== "https:") throw new Error("RtspPlayer expects a MediaMTX HTTP(S) playback URL, not an RTSP URL")
 
     const pathname = url.pathname.replace(/\/+$/, "")
     url.pathname = pathname.endsWith("/whep") ? pathname : `${pathname}/whep`
@@ -60,6 +58,7 @@ export const RtspPlayer: FC<RtspPlayerProps> = ({ ref, src, user, pass, token, o
 
         let closed = false
         const fallbackStream = new MediaStream()
+
         const reader = new MediaMTXWebRTCReader({
             url: whepUrl,
             user,

package/src/components/Scroll.tsx

@@ -1,6 +1,16 @@
 "use client"
 
-import { ComponentProps, CSSProperties, FC, ForwardedRef, useEffect, useEffectEvent, useImperativeHandle, useLayoutEffect, useRef } from "react"
+import {
+    type ComponentProps,
+    type CSSProperties,
+    type FC,
+    type ForwardedRef,
+    useEffect,
+    useEffectEvent,
+    useImperativeHandle,
+    useLayoutEffect,
+    useRef,
+} from "react"
 
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
@@ -48,6 +58,7 @@ export const Scroll: FC<ScrollProps> = ({
 
     useLayoutEffect(() => {
         bar.current = Scrollbar.init(ele.current!, scrollbarOptions)
+
         return () => bar.current?.destroy()
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])