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

package/lib/cjs/components/Panels/AllSlidesPanel/PageItem.js

@@ -1,8 +1,12 @@
 'use strict';
 
+require('core-js/modules/es.object.to-string.js');
+require('core-js/modules/es.regexp.to-string.js');
 var React = require('react');
-var reactSortableHoc = require('react-sortable-hoc');
+var sortable = require('@dnd-kit/sortable');
+var utilities = require('@dnd-kit/utilities');
 var classNames = require('classnames');
+var PropTypes = require('prop-types');
 var StaticPage = require('../../Preview/StaticPage.js');
 var PageThumbnailActions = require('./PageThumbnailActions.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -10,27 +14,48 @@ var jsxRuntime = require('react/jsx-runtime');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var PageItem = reactSortableHoc.SortableElement(function (_ref) {
-  var acceptedItems = _ref.acceptedItems,
-      additionalPageItems = _ref.additionalPageItems,
-      hashCode = _ref.hashCode,
+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 PageItem = function PageItem(_ref) {
+  var id = _ref.id,
       isSelected = _ref.isSelected,
-      itemAccessor = _ref.itemAccessor,
-      onAnEventTrigger = _ref.onAnEventTrigger,
-      onPageAdd = _ref.onPageAdd,
       onPageClick = _ref.onPageClick,
-      onPageDuplicate = _ref.onPageDuplicate,
-      onPageRemove = _ref.onPageRemove,
       order = _ref.order,
       page = _ref.page,
       style = _ref.style;
 
+  var _useSortable = sortable.useSortable({
+    id: id
+  }),
+      attributes = _useSortable.attributes,
+      isDragging = _useSortable.isDragging,
+      listeners = _useSortable.listeners,
+      setNodeRef = _useSortable.setNodeRef,
+      transform = _useSortable.transform,
+      transition = _useSortable.transition;
+
+  var dragStyle = React.useMemo(function () {
+    var opacity = isDragging ? 0.5 : 1;
+    var transitionValue = isDragging ? 'none' : transition;
+    return {
+      opacity: opacity,
+      transform: utilities.CSS.Transform.toString(transform),
+      transition: transitionValue
+    };
+  }, [transform, transition, isDragging]);
+
   var onKeyDown = function onKeyDown(f) {
     return f;
   };
 
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread(_objectSpread({
+    ref: setNodeRef,
     className: classNames__default['default']('thumbnailWrapper d-flex dir-col a-center j-center p-relative', {
       isSelected: isSelected
     }),
@@ -38,29 +63,39 @@ var PageItem = reactSortableHoc.SortableElement(function (_ref) {
     "data-order": order,
     onClick: onPageClick,
     onKeyDown: onKeyDown,
+    style: dragStyle
+  }, attributes), listeners), {}, {
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "thumbnailOrder",
       children: order
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "thumbnailFrame o-hidden",
       children: /*#__PURE__*/jsxRuntime.jsx(StaticPage['default'], {
-        acceptedItems: acceptedItems,
-        additionalPageItems: additionalPageItems,
-        hashCode: hashCode,
-        itemAccessor: itemAccessor,
         items: page.items,
         style: style
       })
     }), /*#__PURE__*/jsxRuntime.jsx(PageThumbnailActions, {
-      onAnEventTrigger: onAnEventTrigger,
-      onPageAdd: onPageAdd,
-      onPageDuplicate: onPageDuplicate,
-      onPageRemove: onPageRemove,
       order: order,
       page: page
     })]
-  });
-});
+  }));
+};
+
+PageItem.propTypes = {
+  id: PropTypes__default['default'].string.isRequired,
+  isSelected: PropTypes__default['default'].bool,
+  onPageClick: PropTypes__default['default'].func,
+  order: PropTypes__default['default'].number,
+  page: PropTypes__default['default'].shape({
+    id: PropTypes__default['default'].string.isRequired,
+    items: PropTypes__default['default'].arrayOf(PropTypes__default['default'].shape({}))
+  }),
+  style: PropTypes__default['default'].shape({
+    opacity: PropTypes__default['default'].number,
+    transform: PropTypes__default['default'].string,
+    transition: PropTypes__default['default'].string
+  })
+};
 var PageItem$1 = /*#__PURE__*/React.memo(PageItem);
 
 module.exports = PageItem$1;

