deepsea-components 5.15.21 → 5.15.23

package/src/components/InputFileButton.tsx

@@ -1,122 +1,122 @@
-"use client"
-
-import {
-    ComponentProps,
-    ComponentRef,
-    DragEvent,
-    Fragment,
-    JSX,
-    JSXElementConstructor,
-    MouseEvent as ReactMouseEvent,
-    createElement,
-    useImperativeHandle,
-    useRef,
-    useState,
-} from "react"
-
-import { FileType, InputFile, InputFileBaseProps, InputFileDataType, InputFileDataTypeMap, InputFileExtraProps, ValueType, getFileData } from "./InputFile"
-
-export type InputFileButtonProps<
-    Multiple extends boolean = false,
-    Type extends InputFileDataType = "file",
-    AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "button",
-> = Omit<ComponentProps<AS>, "as" | "type" | "disabled"> &
-    InputFileExtraProps<Multiple, Type> & {
-        disabled?: boolean
-        inputProps?: Omit<InputFileBaseProps, "accept">
-        accept?: string
-        dragFile?: boolean
-        as?: AS
-    }
-
-/** 专用于读取文件的 button 组件 */
-export function InputFileButton<
-    Multiple extends boolean = false,
-    Type extends InputFileDataType = "file",
-    AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "button",
->(props: InputFileButtonProps<Multiple, Type, AS>) {
-    const {
-        as = "button",
-        onClick: _onClick,
-        inputProps = {},
-        accept,
-        onDrop: _onDrop,
-        onDragOver: _onDragOver,
-        dragFile,
-        disabled: _disabled,
-        type = "file",
-        multiple,
-        onValueChange,
-        onFileChange,
-        clearAfterChange,
-        ...rest
-    } = props
-
-    const { ref, style, disabled: __disabled, ...restInputProps } = inputProps
-    const [disabled, setDisabled] = useState(false)
-    const input = useRef<HTMLInputElement>(null)
-
-    useImperativeHandle(ref, () => input.current!, [input.current])
-
-    function onClick(e: ReactMouseEvent<ComponentRef<AS>, MouseEvent>) {
-        input.current?.click()
-        _onClick?.(e as any)
-    }
-
-    async function onDrop(e: DragEvent<ComponentRef<AS>>) {
-        _onDrop?.(e as any)
-        if (disabled || !dragFile) return
-        e.preventDefault()
-        const { files } = e.dataTransfer
-        if (!files || files.length === 0) return
-        setDisabled(true)
-        try {
-            if (multiple) {
-                const files2: File[] = Array.from(files)
-                const values: InputFileDataTypeMap[Type][] = []
-                for (const file of files2) {
-                    const value = (await getFileData(file, type)) as InputFileDataTypeMap[Type]
-                    values.push(value)
-                }
-                onFileChange?.(files2 as FileType<Multiple>)
-                onValueChange?.(values as ValueType<Multiple, Type>)
-            } else {
-                const file = files[0]
-                onFileChange?.(file as FileType<Multiple>)
-                onValueChange?.((await getFileData(file, type)) as ValueType<Multiple, Type>)
-            }
-        } finally {
-            setDisabled(false)
-        }
-    }
-
-    function onDragOver(e: DragEvent<ComponentRef<AS>>) {
-        _onDragOver?.(e as any)
-        if (disabled || !dragFile) return
-        e.preventDefault()
-    }
-
-    return (
-        <Fragment>
-            <InputFile<Multiple, Type>
-                ref={input}
-                disabled={disabled || _disabled || __disabled}
-                style={{ display: "none", ...style }}
-                multiple={multiple}
-                accept={accept}
-                type={type as Type}
-                onValueChange={onValueChange}
-                onFileChange={onFileChange}
-                clearAfterChange={clearAfterChange}
-                {...restInputProps}
-            />
-            {createElement(as, {
-                disabled: disabled || _disabled,
-                onClick,
-                onDrop,
-                onDragOver,
-                ...rest,
-            })}
-        </Fragment>
-    )
-}
+"use client"
+
+import {
+    ComponentProps,
+    ComponentRef,
+    DragEvent,
+    Fragment,
+    JSX,
+    JSXElementConstructor,
+    MouseEvent as ReactMouseEvent,
+    createElement,
+    useImperativeHandle,
+    useRef,
+    useState,
+} from "react"
+
+import { FileType, InputFile, InputFileBaseProps, InputFileDataType, InputFileDataTypeMap, InputFileExtraProps, ValueType, getFileData } from "./InputFile"
+
+export type InputFileButtonProps<
+    Multiple extends boolean = false,
+    Type extends InputFileDataType = "file",
+    AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "button",
+> = Omit<ComponentProps<AS>, "as" | "type" | "disabled"> &
+    InputFileExtraProps<Multiple, Type> & {
+        disabled?: boolean
+        inputProps?: Omit<InputFileBaseProps, "accept">
+        accept?: string
+        dragFile?: boolean
+        as?: AS
+    }
+
+/** 专用于读取文件的 button 组件 */
+export function InputFileButton<
+    Multiple extends boolean = false,
+    Type extends InputFileDataType = "file",
+    AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "button",
+>(props: InputFileButtonProps<Multiple, Type, AS>) {
+    const {
+        as = "button",
+        onClick: _onClick,
+        inputProps = {},
+        accept,
+        onDrop: _onDrop,
+        onDragOver: _onDragOver,
+        dragFile,
+        disabled: _disabled,
+        type = "file",
+        multiple,
+        onValueChange,
+        onFileChange,
+        clearAfterChange,
+        ...rest
+    } = props
+
+    const { ref, style, disabled: __disabled, ...restInputProps } = inputProps
+    const [disabled, setDisabled] = useState(false)
+    const input = useRef<HTMLInputElement>(null)
+
+    useImperativeHandle(ref, () => input.current!, [input.current])
+
+    function onClick(e: ReactMouseEvent<ComponentRef<AS>, MouseEvent>) {
+        input.current?.click()
+        _onClick?.(e as any)
+    }
+
+    async function onDrop(e: DragEvent<ComponentRef<AS>>) {
+        _onDrop?.(e as any)
+        if (disabled || !dragFile) return
+        e.preventDefault()
+        const { files } = e.dataTransfer
+        if (!files || files.length === 0) return
+        setDisabled(true)
+        try {
+            if (multiple) {
+                const files2: File[] = Array.from(files)
+                const values: InputFileDataTypeMap[Type][] = []
+                for (const file of files2) {
+                    const value = (await getFileData(file, type)) as InputFileDataTypeMap[Type]
+                    values.push(value)
+                }
+                onFileChange?.(files2 as FileType<Multiple>)
+                onValueChange?.(values as ValueType<Multiple, Type>)
+            } else {
+                const file = files[0]
+                onFileChange?.(file as FileType<Multiple>)
+                onValueChange?.((await getFileData(file, type)) as ValueType<Multiple, Type>)
+            }
+        } finally {
+            setDisabled(false)
+        }
+    }
+
+    function onDragOver(e: DragEvent<ComponentRef<AS>>) {
+        _onDragOver?.(e as any)
+        if (disabled || !dragFile) return
+        e.preventDefault()
+    }
+
+    return (
+        <Fragment>
+            <InputFile<Multiple, Type>
+                ref={input}
+                disabled={disabled || _disabled || __disabled}
+                style={{ display: "none", ...style }}
+                multiple={multiple}
+                accept={accept}
+                type={type as Type}
+                onValueChange={onValueChange}
+                onFileChange={onFileChange}
+                clearAfterChange={clearAfterChange}
+                {...restInputProps}
+            />
+            {createElement(as, {
+                disabled: disabled || _disabled,
+                onClick,
+                onDrop,
+                onDragOver,
+                ...rest,
+            })}
+        </Fragment>
+    )
+}

