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

package/lib/cjs/components/Builder/ContextMenu.js

@@ -8,6 +8,7 @@ var PropTypes = require('prop-types');
 var hooks = require('../../utils/hooks.js');
 var functions = require('../../utils/functions.js');
 var withClickOutside = require('../withClickOutside.js');
+var PropContext = require('../../contexts/PropContext.js');
 var jsxRuntime = require('react/jsx-runtime');
 var moveToFront = require('../../assets/svg/contextmenu/moveToFront.svg.js');
 var moveToForward = require('../../assets/svg/contextmenu/moveToForward.svg.js');
@@ -41,16 +42,30 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var ContextMenu = function ContextMenu(_ref) {
-  var height = _ref.height,
-      item = _ref.item,
-      items = _ref.items,
-      onAnEventTrigger = _ref.onAnEventTrigger,
-      onClickOutside = _ref.onClickOutside,
-      onItemChange = _ref.onItemChange,
-      onItemRemove = _ref.onItemRemove,
-      onPageChange = _ref.onPageChange,
-      position = _ref.position,
-      width = _ref.width;
+  var _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 1 : _ref$height,
+      _ref$item = _ref.item,
+      item = _ref$item === void 0 ? {} : _ref$item,
+      _ref$items = _ref.items,
+      items = _ref$items === void 0 ? [] : _ref$items,
+      _ref$onClickOutside = _ref.onClickOutside,
+      onClickOutside = _ref$onClickOutside === void 0 ? function () {} : _ref$onClickOutside,
+      _ref$position = _ref.position,
+      position = _ref$position === void 0 ? {} : _ref$position,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 1 : _ref$width;
+  var onAnEventTrigger = PropContext.usePropStore(function (state) {
+    return state.onAnEventTrigger;
+  });
+  var onItemChange = PropContext.usePropStore(function (state) {
+    return state.onItemChange;
+  });
+  var onItemRemove = PropContext.usePropStore(function (state) {
+    return state.onItemRemove;
+  });
+  var onPageChange = PropContext.usePropStore(function (state) {
+    return state.onPageChange;
+  });
 
   var _useState = React.useState(position),
       _useState2 = _slicedToArray(_useState, 2),
@@ -73,10 +88,12 @@ var ContextMenu = function ContextMenu(_ref) {
 
   hooks.useEventListener('wheel', removeFunc);
   React.useLayoutEffect(function () {
-    var newPosition = functions.getContainerPositions(container.current, positions);
-    setPositions({
-      x: newPosition.x,
-      y: newPosition.y
+    setPositions(function (prev) {
+      var newPosition = functions.getContainerPositions(container.current, prev);
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        x: newPosition.x,
+        y: newPosition.y
+      });
     });
   }, []);
 
@@ -272,26 +289,10 @@ ContextMenu.propTypes = {
     top: PropTypes__default['default'].number,
     width: PropTypes__default['default'].number
   })),
-  onAnEventTrigger: PropTypes__default['default'].func,
   onClickOutside: PropTypes__default['default'].func,
-  onItemChange: PropTypes__default['default'].func,
-  onItemRemove: PropTypes__default['default'].func,
-  onPageChange: PropTypes__default['default'].func,
   position: PropTypes__default['default'].shape({}),
   width: PropTypes__default['default'].number
 };
-ContextMenu.defaultProps = {
-  height: 1,
-  item: {},
-  items: [],
-  onAnEventTrigger: function onAnEventTrigger() {},
-  onClickOutside: function onClickOutside() {},
-  onItemChange: function onItemChange() {},
-  onItemRemove: function onItemRemove() {},
-  onPageChange: function onPageChange() {},
-  position: {},
-  width: 1
-};
 
 var PortalContext = function PortalContext(props) {
   return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/jsxRuntime.jsx(ContextMenu, _objectSpread({}, props)), document.body);

