@agilemotion/oui-react-js 1.6.4 → 1.6.6

package/dist/components/signatures/SignatureTemplateDesigner.js

@@ -1,302 +1,201 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _Utils = _interopRequireDefault(require("../../Utils"));
-
 var _reactHtmlRenderer = _interopRequireDefault(require("react-html-renderer"));
-
 var _core = require("@material-ui/core");
-
 var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
-
 var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
-
 var _reactPromiseTracker = require("react-promise-tracker");
-
 var _SignatureInputProps = _interopRequireDefault(require("./SignatureInputProps"));
-
 var _Observable = _interopRequireDefault(require("../../event/Observable"));
-
 var _Event = _interopRequireDefault(require("../../event/Event"));
-
 var _EventType = _interopRequireDefault(require("../../event/EventType"));
-
 var Base64 = _interopRequireWildcard(require("js-base64"));
-
 var _RestUtils = require("../../RestUtils");
-
 var _ServiceCallActionHandler = _interopRequireDefault(require("../../event/ServiceCallActionHandler"));
-
 var _TemplateItemEventHandler = _interopRequireDefault(require("../TemplateItemEventHandler"));
-
 require("../TemplateDesigner.css");
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-var INITIAL_ITEM = {
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const INITIAL_ITEM = {
   defaultWidthOnPageDrop: 80,
   defaultHeightOnPageDrop: 80
 };
-var SIGN_ITEM = {
+const SIGN_ITEM = {
   defaultWidthOnPageDrop: 200,
   defaultHeightOnPageDrop: 80
 };
-var TEXT_ITEM = {
+const TEXT_ITEM = {
   defaultWidthOnPageDrop: 200,
   defaultHeightOnPageDrop: 80
 };
-var DROP_ITEM_MARGIN = 32;
-var types = [INITIAL_ITEM, SIGN_ITEM, TEXT_ITEM];
-var useStyles = (0, _core.makeStyles)(function (theme) {
-  return {
-    button: {
-      margin: theme.spacing(1)
+const DROP_ITEM_MARGIN = 32;
+const types = [INITIAL_ITEM, SIGN_ITEM, TEXT_ITEM];
+const useStyles = (0, _core.makeStyles)(theme => ({
+  button: {
+    margin: theme.spacing(1)
+  },
+  input: {
+    display: 'none'
+  },
+  errorMessageDisplay: {
+    color: 'red'
+  },
+  propertyWindow: {
+    height: '400px',
+    margin: '4px',
+    borderRadius: '4px',
+    paddingLeft: '24px',
+    borderBottom: '1px solid #e1e1e1',
+    borderTop: '1px solid #e1e1e1'
+  },
+  paletteButton: {
+    width: '270px',
+    height: '40px',
+    backgroundColor: '#e1e1e1',
+    margin: '4px',
+    textAlign: 'center',
+    padding: '28px 0',
+    borderRadius: '4px',
+    cursor: 'grabbing'
+  },
+  paletteButtonSelected: {
+    '&:hover': {
+      backgroundColor: 'yellowgreen'
     },
-    input: {
-      display: 'none'
-    },
-    errorMessageDisplay: {
-      color: 'red'
-    },
-    propertyWindow: {
-      height: '400px',
-      margin: '4px',
-      borderRadius: '4px',
-      paddingLeft: '24px',
-      borderBottom: '1px solid #e1e1e1',
-      borderTop: '1px solid #e1e1e1'
-    },
-    paletteButton: {
-      width: '270px',
-      height: '40px',
-      backgroundColor: '#e1e1e1',
-      margin: '4px',
-      textAlign: 'center',
-      padding: '28px 0',
-      borderRadius: '4px',
-      cursor: 'grabbing'
-    },
-    paletteButtonSelected: {
-      '&:hover': {
-        backgroundColor: 'yellowgreen'
-      },
-      width: '270px',
-      height: '40px',
-      backgroundColor: 'yellowgreen',
-      margin: '4px',
-      textAlign: 'center',
-      padding: '28px 0',
-      borderRadius: '4px',
-      cursor: 'grabbing'
-    },
-    palette: {
-      width: '280px',
-      borderRadius: '4px',
-      border: '1px solid #e1e1e1'
-    }
-  };
-});
-
-var status = function status(response) {
+    width: '270px',
+    height: '40px',
+    backgroundColor: 'yellowgreen',
+    margin: '4px',
+    textAlign: 'center',
+    padding: '28px 0',
+    borderRadius: '4px',
+    cursor: 'grabbing'
+  },
+  palette: {
+    width: '280px',
+    borderRadius: '4px',
+    border: '1px solid #e1e1e1'
+  }
+}));
+const status = response => {
   if (response.ok) {
     return Promise.resolve(response);
   } else {
-    var error = new Error(response.statusText);
+    let error = new Error(response.statusText);
     error.code = response.status;
     return Promise.reject(error);
   }
 };
-
-var json = function json(response) {
+const json = response => {
   return response.text();
 };
-
-var location = window.location.protocol + '//' + window.location.hostname;
-var templateItemEventHandler = new _TemplateItemEventHandler.default();
-var VALID_COLOR = 'green';
-
-var SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _React$useState = _react.default.useState(null),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      file = _React$useState2[0],
-      setFile = _React$useState2[1];
-
-  var _React$useState3 = _react.default.useState(null),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      templateDoc = _React$useState4[0],
-      setTemplateDoc = _React$useState4[1];
-
-  var _React$useState5 = _react.default.useState(null),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      paletteSelectionId = _React$useState6[0],
-      setPaletteSelectionId = _React$useState6[1];
-
-  var paletteSelection = _react.default.useRef(null);
-
-  var idCounter = _react.default.useRef(0);
-
-  var _React$useState7 = _react.default.useState(null),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      value = _React$useState8[0],
-      setValue = _React$useState8[1];
-
-  var _React$useState9 = _react.default.useState(null),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      selectedInputBoxValue = _React$useState10[0],
-      setSelectedInputBoxValue = _React$useState10[1];
-
-  var _React$useState11 = _react.default.useState([]),
-      _React$useState12 = _slicedToArray(_React$useState11, 2),
-      inputBoxValues = _React$useState12[0],
-      setInputBoxValues = _React$useState12[1];
-
-  var classes = useStyles();
-
-  var _React$useState13 = _react.default.useState(_Utils.default.isNull(props.autoLoadData) || props.autoLoadData === true),
-      _React$useState14 = _slicedToArray(_React$useState13, 2),
-      loading = _React$useState14[0],
-      setLoading = _React$useState14[1];
-
-  var documentName = _react.default.useRef(null);
-
-  var _React$useState15 = _react.default.useState(null),
-      _React$useState16 = _slicedToArray(_React$useState15, 2),
-      grabbedItem = _React$useState16[0],
-      setGrabbedItem = _React$useState16[1];
-
-  _react.default.useEffect(function () {
+const location = window.location.protocol + '//' + window.location.hostname;
+const templateItemEventHandler = new _TemplateItemEventHandler.default();
+const VALID_COLOR = 'green';
+const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const [file, setFile] = _react.default.useState(null);
+  const [templateDoc, setTemplateDoc] = _react.default.useState(null);
+  const [paletteSelectionId, setPaletteSelectionId] = _react.default.useState(null);
+  const paletteSelection = _react.default.useRef(null);
+  const idCounter = _react.default.useRef(0);
+  const [value, setValue] = _react.default.useState(null);
+  const [selectedInputBoxValue, setSelectedInputBoxValue] = _react.default.useState(null);
+  const [inputBoxValues, setInputBoxValues] = _react.default.useState([]);
+  const classes = useStyles();
+  const [loading, setLoading] = _react.default.useState(_Utils.default.isNull(props.autoLoadData) || props.autoLoadData === true);
+  const documentName = _react.default.useRef(null);
+  const [grabbedItem, setGrabbedItem] = _react.default.useState(null);
+  _react.default.useEffect(() => {
     props.handle.api = api();
   });
-
-  _react.default.useEffect(function () {
-    var parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
-
+  _react.default.useEffect(() => {
+    let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
     _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
-
     _Observable.default.addSystemSubscriptions(props.viewId, parsedConfig);
   }, []);
-
-  var setup = function setup() {
-    var container = document.getElementById('templateContainer');
-
+  const setup = () => {
+    let container = document.getElementById('templateContainer');
     if (!_Utils.default.isNull(templateDoc) && !_Utils.default.isNull(container)) {
-      templateItemEventHandler.initDragAndDrop(function (id) {}, container);
+      templateItemEventHandler.initDragAndDrop(id => {}, container);
     }
   };
-
-  _react.default.useEffect(function () {
+  _react.default.useEffect(() => {
     setup();
   }, []);
-
-  _react.default.useEffect(function () {
+  _react.default.useEffect(() => {
     setup();
   }, [templateDoc]);
-
-  _react.default.useEffect(function () {
+  _react.default.useEffect(() => {
     if (!_Utils.default.isNull(props.valueChangeHandler)) {
       props.valueChangeHandler(value);
     }
   }, [value]);
-
-  var api = function api() {
+  const api = () => {
     return {
       get id() {
         return props.config.id;
       },
-
-      loadData: function loadData(actionConfig) {
+      loadData: actionConfig => {
         setLoading(true);
-        var service = !_Utils.default.isNull(props.config.dataService) ? props.config.dataService : !_Utils.default.isNull(actionConfig) !== null ? actionConfig.dataService : null;
-
+        let service = !_Utils.default.isNull(props.config.dataService) ? props.config.dataService : !_Utils.default.isNull(actionConfig) !== null ? actionConfig.dataService : null;
         if (!_Utils.default.isNull(service)) {
           if (service.type === 'rpc') {
-            (0, _RestUtils.invokeRpc)(service, props.handle, props.viewId, function (result) {
+            (0, _RestUtils.invokeRpc)(service, props.handle, props.viewId, result => {
               setLoading(false);
-            }, function (e) {
+            }, e => {
               console.error(e);
-
               _Utils.default.publishErrorMessage(e, props.viewId);
-            }, function (parameter) {
+            }, parameter => {
               setLoading(false);
             });
           } else {
             if (_Utils.default.isNull(actionConfig)) {
               actionConfig = {};
             }
-
             actionConfig.service = service;
-
-            _ServiceCallActionHandler.default.execute(actionConfig, null, null, props.viewId, function (data) {
+            _ServiceCallActionHandler.default.execute(actionConfig, null, null, props.viewId, data => {
               setTemplateDoc(data.template);
               setLoading(false);
-            }, function () {});
+            }, () => {});
           }
-
           return true;
         } else {
           if (!_Utils.default.isNull(actionConfig) && !_Utils.default.isNull(actionConfig.value)) {
-            var _value = _ApplicationManager.default.isExpression(actionConfig.value) ? _ApplicationManager.default.resolveExpressionValue(actionConfig.value) : actionConfig.value;
-
-            setValue(_value);
-
-            if (!_Utils.default.isNull(_value)) {
-              setTemplateDoc(_value.htmlTemplate);
-              setInputBoxValues(_value.signatureInputs);
-              idCounter.current = _value.idCounter;
+            let value = _ApplicationManager.default.isExpression(actionConfig.value) ? _ApplicationManager.default.resolveExpressionValue(actionConfig.value) : actionConfig.value;
+            setValue(value);
+            if (!_Utils.default.isNull(value)) {
+              setTemplateDoc(value.htmlTemplate);
+              setInputBoxValues(value.signatureInputs);
+              idCounter.current = value.idCounter;
             }
           }
-
           setLoading(false);
         }
       },
-
       get model() {
         return value;
       },
-
       get value() {
         return value;
       }
-
     };
   };
-
-  var newItem = function newItem(id, width, height) {
-    var inputValue = {};
+  const newItem = (id, width, height) => {
+    let inputValue = {};
     inputValue.id = id;
     inputValue.height = height.replace('px', '');
     inputValue.width = width.replace('px', '');
     inputValue.type = paletteSelection.current === 'INITIAL_ITEM' ? 'INITIAL' : paletteSelection.current === 'SIGN_ITEM' ? 'SIGN' : 'TEXT INPUT';
     return inputValue;
   };
-
-  var mouseClickHandler = function mouseClickHandler(event) {
+  let mouseClickHandler = function (event) {
     if (grabbedItem) {
       setValue(null);
       setSelectedInputBoxValue(null);
@@ -306,241 +205,160 @@ var SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_
         height: grabbedItem.props.defaultHeightOnPageDrop,
         description: grabbedItem.description,
         type: grabbedItem.type
-      }, function (id, node) {
-        var inputValue = getInputValue(id);
-
+      }, (id, node) => {
+        let inputValue = getInputValue(id);
         if (!inputValue) {
           inputValue = newItem(id, node.style.width, node.style.height);
           inputBoxValues.push(inputValue);
         }
-
         saveValue();
         setSelectedInputBoxValue(inputValue);
       });
     }
-
     setPaletteSelectionId(null);
     setGrabbedItem(null);
   };
-
-  var grabPalleteItem = function grabPalleteItem(item) {
+  const grabPalleteItem = item => {
     document.getElementsByTagName('body')[0].style.cursor = 'grabbing';
     setPaletteSelectionId(item.type);
     paletteSelection.current = item.type;
     setGrabbedItem(item);
   };
-
-  _react.default.useEffect(function () {
-    var event = new _Event.default(props.handle, props.viewId, value);
-
+  _react.default.useEffect(() => {
+    let event = new _Event.default(props.handle, props.viewId, value);
     _Observable.default.fireEvent(_EventType.default.VALUE_CHANGE, event);
   }, [value]);
-
-  var getInputValue = function getInputValue(id) {
-    var index = 0;
-
-    var _iterator = _createForOfIteratorHelper(inputBoxValues),
-        _step;
-
-    try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var inputBoxValue = _step.value;
-
-        if (inputBoxValue.id === id) {
-          inputBoxValue.index = index;
-          return inputBoxValue;
-        }
-
-        index++;
+  const getInputValue = id => {
+    let index = 0;
+    for (const inputBoxValue of inputBoxValues) {
+      if (inputBoxValue.id === id) {
+        inputBoxValue.index = index;
+        return inputBoxValue;
       }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
+      index++;
     }
-
     return null;
   };
-
-  var handleSubmit = function handleSubmit() {
-    return function (event) {
-      setTemplateDoc('');
-      var accessToken = sessionStorage.getItem('accessToken');
-      var idToken = sessionStorage.getItem('idToken');
-      var data = new FormData();
-      data.append('sourceType', 'PDF');
-      data.append('targetType', 'HTML');
-      data.append('file', file);
-      var fetchConfig = {
-        method: 'POST',
-        headers: {
-          'Accept': 'application/json',
-          'Authorization': 'Bearer ' + accessToken,
-          'idToken': idToken
-        },
-        body: data
-      };
-      var url = location + _ApplicationManager.default.getContextRoot() + props.config.documentConverterUrl;
-      (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(json).then(function (data) {
-        setTemplateDoc(data);
-        setFile(null);
-      }).catch(function (e) {
-        if (e.code === 401) {
-          _ApplicationManager.default.clear();
-
-          _ApplicationManager.default.getApplicationHistory().push('/login');
-        }
-      }));
+  const handleSubmit = () => event => {
+    setTemplateDoc('');
+    const accessToken = sessionStorage.getItem('accessToken');
+    const idToken = sessionStorage.getItem('idToken');
+    let data = new FormData();
+    data.append('sourceType', 'PDF');
+    data.append('targetType', 'HTML');
+    data.append('file', file);
+    let fetchConfig = {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Authorization': 'Bearer ' + accessToken,
+        'idToken': idToken
+      },
+      body: data
     };
+    let url = location + _ApplicationManager.default.getContextRoot() + props.config.documentConverterUrl;
+    (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(json).then(data => {
+      setTemplateDoc(data);
+      setFile(null);
+    }).catch(e => {
+      if (e.code === 401) {
+        _ApplicationManager.default.clear();
+        _ApplicationManager.default.getApplicationHistory().push('/login');
+      }
+    }));
   };
-
-  var handleChange = function handleChange() {
-    return function (event) {
-      var files = event.target.files;
-      documentName.current = files[0].name;
-      setFile(files[0]);
-    };
+  const handleChange = () => event => {
+    let files = event.target.files;
+    documentName.current = files[0].name;
+    setFile(files[0]);
   };
-
-  var deleteInputItem = function deleteInputItem(id) {
-    var val = getInputValue(id);
+  const deleteInputItem = id => {
+    let val = getInputValue(id);
     inputBoxValues.splice(val.index, 1);
-    var element = document.getElementById(id);
+    let element = document.getElementById(id);
     element.remove();
     saveValue();
   };
-
-  var clear = function clear() {
-    var elements = document.getElementsByClassName('_draggable_');
-
+  const clear = () => {
+    let elements = document.getElementsByClassName('_draggable_');
     while (elements.length > 0) {
       elements[0].remove();
     }
-
     inputBoxValues.splice(0, inputBoxValues.length);
     setValue(null);
   };
-
-  var getProps = function getProps(type) {
+  const getProps = type => {
     if (type === 'INITIAL_ITEM') {
       return INITIAL_ITEM;
     } else if (type === 'SIGN_ITEM') {
       return SIGN_ITEM;
     }
-
     return TEXT_ITEM;
   };
-
-  var handleDuplicate = function handleDuplicate(id) {
+  const handleDuplicate = id => {
     // TODO : Fix this function
-    var element = document.getElementById(id);
-    var pageElements = document.getElementsByClassName('dropTarget');
-    var elementPage = null;
-    var elementTop = 3 * parseFloat(element.style.top.replace('px', '').replace('pt', '')) / 4;
-    var pageElementTop = 0;
-
-    var _iterator2 = _createForOfIteratorHelper(pageElements),
-        _step2;
-
-    try {
-      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-        var pageElement = _step2.value;
-        var pageElementHeight = parseFloat(pageElement.style.height.replace('px', '').replace('pt', ''));
-
-        if (elementTop >= pageElementTop && elementTop < pageElementTop + pageElementHeight) {
-          elementPage = pageElement;
-          break;
-        }
-
-        pageElementTop += pageElementHeight;
+    let element = document.getElementById(id);
+    let pageElements = document.getElementsByClassName('dropTarget');
+    let elementPage = null;
+    let elementTop = 3 * parseFloat(element.style.top.replace('px', '').replace('pt', '')) / 4;
+    let pageElementTop = 0;
+    for (const pageElement of pageElements) {
+      let pageElementHeight = parseFloat(pageElement.style.height.replace('px', '').replace('pt', ''));
+      if (elementTop >= pageElementTop && elementTop < pageElementTop + pageElementHeight) {
+        elementPage = pageElement;
+        break;
       }
-    } catch (err) {
-      _iterator2.e(err);
-    } finally {
-      _iterator2.f();
+      pageElementTop += pageElementHeight;
     }
-
-    var offset = elementTop - pageElementTop;
-    var pageNumber = 0;
-    var elementData = getInputValue(id);
-
-    var _iterator3 = _createForOfIteratorHelper(pageElements),
-        _step3;
-
-    try {
-      for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-        var _pageElement = _step3.value;
-
-        var _pageElementHeight = parseFloat(_pageElement.style.height.replace('px', '').replace('pt', ''));
-
-        if (_pageElement !== elementPage) {
-          (function () {
-            var item = {
-              id: idCounter.current++,
-              description: elementData.description,
-              type: elementData.type,
-              props: getProps(elementData.type)
-            };
-            grabPalleteItem(item);
-            var event = {
-              target: _pageElement
-            };
-            templateItemEventHandler.handleGrabRelease(event, {
-              id: item.id,
-              top: pageNumber * _pageElementHeight + offset,
-              left: parseFloat(element.style.left.replace('px', '')),
-              width: parseFloat(element.style.width.replace('px', '')),
-              height: parseFloat(element.style.height.replace('px', '')),
-              description: item.description,
-              type: item.type
-            }, function (id, node) {
-              var inputValue = getInputValue(id);
-
-              if (!inputValue) {
-                inputValue = newItem(item.id, node.style.width, node.style.height);
-                inputBoxValues.push(inputValue);
-                setValue(null);
-              }
-
-              setSelectedInputBoxValue(inputValue);
-            });
-            setGrabbedItem(null);
-          })();
-        }
-
-        pageNumber++;
+    let offset = elementTop - pageElementTop;
+    let pageNumber = 0;
+    let elementData = getInputValue(id);
+    for (const pageElement of pageElements) {
+      let pageElementHeight = parseFloat(pageElement.style.height.replace('px', '').replace('pt', ''));
+      if (pageElement !== elementPage) {
+        let item = {
+          id: idCounter.current++,
+          description: elementData.description,
+          type: elementData.type,
+          props: getProps(elementData.type)
+        };
+        grabPalleteItem(item);
+        let event = {
+          target: pageElement
+        };
+        templateItemEventHandler.handleGrabRelease(event, {
+          id: item.id,
+          top: pageNumber * pageElementHeight + offset,
+          left: parseFloat(element.style.left.replace('px', '')),
+          width: parseFloat(element.style.width.replace('px', '')),
+          height: parseFloat(element.style.height.replace('px', '')),
+          description: item.description,
+          type: item.type
+        }, (id, node) => {
+          let inputValue = getInputValue(id);
+          if (!inputValue) {
+            inputValue = newItem(item.id, node.style.width, node.style.height);
+            inputBoxValues.push(inputValue);
+            setValue(null);
+          }
+          setSelectedInputBoxValue(inputValue);
+        });
+        setGrabbedItem(null);
       }
-    } catch (err) {
-      _iterator3.e(err);
-    } finally {
-      _iterator3.f();
+      pageNumber++;
     }
   };
-
   function saveValue() {
-    var allValid = true;
-
-    var _iterator4 = _createForOfIteratorHelper(inputBoxValues),
-        _step4;
-
-    try {
-      for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-        var inputBoxValue = _step4.value;
-        console.log('\n\n\n\nSIG VAL : ' + inputBoxValue.signatory);
-
-        if (_Utils.default.isNull(inputBoxValue.signatory)) {
-          allValid = false;
-          break;
-        }
+    let allValid = true;
+    for (const inputBoxValue of inputBoxValues) {
+      console.log('\n\n\n\nSIG VAL : ' + inputBoxValue.signatory);
+      if (_Utils.default.isNull(inputBoxValue.signatory)) {
+        allValid = false;
+        break;
       }
-    } catch (err) {
-      _iterator4.e(err);
-    } finally {
-      _iterator4.f();
     }
-
     if (allValid) {
-      var newValue = {};
+      let newValue = {};
       newValue.htmlTemplate = document.getElementById('templateContainer').innerHTML.replace('2px dashed #a1a1a1', 'none').replace('2px dashed green', 'none').replace('div name="replaced_html"', 'html').replace('div name="replaced_body"', 'body');
       newValue.htmlTemplateBase64 = Base64.encode(newValue.htmlTemplate);
       newValue.signatureInputs = inputBoxValues;
@@ -551,14 +369,13 @@ var SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_
       setValue(null);
     }
   }
-
-  var saveProps = function saveProps(id, values) {
-    var val = getInputValue(id);
+  const saveProps = (id, values) => {
+    let val = getInputValue(id);
     val.width = values.width;
     val.height = values.height;
     val.signatory = values.signatory;
     val.type = values.type === 'TEXT INPUT' ? 'TEXT_INPUT' : values.type;
-    var element = document.getElementById(id);
+    let element = document.getElementById(id);
     element.style.width = values.width + 'px';
     element.style.height = values.height + 'px';
     element.style.borderColor = VALID_COLOR;
@@ -566,7 +383,6 @@ var SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_
     element.setAttribute('sid', values.signatory.emailAddress);
     saveValue();
   };
-
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
     style: {
@@ -612,7 +428,7 @@ var SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_
   }, !_Utils.default.isNull(templateDoc) ? /*#__PURE__*/_react.default.createElement("div", {
     className: 'row'
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(classes.palette, " col-*-*"),
+    className: `${classes.palette} col-*-*`,
     style: {
       maxHeight: 'calc(70vh - 80px)',
       overflow: 'auto',
@@ -622,14 +438,12 @@ var SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_
     variant: "contained",
     component: "span",
     className: paletteSelectionId === 'INITIAL_ITEM' ? classes.paletteButtonSelected : classes.paletteButton,
-    onClick: function onClick() {
-      return grabPalleteItem({
-        id: idCounter.current++,
-        description: 'Initial',
-        type: 'INITIAL_ITEM',
-        props: INITIAL_ITEM
-      });
-    },
+    onClick: () => grabPalleteItem({
+      id: idCounter.current++,
+      description: 'Initial',
+      type: 'INITIAL_ITEM',
+      props: INITIAL_ITEM
+    }),
     id: 'initialPaletteButton',
     classes: {
       'label': 'paletteButtonLabel'
@@ -638,14 +452,12 @@ var SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_
     variant: "contained",
     component: "span",
     className: paletteSelectionId === 'SIGN_ITEM' ? classes.paletteButtonSelected : classes.paletteButton,
-    onClick: function onClick() {
-      return grabPalleteItem({
-        id: idCounter.current++,
-        description: 'Signature',
-        type: 'SIGN_ITEM',
-        props: SIGN_ITEM
-      });
-    },
+    onClick: () => grabPalleteItem({
+      id: idCounter.current++,
+      description: 'Signature',
+      type: 'SIGN_ITEM',
+      props: SIGN_ITEM
+    }),
     id: 'initialPaletteButton',
     classes: {
       'label': 'paletteButtonLabel'
@@ -654,14 +466,12 @@ var SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_
     variant: "contained",
     component: "span",
     className: paletteSelectionId === 'TEXT_ITEM' ? classes.paletteButtonSelected : classes.paletteButton,
-    onClick: function onClick() {
-      return grabPalleteItem({
-        id: idCounter.current++,
-        description: 'Text',
-        type: 'TEXT_ITEM',
-        props: TEXT_ITEM
-      });
-    },
+    onClick: () => grabPalleteItem({
+      id: idCounter.current++,
+      description: 'Text',
+      type: 'TEXT_ITEM',
+      props: TEXT_ITEM
+    }),
     id: 'initialPaletteButton',
     classes: {
       'label': 'paletteButtonLabel'
@@ -670,7 +480,7 @@ var SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_
     variant: "contained",
     component: "span",
     className: classes.paletteButton,
-    onClick: function onClick() {
+    onClick: () => {
       clear();
     },
     id: 'clearButton',
@@ -678,20 +488,14 @@ var SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_
       'label': 'paletteButtonLabel'
     }
   }, "Clear"), /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(classes.propertyWindow)
+    className: `${classes.propertyWindow}`
   }, /*#__PURE__*/_react.default.createElement(_SignatureInputProps.default, {
     value: selectedInputBoxValue,
     signatoryUrl: props.config.signatoryUrl,
     signatoryService: props.config.signatoryService,
-    saveHandler: function saveHandler(id, values) {
-      return saveProps(id, values);
-    },
-    deleteHandler: function deleteHandler(id, values) {
-      return deleteInputItem(id, values);
-    },
-    dublicateHandler: function dublicateHandler(id) {
-      return handleDuplicate(id);
-    }
+    saveHandler: (id, values) => saveProps(id, values),
+    deleteHandler: (id, values) => deleteInputItem(id, values),
+    dublicateHandler: id => handleDuplicate(id)
   }))), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       border: '1px solid #e1e1e1',
@@ -701,9 +505,7 @@ var SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_
       width: 'calc(100% - 288px)'
     },
     className: 'col-*-*',
-    onClick: function onClick(e) {
-      return mouseClickHandler(e);
-    }
+    onClick: e => mouseClickHandler(e)
   }, templateDoc ? /*#__PURE__*/_react.default.createElement("div", {
     style: {
       maxHeight: 'calc(70vh - 80px)',
@@ -722,6 +524,4 @@ var SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_
     }
   }, "no template to display"))) : null)) : /*#__PURE__*/_react.default.createElement("div", null, "Loading..."));
 }));
-
-var _default = SignatureTemplateDesigner;
-exports.default = _default;
+var _default = exports.default = SignatureTemplateDesigner;