deepsea-components 2.8.5 → 3.0.1

package/src/components/InputFile.tsx

@@ -0,0 +1,193 @@
+"use client"
+
+import { ButtonHTMLAttributes, ChangeEvent, Fragment, InputHTMLAttributes, MouseEvent as ReactMouseEvent, forwardRef, useRef, useState } from "react"
+import { read, utils, writeFile } from "xlsx"
+
+export interface InputFileDataTypes {
+    base64: string
+    text: string
+    arrayBuffer: ArrayBuffer
+    binary: string
+    file: File
+}
+
+export type InputFileDataType = keyof InputFileDataTypes
+
+export interface InputFileData<T> {
+    result: T
+    file: File
+}
+
+export type InputFileProps = (
+    | {
+          multiple?: false
+          type: "base64" | "text" | "binary"
+          onChange?: (data: InputFileData<string>) => void
+      }
+    | {
+          multiple?: false
+          type: "arrayBuffer"
+          onChange?: (data: InputFileData<ArrayBuffer>) => void
+      }
+    | {
+          multiple?: false
+          type?: "file"
+          onChange?: (data: InputFileData<File>) => void
+      }
+    | {
+          multiple: true
+          type: "base64" | "text" | "binary"
+          onChange?: (data: InputFileData<string>[]) => void
+      }
+    | {
+          multiple: true
+          type: "arrayBuffer"
+          onChange?: (data: InputFileData<ArrayBuffer>[]) => void
+      }
+    | {
+          multiple: true
+          type?: "file"
+          onChange?: (data: InputFileData<File>[]) => void
+      }
+) &
+    Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "multiple" | "type"> & {
+        /** 是否在捕获文件后清除 input 上的文件，默认为 false，主要区别在于如果不清除，连续两次选择同样的文件不会触发 onChange 事件，如果用于 form 表单，请设置为 flase */
+        clearAfterChange?: boolean
+    }
+
+export async function getFileData<T extends InputFileDataType>(file: File, type: T): Promise<InputFileDataTypes[T]> {
+    const fileReader = new FileReader()
+    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
+    }
+    return new Promise(resolve => {
+        fileReader.addEventListener("load", () => {
+            resolve(fileReader.result as any)
+        })
+    })
+}
+
+/** 专用于读取文件的组件 */
+export const InputFile = forwardRef<HTMLInputElement, InputFileProps>((props, ref) => {
+    const { multiple = false, type = "file", onChange, disabled: inputDisabled, clearAfterChange, ...rest } = props
+    const [disabled, setDisabled] = useState(false)
+
+    async function onInputChange(e: ChangeEvent<HTMLInputElement>) {
+        const input = e.target
+        const { files } = input
+        if (!files || files.length === 0) return
+        setDisabled(true)
+        try {
+            if (multiple) {
+                const result: any[] = []
+                for (const file of Array.from(files)) {
+                    result.push({
+                        result: await getFileData(file, type),
+                        file
+                    })
+                }
+                onChange?.(result as any)
+            } else {
+                onChange?.({
+                    result: await getFileData(files[0], type),
+                    file: files[0]
+                } as any)
+            }
+            setDisabled(false)
+            if (clearAfterChange) input.value = ""
+        } catch (error) {
+            setDisabled(false)
+            if (clearAfterChange) input.value = ""
+            throw error
+        }
+    }
+
+    return <input ref={ref} disabled={disabled || inputDisabled} type="file" multiple={multiple} onChange={onInputChange} {...rest} />
+})
+
+export type InputFileButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    input: InputFileProps
+}
+
+/** 专用于读取文件的 button 组件 */
+export const InputFileButton = forwardRef<HTMLButtonElement, InputFileButtonProps>((props, ref) => {
+    const { onClick, input: inputProps, ...rest } = props
+    const { style, ...restInputProps } = inputProps
+    const input = useRef<HTMLInputElement>(null)
+
+    function onBtnClick(e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) {
+        input.current?.click()
+        onClick?.(e)
+    }
+
+    return (
+        <Fragment>
+            <InputFile ref={input} style={{ display: "none", ...style }} {...restInputProps} />
+            <button ref={ref} type="button" onClick={onBtnClick} {...rest} />
+        </Fragment>
+    )
+})
+
+export interface ImportExcelProps extends Omit<InputFileProps, "multiple" | "onChange" | "accept" | "type"> {
+    onChange?: (data: Record<string, string>[]) => void
+}
+
+/** 专门用于读取 excel 的组件 */
+export const ImportExcel = forwardRef<HTMLInputElement, ImportExcelProps>((props, ref) => {
+    const { onChange, ...rest } = props
+
+    function onInputChange(data: InputFileData<ArrayBuffer>) {
+        const wb = read(data.result)
+        const result = utils.sheet_to_json<any>(wb.Sheets[wb.SheetNames[0]])
+        if (typeof result === "object") {
+            const $ = result.map(it => {
+                const _: Record<string, string> = {}
+                Object.keys(it)
+                    .filter(key => key !== "__rowNum__")
+                    .forEach(key => (_[key] = String(it[key])))
+                return _
+            })
+            onChange?.($)
+        }
+    }
+
+    return <InputFile ref={ref} accept=".xlsx" type="arrayBuffer" onChange={onInputChange} {...rest} />
+})
+
+/** 手动导出 excel */
+export function exportExcel(data: Record<string, string>[], name: string) {
+    const workSheet = utils.json_to_sheet(data)
+    const workBook = utils.book_new()
+    utils.book_append_sheet(workBook, workSheet)
+    writeFile(workBook, `${name}${name.endsWith(".xlsx") ? "" : ".xlsx"}`)
+}
+
+export interface ExportExcelProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    data: Record<string, string>[]
+    fileName: string
+}
+
+/** 导出 excel 的 button 组件 */
+export const ExportExcel = forwardRef<HTMLButtonElement, ExportExcelProps>((props, ref) => {
+    const { data, fileName, onClick, ...rest } = props
+
+    function onButtonClick(e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) {
+        exportExcel(data, fileName)
+        onClick?.(e)
+    }
+
+    return <button ref={ref} onClick={onButtonClick} {...rest} />
+})

