@fast-simon/dashboard-utilities 1.0.19 → 1.0.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/DragAndDrop/DndContextWrapper.d.ts +1 -2
- package/lib/components/DragAndDrop/DndContextWrapper.js +1 -3
- package/lib/components/DragAndDrop/DndContextWrapper.js.map +1 -1
- package/lib/components/DragAndDrop/styles.module.css +0 -5
- package/lib/icons/GeneralIcon.js +2 -2
- package/lib/icons/GeneralIcon.js.map +1 -1
- package/lib/utils/useDragToSelect.js +0 -5
- package/lib/utils/useDragToSelect.js.map +1 -1
- package/package.json +1 -1
|
@@ -14,7 +14,6 @@ export interface DndContextWrapperProps {
|
|
|
14
14
|
selectedProductIds: Record<string, number>;
|
|
15
15
|
ProductCardComponent: React.ComponentType<any>;
|
|
16
16
|
SelectCardComponent: React.ComponentType<any>;
|
|
17
|
-
disableDragging?: boolean;
|
|
18
17
|
}
|
|
19
|
-
declare const DndContextWrapper: ({ children, onDragStart, onDragEnd, activeId, selectedProductIds, findActiveProduct, ProductCardComponent, SelectCardComponent
|
|
18
|
+
declare const DndContextWrapper: ({ children, onDragStart, onDragEnd, activeId, selectedProductIds, findActiveProduct, ProductCardComponent, SelectCardComponent }: DndContextWrapperProps) => import("react/jsx-runtime").JSX.Element;
|
|
20
19
|
export default DndContextWrapper;
|
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { closestCorners, defaultDropAnimationSideEffects, DndContext, DragOverlay, MouseSensor, useSensor, useSensors, } from "@dnd-kit/core";
|
|
3
3
|
import { isEditorProduct } from "../../@types/editorProduct";
|
|
4
|
-
const DndContextWrapper = ({ children, onDragStart, onDragEnd, activeId, selectedProductIds, findActiveProduct, ProductCardComponent, SelectCardComponent
|
|
4
|
+
const DndContextWrapper = ({ children, onDragStart, onDragEnd, activeId, selectedProductIds, findActiveProduct, ProductCardComponent, SelectCardComponent }) => {
|
|
5
5
|
const sensors = useSensors(useSensor(MouseSensor, {
|
|
6
6
|
activationConstraint: {
|
|
7
7
|
distance: 10,
|
|
8
8
|
},
|
|
9
9
|
}));
|
|
10
|
-
// console.log(disableDragging)
|
|
11
|
-
// console.log({disableDragging: disableDragging, MouseSensor: MouseSensor, KeyboardSensor: KeyboardSensor})
|
|
12
10
|
return (_jsx(_Fragment, { children: _jsxs(DndContext, Object.assign({ sensors: sensors, collisionDetection: closestCorners, onDragStart: onDragStart, onDragEnd: onDragEnd }, { children: [children, _jsx(DragOverlay, Object.assign({ style: {
|
|
13
11
|
boxShadow: "0 25px 50px -12px rgb(0 0 0 / 0.25)",
|
|
14
12
|
zIndex: 9999999,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DndContextWrapper.js","sourceRoot":"","sources":["../../../src/components/DragAndDrop/DndContextWrapper.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,cAAc,EACd,+BAA+B,EAC/B,UAAU,EACV,WAAW,EACX,WAAW,EACX,SAAS,EACT,UAAU,GACX,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"DndContextWrapper.js","sourceRoot":"","sources":["../../../src/components/DragAndDrop/DndContextWrapper.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,cAAc,EACd,+BAA+B,EAC/B,UAAU,EACV,WAAW,EACX,WAAW,EACX,SAAS,EACT,UAAU,GACX,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAa7D,MAAM,iBAAiB,GAAG,CAAC,EACI,QAAQ,EACR,WAAW,EACX,SAAS,EACT,QAAQ,EACR,kBAAkB,EAClB,iBAAiB,EACjB,oBAAoB,EACpB,mBAAmB,EACxB,EAAE,EAAE;IAE1B,MAAM,OAAO,GAAG,UAAU,CACxB,SAAS,CAAC,WAAW,EAAE;QACrB,oBAAoB,EAAE;YACpB,QAAQ,EAAE,EAAE;SACb;KACF,CAAC,CACH,CAAC;IAEJ,OAAO,CACH,4BACE,MAAC,UAAU,kBACP,OAAO,EAAE,OAAO,EAChB,kBAAkB,EAAE,cAAc,EAClC,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,iBAEnB,QAAQ,EACT,KAAC,WAAW,kBACV,KAAK,EAAE;wBACL,SAAS,EAAE,qCAAqC;wBAChD,MAAM,EAAE,OAAO;qBAChB,EACD,aAAa,EAAE;wBACb,MAAM,EAAE,gCAAgC;wBACxC,SAAS,EAAE,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC;wBAC/B,WAAW,EAAE,+BAA+B,CAAC;4BAC3C,MAAM,EAAE;gCACN,MAAM,EAAE;oCACN,OAAO,EAAE,KAAK;iCACf;6BACF;yBACF,CAAC;qBACH,gBAEA,QAAQ;wBACP,CAAC,MAAM,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,MAAM,IAAI,CAAC;4BAC5C,eAAe,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAC3C,KAAC,oBAAoB,IACjB,UAAU,EAAE,KAAK,EACjB,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC,EACjB,OAAO,EAAE,iBAAiB,CAAC,QAAQ,CAAmB,GACtD,CACP,CAAC,CAAC,CAAC,CACC,KAAC,mBAAmB,IACjB,WAAW,EACT,CAAC,MAAM,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,MAAM,CAAC;gCACxC,CAAC,QAAQ,IAAI,kBAAkB;oCAC7B,CAAC,CAAC,CAAC;oCACH,CAAC,CAAC,CAAC,CAAC,GAEZ,CACH,CAAC,IACQ,KACH,GACd,CACN,CAAC;AAEJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import React, { ReactNode, useMemo, useState } from \"react\";\r\nimport {\r\n closestCorners,\r\n defaultDropAnimationSideEffects,\r\n DndContext,\r\n DragOverlay,\r\n MouseSensor,\r\n useSensor,\r\n useSensors,\r\n} from \"@dnd-kit/core\";\r\nimport { EditorProduct } from \"../../@types/editorProduct\";\r\nimport { isEditorProduct } from \"../../@types/editorProduct\";\r\n\r\nexport interface DndContextWrapperProps {\r\n children: ReactNode;\r\n onDragStart: ({active}: {active: any}) => void;\r\n onDragEnd: ({over, active}: {over: any, active: any}) => void;\r\n activeId: string | null;\r\n findActiveProduct: (activeId: string) => EditorProduct | undefined;\r\n selectedProductIds: Record<string, number>;\r\n ProductCardComponent: React.ComponentType<any>;\r\n SelectCardComponent: React.ComponentType<any>;\r\n}\r\n\r\nconst DndContextWrapper = ({\r\n children,\r\n onDragStart,\r\n onDragEnd,\r\n activeId,\r\n selectedProductIds,\r\n findActiveProduct,\r\n ProductCardComponent,\r\n SelectCardComponent\r\n} : DndContextWrapperProps) => {\r\n\r\n const sensors = useSensors(\r\n useSensor(MouseSensor, {\r\n activationConstraint: {\r\n distance: 10,\r\n },\r\n }),\r\n );\r\n\r\n return (\r\n <>\r\n <DndContext\r\n sensors={sensors}\r\n collisionDetection={closestCorners}\r\n onDragStart={onDragStart}\r\n onDragEnd={onDragEnd}\r\n >\r\n {children}\r\n <DragOverlay\r\n style={{\r\n boxShadow: \"0 25px 50px -12px rgb(0 0 0 / 0.25)\",\r\n zIndex: 9999999,\r\n }}\r\n dropAnimation={{\r\n easing: \"cubic-bezier(0.22, 1, 0.36, 1)\",\r\n keyframes: (parameters) => [{}],\r\n sideEffects: defaultDropAnimationSideEffects({\r\n styles: {\r\n active: {\r\n opacity: \"0.5\",\r\n },\r\n },\r\n }),\r\n }}\r\n >\r\n {activeId &&\r\n (Object.keys(selectedProductIds).length <= 1 &&\r\n isEditorProduct(findActiveProduct(activeId)) ? (\r\n <ProductCardComponent\r\n isSelected={false}\r\n onClick={() => {}}\r\n product={findActiveProduct(activeId)! as EditorProduct}\r\n />\r\n ) : (\r\n <SelectCardComponent\r\n numSelected={\r\n (Object.keys(selectedProductIds).length) +\r\n (activeId in selectedProductIds\r\n ? 0\r\n : 1)\r\n }\r\n />\r\n ))}\r\n </DragOverlay>\r\n </DndContext>\r\n </>\r\n );\r\n\r\n};\r\n\r\nexport default DndContextWrapper;\r\n"]}
|
package/lib/icons/GeneralIcon.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
2
|
+
import classes from "./styles.module.css";
|
|
3
3
|
import clsx from "clsx";
|
|
4
4
|
export const GeneralIcon = ({ width, height, customClasses }) => {
|
|
5
|
-
return (_jsx("div", Object.assign({ className:
|
|
5
|
+
return (_jsx("div", Object.assign({ className: classes.iconWrapperForStrokedSvg }, { children: _jsxs("svg", Object.assign({ width: width, height: height, viewBox: "0 0 35 34", fill: 'white', xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { className: clsx(classes.svgPath, customClasses === null || customClasses === void 0 ? void 0 : customClasses.path), d: "M30.9596 7.57949C30.9596 8.86866 30.3505 10.0162 29.4155 10.7528C28.7355 11.2912 27.8713 11.617 26.9221 11.617C24.6838 11.617 22.8846 9.81783 22.8846 7.57949C22.8846 6.63033 23.2105 5.78033 23.7488 5.08616H23.763C24.4855 4.15116 25.633 3.54199 26.9221 3.54199C29.1605 3.54199 30.9596 5.34116 30.9596 7.57949ZM12.118 7.57949C12.118 9.81783 10.3188 11.617 8.08047 11.617C7.28193 11.617 6.50132 11.3802 5.83736 10.9366C5.17339 10.4929 4.6559 9.86233 4.35031 9.12458C4.04472 8.38682 3.96476 7.57502 4.12055 6.79182C4.27634 6.00862 4.66087 5.2892 5.22553 4.72455C5.79018 4.1599 6.50959 3.77536 7.29279 3.61957C8.07599 3.46379 8.8878 3.54374 9.62555 3.84933C10.3633 4.15492 10.9939 4.67242 11.4375 5.33638C11.8812 6.00034 12.118 6.78095 12.118 7.57949ZM30.9596 26.4212C30.9596 28.6595 29.1605 30.4587 26.9221 30.4587C25.633 30.4587 24.4855 29.8495 23.763 28.9145H23.7488C23.2105 28.2345 22.8846 27.3703 22.8846 26.4212C22.8846 24.1828 24.6838 22.3837 26.9221 22.3837C27.8713 22.3837 28.7213 22.7095 29.4155 23.2478V23.262C30.3505 23.9845 30.9596 25.132 30.9596 26.4212ZM12.118 26.4212C12.118 27.3703 11.7921 28.2203 11.2538 28.9145C10.8784 29.3977 10.3971 29.7882 9.84689 30.056C9.29669 30.3237 8.69234 30.4615 8.08047 30.4587C5.84214 30.4587 4.04297 28.6595 4.04297 26.4212C4.04297 25.132 4.65214 23.9845 5.58714 23.262V23.2478C6.26714 22.7095 7.1313 22.3837 8.08047 22.3837C10.3188 22.3837 12.118 24.1828 12.118 26.4212Z", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { className: clsx(classes.svgPath, customClasses === null || customClasses === void 0 ? void 0 : customClasses.path), d: "M30.9597 17.0003C30.9597 19.267 30.4072 21.3778 29.4155 23.2478C28.7355 22.7095 27.8714 22.3837 26.9222 22.3837C24.6839 22.3837 22.8847 24.1828 22.8847 26.4212C22.8847 27.3703 23.2105 28.2203 23.7489 28.9145C21.825 29.935 19.6791 30.4653 17.5014 30.4587C15.2489 30.4587 13.1239 29.9062 11.2539 28.9145C11.7922 28.2345 12.118 27.3703 12.118 26.4212C12.118 24.1828 10.3189 22.3837 8.08053 22.3837C7.13136 22.3837 6.28136 22.7095 5.5872 23.2478C4.56672 21.3239 4.03634 19.1781 4.04303 17.0003C4.04303 14.7478 4.59553 12.6228 5.5872 10.7528C6.28136 11.2912 7.13136 11.617 8.08053 11.617C10.3189 11.617 12.118 9.81782 12.118 7.57949C12.118 6.63032 11.7922 5.78032 11.2539 5.08616C13.1239 4.09449 15.2489 3.54199 17.5014 3.54199C19.768 3.54199 21.8789 4.09449 23.7489 5.08616C23.2105 5.76616 22.8847 6.63032 22.8847 7.57949C22.8847 9.81782 24.6839 11.617 26.9222 11.617C27.8714 11.617 28.7214 11.2912 29.4155 10.7528C30.4072 12.6228 30.9597 14.7478 30.9597 17.0003Z", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })) })));
|
|
6
6
|
};
|
|
7
7
|
//# sourceMappingURL=GeneralIcon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GeneralIcon.js","sourceRoot":"","sources":["../../src/icons/GeneralIcon.tsx"],"names":[],"mappings":";AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"GeneralIcon.js","sourceRoot":"","sources":["../../src/icons/GeneralIcon.tsx"],"names":[],"mappings":";AACA,OAAO,OAAO,MAAM,qBAAqB,CAAA;AACzC,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAC,KAAK,EAAE,MAAM,EAAE,aAAa,EAAY,EAAE,EAAE;IACrE,OAAO,CACH,4BAAK,SAAS,EAAE,OAAO,CAAC,wBAAwB,gBAC5C,6BAAK,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAC,4BAA4B,iBACpG,eAAM,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,IAAI,CAAC,EAAE,CAAC,EAAC,04CAA04C,EAAC,WAAW,EAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,GAAE,EAC1gD,eAAM,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,IAAI,CAAC,EAAE,CAAC,EAAC,i8BAAi8B,EAAC,WAAW,EAAC,GAAG,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,GAAE,KAC7jC,IACJ,CACT,CAAA;AACL,CAAC,CAAC","sourcesContent":["import React from \"react\";\nimport classes from \"./styles.module.css\"\nimport clsx from \"clsx\";\nimport {IconProps} from \"../@types/iconProps\";\n\nexport const GeneralIcon = ({width, height, customClasses}: IconProps) => {\n return (\n <div className={classes.iconWrapperForStrokedSvg}>\n <svg width={width} height={height} viewBox=\"0 0 35 34\" fill={'white'} xmlns=\"http://www.w3.org/2000/svg\">\n <path className={clsx(classes.svgPath, customClasses?.path)} d=\"M30.9596 7.57949C30.9596 8.86866 30.3505 10.0162 29.4155 10.7528C28.7355 11.2912 27.8713 11.617 26.9221 11.617C24.6838 11.617 22.8846 9.81783 22.8846 7.57949C22.8846 6.63033 23.2105 5.78033 23.7488 5.08616H23.763C24.4855 4.15116 25.633 3.54199 26.9221 3.54199C29.1605 3.54199 30.9596 5.34116 30.9596 7.57949ZM12.118 7.57949C12.118 9.81783 10.3188 11.617 8.08047 11.617C7.28193 11.617 6.50132 11.3802 5.83736 10.9366C5.17339 10.4929 4.6559 9.86233 4.35031 9.12458C4.04472 8.38682 3.96476 7.57502 4.12055 6.79182C4.27634 6.00862 4.66087 5.2892 5.22553 4.72455C5.79018 4.1599 6.50959 3.77536 7.29279 3.61957C8.07599 3.46379 8.8878 3.54374 9.62555 3.84933C10.3633 4.15492 10.9939 4.67242 11.4375 5.33638C11.8812 6.00034 12.118 6.78095 12.118 7.57949ZM30.9596 26.4212C30.9596 28.6595 29.1605 30.4587 26.9221 30.4587C25.633 30.4587 24.4855 29.8495 23.763 28.9145H23.7488C23.2105 28.2345 22.8846 27.3703 22.8846 26.4212C22.8846 24.1828 24.6838 22.3837 26.9221 22.3837C27.8713 22.3837 28.7213 22.7095 29.4155 23.2478V23.262C30.3505 23.9845 30.9596 25.132 30.9596 26.4212ZM12.118 26.4212C12.118 27.3703 11.7921 28.2203 11.2538 28.9145C10.8784 29.3977 10.3971 29.7882 9.84689 30.056C9.29669 30.3237 8.69234 30.4615 8.08047 30.4587C5.84214 30.4587 4.04297 28.6595 4.04297 26.4212C4.04297 25.132 4.65214 23.9845 5.58714 23.262V23.2478C6.26714 22.7095 7.1313 22.3837 8.08047 22.3837C10.3188 22.3837 12.118 24.1828 12.118 26.4212Z\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n <path className={clsx(classes.svgPath, customClasses?.path)} d=\"M30.9597 17.0003C30.9597 19.267 30.4072 21.3778 29.4155 23.2478C28.7355 22.7095 27.8714 22.3837 26.9222 22.3837C24.6839 22.3837 22.8847 24.1828 22.8847 26.4212C22.8847 27.3703 23.2105 28.2203 23.7489 28.9145C21.825 29.935 19.6791 30.4653 17.5014 30.4587C15.2489 30.4587 13.1239 29.9062 11.2539 28.9145C11.7922 28.2345 12.118 27.3703 12.118 26.4212C12.118 24.1828 10.3189 22.3837 8.08053 22.3837C7.13136 22.3837 6.28136 22.7095 5.5872 23.2478C4.56672 21.3239 4.03634 19.1781 4.04303 17.0003C4.04303 14.7478 4.59553 12.6228 5.5872 10.7528C6.28136 11.2912 7.13136 11.617 8.08053 11.617C10.3189 11.617 12.118 9.81782 12.118 7.57949C12.118 6.63032 11.7922 5.78032 11.2539 5.08616C13.1239 4.09449 15.2489 3.54199 17.5014 3.54199C19.768 3.54199 21.8789 4.09449 23.7489 5.08616C23.2105 5.76616 22.8847 6.63032 22.8847 7.57949C22.8847 9.81782 24.6839 11.617 26.9222 11.617C27.8714 11.617 28.7214 11.2912 29.4155 10.7528C30.4072 12.6228 30.9597 14.7478 30.9597 17.0003Z\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n </svg>\n </div>\n )\n};"]}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React, { useCallback, useEffect, useState } from "react";
|
|
2
2
|
import DragSelect from "dragselect";
|
|
3
3
|
export const useDragToSelect = ({ areaRef, selectables, areaId, onSelectCommitted, onSelect, isDragAndDropActive, disabled, onDispatch, }) => {
|
|
4
|
-
// const { state, dispatcher } = useVisualEditorContext();
|
|
5
4
|
const [dragselect, setDragSelect] = React.useState();
|
|
6
5
|
const [prevSelectables, setPrevSelectables] = useState([]);
|
|
7
6
|
const setSelected = useCallback((items) => {
|
|
@@ -39,7 +38,6 @@ export const useDragToSelect = ({ areaRef, selectables, areaId, onSelectCommitte
|
|
|
39
38
|
};
|
|
40
39
|
const commit = (callback_object) => {
|
|
41
40
|
var _a, _b, _c;
|
|
42
|
-
// dispatcher.setIsDragToSelectActive(false);
|
|
43
41
|
onDispatch("setIsDragToSelectActive", false);
|
|
44
42
|
if ((callback_object === null || callback_object === void 0 ? void 0 : callback_object.isDragging) ||
|
|
45
43
|
window.isDragAndDropActive) {
|
|
@@ -59,7 +57,6 @@ export const useDragToSelect = ({ areaRef, selectables, areaId, onSelectCommitte
|
|
|
59
57
|
};
|
|
60
58
|
const onSelectStart = (callback_object) => {
|
|
61
59
|
var _a, _b, _c, _d;
|
|
62
|
-
// dispatcher.setIsDragToSelectActive(true);
|
|
63
60
|
onDispatch("setIsDragToSelectActive", true);
|
|
64
61
|
if (!(callback_object === null || callback_object === void 0 ? void 0 : callback_object.isDragging) &&
|
|
65
62
|
!window.isDragAndDropActive &&
|
|
@@ -139,8 +136,6 @@ export const useDragToSelect = ({ areaRef, selectables, areaId, onSelectCommitte
|
|
|
139
136
|
return;
|
|
140
137
|
}
|
|
141
138
|
if (!((_a = e.target) === null || _a === void 0 ? void 0 : _a.closest("#" + areaId))) {
|
|
142
|
-
// dispatcher.setIsCutting(false);
|
|
143
|
-
// dispatcher.setSelectedProducts([]);
|
|
144
139
|
onDispatch("setIsCutting", false);
|
|
145
140
|
onDispatch("setSelectedProducts", []);
|
|
146
141
|
onSelect({});
|
|
@@ -1 +1 @@
|
|
|
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"]}
|
|
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\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 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 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 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"]}
|