deepsea-components 5.6.0 → 5.7.1

package/src/components/FormLabel.tsx

@@ -1,38 +1,38 @@
-import { css } from "@emotion/css"
-import { clsx } from "deepsea-tools"
-import { ComponentProps, FC, Fragment } from "react"
-
-export type FormLabelProps = ComponentProps<"div"> & {
-    /**
-     * Label 的宽度.
-     */
-    width: number
-    /**
-     * 是否在 Label 前面添加一个空白区域，只有当前 Label 为非必选，而存在其他 Label 为必选的时候开启
-     */
-    before?: boolean
-}
-
-/**
- * 为 Ant Design 的 FormItem 设计的 Label 组件
- */
-export const FormLabel: FC<FormLabelProps> = props => {
-    const { className, style, before, width, ...rest } = props
-
-    return (
-        <Fragment>
-            {!!before && <div style={{ width: 11 }}>&ensp;</div>}
-            <div
-                className={clsx(
-                    css`
-                        text-align: justify;
-                        text-align-last: justify;
-                    `,
-                    className
-                )}
-                style={{ width, ...style }}
-                {...rest}
-            />
-        </Fragment>
-    )
-}
+import { css } from "@emotion/css"
+import { clsx } from "deepsea-tools"
+import { ComponentProps, FC, Fragment } from "react"
+
+export type FormLabelProps = ComponentProps<"div"> & {
+    /**
+     * Label 的宽度.
+     */
+    width: number
+    /**
+     * 是否在 Label 前面添加一个空白区域，只有当前 Label 为非必选，而存在其他 Label 为必选的时候开启
+     */
+    before?: boolean
+}
+
+/**
+ * 为 Ant Design 的 FormItem 设计的 Label 组件
+ */
+export const FormLabel: FC<FormLabelProps> = props => {
+    const { className, style, before, width, ...rest } = props
+
+    return (
+        <Fragment>
+            {!!before && <div style={{ width: 11 }}>&ensp;</div>}
+            <div
+                className={clsx(
+                    css`
+                        text-align: justify;
+                        text-align-last: justify;
+                    `,
+                    className,
+                )}
+                style={{ width, ...style }}
+                {...rest}
+            />
+        </Fragment>
+    )
+}

package/src/components/HlsPlayer.tsx