package/lib/cjs/components/Panels/AllSlidesPanel/PageItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageItem.js","sources":["../../../../../src/components/Panels/AllSlidesPanel/PageItem.js"],"sourcesContent":["import { memo } from 'react';\nimport { SortableElement } from 'react-sortable-hoc';\nimport classNames from 'classnames';\nimport StaticPage from '../../Preview/StaticPage';\nimport PageThumbnailActions from './PageThumbnailActions';\n\nconst PageItem = SortableElement(({\n  acceptedItems,\n  additionalPageItems,\n  hashCode,\n  isSelected,\n  itemAccessor,\n  onAnEventTrigger,\n  onPageAdd,\n  onPageClick,\n  onPageDuplicate,\n  onPageRemove,\n  order,\n  page,\n  style,\n}) => {\n  const onKeyDown = f => f;\n  return (\n    <div\n      className={(\n        classNames('thumbnailWrapper d-flex dir-col a-center j-center p-relative', { isSelected })\n      )}\n      data-id={page.id}\n      data-order={order}\n      onClick={onPageClick}\n      onKeyDown={onKeyDown}\n    >\n      <div className=\"thumbnailOrder\">{order}</div>\n      <div className=\"thumbnailFrame o-hidden\">\n        <StaticPage\n          acceptedItems={acceptedItems}\n          additionalPageItems={additionalPageItems}\n          hashCode={hashCode}\n          itemAccessor={itemAccessor}\n          items={page.items}\n          style={style}\n        />\n      </div>\n      <PageThumbnailActions\n        onAnEventTrigger={onAnEventTrigger}\n        onPageAdd={onPageAdd}\n        onPageDuplicate={onPageDuplicate}\n        onPageRemove={onPageRemove}\n        order={order}\n        page={page}\n      />\n    </div>\n  );\n});\n\nexport default memo(PageItem);\n"],"names":["PageItem","SortableElement","acceptedItems","additionalPageItems","hashCode","isSelected","itemAccessor","onAnEventTrigger","onPageAdd","onPageClick","onPageDuplicate","onPageRemove","order","page","style","onKeyDown","f","_jsxs","classNames","id","_jsx","StaticPage","items","memo"],"mappings":";;;;;;;;;;;;;AAMA,IAAMA,QAAQ,GAAGC,gCAAe,CAAC,gBAc3B;AAAA,MAbJC,aAaI,QAbJA,aAaI;AAAA,MAZJC,mBAYI,QAZJA,mBAYI;AAAA,MAXJC,QAWI,QAXJA,QAWI;AAAA,MAVJC,UAUI,QAVJA,UAUI;AAAA,MATJC,YASI,QATJA,YASI;AAAA,MARJC,gBAQI,QARJA,gBAQI;AAAA,MAPJC,SAOI,QAPJA,SAOI;AAAA,MANJC,WAMI,QANJA,WAMI;AAAA,MALJC,eAKI,QALJA,eAKI;AAAA,MAJJC,YAII,QAJJA,YAII;AAAA,MAHJC,KAGI,QAHJA,KAGI;AAAA,MAFJC,IAEI,QAFJA,IAEI;AAAA,MADJC,KACI,QADJA,KACI;;AACJ,MAAMC,SAAS,GAAG,SAAZA,SAAY,CAAAC,CAAC;AAAA,WAAIA,CAAJ;AAAA,GAAnB;;AACA,sBACEC;AACE,IAAA,SAAS,EACPC,8BAAU,CAAC,8DAAD,EAAiE;AAAEb,MAAAA,UAAU,EAAVA;AAAF,KAAjE,CAFd;AAIE,eAASQ,IAAI,CAACM,EAJhB;AAKE,kBAAYP,KALd;AAME,IAAA,OAAO,EAAEH,WANX;AAOE,IAAA,SAAS,EAAEM,SAPb;AAAA,4BASEK;AAAK,MAAA,SAAS,EAAC,gBAAf;AAAA,gBAAiCR;AAAjC,MATF,eAUEQ;AAAK,MAAA,SAAS,EAAC,yBAAf;AAAA,6BACEA,eAACC,qBAAD;AACE,QAAA,aAAa,EAAEnB,aADjB;AAEE,QAAA,mBAAmB,EAAEC,mBAFvB;AAGE,QAAA,QAAQ,EAAEC,QAHZ;AAIE,QAAA,YAAY,EAAEE,YAJhB;AAKE,QAAA,KAAK,EAAEO,IAAI,CAACS,KALd;AAME,QAAA,KAAK,EAAER;AANT;AADF,MAVF,eAoBEM,eAAC,oBAAD;AACE,MAAA,gBAAgB,EAAEb,gBADpB;AAEE,MAAA,SAAS,EAAEC,SAFb;AAGE,MAAA,eAAe,EAAEE,eAHnB;AAIE,MAAA,YAAY,EAAEC,YAJhB;AAKE,MAAA,KAAK,EAAEC,KALT;AAME,MAAA,IAAI,EAAEC;AANR,MApBF;AAAA,IADF;AA+BD,CA/C+B,CAAhC;AAiDA,8BAAeU,UAAI,CAACvB,QAAD,CAAnB;;;;"}
+{"version":3,"file":"PageItem.js","sources":["../../../../../src/components/Panels/AllSlidesPanel/PageItem.js"],"sourcesContent":["import { memo, 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 StaticPage from '../../Preview/StaticPage';\nimport PageThumbnailActions from './PageThumbnailActions';\n\nconst PageItem = ({\n  id,\n  isSelected,\n  onPageClick,\n  order,\n  page,\n  style,\n}) => {\n  const {\n    attributes,\n    isDragging,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n  } = useSortable({ id });\n\n  const dragStyle = useMemo(() => {\n    const opacity = isDragging ? 0.5 : 1;\n    const transitionValue = isDragging ? 'none' : transition;\n    return {\n      opacity,\n      transform: CSS.Transform.toString(transform),\n      transition: transitionValue,\n    };\n  }, [transform, transition, isDragging]);\n\n  const onKeyDown = f => f;\n  return (\n    <div\n      ref={setNodeRef}\n      className={(\n        classNames('thumbnailWrapper d-flex dir-col a-center j-center p-relative', { isSelected })\n      )}\n      data-id={page.id}\n      data-order={order}\n      onClick={onPageClick}\n      onKeyDown={onKeyDown}\n      style={dragStyle}\n      {...attributes}\n      {...listeners}\n    >\n      <div className=\"thumbnailOrder\">{order}</div>\n      <div className=\"thumbnailFrame o-hidden\">\n        <StaticPage\n          items={page.items}\n          style={style}\n        />\n      </div>\n      <PageThumbnailActions\n        order={order}\n        page={page}\n      />\n    </div>\n  );\n};\n\nPageItem.propTypes = {\n  id: PropTypes.string.isRequired,\n  isSelected: PropTypes.bool,\n  onPageClick: PropTypes.func,\n  order: PropTypes.number,\n  page: PropTypes.shape({\n    id: PropTypes.string.isRequired,\n    items: PropTypes.arrayOf(PropTypes.shape({})),\n  }),\n  style: PropTypes.shape({\n    opacity: PropTypes.number,\n    transform: PropTypes.string,\n    transition: PropTypes.string,\n  }),\n};\n\nexport default memo(PageItem);\n"],"names":["PageItem","id","isSelected","onPageClick","order","page","style","useSortable","attributes","isDragging","listeners","setNodeRef","transform","transition","dragStyle","useMemo","opacity","transitionValue","CSS","Transform","toString","onKeyDown","f","_jsxs","classNames","_jsx","StaticPage","items","propTypes","PropTypes","string","isRequired","bool","func","number","shape","arrayOf","memo"],"mappings":"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"}

package/lib/cjs/components/Panels/AllSlidesPanel/PageItemDragOverlay.js

@@ -0,0 +1,54 @@
+'use strict';
+
+var core = require('@dnd-kit/core');
+var PropTypes = require('prop-types');
+var StaticPage = require('../../Preview/StaticPage.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+
+var PageItemDragOverlay = function PageItemDragOverlay(_ref) {
+  var activePageData = _ref.activePageData;
+  return /*#__PURE__*/jsxRuntime.jsx(core.DragOverlay, {
+    adjustScale: false,
+    dropAnimation: null,
+    style: {
+      cursor: 'grabbing'
+    },
+    children: activePageData ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+      // eslint-disable-next-line max-len
+      className: "thumbnailWrapper d-flex dir-col a-center j-center p-relative pageThumbnailHelper forAllSlides",
+      style: {
+        opacity: 0.5
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "thumbnailOrder",
+        children: activePageData.page.order
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "thumbnailFrame o-hidden",
+        children: /*#__PURE__*/jsxRuntime.jsx(StaticPage['default'], {
+          isThumbnail: true,
+          items: activePageData.page.items,
+          style: activePageData.pageContainerLastStyle
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "thumbnailActions d-flex dir-col f-height j-center"
+      })]
+    }) : null
+  });
+};
+
+PageItemDragOverlay.propTypes = {
+  activePageData: PropTypes__default['default'].shape({
+    page: PropTypes__default['default'].shape({
+      items: PropTypes__default['default'].arrayOf(PropTypes__default['default'].shape({})),
+      order: PropTypes__default['default'].number
+    }),
+    pageContainerLastStyle: PropTypes__default['default'].shape({})
+  })
+};
+
+module.exports = PageItemDragOverlay;
+//# sourceMappingURL=PageItemDragOverlay.js.map

