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

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

@@ -1 +1 @@
-{"version":3,"file":"LayoutSizeSettings.js","sources":["../../../../src/components/Settings/LayoutSizeSettings.js"],"sourcesContent":["import { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport * as icons from '../../utils/icons';\nimport { roundForDecimalPart } from '../../utils/functions';\nimport { useTranslatedTexts } from '../../utils/hooks';\n\nconst LayoutSizeSettings = ({ config, item, onItemChange }) => {\n  const [aspectLock, setAspectLock] = useState(true);\n  const { HEIGHT, WIDTH } = useTranslatedTexts();\n\n  const { reportLayoutHeight: layoutHeight, reportLayoutWidth: layoutWidth } = item;\n\n  const initialWidth = parseInt(layoutWidth, 10);\n  const initialHeight = parseInt(layoutHeight, 10);\n\n  const [sizes, setSizes] = useState({\n    height: initialHeight,\n    width: initialWidth,\n  });\n\n  const initialAspect = initialWidth / initialHeight;\n\n  const onChange = e => {\n    const property = e.target.getAttribute('name');\n    const newValue = e.target.value;\n    if (aspectLock) {\n      if (property === 'width') {\n        setSizes({\n          ...sizes,\n          height: Number(newValue / initialAspect),\n          [property]: parseInt(newValue, 10),\n        });\n      } else {\n        setSizes({\n          ...sizes,\n          [property]: parseInt(newValue, 10),\n          width: Number(newValue * initialAspect),\n        });\n      }\n    } else {\n      setSizes({\n        ...sizes,\n        [property]: parseInt(newValue, 10),\n      });\n    }\n  };\n\n  const onBlur = () => {\n    const newWidth = sizes.width < 200 ? 200 : sizes.width;\n    const newHeight = sizes.height < 100 ? 100 : sizes.height;\n    setSizes({\n      height: newHeight,\n      width: newWidth,\n    });\n    onItemChange(\n      { id: item.id },\n      {\n        [config.key]: `${roundForDecimalPart(newWidth)}x${roundForDecimalPart(newHeight)}`,\n      },\n    );\n  };\n\n  const onKeyDown = e => {\n    if (e.keyCode === 13) {\n      onBlur();\n    }\n  };\n\n  return (\n    <>\n      <div className=\"toolSection-wrapper d-flex\">\n        <div className=\"toolSection-subItem\">\n          <label\n            className=\"d-flex dir-col hasUnit isPixel\"\n            htmlFor=\"width-input\"\n          >\n            <input\n              className=\"toolSection-input\"\n              id=\"width-input\"\n              name=\"width\"\n              onBlur={onBlur}\n              onChange={onChange}\n              onKeyDown={onKeyDown}\n              step=\"any\"\n              type=\"number\"\n              value={roundForDecimalPart(sizes.width)}\n            />\n            <span className=\"toolSection-subLabel\">{WIDTH}</span>\n          </label>\n        </div>\n        <div className=\"toolSection-subItem hasAspect\">\n          <button\n            className=\"p-relative forAspect\"\n            onClick={() => setAspectLock(!aspectLock)}\n            type=\"button\"\n          >\n            {aspectLock\n              ? <icons.lock className=\"jfReportSVG icon-aspectLock\" />\n              : <icons.unlock className=\"jfReportSVG icon-aspectUnlock\" />}\n          </button>\n        </div>\n        <div className=\"toolSection-subItem\">\n          <label\n            className=\"d-flex dir-col hasUnit isPixel\"\n            htmlFor=\"width-input\"\n          >\n            <input\n              className=\"toolSection-input\"\n              id=\"height-input\"\n              name=\"height\"\n              onBlur={onBlur}\n              onChange={onChange}\n              onKeyDown={onKeyDown}\n              step=\"any\"\n              type=\"number\"\n              value={roundForDecimalPart(sizes.height)}\n            />\n            <span className=\"toolSection-subLabel\">{HEIGHT}</span>\n          </label>\n        </div>\n      </div>\n    </>\n  );\n};\n\nLayoutSizeSettings.propTypes = {\n  config: PropTypes.shape({\n    key: PropTypes.string,\n  }).isRequired,\n  item: PropTypes.shape({\n    height: PropTypes.number,\n    id: PropTypes.string,\n    reportLayout: PropTypes.string,\n    reportLayoutHeight: PropTypes.string,\n    reportLayoutWidth: PropTypes.string,\n    shapeType: PropTypes.string,\n    url: PropTypes.string,\n    width: PropTypes.number,\n  }),\n  onItemChange: PropTypes.func,\n};\n\nLayoutSizeSettings.defaultProps = {\n  item: {},\n  onItemChange: () => {},\n};\n\nexport default LayoutSizeSettings;\n"],"names":["LayoutSizeSettings","config","item","onItemChange","useState","aspectLock","setAspectLock","useTranslatedTexts","HEIGHT","WIDTH","layoutHeight","reportLayoutHeight","layoutWidth","reportLayoutWidth","initialWidth","parseInt","initialHeight","height","width","sizes","setSizes","initialAspect","onChange","e","property","target","getAttribute","newValue","value","Number","onBlur","newWidth","newHeight","id","key","roundForDecimalPart","onKeyDown","keyCode","_jsx","_jsxs","icons.lock","icons.unlock","propTypes","PropTypes","shape","string","isRequired","number","reportLayout","shapeType","url","func","defaultProps"],"mappings":"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"}
+{"version":3,"file":"LayoutSizeSettings.js","sources":["../../../../src/components/Settings/LayoutSizeSettings.js"],"sourcesContent":["import { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport * as icons from '../../utils/icons';\nimport { roundForDecimalPart } from '../../utils/functions';\nimport { useTranslatedTexts } from '../../utils/hooks';\n\nconst LayoutSizeSettings = ({\n  config,\n  item = {},\n  onItemChange = () => {},\n}) => {\n  const [aspectLock, setAspectLock] = useState(true);\n  const { HEIGHT, WIDTH } = useTranslatedTexts();\n\n  const { reportLayoutHeight: layoutHeight, reportLayoutWidth: layoutWidth } = item;\n\n  const initialWidth = parseInt(layoutWidth, 10);\n  const initialHeight = parseInt(layoutHeight, 10);\n\n  const [sizes, setSizes] = useState({\n    height: initialHeight,\n    width: initialWidth,\n  });\n\n  const initialAspect = initialWidth / initialHeight;\n\n  const onChange = e => {\n    const property = e.target.getAttribute('name');\n    const newValue = e.target.value;\n    if (aspectLock) {\n      if (property === 'width') {\n        setSizes({\n          ...sizes,\n          height: Number(newValue / initialAspect),\n          [property]: parseInt(newValue, 10),\n        });\n      } else {\n        setSizes({\n          ...sizes,\n          [property]: parseInt(newValue, 10),\n          width: Number(newValue * initialAspect),\n        });\n      }\n    } else {\n      setSizes({\n        ...sizes,\n        [property]: parseInt(newValue, 10),\n      });\n    }\n  };\n\n  const onBlur = () => {\n    const newWidth = sizes.width < 200 ? 200 : sizes.width;\n    const newHeight = sizes.height < 100 ? 100 : sizes.height;\n    setSizes({\n      height: newHeight,\n      width: newWidth,\n    });\n    onItemChange(\n      { id: item.id },\n      {\n        [config.key]: `${roundForDecimalPart(newWidth)}x${roundForDecimalPart(newHeight)}`,\n      },\n    );\n  };\n\n  const onKeyDown = e => {\n    if (e.keyCode === 13) {\n      onBlur();\n    }\n  };\n\n  return (\n    <>\n      <div className=\"toolSection-wrapper d-flex\">\n        <div className=\"toolSection-subItem\">\n          <label\n            className=\"d-flex dir-col hasUnit isPixel\"\n            htmlFor=\"width-input\"\n          >\n            <input\n              className=\"toolSection-input\"\n              id=\"width-input\"\n              name=\"width\"\n              onBlur={onBlur}\n              onChange={onChange}\n              onKeyDown={onKeyDown}\n              step=\"any\"\n              type=\"number\"\n              value={roundForDecimalPart(sizes.width)}\n            />\n            <span className=\"toolSection-subLabel\">{WIDTH}</span>\n          </label>\n        </div>\n        <div className=\"toolSection-subItem hasAspect\">\n          <button\n            className=\"p-relative forAspect\"\n            onClick={() => setAspectLock(!aspectLock)}\n            type=\"button\"\n          >\n            {aspectLock\n              ? <icons.lock className=\"jfReportSVG icon-aspectLock\" />\n              : <icons.unlock className=\"jfReportSVG icon-aspectUnlock\" />}\n          </button>\n        </div>\n        <div className=\"toolSection-subItem\">\n          <label\n            className=\"d-flex dir-col hasUnit isPixel\"\n            htmlFor=\"width-input\"\n          >\n            <input\n              className=\"toolSection-input\"\n              id=\"height-input\"\n              name=\"height\"\n              onBlur={onBlur}\n              onChange={onChange}\n              onKeyDown={onKeyDown}\n              step=\"any\"\n              type=\"number\"\n              value={roundForDecimalPart(sizes.height)}\n            />\n            <span className=\"toolSection-subLabel\">{HEIGHT}</span>\n          </label>\n        </div>\n      </div>\n    </>\n  );\n};\n\nLayoutSizeSettings.propTypes = {\n  config: PropTypes.shape({\n    key: PropTypes.string,\n  }).isRequired,\n  item: PropTypes.shape({\n    height: PropTypes.number,\n    id: PropTypes.string,\n    reportLayout: PropTypes.string,\n    reportLayoutHeight: PropTypes.string,\n    reportLayoutWidth: PropTypes.string,\n    shapeType: PropTypes.string,\n    url: PropTypes.string,\n    width: PropTypes.number,\n  }),\n  onItemChange: PropTypes.func,\n};\n\nexport default LayoutSizeSettings;\n"],"names":["LayoutSizeSettings","config","item","onItemChange","useState","aspectLock","setAspectLock","useTranslatedTexts","HEIGHT","WIDTH","layoutHeight","reportLayoutHeight","layoutWidth","reportLayoutWidth","initialWidth","parseInt","initialHeight","height","width","sizes","setSizes","initialAspect","onChange","e","property","target","getAttribute","newValue","value","Number","onBlur","newWidth","newHeight","id","key","roundForDecimalPart","onKeyDown","keyCode","_jsx","_jsxs","icons.lock","icons.unlock","propTypes","PropTypes","shape","string","isRequired","number","reportLayout","shapeType","url","func"],"mappings":"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"}

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

