@agilemotion/oui-react-js 1.7.9 → 1.8.0

package/dist/components/DocumentViewer.js

@@ -49,7 +49,7 @@ const DocumentViewer = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
             actionConfig = {};
           }
           actionConfig.service = service;
-          // TODO : Implement the invalid paramenter callback
+          // TODO : Implement the invalid parameter callback
           _ServiceCallActionHandler.default.execute(actionConfig, null, null, props.viewId, data => {
             let file = {};
             if (data.payloadBase64) {
@@ -68,6 +68,8 @@ const DocumentViewer = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
             console.error(e);
             setHasLoadingError(true);
             setLoading(false);
+          }, () => {
+            setLoading(false);
           });
         }
       } else {
@@ -127,7 +129,7 @@ const DocumentViewer = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
   }, "Error loading document"), !loading && !hasLoadingError && props.config.fileType === 'application/pdf' && !_Utils.default.isNull(value) && /*#__PURE__*/_react.default.createElement(_PDFViewer.default, {
     file: value,
     onDocumentLoadSuccess: () => {}
-  }), !loading && !hasLoadingError && props.config.fileType === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' && !_Utils.default.isNull(value) && /*#__PURE__*/_react.default.createElement(_WordDocumentViewer.default, {
+  }), !loading && !hasLoadingError && props.config.fileType === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' && (!_Utils.default.isNull(value) || props.config.enableUpload) && /*#__PURE__*/_react.default.createElement(_WordDocumentViewer.default, {
     file: value,
     onDocumentLoadSuccess: () => {},
     valueHandler: wordEditorValueHandler,
@@ -135,7 +137,9 @@ const DocumentViewer = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
     disableRejectChanges: props.config.disableRejectChanges,
     disableAcceptChanges: props.config.disableAcceptChanges,
     readOnly: props.config.readOnly,
-    commentsOnly: props.config.commentsOnly
+    commentsOnly: props.config.commentsOnly,
+    enableUpload: props.config.enableUpload,
+    trackChanges: props.config.trackChanges
   }));
 }));
 var _default = exports.default = DocumentViewer;

package/dist/components/TableCellContent.js

@@ -13,6 +13,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const TableCellContent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const [contentType] = _react.default.useState(props.contentType);
   const [refresher, setRefresher] = _react.default.useState(true);
+  const [editor, setEditor] = _react.default.useState(null);
   const editorValue = _react.default.useRef(null);
   const validate = value => {
     let validator = props.validator;
@@ -64,12 +65,23 @@ const TableCellContent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
   }, [props.row, props.editor]);
   _react.default.useEffect(() => {
     if (!_Utils.default.isNull(props.editor)) {
-      props.editor.id = props.editor.id.replace('.', '_');
-      if (_Utils.default.isNull(props.editor.attributes)) {
-        props.editor.attributes = {};
+      let e = {
+        ...props.editor,
+        id: props.editor.id.replace('.', '_')
+      };
+      if (_Utils.default.isNull(e.attributes)) {
+        e.attributes = {};
       }
-      props.editor.attributes['minWidth'] = 0;
-
+      if (_Utils.default.isNull(e.attributes.style)) {
+        e.attributes.style = {};
+      }
+      if (_Utils.default.isNull(e.attributes.containerStyle)) {
+        e.attributes.containerStyle = {};
+      }
+      e.attributes.style.minWidth = e.attributes.style.minWidth ? e.attributes.style.minWidth : 0;
+      e.attributes.style.width = e.attributes.style.width ? e.attributes.style.width : 'calc(100% - 8px)';
+      e.attributes.containerStyle.minWidth = e.attributes.containerStyle.minWidth ? e.attributes.containerStyle.minWidth : 0;
+      setEditor(e);
       // This forces the editable grid to validate its initial value
       let value = props.row[props.dataBinding];
       valueChangeHandler(_Utils.default.isNull(value) ? null : value);
@@ -131,10 +143,11 @@ const TableCellContent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
               type: "fieldSet",
               attributes: {
                 style: {
-                  "width": "100%"
+                  "width": "100%",
+                  "minWidth": "0"
                 }
               },
-              fields: [props.editor]
+              fields: [editor]
             }]
           }]
         };
@@ -189,6 +202,6 @@ const TableCellContent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
       }
     }
   };
-  return render();
+  return (!props.editor || props.editor && editor) && render();
 }));
 var _default = exports.default = TableCellContent;

package/dist/components/WordDocumentViewer.js