package/lib/cjs/components/Builder/ContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.js","sources":["../../../../src/components/Builder/ContextMenu.js"],"sourcesContent":["import {\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { useEventListener, useTranslatedTexts } from '../../utils/hooks';\nimport {\n  collisionCheck,\n  getContainerPositions,\n  moveArrayItem,\n} from '../../utils/functions';\nimport * as icons from '../../utils/icons';\n\nimport withClickOutside from '../withClickOutside';\n\nconst ContextMenu = ({\n  height,\n  item,\n  items,\n  onAnEventTrigger,\n  onClickOutside,\n  onItemChange,\n  onItemRemove,\n  onPageChange,\n  position,\n  width,\n}) => {\n  const [positions, setPositions] = useState(position);\n  const container = useRef(null);\n  const itemIndex = items.findIndex(_item => _item.id === item.id);\n  // Will be mutated.\n  const orderArray = items.map(_item => _item.id);\n\n  const removeFunc = () => {\n    // TODO :: should listen to scroll event, not wheel\n    onClickOutside();\n  };\n\n  useEventListener('wheel', removeFunc);\n\n  useLayoutEffect(() => {\n    const newPosition = getContainerPositions(container.current, positions);\n    setPositions({\n      x: newPosition.x,\n      y: newPosition.y,\n    });\n  }, []);\n\n  const moveToFront = () => {\n    if (items.length !== itemIndex + 1) {\n      moveArrayItem(orderArray, itemIndex, items.length - 1);\n      onPageChange({\n        id: item.pageID,\n      }, { items: JSON.stringify(orderArray) });\n    }\n    onClickOutside();\n  };\n\n  const moveToBack = () => {\n    if (itemIndex !== 0) {\n      moveArrayItem(orderArray, itemIndex, 0);\n      onPageChange({\n        id: item.pageID,\n      }, { items: JSON.stringify(orderArray) });\n    }\n    onClickOutside();\n  };\n\n  const moveForward = () => {\n    if (items.length !== itemIndex + 1) {\n      const colluddedItemIndex = collisionCheck(item, items, itemIndex, 1);\n      if (colluddedItemIndex !== null) {\n        moveArrayItem(orderArray, itemIndex, colluddedItemIndex);\n      } else {\n        moveArrayItem(orderArray, itemIndex, itemIndex + 1);\n      }\n      onPageChange({\n        id: item.pageID,\n      }, { items: JSON.stringify(orderArray) });\n    }\n    onClickOutside();\n  };\n\n  const moveBackward = () => {\n    if (itemIndex !== 0) {\n      const colluddedItemIndex = collisionCheck(item, items, itemIndex, -1);\n      if (colluddedItemIndex) {\n        moveArrayItem(orderArray, itemIndex, colluddedItemIndex);\n      } else {\n        moveArrayItem(orderArray, itemIndex, itemIndex - 1);\n      }\n      onPageChange({\n        id: item.pageID,\n      }, { items: JSON.stringify(orderArray) });\n    }\n\n    onClickOutside();\n  };\n\n  const deleteItem = () => {\n    onItemRemove(item);\n    onClickOutside();\n    onAnEventTrigger('removeItem', item.itemType);\n  };\n\n  const lockOrUnlockItem = () => {\n    onItemChange({ id: item.id }, { isLocked: item.isLocked ? false : true });\n    onClickOutside();\n  };\n\n  const fitToPage = () => {\n    let _height = height;\n    let _width = width;\n    // Keep image ratio on fit\n    if (item.itemType === 'image') {\n      if (item.height > item.width) {\n        _width = (item.width * _height) / item.height;\n      } else if (item.width > item.height) {\n        _height = (item.height * _width) / item.width;\n      }\n    }\n\n    onItemChange({ id: item.id }, {\n      height: _height,\n      left: 0,\n      top: 0,\n      width: _width,\n    });\n\n    onClickOutside();\n    onAnEventTrigger('fitToPage', item.itemType);\n  };\n\n  const {\n    DELETE, FIT_TO_PAGE, LOCK_ITEM,\n    MOVE_BACKWARDS, MOVE_FORWARDS,\n    MOVE_TO_BACK, MOVE_TO_FRONT, UNLOCK_ITEM,\n  } = useTranslatedTexts();\n\n  const menuItems = [\n    { func: moveToFront, icon: <icons.moveToFront />, text: MOVE_TO_FRONT },\n    { func: moveForward, icon: <icons.moveToForward />, text: MOVE_FORWARDS },\n    { func: moveBackward, icon: <icons.moveToBackward />, text: MOVE_BACKWARDS },\n    { func: moveToBack, icon: <icons.moveToBack />, text: MOVE_TO_BACK },\n    {\n      func: lockOrUnlockItem,\n      icon: item.isLocked ? (\n        <icons.unlock className=\"icon-lock\" />\n      ) : (\n        <icons.lock className=\"icon-lock\" />\n      ),\n      text: item.isLocked ? UNLOCK_ITEM : LOCK_ITEM,\n    },\n    {\n      func: fitToPage, icon: <icons.enterFullscreen className=\"icon-lock\" />, text: FIT_TO_PAGE,\n    },\n    {\n      class: ' isDanger', func: deleteItem, icon: <icons.trash />, text: DELETE,\n    },\n  ];\n\n  return (\n    <div\n      ref={container}\n      className=\"contextMenu-wrapper\"\n      style={{\n        left: positions.x,\n        top: positions.y,\n      }}\n    >\n      {menuItems.map(menuItem => {\n        const btnClass = `contextMenu-button jfReportButton${menuItem.class ? menuItem.class : ''}`;\n        return (\n          <button\n            key={menuItem.text}\n            className={btnClass}\n            onClick={menuItem.func}\n            type=\"button\"\n          >\n            <span className=\"contextMenu-icon\">\n              {menuItem.icon}\n            </span>\n            {menuItem.text}\n          </button>\n        );\n      })}\n    </div>\n  );\n};\n\nContextMenu.propTypes = {\n  height: PropTypes.number,\n  item: PropTypes.shape({\n    height: PropTypes.number,\n    id: PropTypes.string,\n    isLocked: PropTypes.bool,\n    itemType: PropTypes.string,\n    left: PropTypes.number,\n    pageID: PropTypes.string,\n    top: PropTypes.number,\n    width: PropTypes.number,\n  }),\n  items: PropTypes.arrayOf(PropTypes.shape({\n    height: PropTypes.number,\n    // id: PropTypes.string,\n    left: PropTypes.number,\n    top: PropTypes.number,\n    width: PropTypes.number,\n  })),\n  onAnEventTrigger: PropTypes.func,\n  onClickOutside: PropTypes.func,\n  onItemChange: PropTypes.func,\n  onItemRemove: PropTypes.func,\n  onPageChange: PropTypes.func,\n  position: PropTypes.shape({}),\n  width: PropTypes.number,\n};\n\nContextMenu.defaultProps = {\n  height: 1,\n  item: {},\n  items: [],\n  onAnEventTrigger: () => {},\n  onClickOutside: () => {},\n  onItemChange: () => {},\n  onItemRemove: () => {},\n  onPageChange: () => {},\n  position: {},\n  width: 1,\n};\n\nconst PortalContext = props => createPortal(<ContextMenu {...props} />, document.body);\n\nexport default withClickOutside(PortalContext);\n"],"names":["ContextMenu","height","item","items","onAnEventTrigger","onClickOutside","onItemChange","onItemRemove","onPageChange","position","width","useState","positions","setPositions","container","useRef","itemIndex","findIndex","_item","id","orderArray","map","removeFunc","useEventListener","useLayoutEffect","newPosition","getContainerPositions","current","x","y","moveToFront","length","moveArrayItem","pageID","JSON","stringify","moveToBack","moveForward","colluddedItemIndex","collisionCheck","moveBackward","deleteItem","itemType","lockOrUnlockItem","isLocked","fitToPage","_height","_width","left","top","useTranslatedTexts","DELETE","FIT_TO_PAGE","LOCK_ITEM","MOVE_BACKWARDS","MOVE_FORWARDS","MOVE_TO_BACK","MOVE_TO_FRONT","UNLOCK_ITEM","menuItems","func","icon","_jsx","icons.moveToFront","text","icons.moveToForward","icons.moveToBackward","icons.moveToBack","icons.unlock","icons.lock","icons.enterFullscreen","class","icons.trash","menuItem","btnClass","_jsxs","propTypes","PropTypes","number","shape","string","bool","arrayOf","defaultProps","PortalContext","props","createPortal","document","body","withClickOutside"],"mappings":"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"}
+{"version":3,"file":"ContextMenu.js","sources":["../../../../src/components/Builder/ContextMenu.js"],"sourcesContent":["import {\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { useEventListener, useTranslatedTexts } from '../../utils/hooks';\nimport {\n  collisionCheck,\n  getContainerPositions,\n  moveArrayItem,\n} from '../../utils/functions';\nimport * as icons from '../../utils/icons';\n\nimport withClickOutside from '../withClickOutside';\nimport { usePropStore } from '../../contexts/PropContext';\n\nconst ContextMenu = ({\n  height = 1,\n  item = {},\n  items = [],\n  onClickOutside = () => {},\n  position = {},\n  width = 1,\n}) => {\n  const onAnEventTrigger = usePropStore(state => state.onAnEventTrigger);\n  const onItemChange = usePropStore(state => state.onItemChange);\n  const onItemRemove = usePropStore(state => state.onItemRemove);\n  const onPageChange = usePropStore(state => state.onPageChange);\n  const [positions, setPositions] = useState(position);\n  const container = useRef(null);\n  const itemIndex = items.findIndex(_item => _item.id === item.id);\n  // Will be mutated.\n  const orderArray = items.map(_item => _item.id);\n\n  const removeFunc = () => {\n    // TODO :: should listen to scroll event, not wheel\n    onClickOutside();\n  };\n\n  useEventListener('wheel', removeFunc);\n\n  useLayoutEffect(() => {\n    setPositions(prev => {\n      const newPosition = getContainerPositions(container.current, prev);\n      return {\n        ...prev,\n        x: newPosition.x,\n        y: newPosition.y,\n      };\n    });\n  }, []);\n\n  const moveToFront = () => {\n    if (items.length !== itemIndex + 1) {\n      moveArrayItem(orderArray, itemIndex, items.length - 1);\n      onPageChange({\n        id: item.pageID,\n      }, { items: JSON.stringify(orderArray) });\n    }\n    onClickOutside();\n  };\n\n  const moveToBack = () => {\n    if (itemIndex !== 0) {\n      moveArrayItem(orderArray, itemIndex, 0);\n      onPageChange({\n        id: item.pageID,\n      }, { items: JSON.stringify(orderArray) });\n    }\n    onClickOutside();\n  };\n\n  const moveForward = () => {\n    if (items.length !== itemIndex + 1) {\n      const colluddedItemIndex = collisionCheck(item, items, itemIndex, 1);\n      if (colluddedItemIndex !== null) {\n        moveArrayItem(orderArray, itemIndex, colluddedItemIndex);\n      } else {\n        moveArrayItem(orderArray, itemIndex, itemIndex + 1);\n      }\n      onPageChange({\n        id: item.pageID,\n      }, { items: JSON.stringify(orderArray) });\n    }\n    onClickOutside();\n  };\n\n  const moveBackward = () => {\n    if (itemIndex !== 0) {\n      const colluddedItemIndex = collisionCheck(item, items, itemIndex, -1);\n      if (colluddedItemIndex) {\n        moveArrayItem(orderArray, itemIndex, colluddedItemIndex);\n      } else {\n        moveArrayItem(orderArray, itemIndex, itemIndex - 1);\n      }\n      onPageChange({\n        id: item.pageID,\n      }, { items: JSON.stringify(orderArray) });\n    }\n\n    onClickOutside();\n  };\n\n  const deleteItem = () => {\n    onItemRemove(item);\n    onClickOutside();\n    onAnEventTrigger('removeItem', item.itemType);\n  };\n\n  const lockOrUnlockItem = () => {\n    onItemChange({ id: item.id }, { isLocked: item.isLocked ? false : true });\n    onClickOutside();\n  };\n\n  const fitToPage = () => {\n    let _height = height;\n    let _width = width;\n    // Keep image ratio on fit\n    if (item.itemType === 'image') {\n      if (item.height > item.width) {\n        _width = (item.width * _height) / item.height;\n      } else if (item.width > item.height) {\n        _height = (item.height * _width) / item.width;\n      }\n    }\n\n    onItemChange({ id: item.id }, {\n      height: _height,\n      left: 0,\n      top: 0,\n      width: _width,\n    });\n\n    onClickOutside();\n    onAnEventTrigger('fitToPage', item.itemType);\n  };\n\n  const {\n    DELETE, FIT_TO_PAGE, LOCK_ITEM,\n    MOVE_BACKWARDS, MOVE_FORWARDS,\n    MOVE_TO_BACK, MOVE_TO_FRONT, UNLOCK_ITEM,\n  } = useTranslatedTexts();\n\n  const menuItems = [\n    { func: moveToFront, icon: <icons.moveToFront />, text: MOVE_TO_FRONT },\n    { func: moveForward, icon: <icons.moveToForward />, text: MOVE_FORWARDS },\n    { func: moveBackward, icon: <icons.moveToBackward />, text: MOVE_BACKWARDS },\n    { func: moveToBack, icon: <icons.moveToBack />, text: MOVE_TO_BACK },\n    {\n      func: lockOrUnlockItem,\n      icon: item.isLocked ? (\n        <icons.unlock className=\"icon-lock\" />\n      ) : (\n        <icons.lock className=\"icon-lock\" />\n      ),\n      text: item.isLocked ? UNLOCK_ITEM : LOCK_ITEM,\n    },\n    {\n      func: fitToPage, icon: <icons.enterFullscreen className=\"icon-lock\" />, text: FIT_TO_PAGE,\n    },\n    {\n      class: ' isDanger', func: deleteItem, icon: <icons.trash />, text: DELETE,\n    },\n  ];\n\n  return (\n    <div\n      ref={container}\n      className=\"contextMenu-wrapper\"\n      style={{\n        left: positions.x,\n        top: positions.y,\n      }}\n    >\n      {menuItems.map(menuItem => {\n        const btnClass = `contextMenu-button jfReportButton${menuItem.class ? menuItem.class : ''}`;\n        return (\n          <button\n            key={menuItem.text}\n            className={btnClass}\n            onClick={menuItem.func}\n            type=\"button\"\n          >\n            <span className=\"contextMenu-icon\">\n              {menuItem.icon}\n            </span>\n            {menuItem.text}\n          </button>\n        );\n      })}\n    </div>\n  );\n};\n\nContextMenu.propTypes = {\n  height: PropTypes.number,\n  item: PropTypes.shape({\n    height: PropTypes.number,\n    id: PropTypes.string,\n    isLocked: PropTypes.bool,\n    itemType: PropTypes.string,\n    left: PropTypes.number,\n    pageID: PropTypes.string,\n    top: PropTypes.number,\n    width: PropTypes.number,\n  }),\n  items: PropTypes.arrayOf(PropTypes.shape({\n    height: PropTypes.number,\n    // id: PropTypes.string,\n    left: PropTypes.number,\n    top: PropTypes.number,\n    width: PropTypes.number,\n  })),\n  onClickOutside: PropTypes.func,\n  position: PropTypes.shape({}),\n  width: PropTypes.number,\n};\n\nconst PortalContext = props => createPortal(<ContextMenu {...props} />, document.body);\n\nexport default withClickOutside(PortalContext);\n"],"names":["ContextMenu","height","item","items","onClickOutside","position","width","onAnEventTrigger","usePropStore","state","onItemChange","onItemRemove","onPageChange","useState","positions","setPositions","container","useRef","itemIndex","findIndex","_item","id","orderArray","map","removeFunc","useEventListener","useLayoutEffect","prev","newPosition","getContainerPositions","current","x","y","moveToFront","length","moveArrayItem","pageID","JSON","stringify","moveToBack","moveForward","colluddedItemIndex","collisionCheck","moveBackward","deleteItem","itemType","lockOrUnlockItem","isLocked","fitToPage","_height","_width","left","top","useTranslatedTexts","DELETE","FIT_TO_PAGE","LOCK_ITEM","MOVE_BACKWARDS","MOVE_FORWARDS","MOVE_TO_BACK","MOVE_TO_FRONT","UNLOCK_ITEM","menuItems","func","icon","_jsx","icons.moveToFront","text","icons.moveToForward","icons.moveToBackward","icons.moveToBack","icons.unlock","icons.lock","icons.enterFullscreen","class","icons.trash","menuItem","btnClass","_jsxs","propTypes","PropTypes","number","shape","string","bool","arrayOf","PortalContext","props","createPortal","document","body","withClickOutside"],"mappings":"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"}

package/lib/cjs/components/Builder/DndWrapper.js

@@ -1,40 +1,40 @@
 'use strict';
 
 var PropTypes = require('prop-types');
-var HTML5Backend = require('react-dnd-html5-backend-cjs');
-var reactDndCjs = require('react-dnd-cjs');
-var MultiBackend = require('react-dnd-multi-backend');
-var TouchBackend = require('react-dnd-touch-backend-cjs');
+var reactDnd = require('react-dnd');
+var reactDndHtml5Backend = require('react-dnd-html5-backend');
+var reactDndMultiBackend = require('react-dnd-multi-backend');
+var reactDndTouchBackend = require('react-dnd-touch-backend');
 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 HTML5Backend__default = /*#__PURE__*/_interopDefaultLegacy(HTML5Backend);
-var MultiBackend__default = /*#__PURE__*/_interopDefaultLegacy(MultiBackend);
-var TouchBackend__default = /*#__PURE__*/_interopDefaultLegacy(TouchBackend);
 
-var HTML5toTouch = {
+var MultiBackendOptions = {
   backends: [{
-    backend: HTML5Backend__default['default'],
-    transition: MultiBackend.MouseTransition
+    backend: reactDndHtml5Backend.HTML5Backend,
+    id: 'html5',
+    transition: reactDndMultiBackend.MouseTransition
   }, {
-    backend: TouchBackend__default['default'],
+    backend: reactDndTouchBackend.TouchBackend,
+    id: 'touch',
     options: {
       delayTouchStart: 135,
       enableMouseEvents: true
     },
     preview: true,
-    transition: MultiBackend.TouchTransition
+    transition: reactDndMultiBackend.TouchTransition
   }]
 };
 
 var DndWrapper = function DndWrapper(_ref) {
-  var children = _ref.children;
+  var _ref$children = _ref.children,
+      children = _ref$children === void 0 ? null : _ref$children;
   if (!children) return null;
-  return /*#__PURE__*/jsxRuntime.jsx(reactDndCjs.DndProvider, {
-    backend: MultiBackend__default['default'],
-    options: HTML5toTouch,
+  return /*#__PURE__*/jsxRuntime.jsx(reactDnd.DndProvider, {
+    backend: reactDndMultiBackend.MultiBackend,
+    options: MultiBackendOptions,
     children: children
   });
 };
@@ -42,9 +42,6 @@ var DndWrapper = function DndWrapper(_ref) {
 DndWrapper.propTypes = {
   children: PropTypes__default['default'].node
 };
-DndWrapper.defaultProps = {
-  children: null
-};
 
 module.exports = DndWrapper;
 //# sourceMappingURL=DndWrapper.js.map

package/lib/cjs/components/Builder/DndWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"DndWrapper.js","sources":["../../../../src/components/Builder/DndWrapper.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport HTML5Backend from 'react-dnd-html5-backend-cjs';\nimport { DndProvider } from 'react-dnd-cjs';\nimport MultiBackend, { TouchTransition, MouseTransition } from 'react-dnd-multi-backend';\nimport TouchBackend from 'react-dnd-touch-backend-cjs';\n\nconst HTML5toTouch = {\n  backends: [\n    {\n      backend: HTML5Backend,\n      transition: MouseTransition,\n    },\n    {\n      backend: TouchBackend,\n      options: {\n        delayTouchStart: 135,\n        enableMouseEvents: true,\n      },\n      preview: true,\n      transition: TouchTransition,\n    },\n  ],\n};\n\nconst DndWrapper = ({ children }) => {\n  if (!children) return null;\n\n  return (\n    <DndProvider\n      backend={MultiBackend}\n      options={HTML5toTouch}\n    >\n      {children}\n    </DndProvider>\n  );\n};\n\nDndWrapper.propTypes = {\n  children: PropTypes.node,\n};\n\nDndWrapper.defaultProps = {\n  children: null,\n};\n\nexport default DndWrapper;\n"],"names":["HTML5toTouch","backends","backend","HTML5Backend","transition","MouseTransition","TouchBackend","options","delayTouchStart","enableMouseEvents","preview","TouchTransition","DndWrapper","children","_jsx","DndProvider","MultiBackend","propTypes","PropTypes","node","defaultProps"],"mappings":";;;;;;;;;;;;;;;;AAMA,IAAMA,YAAY,GAAG;AACnBC,EAAAA,QAAQ,EAAE,CACR;AACEC,IAAAA,OAAO,EAAEC,gCADX;AAEEC,IAAAA,UAAU,EAAEC;AAFd,GADQ,EAKR;AACEH,IAAAA,OAAO,EAAEI,gCADX;AAEEC,IAAAA,OAAO,EAAE;AACPC,MAAAA,eAAe,EAAE,GADV;AAEPC,MAAAA,iBAAiB,EAAE;AAFZ,KAFX;AAMEC,IAAAA,OAAO,EAAE,IANX;AAOEN,IAAAA,UAAU,EAAEO;AAPd,GALQ;AADS,CAArB;;IAkBMC,UAAU,GAAG,SAAbA,UAAa,OAAkB;AAAA,MAAfC,QAAe,QAAfA,QAAe;AACnC,MAAI,CAACA,QAAL,EAAe,OAAO,IAAP;AAEf,sBACEC,eAACC,uBAAD;AACE,IAAA,OAAO,EAAEC,gCADX;AAEE,IAAA,OAAO,EAAEhB,YAFX;AAAA,cAIGa;AAJH,IADF;AAQD;;AAEDD,UAAU,CAACK,SAAX,GAAuB;AACrBJ,EAAAA,QAAQ,EAAEK,6BAAS,CAACC;AADC,CAAvB;AAIAP,UAAU,CAACQ,YAAX,GAA0B;AACxBP,EAAAA,QAAQ,EAAE;AADc,CAA1B;;;;"}
+{"version":3,"file":"DndWrapper.js","sources":["../../../../src/components/Builder/DndWrapper.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport { DndProvider } from 'react-dnd';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\nimport { MouseTransition, TouchTransition, MultiBackend } from 'react-dnd-multi-backend';\nimport { TouchBackend } from 'react-dnd-touch-backend';\n\nconst MultiBackendOptions = {\n  backends: [\n    {\n      backend: HTML5Backend,\n      id: 'html5',\n      transition: MouseTransition,\n    },\n    {\n      backend: TouchBackend,\n      id: 'touch',\n      options: {\n        delayTouchStart: 135,\n        enableMouseEvents: true,\n      },\n      preview: true,\n      transition: TouchTransition,\n    },\n  ],\n};\n\nconst DndWrapper = ({ children = null }) => {\n  if (!children) return null;\n\n  return (\n    <DndProvider\n      backend={MultiBackend}\n      options={MultiBackendOptions}\n    >\n      {children}\n    </DndProvider>\n  );\n};\n\nDndWrapper.propTypes = {\n  children: PropTypes.node,\n};\n\nexport default DndWrapper;\n"],"names":["MultiBackendOptions","backends","backend","HTML5Backend","id","transition","MouseTransition","TouchBackend","options","delayTouchStart","enableMouseEvents","preview","TouchTransition","DndWrapper","children","_jsx","DndProvider","MultiBackend","propTypes","PropTypes","node"],"mappings":";;;;;;;;;;;;;AAMA,IAAMA,mBAAmB,GAAG;AAC1BC,EAAAA,QAAQ,EAAE,CACR;AACEC,IAAAA,OAAO,EAAEC,iCADX;AAEEC,IAAAA,EAAE,EAAE,OAFN;AAGEC,IAAAA,UAAU,EAAEC;AAHd,GADQ,EAMR;AACEJ,IAAAA,OAAO,EAAEK,iCADX;AAEEH,IAAAA,EAAE,EAAE,OAFN;AAGEI,IAAAA,OAAO,EAAE;AACPC,MAAAA,eAAe,EAAE,GADV;AAEPC,MAAAA,iBAAiB,EAAE;AAFZ,KAHX;AAOEC,IAAAA,OAAO,EAAE,IAPX;AAQEN,IAAAA,UAAU,EAAEO;AARd,GANQ;AADgB,CAA5B;;IAoBMC,UAAU,GAAG,SAAbA,UAAa,OAAyB;AAAA,2BAAtBC,QAAsB;AAAA,MAAtBA,QAAsB,8BAAX,IAAW;AAC1C,MAAI,CAACA,QAAL,EAAe,OAAO,IAAP;AAEf,sBACEC,eAACC,oBAAD;AACE,IAAA,OAAO,EAAEC,iCADX;AAEE,IAAA,OAAO,EAAEjB,mBAFX;AAAA,cAIGc;AAJH,IADF;AAQD;;AAEDD,UAAU,CAACK,SAAX,GAAuB;AACrBJ,EAAAA,QAAQ,EAAEK,6BAAS,CAACC;AADC,CAAvB;;;;"}

package/lib/cjs/components/Builder/Element.js

@@ -2,12 +2,14 @@
 
 var React = require('react');
 var PropTypes = require('prop-types');
-var reactDndCjs = require('react-dnd-cjs');
-var HTML5Backend = require('react-dnd-html5-backend-cjs');
+var reactDnd = require('react-dnd');
+var reactDndHtml5Backend = require('react-dnd-html5-backend');
 var itemTypes = require('../../constants/itemTypes.js');
 var functions = require('../../utils/functions.js');
 var generateId = require('../../utils/generateId.js');
 var icons = require('../../utils/icons.js');
+var BuilderContext = require('../../contexts/BuilderContext.js');
+var PropContext = require('../../contexts/PropContext.js');
 var jsxRuntime = require('react/jsx-runtime');
 var label = require('../../assets/svg/toolbox/label.svg.js');
 
@@ -15,7 +17,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var _excluded = ["acceptedItems", "icon", "iconType", "itemType", "onAnEventTrigger", "onItemAdd", "setActiveElement", "setIsRightPanelOpen", "title", "zoom"];
+var _excluded = ["icon", "iconType", "itemType", "title"];
 
 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; }
 
@@ -40,39 +42,61 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 var Element = function Element(_ref) {
-  var acceptedItems = _ref.acceptedItems,
-      icon = _ref.icon,
-      iconType = _ref.iconType,
-      itemType = _ref.itemType,
-      onAnEventTrigger = _ref.onAnEventTrigger,
-      onItemAdd = _ref.onItemAdd,
-      setActiveElement = _ref.setActiveElement,
-      setIsRightPanelOpen = _ref.setIsRightPanelOpen,
-      title = _ref.title,
-      zoom = _ref.zoom,
+  var _ref$icon = _ref.icon,
+      icon = _ref$icon === void 0 ? null : _ref$icon,
+      _ref$iconType = _ref.iconType,
+      iconType = _ref$iconType === void 0 ? '' : _ref$iconType,
+      _ref$itemType = _ref.itemType,
+      itemType = _ref$itemType === void 0 ? '' : _ref$itemType,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
       additionalData = _objectWithoutProperties(_ref, _excluded);
 
-  var _useDrag = reactDndCjs.useDrag({
-    collect: function collect(monitor) {
-      return {
-        isDragging: monitor.isDragging()
-      };
-    },
-    item: _objectSpread({
-      itemType: itemType,
+  var acceptedItems = PropContext.usePropStore(function (state) {
+    return state.acceptedItems;
+  });
+  var onAnEventTrigger = PropContext.usePropStore(function (state) {
+    return state.onAnEventTrigger;
+  });
+  var onItemAdd = PropContext.usePropStore(function (state) {
+    return state.onItemAdd;
+  });
+  var setActiveElement = BuilderContext.useBuilderStore(function (state) {
+    return state.setActiveElement;
+  });
+  var setIsRightPanelOpen = BuilderContext.useBuilderStore(function (state) {
+    return state.setIsRightPanelOpen;
+  });
+  var zoom = BuilderContext.useBuilderStore(function (state) {
+    return state.zoom;
+  });
+
+  var _useDrag = reactDnd.useDrag(function () {
+    return {
+      collect: function collect(monitor) {
+        return {
+          isDragging: monitor.isDragging()
+        };
+      },
+      item: function item() {
+        return _objectSpread({
+          itemType: itemType,
+          type: itemTypes.DROPPABLE_ITEM_TYPE
+        }, additionalData);
+      },
       type: itemTypes.DROPPABLE_ITEM_TYPE
-    }, additionalData)
-  }),
+    };
+  }, [itemType, additionalData]),
       _useDrag2 = _slicedToArray(_useDrag, 3),
       isDragging = _useDrag2[0].isDragging,
       drag = _useDrag2[1],
       preview = _useDrag2[2];
 
   React.useEffect(function () {
-    preview(HTML5Backend.getEmptyImage(), {
+    preview(reactDndHtml5Backend.getEmptyImage(), {
       captureDraggingState: true
     });
-  });
+  }, [preview]);
 
   var onElementClick = function onElementClick() {
     var itemID = generateId();
@@ -112,6 +136,7 @@ var Element = function Element(_ref) {
       onClick: onElementClick,
       onKeyDown: onElementOtherActions,
       style: {
+        cursor: isDragging ? 'grabbing' : 'pointer',
         opacity: isDragging ? 0.5 : 1
       },
       title: title,
@@ -129,28 +154,10 @@ var Element = function Element(_ref) {
 };
 
 Element.propTypes = {
-  acceptedItems: PropTypes__default['default'].shape({}),
   icon: PropTypes__default['default'].oneOfType([PropTypes__default['default'].element, PropTypes__default['default'].func]),
   iconType: PropTypes__default['default'].string,
   itemType: PropTypes__default['default'].string,
-  onAnEventTrigger: PropTypes__default['default'].func,
-  onItemAdd: PropTypes__default['default'].func,
-  setActiveElement: PropTypes__default['default'].func,
-  setIsRightPanelOpen: PropTypes__default['default'].func,
-  title: PropTypes__default['default'].string,
-  zoom: PropTypes__default['default'].number
-};
-Element.defaultProps = {
-  acceptedItems: {},
-  icon: null,
-  iconType: '',
-  itemType: '',
-  onAnEventTrigger: function onAnEventTrigger() {},
-  onItemAdd: function onItemAdd() {},
-  setActiveElement: function setActiveElement() {},
-  setIsRightPanelOpen: function setIsRightPanelOpen() {},
-  title: '',
-  zoom: 1
+  title: PropTypes__default['default'].string
 };
 var Element$1 = /*#__PURE__*/React.memo(Element);
 

package/lib/cjs/components/Builder/Element.js.map

@@ -1 +1 @@
-{"version":3,"file":"Element.js","sources":["../../../../src/components/Builder/Element.js"],"sourcesContent":["import { useEffect, memo } from 'react';\nimport PropTypes from 'prop-types';\nimport { useDrag } from 'react-dnd-cjs';\nimport { getEmptyImage } from 'react-dnd-html5-backend-cjs';\nimport { DROPPABLE_ITEM_TYPE } from '../../constants/itemTypes';\nimport {\n  getMostVisiblePage, getExactIconType, getAvailableCoordinate,\n} from '../../utils/functions';\nimport generateId from '../../utils/generateId';\nimport * as icons from '../../utils/icons';\n\nconst Element = ({\n  acceptedItems,\n  icon,\n  iconType,\n  itemType,\n  onAnEventTrigger,\n  onItemAdd,\n  setActiveElement,\n  setIsRightPanelOpen,\n  title,\n  zoom,\n  ...additionalData\n}) => {\n  const [{ isDragging }, drag, preview] = useDrag({\n    collect: monitor => ({\n      isDragging: monitor.isDragging(),\n    }),\n    item: {\n      itemType,\n      type: DROPPABLE_ITEM_TYPE,\n      ...additionalData,\n    },\n  });\n\n  useEffect(() => {\n    preview(getEmptyImage(), { captureDraggingState: true });\n  });\n\n  const onElementClick = () => {\n    const itemID = generateId();\n    const page = getMostVisiblePage();\n    let left = 0;\n    let top = 0;\n    if (page) { // for test\n      [left, top] = getAvailableCoordinate(page, zoom);\n    }\n    onItemAdd({\n      ...acceptedItems[itemType].details,\n      ...additionalData,\n      id: itemID,\n      left,\n      pageID: page.id,\n      top,\n    });\n    onAnEventTrigger('reportItemAdd', itemType);\n    setActiveElement(itemID);\n    setIsRightPanelOpen(true);\n  };\n\n  const onElementOtherActions = () => {};\n\n  const exactIconType = getExactIconType(iconType);\n  const Icon = icons[exactIconType] ? icons[exactIconType] : icons.label;\n  return (\n    <>\n      <div\n        ref={drag}\n        className=\"toolItem d-flex a-center js-toolItem\"\n        onClick={onElementClick}\n        onKeyDown={onElementOtherActions}\n        style={{ opacity: isDragging ? 0.5 : 1 }}\n        title={title}\n      >\n        <span className=\"toolItem-icon d-flex j-center a-center\">\n          {icon ? icon : (\n            <Icon className={`jfReportSVG icon-question icon-${iconType}`} />\n          )}\n        </span>\n        <span className=\"js-toolItemName toolItem-name d-flex a-center\">\n          { title }\n        </span>\n      </div>\n    </>\n  );\n};\n\nElement.propTypes = {\n  acceptedItems: PropTypes.shape({}),\n  icon: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),\n  iconType: PropTypes.string,\n  itemType: PropTypes.string,\n  onAnEventTrigger: PropTypes.func,\n  onItemAdd: PropTypes.func,\n  setActiveElement: PropTypes.func,\n  setIsRightPanelOpen: PropTypes.func,\n  title: PropTypes.string,\n  zoom: PropTypes.number,\n};\n\nElement.defaultProps = {\n  acceptedItems: {},\n  icon: null,\n  iconType: '',\n  itemType: '',\n  onAnEventTrigger: () => {},\n  onItemAdd: () => {},\n  setActiveElement: () => {},\n  setIsRightPanelOpen: () => {},\n  title: '',\n  zoom: 1,\n};\n\nexport default memo(Element);\n"],"names":["Element","acceptedItems","icon","iconType","itemType","onAnEventTrigger","onItemAdd","setActiveElement","setIsRightPanelOpen","title","zoom","additionalData","useDrag","collect","monitor","isDragging","item","type","DROPPABLE_ITEM_TYPE","drag","preview","useEffect","getEmptyImage","captureDraggingState","onElementClick","itemID","generateId","page","getMostVisiblePage","left","top","getAvailableCoordinate","details","id","pageID","onElementOtherActions","exactIconType","getExactIconType","Icon","icons","_jsx","_jsxs","opacity","propTypes","PropTypes","shape","oneOfType","element","func","string","number","defaultProps","memo"],"mappings":"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"}
+{"version":3,"file":"Element.js","sources":["../../../../src/components/Builder/Element.js"],"sourcesContent":["import { useEffect, memo } from 'react';\nimport PropTypes from 'prop-types';\nimport { useDrag } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { DROPPABLE_ITEM_TYPE } from '../../constants/itemTypes';\nimport {\n  getMostVisiblePage, getExactIconType, getAvailableCoordinate,\n} from '../../utils/functions';\nimport generateId from '../../utils/generateId';\nimport * as icons from '../../utils/icons';\nimport { useBuilderStore } from '../../contexts/BuilderContext';\nimport { usePropStore } from '../../contexts/PropContext';\n\nconst Element = ({\n  icon = null,\n  iconType = '',\n  itemType = '',\n  title = '',\n  ...additionalData\n}) => {\n  const acceptedItems = usePropStore(state => state.acceptedItems);\n  const onAnEventTrigger = usePropStore(state => state.onAnEventTrigger);\n  const onItemAdd = usePropStore(state => state.onItemAdd);\n  const setActiveElement = useBuilderStore(state => state.setActiveElement);\n  const setIsRightPanelOpen = useBuilderStore(state => state.setIsRightPanelOpen);\n  const zoom = useBuilderStore(state => state.zoom);\n\n  const [{ isDragging }, drag, preview] = useDrag(() => ({\n    collect: monitor => ({\n      isDragging: monitor.isDragging(),\n    }),\n\n    item: () => ({\n      itemType,\n      type: DROPPABLE_ITEM_TYPE,\n      ...additionalData,\n    }),\n\n    type: DROPPABLE_ITEM_TYPE,\n  }), [itemType, additionalData]);\n\n  useEffect(() => {\n    preview(getEmptyImage(), { captureDraggingState: true });\n  }, [preview]);\n\n  const onElementClick = () => {\n    const itemID = generateId();\n    const page = getMostVisiblePage();\n    let left = 0;\n    let top = 0;\n    if (page) { // for test\n      [left, top] = getAvailableCoordinate(page, zoom);\n    }\n    onItemAdd({\n      ...acceptedItems[itemType].details,\n      ...additionalData,\n      id: itemID,\n      left,\n      pageID: page.id,\n      top,\n    });\n    onAnEventTrigger('reportItemAdd', itemType);\n    setActiveElement(itemID);\n    setIsRightPanelOpen(true);\n  };\n\n  const onElementOtherActions = () => {};\n\n  const exactIconType = getExactIconType(iconType);\n  const Icon = icons[exactIconType] ? icons[exactIconType] : icons.label;\n  return (\n    <>\n      <div\n        ref={drag}\n        className=\"toolItem d-flex a-center js-toolItem\"\n        onClick={onElementClick}\n        onKeyDown={onElementOtherActions}\n        style={{ cursor: isDragging ? 'grabbing' : 'pointer', opacity: isDragging ? 0.5 : 1 }}\n        title={title}\n      >\n        <span className=\"toolItem-icon d-flex j-center a-center\">\n          {icon ? icon : (\n            <Icon className={`jfReportSVG icon-question icon-${iconType}`} />\n          )}\n        </span>\n        <span className=\"js-toolItemName toolItem-name d-flex a-center\">\n          { title }\n        </span>\n      </div>\n    </>\n  );\n};\n\nElement.propTypes = {\n  icon: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),\n  iconType: PropTypes.string,\n  itemType: PropTypes.string,\n  title: PropTypes.string,\n};\n\nexport default memo(Element);\n"],"names":["Element","icon","iconType","itemType","title","additionalData","acceptedItems","usePropStore","state","onAnEventTrigger","onItemAdd","setActiveElement","useBuilderStore","setIsRightPanelOpen","zoom","useDrag","collect","monitor","isDragging","item","type","DROPPABLE_ITEM_TYPE","drag","preview","useEffect","getEmptyImage","captureDraggingState","onElementClick","itemID","generateId","page","getMostVisiblePage","left","top","getAvailableCoordinate","details","id","pageID","onElementOtherActions","exactIconType","getExactIconType","Icon","icons","_jsx","_jsxs","cursor","opacity","propTypes","PropTypes","oneOfType","element","func","string","memo"],"mappings":"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"}