deepsea-components 5.18.4 → 5.18.6

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,7 +58,9 @@ 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/ScrollMask.module.css

@@ -1,87 +1,87 @@
-.scroll-mask {
-    position: sticky;
-    z-index: 10;
-    pointer-events: none;
-}
-
-.top-scroll-mask {
-    width: 100%;
-    height: 0;
-    top: 0;
-    right: 0;
-    bottom: 100%;
-    left: 0;
-}
-
-.scroll-mask-content {
-    position: absolute;
-    background-image: linear-gradient(
-        to var(--scroll-mask-direction),
-        var(--scroll-mask-color-from, rgba(0, 0, 0, 0.1)),
-        var(--scroll-mask-color-to, rgba(0, 0, 0, 0))
-    );
-    clip-path: var(--scroll-mask-clip-path, none);
-}
-
-.top-scroll-mask-content {
-    width: 100%;
-    height: var(--scroll-mask-size, 8px);
-    top: 0;
-    right: 50%;
-    transform: translateX(50%);
-    --scroll-mask-direction: bottom;
-}
-
-.bottom-scroll-mask {
-    width: 100%;
-    height: 0;
-    top: 100%;
-    right: 0;
-    bottom: 0;
-    left: 0;
-}
-
-.bottom-scroll-mask-content {
-    width: 100%;
-    height: var(--scroll-mask-size, 8px);
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    --scroll-mask-direction: top;
-}
-
-.left-scroll-mask {
-    width: 0;
-    height: 100%;
-    top: 0;
-    right: 100%;
-    bottom: 0;
-    left: 0;
-}
-
-.left-scroll-mask-content {
-    width: var(--scroll-mask-size, 8px);
-    height: 100%;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    --scroll-mask-direction: right;
-}
-
-.right-scroll-mask {
-    width: 0;
-    height: 100%;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 100%;
-}
-
-.right-scroll-mask-content {
-    width: var(--scroll-mask-size, 8px);
-    height: 100%;
-    right: 0;
-    bottom: 50%;
-    transform: translateY(50%);
-    --scroll-mask-direction: left;
-}
+.scroll-mask {
+    position: sticky;
+    z-index: 10;
+    pointer-events: none;
+}
+
+.top-scroll-mask {
+    width: 100%;
+    height: 0;
+    top: 0;
+    right: 0;
+    bottom: 100%;
+    left: 0;
+}
+
+.scroll-mask-content {
+    position: absolute;
+    background-image: linear-gradient(
+        to var(--scroll-mask-direction),
+        var(--scroll-mask-color-from, rgba(0, 0, 0, 0.1)),
+        var(--scroll-mask-color-to, rgba(0, 0, 0, 0))
+    );
+    clip-path: var(--scroll-mask-clip-path, none);
+}
+
+.top-scroll-mask-content {
+    width: 100%;
+    height: var(--scroll-mask-size, 8px);
+    top: 0;
+    right: 50%;
+    transform: translateX(50%);
+    --scroll-mask-direction: bottom;
+}
+
+.bottom-scroll-mask {
+    width: 100%;
+    height: 0;
+    top: 100%;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.bottom-scroll-mask-content {
+    width: 100%;
+    height: var(--scroll-mask-size, 8px);
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    --scroll-mask-direction: top;
+}
+
+.left-scroll-mask {
+    width: 0;
+    height: 100%;
+    top: 0;
+    right: 100%;
+    bottom: 0;
+    left: 0;
+}
+
+.left-scroll-mask-content {
+    width: var(--scroll-mask-size, 8px);
+    height: 100%;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    --scroll-mask-direction: right;
+}
+
+.right-scroll-mask {
+    width: 0;
+    height: 100%;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 100%;
+}
+
+.right-scroll-mask-content {
+    width: var(--scroll-mask-size, 8px);
+    height: 100%;
+    right: 0;
+    bottom: 50%;
+    transform: translateY(50%);
+    --scroll-mask-direction: left;
+}

package/src/components/ScrollMask.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps, CSSProperties, FC, useRef } from "react"
+import { type ComponentProps, type CSSProperties, type FC, useRef } from "react"
 
 import { clsx, isNonNullable } from "deepsea-tools"
 import { useSize } from "soda-hooks"

package/src/components/SectionRing.tsx

@@ -1,8 +1,8 @@
 "use client"
 
