@fast-simon/dashboard-utilities 1.0.3 → 1.0.5

package/lib/utils/useDragToSelect.js

@@ -0,0 +1,177 @@
+import React, { useCallback, useEffect, useState } from "react";
+import DragSelect from "dragselect";
+export const useDragToSelect = ({ areaRef, selectables, areaId, onSelectCommitted, onSelect, isDragAndDropActive, disabled, onDispatch, }) => {
+    // const { state, dispatcher } = useVisualEditorContext();
+    const [dragselect, setDragSelect] = React.useState();
+    const [prevSelectables, setPrevSelectables] = useState([]);
+    const setSelected = useCallback((items) => {
+        const selected = items.map((el) => {
+            const wrapper = el.closest(".main-product-container") ||
+                el.querySelector(".main-product-container");
+            return {
+                id: wrapper === null || wrapper === void 0 ? void 0 : wrapper.getAttribute("product-id"),
+                pos: wrapper === null || wrapper === void 0 ? void 0 : wrapper.getAttribute("product-index"),
+            };
+        });
+        const ids = {};
+        selected.forEach((el) => {
+            const id = el.id.includes("_")
+                ? el.id.split("_")[1]
+                : String(el.id);
+            ids[id] = parseInt(el.pos);
+        });
+        onSelect(ids);
+    }, [onSelect]);
+    const onselect = (callback_object) => {
+        var _a;
+        if (window.isDragAndDropActive ||
+            (callback_object === null || callback_object === void 0 ? void 0 : callback_object.isDragging) ||
+            !((_a = callback_object.event) === null || _a === void 0 ? void 0 : _a.target) ||
+            callback_object.event.target.localName === "svg") {
+            return;
+        }
+        if (callback_object.event.target.classList.contains("material-symbols-outlined") ||
+            callback_object.event.target.className.includes("icon") ||
+            callback_object.event.target.className.includes("Tooltip")) {
+            return;
+        }
+        setSelected(callback_object.items);
+    };
+    const commit = (callback_object) => {
+        var _a, _b, _c;
+        // dispatcher.setIsDragToSelectActive(false);
+        onDispatch("setIsDragToSelectActive", false);
+        if ((callback_object === null || callback_object === void 0 ? void 0 : callback_object.isDragging) ||
+            window.isDragAndDropActive) {
+            const area = document.getElementById(areaId);
+            if (area) {
+                area.style.userSelect = "";
+                area.style.webkitUserSelect = "";
+            }
+            dragselect === null || dragselect === void 0 ? void 0 : dragselect.clearSelection();
+            return;
+        }
+        if ((_c = (_b = (_a = callback_object === null || callback_object === void 0 ? void 0 : callback_object.event) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.closest) === null || _c === void 0 ? void 0 : _c.call(_b, ".main-product-container")) {
+            return;
+        }
+        onselect(callback_object);
+        dragselect === null || dragselect === void 0 ? void 0 : dragselect.clearSelection();
+    };
+    const onSelectStart = (callback_object) => {
+        var _a, _b, _c, _d;
+        // dispatcher.setIsDragToSelectActive(true);
+        onDispatch("setIsDragToSelectActive", true);
+        if (!(callback_object === null || callback_object === void 0 ? void 0 : callback_object.isDragging) &&
+            !window.isDragAndDropActive &&
+            callback_object.items.length !== 1) {
+            dragselect === null || dragselect === void 0 ? void 0 : dragselect.clearSelection();
+        }
+        if (window.getSelection) {
+            (_b = (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+        else if (document.getSelection) {
+            (_d = (_c = document.getSelection()) === null || _c === void 0 ? void 0 : _c.empty) === null || _d === void 0 ? void 0 : _d.call(_c);
+        }
+        const area = document.getElementById(areaId);
+        if (area) {
+            area.style.userSelect = "none";
+            area.style.webkitUserSelect = "none";
+        }
+    };
+    const onscroll = (callback_object) => {
+        var _a;
+        if (((_a = callback_object === null || callback_object === void 0 ? void 0 : callback_object.items) === null || _a === void 0 ? void 0 : _a.length) > 1 &&
+            !window.isDragAndDropActive) {
+            setSelected(callback_object.items);
+        }
+    };
+    useEffect(() => {
+        dragselect === null || dragselect === void 0 ? void 0 : dragselect.subscribe("dragmove", onselect);
+        dragselect === null || dragselect === void 0 ? void 0 : dragselect.subscribe("callback", commit);
+        dragselect === null || dragselect === void 0 ? void 0 : dragselect.subscribe("dragstart", onSelectStart);
+        dragselect === null || dragselect === void 0 ? void 0 : dragselect.subscribe("autoscroll", onscroll);
+        return () => {
+            dragselect === null || dragselect === void 0 ? void 0 : dragselect.unsubscribe("dragmove", onselect);
+            dragselect === null || dragselect === void 0 ? void 0 : dragselect.unsubscribe("callback", commit);
+            dragselect === null || dragselect === void 0 ? void 0 : dragselect.unsubscribe("dragstart", onSelectStart);
+            dragselect === null || dragselect === void 0 ? void 0 : dragselect.unsubscribe("autoscroll", onscroll);
+        };
+    }, [dragselect, setSelected]);
+    useEffect(() => {
+        const prevIds = prevSelectables.map((el) => {
+            const wrapper = el.closest(".main-product-container");
+            return wrapper === null || wrapper === void 0 ? void 0 : wrapper.getAttribute("product-id");
+        });
+        const currentIds = selectables.map((el) => {
+            const wrapper = el.closest(".main-product-container");
+            return wrapper === null || wrapper === void 0 ? void 0 : wrapper.getAttribute("product-id");
+        });
+        if (!dragselect && areaRef.current) {
+            if (onSelectCommitted) {
+                console.log("init dragselect");
+            }
+            setDragSelect(new DragSelect({
+                selectables: selectables,
+                area: document.getElementById(areaId),
+                autoScrollSpeed: 15,
+                overflowTolerance: { x: 0, y: 0 },
+            }));
+        }
+        else if (dragselect &&
+            JSON.stringify(prevIds) !== JSON.stringify(currentIds) &&
+            !isDragAndDropActive) {
+            dragselect.setSettings({
+                selectables: selectables,
+                overflowTolerance: { x: 0, y: 0 },
+            });
+            setPrevSelectables(selectables);
+        }
+    }, [selectables, areaRef, disabled, isDragAndDropActive]);
+    useEffect(() => {
+        const mousedownCallback = (e) => {
+            var _a;
+            if (e.target.closest("#page_top")) {
+                return;
+            }
+            if (e.target.closest(".actions-bar-container") ||
+                e.target.closest(".scroll-to-top-btn") ||
+                e.target.closest(".paste-button-container")) {
+                return;
+            }
+            if (!((_a = e.target) === null || _a === void 0 ? void 0 : _a.closest("#" + areaId))) {
+                // dispatcher.setIsCutting(false);
+                // dispatcher.setSelectedProducts([]);
+                onDispatch("setIsCutting", false);
+                onDispatch("setSelectedProducts", []);
+                onSelect({});
+            }
+        };
+        document.addEventListener("mousedown", mousedownCallback);
+        return () => {
+            document.removeEventListener("mousedown", mousedownCallback);
+        };
+    }, []);
+    useEffect(() => {
+        document.querySelectorAll(".ds-selector-area").forEach((el) => {
+            el.style.visibility = isDragAndDropActive ? "hidden" : "visible";
+        });
+    }, [isDragAndDropActive]);
+    useEffect(() => {
+        if (dragselect && disabled) {
+            dragselect.clearSelection();
+            dragselect.setSettings({
+                selectables: [],
+                area: document.createElement("div"),
+                overflowTolerance: { x: 0, y: 0 },
+            });
+        }
+        else if (dragselect && disabled === false) {
+            dragselect.setSettings({
+                selectables: selectables,
+                area: document.getElementById(areaId),
+                overflowTolerance: { x: 0, y: 0 },
+            });
+        }
+    }, [dragselect, disabled]);
+};
+//# sourceMappingURL=useDragToSelect.js.map

package/lib/utils/useDragToSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDragToSelect.js","sourceRoot":"","sources":["../../src/utils/useDragToSelect.ts"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport DragSelect from \"dragselect\";\ninterface Props {\n    areaRef: React.RefObject<HTMLDivElement>;\n    selectables: HTMLElement[];\n    areaId: string;\n    onSelectCommitted?: (selectedIDS: string[]) => void;\n    onSelect: (ids: Record<string, number>) => void;\n    isDragAndDropActive: boolean;\n    disabled?: boolean;\n    onDispatch: (key: string, value: any) => void;\n}\nexport const useDragToSelect = ({\n    areaRef,\n    selectables,\n    areaId,\n    onSelectCommitted,\n    onSelect,\n    isDragAndDropActive,\n    disabled,\n    onDispatch,\n}: Props) => {\n    // const { state, dispatcher } = useVisualEditorContext();\n\n    const [dragselect, setDragSelect] = React.useState<DragSelect>();\n\n    const [prevSelectables, setPrevSelectables] = useState<HTMLElement[]>([]);\n\n    const setSelected = useCallback(\n        (items: HTMLElement[]) => {\n            const selected = items.map((el: HTMLElement) => {\n                const wrapper =\n                    el.closest(\".main-product-container\") ||\n                    el.querySelector(\".main-product-container\");\n                return {\n                    id: wrapper?.getAttribute(\"product-id\"),\n                    pos: wrapper?.getAttribute(\"product-index\"),\n                };\n            });\n            const ids: Record<string, number> = {};\n            selected.forEach((el: any) => {\n                const id = el.id.includes(\"_\")\n                    ? el.id.split(\"_\")[1]\n                    : String(el.id);\n                ids[id] = parseInt(el.pos);\n            });\n\n            onSelect(ids);\n        },\n        [onSelect]\n    );\n\n    const onselect = (callback_object: any) => {\n        if (\n            (window as any).isDragAndDropActive ||\n            callback_object?.isDragging ||\n            !callback_object.event?.target ||\n            callback_object.event.target.localName === \"svg\"\n        ) {\n            return;\n        }\n        if (\n            callback_object.event.target.classList.contains(\n                \"material-symbols-outlined\"\n            ) ||\n            callback_object.event.target.className.includes(\"icon\") ||\n            callback_object.event.target.className.includes(\"Tooltip\")\n        ) {\n            return;\n        }\n\n        setSelected(callback_object.items);\n    };\n\n    const commit = (callback_object: any) => {\n        // dispatcher.setIsDragToSelectActive(false);\n        onDispatch(\"setIsDragToSelectActive\", false);\n        if (\n            callback_object?.isDragging ||\n            (window as any).isDragAndDropActive\n        ) {\n            const area = document.getElementById(areaId) as HTMLElement;\n            if (area) {\n                area.style.userSelect = \"\";\n                area.style.webkitUserSelect = \"\";\n            }\n            dragselect?.clearSelection();\n            return;\n        }\n        if (\n            callback_object?.event?.target?.closest?.(\".main-product-container\")\n        ) {\n            return;\n        }\n        onselect(callback_object);\n        dragselect?.clearSelection();\n    };\n\n    const onSelectStart = (callback_object: any) => {\n        // dispatcher.setIsDragToSelectActive(true);\n        onDispatch(\"setIsDragToSelectActive\", true);\n\n        if (\n            !callback_object?.isDragging &&\n            !(window as any).isDragAndDropActive &&\n            callback_object.items.length !== 1\n        ) {\n            dragselect?.clearSelection();\n        }\n        if (window.getSelection) {\n            window.getSelection()?.removeAllRanges?.();\n        } else if (document.getSelection) {\n            document.getSelection()?.empty?.();\n        }\n        const area = document.getElementById(areaId) as HTMLElement;\n        if (area) {\n            area.style.userSelect = \"none\";\n            area.style.webkitUserSelect = \"none\";\n        }\n    };\n\n    const onscroll = (callback_object: any) => {\n        if (\n            callback_object?.items?.length > 1 &&\n            !(window as any).isDragAndDropActive\n        ) {\n            setSelected(callback_object.items);\n        }\n    };\n\n    useEffect(() => {\n        dragselect?.subscribe(\"dragmove\", onselect);\n        dragselect?.subscribe(\"callback\", commit);\n        dragselect?.subscribe(\"dragstart\", onSelectStart);\n        dragselect?.subscribe(\"autoscroll\", onscroll);\n        return () => {\n            dragselect?.unsubscribe(\"dragmove\", onselect);\n            dragselect?.unsubscribe(\"callback\", commit);\n            dragselect?.unsubscribe(\"dragstart\", onSelectStart);\n            dragselect?.unsubscribe(\"autoscroll\", onscroll);\n        };\n    }, [dragselect, setSelected]);\n\n    useEffect(() => {\n        const prevIds = prevSelectables.map((el: HTMLElement) => {\n            const wrapper = el.closest(\".main-product-container\");\n            return wrapper?.getAttribute(\"product-id\");\n        });\n        const currentIds = selectables.map((el: HTMLElement) => {\n            const wrapper = el.closest(\".main-product-container\");\n            return wrapper?.getAttribute(\"product-id\");\n        });\n\n        if (!dragselect && areaRef.current) {\n            if (onSelectCommitted) {\n                console.log(\"init dragselect\");\n            }\n            setDragSelect(\n                new DragSelect({\n                    selectables: selectables as HTMLElement[],\n                    area: document.getElementById(areaId) as HTMLElement,\n                    autoScrollSpeed: 15,\n                    overflowTolerance: { x: 0, y: 0 },\n                })\n            );\n        } else if (\n            dragselect &&\n            JSON.stringify(prevIds) !== JSON.stringify(currentIds) &&\n            !isDragAndDropActive\n        ) {\n            dragselect.setSettings({\n                selectables: selectables as HTMLElement[],\n                overflowTolerance: { x: 0, y: 0 },\n            });\n            setPrevSelectables(selectables);\n        }\n    }, [selectables, areaRef, disabled, isDragAndDropActive]);\n\n    useEffect(() => {\n        const mousedownCallback = (e: any) => {\n            if (e.target.closest(\"#page_top\")) {\n                return;\n            }\n            if (\n                e.target.closest(\".actions-bar-container\") ||\n                e.target.closest(\".scroll-to-top-btn\") ||\n                e.target.closest(\".paste-button-container\")\n            ) {\n                return;\n            }\n            if (!e.target?.closest(\"#\" + areaId)) {\n                // dispatcher.setIsCutting(false);\n                // dispatcher.setSelectedProducts([]);\n                onDispatch(\"setIsCutting\", false);\n                onDispatch(\"setSelectedProducts\", []);\n                onSelect({});\n            }\n        };\n\n        document.addEventListener(\"mousedown\", mousedownCallback);\n        return () => {\n            document.removeEventListener(\"mousedown\", mousedownCallback);\n        };\n    }, []);\n\n    useEffect(() => {\n        document.querySelectorAll(\".ds-selector-area\").forEach((el: any) => {\n            el.style.visibility = isDragAndDropActive ? \"hidden\" : \"visible\";\n        });\n    }, [isDragAndDropActive]);\n\n    useEffect(() => {\n        if (dragselect && disabled) {\n            dragselect.clearSelection();\n            dragselect.setSettings({\n                selectables: [],\n                area: document.createElement(\"div\"),\n                overflowTolerance: { x: 0, y: 0 },\n            });\n        } else if (dragselect && disabled === false) {\n            dragselect.setSettings({\n                selectables: selectables as HTMLElement[],\n                area: document.getElementById(areaId) as HTMLElement,\n                overflowTolerance: { x: 0, y: 0 },\n            });\n        }\n    }, [dragselect, disabled]);\n};\n"]}

package/package.json

@@ -3,11 +3,11 @@
   "files": [
     "lib/**/*"
   ],
-  "version": "1.0.3",
+  "version": "1.0.5",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
     "preview": "vite preview",
+    "build": "tsc -p tsconfig-build.json",
     "prepublishOnly": "npm version patch && npm run build",
     "tsc": "tsc"
   },
@@ -36,21 +36,21 @@
     "moment": "^2.29.1",
     "rc-slider": "^10.1.1",
     "react-datepicker": "^4.10.0",
-    "react-select": "^5.2.1",
-    "tss-react": "^3.6.0",
-    "usehooks-ts": "^2.9.1",
     "react-jss": "^10.6.0",
     "react-loading-skeleton": "^2.2.0",
     "react-multi-carousel": "^2.6.3",
-    "react-switch": "^6.0.0"
+    "react-select": "^5.2.1",
+    "react-switch": "^6.0.0",
+    "tss-react": "^3.6.0",
+    "usehooks-ts": "^2.9.1"
   },
   "devDependencies": {
     "@types/node": "^18.13.0",
-    "@types/react": "^17.0.33",
+    "@types/react": "^18.3.3",
     "@types/react-datepicker": "^4.10.0",
-    "@types/react-dom": "^17.0.10",
+    "@types/react-dom": "^18.3.0",
     "@types/react-modal": "^3.13.1",
-    "@types/react-router-dom": "^5.1.5",
+    "@types/react-redux": "^7.1.25",
     "@vitejs/plugin-react": "^1.0.7",
     "axios": "^0.24.0",
     "copyfiles": "^2.4.1",
@@ -60,9 +60,7 @@
     "react-datepicker": "^4.10.0",
     "react-dom": "^17.0.2",
     "react-modal": "3.14.4",
-    "react-router-dom": "^5.2.0",
-    "rimraf": "^3.0.2",
-    "typescript": "^4.4.4",
+    "typescript": "^4.9.5",
     "vite": "^2.7.2"
   }
 }