package/src/components/LoopSwiper.tsx

@@ -1,125 +1,125 @@
-"use client"
-
-import { css } from "@emotion/css"
-import { clsx } from "deepsea-tools"
-import { CSSProperties, HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react"
-
-export interface LoopSwiperProps extends HTMLAttributes<HTMLDivElement> {
-    direction?: "horizontal" | "vertical"
-    reverse?: boolean
-    period: number
-    gap?: CSSProperties["gap"]
-}
-
-/** 循环播放组件 */
-export const LoopSwiper = forwardRef<HTMLDivElement, LoopSwiperProps>((props, ref) => {
-    const { className, style, children, direction, period, reverse, gap, ...rest } = props
-    const wrapper = useRef<HTMLDivElement>(null)
-    const container = useRef<HTMLDivElement>(null)
-    const [swiper, setSwiper] = useState(false)
-    const directionRef = useRef(direction)
-    directionRef.current = direction
-    const flexDirection: CSSProperties["flexDirection"] = direction === "vertical" ? (reverse ? "column-reverse" : "column") : reverse ? "row-reverse" : "row"
-    const animationName = swiper
-        ? direction === "vertical"
-            ? reverse
-                ? "deepsea-reverse-vertical-loop-swipe"
-                : "deepsea-vertical-loop-swipe"
-            : reverse
-              ? "deepsea-reverse-horizontal-loop-swipe"
-              : "deepsea-horizontal-loop-swipe"
-        : "none"
-    const animationDuration = `${period}ms`
-    const animationTimingFunction = "linear"
-    const animationIterationCount = "infinite"
-
-    useImperativeHandle(ref, () => wrapper.current!, [])
-
-    useEffect(() => {
-        const wrapperEle = wrapper.current!
-        const containerEle = container.current!
-        let wrapperWidth = 0
-        let wrapperHeight = 0
-        let containerWidth = 0
-        let containerHeight = 0
-        const observer = new ResizeObserver(entries => {
-            entries.forEach(entry => {
-                if (entry.target === wrapperEle) {
-                    wrapperWidth = entry.contentRect.width
-                    wrapperHeight = entry.contentRect.height
-                } else if (entry.target === containerEle) {
-                    containerWidth = entry.contentRect.width
-                    containerHeight = entry.contentRect.height
-                }
-            })
-            setSwiper(directionRef.current === "vertical" ? containerHeight > wrapperHeight : containerWidth > wrapperWidth)
-        })
-        observer.observe(wrapperEle)
-        observer.observe(containerEle)
-    }, [])
-
-    return (
-        <div
-            ref={wrapper}
-            className={clsx(
-                css`
-                    @keyframes deepsea-horizontal-loop-swipe {
-                        from {
-                            transform: translateX(0);
-                        }
-                        to {
-                            transform: translateX(-100%);
-                        }
-                    }
-                    @keyframes deepsea-reverse-horizontal-loop-swipe {
-                        from {
-                            transform: translateX(0);
-                        }
-                        to {
-                            transform: translateX(100%);
-                        }
-                    }
-                    @keyframes deepsea-vertical-loop-swipe {
-                        from {
-                            transform: translateY(0);
-                        }
-                        to {
-                            transform: translateY(-100%);
-                        }
-                    }
-                    @keyframes deepsea-reverse-vertical-loop-swipe {
-                        from {
-                            transform: translateY(0);
-                        }
-                        to {
-                            transform: translateY(100%);
-                        }
-                    }
-                `,
-                className,
-            )}
-            style={{ display: "flex", flexDirection, gap, ...style }}
-            {...rest}
-        >
-            <div
-                ref={container}
-                style={{ display: "flex", flexDirection, gap, animationName, animationTimingFunction, animationDuration, animationIterationCount }}
-            >
-                {children}
-            </div>
-            <div
-                style={{
-                    display: swiper ? "flex" : "none",
-                    flexDirection,
-                    gap,
-                    animationName,
-                    animationTimingFunction,
-                    animationDuration,
-                    animationIterationCount,
-                }}
-            >
-                {children}
-            </div>
-        </div>
-    )
-})
+"use client"
+
+import { css } from "@emotion/css"
+import { clsx } from "deepsea-tools"
+import { CSSProperties, HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react"
+
+export interface LoopSwiperProps extends HTMLAttributes<HTMLDivElement> {
+    direction?: "horizontal" | "vertical"
+    reverse?: boolean
+    period: number
+    gap?: CSSProperties["gap"]
+}
+
+/** 循环播放组件 */
+export const LoopSwiper = forwardRef<HTMLDivElement, LoopSwiperProps>((props, ref) => {
+    const { className, style, children, direction, period, reverse, gap, ...rest } = props
+    const wrapper = useRef<HTMLDivElement>(null)
+    const container = useRef<HTMLDivElement>(null)
+    const [swiper, setSwiper] = useState(false)
+    const directionRef = useRef(direction)
+    directionRef.current = direction
+    const flexDirection: CSSProperties["flexDirection"] = direction === "vertical" ? (reverse ? "column-reverse" : "column") : reverse ? "row-reverse" : "row"
+    const animationName = swiper
+        ? direction === "vertical"
+            ? reverse
+                ? "deepsea-reverse-vertical-loop-swipe"
+                : "deepsea-vertical-loop-swipe"
+            : reverse
+              ? "deepsea-reverse-horizontal-loop-swipe"
+              : "deepsea-horizontal-loop-swipe"
+        : "none"
+    const animationDuration = `${period}ms`
+    const animationTimingFunction = "linear"
+    const animationIterationCount = "infinite"
+
+    useImperativeHandle(ref, () => wrapper.current!, [])
+
+    useEffect(() => {
+        const wrapperEle = wrapper.current!
+        const containerEle = container.current!
+        let wrapperWidth = 0
+        let wrapperHeight = 0
+        let containerWidth = 0
+        let containerHeight = 0
+        const observer = new ResizeObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.target === wrapperEle) {
+                    wrapperWidth = entry.contentRect.width
+                    wrapperHeight = entry.contentRect.height
+                } else if (entry.target === containerEle) {
+                    containerWidth = entry.contentRect.width
+                    containerHeight = entry.contentRect.height
+                }
+            })
+            setSwiper(directionRef.current === "vertical" ? containerHeight > wrapperHeight : containerWidth > wrapperWidth)
+        })
+        observer.observe(wrapperEle)
+        observer.observe(containerEle)
+    }, [])
+
+    return (
+        <div
+            ref={wrapper}
+            className={clsx(
+                css`
+                    @keyframes deepsea-horizontal-loop-swipe {
+                        from {
+                            transform: translateX(0);
+                        }
+                        to {
+                            transform: translateX(-100%);
+                        }
+                    }
+                    @keyframes deepsea-reverse-horizontal-loop-swipe {
+                        from {
+                            transform: translateX(0);
+                        }
+                        to {
+                            transform: translateX(100%);
+                        }
+                    }
+                    @keyframes deepsea-vertical-loop-swipe {
+                        from {
+                            transform: translateY(0);
+                        }
+                        to {
+                            transform: translateY(-100%);
+                        }
+                    }
+                    @keyframes deepsea-reverse-vertical-loop-swipe {
+                        from {
+                            transform: translateY(0);
+                        }
+                        to {
+                            transform: translateY(100%);
+                        }
+                    }
+                `,
+                className,
+            )}
+            style={{ display: "flex", flexDirection, gap, ...style }}
+            {...rest}
+        >
+            <div
+                ref={container}
+                style={{ display: "flex", flexDirection, gap, animationName, animationTimingFunction, animationDuration, animationIterationCount }}
+            >
+                {children}
+            </div>
+            <div
+                style={{
+                    display: swiper ? "flex" : "none",
+                    flexDirection,
+                    gap,
+                    animationName,
+                    animationTimingFunction,
+                    animationDuration,
+                    animationIterationCount,
+                }}
+            >
+                {children}
+            </div>
+        </div>
+    )
+})

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 { ReadSheet, ReadSheetProps } from "./ReadSheet"
+
+/**
+ * @deprecated 请使用 ReadSheetProps 代替
+ */
+export type ReadExcelProps = ReadSheetProps
+
+/**
+ * @deprecated 请使用 ReadSheet 代替
+ */
+export const ReadExcel = ReadSheet

