@jotforminc/dnd-builder 3.0.0-alpha.1 → 3.0.0

package/lib/esm/components/Settings/PageLayer/LayerDragOverlay.js

@@ -0,0 +1,121 @@
+import { memo } from 'react';
+import { DragOverlay } from '@dnd-kit/core';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { capitalize, stripHTML } from '../../../utils/string.js';
+import { useTranslatedTexts } from '../../../utils/hooks.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import SvgDrag from '../../../assets/svg/settings/drag.svg.js';
+
+var DragHandle = function DragHandle() {
+  return /*#__PURE__*/jsx("span", {
+    className: "jfReportSelectOption-drag",
+    children: /*#__PURE__*/jsx(SvgDrag, {
+      className: "jfReportSVG icon-drag"
+    })
+  });
+};
+
+var LayerDragOverlay = function LayerDragOverlay(_ref) {
+  var _ref$activeItemData = _ref.activeItemData,
+      activeItemData = _ref$activeItemData === void 0 ? null : _ref$activeItemData;
+
+  var _useTranslatedTexts = useTranslatedTexts(),
+      CHART_ELEMENT = _useTranslatedTexts.CHART_ELEMENT,
+      CLICK_TO_EDIT_TEXT = _useTranslatedTexts.CLICK_TO_EDIT_TEXT,
+      CLIK_TO_EDIT_HEADER = _useTranslatedTexts.CLIK_TO_EDIT_HEADER,
+      PAGE_ELEMENT = _useTranslatedTexts.PAGE_ELEMENT,
+      RECTANGLE = _useTranslatedTexts.RECTANGLE;
+
+  if (!activeItemData) return null;
+  var Icon = activeItemData.icon,
+      item = activeItemData.item;
+  var id = item.id,
+      isVisible = item.isVisible;
+  var isVisib = isVisible !== undefined ? isVisible : true;
+
+  var itemText = function itemText(passedItem) {
+    if (passedItem.itemType === 'shapes') {
+      return capitalize(passedItem.shapeType || RECTANGLE);
+    }
+
+    if (passedItem.itemType === 'chart') {
+      return passedItem.text || CHART_ELEMENT;
+    }
+
+    if (passedItem.itemType === 'header') {
+      return passedItem.headerText || CLIK_TO_EDIT_HEADER;
+    }
+
+    if (passedItem.itemType === 'text') {
+      return passedItem.value ? stripHTML(passedItem.value) : CLICK_TO_EDIT_TEXT;
+    }
+
+    return capitalize(passedItem.itemType || PAGE_ELEMENT);
+  };
+
+  var content = /*#__PURE__*/jsxs("div", {
+    className: "jfReportSelectOption",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "jfReportSelectOption-icon",
+      children: /*#__PURE__*/jsx(Icon, {})
+    }), /*#__PURE__*/jsx("div", {
+      className: "jfReportSelectOption-text",
+      children: itemText(item)
+    })]
+  });
+
+  return /*#__PURE__*/jsx(DragOverlay, {
+    adjustScale: false,
+    dropAnimation: null,
+    style: {
+      cursor: 'grabbing'
+    },
+    children: /*#__PURE__*/jsxs("div", {
+      className: classNames('jfReportSelectOption forHelper withDnd', {
+        isSelected: isVisib
+      }),
+      style: {
+        opacity: 0.9,
+        transform: 'rotate(2deg)'
+      },
+      children: [/*#__PURE__*/jsx("div", {
+        className: "jfReportSelectOption-visibility",
+        children: /*#__PURE__*/jsxs("label", {
+          className: "jfReportChoice isLight hasNotText",
+          htmlFor: "overlay-".concat(id),
+          children: [/*#__PURE__*/jsx("input", {
+            checked: isVisib,
+            className: "jfReportChoice-input",
+            id: "overlay-".concat(id),
+            readOnly: true,
+            type: "checkbox"
+          }), /*#__PURE__*/jsx("div", {
+            className: "jfReportChoice-labelIcon",
+            children: /*#__PURE__*/jsx("div", {
+              className: "jfReportChoice-label checkbox"
+            })
+          })]
+        })
+      }), /*#__PURE__*/jsxs("div", {
+        className: "jfReportSelectOption-name",
+        children: [/*#__PURE__*/jsx(DragHandle, {}), content]
+      })]
+    })
+  });
+};
+
+LayerDragOverlay.propTypes = {
+  activeItemData: PropTypes.shape({
+    icon: PropTypes.elementType,
+    item: PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      isVisible: PropTypes.bool,
+      itemType: PropTypes.string
+    })
+  })
+};
+var LayerDragOverlay$1 = /*#__PURE__*/memo(LayerDragOverlay);
+
+export default LayerDragOverlay$1;
+//# sourceMappingURL=LayerDragOverlay.js.map

