deepsea-components 5.16.2 → 5.16.3

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,5 @@
 import { CSSProperties, ComponentProps, Key, ReactNode } from "react";
+import { DragMoveEvents } from "soda-hooks";
 export type DraggableGridClassName = string | ((status: ContainerStatus) => string);
 export type DraggableGridItemClassName = string | ((status: DraggableGridItemStatus) => string);
 export type DraggableGridStyle = CSSProperties | ((status: ContainerStatus) => CSSProperties);
@@ -22,7 +23,7 @@ export interface DraggableGridItemStatus {
 export type DraggableGridKeyToOrder = Map<Key, number>;
 /** 次序到元素的 key 的映射 */
 export type DraggableGridOrderToKey = Map<number, Key>;
-export type DraggableGridProps<T> = Omit<ComponentProps<"div">, "className" | "children"> & {
+export type DraggableGridProps<T> = Omit<ComponentProps<"div">, "className" | "children"> & DragMoveEvents<HTMLDivElement> & {
     /** 类名 */
     className?: DraggableGridClassName;
     /** 类名 */
@@ -66,6 +67,8 @@ export type DraggableGridProps<T> = Omit<ComponentProps<"div">, "className" | "c
     isOrderDisabled?: number[] | ((order: number) => boolean);
     /** 次序的优先级，可以通过此函数调整元素的优先放置的方向，左上，右上，左下，右下，中心，顺时针，逆时针等等 */
     orderPriority?: (a: number, b: number) => number;
+    /** 触发移动的元素 */
+    handle?: string | HTMLElement | ((item: T, key: Key, element: HTMLDivElement) => HTMLElement | undefined | null) | undefined | null;
 } & (T extends ReactNode ? {
     /** 渲染函数，当 T 为 ReactNode 时，render 为可选 */
     render?: (item: T, status: DraggableGridItemStatus) => ReactNode;
@@ -79,4 +82,4 @@ export type DraggableGridProps<T> = Omit<ComponentProps<"div">, "className" | "c
     /** 获取 key 的函数，当 T 为 Key 时，keyExtractor 为可选 */
     keyExtractor: (item: T) => Key;
 });
-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>({ 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>): 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.3",
   "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,6 +1,6 @@
-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"
 
@@ -101,51 +101,54 @@ function getOrderToKey(keyToOrder: DraggableGridKeyToOrder) {
     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> = 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
+        /** 次序变化时回调 */
+        onOrderMapChange?: (orderMap: DraggableGridKeyToOrder) => void
+        /** 禁用的元素 */
+        isItemDisabled?: Key[] | ((item: T, key: Key) => boolean)
+        /** 禁用的次序 */
+        isOrderDisabled?: number[] | ((order: number) => boolean)
+        /** 次序的优先级，可以通过此函数调整元素的优先放置的方向，左上，右上，左下，右下，中心，顺时针，逆时针等等 */
+        orderPriority?: (a: number, b: number) => number
+        /** 触发移动的元素 */
+        handle?: string | HTMLElement | ((item: T, key: Key, element: HTMLDivElement) => HTMLElement | undefined | null) | undefined | null
+    } & (T extends ReactNode
         ? {
               /** 渲染函数，当 T 为 ReactNode 时，render 为可选 */
               render?: (item: T, status: DraggableGridItemStatus) => ReactNode
@@ -164,13 +167,26 @@ export type DraggableGridProps<T> = Omit<ComponentProps<"div">, "className" | "c
               keyExtractor: (item: T) => Key
           })
 
-interface DraggableGridItemProps extends ComponentProps<"div">, Omit<UseDragMoveParams<HTMLDivElement>, "element"> {}
+interface DraggableGridItemProps<T> extends ComponentProps<"div">, DragMoveEvents<HTMLDivElement> {
+    item: T
+    itemKey: Key
+    /** 触发移动的元素 */
+    handle?: string | HTMLElement | ((item: T, key: Key, element: HTMLDivElement) => HTMLElement | undefined | null) | undefined | null
+}
 
-const DraggableGridItem: FC<DraggableGridItemProps> = ({ onDragMoveStart, onDragMove, onDragMoveEnd, ...rest }) => {
+function DraggableGridItem<T>({ item, itemKey, handle, onDragMoveStart, onDragMove, onDragMoveEnd, ...rest }: DraggableGridItemProps<T>) {
     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,
@@ -215,6 +231,10 @@ export function DraggableGrid<T>({
     isItemDisabled: _isItemDisabled,
     isOrderDisabled,
     orderPriority,
+    handle,
+    onDragMoveStart: _onDragMoveStart,
+    onDragMove: _onDragMove,
+    onDragMoveEnd: _onDragMoveEnd,
     ...rest
 }: DraggableGridProps<T>) {
     const keyToItem = useMemo(() => {
@@ -302,6 +322,7 @@ export function DraggableGrid<T>({
     }, [orderMap, keyToOrder, onOrderMapChange])
 
     function onDragMoveStart(key: Key, event: DragMoveEvent<HTMLDivElement>) {
+        _onDragMoveStart?.(event)
         const position = getPosition({ order: keyToOrder.get(key)!, columns, gapX, gapY, itemWidth, itemHeight })
         recent.current = key
         setDragging({
@@ -322,6 +343,7 @@ export function DraggableGrid<T>({
     }
 
     function onDragMove(event: DragMoveEvent<HTMLDivElement>) {
+        _onDragMove?.(event)
         if (!dragging) return
 
         const { deltaX, deltaY } = event
@@ -395,7 +417,8 @@ export function DraggableGrid<T>({
         onOrderMapChange?.(newKeyToOrder)
     }
 
-    function onDragMoveEnd() {
+    function onDragMoveEnd(event: DragMoveEvent<HTMLDivElement>) {
+        _onDragMoveEnd?.(event)
         if (!dragging) return
         setDragging(undefined)
     }
@@ -451,6 +474,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,