@jotforminc/dnd-builder 2.9.18 → 2.9.19

package/lib/esm/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,IAAMA,WAAW,GAAG,SAAdA,WAAc,OAWd;AAAA,MAVJC,MAUI,QAVJA,MAUI;AAAA,MATJC,IASI,QATJA,IASI;AAAA,MARJC,KAQI,QARJA,KAQI;AAAA,MAPJC,gBAOI,QAPJA,gBAOI;AAAA,MANJC,cAMI,QANJA,cAMI;AAAA,MALJC,YAKI,QALJA,YAKI;AAAA,MAJJC,YAII,QAJJA,YAII;AAAA,MAHJC,YAGI,QAHJA,YAGI;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADJC,KACI,QADJA,KACI;;AACJ,kBAAkCC,QAAQ,CAACF,QAAD,CAA1C;AAAA;AAAA,MAAOG,SAAP;AAAA,MAAkBC,YAAlB;;AACA,MAAMC,SAAS,GAAGC,MAAM,CAAC,IAAD,CAAxB;AACA,MAAMC,SAAS,GAAGb,KAAK,CAACc,SAAN,CAAgB,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACC,EAAN,KAAajB,IAAI,CAACiB,EAAtB;AAAA,GAArB,CAAlB,CAHI;;AAKJ,MAAMC,UAAU,GAAGjB,KAAK,CAACkB,GAAN,CAAU,UAAAH,KAAK;AAAA,WAAIA,KAAK,CAACC,EAAV;AAAA,GAAf,CAAnB;;AAEA,MAAMG,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB;AACAjB,IAAAA,cAAc;AACf,GAHD;;AAKAkB,EAAAA,gBAAgB,CAAC,OAAD,EAAUD,UAAV,CAAhB;AAEAE,EAAAA,eAAe,CAAC,YAAM;AACpB,QAAMC,WAAW,GAAGC,qBAAqB,CAACZ,SAAS,CAACa,OAAX,EAAoBf,SAApB,CAAzC;AACAC,IAAAA,YAAY,CAAC;AACXe,MAAAA,CAAC,EAAEH,WAAW,CAACG,CADJ;AAEXC,MAAAA,CAAC,EAAEJ,WAAW,CAACI;AAFJ,KAAD,CAAZ;AAID,GANc,EAMZ,EANY,CAAf;;AAQA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAI3B,KAAK,CAAC4B,MAAN,KAAiBf,SAAS,GAAG,CAAjC,EAAoC;AAClCgB,MAAAA,aAAa,CAACZ,UAAD,EAAaJ,SAAb,EAAwBb,KAAK,CAAC4B,MAAN,GAAe,CAAvC,CAAb;AACAvB,MAAAA,YAAY,CAAC;AACXW,QAAAA,EAAE,EAAEjB,IAAI,CAAC+B;AADE,OAAD,EAET;AAAE9B,QAAAA,KAAK,EAAE+B,IAAI,CAACC,SAAL,CAAef,UAAf;AAAT,OAFS,CAAZ;AAGD;;AACDf,IAAAA,cAAc;AACf,GARD;;AAUA,MAAM+B,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,QAAIpB,SAAS,KAAK,CAAlB,EAAqB;AACnBgB,MAAAA,aAAa,CAACZ,UAAD,EAAaJ,SAAb,EAAwB,CAAxB,CAAb;AACAR,MAAAA,YAAY,CAAC;AACXW,QAAAA,EAAE,EAAEjB,IAAI,CAAC+B;AADE,OAAD,EAET;AAAE9B,QAAAA,KAAK,EAAE+B,IAAI,CAACC,SAAL,CAAef,UAAf;AAAT,OAFS,CAAZ;AAGD;;AACDf,IAAAA,cAAc;AACf,GARD;;AAUA,MAAMgC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAIlC,KAAK,CAAC4B,MAAN,KAAiBf,SAAS,GAAG,CAAjC,EAAoC;AAClC,UAAMsB,kBAAkB,GAAGC,cAAc,CAACrC,IAAD,EAAOC,KAAP,EAAca,SAAd,EAAyB,CAAzB,CAAzC;;AACA,UAAIsB,kBAAkB,KAAK,IAA3B,EAAiC;AAC/BN,QAAAA,aAAa,CAACZ,UAAD,EAAaJ,SAAb,EAAwBsB,kBAAxB,CAAb;AACD,OAFD,MAEO;AACLN,QAAAA,aAAa,CAACZ,UAAD,EAAaJ,SAAb,EAAwBA,SAAS,GAAG,CAApC,CAAb;AACD;;AACDR,MAAAA,YAAY,CAAC;AACXW,QAAAA,EAAE,EAAEjB,IAAI,CAAC+B;AADE,OAAD,EAET;AAAE9B,QAAAA,KAAK,EAAE+B,IAAI,CAACC,SAAL,CAAef,UAAf;AAAT,OAFS,CAAZ;AAGD;;AACDf,IAAAA,cAAc;AACf,GAbD;;AAeA,MAAMmC,YAAY,GAAG,SAAfA,YAAe,GAAM;AACzB,QAAIxB,SAAS,KAAK,CAAlB,EAAqB;AACnB,UAAMsB,kBAAkB,GAAGC,cAAc,CAACrC,IAAD,EAAOC,KAAP,EAAca,SAAd,EAAyB,CAAC,CAA1B,CAAzC;;AACA,UAAIsB,kBAAJ,EAAwB;AACtBN,QAAAA,aAAa,CAACZ,UAAD,EAAaJ,SAAb,EAAwBsB,kBAAxB,CAAb;AACD,OAFD,MAEO;AACLN,QAAAA,aAAa,CAACZ,UAAD,EAAaJ,SAAb,EAAwBA,SAAS,GAAG,CAApC,CAAb;AACD;;AACDR,MAAAA,YAAY,CAAC;AACXW,QAAAA,EAAE,EAAEjB,IAAI,CAAC+B;AADE,OAAD,EAET;AAAE9B,QAAAA,KAAK,EAAE+B,IAAI,CAACC,SAAL,CAAef,UAAf;AAAT,OAFS,CAAZ;AAGD;;AAEDf,IAAAA,cAAc;AACf,GAdD;;AAgBA,MAAMoC,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvBlC,IAAAA,YAAY,CAACL,IAAD,CAAZ;AACAG,IAAAA,cAAc;AACdD,IAAAA,gBAAgB,CAAC,YAAD,EAAeF,IAAI,CAACwC,QAApB,CAAhB;AACD,GAJD;;AAMA,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,GAAM;AAC7BrC,IAAAA,YAAY,CAAC;AAAEa,MAAAA,EAAE,EAAEjB,IAAI,CAACiB;AAAX,KAAD,EAAkB;AAAEyB,MAAAA,QAAQ,EAAE1C,IAAI,CAAC0C,QAAL,GAAgB,KAAhB,GAAwB;AAApC,KAAlB,CAAZ;AACAvC,IAAAA,cAAc;AACf,GAHD;;AAKA,MAAMwC,SAAS,GAAG,SAAZA,SAAY,GAAM;AACtB,QAAIC,OAAO,GAAG7C,MAAd;AACA,QAAI8C,MAAM,GAAGrC,KAAb,CAFsB;;AAItB,QAAIR,IAAI,CAACwC,QAAL,KAAkB,OAAtB,EAA+B;AAC7B,UAAIxC,IAAI,CAACD,MAAL,GAAcC,IAAI,CAACQ,KAAvB,EAA8B;AAC5BqC,QAAAA,MAAM,GAAI7C,IAAI,CAACQ,KAAL,GAAaoC,OAAd,GAAyB5C,IAAI,CAACD,MAAvC;AACD,OAFD,MAEO,IAAIC,IAAI,CAACQ,KAAL,GAAaR,IAAI,CAACD,MAAtB,EAA8B;AACnC6C,QAAAA,OAAO,GAAI5C,IAAI,CAACD,MAAL,GAAc8C,MAAf,GAAyB7C,IAAI,CAACQ,KAAxC;AACD;AACF;;AAEDJ,IAAAA,YAAY,CAAC;AAAEa,MAAAA,EAAE,EAAEjB,IAAI,CAACiB;AAAX,KAAD,EAAkB;AAC5BlB,MAAAA,MAAM,EAAE6C,OADoB;AAE5BE,MAAAA,IAAI,EAAE,CAFsB;AAG5BC,MAAAA,GAAG,EAAE,CAHuB;AAI5BvC,MAAAA,KAAK,EAAEqC;AAJqB,KAAlB,CAAZ;AAOA1C,IAAAA,cAAc;AACdD,IAAAA,gBAAgB,CAAC,WAAD,EAAcF,IAAI,CAACwC,QAAnB,CAAhB;AACD,GArBD;;AAuBA,4BAIIQ,kBAAkB,EAJtB;AAAA,MACEC,MADF,uBACEA,MADF;AAAA,MACUC,WADV,uBACUA,WADV;AAAA,MACuBC,SADvB,uBACuBA,SADvB;AAAA,MAEEC,cAFF,uBAEEA,cAFF;AAAA,MAEkBC,aAFlB,uBAEkBA,aAFlB;AAAA,MAGEC,YAHF,uBAGEA,YAHF;AAAA,MAGgBC,aAHhB,uBAGgBA,aAHhB;AAAA,MAG+BC,WAH/B,uBAG+BA,WAH/B;;AAMA,MAAMC,SAAS,GAAG,CAChB;AAAEC,IAAAA,IAAI,EAAE9B,WAAR;AAAqB+B,IAAAA,IAAI,eAAEC,IAACC,cAAD,KAA3B;AAAkDC,IAAAA,IAAI,EAAEP;AAAxD,GADgB,EAEhB;AAAEG,IAAAA,IAAI,EAAEvB,WAAR;AAAqBwB,IAAAA,IAAI,eAAEC,IAACG,gBAAD,KAA3B;AAAoDD,IAAAA,IAAI,EAAET;AAA1D,GAFgB,EAGhB;AAAEK,IAAAA,IAAI,EAAEpB,YAAR;AAAsBqB,IAAAA,IAAI,eAAEC,IAACI,iBAAD,KAA5B;AAAsDF,IAAAA,IAAI,EAAEV;AAA5D,GAHgB,EAIhB;AAAEM,IAAAA,IAAI,EAAExB,UAAR;AAAoByB,IAAAA,IAAI,eAAEC,IAACK,aAAD,KAA1B;AAAgDH,IAAAA,IAAI,EAAER;AAAtD,GAJgB,EAKhB;AACEI,IAAAA,IAAI,EAAEjB,gBADR;AAEEkB,IAAAA,IAAI,EAAE3D,IAAI,CAAC0C,QAAL,gBACJkB,IAACM,SAAD;AAAc,MAAA,SAAS,EAAC;AAAxB,MADI,gBAGJN,IAACO,OAAD;AAAY,MAAA,SAAS,EAAC;AAAtB,MALJ;AAOEL,IAAAA,IAAI,EAAE9D,IAAI,CAAC0C,QAAL,GAAgBc,WAAhB,GAA8BL;AAPtC,GALgB,EAchB;AACEO,IAAAA,IAAI,EAAEf,SADR;AACmBgB,IAAAA,IAAI,eAAEC,IAACQ,kBAAD;AAAuB,MAAA,SAAS,EAAC;AAAjC,MADzB;AAC0EN,IAAAA,IAAI,EAAEZ;AADhF,GAdgB,EAiBhB;AACEmB,IAAAA,KAAK,EAAE,WADT;AACsBX,IAAAA,IAAI,EAAEnB,UAD5B;AACwCoB,IAAAA,IAAI,eAAEC,IAACU,QAAD,KAD9C;AAC+DR,IAAAA,IAAI,EAAEb;AADrE,GAjBgB,CAAlB;AAsBA,sBACEW;AACE,IAAA,GAAG,EAAEhD,SADP;AAEE,IAAA,SAAS,EAAC,qBAFZ;AAGE,IAAA,KAAK,EAAE;AACLkC,MAAAA,IAAI,EAAEpC,SAAS,CAACgB,CADX;AAELqB,MAAAA,GAAG,EAAErC,SAAS,CAACiB;AAFV,KAHT;AAAA,cAQG8B,SAAS,CAACtC,GAAV,CAAc,UAAAoD,QAAQ,EAAI;AACzB,UAAMC,QAAQ,8CAAuCD,QAAQ,CAACF,KAAT,GAAiBE,QAAQ,CAACF,KAA1B,GAAkC,EAAzE,CAAd;AACA,0BACEI;AAEE,QAAA,SAAS,EAAED,QAFb;AAGE,QAAA,OAAO,EAAED,QAAQ,CAACb,IAHpB;AAIE,QAAA,IAAI,EAAC,QAJP;AAAA,gCAMEE;AAAM,UAAA,SAAS,EAAC,kBAAhB;AAAA,oBACGW,QAAQ,CAACZ;AADZ,UANF,EASGY,QAAQ,CAACT,IATZ;AAAA,SACOS,QAAQ,CAACT,IADhB,CADF;AAaD,KAfA;AARH,IADF;AA2BD,CA7KD;;AA+KAhE,WAAW,CAAC4E,SAAZ,GAAwB;AACtB3E,EAAAA,MAAM,EAAE4E,SAAS,CAACC,MADI;AAEtB5E,EAAAA,IAAI,EAAE2E,SAAS,CAACE,KAAV,CAAgB;AACpB9E,IAAAA,MAAM,EAAE4E,SAAS,CAACC,MADE;AAEpB3D,IAAAA,EAAE,EAAE0D,SAAS,CAACG,MAFM;AAGpBpC,IAAAA,QAAQ,EAAEiC,SAAS,CAACI,IAHA;AAIpBvC,IAAAA,QAAQ,EAAEmC,SAAS,CAACG,MAJA;AAKpBhC,IAAAA,IAAI,EAAE6B,SAAS,CAACC,MALI;AAMpB7C,IAAAA,MAAM,EAAE4C,SAAS,CAACG,MANE;AAOpB/B,IAAAA,GAAG,EAAE4B,SAAS,CAACC,MAPK;AAQpBpE,IAAAA,KAAK,EAAEmE,SAAS,CAACC;AARG,GAAhB,CAFgB;AAYtB3E,EAAAA,KAAK,EAAE0E,SAAS,CAACK,OAAV,CAAkBL,SAAS,CAACE,KAAV,CAAgB;AACvC9E,IAAAA,MAAM,EAAE4E,SAAS,CAACC,MADqB;AAEvC;AACA9B,IAAAA,IAAI,EAAE6B,SAAS,CAACC,MAHuB;AAIvC7B,IAAAA,GAAG,EAAE4B,SAAS,CAACC,MAJwB;AAKvCpE,IAAAA,KAAK,EAAEmE,SAAS,CAACC;AALsB,GAAhB,CAAlB,CAZe;AAmBtB1E,EAAAA,gBAAgB,EAAEyE,SAAS,CAACjB,IAnBN;AAoBtBvD,EAAAA,cAAc,EAAEwE,SAAS,CAACjB,IApBJ;AAqBtBtD,EAAAA,YAAY,EAAEuE,SAAS,CAACjB,IArBF;AAsBtBrD,EAAAA,YAAY,EAAEsE,SAAS,CAACjB,IAtBF;AAuBtBpD,EAAAA,YAAY,EAAEqE,SAAS,CAACjB,IAvBF;AAwBtBnD,EAAAA,QAAQ,EAAEoE,SAAS,CAACE,KAAV,CAAgB,EAAhB,CAxBY;AAyBtBrE,EAAAA,KAAK,EAAEmE,SAAS,CAACC;AAzBK,CAAxB;AA4BA9E,WAAW,CAACmF,YAAZ,GAA2B;AACzBlF,EAAAA,MAAM,EAAE,CADiB;AAEzBC,EAAAA,IAAI,EAAE,EAFmB;AAGzBC,EAAAA,KAAK,EAAE,EAHkB;AAIzBC,EAAAA,gBAAgB,EAAE,4BAAM,EAJC;AAKzBC,EAAAA,cAAc,EAAE,0BAAM,EALG;AAMzBC,EAAAA,YAAY,EAAE,wBAAM,EANK;AAOzBC,EAAAA,YAAY,EAAE,wBAAM,EAPK;AAQzBC,EAAAA,YAAY,EAAE,wBAAM,EARK;AASzBC,EAAAA,QAAQ,EAAE,EATe;AAUzBC,EAAAA,KAAK,EAAE;AAVkB,CAA3B;;AAaA,IAAM0E,aAAa,GAAG,SAAhBA,aAAgB,CAAAC,KAAK;AAAA,sBAAIC,YAAY,eAACxB,IAAC,WAAD,oBAAiBuB,KAAjB,EAAD,EAA6BE,QAAQ,CAACC,IAAtC,CAAhB;AAAA,CAA3B;;AAEA,oBAAeC,gBAAgB,CAACL,aAAD,CAA/B;;;;"}
+{"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 = 1,\n  item = {},\n  items = [],\n  onAnEventTrigger = () => {},\n  onClickOutside = () => {},\n  onItemChange = () => {},\n  onItemRemove = () => {},\n  onPageChange = () => {},\n  position = {},\n  width = 1,\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\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","PortalContext","props","createPortal","document","body","withClickOutside"],"mappings":"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"}

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