package/lib/esm/components/Settings/PageLayer/LayerDragOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayerDragOverlay.js","sources":["../../../../../src/components/Settings/PageLayer/LayerDragOverlay.js"],"sourcesContent":["import { memo } from 'react';\nimport { DragOverlay } from '@dnd-kit/core';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { capitalize, stripHTML } from '../../../utils/string';\nimport * as icons from '../../../utils/icons';\nimport { useTranslatedTexts } from '../../../utils/hooks';\n\nconst DragHandle = () => (\n  <span className=\"jfReportSelectOption-drag\">\n    <icons.drag className=\"jfReportSVG icon-drag\" />\n  </span>\n);\n\nconst LayerDragOverlay = ({\n  activeItemData = null,\n}) => {\n  const {\n    CHART_ELEMENT,\n    CLICK_TO_EDIT_TEXT,\n    CLIK_TO_EDIT_HEADER,\n    PAGE_ELEMENT,\n    RECTANGLE,\n  } = useTranslatedTexts();\n\n  if (!activeItemData) return null;\n\n  const { icon: Icon, item } = activeItemData;\n  const { id, isVisible } = item;\n  const isVisib = isVisible !== undefined ? isVisible : true;\n\n  const itemText = passedItem => {\n    if (passedItem.itemType === 'shapes') {\n      return capitalize(passedItem.shapeType || RECTANGLE);\n    }\n    if (passedItem.itemType === 'chart') {\n      return passedItem.text || CHART_ELEMENT;\n    }\n    if (passedItem.itemType === 'header') {\n      return passedItem.headerText || CLIK_TO_EDIT_HEADER;\n    }\n    if (passedItem.itemType === 'text') {\n      return passedItem.value ? stripHTML(passedItem.value) : CLICK_TO_EDIT_TEXT;\n    }\n    return capitalize(passedItem.itemType || PAGE_ELEMENT);\n  };\n\n  const content = (\n    <div className=\"jfReportSelectOption\">\n      <div className=\"jfReportSelectOption-icon\">\n        <Icon />\n      </div>\n      <div className=\"jfReportSelectOption-text\">\n        {itemText(item)}\n      </div>\n    </div>\n  );\n\n  return (\n    <DragOverlay\n      adjustScale={false}\n      dropAnimation={null}\n      style={{ cursor: 'grabbing' }}\n    >\n      <div\n        className={classNames('jfReportSelectOption forHelper withDnd', {\n          isSelected: isVisib,\n        })}\n        style={{ opacity: 0.9, transform: 'rotate(2deg)' }}\n      >\n        <div className=\"jfReportSelectOption-visibility\">\n          <label\n            className=\"jfReportChoice isLight hasNotText\"\n            htmlFor={`overlay-${id}`}\n          >\n            <input\n              checked={isVisib}\n              className=\"jfReportChoice-input\"\n              id={`overlay-${id}`}\n              readOnly\n              type=\"checkbox\"\n            />\n            <div className=\"jfReportChoice-labelIcon\">\n              <div className=\"jfReportChoice-label checkbox\" />\n            </div>\n          </label>\n        </div>\n        <div className=\"jfReportSelectOption-name\">\n          <DragHandle />\n          {content}\n        </div>\n      </div>\n    </DragOverlay>\n  );\n};\n\nLayerDragOverlay.propTypes = {\n  activeItemData: PropTypes.shape({\n    icon: PropTypes.elementType,\n    item: PropTypes.shape({\n      id: PropTypes.string.isRequired,\n      isVisible: PropTypes.bool,\n      itemType: PropTypes.string,\n    }),\n  }),\n};\n\nexport default memo(LayerDragOverlay);\n"],"names":["DragHandle","_jsx","icons.drag","LayerDragOverlay","activeItemData","useTranslatedTexts","CHART_ELEMENT","CLICK_TO_EDIT_TEXT","CLIK_TO_EDIT_HEADER","PAGE_ELEMENT","RECTANGLE","Icon","icon","item","id","isVisible","isVisib","undefined","itemText","passedItem","itemType","capitalize","shapeType","text","headerText","value","stripHTML","content","_jsxs","cursor","classNames","isSelected","opacity","transform","propTypes","PropTypes","shape","elementType","string","isRequired","bool","memo"],"mappings":"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"}

package/lib/esm/components/Settings/PageLayer/LayerItem.js

@@ -1,27 +1,66 @@
-import { memo, useCallback } from 'react';
-import { sortableHandle, sortableElement } from 'react-sortable-hoc';
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/es.regexp.to-string.js';
+import { memo, useMemo, useCallback } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
 import { capitalize, stripHTML } from '../../../utils/string.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTranslatedTexts } from '../../../utils/hooks.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import SvgDrag from '../../../assets/svg/settings/drag.svg.js';
 
