@agilemotion/oui-react-js 1.6.3 → 1.6.5

package/dist/components/TemplateDesigner.js

@@ -4,54 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _Utils = _interopRequireDefault(require("../Utils"));
-
 var _Observable = _interopRequireDefault(require("../event/Observable"));
-
 var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
-
 var _core = require("@material-ui/core");
-
 var _Icon = _interopRequireDefault(require("./Icon"));
-
 var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
-
 var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
-
 var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));
-
 var _Form = _interopRequireDefault(require("./form/Form"));
-
 var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
-
 var _reactPromiseTracker = require("react-promise-tracker");
-
 var _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"));
-
 var _reactHtmlRenderer = _interopRequireDefault(require("react-html-renderer"));
-
 var _TemplateItemEventHandler = _interopRequireDefault(require("./TemplateItemEventHandler"));
-
 require("./TemplateDesigner.css");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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 OPEN_DIALOG_CONFIG = {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const OPEN_DIALOG_CONFIG = {
   type: 'form',
   id: 'openTemplateForm',
   attributes: {
@@ -87,265 +57,196 @@ var OPEN_DIALOG_CONFIG = {
     }]
   }]
 };
-var useStyles = (0, _core.makeStyles)(function (theme) {
-  return {
-    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'
-    },
-    paletteButtonSelected: {
-      '&:hover': {
-        backgroundColor: 'yellowgreen'
-      },
-      width: '270px',
-      height: '40px',
-      backgroundColor: 'yellowgreen',
-      margin: '4px',
-      textAlign: 'center',
-      padding: '28px 0',
-      borderRadius: '4px'
+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'
+  },
+  paletteButtonSelected: {
+    '&:hover': {
+      backgroundColor: 'yellowgreen'
     },
-    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'
+  },
+  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 templateItemEventHandler = new _TemplateItemEventHandler.default();
-var location = window.location.protocol + '//' + window.location.hostname;
-
-var TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var classes = useStyles();
-
-  var _React$useState = _react.default.useState(true),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      loading = _React$useState2[0],
-      setLoading = _React$useState2[1];
-
-  var _React$useState3 = _react.default.useState(null),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      value = _React$useState4[0],
-      setValue = _React$useState4[1];
-
-  var _React$useState5 = _react.default.useState(false),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      fileDialogOpen = _React$useState6[0],
-      setFileDialogOpen = _React$useState6[1];
-
-  var _React$useState7 = _react.default.useState(null),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      templateType = _React$useState8[0],
-      setTemplateType = _React$useState8[1];
-
-  var _React$useState9 = _react.default.useState(null),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      designData = _React$useState10[0],
-      setDesignData = _React$useState10[1];
-
-  var _React$useState11 = _react.default.useState(null),
-      _React$useState12 = _slicedToArray(_React$useState11, 2),
-      templateDoc = _React$useState12[0],
-      setTemplateDoc = _React$useState12[1];
-
-  var _React$useState13 = _react.default.useState(null),
-      _React$useState14 = _slicedToArray(_React$useState13, 2),
-      templateHtml = _React$useState14[0],
-      setTemplateHtml = _React$useState14[1];
-
-  var _React$useState15 = _react.default.useState(null),
-      _React$useState16 = _slicedToArray(_React$useState15, 2),
-      grabbedItem = _React$useState16[0],
-      setGrabbedItem = _React$useState16[1];
-
-  var _React$useState17 = _react.default.useState(null),
-      _React$useState18 = _slicedToArray(_React$useState17, 2),
-      selectedItem = _React$useState18[0],
-      setSelectedItem = _React$useState18[1];
-
-  _react.default.useEffect(function () {
+const templateItemEventHandler = new _TemplateItemEventHandler.default();
+const location = window.location.protocol + '//' + window.location.hostname;
+const TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const classes = useStyles();
+  const [loading, setLoading] = _react.default.useState(true);
+  const [value, setValue] = _react.default.useState(null);
+  const [fileDialogOpen, setFileDialogOpen] = _react.default.useState(false);
+  const [templateType, setTemplateType] = _react.default.useState(null);
+  const [designData, setDesignData] = _react.default.useState(null);
+  const [templateDoc, setTemplateDoc] = _react.default.useState(null);
+  const [templateHtml, setTemplateHtml] = _react.default.useState(null);
+  const [grabbedItem, setGrabbedItem] = _react.default.useState(null);
+  const [selectedItem, setSelectedItem] = _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);
-
     setLoading(false);
   }, []);
-
-  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, node) {
+      templateItemEventHandler.initDragAndDrop((id, node) => {
         setSelectedItem(id);
       }, container);
     }
   };