package/src/components/LoopSwiper.tsx

@@ -0,0 +1,101 @@
+"use client"
+
+import { css } from "@emotion/css"
+import { clsx } from "deepsea-tools"
+import { CSSProperties, forwardRef, HTMLAttributes, 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/Ring.tsx

@@ -0,0 +1,19 @@
+"use client"
+
+import { forwardRef, HTMLAttributes } 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} />
+})

package/src/components/Scroll.tsx

@@ -1,4 +1,5 @@
 "use client"
+
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
 import { CSSProperties, ForwardedRef, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react"

package/src/components/SectionRing.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+import { DrawArcOptions, drawArc } from "deepsea-tools"
+import { FC, HTMLAttributes } from "react"
+
+export interface SectionRingProps extends HTMLAttributes<HTMLDivElement> {
+    outerRadius: number
+    innerRadius: number
+    count: number
+    angel: number
+}
+
+export const SectionRing: FC<SectionRingProps> = props => {
+    const { outerRadius: o, innerRadius: i, count: c, angel: a, style, ...rest } = props
+
+    const s = (Math.PI * 2) / c - a
+
+    function arc(radius: number, startAngle: number, endAngle: number, options: DrawArcOptions = {}) {
+        return drawArc(o, o, radius, startAngle, endAngle, options)
+    }
+
+    return (
+        <div
+            style={{
+                ...style,
+                width: o * 2,
+                height: o * 2,
+                clipPath: `path("${Array(c)
+                    .fill(0)
+                    .map((it, idx) => `${arc(o, idx * (a + s), idx * (a + s) + a)} ${arc(i, idx * (a + s) + a, idx * (a + s), { line: true, anticlockwise: true })}`)
+                    .join(" ")} Z")`
+            }}
+            {...rest}
+        />
+    )
+}

package/src/components/Skeleton.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import { css } from "@emotion/css"
+import { clsx } from "deepsea-tools"
+import { forwardRef, HTMLAttributes } from "react"
+
+const Skeleton = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>((props, ref) => {
+    const { className, ...rest } = props
+
+    return (
+        <div
+            ref={ref}
+            className={clsx(
+                css`
+                    @keyframes shimmer {
+                        0% {
+                            background-position: -400px 0px;
+                        }
+                        100% {
+                            background-position: 400px 0px;
+                        }
+                    }
+
+                    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);
+                    animation-duration: 1s;
+                    animation-fill-mode: forwards;
+                    animation-iteration-count: infinite;
+                    animation-name: shimmer;
+                    animation-timing-function: linear;
+                    background-size: 800px 104px;
+                `,
+                className
+            )}
+            {...rest}
+        />
+    )
+})
+
+export default Skeleton

package/src/components/TransitionBox.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+import { useSize } from "ahooks"
+import { CSSProperties, FC, forwardRef, HTMLAttributes, useEffect, useRef, useState } from "react"
+
+export interface TransitionBoxProps extends HTMLAttributes<HTMLDivElement> {
+    containerClassName?: string
+    containerStyle?: CSSProperties
+    vertical?: boolean
+    horizontal?: boolean
+    time?: number
+}
+
+/** 尺寸渐变的组件 */
+export const TransitionBox: FC<TransitionBoxProps> = forwardRef<HTMLDivElement, TransitionBoxProps>((props, ref) => {
+    const { style, containerClassName, containerStyle, children, vertical = true, horizontal = true, time = 3000, ...rest } = props
+    const container = useRef<HTMLDivElement>(null)
+    const size = useSize(container)
+    const width = size?.width ?? 0
+    const height = size?.height ?? 0
+    const [count, setCount] = useState(0)
+
+    useEffect(() => {
+        setCount(count => Math.min(count + 1, 3))
+    }, [width, height])
+
+    const outerStyle: CSSProperties = { transitionProperty: count === 3 ? [horizontal && "width", vertical && "height"].filter(Boolean).join(", ") : undefined, transitionDuration: count === 3 ? `${time}ms` : undefined, width, height, overflow: "hidden", position: "relative", ...style }
+
+    return (
+        <div ref={ref} style={outerStyle} {...rest}>
+            <div className={containerClassName} style={{ position: "absolute", ...containerStyle }} ref={container}>
+                {children}
+            </div>
+        </div>
+    )
+})

package/src/components/TransitionNum.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import { setFrameInterval } from "deepsea-tools"
+import { ForwardedRef, HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
+
+export interface TransitionNumProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** 当前数字 */
+    children: number
+    /** 变换周期，单位帧 */
+    period: number
+    /** 数字转换为字符串的方法 */
+    numToStr?: (num: number) => string
+    /** 实例 */
+    ins?: ForwardedRef<TransitionNumIns>
+}
+
+export interface TransitionNumIns {
+    get(): number
+}
+
+/** 渐变数字组件 */
+export const TransitionNum = forwardRef<HTMLDivElement, TransitionNumProps>((props, ref) => {
+    const { children: num, period, numToStr, ins, ...rest } = props
+    if (!Number.isInteger(num) || !Number.isInteger(period) || period <= 0) {
+        throw new RangeError("目标数字必须是整数，周期必须是正整数")
+    }
+    const ele = useRef<HTMLDivElement>(null)
+    const cache = useRef({ num, period, numToStr, show: num })
+    cache.current = { ...cache.current, num, period, numToStr }
+
+    useImperativeHandle(ref, () => ele.current!, [])
+    useImperativeHandle(ins, () => ({ get: () => cache.current.show }), [])
+
+    useEffect(() => {
+        const { num, period, show, numToStr } = cache.current
+        ele.current!.innerText = (numToStr || String)(show)
+        if (num === show) return
+        const div = ele.current!
+        const speed = (num - show) / period
+        const cancel = setFrameInterval(() => {
+            const { num, numToStr } = cache.current
+            cache.current.show += speed
+            if ((speed > 0 && cache.current.show > num) || (speed < 0 && cache.current.show < num)) {
+                cancel()
+                cache.current.show = num
+            }
+            div.innerText = (numToStr || String)(speed > 0 ? Math.floor(cache.current.show) : Math.ceil(cache.current.show))
+        }, 1)
+
+        return cancel
+    }, [num])
+
+    return <div ref={ele} {...rest} />
+})

package/src/components/Trapezium.tsx

@@ -0,0 +1,35 @@
+"use client"
+
+import { HTMLAttributes, forwardRef } from "react"
+
+export interface TrapeziumProps extends HTMLAttributes<HTMLDivElement> {
+    top: number
+    bottom: number
+    height: number
+    borderRadius: number
+}
+
+/** 梯形组件 */
+export const Trapezium = forwardRef<HTMLDivElement, TrapeziumProps>((props, ref) => {
+    const { top, bottom, height, borderRadius, style, ...rest } = props
+
+    const diff = (bottom - top) / 2
+
+    const a = Math.atan(height / diff) / 2
+
+    const b = borderRadius / Math.tan(a)
+
+    const c = b * Math.cos(a * 2)
+
+    const d = b * Math.sin(a * 2)
+
+    const e = Math.PI / 2 - a
+
+    const f = borderRadius / Math.tan(e)
+
+    const g = f * Math.cos(a * 2)
+
+    const h = f * Math.sin(a * 2)
+
+    return <div ref={ref} style={{ width: bottom, height, clipPath: `path("M ${diff + f} ${0}  A ${borderRadius} ${borderRadius} 0 0 0 ${diff - g} ${h} L ${c} ${height - d} A ${borderRadius} ${borderRadius} 0 0 0 ${b} ${height} L ${bottom - b} ${height} A ${borderRadius} ${borderRadius} 0 0 0 ${bottom - c} ${height - d} L ${top + diff + g} ${h} A ${borderRadius} ${borderRadius} 0 0 0 ${top + diff - f} ${0} Z")`, ...style }} {...rest} />
+})