@@ -23,7 +23,8 @@ var MultiBackendOptions = {
 };
 
 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__*/jsx(DndProvider, {
     backend: MultiBackend,
@@ -35,9 +36,6 @@ var DndWrapper = function DndWrapper(_ref) {
 DndWrapper.propTypes = {
   children: PropTypes.node
 };
-DndWrapper.defaultProps = {
-  children: null
-};
 
 export default DndWrapper;
 //# sourceMappingURL=DndWrapper.js.map

package/lib/esm/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 { 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 }) => {\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\nDndWrapper.defaultProps = {\n  children: null,\n};\n\nexport default DndWrapper;\n"],"names":["MultiBackendOptions","backends","backend","HTML5Backend","id","transition","MouseTransition","TouchBackend","options","delayTouchStart","enableMouseEvents","preview","TouchTransition","DndWrapper","children","_jsx","MultiBackend","propTypes","PropTypes","node","defaultProps"],"mappings":";;;;;;;AAMA,IAAMA,mBAAmB,GAAG;AAC1BC,EAAAA,QAAQ,EAAE,CACR;AACEC,IAAAA,OAAO,EAAEC,YADX;AAEEC,IAAAA,EAAE,EAAE,OAFN;AAGEC,IAAAA,UAAU,EAAEC;AAHd,GADQ,EAMR;AACEJ,IAAAA,OAAO,EAAEK,YADX;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,OAAkB;AAAA,MAAfC,QAAe,QAAfA,QAAe;AACnC,MAAI,CAACA,QAAL,EAAe,OAAO,IAAP;AAEf,sBACEC,IAAC,WAAD;AACE,IAAA,OAAO,EAAEC,YADX;AAEE,IAAA,OAAO,EAAEhB,mBAFX;AAAA,cAIGc;AAJH,IADF;AAQD;;AAEDD,UAAU,CAACI,SAAX,GAAuB;AACrBH,EAAAA,QAAQ,EAAEI,SAAS,CAACC;AADC,CAAvB;AAIAN,UAAU,CAACO,YAAX,GAA0B;AACxBN,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","MultiBackend","propTypes","PropTypes","node"],"mappings":";;;;;;;AAMA,IAAMA,mBAAmB,GAAG;AAC1BC,EAAAA,QAAQ,EAAE,CACR;AACEC,IAAAA,OAAO,EAAEC,YADX;AAEEC,IAAAA,EAAE,EAAE,OAFN;AAGEC,IAAAA,UAAU,EAAEC;AAHd,GADQ,EAMR;AACEJ,IAAAA,OAAO,EAAEK,YADX;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,IAAC,WAAD;AACE,IAAA,OAAO,EAAEC,YADX;AAEE,IAAA,OAAO,EAAEhB,mBAFX;AAAA,cAIGc;AAJH,IADF;AAQD;;AAEDD,UAAU,CAACI,SAAX,GAAuB;AACrBH,EAAAA,QAAQ,EAAEI,SAAS,CAACC;AADC,CAAvB;;;;"}

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

@@ -34,16 +34,26 @@ 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$acceptedItems = _ref.acceptedItems,
+      acceptedItems = _ref$acceptedItems === void 0 ? {} : _ref$acceptedItems,
+      _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$onAnEventTrigger = _ref.onAnEventTrigger,
+      onAnEventTrigger = _ref$onAnEventTrigger === void 0 ? function () {} : _ref$onAnEventTrigger,
+      _ref$onItemAdd = _ref.onItemAdd,
+      onItemAdd = _ref$onItemAdd === void 0 ? function () {} : _ref$onItemAdd,
+      _ref$setActiveElement = _ref.setActiveElement,
+      setActiveElement = _ref$setActiveElement === void 0 ? function () {} : _ref$setActiveElement,
+      _ref$setIsRightPanelO = _ref.setIsRightPanelOpen,
+      setIsRightPanelOpen = _ref$setIsRightPanelO === void 0 ? function () {} : _ref$setIsRightPanelO,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
+      _ref$zoom = _ref.zoom,
+      zoom = _ref$zoom === void 0 ? 1 : _ref$zoom,
       additionalData = _objectWithoutProperties(_ref, _excluded);
 
   var _useDrag = useDrag(function () {
@@ -55,10 +65,11 @@ var Element = function Element(_ref) {
       },
       item: function item() {
         return _objectSpread({
-          itemType: itemType
+          itemType: itemType,
+          type: DROPPABLE_ITEM_TYPE
         }, additionalData);
       },
-      type: itemType !== null && itemType !== void 0 ? itemType : DROPPABLE_ITEM_TYPE
+      type: DROPPABLE_ITEM_TYPE
     };
   }, [itemType, additionalData]),
       _useDrag2 = _slicedToArray(_useDrag, 3),
@@ -110,6 +121,7 @@ var Element = function Element(_ref) {
       onClick: onElementClick,
       onKeyDown: onElementOtherActions,
       style: {
+        cursor: isDragging ? 'grabbing' : 'pointer',
         opacity: isDragging ? 0.5 : 1
       },
       title: title,
@@ -138,18 +150,6 @@ Element.propTypes = {
   title: PropTypes.string,
   zoom: PropTypes.number
 };
-Element.defaultProps = {
-  acceptedItems: {},
-  icon: null,
-  iconType: '',
-  itemType: '',
-  onAnEventTrigger: function onAnEventTrigger() {},
-  onItemAdd: function onItemAdd() {},
-  setActiveElement: function setActiveElement() {},
-  setIsRightPanelOpen: function setIsRightPanelOpen() {},
-  title: '',
-  zoom: 1
-};
 var Element$1 = /*#__PURE__*/memo(Element);
 
 export default Element$1;

package/lib/esm/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';\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';\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\n    item: () => ({\n      itemType,\n      ...additionalData,\n    }),\n\n    type: itemType ?? 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={{ 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';\n\nconst Element = ({\n  acceptedItems = {},\n  icon = null,\n  iconType = '',\n  itemType = '',\n  onAnEventTrigger = () => {},\n  onItemAdd = () => {},\n  setActiveElement = () => {},\n  setIsRightPanelOpen = () => {},\n  title = '',\n  zoom = 1,\n  ...additionalData\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  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\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","cursor","opacity","propTypes","PropTypes","shape","oneOfType","element","func","string","number","memo"],"mappings":"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"}

package/lib/esm/components/Builder/Page.js

@@ -1,15 +1,22 @@
-import { memo, useState, useRef, useMemo } from 'react';
+import { memo, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useDrop } from 'react-dnd';
-import { ACCEPTED_TYPES } from '../../constants/itemTypes.js';
+import { ACCEPTED_TYPES, DROPPABLE_ITEM_TYPE, DRAGGABLE_ITEM_TYPE } from '../../constants/itemTypes.js';
 import AlignmentGuides from '../AlignmentGuides.js';
 import ReportItemsWrapper from '../ReportItemsWrapper.js';
 import { useBuilderContext } from '../../utils/builderContext.js';
 import { usePropContext } from '../../utils/propContext.js';
-import { getCorrectDroppedOffsetValue, calculateGuidePositions, proximityListener } from '../../utils/functions.js';
+import { getCorrectDroppedOffsetValue, getCorrectDroppedOffsetValueBySnap, findItemById, calculateGuidePositions, proximityListener } from '../../utils/functions.js';
 import { pageContainer } from '../../constants/classNames.js';
+import generateId from '../../utils/generateId.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
+var _excluded = ["id", "itemType", "pageID"];
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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; }
+
 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; }
@@ -30,20 +37,38 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var emptyObject = {};
 
 var Page = function Page(_ref) {
-  var activeElement = _ref.activeElement,
-      additionalPageItems = _ref.additionalPageItems,
-      guides = _ref.guides,
-      hashCode = _ref.hashCode,
-      itemAccessor = _ref.itemAccessor,
-      items = _ref.items,
-      onDrop = _ref.onDrop,
-      onItemAdd = _ref.onItemAdd,
-      onItemChange = _ref.onItemChange,
-      onItemRemove = _ref.onItemRemove,
-      onItemResize = _ref.onItemResize,
-      page = _ref.page,
-      pageRef = _ref.pageRef,
-      style = _ref.style;
+  var _ref$activeElement = _ref.activeElement,
+      activeElement = _ref$activeElement === void 0 ? null : _ref$activeElement,
+      _ref$additionalPageIt = _ref.additionalPageItems,
+      additionalPageItems = _ref$additionalPageIt === void 0 ? [] : _ref$additionalPageIt,
+      _ref$guides = _ref.guides,
+      guides = _ref$guides === void 0 ? {} : _ref$guides,
+      _ref$hashCode = _ref.hashCode,
+      hashCode = _ref$hashCode === void 0 ? '' : _ref$hashCode,
+      _ref$itemAccessor = _ref.itemAccessor,
+      itemAccessor = _ref$itemAccessor === void 0 ? function () {} : _ref$itemAccessor,
+      _ref$items = _ref.items,
+      items = _ref$items === void 0 ? [] : _ref$items,
+      _ref$onItemAdd = _ref.onItemAdd,
+      onItemAdd = _ref$onItemAdd === void 0 ? function () {} : _ref$onItemAdd,
+      _ref$onItemChange = _ref.onItemChange,
+      onItemChange = _ref$onItemChange === void 0 ? function () {} : _ref$onItemChange,
+      _ref$onItemMove = _ref.onItemMove,
+      onItemMove = _ref$onItemMove === void 0 ? function () {} : _ref$onItemMove,
+      _ref$onItemRemove = _ref.onItemRemove,
+      onItemRemove = _ref$onItemRemove === void 0 ? function () {} : _ref$onItemRemove,
+      _ref$onItemResize = _ref.onItemResize,
+      onItemResize = _ref$onItemResize === void 0 ? function () {} : _ref$onItemResize,
+      _ref$onItemsMove = _ref.onItemsMove,
+      onItemsMove = _ref$onItemsMove === void 0 ? function () {} : _ref$onItemsMove,
+      _ref$page = _ref.page,
+      page = _ref$page === void 0 ? {} : _ref$page,
+      _ref$pageRef = _ref.pageRef,
+      pageRef = _ref$pageRef === void 0 ? {} : _ref$pageRef,
+      _ref$pages = _ref.pages,
+      pages = _ref$pages === void 0 ? [] : _ref$pages,
+      _ref$style = _ref.style,
+      style = _ref$style === void 0 ? {} : _ref$style;
 
   var _useBuilderContext = useBuilderContext(),
       isRightPanelOpen = _useBuilderContext.isRightPanelOpen,
@@ -82,7 +107,7 @@ var Page = function Page(_ref) {
 
         var activeItem = _objectSpread(_objectSpread({}, item), coords);
 
-        var _guides = _objectSpread(_objectSpread({}, guides), {}, _defineProperty({}, item.id, _objectSpread(_objectSpread({}, guides[item.id]), {}, {
+        var _guides = _objectSpread(_objectSpread({}, guides[item.pageID]), {}, _defineProperty({}, item.id, _objectSpread(_objectSpread({}, guides[item.pageID][item.id]), {}, {
           x: calculateGuidePositions(activeItem, 'x', zoom),
           y: calculateGuidePositions(activeItem, 'y', zoom)
         })));
@@ -96,26 +121,83 @@ var Page = function Page(_ref) {
     };
   };
 
+  var isMultipleItemSelected = activeElement !== null && activeElement.length > 1;
+
   var onHover = function onHover(item, monitor) {
     if (!requestRef.current) {
       requestRef.current = global.requestAnimationFrame(drawAlignmentGuides(item, monitor));
     }
   };
 
-  var dropConfig = useMemo(function () {
-    return {
-      accept: ACCEPTED_TYPES,
-      collect: function collect(monitor) {
-        return {
-          isOver: monitor.isOver()
-        };
-      },
-      drop: onDrop,
-      hover: onHover
-    };
-  }, [onDrop, onHover]);
+  var _useDrop = useDrop({
+    accept: ACCEPTED_TYPES,
+    collect: function collect(monitor) {
+      return {
+        isOver: monitor.isOver()
+      };
+    },
+    drop: function drop(item, monitor) {
+      var _pageRef$current;
+
+      var pageClient = (_pageRef$current = pageRef.current) === null || _pageRef$current === void 0 ? void 0 : _pageRef$current.getBoundingClientRect();
+      var coords = getCorrectDroppedOffsetValue(monitor, pageClient, zoom);
+      var type = monitor.getItemType();
+
+      var id = item.id,
+          itemType = item.itemType;
+          item.pageID;
+          var additionalData = _objectWithoutProperties(item, _excluded);
+
+      var newCoords = {};
 
-  var _useDrop = useDrop(dropConfig),
+      if (type === DROPPABLE_ITEM_TYPE) {
+        var itemID = generateId();
+        onItemAdd(_objectSpread(_objectSpread(_objectSpread({}, acceptedItems[itemType].details), {}, {
+          id: itemID,
+          pageID: page.id
+        }, coords), additionalData));
+        onAnEventTrigger('reportItemAdd', itemType);
+        setActiveElement(itemID);
+        setIsRightPanelOpen(true);
+        newCoords[itemID] = coords;
+      } else if (type === DRAGGABLE_ITEM_TYPE) {
+        var dragCoords = getCorrectDroppedOffsetValueBySnap(coords, guides, id, pages, zoom);
+
+        if (isMultipleItemSelected) {
+          var leftDifference = additionalData.left - dragCoords.left;
+          var topDifference = additionalData.top - dragCoords.top;
+
+          var _items = activeElement.reduce(function (acc, curr) {
+            var tempItem = findItemById(curr, pages);
+            acc[curr] = {
+              id: curr,
+              left: tempItem.left - leftDifference,
+              pageID: page.id,
+              top: tempItem.top - topDifference
+            };
+            newCoords[curr] = {
+              left: tempItem.left - leftDifference,
+              top: tempItem.top - topDifference
+            };
+            return acc;
+          }, {});
+
+          onItemsMove({
+            items: _items
+          });
+        } else {
+          onItemMove(_objectSpread({
+            id: id,
+            pageID: page.id
+          }, dragCoords));
+          newCoords[id] = dragCoords;
+        }
+      }
+
+      return newCoords;
+    },
+    hover: onHover
+  }),
       _useDrop2 = _slicedToArray(_useDrop, 2),
       isOver = _useDrop2[0].isOver,
       drop = _useDrop2[1];
@@ -135,7 +217,7 @@ var Page = function Page(_ref) {
         children: [/*#__PURE__*/jsx(ReportItemsWrapper, {
           acceptedItems: acceptedItems,
           activeElement: activeElement,
-          guides: guides,
+          guides: guides[page.id],
           hashCode: hashCode,
           isResize: isResize,
           isRightPanelOpen: isRightPanelOpen,
@@ -157,13 +239,13 @@ var Page = function Page(_ref) {
           zoom: zoom
         }), additionalPageItems, /*#__PURE__*/jsx(AlignmentGuides, {
           axis: "x",
-          guides: guides,
+          guides: guides[page.id],
           matches: matches,
           show: isOver || isResize,
           zoom: zoom
         }), /*#__PURE__*/jsx(AlignmentGuides, {
           axis: "y",
-          guides: guides,
+          guides: guides[page.id],
           matches: matches,
           show: isOver || isResize,
           zoom: zoom
@@ -180,35 +262,21 @@ Page.propTypes = {
   hashCode: PropTypes.string,
   itemAccessor: PropTypes.func,
   items: PropTypes.arrayOf(PropTypes.shape({})),
-  onDrop: PropTypes.func,
   onItemAdd: PropTypes.func,
   onItemChange: PropTypes.func,
+  onItemMove: PropTypes.func,
   onItemRemove: PropTypes.func,
   onItemResize: PropTypes.func,
+  onItemsMove: PropTypes.func,
   page: PropTypes.shape({
     backgroundColor: PropTypes.string
   }),
   pageRef: PropTypes.shape({
     current: PropTypes.any
   }),
+  pages: PropTypes.arrayOf(PropTypes.shape({})),
   style: PropTypes.shape({})
 };
-Page.defaultProps = {
-  activeElement: null,
-  additionalPageItems: [],
-  guides: {},
-  hashCode: '',
-  itemAccessor: function itemAccessor() {},
-  items: [],
-  onDrop: function onDrop() {},
-  onItemAdd: function onItemAdd() {},
-  onItemChange: function onItemChange() {},
-  onItemRemove: function onItemRemove() {},
-  onItemResize: function onItemResize() {},
-  page: {},
-  pageRef: {},
-  style: {}
-};
 var Page$1 = /*#__PURE__*/memo(Page);
 
 export default Page$1;

package/lib/esm/components/Builder/Page.js.map

@@ -1 +1 @@
-{"version":3,"file":"Page.js","sources":["../../../../src/components/Builder/Page.js"],"sourcesContent":["import {\n  useState,\n  useRef,\n  memo,\n  useMemo,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport { useDrop } from 'react-dnd';\nimport { ACCEPTED_TYPES } from '../../constants/itemTypes';\nimport AlignmentGuides from '../AlignmentGuides';\nimport ReportItemsWrapper from '../ReportItemsWrapper';\nimport { useBuilderContext } from '../../utils/builderContext';\nimport { usePropContext } from '../../utils/propContext';\nimport {\n  proximityListener,\n  calculateGuidePositions,\n  getCorrectDroppedOffsetValue,\n} from '../../utils/functions';\nimport * as classNames from '../../constants/classNames';\n\nconst emptyObject = {};\n\nconst Page = ({\n  activeElement,\n  additionalPageItems,\n  guides,\n  hashCode,\n  itemAccessor,\n  items,\n  onDrop,\n  onItemAdd,\n  onItemChange,\n  onItemRemove,\n  onItemResize,\n  page,\n  pageRef,\n  style,\n}) => {\n  const {\n    isRightPanelOpen,\n    isTextEditorOpen,\n    setActiveElement,\n    setContextMenuProps,\n    setIsRightPanelOpen,\n    zoom,\n  } = useBuilderContext();\n  const { acceptedItems, onAnEventTrigger, settings } = usePropContext();\n  const [matches, setMatches] = useState({});\n  const [isResize, setIsResize] = useState(false);\n  const requestRef = useRef();\n\n  const drawAlignmentGuides = (item, monitor) => {\n    return () => {\n      try {\n        if (!monitor || monitor.getSourceClientOffset() === null) {\n          requestRef.current = undefined;\n          return;\n        }\n        const coords = getCorrectDroppedOffsetValue(\n          monitor,\n          pageRef.current.getBoundingClientRect(),\n          zoom,\n        );\n        const activeItem = {\n          ...item, ...coords,\n        };\n        const _guides = {\n          ...guides,\n          [item.id]: {\n            ...guides[item.id],\n            x: calculateGuidePositions(activeItem, 'x', zoom),\n            y: calculateGuidePositions(activeItem, 'y', zoom),\n          },\n        };\n        const match = proximityListener(item.id, _guides);\n        setMatches(match);\n        requestRef.current = undefined;\n      } catch (error) {\n        setMatches({});\n      }\n    };\n  };\n\n  const onHover = (item, monitor) => {\n    if (!requestRef.current) {\n      requestRef.current = global.requestAnimationFrame(drawAlignmentGuides(item, monitor));\n    }\n  };\n\n  const dropConfig = useMemo(() => ({\n    accept: ACCEPTED_TYPES,\n    collect: monitor => {\n      return {\n        isOver: monitor.isOver(),\n      };\n    },\n    drop: onDrop,\n    hover: onHover,\n  }), [onDrop, onHover]);\n\n  const [{ isOver }, drop] = useDrop(dropConfig);\n\n  const { reportBackgroundColor } = settings;\n  const { backgroundColor } = page;\n  const bgColor = backgroundColor ? backgroundColor : reportBackgroundColor || '#fff';\n\n  return (\n    <>\n      <div\n        ref={drop}\n        className={classNames.pageContainer}\n        style={{\n          backgroundColor: bgColor,\n          ...style,\n        }}\n      >\n        <div className=\"jfReport-hider o-hidden f-all p-relative\">\n          <ReportItemsWrapper\n            acceptedItems={acceptedItems}\n            activeElement={activeElement}\n            guides={guides}\n            hashCode={hashCode}\n            isResize={isResize}\n            isRightPanelOpen={isRightPanelOpen}\n            isTextEditorOpen={isTextEditorOpen}\n            itemAccessor={itemAccessor}\n          // if we send matches all the time, DraggableItems are also rendered on dragging\n            items={items}\n            matches={isResize ? matches : emptyObject}\n            onAnEventTrigger={onAnEventTrigger}\n            onItemAdd={onItemAdd}\n            onItemChange={onItemChange}\n            onItemRemove={onItemRemove}\n            onItemResize={onItemResize}\n            setActiveElement={setActiveElement}\n            setContextMenuProps={setContextMenuProps}\n            setIsResize={setIsResize}\n            setIsRightPanelOpen={setIsRightPanelOpen}\n            setMatches={setMatches}\n            zoom={zoom}\n          />\n          {additionalPageItems}\n          <AlignmentGuides\n            axis=\"x\"\n            guides={guides}\n            matches={matches}\n            show={(isOver || isResize)}\n            zoom={zoom}\n          />\n          <AlignmentGuides\n            axis=\"y\"\n            guides={guides}\n            matches={matches}\n            show={(isOver || isResize)}\n            zoom={zoom}\n          />\n        </div>\n      </div>\n    </>\n  );\n};\n\nPage.propTypes = {\n  activeElement: PropTypes.arrayOf(PropTypes.string),\n  additionalPageItems: PropTypes.arrayOf(PropTypes.node),\n  guides: PropTypes.shape({}),\n  hashCode: PropTypes.string,\n  itemAccessor: PropTypes.func,\n  items: PropTypes.arrayOf(\n    PropTypes.shape({}),\n  ),\n  onDrop: PropTypes.func,\n  onItemAdd: PropTypes.func,\n  onItemChange: PropTypes.func,\n  onItemRemove: PropTypes.func,\n  onItemResize: PropTypes.func,\n  page: PropTypes.shape({\n    backgroundColor: PropTypes.string,\n  }),\n  pageRef: PropTypes.shape({\n    current: PropTypes.any,\n  }),\n  style: PropTypes.shape({}),\n};\n\nPage.defaultProps = {\n  activeElement: null,\n  additionalPageItems: [],\n  guides: {},\n  hashCode: '',\n  itemAccessor: () => {},\n  items: [],\n  onDrop: () => {},\n  onItemAdd: () => {},\n  onItemChange: () => {},\n  onItemRemove: () => {},\n  onItemResize: () => {},\n  page: {},\n  pageRef: {},\n  style: {},\n};\n\nexport default memo(Page);\n"],"names":["emptyObject","Page","activeElement","additionalPageItems","guides","hashCode","itemAccessor","items","onDrop","onItemAdd","onItemChange","onItemRemove","onItemResize","page","pageRef","style","useBuilderContext","isRightPanelOpen","isTextEditorOpen","setActiveElement","setContextMenuProps","setIsRightPanelOpen","zoom","usePropContext","acceptedItems","onAnEventTrigger","settings","useState","matches","setMatches","isResize","setIsResize","requestRef","useRef","drawAlignmentGuides","item","monitor","getSourceClientOffset","current","undefined","coords","getCorrectDroppedOffsetValue","getBoundingClientRect","activeItem","_guides","id","x","calculateGuidePositions","y","match","proximityListener","error","onHover","global","requestAnimationFrame","dropConfig","useMemo","accept","ACCEPTED_TYPES","collect","isOver","drop","hover","useDrop","reportBackgroundColor","backgroundColor","bgColor","_jsx","classNames","_jsxs","propTypes","PropTypes","arrayOf","string","node","shape","func","any","defaultProps","memo"],"mappings":"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"}
+{"version":3,"file":"Page.js","sources":["../../../../src/components/Builder/Page.js"],"sourcesContent":["import {\n  useState,\n  useRef,\n  memo,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport { useDrop } from 'react-dnd';\nimport {\n  ACCEPTED_TYPES,\n  DRAGGABLE_ITEM_TYPE,\n  DROPPABLE_ITEM_TYPE,\n} from '../../constants/itemTypes';\nimport AlignmentGuides from '../AlignmentGuides';\nimport ReportItemsWrapper from '../ReportItemsWrapper';\nimport { useBuilderContext } from '../../utils/builderContext';\nimport { usePropContext } from '../../utils/propContext';\nimport {\n  proximityListener,\n  calculateGuidePositions,\n  getCorrectDroppedOffsetValue,\n  getCorrectDroppedOffsetValueBySnap,\n  findItemById,\n} from '../../utils/functions';\nimport * as classNames from '../../constants/classNames';\nimport generateId from '../../utils/generateId';\n\nconst emptyObject = {};\n\nconst Page = ({\n  activeElement = null,\n  additionalPageItems = [],\n  guides = {},\n  hashCode = '',\n  itemAccessor = () => {},\n  items = [],\n  onItemAdd = () => {},\n  onItemChange = () => {},\n  onItemMove = () => {},\n  onItemRemove = () => {},\n  onItemResize = () => {},\n  onItemsMove = () => {},\n  page = {},\n  pageRef = {},\n  pages = [],\n  style = {},\n}) => {\n  const {\n    isRightPanelOpen,\n    isTextEditorOpen,\n    setActiveElement,\n    setContextMenuProps,\n    setIsRightPanelOpen,\n    zoom,\n  } = useBuilderContext();\n  const { acceptedItems, onAnEventTrigger, settings } = usePropContext();\n  const [matches, setMatches] = useState({});\n  const [isResize, setIsResize] = useState(false);\n  const requestRef = useRef();\n\n  const drawAlignmentGuides = (item, monitor) => {\n    return () => {\n      try {\n        if (!monitor || monitor.getSourceClientOffset() === null) {\n          requestRef.current = undefined;\n          return;\n        }\n        const coords = getCorrectDroppedOffsetValue(\n          monitor,\n          pageRef.current.getBoundingClientRect(),\n          zoom,\n        );\n        const activeItem = {\n          ...item, ...coords,\n        };\n        const _guides = {\n          ...guides[item.pageID],\n          [item.id]: {\n            ...guides[item.pageID][item.id],\n            x: calculateGuidePositions(activeItem, 'x', zoom),\n            y: calculateGuidePositions(activeItem, 'y', zoom),\n          },\n        };\n        const match = proximityListener(item.id, _guides);\n        setMatches(match);\n        requestRef.current = undefined;\n      } catch (error) {\n        setMatches({});\n      }\n    };\n  };\n\n  const isMultipleItemSelected = activeElement !== null && activeElement.length > 1;\n\n  const onHover = (item, monitor) => {\n    if (!requestRef.current) {\n      requestRef.current = global.requestAnimationFrame(drawAlignmentGuides(item, monitor));\n    }\n  };\n\n  const [{ isOver }, drop] = useDrop({\n    accept: ACCEPTED_TYPES,\n    collect: monitor => {\n      return {\n        isOver: monitor.isOver(),\n      };\n    },\n    drop: (item, monitor) => {\n      const pageClient = pageRef.current?.getBoundingClientRect();\n      const coords = getCorrectDroppedOffsetValue(\n        monitor,\n        pageClient,\n        zoom,\n      );\n      const type = monitor.getItemType();\n      const {\n        id, itemType, pageID, ...additionalData\n      } = item;\n      const newCoords = {};\n      if (type === DROPPABLE_ITEM_TYPE) {\n        const itemID = generateId();\n        onItemAdd({\n          ...acceptedItems[itemType].details,\n          id: itemID,\n          pageID: page.id,\n          ...coords,\n          ...additionalData,\n        });\n        onAnEventTrigger('reportItemAdd', itemType);\n        setActiveElement(itemID);\n        setIsRightPanelOpen(true);\n        newCoords[itemID] = coords;\n      } else if (type === DRAGGABLE_ITEM_TYPE) {\n        const dragCoords = getCorrectDroppedOffsetValueBySnap(coords, guides, id, pages, zoom);\n        if (isMultipleItemSelected) {\n          const leftDifference = additionalData.left - dragCoords.left;\n          const topDifference = additionalData.top - dragCoords.top;\n          const _items = activeElement.reduce((acc, curr) => {\n            const tempItem = findItemById(curr, pages);\n            acc[curr] = {\n              id: curr,\n              left: tempItem.left - leftDifference,\n              pageID: page.id,\n              top: tempItem.top - topDifference,\n            };\n            newCoords[curr] = {\n              left: tempItem.left - leftDifference,\n              top: tempItem.top - topDifference,\n            };\n            return acc;\n          }, {});\n          onItemsMove({ items: _items });\n        } else {\n          onItemMove({\n            id,\n            pageID: page.id,\n            ...dragCoords,\n          });\n          newCoords[id] = dragCoords;\n        }\n      }\n\n      return newCoords;\n    },\n    hover: onHover,\n  });\n\n  const { reportBackgroundColor } = settings;\n  const { backgroundColor } = page;\n  const bgColor = backgroundColor ? backgroundColor : reportBackgroundColor || '#fff';\n\n  return (\n    <>\n      <div\n        ref={drop}\n        className={classNames.pageContainer}\n        style={{\n          backgroundColor: bgColor,\n          ...style,\n        }}\n      >\n        <div className=\"jfReport-hider o-hidden f-all p-relative\">\n          <ReportItemsWrapper\n            acceptedItems={acceptedItems}\n            activeElement={activeElement}\n            guides={guides[page.id]}\n            hashCode={hashCode}\n            isResize={isResize}\n            isRightPanelOpen={isRightPanelOpen}\n            isTextEditorOpen={isTextEditorOpen}\n            itemAccessor={itemAccessor}\n          // if we send matches all the time, DraggableItems are also rendered on dragging\n            items={items}\n            matches={isResize ? matches : emptyObject}\n            onAnEventTrigger={onAnEventTrigger}\n            onItemAdd={onItemAdd}\n            onItemChange={onItemChange}\n            onItemRemove={onItemRemove}\n            onItemResize={onItemResize}\n            setActiveElement={setActiveElement}\n            setContextMenuProps={setContextMenuProps}\n            setIsResize={setIsResize}\n            setIsRightPanelOpen={setIsRightPanelOpen}\n            setMatches={setMatches}\n            zoom={zoom}\n          />\n          {additionalPageItems}\n          <AlignmentGuides\n            axis=\"x\"\n            guides={guides[page.id]}\n            matches={matches}\n            show={(isOver || isResize)}\n            zoom={zoom}\n          />\n          <AlignmentGuides\n            axis=\"y\"\n            guides={guides[page.id]}\n            matches={matches}\n            show={(isOver || isResize)}\n            zoom={zoom}\n          />\n        </div>\n      </div>\n    </>\n  );\n};\n\nPage.propTypes = {\n  activeElement: PropTypes.arrayOf(PropTypes.string),\n  additionalPageItems: PropTypes.arrayOf(PropTypes.node),\n  guides: PropTypes.shape({}),\n  hashCode: PropTypes.string,\n  itemAccessor: PropTypes.func,\n  items: PropTypes.arrayOf(\n    PropTypes.shape({}),\n  ),\n  onItemAdd: PropTypes.func,\n  onItemChange: PropTypes.func,\n  onItemMove: PropTypes.func,\n  onItemRemove: PropTypes.func,\n  onItemResize: PropTypes.func,\n  onItemsMove: PropTypes.func,\n  page: PropTypes.shape({\n    backgroundColor: PropTypes.string,\n  }),\n  pageRef: PropTypes.shape({\n    current: PropTypes.any,\n  }),\n  pages: PropTypes.arrayOf(PropTypes.shape({})),\n  style: PropTypes.shape({}),\n};\n\nexport default memo(Page);\n"],"names":["emptyObject","Page","activeElement","additionalPageItems","guides","hashCode","itemAccessor","items","onItemAdd","onItemChange","onItemMove","onItemRemove","onItemResize","onItemsMove","page","pageRef","pages","style","useBuilderContext","isRightPanelOpen","isTextEditorOpen","setActiveElement","setContextMenuProps","setIsRightPanelOpen","zoom","usePropContext","acceptedItems","onAnEventTrigger","settings","useState","matches","setMatches","isResize","setIsResize","requestRef","useRef","drawAlignmentGuides","item","monitor","getSourceClientOffset","current","undefined","coords","getCorrectDroppedOffsetValue","getBoundingClientRect","activeItem","_guides","pageID","id","x","calculateGuidePositions","y","match","proximityListener","error","isMultipleItemSelected","length","onHover","global","requestAnimationFrame","useDrop","accept","ACCEPTED_TYPES","collect","isOver","drop","pageClient","type","getItemType","itemType","additionalData","newCoords","DROPPABLE_ITEM_TYPE","itemID","generateId","details","DRAGGABLE_ITEM_TYPE","dragCoords","getCorrectDroppedOffsetValueBySnap","leftDifference","left","topDifference","top","_items","reduce","acc","curr","tempItem","findItemById","hover","reportBackgroundColor","backgroundColor","bgColor","_jsx","classNames","_jsxs","propTypes","PropTypes","arrayOf","string","node","shape","func","any","memo"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,IAAMA,WAAW,GAAG,EAApB;;AAEA,IAAMC,IAAI,GAAG,SAAPA,IAAO,OAiBP;AAAA,gCAhBJC,aAgBI;AAAA,MAhBJA,aAgBI,mCAhBY,IAgBZ;AAAA,mCAfJC,mBAeI;AAAA,MAfJA,mBAeI,sCAfkB,EAelB;AAAA,yBAdJC,MAcI;AAAA,MAdJA,MAcI,4BAdK,EAcL;AAAA,2BAbJC,QAaI;AAAA,MAbJA,QAaI,8BAbO,EAaP;AAAA,+BAZJC,YAYI;AAAA,MAZJA,YAYI,kCAZW,YAAM,EAYjB;AAAA,wBAXJC,KAWI;AAAA,MAXJA,KAWI,2BAXI,EAWJ;AAAA,4BAVJC,SAUI;AAAA,MAVJA,SAUI,+BAVQ,YAAM,EAUd;AAAA,+BATJC,YASI;AAAA,MATJA,YASI,kCATW,YAAM,EASjB;AAAA,6BARJC,UAQI;AAAA,MARJA,UAQI,gCARS,YAAM,EAQf;AAAA,+BAPJC,YAOI;AAAA,MAPJA,YAOI,kCAPW,YAAM,EAOjB;AAAA,+BANJC,YAMI;AAAA,MANJA,YAMI,kCANW,YAAM,EAMjB;AAAA,8BALJC,WAKI;AAAA,MALJA,WAKI,iCALU,YAAM,EAKhB;AAAA,uBAJJC,IAII;AAAA,MAJJA,IAII,0BAJG,EAIH;AAAA,0BAHJC,OAGI;AAAA,MAHJA,OAGI,6BAHM,EAGN;AAAA,wBAFJC,KAEI;AAAA,MAFJA,KAEI,2BAFI,EAEJ;AAAA,wBADJC,KACI;AAAA,MADJA,KACI,2BADI,EACJ;;AACJ,2BAOIC,iBAAiB,EAPrB;AAAA,MACEC,gBADF,sBACEA,gBADF;AAAA,MAEEC,gBAFF,sBAEEA,gBAFF;AAAA,MAGEC,gBAHF,sBAGEA,gBAHF;AAAA,MAIEC,mBAJF,sBAIEA,mBAJF;AAAA,MAKEC,mBALF,sBAKEA,mBALF;AAAA,MAMEC,IANF,sBAMEA,IANF;;AAQA,wBAAsDC,cAAc,EAApE;AAAA,MAAQC,aAAR,mBAAQA,aAAR;AAAA,MAAuBC,gBAAvB,mBAAuBA,gBAAvB;AAAA,MAAyCC,QAAzC,mBAAyCA,QAAzC;;AACA,kBAA8BC,QAAQ,CAAC,EAAD,CAAtC;AAAA;AAAA,MAAOC,OAAP;AAAA,MAAgBC,UAAhB;;AACA,mBAAgCF,QAAQ,CAAC,KAAD,CAAxC;AAAA;AAAA,MAAOG,QAAP;AAAA,MAAiBC,WAAjB;;AACA,MAAMC,UAAU,GAAGC,MAAM,EAAzB;;AAEA,MAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,IAAD,EAAOC,OAAP,EAAmB;AAC7C,WAAO,YAAM;AACX,UAAI;AACF,YAAI,CAACA,OAAD,IAAYA,OAAO,CAACC,qBAAR,OAAoC,IAApD,EAA0D;AACxDL,UAAAA,UAAU,CAACM,OAAX,GAAqBC,SAArB;AACA;AACD;;AACD,YAAMC,MAAM,GAAGC,4BAA4B,CACzCL,OADyC,EAEzCvB,OAAO,CAACyB,OAAR,CAAgBI,qBAAhB,EAFyC,EAGzCpB,IAHyC,CAA3C;;AAKA,YAAMqB,UAAU,mCACXR,IADW,GACFK,MADE,CAAhB;;AAGA,YAAMI,OAAO,mCACR1C,MAAM,CAACiC,IAAI,CAACU,MAAN,CADE,2BAEVV,IAAI,CAACW,EAFK,kCAGN5C,MAAM,CAACiC,IAAI,CAACU,MAAN,CAAN,CAAoBV,IAAI,CAACW,EAAzB,CAHM;AAITC,UAAAA,CAAC,EAAEC,uBAAuB,CAACL,UAAD,EAAa,GAAb,EAAkBrB,IAAlB,CAJjB;AAKT2B,UAAAA,CAAC,EAAED,uBAAuB,CAACL,UAAD,EAAa,GAAb,EAAkBrB,IAAlB;AALjB,YAAb;;AAQA,YAAM4B,KAAK,GAAGC,iBAAiB,CAAChB,IAAI,CAACW,EAAN,EAAUF,OAAV,CAA/B;AACAf,QAAAA,UAAU,CAACqB,KAAD,CAAV;AACAlB,QAAAA,UAAU,CAACM,OAAX,GAAqBC,SAArB;AACD,OAxBD,CAwBE,OAAOa,KAAP,EAAc;AACdvB,QAAAA,UAAU,CAAC,EAAD,CAAV;AACD;AACF,KA5BD;AA6BD,GA9BD;;AAgCA,MAAMwB,sBAAsB,GAAGrD,aAAa,KAAK,IAAlB,IAA0BA,aAAa,CAACsD,MAAd,GAAuB,CAAhF;;AAEA,MAAMC,OAAO,GAAG,SAAVA,OAAU,CAACpB,IAAD,EAAOC,OAAP,EAAmB;AACjC,QAAI,CAACJ,UAAU,CAACM,OAAhB,EAAyB;AACvBN,MAAAA,UAAU,CAACM,OAAX,GAAqBkB,MAAM,CAACC,qBAAP,CAA6BvB,mBAAmB,CAACC,IAAD,EAAOC,OAAP,CAAhD,CAArB;AACD;AACF,GAJD;;AAMA,iBAA2BsB,OAAO,CAAC;AACjCC,IAAAA,MAAM,EAAEC,cADyB;AAEjCC,IAAAA,OAAO,EAAE,iBAAAzB,OAAO,EAAI;AAClB,aAAO;AACL0B,QAAAA,MAAM,EAAE1B,OAAO,CAAC0B,MAAR;AADH,OAAP;AAGD,KANgC;AAOjCC,IAAAA,IAAI,EAAE,cAAC5B,IAAD,EAAOC,OAAP,EAAmB;AAAA;;AACvB,UAAM4B,UAAU,uBAAGnD,OAAO,CAACyB,OAAX,qDAAG,iBAAiBI,qBAAjB,EAAnB;AACA,UAAMF,MAAM,GAAGC,4BAA4B,CACzCL,OADyC,EAEzC4B,UAFyC,EAGzC1C,IAHyC,CAA3C;AAKA,UAAM2C,IAAI,GAAG7B,OAAO,CAAC8B,WAAR,EAAb;;AACA,UACEpB,EADF,GAEIX,IAFJ,CACEW,EADF;AAAA,UACMqB,QADN,GAEIhC,IAFJ,CACMgC,QADN;AAAA,UAEIhC,IAFJ,CACgBU,MADhB;AAAA,cAC2BuB,cAD3B,4BAEIjC,IAFJ;;AAGA,UAAMkC,SAAS,GAAG,EAAlB;;AACA,UAAIJ,IAAI,KAAKK,mBAAb,EAAkC;AAChC,YAAMC,MAAM,GAAGC,UAAU,EAAzB;AACAlE,QAAAA,SAAS,+CACJkB,aAAa,CAAC2C,QAAD,CAAb,CAAwBM,OADpB;AAEP3B,UAAAA,EAAE,EAAEyB,MAFG;AAGP1B,UAAAA,MAAM,EAAEjC,IAAI,CAACkC;AAHN,WAIJN,MAJI,GAKJ4B,cALI,EAAT;AAOA3C,QAAAA,gBAAgB,CAAC,eAAD,EAAkB0C,QAAlB,CAAhB;AACAhD,QAAAA,gBAAgB,CAACoD,MAAD,CAAhB;AACAlD,QAAAA,mBAAmB,CAAC,IAAD,CAAnB;AACAgD,QAAAA,SAAS,CAACE,MAAD,CAAT,GAAoB/B,MAApB;AACD,OAbD,MAaO,IAAIyB,IAAI,KAAKS,mBAAb,EAAkC;AACvC,YAAMC,UAAU,GAAGC,kCAAkC,CAACpC,MAAD,EAAStC,MAAT,EAAiB4C,EAAjB,EAAqBhC,KAArB,EAA4BQ,IAA5B,CAArD;;AACA,YAAI+B,sBAAJ,EAA4B;AAC1B,cAAMwB,cAAc,GAAGT,cAAc,CAACU,IAAf,GAAsBH,UAAU,CAACG,IAAxD;AACA,cAAMC,aAAa,GAAGX,cAAc,CAACY,GAAf,GAAqBL,UAAU,CAACK,GAAtD;;AACA,cAAMC,MAAM,GAAGjF,aAAa,CAACkF,MAAd,CAAqB,UAACC,GAAD,EAAMC,IAAN,EAAe;AACjD,gBAAMC,QAAQ,GAAGC,YAAY,CAACF,IAAD,EAAOtE,KAAP,CAA7B;AACAqE,YAAAA,GAAG,CAACC,IAAD,CAAH,GAAY;AACVtC,cAAAA,EAAE,EAAEsC,IADM;AAEVN,cAAAA,IAAI,EAAEO,QAAQ,CAACP,IAAT,GAAgBD,cAFZ;AAGVhC,cAAAA,MAAM,EAAEjC,IAAI,CAACkC,EAHH;AAIVkC,cAAAA,GAAG,EAAEK,QAAQ,CAACL,GAAT,GAAeD;AAJV,aAAZ;AAMAV,YAAAA,SAAS,CAACe,IAAD,CAAT,GAAkB;AAChBN,cAAAA,IAAI,EAAEO,QAAQ,CAACP,IAAT,GAAgBD,cADN;AAEhBG,cAAAA,GAAG,EAAEK,QAAQ,CAACL,GAAT,GAAeD;AAFJ,aAAlB;AAIA,mBAAOI,GAAP;AACD,WAbc,EAaZ,EAbY,CAAf;;AAcAxE,UAAAA,WAAW,CAAC;AAAEN,YAAAA,KAAK,EAAE4E;AAAT,WAAD,CAAX;AACD,SAlBD,MAkBO;AACLzE,UAAAA,UAAU;AACRsC,YAAAA,EAAE,EAAFA,EADQ;AAERD,YAAAA,MAAM,EAAEjC,IAAI,CAACkC;AAFL,aAGL6B,UAHK,EAAV;AAKAN,UAAAA,SAAS,CAACvB,EAAD,CAAT,GAAgB6B,UAAhB;AACD;AACF;;AAED,aAAON,SAAP;AACD,KA/DgC;AAgEjCkB,IAAAA,KAAK,EAAEhC;AAhE0B,GAAD,CAAlC;AAAA;AAAA,MAASO,MAAT,gBAASA,MAAT;AAAA,MAAmBC,IAAnB;;AAmEA,MAAQyB,qBAAR,GAAkC9D,QAAlC,CAAQ8D,qBAAR;AACA,MAAQC,eAAR,GAA4B7E,IAA5B,CAAQ6E,eAAR;AACA,MAAMC,OAAO,GAAGD,eAAe,GAAGA,eAAH,GAAqBD,qBAAqB,IAAI,MAA7E;AAEA,sBACEG;AAAA,2BACEA;AACE,MAAA,GAAG,EAAE5B,IADP;AAEE,MAAA,SAAS,EAAE6B,aAFb;AAGE,MAAA,KAAK;AACHH,QAAAA,eAAe,EAAEC;AADd,SAEA3E,KAFA,CAHP;AAAA,6BAQE8E;AAAK,QAAA,SAAS,EAAC,0CAAf;AAAA,gCACEF,IAAC,kBAAD;AACE,UAAA,aAAa,EAAEnE,aADjB;AAEE,UAAA,aAAa,EAAExB,aAFjB;AAGE,UAAA,MAAM,EAAEE,MAAM,CAACU,IAAI,CAACkC,EAAN,CAHhB;AAIE,UAAA,QAAQ,EAAE3C,QAJZ;AAKE,UAAA,QAAQ,EAAE2B,QALZ;AAME,UAAA,gBAAgB,EAAEb,gBANpB;AAOE,UAAA,gBAAgB,EAAEC,gBAPpB;AAQE,UAAA,YAAY,EAAEd,YARhB;AAAA;AAUE,UAAA,KAAK,EAAEC,KAVT;AAWE,UAAA,OAAO,EAAEyB,QAAQ,GAAGF,OAAH,GAAa9B,WAXhC;AAYE,UAAA,gBAAgB,EAAE2B,gBAZpB;AAaE,UAAA,SAAS,EAAEnB,SAbb;AAcE,UAAA,YAAY,EAAEC,YAdhB;AAeE,UAAA,YAAY,EAAEE,YAfhB;AAgBE,UAAA,YAAY,EAAEC,YAhBhB;AAiBE,UAAA,gBAAgB,EAAES,gBAjBpB;AAkBE,UAAA,mBAAmB,EAAEC,mBAlBvB;AAmBE,UAAA,WAAW,EAAEW,WAnBf;AAoBE,UAAA,mBAAmB,EAAEV,mBApBvB;AAqBE,UAAA,UAAU,EAAEQ,UArBd;AAsBE,UAAA,IAAI,EAAEP;AAtBR,UADF,EAyBGrB,mBAzBH,eA0BE0F,IAAC,eAAD;AACE,UAAA,IAAI,EAAC,GADP;AAEE,UAAA,MAAM,EAAEzF,MAAM,CAACU,IAAI,CAACkC,EAAN,CAFhB;AAGE,UAAA,OAAO,EAAElB,OAHX;AAIE,UAAA,IAAI,EAAGkC,MAAM,IAAIhC,QAJnB;AAKE,UAAA,IAAI,EAAER;AALR,UA1BF,eAiCEqE,IAAC,eAAD;AACE,UAAA,IAAI,EAAC,GADP;AAEE,UAAA,MAAM,EAAEzF,MAAM,CAACU,IAAI,CAACkC,EAAN,CAFhB;AAGE,UAAA,OAAO,EAAElB,OAHX;AAIE,UAAA,IAAI,EAAGkC,MAAM,IAAIhC,QAJnB;AAKE,UAAA,IAAI,EAAER;AALR,UAjCF;AAAA;AARF;AADF,IADF;AAsDD,CApMD;;AAsMAvB,IAAI,CAAC+F,SAAL,GAAiB;AACf9F,EAAAA,aAAa,EAAE+F,SAAS,CAACC,OAAV,CAAkBD,SAAS,CAACE,MAA5B,CADA;AAEfhG,EAAAA,mBAAmB,EAAE8F,SAAS,CAACC,OAAV,CAAkBD,SAAS,CAACG,IAA5B,CAFN;AAGfhG,EAAAA,MAAM,EAAE6F,SAAS,CAACI,KAAV,CAAgB,EAAhB,CAHO;AAIfhG,EAAAA,QAAQ,EAAE4F,SAAS,CAACE,MAJL;AAKf7F,EAAAA,YAAY,EAAE2F,SAAS,CAACK,IALT;AAMf/F,EAAAA,KAAK,EAAE0F,SAAS,CAACC,OAAV,CACLD,SAAS,CAACI,KAAV,CAAgB,EAAhB,CADK,CANQ;AASf7F,EAAAA,SAAS,EAAEyF,SAAS,CAACK,IATN;AAUf7F,EAAAA,YAAY,EAAEwF,SAAS,CAACK,IAVT;AAWf5F,EAAAA,UAAU,EAAEuF,SAAS,CAACK,IAXP;AAYf3F,EAAAA,YAAY,EAAEsF,SAAS,CAACK,IAZT;AAaf1F,EAAAA,YAAY,EAAEqF,SAAS,CAACK,IAbT;AAcfzF,EAAAA,WAAW,EAAEoF,SAAS,CAACK,IAdR;AAefxF,EAAAA,IAAI,EAAEmF,SAAS,CAACI,KAAV,CAAgB;AACpBV,IAAAA,eAAe,EAAEM,SAAS,CAACE;AADP,GAAhB,CAfS;AAkBfpF,EAAAA,OAAO,EAAEkF,SAAS,CAACI,KAAV,CAAgB;AACvB7D,IAAAA,OAAO,EAAEyD,SAAS,CAACM;AADI,GAAhB,CAlBM;AAqBfvF,EAAAA,KAAK,EAAEiF,SAAS,CAACC,OAAV,CAAkBD,SAAS,CAACI,KAAV,CAAgB,EAAhB,CAAlB,CArBQ;AAsBfpF,EAAAA,KAAK,EAAEgF,SAAS,CAACI,KAAV,CAAgB,EAAhB;AAtBQ,CAAjB;AAyBA,0BAAeG,IAAI,CAACvG,IAAD,CAAnB;;;;"}

package/lib/esm/components/Builder/PageActions.js

@@ -12,18 +12,30 @@ import SvgArrowDown from '../../assets/svg/arrow_down.svg.js';
 import SvgPlus from '../../assets/svg/plus.svg.js';
 
 var PageActions = function PageActions(_ref) {
-  var disableInteraction = _ref.disableInteraction,
-      onAnEventTrigger = _ref.onAnEventTrigger,
-      onPageAdd = _ref.onPageAdd,
-      onPageDuplicate = _ref.onPageDuplicate,
-      onPageOrdersChange = _ref.onPageOrdersChange,
-      onPageRemove = _ref.onPageRemove,
-      order = _ref.order,
-      pageCount = _ref.pageCount,
-      pageID = _ref.pageID,
-      pages = _ref.pages,
-      setEditedElement = _ref.setEditedElement,
-      setIsRightPanelOpen = _ref.setIsRightPanelOpen;
+  var _ref$disableInteracti = _ref.disableInteraction,
+      disableInteraction = _ref$disableInteracti === void 0 ? [] : _ref$disableInteracti,
+      _ref$onAnEventTrigger = _ref.onAnEventTrigger,
+      onAnEventTrigger = _ref$onAnEventTrigger === void 0 ? function () {} : _ref$onAnEventTrigger,
+      _ref$onPageAdd = _ref.onPageAdd,
+      onPageAdd = _ref$onPageAdd === void 0 ? function () {} : _ref$onPageAdd,
+      _ref$onPageDuplicate = _ref.onPageDuplicate,
+      onPageDuplicate = _ref$onPageDuplicate === void 0 ? function () {} : _ref$onPageDuplicate,
+      _ref$onPageOrdersChan = _ref.onPageOrdersChange,
+      onPageOrdersChange = _ref$onPageOrdersChan === void 0 ? function () {} : _ref$onPageOrdersChan,
+      _ref$onPageRemove = _ref.onPageRemove,
+      onPageRemove = _ref$onPageRemove === void 0 ? function () {} : _ref$onPageRemove,
+      _ref$order = _ref.order,
+      order = _ref$order === void 0 ? 0 : _ref$order,
+      _ref$pageCount = _ref.pageCount,
+      pageCount = _ref$pageCount === void 0 ? 1 : _ref$pageCount,
+      _ref$pageID = _ref.pageID,
+      pageID = _ref$pageID === void 0 ? '' : _ref$pageID,
+      _ref$pages = _ref.pages,
+      pages = _ref$pages === void 0 ? [] : _ref$pages,
+      _ref$setEditedElement = _ref.setEditedElement,
+      setEditedElement = _ref$setEditedElement === void 0 ? function () {} : _ref$setEditedElement,
+      _ref$setIsRightPanelO = _ref.setIsRightPanelOpen,
+      setIsRightPanelOpen = _ref$setIsRightPanelO === void 0 ? function () {} : _ref$setIsRightPanelO;
 
   var pageSettings = function pageSettings() {
     setEditedElement("p_".concat(pageID));
@@ -165,20 +177,6 @@ PageActions.propTypes = {
   setEditedElement: PropTypes.func,
   setIsRightPanelOpen: PropTypes.func
 };
-PageActions.defaultProps = {
-  disableInteraction: [],
-  onAnEventTrigger: function onAnEventTrigger() {},
-  onPageAdd: function onPageAdd() {},
-  onPageDuplicate: function onPageDuplicate() {},
-  onPageOrdersChange: function onPageOrdersChange() {},
-  onPageRemove: function onPageRemove() {},
-  order: 0,
-  pageCount: 1,
-  pageID: '',
-  pages: [],
-  setEditedElement: function setEditedElement() {},
-  setIsRightPanelOpen: function setIsRightPanelOpen() {}
-};
 
 export default PageActions;
 //# sourceMappingURL=PageActions.js.map