@agilemotion/oui-react-js 1.8.3 → 1.8.5

package/dist/components/DocumentTemplateDesignerComponent2.js

@@ -0,0 +1,585 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _ej2ReactDocumenteditor = require("@syncfusion/ej2-react-documenteditor");
+var _ej2Base = require("@syncfusion/ej2-base");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+require("./DocumentTemplateDesignerComponent.css");
+var _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"));
+var _Form = _interopRequireDefault(require("./form/Form"));
+var _EventType = _interopRequireDefault(require("../event/EventType"));
+var _Observable = _interopRequireDefault(require("../event/Observable"));
+var _Utils = _interopRequireDefault(require("../Utils"));
+var _reactPromiseTracker = require("react-promise-tracker");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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; }
+(0, _ej2Base.registerLicense)('ORg4AjUWIQA/Gnt2U1hhQlJBfV5AQmBIYVp/TGpJfl96cVxMZVVBJAtUQF1hTX5adkJiWHtWdXBXT2Je');
+_ej2ReactDocumenteditor.DocumentEditorContainerComponent.Inject(_ej2ReactDocumenteditor.Toolbar);
+const DocumentTemplateDesignerComponent = props => {
+  const {
+    contractTemplate,
+    uploadTrigger,
+    valueChangeHandler,
+    addDocumentMetaDataHandler,
+    value
+  } = props;
+  const [container, setContainer] = React.useState(null);
+  const model = React.useRef({});
+  const [doc, setDoc] = React.useState(null);
+  const [file, setFile] = React.useState(null);
+  const [documentData, setDocumentData] = React.useState(null);
+  const [contentState] = React.useState({
+    changed: false
+  });
+  const btnRef = (0, _react.useRef)(null);
+  const currentVal = (0, _react.useRef)(null);
+  const propertiesFormHandle = React.useRef({});
+  const onToolbarClick = args => {
+    switch (args.item.id) {
+      case "Custom":
+        break;
+      default:
+        break;
+    }
+  };
+  const onWrapText = text => {
+    let content = '';
+    const index = text.lastIndexOf(' ');
+    if (index !== -1) {
+      content = text.slice(0, index) + "<div class='e-de-text-wrap'>" + text.slice(index + 1) + "</div>";
+    } else {
+      content = text;
+    }
+    return content;
+  };
+  const findNext = () => {
+    container.documentEditor.search.searchResults.index = container.documentEditor.search.searchResults.index + 1;
+  };
+  const findPrev = () => {
+    container.documentEditor.search.searchResults.index = container.documentEditor.search.searchResults.index - 1;
+  };
+  let next = {
+    prefixIcon: "e-chevron-down",
+    click: findNext.bind(void 0),
+    tooltipText: 'Next placeholder',
+    text: '',
+    id: "NextPlaceHolder"
+  };
+  let previous = {
+    prefixIcon: "e-chevron-up",
+    click: findPrev.bind(void 0),
+    tooltipText: 'Previous placeholder',
+    text: '',
+    id: "PrevPlaceHolder"
+  };
+  let apply = {
+    prefixIcon: "e-icons e-save",
+    click: applyChanges.bind(void 0),
+    tooltipText: 'Previous placeholder',
+    text: 'Apply',
+    id: "PrevPlaceHolder"
+  };
+  let items = ["Open", apply, "Undo", "Redo", "Separator", {
+    tooltipText: 'Bold',
+    prefixIcon: 'e-icons e-bold',
+    command: 'Bold'
+  }, {
+    tooltipText: 'Italic',
+    prefixIcon: 'e-icons e-italic',
+    command: 'Italic'
+  }, "Separator", "Image", "Table", "Separator", "Header", "Footer", "PageSetup", "PageNumber", "InsertFootnote", "Separator", "Find"];
+  let searchHighlightColor = {
+    searchHighlightColor: 'Red'
+  };
+  const saveDoc = () => {
+    return new Promise((accept, reject) => {
+      if (container && container.documentEditor) {
+        container.documentEditor.saveAsBlob('Docx').then(blob => {
+          accept(blob);
+        }).catch(e => {
+          console.error("Error saving document");
+          reject(e);
+        });
+      }
+    });
+  };
+  const onContentChange = () => {
+    contentState.changed = true;
+  };
+  (0, _react.useEffect)(() => {
+    if (uploadTrigger != null && btnRef.current) {
+      btnRef.current.click();
+    }
+  }, [uploadTrigger]);
+  (0, _react.useEffect)(() => {
+    if (value) {
+      let i = 0;
+      for (const property of value.properties) {
+        property.id = i++;
+      }
+      propertiesFormHandle.current.api.model = {
+        properties: value.properties
+      };
+      if (value.file && value.file.url) {
+        let tokens = value.file.url.split(';base64,');
+        let type = tokens[0].replace("data:", "");
+        let base64 = tokens[1];
+        const arrayBuffer = _Utils.default.base64ToArrayBuffer(base64);
+        const file = new Blob([arrayBuffer], {
+          type
+        });
+        const formData = new FormData();
+        formData.append('files', file, 'document.docx');
+        (0, _reactPromiseTracker.trackPromise)(fetch('https://ej2services.syncfusion.com/production/web-services/api/documenteditor/Import', {
+          method: 'POST',
+          body: formData
+        }).then(response => {
+          (0, _reactPromiseTracker.trackPromise)(response.json().then(json => {
+            setDocumentData(json);
+          }));
+        }));
+      }
+    }
+  }, [value]);
+  const getFooterText = () => {
+    container.documentEditor.selection.goToFooter();
+    container.documentEditor.selection.selectAll();
+    let footerText = container.documentEditor.selection.getText();
+    container.documentEditor.selection.closeHeaderFooter();
+    container.documentEditor.selection.clear();
+    return footerText;
+  };
+  function applyChanges() {
+    setup();
+  }
+  function setup() {
+    let initialFormValue = {
+      properties: []
+    };
+    if (container) {
+      container.documentEditor.selection.selectAll();
+      const text = container.documentEditor.selection.getText();
+      container.documentEditor.selection.clear();
+      const bodyMatches = removeNextLineCharsFromPlaceholders(text, '<<', '>>');
+      const footerText = getFooterText();
+      let footerMatches = removeNextLineCharsFromPlaceholders(footerText, '<<', '>>');
+      const matches = bodyMatches.concat(footerMatches);
+
+      //container.documentEditor.editor.enforceProtection('password', 'CommentsOnly');
+      //container.documentEditor.search.findAll(/<<[\s\S]*?>>/g);
+
+      if (model.current.properties) {
+        matches.forEach(match => {
+          let prop = model.current.properties.find(p => p.placeHolder === match.text);
+          let indexData = {
+            start: match.start,
+            end: match.end,
+            linePositions: match.linePositions
+          };
+          if (!prop) {
+            prop = {
+              placeHolder: match.text,
+              indexes: [indexData]
+            };
+          } else {
+            if (!prop.indexes) {
+              prop.indexes = [];
+            }
+            prop.indexes.push(indexData);
+          }
+          if (!initialFormValue.properties.find(p => p.placeHolder === match.text)) {
+            initialFormValue.properties.push(prop);
+          }
+        });
+        let i = 0;
+        for (const property of initialFormValue.properties) {
+          property.id = i++;
+        }
+        propertiesFormHandle.current.api.bindData(initialFormValue);
+        saveDoc().then(blob => {
+          const newFile = new File([blob], props.documentName, {
+            type: blob.type
+          });
+          setFile(newFile);
+          if (contentState.changed) {
+            if (!initialFormValue) {
+              valueChangeHandler(null);
+            } else {
+              let newVal = validateProps(initialFormValue.properties) ? {
+                properties: initialFormValue.properties,
+                file: newFile
+              } : null;
+              valueChangeHandler(newVal);
+            }
+          }
+          contentState.changed = false;
+        });
+      }
+    }
+  }
+  (0, _react.useEffect)(() => {
+    setup();
+  }, [doc]);
+  (0, _react.useEffect)(() => {
+    if (container && documentData) {
+      container.documentEditor.open(JSON.stringify(documentData));
+    }
+  }, [documentData]);
+  const validateProps = properties => {
+    let valid = properties && properties.length > 0;
+    if (valid) {
+      for (const property of properties) {
+        if (!property.valueField) {
+          valid = false;
+          break;
+        }
+      }
+    }
+    return valid;
+  };
+  const getLinePositions = (line, anchorPosition) => {
+    let linePositions = [];
+    container.documentEditor.search.find(line);
+    let searchList = container.documentEditor.search.searchResults.searchModule.textSearchResults.innerList;
+    let startPosition = getSearchStartPosition(anchorPosition, searchList);
+    let endPosition = getSearchEndPosition(anchorPosition, searchList);
+    console.log("\n\n\n\n\n\nSEARCH LIST : ", endPosition.location.yIn);
+    console.log(endPosition);
+    for (const textSearchResult of searchList) {
+      console.log(textSearchResult.endIn.location.yIn);
+    }
+    console.log("CHECKING WORD WRAP [" + line + "] : " + startPosition.location.yIn + " - " + endPosition.location.yIn);
+    // We have a word wrap if this condition is true
+    console.log("WORD WRAP JOINT ", detectWordWrap(anchorPosition, startPosition, endPosition, container.documentEditor, line, endPosition.location.yIn));
+    if (startPosition.location.yIn < endPosition.location.yIn) {
+      linePositions.push({
+        startX: startPosition.location.xIn,
+        startY: startPosition.location.yIn,
+        endX: endPosition.location.xIn,
+        endY: endPosition.location.yIn
+      });
+      console.log("\n\n\n\n\n\nMATHATA : [" + line + "]");
+      console.log(startPosition.location.xIn + " : " + endPosition.location.xIn);
+      console.log(startPosition.location.yIn + " : " + endPosition.location.yIn);
+    } else {
+      linePositions.push({
+        startX: startPosition.location.xIn,
+        startY: startPosition.location.yIn,
+        endX: endPosition.location.xIn,
+        endY: endPosition.location.yIn
+      });
+    }
+    return {
+      endPosition,
+      linePositions
+    };
+  };
+  const removeNextLineCharsFromPlaceholders = (text, startTag, endTag) => {
+    const matches = [];
+    let index = 0;
+    let anchorPosition = null;
+    while (index < text.length) {
+      const startIndex = text.indexOf(startTag, index);
+      if (startIndex === -1) break;
+      const endIndex = text.indexOf(endTag, startIndex + startTag.length);
+      if (endIndex === -1) break;
+      let find = text.substring(startIndex, endIndex + endTag.length);
+      let split = find.split("\r");
+      let linePositions = [];
+
+      //container.documentEditor.selection.start.setPositionInternal(startIndex);
+
+      if (split.length > 1) {
+        container.documentEditor.search.find(split[0]);
+        let startPosition = getSearchStartPosition(anchorPosition, container.documentEditor.search.searchResults.searchModule.textSearchResults.innerList);
+        container.documentEditor.search.find(split[split.length - 1]);
+        let endPosition = getSearchEndPosition(anchorPosition, container.documentEditor.search.searchResults.searchModule.textSearchResults.innerList);
+        let selection = container.documentEditor.selection;
+        selection.selectRange(startPosition, endPosition);
+        if (selection && selection.start && selection.end) {
+          let selectedText = selection.getText();
+          container.documentEditor.editor.delete();
+          container.documentEditor.editor.insertText(selectedText.replace(/(\r\n|\n|\r)/gm, ""));
+          for (const token of split) {
+            let placeholderLinePositions = getLinePositions(token, anchorPosition);
+            anchorPosition = placeholderLinePositions.endPosition;
+            linePositions.push(placeholderLinePositions.linePositions);
+          }
+        } else {
+          console.error("No valid selection found");
+        }
+      } else {
+        let placeholderLinePositions = getLinePositions(split[0], anchorPosition);
+        anchorPosition = placeholderLinePositions.endPosition;
+        linePositions.push(placeholderLinePositions.linePositions);
+      }
+      matches.push({
+        start: startIndex,
+        end: endIndex + endTag.length,
+        text: find.replace(/(\r\n|\n|\r)/gm, ""),
+        linePositions: linePositions
+      });
+      index = endIndex + endTag.length;
+    }
+    return matches;
+  };
+  const comparePositions = (a, b) => {
+    if (a.location.yIn === b.location.yIn && a.location.xIn === b.location.xIn) {
+      return 0;
+    }
+    if (a.location.yIn > b.location.yIn) {
+      return 1;
+    }
+    if (a.location.yIn < b.location.yIn) {
+      return -1;
+    }
+    if (a.location.yIn === b.location.yIn) {
+      if (a.location.xIn < b.location.xIn) {
+        return -1;
+      } else {
+        return 1;
+      }
+    }
+    return 0;
+  };
+  const getSearchStartPosition = (anchorPosition, searchList) => {
+    if (!anchorPosition) {
+      return searchList[0].startIn;
+    }
+    for (const searchListElement of searchList) {
+      if (comparePositions(searchListElement.startIn, anchorPosition) >= 0) {
+        return searchListElement.startIn;
+      }
+    }
+    return anchorPosition;
+  };
+  const getSearchEndPosition = (anchorPosition, searchList) => {
+    if (!anchorPosition) {
+      return searchList[0].endIn;
+    }
+    for (const searchListElement of searchList) {
+      if (comparePositions(searchListElement.endIn, anchorPosition) >= 0) {
+        return searchListElement.endIn;
+      }
+    }
+    return anchorPosition;
+  };
+  function detectWordWrap(anchorPosition, startPosition, endPosition, editor, sentence, startY) {
+    let substrings = generateSubstrings(sentence);
+    let wordWrapPositions = [];
+    let wordWrapAnchorPosition = anchorPosition;
+
+    //container.documentEditor.selection.select(startPosition, endPosition);
+
+    let prevPosition = startPosition;
+    let currentY = startY;
+    console.log("SUBSTRINGS FOR [" + sentence + "] : ", substrings);
+    console.log("ANCHOR : ", anchorPosition);
+    for (const substring of substrings) {
+      container.documentEditor.search.find(substring);
+      let endPosition = getSearchEndPosition(wordWrapAnchorPosition, container.documentEditor.search.searchResults.searchModule.textSearchResults.innerList);
+      wordWrapAnchorPosition = endPosition;
+      //container.documentEditor.selection.select(startPosition, endPosition);
+
+      console.log("[" + sentence + "] " + endPosition.location.yIn + " : " + currentY);
+      if (endPosition.location.yIn > currentY) {
+        wordWrapPositions.push({
+          prevPosition,
+          endPosition
+        });
+        currentY = endPosition.location.yIn;
+        prevPosition = endPosition;
+      }
+      console.log(substring + " - " + endPosition.location.yIn);
+    }
+    if (wordWrapPositions.length === 0) {
+      wordWrapPositions.push({
+        startPosition,
+        endPosition
+      });
+    }
+    return wordWrapPositions;
+  }
+  function generateSubstrings(sentence) {
+    let substrings = [];
+    for (let i = 0; i < sentence.length; i++) {
+      substrings.push(sentence.substring(0, i + 1)); // Add substring from index 0 to i
+    }
+    return substrings;
+  }
+  function setupContainer() {
+    container.documentEditor.currentUser = _ApplicationManager.default.getUserDetails().name + " " + _ApplicationManager.default.getUserDetails().surname;
+  }
+  (0, _react.useEffect)(() => {
+    if (container) {
+      setupContainer();
+      //autoSave();
+
+      const editor = container.documentEditor;
+      editor.addEventListener("keyDown", event => {
+        const startPosition = container.documentEditor.selection.start;
+        let selectedProperty;
+        for (const property of model.current.properties) {
+          for (const index of property.indexes) {
+            for (const linePosition of index.linePositions) {
+              console.log(property.placeHolder + "START X : " + linePosition.startX + " END X : " + linePosition.endX + " - CURSOR X : " + startPosition.location.xIn + " CURSOR Y : " + startPosition.location.yIn);
+              if (linePosition.startY === startPosition.location.yIn && linePosition.startX <= startPosition.location.xIn && linePosition.endX >= startPosition.location.xIn) {
+                console.log("PHAKATI");
+                selectedProperty = property;
+                break;
+              } else {
+                console.log("TEST 1 : " + (linePosition.startY === startPosition.location.yIn) + " TEST 2 " + (linePosition.startX <= startPosition.location.xIn) + " TEST 3 " + (linePosition.endX >= startPosition.location.xIn));
+              }
+            }
+            if (selectedProperty) {
+              break;
+            }
+          }
+        }
+        if (selectedProperty) {
+          console.log("\n\n\n\n\nPREVENTING DEFAULT [" + selectedProperty.placeHolder + "]");
+          event.event.preventDefault();
+        }
+      });
+    }
+  }, [container]);
+  (0, _react.useEffect)(() => {
+    props.handle.api = api();
+  });
+  (0, _react.useEffect)(() => {
+    props.handle.api = api();
+    let eventHandlingConfig = {};
+    let defaultAction = {
+      actionType: 'script',
+      script: {
+        lines: [`@#{this}.highlightSelection($event.data)`]
+      }
+    };
+    eventHandlingConfig.subscriptions = [];
+    let subscription = {
+      publisher: 'propertiesGrid',
+      eventType: _EventType.default.SELECTION_CHANGE,
+      actions: [defaultAction]
+    };
+    eventHandlingConfig.subscriptions.push(subscription);
+    _Observable.default.addSubscriptions(_Utils.default.parseConfig({
+      id: props.id + "DocTemplateDesigner",
+      eventHandlingConfig
+    }, props.viewId).eventHandlingConfig, props.handle, props.viewId);
+    return () => {
+      _Observable.default.clearComponentEventListeners(props.handle);
+    };
+  }, []);
+  const doHighlightSelection = selectedPropertyRows => {
+    if (container && selectedPropertyRows && selectedPropertyRows.length > 0) {
+      container.documentEditor.selection.clear();
+      container.documentEditor.search.find(selectedPropertyRows[0].placeHolder);
+    }
+  };
+  const api = () => {
+    return {
+      get id() {
+        return props.id + "DocTemplateDesigner";
+      },
+      highlightSelection: selectedPropertyRow => {
+        doHighlightSelection(selectedPropertyRow);
+      }
+    };
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: 'row no-margin no-padding',
+    style: {
+      height: "100%"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "40%",
+      overflow: "auto",
+      minHeight: "250px",
+      height: "100%",
+      border: "1px solid #e1e1e1",
+      borderRadius: '4px',
+      marginRight: "4px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "100%",
+      fontSize: "12px",
+      backgroundColor: "#fafafa",
+      padding: "8px",
+      height: "77px",
+      color: "rgba(0, 0, 0, 0.87)",
+      borderBottom: "#f1f1f1",
+      display: "flex",
+      alignItems: "center"
+    }
+  }, "Properties"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "100%",
+      marginTop: "4px",
+      padding: "0 8px"
+    }
+  }, /*#__PURE__*/React.createElement(_Form.default, {
+    config: props.propertiesFormConfig,
+    handle: propertiesFormHandle.current,
+    valueChangeHandler: React.useCallback(val => {
+      model.current = val;
+      let newVal = validateProps(val.properties) ? val : null;
+      if (JSON.stringify(currentVal.current) !== JSON.stringify(newVal?.properties)) {
+        if (newVal) {
+          valueChangeHandler({
+            properties: val.properties,
+            file
+          });
+          currentVal.current = val.properties;
+        } else {
+          if (currentVal.current) {
+            currentVal.current = null;
+            valueChangeHandler(null);
+          }
+        }
+      }
+    }, [file]),
+    viewId: props.viewId,
+    className: 'defaultForm'
+  }))), props.visible && /*#__PURE__*/React.createElement("div", {
+    className: 'col no-margin no-padding',
+    style: {
+      maxWidth: 'calc(60% - 16px)',
+      height: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(_ej2ReactDocumenteditor.DocumentEditorContainerComponent, {
+    id: "container",
+    height: '590px',
+    ref: scope => {
+      setContainer(scope);
+    },
+    created: () => {
+      if (container) {
+        container.resize();
+        container.documentEditor.resize();
+      }
+    },
+    documentChange: doc => {
+      if (container) {
+        setupContainer();
+      }
+      setDoc(doc);
+    }
+    //documentEditorSettings={searchHighlightColor}
+    ,
+    showPropertiesPane: false,
+    enableTrackChanges: false,
+    toolbarItems: items,
+    toolbarClick: onToolbarClick,
+    contentChange: onContentChange,
+    serviceUrl: "https://services.syncfusion.com/react/production/api/documenteditor/",
+    enableToolbar: true
+  })));
+};
+var _default = exports.default = DocumentTemplateDesignerComponent;

