deepsea-components 5.16.2 → 5.16.4

package/dist/components/DraggableGrid.cjs

@@ -83,10 +83,10 @@ function getOrderToKey(keyToOrder) {
             key
         ]));
 }
-const DraggableGridItem = ({ onDragMoveStart, onDragMove, onDragMoveEnd, ...rest })=>{
+function DraggableGridItem({ item, itemKey, handle, onDragMoveStart, onDragMove, onDragMoveEnd, ...rest }) {
     const element = (0, external_react_namespaceObject.useRef)(null);
     (0, external_soda_hooks_namespaceObject.useDragMove)({
-        element,
+        element: (0, external_deepsea_tools_namespaceObject.isNullable)(handle) ? element : ()=>element.current && ("string" == typeof handle ? element.current.querySelector(handle) : "function" == typeof handle ? handle(item, itemKey, element.current) : handle),
         onDragMoveStart,
         onDragMove,
         onDragMoveEnd
@@ -95,8 +95,8 @@ const DraggableGridItem = ({ onDragMoveStart, onDragMove, onDragMoveEnd, ...rest
         ref: element,
         ...rest
     });
-};
-function DraggableGrid({ className, classNames, style, items = [], disabled, columns, rows, gap = 0, gapX = gap, gapY = gap, itemWidth, itemHeight, orderMap, onOrderMapChange, render, keyExtractor, isItemDisabled: _isItemDisabled, isOrderDisabled, orderPriority, ...rest }) {
+}
+function DraggableGrid({ className, classNames, style, items = [], disabled, columns, rows, gap = 0, gapX = gap, gapY = gap, itemWidth, itemHeight, orderMap, onOrderMapChange, render, keyExtractor, isItemDisabled: _isItemDisabled, isOrderDisabled, orderPriority, handle, onDragMoveStart: _onDragMoveStart, onDragMove: _onDragMove, onDragMoveEnd: _onDragMoveEnd, ...rest }) {
     const keyToItem = (0, external_react_namespaceObject.useMemo)(()=>{
         const keyToItem = new Map();
         items.forEach((item)=>{
@@ -190,6 +190,7 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
         onOrderMapChange
     ]);
     function onDragMoveStart(key, event) {
+        _onDragMoveStart?.(event);
         const position = getPosition({
             order: keyToOrder.get(key),
             columns,
@@ -216,6 +217,7 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
         });
     }
     function onDragMove(event) {
+        _onDragMove?.(event);
         if (!dragging) return;
         const { deltaX, deltaY } = event;
         const { key, orders, keyToOrder, startX, startY, columns, gapX, gapY, itemWidth, itemHeight } = dragging;
@@ -281,7 +283,8 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
         setKeyToOrder(newKeyToOrder);
         onOrderMapChange?.(newKeyToOrder);
     }
-    function onDragMoveEnd() {
+    function onDragMoveEnd(event) {
+        _onDragMoveEnd?.(event);
         if (!dragging) return;
         setDragging(void 0);
     }
@@ -336,6 +339,9 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
                 isDragging: isDragging
             }) : item;
             return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DraggableGridItem, {
+                item: item,
+                itemKey: key,
+                handle: handle,
                 className: (0, external_deepsea_tools_namespaceObject.clsx)(external_DraggableGrid_module_cjs_default().draggableGridItem, "function" == typeof classNames?.item ? classNames.item({
                     order,
                     isDragging: isDragging

package/dist/components/DraggableGrid.d.ts

@@ -1,4 +1,7 @@
 import { CSSProperties, ComponentProps, Key, ReactNode } from "react";
+import { DragMoveEvents } from "soda-hooks";
+export type MustBeReactNode<T> = false extends (T extends ReactNode ? true : false) ? false : true;
+export type MustBeReactKey<T> = false extends (T extends Key ? true : false) ? false : true;
 export type DraggableGridClassName = string | ((status: ContainerStatus) => string);
 export type DraggableGridItemClassName = string | ((status: DraggableGridItemStatus) => string);
 export type DraggableGridStyle = CSSProperties | ((status: ContainerStatus) => CSSProperties);
@@ -19,10 +22,10 @@ export interface DraggableGridItemStatus {
     isDragging: boolean;
 }
 /** 元素的 key 到次序的映射 */
-export type DraggableGridKeyToOrder = Map<Key, number>;
+export type DraggableGridKeyToOrder<K extends Key> = Map<K, number>;
 /** 次序到元素的 key 的映射 */
-export type DraggableGridOrderToKey = Map<number, Key>;
-export type DraggableGridProps<T> = Omit<ComponentProps<"div">, "className" | "children"> & {
+export type DraggableGridOrderToKey<K extends Key> = Map<number, K>;
+export type DraggableGridProps<T, K extends Key = T extends Key ? T : never> = Omit<ComponentProps<"div">, "className" | "children"> & DragMoveEvents<HTMLDivElement> & {
     /** 类名 */
     className?: DraggableGridClassName;
     /** 类名 */
@@ -57,26 +60,28 @@ export type DraggableGridProps<T> = Omit<ComponentProps<"div">, "className" | "c
     /** 元素高度 */
     itemHeight: number;
     /** 元素的 key 到次序的映射 */
-    orderMap?: DraggableGridKeyToOrder;
+    orderMap?: DraggableGridKeyToOrder<K>;
     /** 次序变化时回调 */
-    onOrderMapChange?: (orderMap: DraggableGridKeyToOrder) => void;
+    onOrderMapChange?: (orderMap: DraggableGridKeyToOrder<K>) => void;
     /** 禁用的元素 */
-    isItemDisabled?: Key[] | ((item: T, key: Key) => boolean);
+    isItemDisabled?: K[] | ((item: T, key: K) => boolean);
     /** 禁用的次序 */
     isOrderDisabled?: number[] | ((order: number) => boolean);
     /** 次序的优先级，可以通过此函数调整元素的优先放置的方向，左上，右上，左下，右下，中心，顺时针，逆时针等等 */
     orderPriority?: (a: number, b: number) => number;
-} & (T extends ReactNode ? {
+    /** 触发移动的元素 */
+    handle?: string | HTMLElement | ((item: T, key: K, element: HTMLDivElement) => HTMLElement | undefined | null) | undefined | null;
+} & (MustBeReactNode<T> extends true ? {
     /** 渲染函数，当 T 为 ReactNode 时，render 为可选 */
     render?: (item: T, status: DraggableGridItemStatus) => ReactNode;
 } : {
     /** 渲染函数，当 T 为 ReactNode 时，render 为可选 */
     render: (item: T, status: DraggableGridItemStatus) => ReactNode;
-}) & (T extends Key ? {
+}) & (MustBeReactKey<T> extends true ? {
     /** 获取 key 的函数，当 T 为 Key 时，keyExtractor 为可选 */
-    keyExtractor?: (item: T) => Key;
+    keyExtractor?: (item: T) => K;
 } : {
     /** 获取 key 的函数，当 T 为 Key 时，keyExtractor 为可选 */
-    keyExtractor: (item: T) => Key;
+    keyExtractor: (item: T) => K;
 });
-export declare function DraggableGrid<T>({ className, classNames, style, items, disabled, columns, rows, gap, gapX, gapY, itemWidth, itemHeight, orderMap, onOrderMapChange, render, keyExtractor, isItemDisabled: _isItemDisabled, isOrderDisabled, orderPriority, ...rest }: DraggableGridProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DraggableGrid<T, K extends Key = T extends Key ? T : never>({ className, classNames, style, items, disabled, columns, rows, gap, gapX, gapY, itemWidth, itemHeight, orderMap, onOrderMapChange, render, keyExtractor, isItemDisabled: _isItemDisabled, isOrderDisabled, orderPriority, handle, onDragMoveStart: _onDragMoveStart, onDragMove: _onDragMove, onDragMoveEnd: _onDragMoveEnd, ...rest }: DraggableGridProps<T, K>): import("react/jsx-runtime").JSX.Element;

package/dist/components/DraggableGrid.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { clsx, getArray } from "deepsea-tools";
+import { clsx, getArray, isNullable } from "deepsea-tools";
 import { useDragMove } from "soda-hooks";
 import DraggableGrid_module from "./DraggableGrid.module.js";
 function isTheSameArray(a, b) {
@@ -45,10 +45,10 @@ function getOrderToKey(keyToOrder) {
             key
         ]));
 }
-const DraggableGridItem = ({ onDragMoveStart, onDragMove, onDragMoveEnd, ...rest })=>{
+function DraggableGridItem({ item, itemKey, handle, onDragMoveStart, onDragMove, onDragMoveEnd, ...rest }) {
     const element = useRef(null);
     useDragMove({
-        element,
+        element: isNullable(handle) ? element : ()=>element.current && ("string" == typeof handle ? element.current.querySelector(handle) : "function" == typeof handle ? handle(item, itemKey, element.current) : handle),
         onDragMoveStart,
         onDragMove,
         onDragMoveEnd
@@ -57,8 +57,8 @@ const DraggableGridItem = ({ onDragMoveStart, onDragMove, onDragMoveEnd, ...rest
         ref: element,
         ...rest
     });
-};
-function DraggableGrid({ className, classNames, style, items = [], disabled, columns, rows, gap = 0, gapX = gap, gapY = gap, itemWidth, itemHeight, orderMap, onOrderMapChange, render, keyExtractor, isItemDisabled: _isItemDisabled, isOrderDisabled, orderPriority, ...rest }) {
+}
+function DraggableGrid({ className, classNames, style, items = [], disabled, columns, rows, gap = 0, gapX = gap, gapY = gap, itemWidth, itemHeight, orderMap, onOrderMapChange, render, keyExtractor, isItemDisabled: _isItemDisabled, isOrderDisabled, orderPriority, handle, onDragMoveStart: _onDragMoveStart, onDragMove: _onDragMove, onDragMoveEnd: _onDragMoveEnd, ...rest }) {
     const keyToItem = useMemo(()=>{
         const keyToItem = new Map();
         items.forEach((item)=>{
@@ -152,6 +152,7 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
         onOrderMapChange
     ]);
     function onDragMoveStart(key, event) {
+        _onDragMoveStart?.(event);
         const position = getPosition({
             order: keyToOrder.get(key),
             columns,
@@ -178,6 +179,7 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
         });
     }
     function onDragMove(event) {
+        _onDragMove?.(event);
         if (!dragging) return;
         const { deltaX, deltaY } = event;
         const { key, orders, keyToOrder, startX, startY, columns, gapX, gapY, itemWidth, itemHeight } = dragging;
@@ -243,7 +245,8 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
         setKeyToOrder(newKeyToOrder);
         onOrderMapChange?.(newKeyToOrder);
     }
-    function onDragMoveEnd() {
+    function onDragMoveEnd(event) {
+        _onDragMoveEnd?.(event);
         if (!dragging) return;
         setDragging(void 0);
     }
@@ -298,6 +301,9 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
                 isDragging: isDragging
             }) : item;
             return /*#__PURE__*/ jsx(DraggableGridItem, {
+                item: item,
+                itemKey: key,
+                handle: handle,
                 className: clsx(DraggableGrid_module.draggableGridItem, "function" == typeof classNames?.item ? classNames.item({
                     order,
                     isDragging: isDragging

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deepsea-components",
-  "version": "5.16.2",
+  "version": "5.16.4",
   "description": "格数科技自用组件库",
   "type": "module",
   "exports": {
@@ -40,8 +40,8 @@
     "echarts": "^5.6.0",
     "hls.js": "^1.6.9",
     "smooth-scrollbar": "^8.8.4",
-    "soda-hooks": "6.13.3",
-    "deepsea-tools": "5.40.6"
+    "deepsea-tools": "5.41.0",
+    "soda-hooks": "6.13.4"
   },
   "devDependencies": {
     "typescript": "^5.9.2"

package/src/components/DraggableGrid.tsx

@@ -1,9 +1,13 @@
-import { CSSProperties, ComponentProps, FC, Key, ReactNode, useEffect, useMemo, useRef, useState } from "react"
-import { clsx, getArray } from "deepsea-tools"
-import { DragMoveEvent, UseDragMoveParams, useDragMove } from "soda-hooks"
+import { CSSProperties, ComponentProps, Key, ReactNode, useEffect, useMemo, useRef, useState } from "react"
+import { clsx, getArray, isNullable } from "deepsea-tools"
+import { DragMoveEvent, DragMoveEvents, useDragMove } from "soda-hooks"
 
 import styles from "./DraggableGrid.module.css"
 
+export type MustBeReactNode<T> = false extends (T extends ReactNode ? true : false) ? false : true
+
+export type MustBeReactKey<T> = false extends (T extends Key ? true : false) ? false : true
+
 export type DraggableGridClassName = string | ((status: ContainerStatus) => string)
 
 export type DraggableGridItemClassName = string | ((status: DraggableGridItemStatus) => string)
@@ -30,10 +34,10 @@ export interface DraggableGridItemStatus {
 }
 
 /** 元素的 key 到次序的映射 */
-export type DraggableGridKeyToOrder = Map<Key, number>
+export type DraggableGridKeyToOrder<K extends Key> = Map<K, number>
 
 /** 次序到元素的 key 的映射 */
-export type DraggableGridOrderToKey = Map<number, Key>
+export type DraggableGridOrderToKey<K extends Key> = Map<number, K>
 
 function isTheSameArray<T>(a: T[], b: T[]) {
     if (a.length !== b.length) return false
@@ -50,15 +54,15 @@ function isTheSameIterable<T>(a: Iterable<T>, b: Iterable<T>) {
     return aSet.difference(bSet).size === 0
 }
 
-interface GetOrderMapParams {
-    prev?: DraggableGridKeyToOrder
+interface GetOrderMapParams<K extends Key> {
+    prev?: DraggableGridKeyToOrder<K>
     orders: number[]
-    keys: Key[]
+    keys: K[]
 }
 
-function getOrderMap({ prev, orders, keys }: GetOrderMapParams) {
+function getOrderMap<K extends Key>({ prev, orders, keys }: GetOrderMapParams<K>) {
     const orderSet = new Set(orders)
-    const orderMap = new Map<Key, number>()
+    const orderMap = new Map<K, number>()
     const newKeys = keys.filter(key => {
         if (!prev) return true
         if (prev.has(key)) {
@@ -97,55 +101,58 @@ function getPosition({ order, columns, gapX, gapY, itemWidth, itemHeight }: GetP
     }
 }
 
-function getOrderToKey(keyToOrder: DraggableGridKeyToOrder) {
+function getOrderToKey<K extends Key>(keyToOrder: DraggableGridKeyToOrder<K>) {
     return new Map(Array.from(keyToOrder.entries()).map(([key, order]) => [order, key]))
 }
 
-export type DraggableGridProps<T> = Omit<ComponentProps<"div">, "className" | "children"> & {
-    /** 类名 */
-    className?: DraggableGridClassName
-    /** 类名 */
-    classNames?: DraggableGridClassNames
-    /** 样式 */
-    style?: DraggableGridStyle
-    /** 数据源 */
-    items?: T[]
-    /** 是否禁用拖拽 */
-    disabled?: boolean
-    /** 列数 */
-    columns: number
-    /** 行数 */
-    rows: number
-    /**
-     * 间距
-     * @default 0
-     */
-    gap?: number
-    /**
-     * 水平间距
-     * @default 0
-     */
-    gapX?: number
-    /**
-     * 垂直间距
-     * @default 0
-     */
-    gapY?: number
-    /** 元素宽度 */
-    itemWidth: number
-    /** 元素高度 */
-    itemHeight: number
-    /** 元素的 key 到次序的映射 */
-    orderMap?: DraggableGridKeyToOrder
-    /** 次序变化时回调 */
-    onOrderMapChange?: (orderMap: DraggableGridKeyToOrder) => void
-    /** 禁用的元素 */
-    isItemDisabled?: Key[] | ((item: T, key: Key) => boolean)
-    /** 禁用的次序 */
-    isOrderDisabled?: number[] | ((order: number) => boolean)
-    /** 次序的优先级，可以通过此函数调整元素的优先放置的方向，左上，右上，左下，右下，中心，顺时针，逆时针等等 */
-    orderPriority?: (a: number, b: number) => number
-} & (T extends ReactNode
+export type DraggableGridProps<T, K extends Key = T extends Key ? T : never> = Omit<ComponentProps<"div">, "className" | "children"> &
+    DragMoveEvents<HTMLDivElement> & {
+        /** 类名 */
+        className?: DraggableGridClassName
+        /** 类名 */
+        classNames?: DraggableGridClassNames
+        /** 样式 */
+        style?: DraggableGridStyle
+        /** 数据源 */
+        items?: T[]
+        /** 是否禁用拖拽 */
+        disabled?: boolean
+        /** 列数 */
+        columns: number
+        /** 行数 */
+        rows: number
+        /**
+         * 间距
+         * @default 0
+         */
+        gap?: number
+        /**
+         * 水平间距
+         * @default 0
+         */
+        gapX?: number
+        /**
+         * 垂直间距
+         * @default 0
+         */
+        gapY?: number
+        /** 元素宽度 */
+        itemWidth: number
+        /** 元素高度 */
+        itemHeight: number
+        /** 元素的 key 到次序的映射 */
+        orderMap?: DraggableGridKeyToOrder<K>
+        /** 次序变化时回调 */
+        onOrderMapChange?: (orderMap: DraggableGridKeyToOrder<K>) => void
+        /** 禁用的元素 */
+        isItemDisabled?: K[] | ((item: T, key: K) => boolean)
+        /** 禁用的次序 */
+        isOrderDisabled?: number[] | ((order: number) => boolean)
+        /** 次序的优先级，可以通过此函数调整元素的优先放置的方向，左上，右上，左下，右下，中心，顺时针，逆时针等等 */
+        orderPriority?: (a: number, b: number) => number
+        /** 触发移动的元素 */
+        handle?: string | HTMLElement | ((item: T, key: K, element: HTMLDivElement) => HTMLElement | undefined | null) | undefined | null
+    } & (MustBeReactNode<T> extends true
         ? {
               /** 渲染函数，当 T 为 ReactNode 时，render 为可选 */
               render?: (item: T, status: DraggableGridItemStatus) => ReactNode
@@ -154,23 +161,44 @@ export type DraggableGridProps<T> = Omit<ComponentProps<"div">, "className" | "c
               /** 渲染函数，当 T 为 ReactNode 时，render 为可选 */
               render: (item: T, status: DraggableGridItemStatus) => ReactNode
           }) &
-    (T extends Key
+    (MustBeReactKey<T> extends true
         ? {
               /** 获取 key 的函数，当 T 为 Key 时，keyExtractor 为可选 */
-              keyExtractor?: (item: T) => Key
+              keyExtractor?: (item: T) => K
           }
         : {
               /** 获取 key 的函数，当 T 为 Key 时，keyExtractor 为可选 */
-              keyExtractor: (item: T) => Key
+              keyExtractor: (item: T) => K
           })
 
-interface DraggableGridItemProps extends ComponentProps<"div">, Omit<UseDragMoveParams<HTMLDivElement>, "element"> {}
+interface DraggableGridItemProps<T, K extends Key = T extends Key ? T : never> extends ComponentProps<"div">, DragMoveEvents<HTMLDivElement> {
+    item: T
+    itemKey: K
+    /** 触发移动的元素 */
+    handle?: string | HTMLElement | ((item: T, key: K, element: HTMLDivElement) => HTMLElement | undefined | null) | undefined | null
+}
 
-const DraggableGridItem: FC<DraggableGridItemProps> = ({ onDragMoveStart, onDragMove, onDragMoveEnd, ...rest }) => {
+function DraggableGridItem<T, K extends Key = T extends Key ? T : never>({
+    item,
+    itemKey,
+    handle,
+    onDragMoveStart,
+    onDragMove,
+    onDragMoveEnd,
+    ...rest
+}: DraggableGridItemProps<T, K>) {
     const element = useRef<HTMLDivElement>(null)
 
     useDragMove({
-        element,
+        element: isNullable(handle)
+            ? element
+            : () =>
+                  element.current &&
+                  (typeof handle === "string"
+                      ? (element.current.querySelector(handle) as HTMLElement)
+                      : typeof handle === "function"
+                        ? handle(item, itemKey, element.current)
+                        : handle),
         onDragMoveStart,
         onDragMove,
         onDragMoveEnd,
@@ -179,8 +207,8 @@ const DraggableGridItem: FC<DraggableGridItemProps> = ({ onDragMoveStart, onDrag
     return <div ref={element} {...rest} />
 }
 
-interface DraggingItem {
-    key: Key
+interface DraggingItem<K extends Key> {
+    key: K
     startX: number
     startY: number
     deltaX: number
@@ -192,10 +220,10 @@ interface DraggingItem {
     gapY: number
     itemWidth: number
     itemHeight: number
-    keyToOrder: DraggableGridKeyToOrder
+    keyToOrder: DraggableGridKeyToOrder<K>
 }
 
-export function DraggableGrid<T>({
+export function DraggableGrid<T, K extends Key = T extends Key ? T : never>({
     className,
     classNames,
     style,
@@ -215,12 +243,16 @@ export function DraggableGrid<T>({
     isItemDisabled: _isItemDisabled,
     isOrderDisabled,
     orderPriority,
+    handle,
+    onDragMoveStart: _onDragMoveStart,
+    onDragMove: _onDragMove,
+    onDragMoveEnd: _onDragMoveEnd,
     ...rest
-}: DraggableGridProps<T>) {
+}: DraggableGridProps<T, K>) {
     const keyToItem = useMemo(() => {
-        const keyToItem = new Map<Key, T>()
+        const keyToItem = new Map<K, T>()
         items.forEach(item => {
-            const key = keyExtractor ? keyExtractor(item) : (item as Key)
+            const key = keyExtractor ? keyExtractor(item) : (item as unknown as K)
             keyToItem.set(key, item)
         })
         return keyToItem
@@ -249,7 +281,7 @@ export function DraggableGrid<T>({
     })
 
     /** 拖拽中的元素 */
-    const [dragging, setDragging] = useState<DraggingItem | undefined>(undefined)
+    const [dragging, setDragging] = useState<DraggingItem<K> | undefined>(undefined)
 
     const { current: cache } = useRef({
         orders,
@@ -301,7 +333,8 @@ export function DraggableGrid<T>({
         else onOrderMapChange?.(keyToOrder)
     }, [orderMap, keyToOrder, onOrderMapChange])
 
-    function onDragMoveStart(key: Key, event: DragMoveEvent<HTMLDivElement>) {
+    function onDragMoveStart(key: K, event: DragMoveEvent<HTMLDivElement>) {
+        _onDragMoveStart?.(event)
         const position = getPosition({ order: keyToOrder.get(key)!, columns, gapX, gapY, itemWidth, itemHeight })
         recent.current = key
         setDragging({
@@ -322,6 +355,7 @@ export function DraggableGrid<T>({
     }
 
     function onDragMove(event: DragMoveEvent<HTMLDivElement>) {
+        _onDragMove?.(event)
         if (!dragging) return
 
         const { deltaX, deltaY } = event
@@ -395,12 +429,13 @@ export function DraggableGrid<T>({
         onOrderMapChange?.(newKeyToOrder)
     }
 
-    function onDragMoveEnd() {
+    function onDragMoveEnd(event: DragMoveEvent<HTMLDivElement>) {
+        _onDragMoveEnd?.(event)
         if (!dragging) return
         setDragging(undefined)
     }
 
-    function isItemDisabled(key: Key) {
+    function isItemDisabled(key: K) {
         if (!_isItemDisabled) return false
         if (Array.isArray(_isItemDisabled)) return _isItemDisabled.includes(key)
         return _isItemDisabled(keyToItem.get(key)!, key)
@@ -451,6 +486,9 @@ export function DraggableGrid<T>({
                 return (
                     <DraggableGridItem
                         key={key}
+                        item={item}
+                        itemKey={key}
+                        handle={handle}
                         className={clsx(
                             styles.draggableGridItem,
                             typeof classNames?.item === "function" ? classNames.item({ order, isDragging: isDragging }) : classNames?.item,