package/src/components/ReadSheet.tsx

@@ -1,17 +1,17 @@
-"use client"
-
-import { WorkBookData, WorkSheetData, readSheet } from "deepsea-tools"
-import { FC } from "react"
-
-import { InputFile, InputFileProps } from "./InputFile"
-
-export interface ReadSheetProps extends Omit<InputFileProps<false, "arrayBuffer">, "multiple" | "accept" | "type" | "onValueChange"> {
-    onValueChange?: <Sheet = WorkSheetData>(data: WorkBookData<Sheet>) => void
-}
-
-/** 专门用于读取 excel 的组件 */
-export const ReadSheet: FC<ReadSheetProps> = props => {
-    const { onValueChange, ...rest } = props
-
-    return <InputFile accept=".xlsx" type="arrayBuffer" onValueChange={data => onValueChange?.(readSheet(data))} {...rest} />
-}
+"use client"
+
+import { WorkBookData, WorkSheetData, readSheet } from "deepsea-tools"
+import { FC } from "react"
+
+import { InputFile, InputFileProps } from "./InputFile"
+
+export interface ReadSheetProps extends Omit<InputFileProps<false, "arrayBuffer">, "multiple" | "accept" | "type" | "onValueChange"> {
+    onValueChange?: <Sheet = WorkSheetData>(data: WorkBookData<Sheet>) => void
+}
+
+/** 专门用于读取 excel 的组件 */
+export const ReadSheet: FC<ReadSheetProps> = props => {
+    const { onValueChange, ...rest } = props
+
+    return <InputFile accept=".xlsx" type="arrayBuffer" onValueChange={data => onValueChange?.(readSheet(data))} {...rest} />
+}

