deepsea-components 5.18.3 → 5.18.5

package/src/components/CopyButton.tsx

@@ -1,5 +1,7 @@
 "use client"
 
+/* eslint-disable no-restricted-syntax */
+
 import { ComponentPropsWithoutRef, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
 
 import ClipboardJS, { Event } from "clipboard"
@@ -19,6 +21,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>((props,
     const onCopySuccess = useLatest(_onCoptSuccess)
     const onCopyError = useLatest(_onCopyError)
 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     useImperativeHandle(ref, () => ele.current!, [ele.current])
 
     useEffect(() => {
@@ -26,6 +29,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>((props,
         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
     }, [])
 
     return <button ref={ele} {...rest} data-clipboard-text={text} />

package/src/components/DraggableGrid.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable no-restricted-syntax */
+
 import { ComponentProps, CSSProperties, Key, ReactNode, useEffect, useMemo, useRef, useState } from "react"
 
 import { clsx, getArray, isNullable } from "deepsea-tools"
@@ -347,8 +349,10 @@ 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)))
         }
+        // eslint-disable-next-line react-hooks/refs
     }, [dragging, cache, orders, keyToItem, keyToOrder, orderPriority, onOrderMapChange])
 
     /** 渲染的元素的 key，不会随着 keyToOrder 的变化而变化 */