@@ -17,17 +17,9 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 _ej2ReactDocumenteditor.DocumentEditorContainerComponent.Inject(_ej2ReactDocumenteditor.Toolbar);
 const WordDocumentViewer = props => {
   const [container, setContainer] = _react.default.useState(null);
+  const [items, setItems] = _react.default.useState(null);
   const [json, setJson] = _react.default.useState(null);
   const [errorMessage, setErrorMessage] = _react.default.useState(null);
-  let items = ["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", "Break", "InsertFootnote", "Separator", "Find", "Separator", "Comments"];
 
   /*let items = ['Bold', 'Italic', 'Underline', '|', 'Formats', '|', 'CreateLink', '|',
       {
@@ -50,7 +42,22 @@ const WordDocumentViewer = props => {
     props.valueHandler.api = api();
   });
   _react.default.useEffect(() => {
-    if (props.file.base64) {
+    let toolbarItems = ["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", "Break", "InsertFootnote", "Separator", "Find", "Separator", "Comments"];
+    if (props.enableUpload) {
+      toolbarItems.unshift("Open");
+    }
+    setItems(toolbarItems);
+  }, []);
+  _react.default.useEffect(() => {
+    if (props.file?.base64) {
       let base64 = props.file.base64;
       const arrayBuffer = _Utils.default.base64ToArrayBuffer(base64);
       const file = new Blob([arrayBuffer], {
@@ -96,7 +103,7 @@ const WordDocumentViewer = props => {
   _react.default.useEffect(() => {
     if (container && json) {
       container.documentEditor.documentChange = () => {
-        container.documentEditor.enableTrackChanges = true;
+        container.documentEditor.enableTrackChanges = !_Utils.default.isNull(props.trackChanges) ? props.trackChanges : true;
         if (props.commentsOnly) {
           container.documentEditor.editor.enforceProtection('password', 'CommentsOnly');
         } else if (props.readOnly) {
@@ -118,7 +125,7 @@ const WordDocumentViewer = props => {
         }
       });
       container.documentEditor.open(json);
-      container.documentEditor.enableTrackChanges = true;
+      container.documentEditor.enableTrackChanges = !_Utils.default.isNull(props.trackChanges) ? props.trackChanges : true;
       //container.documentEditor.isReadOnly = (props.readOnly || props.commentsOnly);
     }
   }, [json, container]);
@@ -145,7 +152,7 @@ const WordDocumentViewer = props => {
     style: {
       color: 'rgba(255, 255, 255, 0.8)'
     }
-  }, errorMessage))), /*#__PURE__*/_react.default.createElement(_ej2ReactDocumenteditor.DocumentEditorContainerComponent, {
+  }, errorMessage))), items && (_Utils.default.isNull(props.trackChanges) || props.trackChanges === true) && /*#__PURE__*/_react.default.createElement(_ej2ReactDocumenteditor.DocumentEditorContainerComponent, {
     id: "container",
     height: '690px',
     ref: scope => {
@@ -162,6 +169,22 @@ const WordDocumentViewer = props => {
     enableTrackChanges: true,
     serviceUrl: "https://services.syncfusion.com/react/production/api/documenteditor/",
     enableToolbar: !(props.readOnly || props.commentsOnly)
+  }), items && props.trackChanges === false && /*#__PURE__*/_react.default.createElement(_ej2ReactDocumenteditor.DocumentEditorContainerComponent, {
+    id: "container",
+    height: '690px',
+    ref: scope => {
+      setContainer(scope);
+    },
+    created: () => {
+      if (container) {
+        container.resize();
+        container.documentEditor.resize();
+      }
+    },
+    toolbarItems: items,
+    showPropertiesPane: false,
+    serviceUrl: "https://services.syncfusion.com/react/production/api/documenteditor/",
+    enableToolbar: !(props.readOnly || props.commentsOnly)
   }));
 };
 var _default = exports.default = WordDocumentViewer;

package/dist/components/dashboard/components/blackDashboard/sidebar/ModuleMenuSidebar.js

@@ -343,7 +343,8 @@ const ModuleMenuSidebar = props => {
         className: "logo-img",
         style: {
           paddingTop: '16px',
-          paddingBottom: '8px'
+          paddingBottom: '8px',
+          maxWidth: '140px'
         }
       }, /*#__PURE__*/_react.default.createElement("img", {
         src: logo.imgSrc,

package/dist/components/form/FieldSet.js

@@ -498,7 +498,7 @@ const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
           }
         }
         width = colspan / fieldGrid.maxColPerRow * 100;