-var DragHandle = sortableHandle(function () {
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var DragHandle = function DragHandle() {
   return /*#__PURE__*/jsx("span", {
     className: "jfReportSelectOption-drag",
     children: /*#__PURE__*/jsx(SvgDrag, {
       className: "jfReportSVG icon-drag"
     })
   });
-});
-var LayerItem = sortableElement(function (_ref) {
+};
+
+var LayerItem = function LayerItem(_ref) {
   var Icon = _ref.icon,
+      itemId = _ref.id,
       item = _ref.item,
       onItemChange = _ref.onItemChange,
       optionKey = _ref.optionKey,
       setActiveElement = _ref.setActiveElement;
+
+  var _useSortable = useSortable({
+    id: itemId
+  }),
+      attributes = _useSortable.attributes,
+      isDragging = _useSortable.isDragging,
+      listeners = _useSortable.listeners,
+      setNodeRef = _useSortable.setNodeRef,
+      transform = _useSortable.transform,
+      transition = _useSortable.transition;
+
+  var dragStyle = useMemo(function () {
+    return {
+      opacity: isDragging ? 0.5 : 1,
+      transform: CSS.Transform.toString(transform),
+      transition: transition
+    };
+  }, [transform, transition, isDragging]);
   var id = item.id,
       isVisible = item.isVisible;
   var isVisib = isVisible !== undefined ? isVisible : true;
+
+  var _useTranslatedTexts = useTranslatedTexts(),
+      CHART_ELEMENT = _useTranslatedTexts.CHART_ELEMENT,
+      CLICK_TO_EDIT_TEXT = _useTranslatedTexts.CLICK_TO_EDIT_TEXT,
+      CLIK_TO_EDIT_HEADER = _useTranslatedTexts.CLIK_TO_EDIT_HEADER,
+      PAGE_ELEMENT = _useTranslatedTexts.PAGE_ELEMENT,
+      RECTANGLE = _useTranslatedTexts.RECTANGLE;
+
   var handleItemLock = useCallback(function (_ref2) {
     var target = _ref2.target;
     onItemChange({
@@ -29,40 +68,40 @@ var LayerItem = sortableElement(function (_ref) {
     }, {
       isVisible: target.checked
     });
-  }, [id]);
-
-  var itemText = function itemText(passedItem) {
-    if (passedItem.itemType === 'shapes') {
-      return capitalize(passedItem.shapeType || 'Rectangle');
+  }, [id, onItemChange]);
+  var itemText = useMemo(function () {
+    if (item.itemType === 'shapes') {
+      return capitalize(item.shapeType || RECTANGLE);
     }
 
-    if (passedItem.itemType === 'chart') {
-      return passedItem.text || 'Chart Element';
+    if (item.itemType === 'chart') {
+      return item.text || CHART_ELEMENT;
     }
 
-    if (passedItem.itemType === 'header') {
-      return passedItem.headerText || 'Click to edit header';
+    if (item.itemType === 'header') {
+      return item.headerText || CLIK_TO_EDIT_HEADER;
     }
 
-    if (passedItem.itemType === 'text') {
-      return passedItem.value ? stripHTML(passedItem.value) : 'Click to edit text';
+    if (item.itemType === 'text') {
+      return item.value ? stripHTML(item.value) : CLICK_TO_EDIT_TEXT;
     }
 
-    return capitalize(passedItem.itemType || 'Page Element');
-  };
-
-  var content = /*#__PURE__*/jsxs("div", {
-    className: "jfReportSelectOption",
-    children: [/*#__PURE__*/jsx("div", {
-      className: "jfReportSelectOption-icon",
-      children: /*#__PURE__*/jsx(Icon, {})
-    }), /*#__PURE__*/jsx("div", {
-      className: "jfReportSelectOption-text",
-      children: itemText(item)
-    })]
-  });
-
-  return /*#__PURE__*/jsxs("div", {
+    return capitalize(item.itemType || PAGE_ELEMENT);
+  }, [item]);
+  var content = useMemo(function () {
+    return /*#__PURE__*/jsxs("div", {
+      className: "jfReportSelectOption",
+      children: [/*#__PURE__*/jsx("div", {
+        className: "jfReportSelectOption-icon",
+        children: /*#__PURE__*/jsx(Icon, {})
+      }), /*#__PURE__*/jsx("div", {
+        className: "jfReportSelectOption-text",
+        children: itemText
+      })]
+    });
+  }, [itemText]);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread(_objectSpread({
+    ref: setNodeRef,
     className: classNames('jfReportSelectOption', {
       isSelected: isVisib
     }),
@@ -70,6 +109,8 @@ var LayerItem = sortableElement(function (_ref) {
       return setActiveElement(id, false);
     },
     onKeyDown: function onKeyDown() {},
+    style: dragStyle
+  }, attributes), listeners), {}, {
     children: [/*#__PURE__*/jsx("div", {
       className: "jfReportSelectOption-visibility",
       children: /*#__PURE__*/jsxs("label", {
@@ -94,8 +135,25 @@ var LayerItem = sortableElement(function (_ref) {
       ,
       children: [/*#__PURE__*/jsx(DragHandle, {}), content]
     })]
-  });
-});
+  }));
+};
+
+LayerItem.propTypes = {
+  icon: PropTypes.elementType,
+  id: PropTypes.string,
+  item: PropTypes.shape({
+    headerText: PropTypes.string,
+    id: PropTypes.string,
+    isVisible: PropTypes.bool,
+    itemType: PropTypes.string,
+    shapeType: PropTypes.string,
+    text: PropTypes.string,
+    value: PropTypes.string
+  }),
+  onItemChange: PropTypes.func,
+  optionKey: PropTypes.string,
+  setActiveElement: PropTypes.func
+};
 var LayerItem$1 = /*#__PURE__*/memo(LayerItem);
 
 export default LayerItem$1;

package/lib/esm/components/Settings/PageLayer/LayerItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayerItem.js","sources":["../../../../../src/components/Settings/PageLayer/LayerItem.js"],"sourcesContent":["import { memo, useCallback } from 'react';\nimport { sortableElement, sortableHandle } from 'react-sortable-hoc';\nimport classNames from 'classnames';\nimport { capitalize, stripHTML } from '../../../utils/string';\nimport * as icons from '../../../utils/icons';\n\nconst DragHandle = sortableHandle(() => (\n  <span className=\"jfReportSelectOption-drag\">\n    <icons.drag className=\"jfReportSVG icon-drag\" />\n  </span>\n));\n\nconst LayerItem = sortableElement(({\n  icon: Icon,\n  item,\n  onItemChange,\n  optionKey,\n  setActiveElement,\n}) => {\n  const { id, isVisible } = item;\n  const isVisib = isVisible !== undefined ? isVisible : true;\n  const handleItemLock = useCallback(({ target }) => {\n    onItemChange({ id }, { isVisible: target.checked });\n  }, [id]);\n\n  const itemText = passedItem => {\n    if (passedItem.itemType === 'shapes') {\n      return capitalize(passedItem.shapeType || 'Rectangle');\n    }\n    if (passedItem.itemType === 'chart') {\n      return passedItem.text || 'Chart Element';\n    }\n    if (passedItem.itemType === 'header') {\n      return passedItem.headerText || 'Click to edit header';\n    }\n    if (passedItem.itemType === 'text') {\n      return passedItem.value ? stripHTML(passedItem.value) : 'Click to edit text';\n    }\n    return capitalize(passedItem.itemType || 'Page Element');\n  };\n  const content = (\n    <div className=\"jfReportSelectOption\">\n      <div className=\"jfReportSelectOption-icon\">\n        <Icon />\n      </div>\n      <div className=\"jfReportSelectOption-text\">\n        {itemText(item)}\n      </div>\n    </div>\n  );\n\n  return (\n    <div\n      className={classNames('jfReportSelectOption', {\n        isSelected: isVisib,\n      })}\n      onClick={() => setActiveElement(id, false)}\n      onKeyDown={() => {}}\n    >\n      <div className=\"jfReportSelectOption-visibility\">\n        <label\n          className=\"jfReportChoice isLight hasNotText\"\n          htmlFor={optionKey}\n        >\n          <input\n            checked={isVisib}\n            className=\"jfReportChoice-input\"\n            data-option-key={optionKey}\n            id={optionKey}\n            onChange={handleItemLock}\n            type=\"checkbox\"\n          />\n          <div className=\"jfReportChoice-labelIcon\">\n            <div className=\"jfReportChoice-label checkbox\" />\n          </div>\n        </label>\n      </div>\n      <div\n        className=\"jfReportSelectOption-name\"\n        // style={{ backgroundColor: option.color }}\n      >\n        <DragHandle />\n        {content}\n      </div>\n    </div>\n  );\n});\n\nexport default memo(LayerItem);\n"],"names":["DragHandle","sortableHandle","_jsx","icons.drag","LayerItem","sortableElement","Icon","icon","item","onItemChange","optionKey","setActiveElement","id","isVisible","isVisib","undefined","handleItemLock","useCallback","target","checked","itemText","passedItem","itemType","capitalize","shapeType","text","headerText","value","stripHTML","content","_jsxs","classNames","isSelected","memo"],"mappings":";;;;;;;AAMA,IAAMA,UAAU,GAAGC,cAAc,CAAC;AAAA,sBAChCC;AAAM,IAAA,SAAS,EAAC,2BAAhB;AAAA,2BACEA,IAACC,OAAD;AAAY,MAAA,SAAS,EAAC;AAAtB;AADF,IADgC;AAAA,CAAD,CAAjC;AAMA,IAAMC,SAAS,GAAGC,eAAe,CAAC,gBAM5B;AAAA,MALEC,IAKF,QALJC,IAKI;AAAA,MAJJC,IAII,QAJJA,IAII;AAAA,MAHJC,YAGI,QAHJA,YAGI;AAAA,MAFJC,SAEI,QAFJA,SAEI;AAAA,MADJC,gBACI,QADJA,gBACI;AACJ,MAAQC,EAAR,GAA0BJ,IAA1B,CAAQI,EAAR;AAAA,MAAYC,SAAZ,GAA0BL,IAA1B,CAAYK,SAAZ;AACA,MAAMC,OAAO,GAAGD,SAAS,KAAKE,SAAd,GAA0BF,SAA1B,GAAsC,IAAtD;AACA,MAAMG,cAAc,GAAGC,WAAW,CAAC,iBAAgB;AAAA,QAAbC,MAAa,SAAbA,MAAa;AACjDT,IAAAA,YAAY,CAAC;AAAEG,MAAAA,EAAE,EAAFA;AAAF,KAAD,EAAS;AAAEC,MAAAA,SAAS,EAAEK,MAAM,CAACC;AAApB,KAAT,CAAZ;AACD,GAFiC,EAE/B,CAACP,EAAD,CAF+B,CAAlC;;AAIA,MAAMQ,QAAQ,GAAG,SAAXA,QAAW,CAAAC,UAAU,EAAI;AAC7B,QAAIA,UAAU,CAACC,QAAX,KAAwB,QAA5B,EAAsC;AACpC,aAAOC,UAAU,CAACF,UAAU,CAACG,SAAX,IAAwB,WAAzB,CAAjB;AACD;;AACD,QAAIH,UAAU,CAACC,QAAX,KAAwB,OAA5B,EAAqC;AACnC,aAAOD,UAAU,CAACI,IAAX,IAAmB,eAA1B;AACD;;AACD,QAAIJ,UAAU,CAACC,QAAX,KAAwB,QAA5B,EAAsC;AACpC,aAAOD,UAAU,CAACK,UAAX,IAAyB,sBAAhC;AACD;;AACD,QAAIL,UAAU,CAACC,QAAX,KAAwB,MAA5B,EAAoC;AAClC,aAAOD,UAAU,CAACM,KAAX,GAAmBC,SAAS,CAACP,UAAU,CAACM,KAAZ,CAA5B,GAAiD,oBAAxD;AACD;;AACD,WAAOJ,UAAU,CAACF,UAAU,CAACC,QAAX,IAAuB,cAAxB,CAAjB;AACD,GAdD;;AAeA,MAAMO,OAAO,gBACXC;AAAK,IAAA,SAAS,EAAC,sBAAf;AAAA,4BACE5B;AAAK,MAAA,SAAS,EAAC,2BAAf;AAAA,6BACEA,IAAC,IAAD;AADF,MADF,eAIEA;AAAK,MAAA,SAAS,EAAC,2BAAf;AAAA,gBACGkB,QAAQ,CAACZ,IAAD;AADX,MAJF;AAAA,IADF;;AAWA,sBACEsB;AACE,IAAA,SAAS,EAAEC,UAAU,CAAC,sBAAD,EAAyB;AAC5CC,MAAAA,UAAU,EAAElB;AADgC,KAAzB,CADvB;AAIE,IAAA,OAAO,EAAE;AAAA,aAAMH,gBAAgB,CAACC,EAAD,EAAK,KAAL,CAAtB;AAAA,KAJX;AAKE,IAAA,SAAS,EAAE,qBAAM,EALnB;AAAA,4BAOEV;AAAK,MAAA,SAAS,EAAC,iCAAf;AAAA,6BACE4B;AACE,QAAA,SAAS,EAAC,mCADZ;AAEE,QAAA,OAAO,EAAEpB,SAFX;AAAA,gCAIER;AACE,UAAA,OAAO,EAAEY,OADX;AAEE,UAAA,SAAS,EAAC,sBAFZ;AAGE,6BAAiBJ,SAHnB;AAIE,UAAA,EAAE,EAAEA,SAJN;AAKE,UAAA,QAAQ,EAAEM,cALZ;AAME,UAAA,IAAI,EAAC;AANP,UAJF,eAYEd;AAAK,UAAA,SAAS,EAAC,0BAAf;AAAA,iCACEA;AAAK,YAAA,SAAS,EAAC;AAAf;AADF,UAZF;AAAA;AADF,MAPF,eAyBE4B;AACE,MAAA,SAAS,EAAC,2BADZ;AAAA;AAAA,8BAIE5B,IAAC,UAAD,KAJF,EAKG2B,OALH;AAAA,MAzBF;AAAA,IADF;AAmCD,CA1EgC,CAAjC;AA4EA,+BAAeI,IAAI,CAAC7B,SAAD,CAAnB;;;;"}
+{"version":3,"file":"LayerItem.js","sources":["../../../../../src/components/Settings/PageLayer/LayerItem.js"],"sourcesContent":["import { memo, useCallback, useMemo } from 'react';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport { capitalize, stripHTML } from '../../../utils/string';\nimport * as icons from '../../../utils/icons';\nimport { useTranslatedTexts } from '../../../utils/hooks';\n\nconst DragHandle = () => (\n  <span className=\"jfReportSelectOption-drag\">\n    <icons.drag className=\"jfReportSVG icon-drag\" />\n  </span>\n);\n\nconst LayerItem = ({\n  icon: Icon,\n  id: itemId,\n  item,\n  onItemChange,\n  optionKey,\n  setActiveElement,\n}) => {\n  const {\n    attributes,\n    isDragging,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n  } = useSortable({ id: itemId });\n\n  const dragStyle = useMemo(() => ({\n    opacity: isDragging ? 0.5 : 1,\n    transform: CSS.Transform.toString(transform),\n    transition: transition,\n  }), [transform, transition, isDragging]);\n\n  const { id, isVisible } = item;\n  const isVisib = isVisible !== undefined ? isVisible : true;\n\n  const {\n    CHART_ELEMENT,\n    CLICK_TO_EDIT_TEXT,\n    CLIK_TO_EDIT_HEADER,\n    PAGE_ELEMENT,\n    RECTANGLE,\n  } = useTranslatedTexts();\n\n  const handleItemLock = useCallback(({ target }) => {\n    onItemChange({ id }, { isVisible: target.checked });\n  }, [id, onItemChange]);\n\n  const itemText = useMemo(() => {\n    if (item.itemType === 'shapes') {\n      return capitalize(item.shapeType || RECTANGLE);\n    }\n    if (item.itemType === 'chart') {\n      return item.text || CHART_ELEMENT;\n    }\n    if (item.itemType === 'header') {\n      return item.headerText || CLIK_TO_EDIT_HEADER;\n    }\n    if (item.itemType === 'text') {\n      return item.value ? stripHTML(item.value) : CLICK_TO_EDIT_TEXT;\n    }\n    return capitalize(item.itemType || PAGE_ELEMENT);\n  }, [item]);\n\n  const content = useMemo(() => (\n    <div className=\"jfReportSelectOption\">\n      <div className=\"jfReportSelectOption-icon\">\n        <Icon />\n      </div>\n      <div className=\"jfReportSelectOption-text\">\n        {itemText}\n      </div>\n    </div>\n  ), [itemText]);\n\n  return (\n    <div\n      ref={setNodeRef}\n      className={classNames('jfReportSelectOption', {\n        isSelected: isVisib,\n      })}\n      onClick={() => setActiveElement(id, false)}\n      onKeyDown={() => {}}\n      style={dragStyle}\n      {...attributes}\n      {...listeners}\n    >\n      <div className=\"jfReportSelectOption-visibility\">\n        <label\n          className=\"jfReportChoice isLight hasNotText\"\n          htmlFor={optionKey}\n        >\n          <input\n            checked={isVisib}\n            className=\"jfReportChoice-input\"\n            data-option-key={optionKey}\n            id={optionKey}\n            onChange={handleItemLock}\n            type=\"checkbox\"\n          />\n          <div className=\"jfReportChoice-labelIcon\">\n            <div className=\"jfReportChoice-label checkbox\" />\n          </div>\n        </label>\n      </div>\n      <div\n        className=\"jfReportSelectOption-name\"\n        // style={{ backgroundColor: option.color }}\n      >\n        <DragHandle />\n        {content}\n      </div>\n    </div>\n  );\n};\n\nLayerItem.propTypes = {\n  icon: PropTypes.elementType,\n  id: PropTypes.string,\n  item: PropTypes.shape({\n    headerText: PropTypes.string,\n    id: PropTypes.string,\n    isVisible: PropTypes.bool,\n    itemType: PropTypes.string,\n    shapeType: PropTypes.string,\n    text: PropTypes.string,\n    value: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n  optionKey: PropTypes.string,\n  setActiveElement: PropTypes.func,\n};\n\nexport default memo(LayerItem);\n"],"names":["DragHandle","_jsx","icons.drag","LayerItem","Icon","icon","itemId","id","item","onItemChange","optionKey","setActiveElement","useSortable","attributes","isDragging","listeners","setNodeRef","transform","transition","dragStyle","useMemo","opacity","CSS","Transform","toString","isVisible","isVisib","undefined","useTranslatedTexts","CHART_ELEMENT","CLICK_TO_EDIT_TEXT","CLIK_TO_EDIT_HEADER","PAGE_ELEMENT","RECTANGLE","handleItemLock","useCallback","target","checked","itemText","itemType","capitalize","shapeType","text","headerText","value","stripHTML","content","_jsxs","classNames","isSelected","propTypes","PropTypes","elementType","string","shape","bool","func","memo"],"mappings":"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"}

package/lib/esm/components/Settings/PageLayer/PageLayer.js

@@ -1,70 +1,140 @@
+import 'core-js/modules/es.array.find.js';
+import 'core-js/modules/es.array.find-index.js';
 import 'core-js/modules/es.array.map.js';
-import { useCallback } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { sortableContainer } from 'react-sortable-hoc';
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { arrayMove } from '../../../utils/functions.js';
 import LayerItem from './LayerItem.js';
+import LayerDragOverlay from './LayerDragOverlay.js';
 import { elementIcons } from '../../../constants/elementIcons.js';
 import { useTranslatedTexts } from '../../../utils/hooks.js';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-var SortableContainer = sortableContainer(function (_ref) {
-  var children = _ref.children,
-      onScroll = _ref.onScroll;
-  return /*#__PURE__*/jsx("ul", {
-    className: "jfReportSelectOption-list withDnd forPageLayer",
-    onScroll: onScroll,
-    children: children
-  });
-});
-
-var PageLayer = function PageLayer(_ref2) {
-  var config = _ref2.config,
-      page = _ref2.item,
-      onItemChange = _ref2.onItemChange;
-  var onSortEnd = useCallback(function (_ref3) {
-    var newIndex = _ref3.newIndex,
-        oldIndex = _ref3.oldIndex;
-    var newItems = arrayMove(_toConsumableArray(page.items).reverse(), oldIndex, newIndex).map(function (i) {
-      return i.id;
-    });
-    onItemChange({
-      id: page.id
-    }, {
-      items: JSON.stringify(_toConsumableArray(newItems).reverse())
-    });
-  }, [page.id, onItemChange, page.items]);
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var PageLayer = function PageLayer(_ref) {
+  var _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config,
+      _ref$item = _ref.item,
+      page = _ref$item === void 0 ? {} : _ref$item,
+      _ref$onItemChange = _ref.onItemChange,
+      onItemChange = _ref$onItemChange === void 0 ? function () {} : _ref$onItemChange;
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      activeId = _useState2[0],
+      setActiveId = _useState2[1];
+
+  var sensors = useSensors(useSensor(PointerSensor, {
+    activationConstraint: {
+      distance: 0
+    }
+  }), useSensor(KeyboardSensor));
+  var handleDragStart = useCallback(function (event) {
+    setActiveId(event.active.id);
+  }, []);
+  var handleDragEnd = useCallback(function (event) {
+    var active = event.active,
+        over = event.over;
+    setActiveId(null);
+
+    if (over && active.id !== over.id) {
+      var reversedItems = _toConsumableArray(page.items).reverse();
+
+      var oldIndex = reversedItems.findIndex(function (item) {
+        return item.id === active.id;
+      });
+      var newIndex = reversedItems.findIndex(function (item) {
+        return item.id === over.id;
+      });
+
+      if (oldIndex !== -1 && newIndex !== -1) {
+        var newItems = arrayMove(reversedItems, oldIndex, newIndex).map(function (i) {
+          return i.id;
+        });
+        onItemChange({
+          id: page.id
+        }, {
+          items: JSON.stringify(_toConsumableArray(newItems).reverse())
+        });
+      }
+    }
+  }, [page.id, page.items, onItemChange]);
+  var handleDragCancel = useCallback(function () {
+    setActiveId(null);
+  }, []);
 
   var _useTranslatedTexts = useTranslatedTexts(),
       NO_ELEMENT_IN_PAGE = _useTranslatedTexts.NO_ELEMENT_IN_PAGE;
 
-  return page.items.length > 0 ? /*#__PURE__*/jsx(SortableContainer, {
-    helperClass: "forHelper withDnd",
-    lockAxis: "y",
-    onSortEnd: onSortEnd,
-    useDragHandle: true,
-    children: page.items && _toConsumableArray(page.items).reverse().map(function (item, index) {
-      var icon = elementIcons[item.itemType] ? elementIcons[item.itemType] : elementIcons.default;
-      return /*#__PURE__*/jsx(LayerItem, {
-        icon: icon,
-        index: index,
-        item: item,
-        onItemChange: config.updater,
-        optionKey: index,
-        setActiveElement: config.setActiveElement
-      }, item.id);
-    })
+  var items = useMemo(function () {
+    if (!page.items || page.items.length === 0) return [];
+    return _toConsumableArray(page.items).reverse().map(function (item) {
+      return item.id;
+    });
+  }, [page.items]);
+  var activeItemData = useMemo(function () {
+    if (!activeId || !page.items) return null;
+
+    var reversedItems = _toConsumableArray(page.items).reverse();
+
+    var activeItem = reversedItems.find(function (item) {
+      return item.id === activeId;
+    });
+    if (!activeItem) return null;
+    var icon = elementIcons[activeItem.itemType] ? elementIcons[activeItem.itemType] : elementIcons.default;
+    return {
+      icon: icon,
+      item: activeItem
+    };
+  }, [activeId, page.items]);
+  return page.items && page.items.length > 0 ? /*#__PURE__*/jsxs(DndContext, {
+    collisionDetection: closestCenter,
+    onDragCancel: handleDragCancel,
+    onDragEnd: handleDragEnd,
+    onDragStart: handleDragStart,
+    sensors: sensors,
+    children: [/*#__PURE__*/jsx(SortableContext, {
+      items: items,
+      strategy: verticalListSortingStrategy,
+      children: /*#__PURE__*/jsx("ul", {
+        className: "jfReportSelectOption-list withDnd forPageLayer",
+        children: _toConsumableArray(page.items).reverse().map(function (item, index) {
+          var icon = elementIcons[item.itemType] ? elementIcons[item.itemType] : elementIcons.default;
+          return /*#__PURE__*/jsx(LayerItem, {
+            icon: icon,
+            id: item.id,
+            index: index,
+            item: item,
+            onItemChange: config.updater,
+            optionKey: index,
+            setActiveElement: config.setActiveElement
+          }, item.id);
+        })
+      })
+    }), /*#__PURE__*/jsx(LayerDragOverlay, {
+      activeItemData: activeItemData
+    })]
   }) : /*#__PURE__*/jsx("div", {
     className: "toolSection-notifier",
     children: NO_ELEMENT_IN_PAGE
@@ -83,11 +153,6 @@ PageLayer.propTypes = {
   }),
   onItemChange: PropTypes.func
 };
-PageLayer.defaultProps = {
-  config: {},
-  item: {},
-  onItemChange: function onItemChange() {}
-};
 
 export default PageLayer;
 //# sourceMappingURL=PageLayer.js.map

package/lib/esm/components/Settings/PageLayer/PageLayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageLayer.js","sources":["../../../../../src/components/Settings/PageLayer/PageLayer.js"],"sourcesContent":["import { useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport { sortableContainer } from 'react-sortable-hoc';\nimport { arrayMove } from '../../../utils/functions';\nimport LayerItem from './LayerItem';\nimport { elementIcons } from '../../../constants/elementIcons';\nimport { useTranslatedTexts } from '../../../utils/hooks';\n\nconst SortableContainer = sortableContainer(({ children, onScroll }) => {\n  return (\n    <ul\n      className=\"jfReportSelectOption-list withDnd forPageLayer\"\n      onScroll={onScroll}\n    >\n      {children}\n    </ul>\n  );\n});\n\nconst PageLayer = ({\n  config,\n  item: page,\n  onItemChange,\n}) => {\n  const onSortEnd = useCallback(({ newIndex, oldIndex }) => {\n    const newItems = arrayMove([...page.items].reverse(), oldIndex, newIndex).map(i => i.id);\n    onItemChange({\n      id: page.id,\n    }, { items: JSON.stringify([...newItems].reverse()) });\n  }, [page.id, onItemChange, page.items]);\n  const { NO_ELEMENT_IN_PAGE } = useTranslatedTexts();\n  return (\n    page.items.length > 0 ? (\n      <SortableContainer\n        helperClass=\"forHelper withDnd\"\n        lockAxis=\"y\"\n        onSortEnd={onSortEnd}\n        useDragHandle\n      >\n        {page.items && [...page.items].reverse().map((item, index) => {\n          const icon = elementIcons[item.itemType]\n            ? elementIcons[item.itemType]\n            : elementIcons.default;\n          return (\n            <LayerItem\n              key={item.id}\n              icon={icon}\n              index={index}\n              item={item}\n              onItemChange={config.updater}\n              optionKey={index}\n              setActiveElement={config.setActiveElement}\n            />\n          );\n        })}\n      </SortableContainer>\n    ) : (\n      <div\n        className=\"toolSection-notifier\"\n      >\n        {NO_ELEMENT_IN_PAGE}\n      </div>\n    )\n  );\n};\n\nPageLayer.propTypes = {\n  config: PropTypes.shape({\n    setActiveElement: PropTypes.func,\n    updater: PropTypes.func,\n  }),\n  item: PropTypes.shape({\n    id: PropTypes.string,\n    isVisible: PropTypes.bool,\n    itemType: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n};\n\nPageLayer.defaultProps = {\n  config: {},\n  item: {},\n  onItemChange: () => {},\n};\n\nexport default PageLayer;\n"],"names":["SortableContainer","sortableContainer","children","onScroll","_jsx","PageLayer","config","page","item","onItemChange","onSortEnd","useCallback","newIndex","oldIndex","newItems","arrayMove","items","reverse","map","i","id","JSON","stringify","useTranslatedTexts","NO_ELEMENT_IN_PAGE","length","index","icon","elementIcons","itemType","default","updater","setActiveElement","propTypes","PropTypes","shape","func","string","isVisible","bool","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAQA,IAAMA,iBAAiB,GAAGC,iBAAiB,CAAC,gBAA4B;AAAA,MAAzBC,QAAyB,QAAzBA,QAAyB;AAAA,MAAfC,QAAe,QAAfA,QAAe;AACtE,sBACEC;AACE,IAAA,SAAS,EAAC,gDADZ;AAEE,IAAA,QAAQ,EAAED,QAFZ;AAAA,cAIGD;AAJH,IADF;AAQD,CAT0C,CAA3C;;IAWMG,SAAS,GAAG,SAAZA,SAAY,QAIZ;AAAA,MAHJC,MAGI,SAHJA,MAGI;AAAA,MAFEC,IAEF,SAFJC,IAEI;AAAA,MADJC,YACI,SADJA,YACI;AACJ,MAAMC,SAAS,GAAGC,WAAW,CAAC,iBAA4B;AAAA,QAAzBC,QAAyB,SAAzBA,QAAyB;AAAA,QAAfC,QAAe,SAAfA,QAAe;AACxD,QAAMC,QAAQ,GAAGC,SAAS,CAAC,mBAAIR,IAAI,CAACS,KAAT,EAAgBC,OAAhB,EAAD,EAA4BJ,QAA5B,EAAsCD,QAAtC,CAAT,CAAyDM,GAAzD,CAA6D,UAAAC,CAAC;AAAA,aAAIA,CAAC,CAACC,EAAN;AAAA,KAA9D,CAAjB;AACAX,IAAAA,YAAY,CAAC;AACXW,MAAAA,EAAE,EAAEb,IAAI,CAACa;AADE,KAAD,EAET;AAAEJ,MAAAA,KAAK,EAAEK,IAAI,CAACC,SAAL,CAAe,mBAAIR,QAAJ,EAAcG,OAAd,EAAf;AAAT,KAFS,CAAZ;AAGD,GAL4B,EAK1B,CAACV,IAAI,CAACa,EAAN,EAAUX,YAAV,EAAwBF,IAAI,CAACS,KAA7B,CAL0B,CAA7B;;AAMA,4BAA+BO,kBAAkB,EAAjD;AAAA,MAAQC,kBAAR,uBAAQA,kBAAR;;AACA,SACEjB,IAAI,CAACS,KAAL,CAAWS,MAAX,GAAoB,CAApB,gBACErB,IAAC,iBAAD;AACE,IAAA,WAAW,EAAC,mBADd;AAEE,IAAA,QAAQ,EAAC,GAFX;AAGE,IAAA,SAAS,EAAEM,SAHb;AAIE,IAAA,aAAa,MAJf;AAAA,cAMGH,IAAI,CAACS,KAAL,IAAc,mBAAIT,IAAI,CAACS,KAAT,EAAgBC,OAAhB,GAA0BC,GAA1B,CAA8B,UAACV,IAAD,EAAOkB,KAAP,EAAiB;AAC5D,UAAMC,IAAI,GAAGC,YAAY,CAACpB,IAAI,CAACqB,QAAN,CAAZ,GACTD,YAAY,CAACpB,IAAI,CAACqB,QAAN,CADH,GAETD,YAAY,CAACE,OAFjB;AAGA,0BACE1B,IAAC,SAAD;AAEE,QAAA,IAAI,EAAEuB,IAFR;AAGE,QAAA,KAAK,EAAED,KAHT;AAIE,QAAA,IAAI,EAAElB,IAJR;AAKE,QAAA,YAAY,EAAEF,MAAM,CAACyB,OALvB;AAME,QAAA,SAAS,EAAEL,KANb;AAOE,QAAA,gBAAgB,EAAEpB,MAAM,CAAC0B;AAP3B,SACOxB,IAAI,CAACY,EADZ,CADF;AAWD,KAfc;AANjB,IADF,gBAyBEhB;AACE,IAAA,SAAS,EAAC,sBADZ;AAAA,cAGGoB;AAHH,IA1BJ;AAiCD;;AAEDnB,SAAS,CAAC4B,SAAV,GAAsB;AACpB3B,EAAAA,MAAM,EAAE4B,SAAS,CAACC,KAAV,CAAgB;AACtBH,IAAAA,gBAAgB,EAAEE,SAAS,CAACE,IADN;AAEtBL,IAAAA,OAAO,EAAEG,SAAS,CAACE;AAFG,GAAhB,CADY;AAKpB5B,EAAAA,IAAI,EAAE0B,SAAS,CAACC,KAAV,CAAgB;AACpBf,IAAAA,EAAE,EAAEc,SAAS,CAACG,MADM;AAEpBC,IAAAA,SAAS,EAAEJ,SAAS,CAACK,IAFD;AAGpBV,IAAAA,QAAQ,EAAEK,SAAS,CAACG;AAHA,GAAhB,CALc;AAUpB5B,EAAAA,YAAY,EAAEyB,SAAS,CAACE;AAVJ,CAAtB;AAaA/B,SAAS,CAACmC,YAAV,GAAyB;AACvBlC,EAAAA,MAAM,EAAE,EADe;AAEvBE,EAAAA,IAAI,EAAE,EAFiB;AAGvBC,EAAAA,YAAY,EAAE,wBAAM;AAHG,CAAzB;;;;"}
+{"version":3,"file":"PageLayer.js","sources":["../../../../../src/components/Settings/PageLayer/PageLayer.js"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors,\n} from '@dnd-kit/core';\nimport { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport { arrayMove } from '../../../utils/functions';\nimport LayerItem from './LayerItem';\nimport LayerDragOverlay from './LayerDragOverlay';\nimport { elementIcons } from '../../../constants/elementIcons';\nimport { useTranslatedTexts } from '../../../utils/hooks';\n\nconst PageLayer = ({\n  config = {},\n  item: page = {},\n  onItemChange = () => {},\n}) => {\n  const [activeId, setActiveId] = useState(null);\n\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: {\n        distance: 0,\n      },\n    }),\n    useSensor(KeyboardSensor),\n  );\n\n  const handleDragStart = useCallback(event => {\n    setActiveId(event.active.id);\n  }, []);\n\n  const handleDragEnd = useCallback(event => {\n    const { active, over } = event;\n    setActiveId(null);\n\n    if (over && active.id !== over.id) {\n      const reversedItems = [...page.items].reverse();\n      const oldIndex = reversedItems.findIndex(item => item.id === active.id);\n      const newIndex = reversedItems.findIndex(item => item.id === over.id);\n\n      if (oldIndex !== -1 && newIndex !== -1) {\n        const newItems = arrayMove(reversedItems, oldIndex, newIndex).map(i => i.id);\n        onItemChange({\n          id: page.id,\n        }, { items: JSON.stringify([...newItems].reverse()) });\n      }\n    }\n  }, [page.id, page.items, onItemChange]);\n\n  const handleDragCancel = useCallback(() => {\n    setActiveId(null);\n  }, []);\n\n  const { NO_ELEMENT_IN_PAGE } = useTranslatedTexts();\n\n  const items = useMemo(() => {\n    if (!page.items || page.items.length === 0) return [];\n    return [...page.items].reverse().map(item => item.id);\n  }, [page.items]);\n\n  const activeItemData = useMemo(() => {\n    if (!activeId || !page.items) return null;\n\n    const reversedItems = [...page.items].reverse();\n    const activeItem = reversedItems.find(item => item.id === activeId);\n    if (!activeItem) return null;\n\n    const icon = elementIcons[activeItem.itemType]\n      ? elementIcons[activeItem.itemType]\n      : elementIcons.default;\n\n    return {\n      icon,\n      item: activeItem,\n    };\n  }, [activeId, page.items]);\n\n  return (\n    page.items && page.items.length > 0 ? (\n      <DndContext\n        collisionDetection={closestCenter}\n        onDragCancel={handleDragCancel}\n        onDragEnd={handleDragEnd}\n        onDragStart={handleDragStart}\n        sensors={sensors}\n      >\n        <SortableContext\n          items={items}\n          strategy={verticalListSortingStrategy}\n        >\n          <ul className=\"jfReportSelectOption-list withDnd forPageLayer\">\n            {[...page.items].reverse().map((item, index) => {\n              const icon = elementIcons[item.itemType]\n                ? elementIcons[item.itemType]\n                : elementIcons.default;\n              return (\n                <LayerItem\n                  key={item.id}\n                  icon={icon}\n                  id={item.id}\n                  index={index}\n                  item={item}\n                  onItemChange={config.updater}\n                  optionKey={index}\n                  setActiveElement={config.setActiveElement}\n                />\n              );\n            })}\n          </ul>\n        </SortableContext>\n        <LayerDragOverlay activeItemData={activeItemData} />\n      </DndContext>\n    ) : (\n      <div className=\"toolSection-notifier\">\n        {NO_ELEMENT_IN_PAGE}\n      </div>\n    )\n  );\n};\n\nPageLayer.propTypes = {\n  config: PropTypes.shape({\n    setActiveElement: PropTypes.func,\n    updater: PropTypes.func,\n  }),\n  item: PropTypes.shape({\n    id: PropTypes.string,\n    isVisible: PropTypes.bool,\n    itemType: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n};\n\nexport default PageLayer;\n"],"names":["PageLayer","config","item","page","onItemChange","useState","activeId","setActiveId","sensors","useSensors","useSensor","PointerSensor","activationConstraint","distance","KeyboardSensor","handleDragStart","useCallback","event","active","id","handleDragEnd","over","reversedItems","items","reverse","oldIndex","findIndex","newIndex","newItems","arrayMove","map","i","JSON","stringify","handleDragCancel","useTranslatedTexts","NO_ELEMENT_IN_PAGE","useMemo","length","activeItemData","activeItem","find","icon","elementIcons","itemType","default","_jsxs","closestCenter","_jsx","verticalListSortingStrategy","index","updater","setActiveElement","propTypes","PropTypes","shape","func","string","isVisible","bool"],"mappings":"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"}