deepsea-components 5.15.28 → 5.16.0

package/dist/components/DraggableGrid.cjs

@@ -0,0 +1,357 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    DraggableGrid: ()=>DraggableGrid
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const external_deepsea_tools_namespaceObject = require("deepsea-tools");
+const external_soda_hooks_namespaceObject = require("soda-hooks");
+const external_DraggableGrid_module_cjs_namespaceObject = require("./DraggableGrid.module.cjs");
+var external_DraggableGrid_module_cjs_default = /*#__PURE__*/ __webpack_require__.n(external_DraggableGrid_module_cjs_namespaceObject);
+function isTheSameArray(a, b) {
+    if (a.length !== b.length) return false;
+    for(let i = 0; i < a.length; i++)if (a[i] !== b[i]) return false;
+    return true;
+}
+function isTheSameIterable(a, b) {
+    const aSet = a instanceof Set ? a : new Set(a);
+    const bSet = b instanceof Set ? b : new Set(b);
+    if (aSet.size !== bSet.size) return false;
+    return 0 === aSet.difference(bSet).size;
+}
+function getOrderMap({ prev, orders, keys }) {
+    const orderSet = new Set(orders);
+    const orderMap = new Map();
+    const newKeys = keys.filter((key)=>{
+        if (!prev) return true;
+        if (prev.has(key)) {
+            const prevOrder = prev.get(key);
+            orderMap.set(key, prevOrder);
+            orderSet.delete(prevOrder);
+            return false;
+        }
+    });
+    orders = Array.from(orderSet);
+    newKeys.forEach((key, index)=>orderMap.set(key, orders[index]));
+    console.log(Object.fromEntries(orderMap.entries()));
+    return orderMap;
+}
+function getPosition({ order, columns, gapX, gapY, itemWidth, itemHeight }) {
+    const row = Math.floor(order / columns);
+    const column = order % columns;
+    return {
+        x: column * (itemWidth + gapX),
+        y: row * (itemHeight + gapY)
+    };
+}
+function getOrderToKey(keyToOrder) {
+    return new Map(Array.from(keyToOrder.entries()).map(([key, order])=>[
+            order,
+            key
+        ]));
+}
+const DraggableGridItem = ({ onDragMoveStart, onDragMove, onDragMoveEnd, ...rest })=>{
+    const element = (0, external_react_namespaceObject.useRef)(null);
+    (0, external_soda_hooks_namespaceObject.useDragMove)({
+        element,
+        onDragMoveStart,
+        onDragMove,
+        onDragMoveEnd
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        ref: element,
+        ...rest
+    });
+};
+let DraggableGrid_cache;
+function log(value) {
+    if ((0, external_deepsea_tools_namespaceObject.equal)(DraggableGrid_cache, value)) return;
+    DraggableGrid_cache = value;
+    console.log(value);
+}
+function DraggableGrid({ className, classNames, style, items = [], disabled, columns, rows, gap = 0, gapX = gap, gapY = gap, itemWidth, itemHeight, orderMap, onOrderMapChange, render, keyExtractor, isItemDisabled, isOrderDisabled, orderPriority, ...rest }) {
+    const [itemToKey, keyToItem] = (0, external_react_namespaceObject.useMemo)(()=>{
+        const itemToKey = new Map();
+        const keyToItem = new Map();
+        items.forEach((item, index)=>{
+            const key = keyExtractor ? keyExtractor(item) : item;
+            itemToKey.set(item, key);
+            keyToItem.set(key, item);
+        });
+        return [
+            itemToKey,
+            keyToItem
+        ];
+    }, [
+        items,
+        keyExtractor
+    ]);
+    if (keyToItem.size !== items.length) throw new Error("there are duplicate keys in the items");
+    const orders = (0, external_react_namespaceObject.useMemo)(()=>{
+        let orders = (0, external_deepsea_tools_namespaceObject.getArray)(columns * rows);
+        if (isOrderDisabled) orders = orders.filter((order)=>Array.isArray(isOrderDisabled) ? !isOrderDisabled.includes(order) : !isOrderDisabled(order));
+        if (orderPriority) orders = orders.toSorted(orderPriority);
+        return orders;
+    }, [
+        columns,
+        rows,
+        isOrderDisabled,
+        orderPriority
+    ]);
+    const [keyToOrder, setKeyToOrder] = (0, external_react_namespaceObject.useState)(()=>{
+        if (orderMap) return orderMap;
+        const newOrderMap = getOrderMap({
+            prev: void 0,
+            orders,
+            keys: Array.from(keyToItem.keys())
+        });
+        onOrderMapChange?.(newOrderMap);
+        return newOrderMap;
+    });
+    const [dragging, setDragging] = (0, external_react_namespaceObject.useState)(void 0);
+    const { current: cache } = (0, external_react_namespaceObject.useRef)({
+        orders,
+        keys: Array.from(keyToItem.keys())
+    });
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!isTheSameArray(cache.orders, orders) || !isTheSameIterable(cache.keys, keyToItem.keys())) {
+            cache.orders = orders;
+            cache.keys = Array.from(keyToItem.keys());
+            const newOrderMap = getOrderMap({
+                prev: keyToOrder,
+                orders,
+                keys: cache.keys
+            });
+            setKeyToOrder(newOrderMap);
+            onOrderMapChange?.(newOrderMap);
+            const newRenderKeys = new Set(newOrderMap.keys());
+            setRenderKeys((prev)=>prev.intersection(newRenderKeys).union(newRenderKeys.difference(prev)));
+        }
+    }, [
+        dragging,
+        orders,
+        keyToItem,
+        keyToOrder,
+        onOrderMapChange
+    ]);
+    const [renderKeys, setRenderKeys] = (0, external_react_namespaceObject.useState)(()=>new Set(keyToOrder.keys()));
+    const recent = (0, external_react_namespaceObject.useRef)(void 0);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!!dragging && (!isTheSameArray(dragging.orders, orders) || dragging.columns !== columns || dragging.rows !== rows || dragging.gapX !== gapX || dragging.gapY !== gapY || dragging.itemWidth !== itemWidth || dragging.itemHeight !== itemHeight || !isTheSameIterable(dragging.keyToOrder.keys(), keyToItem.keys()))) {
+            setDragging(void 0);
+            if (isTheSameArray(dragging.orders, orders) && isTheSameIterable(dragging.keyToOrder.keys(), keyToItem.keys())) {
+                setKeyToOrder(dragging.keyToOrder);
+                onOrderMapChange?.(dragging.keyToOrder);
+            }
+        }
+    }, [
+        orders,
+        keyToItem,
+        keyToOrder,
+        onOrderMapChange
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (orderMap === keyToOrder) return;
+        if (orderMap) setKeyToOrder(orderMap);
+        else onOrderMapChange?.(keyToOrder);
+    }, [
+        orderMap,
+        keyToOrder,
+        onOrderMapChange
+    ]);
+    function onDragMoveStart(key, event) {
+        const position = getPosition({
+            order: keyToOrder.get(key),
+            columns,
+            gapX,
+            gapY,
+            itemWidth,
+            itemHeight
+        });
+        recent.current = key;
+        setDragging({
+            key,
+            startX: position.x,
+            startY: position.y,
+            deltaX: 0,
+            deltaY: 0,
+            orders,
+            columns,
+            rows,
+            gapX,
+            gapY,
+            itemWidth,
+            itemHeight,
+            keyToOrder: keyToOrder
+        });
+    }
+    function onDragMove(event) {
+        if (!dragging) return;
+        const { deltaX, deltaY } = event;
+        const { key, orders, keyToOrder, startX, startY, columns, gapX, gapY, itemWidth, itemHeight } = dragging;
+        log(key);
+        setDragging((prev)=>({
+                ...prev,
+                deltaX,
+                deltaY
+            }));
+        const x = startX + deltaX;
+        const y = startY + deltaY;
+        const currentOrder = keyToOrder.get(key);
+        const currentOrderIndex = orders.indexOf(currentOrder);
+        const nearestOrder = orders.toSorted((a, b)=>{
+            const aPosition = getPosition({
+                order: a,
+                columns,
+                gapX,
+                gapY,
+                itemWidth,
+                itemHeight
+            });
+            const bPosition = getPosition({
+                order: b,
+                columns,
+                gapX,
+                gapY,
+                itemWidth,
+                itemHeight
+            });
+            const aDistance = (x - aPosition.x) ** 2 + (y - aPosition.y) ** 2;
+            const bDistance = (x - bPosition.x) ** 2 + (y - bPosition.y) ** 2;
+            if (aDistance - bDistance !== 0) return aDistance - bDistance;
+            const aIndex = orders.indexOf(a);
+            const bIndex = orders.indexOf(b);
+            return Math.abs(aIndex - currentOrderIndex) - Math.abs(bIndex - currentOrderIndex);
+        })[0];
+        if (nearestOrder === currentOrder) {
+            setKeyToOrder(keyToOrder);
+            onOrderMapChange?.(keyToOrder);
+            return;
+        }
+        const newKeyToOrder = new Map(keyToOrder);
+        newKeyToOrder.set(key, nearestOrder);
+        const orderToKey = getOrderToKey(keyToOrder);
+        if (!orderToKey.has(nearestOrder)) {
+            setKeyToOrder(newKeyToOrder);
+            onOrderMapChange?.(newKeyToOrder);
+            return;
+        }
+        const nearestOrderIndex = orders.indexOf(nearestOrder);
+        const itemDirection = currentOrderIndex > nearestOrderIndex ? "decrease" : "increase";
+        const targetDirection = "decrease" === itemDirection && orders.slice(0, nearestOrderIndex).some((order)=>!orderToKey.has(order)) || "increase" === itemDirection && orders.slice(nearestOrderIndex + 1).every((order)=>orderToKey.has(order)) ? "decrease" : "increase";
+        function moveTargetOrder(targetOrder) {
+            const targetKey = orderToKey.get(targetOrder);
+            const targetOrderIndex = orders.indexOf(targetOrder);
+            const nextOrderIndex = targetOrderIndex + ("decrease" === targetDirection ? -1 : 1);
+            const nextOrder = orders[nextOrderIndex];
+            newKeyToOrder.set(targetKey, nextOrder);
+            if (nextOrder === currentOrder || !orderToKey.has(nextOrder)) return;
+            moveTargetOrder(nextOrder);
+        }
+        moveTargetOrder(nearestOrder);
+        setKeyToOrder(newKeyToOrder);
+        onOrderMapChange?.(newKeyToOrder);
+    }
+    function onDragMoveEnd() {
+        if (!dragging) return;
+        setDragging(void 0);
+    }
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: (0, external_deepsea_tools_namespaceObject.clsx)(external_DraggableGrid_module_cjs_default().draggableGrid, "function" == typeof className ? className({
+            isDragging: !!dragging
+        }) : className, "function" == typeof classNames?.container ? classNames.container({
+            isDragging: !!dragging
+        }) : classNames?.container),
+        style: {
+            "--width": `${columns * (itemWidth + gapX) - gapX}px`,
+            "--height": `${rows * (itemHeight + gapY) - gapY}px`,
+            ..."function" == typeof style ? style({
+                isDragging: !!dragging
+            }) : style
+        },
+        ...rest,
+        children: Array.from(renderKeys).map((key)=>{
+            const item = keyToItem.get(key);
+            const order = keyToOrder.get(key);
+            const isDragging = dragging?.key === key;
+            const position = getPosition({
+                order,
+                columns,
+                gapX,
+                gapY,
+                itemWidth,
+                itemHeight
+            });
+            const style = isDragging ? {
+                "--width": `${itemWidth}px`,
+                "--height": `${itemHeight}px`,
+                "--translate-x": `${dragging.startX + dragging.deltaX}px`,
+                "--translate-y": `${dragging.startY + dragging.deltaY}px`,
+                "--transition-property": "none",
+                "--z-index": 999999
+            } : {
+                "--width": `${itemWidth}px`,
+                "--height": `${itemHeight}px`,
+                "--translate-x": `${position.x}px`,
+                "--translate-y": `${position.y}px`,
+                "--transition-property": "transform",
+                "--z-index": recent.current === key ? 999999 : keyToOrder.get(key)
+            };
+            const children = render ? render(item, {
+                order,
+                isDragging: isDragging
+            }) : item;
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DraggableGridItem, {
+                className: (0, external_deepsea_tools_namespaceObject.clsx)(external_DraggableGrid_module_cjs_default().draggableGridItem, "function" == typeof classNames?.item ? classNames.item({
+                    order,
+                    isDragging: isDragging
+                }) : classNames?.item),
+                style: style,
+                onDragMoveStart: disabled ? void 0 : (event)=>onDragMoveStart(key, event),
+                onDragMove: disabled ? void 0 : onDragMove,
+                onDragMoveEnd: disabled ? void 0 : onDragMoveEnd,
+                children: children
+            }, key);
+        })
+    });
+}
+exports.DraggableGrid = __webpack_exports__.DraggableGrid;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "DraggableGrid"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/DraggableGrid.d.ts