-        let columnStyle = {
+        let containerStyle = {
           paddingLeft: '0',
           paddingRight: '0',
           marginLeft: '0',
@@ -506,7 +506,7 @@ const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
           minWidth: '320px',
           width: width + '%'
         };
-        let style = field.attributes?.columnStyle ? _Utils.default.mergeObjects(field.attributes?.columnStyle, columnStyle) : columnStyle;
+        let style = field.attributes?.containerStyle ? _Utils.default.mergeObjects(field.attributes?.containerStyle, containerStyle) : containerStyle;
         return /*#__PURE__*/_react.default.createElement("div", {
           key: index,
           className: "col-*-*",

package/dist/components/form/LookupField.js

@@ -23,6 +23,8 @@ const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.
   const [open, setOpen] = _react.default.useState(false);
   const width = props.config.attributes?.style?.width ? props.config.attributes.style.width : "100%";
   const minWidth = props.config.attributes?.style?.minWidth ? props.config.attributes.style.minWidth : "240px";
+  const height = !_Utils.default.isNull(props.config.attributes?.style?.height) ? props.config.attributes.style.height : '52px';
+  const margin = !_Utils.default.isNull(props.config.attributes?.style?.margin) ? props.config.attributes.style.margin : '4px 0';
   const defaultValue = _Utils.default.isNull(props.value) ? '' : props.value;
   const base = props.base;
   const handleClose = () => {
@@ -67,19 +69,43 @@ const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.
     setOpen(true);
   };
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "w-100 lookup"
-  }, /*#__PURE__*/_react.default.createElement("table", {
-    className: "w-100"
-  }, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
-    width: "90%"
+    className: "w-100 lookup row no-margin no-padding",
+    style: {
+      width: width,
+      minWidth: minWidth,
+      margin: margin,
+      height: height
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'col-*-*',
+    style: {
+      width: '72px',
+      marginRight: '8px',
+      height: '100%'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    style: {
+      height: '100%'
+    },
+    variant: 'outlined',
+    onClick: openSearch,
+    disabled: base.disabled,
+    "aria-label": "search"
+  }, "...")), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'col-*-* no-margin no-padding',
+    style: {
+      width: 'calc(100% - 80px)',
+      marginBottom: base.value ? '0' : '8px'
+    }
   }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
     InputProps: {
-      readOnly: true
+      readOnly: true,
+      disableUnderline: true
     },
     id: props.id,
     ref: ref,
     required: base.required,
-    disabled: base.disabled,
+    disabled: true,
     label: !_Utils.default.isNull(props.config.attributes) && !_Utils.default.isNull(props.config.attributes['label']) ? props.config.attributes['label'] : null,
     value: base.value?.__oui_label || base.value?.dataRecordDescription || defaultValue,
     className: props.className,
@@ -88,19 +114,12 @@ const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.
     size: "small",
     margin: "dense",
     style: {
-      minWidth: minWidth,
-      width: width,
-      color: 'secondary'
-    },
-    variant: "outlined"
-  })), /*#__PURE__*/_react.default.createElement("td", {
-    valign: "middle",
-    align: "left"
-  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-    onClick: openSearch,
-    disabled: base.disabled,
-    "aria-label": "search"
-  }, /*#__PURE__*/_react.default.createElement(_Search.default, null)))))), /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+      height: '48px',
+      width: '100%',
+      color: 'secondary',
+      border: 'none'
+    }
+  })), /*#__PURE__*/_react.default.createElement(_Dialog.default, {
     open: open,
     onClose: handleClose,
     "aria-labelledby": "form-dialog-title",

package/dist/components/form/SelectItem.js

@@ -16,9 +16,9 @@ const SelectItemComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_reac
   const base = props.base;
   const [optionsLoaded, setOptionsLoaded] = _react.default.useState(false);
   const [loadFullOptionList, setLoadFullOptionList] = _react.default.useState(false);
-  const minWidth = _Utils.default.getComponentAttribute(props.config, 'minWidth', '240px');
-  const maxWidth = _Utils.default.getComponentAttribute(props.config, 'maxWidth', null);
-  const width = _Utils.default.getComponentAttribute(props.config, 'width', '100%');
+  const width = !_Utils.default.isNull(props.config.attributes?.style?.width) ? props.config.attributes.style.width : "100%";
+  const maxWidth = !_Utils.default.isNull(props.config.attributes?.style?.maxWidth) ? props.config.attributes.style.maxWidth : null;
+  const minWidth = !_Utils.default.isNull(props.config.attributes?.style?.minWidth) ? props.config.attributes.style.minWidth : "240px";
   const defaultValue = _Utils.default.isNull(props.value) ? '' : props.value.id;
   _react.default.useEffect(() => {
     if (!_Utils.default.isNull(base.value) && !optionsLoaded) {

package/dist/components/form/TextField.js

@@ -15,10 +15,10 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 const TextFieldWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const base = props.base;
   const [multiline] = _react.default.useState(props.multiline);
-  const width = props.config.attributes?.style?.width ? props.config.attributes.style.width : "100%";
-  const maxWidth = props.config.attributes?.style?.maxWidth ? props.config.attributes.style.maxWidth : null;
-  const minWidth = props.config.attributes?.style?.minWidth ? props.config.attributes.style.minWidth : "240px";
-  const height = props.config.attributes?.style?.height ? props.config.attributes.style.height : multiline ? '200px' : null;
+  const width = !_Utils.default.isNull(props.config.attributes?.style?.width) ? props.config.attributes.style.width : "100%";
+  const maxWidth = !_Utils.default.isNull(props.config.attributes?.style?.maxWidth) ? props.config.attributes.style.maxWidth : null;
+  const minWidth = !_Utils.default.isNull(props.config.attributes?.style?.minWidth) ? props.config.attributes.style.minWidth : "240px";
+  const height = !_Utils.default.isNull(props.config.attributes?.style?.height) ? props.config.attributes.style.height : multiline ? '200px' : null;
   const rows = height === null ? 4 : height.replace('px', '') / 20 - 1;
   const secondaryColor = (0, _reactRedux.useSelector)(state => state.dashboard.secondaryThemeColor);
   const ThemedTextField = (0, _styles.withStyles)({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agilemotion/oui-react-js",
-  "version": "1.7.9",
+  "version": "1.8.0",
   "files": [
     "dist"
   ],