-
-  _react.default.useEffect(function () {
+  _react.default.useEffect(() => {
     setup();
   }, []);
-
-  _react.default.useEffect(function () {
+  _react.default.useEffect(() => {
     setup();
   }, [templateHtml]);
-
-  _react.default.useEffect(function () {
+  _react.default.useEffect(() => {
     if (templateDoc) {
       setTemplateHtml(templateDoc);
     }
   }, [templateDoc]);
-
   function getFetchConfig(data, method) {
-    var contentType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-    var accessToken = sessionStorage.getItem('accessToken');
-    var idToken = sessionStorage.getItem('idToken');
-    var headers = {
+    let contentType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    const accessToken = sessionStorage.getItem('accessToken');
+    const idToken = sessionStorage.getItem('idToken');
+    let headers = {
       'Accept': 'application/json',
       'Authorization': 'Bearer ' + accessToken,
       'idToken': idToken
     };
-
     if (contentType) {
       headers['Content-Type'] = contentType;
     }
-
     return {
       method: method,
       headers: headers,
       body: data
     };
   }
-
-  var api = function api() {
+  const api = () => {
     return {
       get id() {
         return props.config.id;
       },
-
-      loadData: function loadData(actionConfig) {
+      loadData: actionConfig => {
         setLoading(true);
         setLoading(false);
       },
-
       get model() {
         return value;
       },
-
       get value() {
         return value;
       }
-
     };
   };
-
-  var handleOpen = function handleOpen() {
+  const handleOpen = () => {
     setFileDialogOpen(true);
   };
-
-  var handleDelete = function handleDelete() {
-    var element = document.getElementById(selectedItem);
+  const handleDelete = () => {
+    let element = document.getElementById(selectedItem);
     element.parentElement.removeChild(element);
     setSelectedItem(null);
   };
-
-  var handleSave = function handleSave() {
-    var payload = document.getElementById('templateContainer').innerHTML.replace('<div name="replaced_html", \'<html\'').replace('</div>', '</html>').replace('<div name="replaced_body"', '<body').replace('</div>', '</body>').replace('2px dashed green', 'none');
-    var templateData = {};
+  const handleSave = () => {
+    let payload = document.getElementById('templateContainer').innerHTML.replace('<div name="replaced_html", \'<html\'').replace('</div>', '</html>').replace('<div name="replaced_body"', '<body').replace('</div>', '</body>').replace('2px dashed green', 'none');
+    let templateData = {};
     templateData.templateType = templateType;
     templateData.payloadBase64 = btoa(payload);
-    var fetchConfig = getFetchConfig(JSON.stringify(templateData), 'POST', 'application/json');
-    var url = location + _ApplicationManager.default.getContextRoot() + props.config.templateStorageUrl;
-    (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(json).then(function (data) {//alert('SAVE RESULT : ' + JSON.stringify(data));
-    }).catch(function (e) {
+    let fetchConfig = getFetchConfig(JSON.stringify(templateData), 'POST', 'application/json');
+    let url = location + _ApplicationManager.default.getContextRoot() + props.config.templateStorageUrl;
+    (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(json).then(data => {
+      //alert('SAVE RESULT : ' + JSON.stringify(data));
+    }).catch(e => {
       if (e.code === 401) {
         _ApplicationManager.default.clear();
-
         _ApplicationManager.default.getApplicationHistory().push('/login');
       }
     }));
   };
-
-  var handleOk = function handleOk() {
-    var fetchConfig = getFetchConfig(null, 'GET');
+  const handleOk = () => {
+    let fetchConfig = getFetchConfig(null, 'GET');
     setFileDialogOpen(false);
-    (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(location + _ApplicationManager.default.getContextRoot() + props.config.metaDataUrl + '/' + templateType.id), fetchConfig).then(status).then(json).then(function (data) {
-      var designData = JSON.parse(data);
+    (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(location + _ApplicationManager.default.getContextRoot() + props.config.metaDataUrl + '/' + templateType.id), fetchConfig).then(status).then(json).then(data => {
+      let designData = JSON.parse(data);
       setDesignData(designData);
       setTemplateDoc(atob(designData.template.payloadBase64));
-    }).catch(function (e) {
+    }).catch(e => {
       if (e.code === 401) {
         _ApplicationManager.default.clear();
-
         _ApplicationManager.default.getApplicationHistory().push('/login');
       }
     }));
   };
-
-  var handleClose = function handleClose() {
+  const handleClose = () => {
     setFileDialogOpen(false);
   };
-
-  var loadDoc = function loadDoc(file) {
+  const loadDoc = file => {
     setTemplateHtml(null);
-    var data = new FormData();
+    let data = new FormData();
     data.append('file', file);
-    var fetchConfig = getFetchConfig(data, 'POST');
-    var url = location + _ApplicationManager.default.getContextRoot() + props.config.documentConverterBaseUrl + "/PDF/HTML";
-    (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(json).then(function (data) {
+    let fetchConfig = getFetchConfig(data, 'POST');
+    let url = location + _ApplicationManager.default.getContextRoot() + props.config.documentConverterBaseUrl + "/PDF/HTML";
+    (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(json).then(data => {
       setTemplateHtml(data);
-    }).catch(function (e) {
+    }).catch(e => {
       if (e.code === 401) {
         _ApplicationManager.default.clear();
-
         _ApplicationManager.default.getApplicationHistory().push('/login');
       }
     }));
   };
-
-  var mouseClickHandler = function mouseClickHandler(event) {
+  let mouseClickHandler = function (event) {
     if (grabbedItem) {
       setSelectedItem(grabbedItem.id);
       templateItemEventHandler.handleGrabRelease(event, {
@@ -355,26 +256,20 @@ var TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
         description: grabbedItem.description,
         type: grabbedItem.placeHolderType,
         table: grabbedItem.table
-      }, function (id) {
+      }, id => {
         setSelectedItem(id);
       });
     }
-
     setGrabbedItem(null);
   };
-
-  var handleChange = function handleChange() {
-    return function (event) {
-      var files = event.target.files;
-      loadDoc(files[0]);
-    };
+  const handleChange = () => event => {
+    let files = event.target.files;
+    loadDoc(files[0]);
   };
-
-  var grabPalleteItem = function grabPalleteItem(item) {
+  const grabPalleteItem = item => {
     document.getElementsByTagName('body')[0].style.cursor = 'grabbing';
     setGrabbedItem(item);
   };
-
   return /*#__PURE__*/_react.default.createElement("div", null, !_Utils.default.isNull(props.config) && !loading ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: '100%',
@@ -396,11 +291,11 @@ var TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
   })), designData ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", {
     accept: 'application/pdf',
     className: classes.input,
-    id: "template-file-upload",
+    id: `template-file-upload`,
     onChange: handleChange(),
     type: "file"
   }), /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: "template-file-upload"
+    htmlFor: `template-file-upload`
   }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     component: "span",
     variant: 'contained',
@@ -437,7 +332,7 @@ var TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
       minWidth: '280px'
     },
     className: 'col-*-*'
-  }, designData.templateType.templatePlaceHolders.map(function (placeHolder, index) {
+  }, designData.templateType.templatePlaceHolders.map((placeHolder, index) => {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: index
     }, /*#__PURE__*/_react.default.createElement(_Button.default, {
@@ -448,9 +343,7 @@ var TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
       },
       disabled: _Utils.default.isNull(templateDoc),
       className: grabbedItem && grabbedItem.placeHolder === placeHolder.placeHolder ? classes.paletteButtonSelected : classes.paletteButton,
-      onClick: function onClick() {
-        return grabPalleteItem(placeHolder);
-      }
+      onClick: () => grabPalleteItem(placeHolder)
     }, placeHolder.description));
   })), /*#__PURE__*/_react.default.createElement("div", {
     style: {
@@ -461,9 +354,7 @@ var TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
       width: 'calc(100% - 288px)'
     },
     className: 'col-*-*',
-    onClick: function onClick(e) {
-      return mouseClickHandler(e);
-    }
+    onClick: e => mouseClickHandler(e)
   }, templateHtml ? /*#__PURE__*/_react.default.createElement("div", {
     style: {
       maxHeight: 'calc(70vh - 80px)',
@@ -491,7 +382,7 @@ var TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
   }, 'Open Template'), /*#__PURE__*/_react.default.createElement(_DialogContent.default, null, /*#__PURE__*/_react.default.createElement(_Form.default, {
     config: OPEN_DIALOG_CONFIG,
     handle: {},
-    valueChangeHandler: function valueChangeHandler(val) {
+    valueChangeHandler: val => {
       setTemplateType(val.templateId);
     },
     viewId: props.viewId,
@@ -513,9 +404,7 @@ var TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
       width: '80px',
       marginRight: '4px'
     },
-    onClick: function onClick() {
-      return handleClose();
-    }
+    onClick: () => handleClose()
   }, "CLOSE"), /*#__PURE__*/_react.default.createElement(_Button.default, {
     variant: 'contained',
     color: 'primary',
@@ -524,11 +413,7 @@ var TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
     },
     disabled: templateType === null,
     size: "medium",
-    onClick: function onClick() {
-      return handleOk();
-    }
+    onClick: () => handleOk()
   }, "OK"))))));
 }));
-
-var _default = TemplateDesigner;
-exports.default = _default;
+var _default = exports.default = TemplateDesigner;