package/lib/cjs/components/Panels/AllSlidesPanel/PageItemDragOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageItemDragOverlay.js","sources":["../../../../../src/components/Panels/AllSlidesPanel/PageItemDragOverlay.js"],"sourcesContent":["import { DragOverlay } from '@dnd-kit/core';\nimport PropTypes from 'prop-types';\nimport StaticPage from '../../Preview/StaticPage';\n\nconst PageItemDragOverlay = ({\n  activePageData,\n}) => {\n  return (\n    <DragOverlay\n      adjustScale={false}\n      dropAnimation={null}\n      style={{ cursor: 'grabbing' }}\n    >\n      {activePageData ? (\n        <div\n          // eslint-disable-next-line max-len\n          className=\"thumbnailWrapper d-flex dir-col a-center j-center p-relative pageThumbnailHelper forAllSlides\"\n          style={{ opacity: 0.5 }}\n        >\n          <div className=\"thumbnailOrder\">{activePageData.page.order}</div>\n          <div className=\"thumbnailFrame o-hidden\">\n            <StaticPage\n              isThumbnail\n              items={activePageData.page.items}\n              style={activePageData.pageContainerLastStyle}\n            />\n          </div>\n          <div className=\"thumbnailActions d-flex dir-col f-height j-center\" />\n        </div>\n      ) : null}\n    </DragOverlay>\n  );\n};\n\nPageItemDragOverlay.propTypes = {\n  activePageData: PropTypes.shape({\n    page: PropTypes.shape({\n      items: PropTypes.arrayOf(PropTypes.shape({})),\n      order: PropTypes.number,\n    }),\n    pageContainerLastStyle: PropTypes.shape({}),\n  }),\n};\n\nexport default PageItemDragOverlay;\n"],"names":["PageItemDragOverlay","activePageData","_jsx","DragOverlay","cursor","_jsxs","opacity","page","order","StaticPage","items","pageContainerLastStyle","propTypes","PropTypes","shape","arrayOf","number"],"mappings":";;;;;;;;;;;IAIMA,mBAAmB,GAAG,SAAtBA,mBAAsB,OAEtB;AAAA,MADJC,cACI,QADJA,cACI;AACJ,sBACEC,eAACC,gBAAD;AACE,IAAA,WAAW,EAAE,KADf;AAEE,IAAA,aAAa,EAAE,IAFjB;AAGE,IAAA,KAAK,EAAE;AAAEC,MAAAA,MAAM,EAAE;AAAV,KAHT;AAAA,cAKGH,cAAc,gBACbI;AACE;AACA,MAAA,SAAS,EAAC,+FAFZ;AAGE,MAAA,KAAK,EAAE;AAAEC,QAAAA,OAAO,EAAE;AAAX,OAHT;AAAA,8BAKEJ;AAAK,QAAA,SAAS,EAAC,gBAAf;AAAA,kBAAiCD,cAAc,CAACM,IAAf,CAAoBC;AAArD,QALF,eAMEN;AAAK,QAAA,SAAS,EAAC,yBAAf;AAAA,+BACEA,eAACO,qBAAD;AACE,UAAA,WAAW,MADb;AAEE,UAAA,KAAK,EAAER,cAAc,CAACM,IAAf,CAAoBG,KAF7B;AAGE,UAAA,KAAK,EAAET,cAAc,CAACU;AAHxB;AADF,QANF,eAaET;AAAK,QAAA,SAAS,EAAC;AAAf,QAbF;AAAA,MADa,GAgBX;AArBN,IADF;AAyBD;;AAEDF,mBAAmB,CAACY,SAApB,GAAgC;AAC9BX,EAAAA,cAAc,EAAEY,6BAAS,CAACC,KAAV,CAAgB;AAC9BP,IAAAA,IAAI,EAAEM,6BAAS,CAACC,KAAV,CAAgB;AACpBJ,MAAAA,KAAK,EAAEG,6BAAS,CAACE,OAAV,CAAkBF,6BAAS,CAACC,KAAV,CAAgB,EAAhB,CAAlB,CADa;AAEpBN,MAAAA,KAAK,EAAEK,6BAAS,CAACG;AAFG,KAAhB,CADwB;AAK9BL,IAAAA,sBAAsB,EAAEE,6BAAS,CAACC,KAAV,CAAgB,EAAhB;AALM,GAAhB;AADc,CAAhC;;;;"}

package/lib/cjs/components/Panels/AllSlidesPanel/PageList.js

@@ -1,32 +1,58 @@
 'use strict';
 
 require('core-js/modules/es.array.concat.js');
+require('core-js/modules/es.array.find.js');
+require('core-js/modules/es.array.find-index.js');
 require('core-js/modules/es.array.map.js');
 var React = require('react');
-var reactSortableHoc = require('react-sortable-hoc');
+var PropTypes = require('prop-types');
+var core = require('@dnd-kit/core');
+var sortable = require('@dnd-kit/sortable');
 var PageItem = require('./PageItem.js');
+var PageItemDragOverlay = require('./PageItemDragOverlay.js');
 var functions = require('../../../utils/functions.js');
 var PageAdder = require('../../Builder/PageAdder.js');
+var PropContext = require('../../../contexts/PropContext.js');
 var jsxRuntime = require('react/jsx-runtime');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+
 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 PageList = reactSortableHoc.SortableContainer(function (_ref) {
-  var acceptedItems = _ref.acceptedItems,
-      additionalPageItems = _ref.additionalPageItems,
-      hashCode = _ref.hashCode,
-      itemAccessor = _ref.itemAccessor,
-      layoutSettings = _ref.layoutSettings,
-      onAnEventTrigger = _ref.onAnEventTrigger,
-      onPageAdd = _ref.onPageAdd,
-      onPageClick = _ref.onPageClick,
-      onPageDuplicate = _ref.onPageDuplicate,
-      onPageRemove = _ref.onPageRemove,
-      pages = _ref.pages,
+
+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; }
+
+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 PageList = function PageList(_ref) {
+  var onPageClick = _ref.onPageClick,
+      onSortEnd = _ref.onSortEnd,
       selectedPages = _ref.selectedPages;
+  var layoutSettings = PropContext.usePropStore(function (state) {
+    return state.settings;
+  });
+  var pages = PropContext.usePropStore(function (state) {
+    return state.pages;
+  });
+
+  var _useState = React.useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      activeId = _useState2[0],
+      setActiveId = _useState2[1];
+
   var pageContainerStyles = React.useRef({});
   var reportBackgroundColor = layoutSettings.reportBackgroundColor,
       _layoutSettings$repor = layoutSettings.reportLayoutHeight,
@@ -42,46 +68,116 @@ var PageList = reactSortableHoc.SortableContainer(function (_ref) {
     transformOrigin: '0 0',
     width: width
   };
-  return /*#__PURE__*/jsxRuntime.jsxs("ul", {
-    className: "jfReport-pageThumbnailList d-flex j-between f-wrap",
-    children: [pages.map(function (page) {
-      var backgroundColor = page.backgroundColor;
+  var sensors = core.useSensors(core.useSensor(core.PointerSensor, {
+    activationConstraint: {
+      distance: 0
+    }
+  }), core.useSensor(core.KeyboardSensor));
+  var handleDragStart = React.useCallback(function (event) {
+    setActiveId(event.active.id);
+  }, []);
+  var handleDragEnd = React.useCallback(function (event) {
+    var active = event.active,
+        over = event.over;
+    setActiveId(null);
 
-      var style = _objectSpread(_objectSpread({}, pageContainerStyles.current), {}, {
-        backgroundColor: backgroundColor ? backgroundColor : reportBackgroundColor || '#fff'
+    if (over && active.id !== over.id) {
+      var oldIndex = pages.findIndex(function (page) {
+        return page.id === active.id;
       });
+      var newIndex = pages.findIndex(function (page) {
+        return page.id === over.id;
+      });
+
+      if (oldIndex !== -1 && newIndex !== -1) {
+        onSortEnd({
+          newIndex: newIndex,
+          oldIndex: oldIndex
+        });
+      }
+    }
+  }, [pages, onSortEnd]);
+  var handleDragCancel = React.useCallback(function () {
+    setActiveId(null);
+  }, []);
+  var items = React.useMemo(function () {
+    if (!pages || pages.length === 0) return [];
+    return pages.map(function (page) {
+      return page.id;
+    });
+  }, [pages]);
+  var activePageData = React.useMemo(function () {
+    if (!activeId || !pages) return null;
+    var activePage = pages.find(function (page) {
+      return page.id === activeId;
+    });
+    if (!activePage) return null;
+    var backgroundColor = activePage.backgroundColor;
 
-      return /*#__PURE__*/jsxRuntime.jsx(PageItem, {
-        acceptedItems: acceptedItems,
-        additionalPageItems: additionalPageItems,
-        hashCode: hashCode,
-        index: page.order - 1,
-        isSelected: selectedPages.indexOf(page.id) > -1,
-        itemAccessor: itemAccessor,
-        onAnEventTrigger: onAnEventTrigger,
-        onPageAdd: onPageAdd,
-        onPageClick: onPageClick,
-        onPageDuplicate: onPageDuplicate,
-        onPageRemove: onPageRemove,
-        order: page.order,
-        page: page,
-        style: style
-      }, "item-".concat(page.id, "-").concat(page.order));
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "thumbnailWrapper forPageAdder d-flex j-end dir-col",
-      children: /*#__PURE__*/jsxRuntime.jsx(PageAdder, {
-        onPageAdd: onPageAdd,
-        pageCount: pages.length
+    var pageContainerLastStyle = _objectSpread(_objectSpread({}, pageContainerStyles.current), {}, {
+      backgroundColor: backgroundColor ? backgroundColor : reportBackgroundColor || '#fff'
+    });
+
+    return {
+      page: activePage,
+      pageContainerLastStyle: pageContainerLastStyle
+    };
+  }, [activeId, pages, reportBackgroundColor]);
+  return /*#__PURE__*/jsxRuntime.jsxs(core.DndContext, {
+    collisionDetection: core.closestCenter,
+    onDragCancel: handleDragCancel,
+    onDragEnd: handleDragEnd,
+    onDragStart: handleDragStart,
+    sensors: sensors,
+    children: [/*#__PURE__*/jsxRuntime.jsx(sortable.SortableContext, {
+      items: items,
+      strategy: sortable.rectSortingStrategy,
+      children: /*#__PURE__*/jsxRuntime.jsxs("ul", {
+        className: "jfReport-pageThumbnailList d-flex j-between f-wrap",
+        children: [pages.map(function (page) {
+          var backgroundColor = page.backgroundColor;
+
+          var style = _objectSpread(_objectSpread({}, pageContainerStyles.current), {}, {
+            backgroundColor: backgroundColor ? backgroundColor : reportBackgroundColor || '#fff'
+          });
+
+          return /*#__PURE__*/jsxRuntime.jsx(PageItem, {
+            id: page.id,
+            index: page.order - 1,
+            isSelected: selectedPages.indexOf(page.id) > -1,
+            onPageClick: onPageClick,
+            order: page.order,
+            page: page,
+            style: style
+          }, "item-".concat(page.id, "-").concat(page.order));
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "thumbnailWrapper forPageAdder d-flex j-end dir-col",
+          children: /*#__PURE__*/jsxRuntime.jsx(PageAdder, {})
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "spacer"
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "spacer"
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "spacer"
+        })]
       })
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "spacer"
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "spacer"
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "spacer"
+    }), /*#__PURE__*/jsxRuntime.jsx(PageItemDragOverlay, {
+      activePageData: activePageData
     })]
   });
-});
+};
+
+PageList.propTypes = {
+  acceptedItems: PropTypes__default['default'].shape({}),
+  layoutSettings: PropTypes__default['default'].shape({
+    reportBackgroundColor: PropTypes__default['default'].string,
+    reportLayoutHeight: PropTypes__default['default'].string,
+    reportLayoutWidth: PropTypes__default['default'].string
+  }),
+  onPageClick: PropTypes__default['default'].func,
+  onSortEnd: PropTypes__default['default'].func,
+  selectedPages: PropTypes__default['default'].arrayOf(PropTypes__default['default'].string)
+};
 var PageList$1 = /*#__PURE__*/React.memo(PageList);
 
 module.exports = PageList$1;

package/lib/cjs/components/Panels/AllSlidesPanel/PageList.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageList.js","sources":["../../../../../src/components/Panels/AllSlidesPanel/PageList.js"],"sourcesContent":["import { memo, useRef } from 'react';\nimport { SortableContainer } from 'react-sortable-hoc';\nimport PageItem from './PageItem';\nimport { getScaleForPageThumbnailLarge } from '../../../utils/functions';\nimport PageAdder from '../../Builder/PageAdder';\n\nconst PageList = SortableContainer(({\n  acceptedItems,\n  additionalPageItems,\n  hashCode,\n  itemAccessor,\n  layoutSettings,\n  onAnEventTrigger,\n  onPageAdd,\n  onPageClick,\n  onPageDuplicate,\n  onPageRemove,\n  pages,\n  selectedPages,\n}) => {\n  const pageContainerStyles = useRef({});\n  const {\n    reportBackgroundColor,\n    reportLayoutHeight = 794,\n    reportLayoutWidth = 1123,\n  } = layoutSettings;\n  const width = parseInt(reportLayoutWidth, 10);\n  const height = parseInt(reportLayoutHeight, 10);\n  const scale = getScaleForPageThumbnailLarge(width, height);\n\n  pageContainerStyles.current = {\n    height: height,\n    transform: `scale(${scale})`,\n    transformOrigin: '0 0',\n    width: width,\n  };\n\n  return (\n    <ul className=\"jfReport-pageThumbnailList d-flex j-between f-wrap\">\n      {pages.map(page => {\n        const { backgroundColor } = page;\n        const style = {\n          ...pageContainerStyles.current,\n          backgroundColor: backgroundColor ? backgroundColor : reportBackgroundColor || '#fff',\n        };\n        return (\n          <PageItem\n            key={`item-${page.id}-${page.order}`}\n            acceptedItems={acceptedItems}\n            additionalPageItems={additionalPageItems}\n            hashCode={hashCode}\n            index={page.order - 1}\n            isSelected={selectedPages.indexOf(page.id) > -1}\n            itemAccessor={itemAccessor}\n            onAnEventTrigger={onAnEventTrigger}\n            onPageAdd={onPageAdd}\n            onPageClick={onPageClick}\n            onPageDuplicate={onPageDuplicate}\n            onPageRemove={onPageRemove}\n            order={page.order}\n            page={page}\n            style={style}\n          />\n        );\n      })}\n      <div className=\"thumbnailWrapper forPageAdder d-flex j-end dir-col\">\n        <PageAdder\n          onPageAdd={onPageAdd}\n          pageCount={pages.length}\n        />\n      </div>\n      <div className=\"spacer\" />\n      <div className=\"spacer\" />\n      <div className=\"spacer\" />\n    </ul>\n  );\n});\n\nexport default memo(PageList);\n"],"names":["PageList","SortableContainer","acceptedItems","additionalPageItems","hashCode","itemAccessor","layoutSettings","onAnEventTrigger","onPageAdd","onPageClick","onPageDuplicate","onPageRemove","pages","selectedPages","pageContainerStyles","useRef","reportBackgroundColor","reportLayoutHeight","reportLayoutWidth","width","parseInt","height","scale","getScaleForPageThumbnailLarge","current","transform","transformOrigin","_jsxs","map","page","backgroundColor","style","_jsx","order","indexOf","id","length","memo"],"mappings":"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"}
+{"version":3,"file":"PageList.js","sources":["../../../../../src/components/Panels/AllSlidesPanel/PageList.js"],"sourcesContent":["import {\n  memo, useRef, useState, useCallback, useMemo,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors,\n} from '@dnd-kit/core';\nimport { SortableContext, rectSortingStrategy } from '@dnd-kit/sortable';\nimport PageItem from './PageItem';\nimport PageItemDragOverlay from './PageItemDragOverlay';\nimport { getScaleForPageThumbnailLarge } from '../../../utils/functions';\nimport PageAdder from '../../Builder/PageAdder';\nimport { usePropStore } from '../../../contexts/PropContext';\n\nconst PageList = ({\n  onPageClick,\n  onSortEnd,\n  selectedPages,\n}) => {\n  const layoutSettings = usePropStore(state => state.settings);\n  const pages = usePropStore(state => state.pages);\n\n  const [activeId, setActiveId] = useState(null);\n  const pageContainerStyles = useRef({});\n  const {\n    reportBackgroundColor,\n    reportLayoutHeight = 794,\n    reportLayoutWidth = 1123,\n  } = layoutSettings;\n  const width = parseInt(reportLayoutWidth, 10);\n  const height = parseInt(reportLayoutHeight, 10);\n  const scale = getScaleForPageThumbnailLarge(width, height);\n\n  pageContainerStyles.current = {\n    height: height,\n    transform: `scale(${scale})`,\n    transformOrigin: '0 0',\n    width: width,\n  };\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 oldIndex = pages.findIndex(page => page.id === active.id);\n      const newIndex = pages.findIndex(page => page.id === over.id);\n\n      if (oldIndex !== -1 && newIndex !== -1) {\n        onSortEnd({ newIndex, oldIndex });\n      }\n    }\n  }, [pages, onSortEnd]);\n\n  const handleDragCancel = useCallback(() => {\n    setActiveId(null);\n  }, []);\n\n  const items = useMemo(() => {\n    if (!pages || pages.length === 0) return [];\n    return pages.map(page => page.id);\n  }, [pages]);\n\n  const activePageData = useMemo(() => {\n    if (!activeId || !pages) return null;\n\n    const activePage = pages.find(page => page.id === activeId);\n    if (!activePage) return null;\n\n    const { backgroundColor } = activePage;\n    const pageContainerLastStyle = {\n      ...pageContainerStyles.current,\n      backgroundColor: backgroundColor ? backgroundColor : reportBackgroundColor || '#fff',\n    };\n\n    return {\n      page: activePage,\n      pageContainerLastStyle,\n    };\n  }, [activeId, pages, reportBackgroundColor]);\n\n  return (\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={rectSortingStrategy}\n      >\n        <ul className=\"jfReport-pageThumbnailList d-flex j-between f-wrap\">\n          {pages.map(page => {\n            const { backgroundColor } = page;\n            const style = {\n              ...pageContainerStyles.current,\n              backgroundColor: backgroundColor ? backgroundColor : reportBackgroundColor || '#fff',\n            };\n            return (\n              <PageItem\n                key={`item-${page.id}-${page.order}`}\n                id={page.id}\n                index={page.order - 1}\n                isSelected={selectedPages.indexOf(page.id) > -1}\n                onPageClick={onPageClick}\n                order={page.order}\n                page={page}\n                style={style}\n              />\n            );\n          })}\n          <div className=\"thumbnailWrapper forPageAdder d-flex j-end dir-col\">\n            <PageAdder />\n          </div>\n          <div className=\"spacer\" />\n          <div className=\"spacer\" />\n          <div className=\"spacer\" />\n        </ul>\n      </SortableContext>\n      <PageItemDragOverlay\n        activePageData={activePageData}\n      />\n    </DndContext>\n  );\n};\n\nPageList.propTypes = {\n  acceptedItems: PropTypes.shape({}),\n  layoutSettings: PropTypes.shape({\n    reportBackgroundColor: PropTypes.string,\n    reportLayoutHeight: PropTypes.string,\n    reportLayoutWidth: PropTypes.string,\n  }),\n  onPageClick: PropTypes.func,\n  onSortEnd: PropTypes.func,\n  selectedPages: PropTypes.arrayOf(PropTypes.string),\n};\n\nexport default memo(PageList);\n"],"names":["PageList","onPageClick","onSortEnd","selectedPages","layoutSettings","usePropStore","state","settings","pages","useState","activeId","setActiveId","pageContainerStyles","useRef","reportBackgroundColor","reportLayoutHeight","reportLayoutWidth","width","parseInt","height","scale","getScaleForPageThumbnailLarge","current","transform","transformOrigin","sensors","useSensors","useSensor","PointerSensor","activationConstraint","distance","KeyboardSensor","handleDragStart","useCallback","event","active","id","handleDragEnd","over","oldIndex","findIndex","page","newIndex","handleDragCancel","items","useMemo","length","map","activePageData","activePage","find","backgroundColor","pageContainerLastStyle","_jsxs","DndContext","closestCenter","_jsx","SortableContext","rectSortingStrategy","style","order","indexOf","propTypes","acceptedItems","PropTypes","shape","string","func","arrayOf","memo"],"mappings":"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"}

package/lib/cjs/components/Panels/AllSlidesPanel/PageThumbnailActions.js

@@ -2,6 +2,7 @@
 
 var React = require('react');
 var PropTypes = require('prop-types');
+var PropContext = require('../../../contexts/PropContext.js');
 var jsxRuntime = require('react/jsx-runtime');
 var duplicate = require('../../../assets/svg/duplicate.svg.js');
 var trash = require('../../../assets/svg/trash.svg.js');
@@ -12,12 +13,22 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 var PageThumbnailActions = function PageThumbnailActions(_ref) {
-  var onAnEventTrigger = _ref.onAnEventTrigger,
-      onPageAdd = _ref.onPageAdd,
-      onPageDuplicate = _ref.onPageDuplicate,
-      onPageRemove = _ref.onPageRemove,
-      order = _ref.order,
-      page = _ref.page;
+  var _ref$order = _ref.order,
+      order = _ref$order === void 0 ? 0 : _ref$order,
+      _ref$page = _ref.page,
+      page = _ref$page === void 0 ? {} : _ref$page;
+  var onPageAdd = PropContext.usePropStore(function (state) {
+    return state.onPageAdd;
+  });
+  var onPageDuplicate = PropContext.usePropStore(function (state) {
+    return state.onPageDuplicate;
+  });
+  var onPageRemove = PropContext.usePropStore(function (state) {
+    return state.onPageRemove;
+  });
+  var onAnEventTrigger = PropContext.usePropStore(function (state) {
+    return state.onAnEventTrigger;
+  });
 
   var onPageDuplicateClick = function onPageDuplicateClick() {
     onPageDuplicate(page);
@@ -73,23 +84,11 @@ var PageThumbnailActions = function PageThumbnailActions(_ref) {
 };
 
 PageThumbnailActions.propTypes = {
-  onAnEventTrigger: PropTypes__default['default'].func,
-  onPageAdd: PropTypes__default['default'].func,
-  onPageDuplicate: PropTypes__default['default'].func,
-  onPageRemove: PropTypes__default['default'].func,
   order: PropTypes__default['default'].number,
   page: PropTypes__default['default'].shape({
     id: PropTypes__default['default'].string
   })
 };
-PageThumbnailActions.defaultProps = {
-  onAnEventTrigger: function onAnEventTrigger() {},
-  onPageAdd: function onPageAdd() {},
-  onPageDuplicate: function onPageDuplicate() {},
-  onPageRemove: function onPageRemove() {},
-  order: 0,
-  page: {}
-};
 var PageThumbnailActions$1 = /*#__PURE__*/React.memo(PageThumbnailActions);
 
 module.exports = PageThumbnailActions$1;

package/lib/cjs/components/Panels/AllSlidesPanel/PageThumbnailActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageThumbnailActions.js","sources":["../../../../../src/components/Panels/AllSlidesPanel/PageThumbnailActions.js"],"sourcesContent":["import { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport * as icons from '../../../utils/icons';\n\nconst PageThumbnailActions = ({\n  onAnEventTrigger,\n  onPageAdd,\n  onPageDuplicate,\n  onPageRemove,\n  order,\n  page,\n}) => {\n  const onPageDuplicateClick = () => {\n    onPageDuplicate(page);\n    onAnEventTrigger('duplicatePage', order + 1);\n  };\n\n  const onPageRemoveClick = () => {\n    onPageRemove(page.id);\n    onAnEventTrigger('removePageFromSlides', page.id);\n  };\n\n  const onPageAddClick = () => {\n    const newPageIndex = order + 1;\n    onPageAdd(newPageIndex);\n    onAnEventTrigger('addNewPageFromSlides', newPageIndex);\n  };\n\n  return (\n    <div\n      className=\"thumbnailActions d-flex j-between f-width\"\n      id={`pageActions-id-${order}`}\n    >\n      <div className=\"floatingController forPageAction forSlides f-width\">\n        <div className=\"floatingController-container d-flex a-center j-around dir-row\">\n          <button\n            key=\"Duplicate Page\"\n            className=\"controllerItem\"\n            onClick={onPageDuplicateClick}\n            title=\"Duplicate Page\"\n            type=\"button\"\n          >\n            <icons.duplicate className=\"jfReportSVG icon-duplicateLine\" />\n          </button>\n          <button\n            key=\"Remove Slide\"\n            className=\"controllerItem isDanger\"\n            onClick={onPageRemoveClick}\n            title=\"Remove Slide\"\n            type=\"button\"\n          >\n            <icons.trash className=\"jfReportSVG icon-trashLine\" />\n          </button>\n          <button\n            key=\"Add Slide\"\n            className=\"controllerItem\"\n            onClick={onPageAddClick}\n            title=\"Add Slide\"\n            type=\"button\"\n          >\n            <icons.plus className=\"jfReportSVG icon-plus\" />\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nPageThumbnailActions.propTypes = {\n  onAnEventTrigger: PropTypes.func,\n  onPageAdd: PropTypes.func,\n  onPageDuplicate: PropTypes.func,\n  onPageRemove: PropTypes.func,\n  order: PropTypes.number,\n  page: PropTypes.shape({\n    id: PropTypes.string,\n  }),\n};\n\nPageThumbnailActions.defaultProps = {\n  onAnEventTrigger: () => {},\n  onPageAdd: () => {},\n  onPageDuplicate: () => {},\n  onPageRemove: () => {},\n  order: 0,\n  page: {},\n};\n\nexport default memo(PageThumbnailActions);\n"],"names":["PageThumbnailActions","onAnEventTrigger","onPageAdd","onPageDuplicate","onPageRemove","order","page","onPageDuplicateClick","onPageRemoveClick","id","onPageAddClick","newPageIndex","_jsx","_jsxs","icons.duplicate","icons.trash","icons.plus","propTypes","PropTypes","func","number","shape","string","defaultProps","memo"],"mappings":"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"}
+{"version":3,"file":"PageThumbnailActions.js","sources":["../../../../../src/components/Panels/AllSlidesPanel/PageThumbnailActions.js"],"sourcesContent":["import { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport * as icons from '../../../utils/icons';\nimport { usePropStore } from '../../../contexts/PropContext';\n\nconst PageThumbnailActions = ({\n  order = 0,\n  page = {},\n}) => {\n  const onPageAdd = usePropStore(state => state.onPageAdd);\n  const onPageDuplicate = usePropStore(state => state.onPageDuplicate);\n  const onPageRemove = usePropStore(state => state.onPageRemove);\n  const onAnEventTrigger = usePropStore(state => state.onAnEventTrigger);\n\n  const onPageDuplicateClick = () => {\n    onPageDuplicate(page);\n    onAnEventTrigger('duplicatePage', order + 1);\n  };\n\n  const onPageRemoveClick = () => {\n    onPageRemove(page.id);\n    onAnEventTrigger('removePageFromSlides', page.id);\n  };\n\n  const onPageAddClick = () => {\n    const newPageIndex = order + 1;\n    onPageAdd(newPageIndex);\n    onAnEventTrigger('addNewPageFromSlides', newPageIndex);\n  };\n\n  return (\n    <div\n      className=\"thumbnailActions d-flex j-between f-width\"\n      id={`pageActions-id-${order}`}\n    >\n      <div className=\"floatingController forPageAction forSlides f-width\">\n        <div className=\"floatingController-container d-flex a-center j-around dir-row\">\n          <button\n            key=\"Duplicate Page\"\n            className=\"controllerItem\"\n            onClick={onPageDuplicateClick}\n            title=\"Duplicate Page\"\n            type=\"button\"\n          >\n            <icons.duplicate className=\"jfReportSVG icon-duplicateLine\" />\n          </button>\n          <button\n            key=\"Remove Slide\"\n            className=\"controllerItem isDanger\"\n            onClick={onPageRemoveClick}\n            title=\"Remove Slide\"\n            type=\"button\"\n          >\n            <icons.trash className=\"jfReportSVG icon-trashLine\" />\n          </button>\n          <button\n            key=\"Add Slide\"\n            className=\"controllerItem\"\n            onClick={onPageAddClick}\n            title=\"Add Slide\"\n            type=\"button\"\n          >\n            <icons.plus className=\"jfReportSVG icon-plus\" />\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nPageThumbnailActions.propTypes = {\n  order: PropTypes.number,\n  page: PropTypes.shape({\n    id: PropTypes.string,\n  }),\n};\n\nexport default memo(PageThumbnailActions);\n"],"names":["PageThumbnailActions","order","page","onPageAdd","usePropStore","state","onPageDuplicate","onPageRemove","onAnEventTrigger","onPageDuplicateClick","onPageRemoveClick","id","onPageAddClick","newPageIndex","_jsx","_jsxs","icons.duplicate","icons.trash","icons.plus","propTypes","PropTypes","number","shape","string","memo"],"mappings":";;;;;;;;;;;;;;AAKA,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAuB,OAGvB;AAAA,wBAFJC,KAEI;AAAA,MAFJA,KAEI,2BAFI,CAEJ;AAAA,uBADJC,IACI;AAAA,MADJA,IACI,0BADG,EACH;AACJ,MAAMC,SAAS,GAAGC,wBAAY,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACF,SAAV;AAAA,GAAN,CAA9B;AACA,MAAMG,eAAe,GAAGF,wBAAY,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACC,eAAV;AAAA,GAAN,CAApC;AACA,MAAMC,YAAY,GAAGH,wBAAY,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACE,YAAV;AAAA,GAAN,CAAjC;AACA,MAAMC,gBAAgB,GAAGJ,wBAAY,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACG,gBAAV;AAAA,GAAN,CAArC;;AAEA,MAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB,GAAM;AACjCH,IAAAA,eAAe,CAACJ,IAAD,CAAf;AACAM,IAAAA,gBAAgB,CAAC,eAAD,EAAkBP,KAAK,GAAG,CAA1B,CAAhB;AACD,GAHD;;AAKA,MAAMS,iBAAiB,GAAG,SAApBA,iBAAoB,GAAM;AAC9BH,IAAAA,YAAY,CAACL,IAAI,CAACS,EAAN,CAAZ;AACAH,IAAAA,gBAAgB,CAAC,sBAAD,EAAyBN,IAAI,CAACS,EAA9B,CAAhB;AACD,GAHD;;AAKA,MAAMC,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAC3B,QAAMC,YAAY,GAAGZ,KAAK,GAAG,CAA7B;AACAE,IAAAA,SAAS,CAACU,YAAD,CAAT;AACAL,IAAAA,gBAAgB,CAAC,sBAAD,EAAyBK,YAAzB,CAAhB;AACD,GAJD;;AAMA,sBACEC;AACE,IAAA,SAAS,EAAC,2CADZ;AAEE,IAAA,EAAE,2BAAoBb,KAApB,CAFJ;AAAA,2BAIEa;AAAK,MAAA,SAAS,EAAC,oDAAf;AAAA,6BACEC;AAAK,QAAA,SAAS,EAAC,+DAAf;AAAA,gCACED;AAEE,UAAA,SAAS,EAAC,gBAFZ;AAGE,UAAA,OAAO,EAAEL,oBAHX;AAIE,UAAA,KAAK,EAAC,gBAJR;AAKE,UAAA,IAAI,EAAC,QALP;AAAA,iCAOEK,eAACE,SAAD;AAAiB,YAAA,SAAS,EAAC;AAA3B;AAPF,WACM,gBADN,CADF,eAUEF;AAEE,UAAA,SAAS,EAAC,yBAFZ;AAGE,UAAA,OAAO,EAAEJ,iBAHX;AAIE,UAAA,KAAK,EAAC,cAJR;AAKE,UAAA,IAAI,EAAC,QALP;AAAA,iCAOEI,eAACG,KAAD;AAAa,YAAA,SAAS,EAAC;AAAvB;AAPF,WACM,cADN,CAVF,eAmBEH;AAEE,UAAA,SAAS,EAAC,gBAFZ;AAGE,UAAA,OAAO,EAAEF,cAHX;AAIE,UAAA,KAAK,EAAC,WAJR;AAKE,UAAA,IAAI,EAAC,QALP;AAAA,iCAOEE,eAACI,IAAD;AAAY,YAAA,SAAS,EAAC;AAAtB;AAPF,WACM,WADN,CAnBF;AAAA;AADF;AAJF,IADF;AAsCD,CA/DD;;AAiEAlB,oBAAoB,CAACmB,SAArB,GAAiC;AAC/BlB,EAAAA,KAAK,EAAEmB,6BAAS,CAACC,MADc;AAE/BnB,EAAAA,IAAI,EAAEkB,6BAAS,CAACE,KAAV,CAAgB;AACpBX,IAAAA,EAAE,EAAES,6BAAS,CAACG;AADM,GAAhB;AAFyB,CAAjC;AAOA,0CAAeC,UAAI,CAACxB,oBAAD,CAAnB;;;;"}