@@ -1,34 +1,34 @@
-"use client"
-
-import Hls from "hls.js"
-import { MediaHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
-
-export interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, "src"> {
-    src: string
-}
-
-export const HlsPlayer = forwardRef<HTMLVideoElement, HlsPlayerProps>((props, ref) => {
-    const { src, ...rest } = props
-    const video = useRef<HTMLVideoElement>(null)
-
-    useImperativeHandle(ref, () => video.current!, [])
-
-    useEffect(() => {
-        const { current: player } = video
-        if (!player || !src) return
-        if (player.canPlayType("application/vnd.apple.mpegurl")) {
-            player.src = src
-            return
-        }
-        if (Hls.isSupported()) {
-            const hls = new Hls()
-            hls.loadSource(src)
-            hls.attachMedia(player)
-            return () => {
-                hls.destroy()
-            }
-        }
-    }, [src])
-
-    return <video ref={video} {...rest} />
-})
+"use client"
+
+import Hls from "hls.js"
+import { MediaHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
+
+export interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, "src"> {
+    src: string
+}
+
+export const HlsPlayer = forwardRef<HTMLVideoElement, HlsPlayerProps>((props, ref) => {
+    const { src, ...rest } = props
+    const video = useRef<HTMLVideoElement>(null)
+
+    useImperativeHandle(ref, () => video.current!, [])
+
+    useEffect(() => {
+        const { current: player } = video
+        if (!player || !src) return
+        if (player.canPlayType("application/vnd.apple.mpegurl")) {
+            player.src = src
+            return
+        }
+        if (Hls.isSupported()) {
+            const hls = new Hls()
+            hls.loadSource(src)
+            hls.attachMedia(player)
+            return () => {
+                hls.destroy()
+            }
+        }
+    }, [src])
+
+    return <video ref={video} {...rest} />
+})

package/src/components/InfiniteScroll.tsx

@@ -1,135 +1,161 @@
-import { css } from "@emotion/css"
-import { useSize } from "ahooks"
-import { clsx } from "deepsea-tools"
-import { ComponentProps, CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from "react"
-
-export type InfiniteScrollProps = ComponentProps<"div"> & {
-    /**
-     * 滚动的方向
-     * @default "vertical"
-     */
-    direction?: "vertical" | "horizontal"
-    /** 渲染 children 的容器的类名 */
-    containerClassName?: string
-    /** 渲染 children 的容器的样式 */
-    containerStyle?: CSSProperties
-    /**
-     * 两个 children 容器之间的间距
-     * @default 0
-     */
-    gap?: number
-    /** 一个周期的时间，单位：毫秒 */
-    duration: number
-    /** 是否将 gap 的距离也加入 overflow 的计算 */
-    withGap?: boolean
-    /** 尺寸刚好相同时，是否视为溢出 */
-    withEqual?: boolean
-    /** 鼠标移入时，是否停止动画 */
-    pauseOnHover?: boolean
-}
-
-/**
- * 无限滚动的组件
- * 子元素会内置的容器中被渲染两次，首尾相连，形成无限滚动的效果
- * 但是，如果内部检测到并没有溢出，那么不会渲染两次，并且没有动画
- */
-export const InfiniteScroll = forwardRef<HTMLDivElement, InfiniteScrollProps>((props, ref) => {
-    const { className, direction = "vertical", children, containerClassName, containerStyle, gap = 0, duration, withGap, withEqual, pauseOnHover, onMouseEnter, onMouseLeave, ...rest } = props
-
-    const wrapper = useRef<HTMLDivElement>(null)
-    const wrapperSize = useSize(wrapper)
-
-    const ele = useRef<HTMLDivElement>(null)
-
-    useImperativeHandle(ref, () => wrapper.current as HTMLDivElement, [wrapper.current])
-
-    const container = useRef<HTMLDivElement>(null)
-    const containerSize = useSize(container)
-
-    function bigger(containerSize: number, wrapperSize: number) {
-        return withEqual ? containerSize + (withGap ? gap : 0) >= wrapperSize : containerSize + (withGap ? gap : 0) > wrapperSize
-    }
-
-    const overflow = wrapperSize && containerSize ? (direction === "vertical" ? bigger(containerSize.height, wrapperSize.height) : bigger(containerSize.width, wrapperSize.width)) : false
-
-    const animation = useRef<Animation | undefined>(undefined)
-
-    useEffect(() => {
-        if (!wrapperSize || !containerSize || !overflow) return
-        animation.current = ele.current?.animate(
-            {
-                transform: direction === "vertical" ? [`translateY(0)`, `translateY(-${containerSize.height + gap}px)`] : [`translateX(0)`, `translateX(-${containerSize.width + gap}px)`]
-            },
-            { duration, iterations: Infinity }
-        )
-        return () => animation.current?.cancel()
-    }, [wrapperSize, containerSize, overflow, direction, duration])
-
-    function enter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {
-        if (pauseOnHover) animation.current?.pause()
-        onMouseEnter?.(e)
-    }
-
-    function leave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {
-        if (pauseOnHover) animation.current?.play()
-        onMouseLeave?.(e)
-    }
-
-    useEffect(() => {
-        if (!pauseOnHover && animation.current?.playState === "paused") animation.current?.play()
-    }, [animation.current, pauseOnHover])
-
-    return (
-        <div
-            ref={wrapper}
-            className={clsx(
-                css`
-                    position: relative;
-                    ${direction === "vertical" ? "overflow-y: hidden;" : "overflow-x: hidden;"}
-                `,
-                className
-            )}
-            onMouseEnter={enter}
-            onMouseLeave={leave}
-            {...rest}>
-            <div
-                ref={ele}
-                style={{
-                    position: "absolute",
-                    width: direction === "vertical" ? "100%" : containerSize && (overflow ? containerSize.width * 2 + gap : containerSize.width),
-                    height: direction === "horizontal" ? "100%" : containerSize && (overflow ? containerSize.height * 2 + gap : containerSize.width)
-                }}>
-                <div
-                    ref={container}
-                    className={clsx(
-                        css`
-                            position: absolute;
-                            left: 0;
-                            top: 0;
-                            ${direction === "vertical" ? "width: 100%;" : "height: 100%;"}
-                        `,
-                        containerClassName
-                    )}
-                    style={containerStyle}>
-                    {children}
-                </div>
-                {overflow && (
-                    <div
-                        ref={container}
-                        className={clsx(
-                            css`
-                                position: absolute;
-                                right: 0;
-                                bottom: 0;
-                                ${direction === "vertical" ? "width: 100%;" : "height: 100%;"}
-                            `,
-                            containerClassName
-                        )}
-                        style={containerStyle}>
-                        {children}
-                    </div>
-                )}
-            </div>
-        </div>
-    )
-})
+import { css } from "@emotion/css"
+import { useSize } from "ahooks"
+import { clsx } from "deepsea-tools"
+import { ComponentProps, CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from "react"
+
+export type InfiniteScrollProps = ComponentProps<"div"> & {
+    /**
+     * 滚动的方向
+     * @default "vertical"
+     */
+    direction?: "vertical" | "horizontal"
+    /** 渲染 children 的容器的类名 */
+    containerClassName?: string
+    /** 渲染 children 的容器的样式 */
+    containerStyle?: CSSProperties
+    /**
+     * 两个 children 容器之间的间距
+     * @default 0
+     */
+    gap?: number
+    /** 一个周期的时间，单位：毫秒 */
+    duration: number
+    /** 是否将 gap 的距离也加入 overflow 的计算 */
+    withGap?: boolean
+    /** 尺寸刚好相同时，是否视为溢出 */
+    withEqual?: boolean
+    /** 鼠标移入时，是否停止动画 */
+    pauseOnHover?: boolean
+}
+
+/**
+ * 无限滚动的组件
+ * 子元素会内置的容器中被渲染两次，首尾相连，形成无限滚动的效果
+ * 但是，如果内部检测到并没有溢出，那么不会渲染两次，并且没有动画
+ */
+export const InfiniteScroll = forwardRef<HTMLDivElement, InfiniteScrollProps>((props, ref) => {
+    const {
+        className,
+        direction = "vertical",
+        children,
+        containerClassName,
+        containerStyle,
+        gap = 0,
+        duration,
+        withGap,
+        withEqual,
+        pauseOnHover,
+        onMouseEnter,
+        onMouseLeave,
+        ...rest
+    } = props
+
+    const wrapper = useRef<HTMLDivElement>(null)
+    const wrapperSize = useSize(wrapper)
+
+    const ele = useRef<HTMLDivElement>(null)
+
+    useImperativeHandle(ref, () => wrapper.current as HTMLDivElement, [wrapper.current])
+
+    const container = useRef<HTMLDivElement>(null)
+    const containerSize = useSize(container)
+
+    function bigger(containerSize: number, wrapperSize: number) {
+        return withEqual ? containerSize + (withGap ? gap : 0) >= wrapperSize : containerSize + (withGap ? gap : 0) > wrapperSize
+    }
+
+    const overflow =
+        wrapperSize && containerSize
+            ? direction === "vertical"
+                ? bigger(containerSize.height, wrapperSize.height)
+                : bigger(containerSize.width, wrapperSize.width)
+            : false
+
+    const animation = useRef<Animation | undefined>(undefined)
+
+    useEffect(() => {
+        if (!wrapperSize || !containerSize || !overflow) return
+        animation.current = ele.current?.animate(
+            {
+                transform:
+                    direction === "vertical"
+                        ? [`translateY(0)`, `translateY(-${containerSize.height + gap}px)`]
+                        : [`translateX(0)`, `translateX(-${containerSize.width + gap}px)`],
+            },
+            { duration, iterations: Infinity },
+        )
+        return () => animation.current?.cancel()
+    }, [wrapperSize, containerSize, overflow, direction, duration])
+
+    function enter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {
+        if (pauseOnHover) animation.current?.pause()
+        onMouseEnter?.(e)
+    }
+
+    function leave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {
+        if (pauseOnHover) animation.current?.play()
+        onMouseLeave?.(e)
+    }
+
+    useEffect(() => {
+        if (!pauseOnHover && animation.current?.playState === "paused") animation.current?.play()
+    }, [animation.current, pauseOnHover])
+
+    return (
+        <div
+            ref={wrapper}
+            className={clsx(
+                css`
+                    position: relative;
+                    ${direction === "vertical" ? "overflow-y: hidden;" : "overflow-x: hidden;"}
+                `,
+                className,
+            )}
+            onMouseEnter={enter}
+            onMouseLeave={leave}
+            {...rest}
+        >
+            <div
+                ref={ele}
+                style={{
+                    position: "absolute",
+                    width: direction === "vertical" ? "100%" : containerSize && (overflow ? containerSize.width * 2 + gap : containerSize.width),
+                    height: direction === "horizontal" ? "100%" : containerSize && (overflow ? containerSize.height * 2 + gap : containerSize.width),
+                }}
+            >
+                <div
+                    ref={container}
+                    className={clsx(
+                        css`
+                            position: absolute;
+                            left: 0;
+                            top: 0;
+                            ${direction === "vertical" ? "width: 100%;" : "height: 100%;"}
+                        `,
+                        containerClassName,
+                    )}
+                    style={containerStyle}
+                >
+                    {children}
+                </div>
+                {overflow && (
+                    <div
+                        ref={container}
+                        className={clsx(
+                            css`
+                                position: absolute;
+                                right: 0;
+                                bottom: 0;
+                                ${direction === "vertical" ? "width: 100%;" : "height: 100%;"}
+                            `,
+                            containerClassName,
+                        )}
+                        style={containerStyle}
+                    >
+                        {children}
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+})