package/src/components/Ring.tsx

@@ -1,30 +1,30 @@
-"use client"
-
-import { HTMLAttributes, forwardRef } from "react"
-
-export interface RingProps extends HTMLAttributes<HTMLDivElement> {
-    outerWidth: number
-    innerWidth: number
-}
-
-/** 环形组件 */
-export const Ring = forwardRef<HTMLDivElement, RingProps>((props, ref) => {
-    const { outerWidth, innerWidth, style, ...rest } = props
-
-    const outerRadius = outerWidth / 2
-
-    const innerRadius = innerWidth / 2
-
-    return (
-        <div
-            ref={ref}
-            style={{
-                ...style,
-                width: `${outerWidth}px`,
-                height: `${outerWidth}px`,
-                clipPath: `path("M0,${outerRadius} a${outerRadius},${outerRadius},0,1,0,${outerWidth},0 a${outerRadius},${outerRadius},0,1,0,-${outerWidth},0 l${outerRadius - innerRadius},0 a${innerRadius},${innerRadius},0,0,1,${innerRadius * 2},0 a${innerRadius},${innerRadius},0,0,1,-${innerRadius * 2},0 Z")`,
-            }}
-            {...rest}
-        />
-    )
-})
+"use client"
+
+import { HTMLAttributes, forwardRef } from "react"
+
+export interface RingProps extends HTMLAttributes<HTMLDivElement> {
+    outerWidth: number
+    innerWidth: number
+}
+
+/** 环形组件 */
+export const Ring = forwardRef<HTMLDivElement, RingProps>((props, ref) => {
+    const { outerWidth, innerWidth, style, ...rest } = props
+
+    const outerRadius = outerWidth / 2
+
+    const innerRadius = innerWidth / 2
+
+    return (
+        <div
+            ref={ref}
+            style={{
+                ...style,
+                width: `${outerWidth}px`,
+                height: `${outerWidth}px`,
+                clipPath: `path("M0,${outerRadius} a${outerRadius},${outerRadius},0,1,0,${outerWidth},0 a${outerRadius},${outerRadius},0,1,0,-${outerWidth},0 l${outerRadius - innerRadius},0 a${innerRadius},${innerRadius},0,0,1,${innerRadius * 2},0 a${innerRadius},${innerRadius},0,0,1,-${innerRadius * 2},0 Z")`,
+            }}
+            {...rest}
+        />
+    )
+})