@@ -384,6 +388,7 @@ export function DraggableGrid<T, K extends Key = T extends Key ? T : never>({
 
         if (!!orderMap && isLegalOrderMap({ orders, keys: keyToItem.keys(), orderMap })) setKeyToOrder(orderMap)
         else onOrderMapChange?.(keyToOrder)
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [orderMap, keyToOrder, onOrderMapChange])
 
     function onDragMoveStart(key: K, event: DragMoveEvent<HTMLDivElement>) {
@@ -512,6 +517,7 @@ export function DraggableGrid<T, K extends Key = T extends Key ? T : never>({
             }
             {...rest}
         >
+            {/* eslint-disable-next-line react-hooks/refs */}
             {Array.from(renderKeys).map(key => {
                 if (!keyToItem.has(key)) return undefined
                 const item = keyToItem.get(key)!

package/src/components/Echart.tsx

@@ -180,12 +180,14 @@ export function Echart<T extends ECBasicOption = ECBasicOption>({
         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
     }, [])
 
     useImperativeHandle(ref, () => container.current!)
 
     useImperativeHandle(chart, () => chartRef.current!)
 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     useEffect(() => chartRef.current?.setOption(option), [hash(option)])
 
     // @ts-expect-error width and height can be string

package/src/components/Flow.tsx

@@ -154,6 +154,7 @@ export function ManualFlow<T>(props: ManualFlowProps<T>) {
         return index >= maxRows * columnCount
     }
 
+    // eslint-disable-next-line react-hooks/exhaustive-deps, react-hooks/refs
     useImperativeHandle(element, () => ele.current!, [ele.current])
 
     useEffect(() => {
@@ -180,6 +181,7 @@ export function ManualFlow<T>(props: ManualFlowProps<T>) {
             itemCount: data.length,
             maxRows: maxRows ?? null,
         })
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [width, height, columnGapSize, columnCount, rowGap, contentShownRows, data.length, itemWidth, itemHeight, maxRows])
 
     return (
@@ -266,8 +268,12 @@ 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/InfiniteScroll.tsx

@@ -1,5 +1,7 @@
 "use client"
 
+/* eslint-disable no-restricted-syntax */
+
 import { ComponentPropsWithoutRef, CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from "react"
 
 import { css } from "@emotion/css"
@@ -58,6 +60,7 @@ export const InfiniteScroll = forwardRef<HTMLDivElement, InfiniteScrollProps>((p
 
     const ele = useRef<HTMLDivElement>(null)
 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     useImperativeHandle(ref, () => wrapper.current as HTMLDivElement, [wrapper.current])
 
     const container = useRef<HTMLDivElement>(null)
@@ -88,6 +91,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])
 
     function enter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {
@@ -102,6 +106,7 @@ export const InfiniteScroll = forwardRef<HTMLDivElement, InfiniteScrollProps>((p
 
     useEffect(() => {
         if (!pauseOnHover && animation.current?.playState === "paused") animation.current?.play()
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [animation.current, pauseOnHover])
 
     return (

package/src/components/InputFile.tsx

@@ -1,5 +1,7 @@
 "use client"
 
+/* eslint-disable no-restricted-syntax */
+
 import { ChangeEvent, ComponentProps, ReactNode, useState } from "react"
 
 export interface InputFileDataTypeMap {
@@ -12,30 +14,43 @@ export interface InputFileDataTypeMap {
 
 export type InputFileDataType = keyof InputFileDataTypeMap
 
-export async function getFileData<T extends InputFileDataType>(file: File, type: T): Promise<InputFileDataTypeMap[T]> {
-    const fileReader = new FileReader()
+export function getFileData<T extends InputFileDataType>(file: File, type: T): Promise<InputFileDataTypeMap[T]> {
+    if (type === "file") return Promise.resolve(file as InputFileDataTypeMap[T])
 
-    switch (type) {
-        case "arrayBuffer":
-            fileReader.readAsArrayBuffer(file)
-            break
-        case "binary":
-            fileReader.readAsBinaryString(file)
-            break
-        case "base64":
-            fileReader.readAsDataURL(file)
-            break
-        case "text":
-            fileReader.readAsText(file)
-            break
-        default:
-            return file as any
-    }
+    const fileReader = new FileReader()
 
-    return new Promise(resolve => {
+    return new Promise((resolve, reject) => {
         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"))
+        })
+
+        try {
+            switch (type) {
+                case "arrayBuffer":
+                    fileReader.readAsArrayBuffer(file)
+                    break
+                case "binary":
+                    // eslint-disable-next-line @typescript-eslint/no-deprecated
+                    fileReader.readAsBinaryString(file)
+                    break
+                case "base64":
+                    fileReader.readAsDataURL(file)
+                    break
+                case "text":
+                    fileReader.readAsText(file)
+                    break
+                default:
+                    resolve(file as any)
+            }
+        } catch (error) {
+            reject(error)
+        }
     })
 }
 

package/src/components/InputFileButton.tsx

@@ -1,5 +1,7 @@
 "use client"
 
+/* eslint-disable no-restricted-syntax */
+
 import {
     ComponentProps,
     ComponentRef,
@@ -66,17 +68,20 @@ export function InputFileButton<
     const { ref, style, disabled: __disabled, ...restInputProps } = inputProps
     const [disabled, setDisabled] = useState(false)
     const input = useRef<HTMLInputElement>(null)
+    const isDisabled = disabled || _disabled || __disabled
 
+    // eslint-disable-next-line react-hooks/exhaustive-deps, react-hooks/refs
     useImperativeHandle(ref, () => input.current!, [input.current])
 
     function onClick(e: ReactMouseEvent<ComponentRef<AS>, MouseEvent>) {
-        input.current?.click()
         _onClick?.(e as any)
+        if (isDisabled || e.defaultPrevented) return
+        input.current?.click()
     }
 
     async function onDrop(e: DragEvent<ComponentRef<AS>>) {
         _onDrop?.(e as any)
-        if (disabled || !dragFile) return
+        if (isDisabled || !dragFile) return
         e.preventDefault()
         const { files } = e.dataTransfer
         if (!files || files.length === 0) return
@@ -110,15 +115,16 @@ export function InputFileButton<
 
     function onDragOver(e: DragEvent<ComponentRef<AS>>) {
         _onDragOver?.(e as any)
-        if (disabled || !dragFile) return
+        if (isDisabled || !dragFile) return
         e.preventDefault()
     }
 
+    /* eslint-disable react-hooks/refs */
     return (
         <Fragment>
             <InputFile<Multiple, Type>
                 ref={input}
-                disabled={disabled || _disabled || __disabled}
+                disabled={isDisabled}
                 style={{ display: "none", ...style }}
                 multiple={multiple}
                 accept={accept}
@@ -130,7 +136,8 @@ export function InputFileButton<
                 {...restInputProps}
             />
             {createElement(as, {
-                disabled: disabled || _disabled,
+                disabled: isDisabled,
+                type: "button",
                 onClick,
                 onDrop,
                 onDragOver,
@@ -138,4 +145,5 @@ export function InputFileButton<
             })}
         </Fragment>
     )
+    /* eslint-enable react-hooks/refs */
 }

package/src/components/LoopSwiper.tsx

@@ -39,6 +39,7 @@ export const LoopSwiper: FC<LoopSwiperProps> = ({
     const container = useRef<HTMLDivElement>(null)
     const [swiper, setSwiper] = useState(false)
     const directionRef = useRef(direction)
+    // eslint-disable-next-line react-hooks/refs
     directionRef.current = direction
     const flexDirection: CSSProperties["flexDirection"] = direction === "vertical" ? (reverse ? "column-reverse" : "column") : reverse ? "row-reverse" : "row"
     const animationName = swiper

package/src/components/Scroll.tsx

@@ -49,6 +49,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
     }, [])
 
     useImperativeHandle(ref, () => ele.current!, [])

package/src/components/Title.tsx

@@ -15,10 +15,13 @@ export const Title: FC<ComponentProps<"title">> = ({ ref, children, ...rest }) =
 
     if (major >= 19) return <title ref={ref} {...rest} children={children} />
 
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const ele = useRef<HTMLTitleElement>(null)
 
+    // eslint-disable-next-line react-hooks/rules-of-hooks, react-hooks/exhaustive-deps, react-hooks/refs
     useImperativeHandle(ref, () => ele.current as HTMLTitleElement, [ele.current])
 
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     useLayoutEffect(() => {
         const title = document.head.querySelector("title")
         if (title === ele.current) return

package/src/components/Unify.tsx

@@ -1,5 +1,7 @@
 "use client"
 
+/* eslint-disable no-restricted-syntax */
+
 import { ComponentProps, createContext, createElement, CSSProperties, FC, JSX, JSXElementConstructor, ReactNode, useContext } from "react"
 
 import { clsx } from "deepsea-tools"

package/src/components/WriteSheet.tsx

@@ -1,5 +1,7 @@
 "use client"
 
+/* eslint-disable no-restricted-syntax */
+
 import { ComponentProps, createElement, JSX, JSXElementConstructor, MouseEvent as ReactMouseEvent } from "react"
 
 import { writeSheet, WriteSheetParams } from "deepsea-tools"

package/src/components/rtspPlayer/reader.ts

@@ -1,3 +1,5 @@
+/* eslint-disable no-restricted-syntax */
+
 /*
  * Derived from MediaMTX reader.js:
  * https://github.com/bluenviron/mediamtx/blob/main/internal/servers/webrtc/reader.js

package/tsconfig.json

@@ -7,6 +7,11 @@
         "target": "ESNext",
         "module": "ESNext",
         "moduleResolution": "Bundler",
+        "types": [
+            "node",
+            "react",
+            "react-dom"
+        ],
         "paths": {
             "@/*": [
                 "./src/*"