package/dist/components/Icon.js

@@ -41,6 +41,8 @@ var _Dock = _interopRequireDefault(require("@mui/icons-material/Dock"));
 var _Settings = _interopRequireDefault(require("@mui/icons-material/Settings"));
 var _WarningRounded = _interopRequireDefault(require("@mui/icons-material/WarningRounded"));
 var _Help = _interopRequireDefault(require("@mui/icons-material/Help"));
+var _Link = _interopRequireDefault(require("@mui/icons-material/Link"));
+var _Visibility = _interopRequireDefault(require("@mui/icons-material/Visibility"));
 var _iconsMaterial = require("@mui/icons-material");
 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; }
@@ -218,6 +220,8 @@ class Icon extends _react.Component {
       });
     } else if (this.props.id === 'RECORD') {
       return /*#__PURE__*/_react.default.createElement(_iconsMaterial.FiberManualRecord, null);
+    } else if (this.props.id === 'LINK') {
+      return /*#__PURE__*/_react.default.createElement(_Link.default, null);
     } else if (this.props.id === 'PLAY') {
       return /*#__PURE__*/_react.default.createElement(_iconsMaterial.PlayArrow, null);
     } else if (this.props.id === 'STOP') {
@@ -226,6 +230,12 @@ class Icon extends _react.Component {
           color: this.props.color
         }
       });
+    } else if (this.props.id === 'VIEW') {
+      return /*#__PURE__*/_react.default.createElement(_Visibility.default, {
+        style: {
+          color: this.props.color
+        }
+      });
     }
     return null;
   }