@@ -0,0 +1,82 @@
+import { CSSProperties, ComponentProps, Key, ReactNode } from "react";
+export type DraggableGridClassName = string | ((status: ContainerStatus) => string);
+export type DraggableGridItemClassName = string | ((status: DraggableGridItemStatus) => string);
+export type DraggableGridStyle = CSSProperties | ((status: ContainerStatus) => CSSProperties);
+export interface DraggableGridClassNames {
+    /** 容器 */
+    container?: DraggableGridClassName;
+    /** 元素 */
+    item?: DraggableGridItemClassName;
+}
+export interface ContainerStatus {
+    /** 是否被拖拽 */
+    isDragging: boolean;
+}
+export interface DraggableGridItemStatus {
+    /** 当前次序 */
+    order: number;
+    /** 是否被拖拽 */
+    isDragging: boolean;
+}
+/** 元素的 key 到次序的映射 */
+export type DraggableGridKeyToOrder = Map<Key, number>;
+/** 次序到元素的 key 的映射 */
+export type DraggableGridOrderToKey = Map<number, 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) => boolean);
+    /** 禁用的次序 */
+    isOrderDisabled?: number[] | ((order: number) => boolean);
+    /** 次序的优先级，可以通过此函数调整元素的优先放置的方向，左上，右上，左下，右下，中心，顺时针，逆时针等等 */
+    orderPriority?: (a: number, b: number) => number;
+} & (T extends ReactNode ? {
+    /** 渲染函数，当 T 为 ReactNode 时，render 为可选 */
+    render?: (item: T, status: DraggableGridItemStatus) => ReactNode;
+} : {
+    /** 渲染函数，当 T 为 ReactNode 时，render 为可选 */
+    render: (item: T, status: DraggableGridItemStatus) => ReactNode;
+}) & (T extends Key ? {
+    /** 获取 key 的函数，当 T 为 Key 时，keyExtractor 为可选 */
+    keyExtractor?: (item: T) => Key;
+} : {
+    /** 获取 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, isOrderDisabled, orderPriority, ...rest }: DraggableGridProps<T>): import("react/jsx-runtime").JSX.Element;