@@ -24,10 +24,14 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
 var Orientation = function Orientation(_ref) {
-  var config = _ref.config,
-      item = _ref.item,
-      onItemChange = _ref.onItemChange,
-      value = _ref.value;
+  var _ref$config = _ref.config,
+      config = _ref$config === void 0 ? [] : _ref$config,
+      _ref$item = _ref.item,
+      item = _ref$item === void 0 ? {} : _ref$item,
+      _ref$onItemChange = _ref.onItemChange,
+      onItemChange = _ref$onItemChange === void 0 ? function () {} : _ref$onItemChange,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? '' : _ref$value;
   var multipleSelect = config.multipleSelect,
       options = config.options,
       optionsDisplay = config.optionsDisplay;
@@ -98,12 +102,6 @@ Orientation.propTypes = {
   onItemChange: PropTypes.func,
   value: PropTypes.string
 };
-Orientation.defaultProps = {
-  config: [],
-  item: {},
-  onItemChange: function onItemChange() {},
-  value: ''
-};
 var Orientation$1 = /*#__PURE__*/memo(Orientation);
 
 export default Orientation$1;

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

@@ -1 +1 @@
-{"version":3,"file":"Orientation.js","sources":["../../../../src/components/Settings/Orientation.js"],"sourcesContent":["import { memo, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { safeJSONParse } from '../../utils/functions';\n\nconst Orientation = ({\n  config, item, onItemChange, value,\n}) => {\n  const { multipleSelect, options, optionsDisplay } = config;\n  const exactValue = !multipleSelect ? value : safeJSONParse(value, []);\n  const onClick = type => {\n    return () => {\n      let newValue = type;\n      if (multipleSelect) {\n        newValue = [...exactValue];\n        if (exactValue.includes(type)) {\n          newValue = newValue.filter(v => v !== type);\n        } else {\n          newValue.push(type);\n        }\n        newValue = JSON.stringify(newValue);\n      }\n      if (newValue !== value) {\n        onItemChange(\n          { id: item.id },\n          { [config.key]: newValue },\n        );\n      }\n    };\n  };\n  return (\n    <div className=\"toolSection-orientation d-flex dir-row\">\n      {options.map(option => {\n        const key = option.value ? option.value : option;\n        return (\n          <button\n            key={key}\n            className={classNames(\n              'toolSection-orientationItem',\n              'd-flex',\n              'j-center',\n              {\n                isSelected: !multipleSelect\n                  ? exactValue === key\n                  : exactValue && exactValue.includes(key),\n              },\n            )}\n            data-orientation={key}\n            onClick={onClick(key)}\n            type=\"button\"\n          >\n            {optionsDisplay ? optionsDisplay.map(display => (\n              <Fragment key={display}>\n                <span className=\"orientationIcon d-flex a-center j-center\">\n                  {option[display]}\n                </span>\n                <span>\n                  {key.charAt(0).toUpperCase() + key.slice(1)}\n                </span>\n              </Fragment>\n            )) : option.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n};\n\nOrientation.propTypes = {\n  config: PropTypes.shape({\n    key: PropTypes.string,\n    multipleSelect: PropTypes.bool,\n    options: PropTypes.arrayOf(PropTypes.any),\n    optionsDisplay: PropTypes.arrayOf(PropTypes.any),\n  }),\n  item: PropTypes.shape({\n    id: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n  value: PropTypes.string,\n};\n\nOrientation.defaultProps = {\n  config: [],\n  item: {},\n  onItemChange: () => {},\n  value: '',\n};\n\nexport default memo(Orientation);\n"],"names":["Orientation","config","item","onItemChange","value","multipleSelect","options","optionsDisplay","exactValue","safeJSONParse","onClick","type","newValue","includes","filter","v","push","JSON","stringify","id","key","_jsx","map","option","classNames","isSelected","display","_jsxs","charAt","toUpperCase","slice","label","propTypes","PropTypes","shape","string","bool","arrayOf","any","func","defaultProps","memo"],"mappings":"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"}
+{"version":3,"file":"Orientation.js","sources":["../../../../src/components/Settings/Orientation.js"],"sourcesContent":["import { memo, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { safeJSONParse } from '../../utils/functions';\n\nconst Orientation = ({\n  config = [],\n  item = {},\n  onItemChange = () => {},\n  value = '',\n}) => {\n  const { multipleSelect, options, optionsDisplay } = config;\n  const exactValue = !multipleSelect ? value : safeJSONParse(value, []);\n  const onClick = type => {\n    return () => {\n      let newValue = type;\n      if (multipleSelect) {\n        newValue = [...exactValue];\n        if (exactValue.includes(type)) {\n          newValue = newValue.filter(v => v !== type);\n        } else {\n          newValue.push(type);\n        }\n        newValue = JSON.stringify(newValue);\n      }\n      if (newValue !== value) {\n        onItemChange(\n          { id: item.id },\n          { [config.key]: newValue },\n        );\n      }\n    };\n  };\n  return (\n    <div className=\"toolSection-orientation d-flex dir-row\">\n      {options.map(option => {\n        const key = option.value ? option.value : option;\n        return (\n          <button\n            key={key}\n            className={classNames(\n              'toolSection-orientationItem',\n              'd-flex',\n              'j-center',\n              {\n                isSelected: !multipleSelect\n                  ? exactValue === key\n                  : exactValue && exactValue.includes(key),\n              },\n            )}\n            data-orientation={key}\n            onClick={onClick(key)}\n            type=\"button\"\n          >\n            {optionsDisplay ? optionsDisplay.map(display => (\n              <Fragment key={display}>\n                <span className=\"orientationIcon d-flex a-center j-center\">\n                  {option[display]}\n                </span>\n                <span>\n                  {key.charAt(0).toUpperCase() + key.slice(1)}\n                </span>\n              </Fragment>\n            )) : option.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n};\n\nOrientation.propTypes = {\n  config: PropTypes.shape({\n    key: PropTypes.string,\n    multipleSelect: PropTypes.bool,\n    options: PropTypes.arrayOf(PropTypes.any),\n    optionsDisplay: PropTypes.arrayOf(PropTypes.any),\n  }),\n  item: PropTypes.shape({\n    id: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n  value: PropTypes.string,\n};\n\nexport default memo(Orientation);\n"],"names":["Orientation","config","item","onItemChange","value","multipleSelect","options","optionsDisplay","exactValue","safeJSONParse","onClick","type","newValue","includes","filter","v","push","JSON","stringify","id","key","_jsx","map","option","classNames","isSelected","display","_jsxs","charAt","toUpperCase","slice","label","propTypes","PropTypes","shape","string","bool","arrayOf","any","func","memo"],"mappings":"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"}

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"LayerItem.js","sources":["../../../../../src/components/Settings/PageLayer/LayerItem.js"],"sourcesContent":["import { memo, useCallback } from 'react';\nimport { sortableElement, sortableHandle } from 'react-sortable-hoc';\nimport classNames from 'classnames';\nimport { capitalize, stripHTML } from '../../../utils/string';\nimport * as icons from '../../../utils/icons';\n\nconst DragHandle = sortableHandle(() => (\n  <span className=\"jfReportSelectOption-drag\">\n    <icons.drag className=\"jfReportSVG icon-drag\" />\n  </span>\n));\n\nconst LayerItem = sortableElement(({\n  icon: Icon,\n  item,\n  onItemChange,\n  optionKey,\n  setActiveElement,\n}) => {\n  const { id, isVisible } = item;\n  const isVisib = isVisible !== undefined ? isVisible : true;\n  const handleItemLock = useCallback(({ target }) => {\n    onItemChange({ id }, { isVisible: target.checked });\n  }, [id]);\n\n  const itemText = passedItem => {\n    if (passedItem.itemType === 'shapes') {\n      return capitalize(passedItem.shapeType || 'Rectangle');\n    }\n    if (passedItem.itemType === 'chart') {\n      return passedItem.text || 'Chart Element';\n    }\n    if (passedItem.itemType === 'header') {\n      return passedItem.headerText || 'Click to edit header';\n    }\n    if (passedItem.itemType === 'text') {\n      return passedItem.value ? stripHTML(passedItem.value) : 'Click to edit text';\n    }\n    return capitalize(passedItem.itemType || 'Page Element');\n  };\n  const content = (\n    <div className=\"jfReportSelectOption\">\n      <div className=\"jfReportSelectOption-icon\">\n        <Icon />\n      </div>\n      <div className=\"jfReportSelectOption-text\">\n        {itemText(item)}\n      </div>\n    </div>\n  );\n\n  return (\n    <div\n      className={classNames('jfReportSelectOption', {\n        isSelected: isVisib,\n      })}\n      onClick={() => setActiveElement(id, false)}\n      onKeyDown={() => {}}\n    >\n      <div className=\"jfReportSelectOption-visibility\">\n        <label\n          className=\"jfReportChoice isLight hasNotText\"\n          htmlFor={optionKey}\n        >\n          <input\n            checked={isVisib}\n            className=\"jfReportChoice-input\"\n            data-option-key={optionKey}\n            id={optionKey}\n            onChange={handleItemLock}\n            type=\"checkbox\"\n          />\n          <div className=\"jfReportChoice-labelIcon\">\n            <div className=\"jfReportChoice-label checkbox\" />\n          </div>\n        </label>\n      </div>\n      <div\n        className=\"jfReportSelectOption-name\"\n        // style={{ backgroundColor: option.color }}\n      >\n        <DragHandle />\n        {content}\n      </div>\n    </div>\n  );\n});\n\nexport default memo(LayerItem);\n"],"names":["DragHandle","sortableHandle","_jsx","icons.drag","LayerItem","sortableElement","Icon","icon","item","onItemChange","optionKey","setActiveElement","id","isVisible","isVisib","undefined","handleItemLock","useCallback","target","checked","itemText","passedItem","itemType","capitalize","shapeType","text","headerText","value","stripHTML","content","_jsxs","classNames","isSelected","memo"],"mappings":"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"}
+{"version":3,"file":"LayerItem.js","sources":["../../../../../src/components/Settings/PageLayer/LayerItem.js"],"sourcesContent":["import { memo, useCallback, useMemo } from 'react';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport { capitalize, stripHTML } from '../../../utils/string';\nimport * as icons from '../../../utils/icons';\nimport { useTranslatedTexts } from '../../../utils/hooks';\n\nconst DragHandle = () => (\n  <span className=\"jfReportSelectOption-drag\">\n    <icons.drag className=\"jfReportSVG icon-drag\" />\n  </span>\n);\n\nconst LayerItem = ({\n  icon: Icon,\n  id: itemId,\n  item,\n  onItemChange,\n  optionKey,\n  setActiveElement,\n}) => {\n  const {\n    attributes,\n    isDragging,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n  } = useSortable({ id: itemId });\n\n  const dragStyle = useMemo(() => ({\n    opacity: isDragging ? 0.5 : 1,\n    transform: CSS.Transform.toString(transform),\n    transition: transition,\n  }), [transform, transition, isDragging]);\n\n  const { id, isVisible } = item;\n  const isVisib = isVisible !== undefined ? isVisible : true;\n\n  const {\n    CHART_ELEMENT,\n    CLICK_TO_EDIT_TEXT,\n    CLIK_TO_EDIT_HEADER,\n    PAGE_ELEMENT,\n    RECTANGLE,\n  } = useTranslatedTexts();\n\n  const handleItemLock = useCallback(({ target }) => {\n    onItemChange({ id }, { isVisible: target.checked });\n  }, [id, onItemChange]);\n\n  const itemText = useMemo(() => {\n    if (item.itemType === 'shapes') {\n      return capitalize(item.shapeType || RECTANGLE);\n    }\n    if (item.itemType === 'chart') {\n      return item.text || CHART_ELEMENT;\n    }\n    if (item.itemType === 'header') {\n      return item.headerText || CLIK_TO_EDIT_HEADER;\n    }\n    if (item.itemType === 'text') {\n      return item.value ? stripHTML(item.value) : CLICK_TO_EDIT_TEXT;\n    }\n    return capitalize(item.itemType || PAGE_ELEMENT);\n  }, [item]);\n\n  const content = useMemo(() => (\n    <div className=\"jfReportSelectOption\">\n      <div className=\"jfReportSelectOption-icon\">\n        <Icon />\n      </div>\n      <div className=\"jfReportSelectOption-text\">\n        {itemText}\n      </div>\n    </div>\n  ), [itemText]);\n\n  return (\n    <div\n      ref={setNodeRef}\n      className={classNames('jfReportSelectOption', {\n        isSelected: isVisib,\n      })}\n      onClick={() => setActiveElement(id, false)}\n      onKeyDown={() => {}}\n      style={dragStyle}\n      {...attributes}\n      {...listeners}\n    >\n      <div className=\"jfReportSelectOption-visibility\">\n        <label\n          className=\"jfReportChoice isLight hasNotText\"\n          htmlFor={optionKey}\n        >\n          <input\n            checked={isVisib}\n            className=\"jfReportChoice-input\"\n            data-option-key={optionKey}\n            id={optionKey}\n            onChange={handleItemLock}\n            type=\"checkbox\"\n          />\n          <div className=\"jfReportChoice-labelIcon\">\n            <div className=\"jfReportChoice-label checkbox\" />\n          </div>\n        </label>\n      </div>\n      <div\n        className=\"jfReportSelectOption-name\"\n        // style={{ backgroundColor: option.color }}\n      >\n        <DragHandle />\n        {content}\n      </div>\n    </div>\n  );\n};\n\nLayerItem.propTypes = {\n  icon: PropTypes.elementType,\n  id: PropTypes.string,\n  item: PropTypes.shape({\n    headerText: PropTypes.string,\n    id: PropTypes.string,\n    isVisible: PropTypes.bool,\n    itemType: PropTypes.string,\n    shapeType: PropTypes.string,\n    text: PropTypes.string,\n    value: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n  optionKey: PropTypes.string,\n  setActiveElement: PropTypes.func,\n};\n\nexport default memo(LayerItem);\n"],"names":["DragHandle","_jsx","icons.drag","LayerItem","Icon","icon","itemId","id","item","onItemChange","optionKey","setActiveElement","useSortable","attributes","isDragging","listeners","setNodeRef","transform","transition","dragStyle","useMemo","opacity","CSS","Transform","toString","isVisible","isVisib","undefined","useTranslatedTexts","CHART_ELEMENT","CLICK_TO_EDIT_TEXT","CLIK_TO_EDIT_HEADER","PAGE_ELEMENT","RECTANGLE","handleItemLock","useCallback","target","checked","itemText","itemType","capitalize","shapeType","text","headerText","value","stripHTML","content","_jsxs","classNames","isSelected","propTypes","PropTypes","elementType","string","shape","bool","func","memo"],"mappings":"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"}