-import { forwardRef, HTMLAttributes } from "react"
+import { type HTMLAttributes, forwardRef } from "react"
 
-import { drawArc, DrawArcOptions } from "deepsea-tools"
+import { type DrawArcOptions, drawArc } from "deepsea-tools"
 
 export interface SectionRingProps extends HTMLAttributes<HTMLDivElement> {
     outerRadius: number

package/src/components/Skeleton.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { forwardRef, HTMLAttributes } from "react"
+import { type HTMLAttributes, forwardRef } from "react"
 
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"

package/src/components/Title.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { ComponentProps, FC, useImperativeHandle, useLayoutEffect, useRef } from "react"
+import { type ComponentProps, type FC, useImperativeHandle, useLayoutEffect, useRef } from "react"
 import { createPortal } from "react-dom"
 import { renderToString } from "react-dom/server"
 
@@ -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/TransitionBox.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { CSSProperties, FC, forwardRef, HTMLAttributes, useEffect, useRef, useState } from "react"
+import { type CSSProperties, type FC, type HTMLAttributes, forwardRef, useEffect, useRef, useState } from "react"
 
 import { useSize } from "soda-hooks"
 

package/src/components/TransitionNum.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { ForwardedRef, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useRef } from "react"
+import { type ForwardedRef, type HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
 
 import { setFrameInterval } from "deepsea-tools"
 

package/src/components/Trapezium.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { forwardRef, HTMLAttributes } from "react"
+import { type HTMLAttributes, forwardRef } from "react"
 
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"

package/src/components/Unify.tsx

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

package/src/components/WriteExcel.tsx

@@ -1,13 +1,13 @@
-"use client"
-
-import { WriteSheet, WriteSheetProps } from "./WriteSheet"
-
-/**
- * @deprecated 请使用 WriteSheetProps 代替
- */
-export type WriteExcelProps = WriteSheetProps
-
-/**
- * @deprecated 请使用 WriteSheet 代替
- */
-export const WriteExcel = WriteSheet
+"use client"
+
+import { type WriteSheetProps, WriteSheet } from "./WriteSheet"
+
+/**
+ * @deprecated 请使用 WriteSheetProps 代替
+ */
+export type WriteExcelProps = WriteSheetProps
+
+/**
+ * @deprecated 请使用 WriteSheet 代替
+ */
+export const WriteExcel = WriteSheet

package/src/components/WriteSheet.tsx

@@ -1,8 +1,10 @@
 "use client"
 
-import { ComponentProps, createElement, JSX, JSXElementConstructor, MouseEvent as ReactMouseEvent } from "react"
+/* eslint-disable no-restricted-syntax */
 
-import { writeSheet, WriteSheetParams } from "deepsea-tools"
+import { type ComponentProps, type JSX, type JSXElementConstructor, type MouseEvent as ReactMouseEvent, createElement } from "react"
+
+import { type WriteSheetParams, writeSheet } from "deepsea-tools"
 
 export type WriteSheetProps<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "button"> = Omit<ComponentProps<AS>, "as" | "excel"> & {
     as?: AS

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
@@ -84,12 +86,14 @@ export class MediaMTXWebRTCReader {
             let payloadType = ""
 
             pc.addTransceiver(mediaType, { direction: "recvonly" })
+
             pc.createOffer()
                 .then(offer => {
                     if (offer.sdp === undefined) throw new Error("SDP not present")
                     if (offer.sdp.includes(` ${codec}`)) throw new Error("already present")
 
                     const sections = offer.sdp.split(`m=${mediaType}`)
+
                     const payloadTypes = sections
                         .slice(1)
                         .map(section => section.split("\r\n")[0].split(" ").slice(3))
@@ -126,8 +130,7 @@ export class MediaMTXWebRTCReader {
                                 `a=rtpmap:${payloadType} ${codec}\r\n` +
                                 (fmtp !== undefined ? `a=fmtp:${payloadType} ${fmtp}\r\n` : ""),
                         }),
-                    ),
-                )
+                    ))
                 .then(() => resolve(true))
                 .catch(() => resolve(false))
                 .finally(() => pc.close())
@@ -294,6 +297,7 @@ export class MediaMTXWebRTCReader {
 
     private static editOffer(sdp: string, nonAdvertisedCodecs: string[]) {
         const sections = sdp.split("m=")
+
         const payloadTypes = sections
             .slice(1)
             .map(section => section.split("\r\n")[0].split(" ").slice(3))
@@ -371,16 +375,11 @@ export class MediaMTXWebRTCReader {
 
     private getNonAdvertisedCodecs() {
         Promise.all(
-            [
-                ["pcma/8000/2"],
-                ["multiopus/48000/6", "channel_mapping=0,4,1,2,3,5;num_streams=4;coupled_streams=2"],
-                ["L16/48000/2"],
-            ].map(codec =>
+            [["pcma/8000/2"], ["multiopus/48000/6", "channel_mapping=0,4,1,2,3,5;num_streams=4;coupled_streams=2"], ["L16/48000/2"]].map(codec =>
                 MediaMTXWebRTCReader.supportsNonAdvertisedCodec(codec[0], codec[1]).then(isSupported => {
                     if (!isSupported) return false
                     return codec[0]
-                }),
-            ),
+                })),
         )
             .then(codecs => codecs.filter((codec): codec is string => codec !== false))
             .then(codecs => {

package/src/utils/getReactVersion.ts

@@ -1,7 +1,7 @@
-import { version } from "react"
-
-const reg = /(\d+)\.(\d+)\.(\d+)/
-
-export function getReactVersion() {
-    return version.match(reg)!.slice(1).map(Number)
-}
+import { version } from "react"
+
+const reg = /(\d+)\.(\d+)\.(\d+)/
+
+export function getReactVersion() {
+    return version.match(reg)!.slice(1).map(Number)
+}

package/src/utils/index.ts

@@ -1,33 +1,33 @@
-import { CSSProperties } from "react"
-
-export type CSSVariableName = `--${string}`
-
-export type CSSVariableValue = string | number | undefined
-
-export interface StyleWithCSSVariable extends CSSProperties {
-    [X: CSSVariableName]: CSSVariableValue
-}
-
-const cssVariableReg = /[A-Z]/
-
-function addCSSVariableLine(match: string): string {
-    return `-${match}`
-}
-
-export function transformCSSVariableName(name: string): CSSVariableName {
-    return `--${name.replace(cssVariableReg, addCSSVariableLine).toLowerCase()}`
-}
-
-export function transformCSSVariable(style: Partial<Record<string, CSSVariableValue>>, style2?: CSSProperties): CSSProperties {
-    return Object.assign(
-        Object.entries(style).reduce((acc: StyleWithCSSVariable, [key, value]) => {
-            acc[transformCSSVariableName(key)] = value
-            return acc
-        }, {}),
-        style2,
-    )
-}
-
-export function px(value: string | number | undefined): string | undefined {
-    return typeof value === "number" ? `${value}px` : value
-}
+import type { CSSProperties } from "react"
+
+export type CSSVariableName = `--${string}`
+
+export type CSSVariableValue = string | number | undefined
+
+export interface StyleWithCSSVariable extends CSSProperties {
+    [X: CSSVariableName]: CSSVariableValue
+}
+
+const cssVariableReg = /[A-Z]/
+
+function addCSSVariableLine(match: string): string {
+    return `-${match}`
+}
+
+export function transformCSSVariableName(name: string): CSSVariableName {
+    return `--${name.replace(cssVariableReg, addCSSVariableLine).toLowerCase()}`
+}
+
+export function transformCSSVariable(style: Partial<Record<string, CSSVariableValue>>, style2?: CSSProperties): CSSProperties {
+    return Object.assign(
+        Object.entries(style).reduce((acc: StyleWithCSSVariable, [key, value]) => {
+            acc[transformCSSVariableName(key)] = value
+            return acc
+        }, {}),
+        style2,
+    )
+}
+
+export function px(value: string | number | undefined): string | undefined {
+    return typeof value === "number" ? `${value}px` : value
+}

package/tsconfig.json

@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "rootDir": "src",
         "strict": true,
         "declaration": true,
         "skipLibCheck": true,
@@ -7,14 +8,11 @@
         "target": "ESNext",
         "module": "ESNext",
         "moduleResolution": "Bundler",
+        "types": ["node", "react", "react-dom"],
+        "verbatimModuleSyntax": true,
         "paths": {
-            "@/*": [
-                "./src/*"
-            ]
+            "@/*": ["./src/*"]
         }
     },
-    "include": [
-        "src",
-        "types.d.ts"
-    ]
-}
+    "include": ["src", "types.d.ts"]
+}