@agilemotion/oui-react-js 1.3.1 → 1.3.3

package/dist/components/form/FieldSet.js

@@ -13,6 +13,8 @@ var _Observable = _interopRequireDefault(require("../../event/Observable"));
 
 var _TextField = _interopRequireDefault(require("./TextField"));
 
+var _AddressSearch = _interopRequireDefault(require("./AddressSearch"));
+
 var _LookupField = _interopRequireDefault(require("./LookupField"));
 
 var _SelectItem = _interopRequireDefault(require("./SelectItem"));
@@ -31,12 +33,20 @@ var _TransferList = _interopRequireDefault(require("./TransferList"));
 
 var _GridField = _interopRequireDefault(require("./GridField"));
 
+var _ImageEditor = _interopRequireDefault(require("./ImageEditor"));
+
+var _RadioGroup = _interopRequireDefault(require("./RadioGroup"));
+
 var _Event = _interopRequireDefault(require("../../event/Event"));
 
 var _EventType = _interopRequireDefault(require("../../event/EventType"));
 
 var _RestUtils = require("../../RestUtils");
 
+var _SignatureTemplateDesignerField = _interopRequireDefault(require("./SignatureTemplateDesignerField"));
+
+var _ApplicationContext = _interopRequireDefault(require("../../ApplicationContext"));
+
 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; } } }; }
@@ -56,27 +66,22 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const _React$useState = _react.default.useState(null),
         _React$useState2 = _slicedToArray(_React$useState, 2),
-        width = _React$useState2[0],
-        setWidth = _React$useState2[1];
+        fieldGrid = _React$useState2[0],
+        setFieldGrid = _React$useState2[1];
 
-  const _React$useState3 = _react.default.useState(null),
-        _React$useState4 = _slicedToArray(_React$useState3, 2),
-        margin = _React$useState4[0],
-        setMargin = _React$useState4[1];
+  const _React$useState3 = _react.default.useState({}),
+        _React$useState4 = _slicedToArray(_React$useState3, 1),
+        componentHandles = _React$useState4[0];
 
-  const _React$useState5 = _react.default.useState(null),
+  const _React$useState5 = _react.default.useState(_Utils.default.getComponentAttribute(props.config, 'defaultVisibility', false)),
         _React$useState6 = _slicedToArray(_React$useState5, 2),
-        fieldGrid = _React$useState6[0],
-        setFieldGrid = _React$useState6[1];
-
-  const _React$useState7 = _react.default.useState({}),
-        _React$useState8 = _slicedToArray(_React$useState7, 1),
-        componentHandles = _React$useState8[0];
+        visible = _React$useState6[0],
+        setVisible = _React$useState6[1];
 
-  const _React$useState9 = _react.default.useState(true),
-        _React$useState10 = _slicedToArray(_React$useState9, 2),
-        initializing = _React$useState10[0],
-        setInitializing = _React$useState10[1];
+  const _React$useState7 = _react.default.useState(true),
+        _React$useState8 = _slicedToArray(_React$useState7, 2),
+        initializing = _React$useState8[0],
+        setInitializing = _React$useState8[1];
 
   let componentKey = 0;
 
@@ -100,16 +105,9 @@ const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
 
       _Observable.default.addSystemSubscriptions(parsedConfig);
 
-      let width = _Utils.default.getComponentAttribute(props.config, 'width', '60%');
-
-      setWidth(width);
-
-      let margin = _Utils.default.getComponentAttribute(props.config, 'margin', '8px');
-
       let fieldGrid = _Utils.default.getFieldGrid(props.config.attributes, props.config.fields);
 
       setFieldGrid(fieldGrid);
-      setMargin(margin);
       setInitializing(false);
     }
   });
@@ -139,6 +137,25 @@ const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     }
   }
 
+  function refreshComponents() {
+    let properties = Object.getOwnPropertyNames(componentHandles);
+
+    var _iterator2 = _createForOfIteratorHelper(properties),
+        _step2;
+
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        const property = _step2.value;
+        let componentHandle = componentHandles[property];
+        componentHandle.api.refresh();
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+  }
+
   function renderComponent(component) {
     return component.fieldType === 'LOOKUP' ? /*#__PURE__*/_react.default.createElement(_LookupField.default, {
       keyHandler: props.keyHandler,
@@ -150,7 +167,8 @@ const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
       loadCompleteHandler: props.loadCompleteHandler,
       valueChangeHandler: () => fireChangeEvent(),
       values: props.values,
-      viewId: props.viewId
+      viewId: props.viewId,
+      key: componentKey++
     }) : component.fieldType === 'TEXT_FIELD' ? /*#__PURE__*/_react.default.createElement(_TextField.default, {
       keyHandler: props.keyHandler,
       config: component,
@@ -161,7 +179,8 @@ const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
       handle: createComponentHandle(component),
       ref: /*#__PURE__*/_react.default.createRef(),
       values: props.values,
-      viewId: props.viewId
+      viewId: props.viewId,
+      key: componentKey++
     }) : component.fieldType === 'PASSWORD' ? /*#__PURE__*/_react.default.createElement(_TextField.default, {
       keyHandler: props.keyHandler,
       config: component,
@@ -173,7 +192,8 @@ const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
       handle: createComponentHandle(component),
       ref: /*#__PURE__*/_react.default.createRef(),
       values: props.values,
-      viewId: props.viewId
+      viewId: props.viewId,
+      key: componentKey++
     }) : component.fieldType === 'TEXT_AREA' ? /*#__PURE__*/_react.default.createElement(_TextField.default, {
       keyHandler: props.keyHandler,
       config: component,
@@ -185,7 +205,21 @@ const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
       handle: createComponentHandle(component),
       ref: /*#__PURE__*/_react.default.createRef(),
       values: props.values,
-      viewId: props.viewId
+      viewId: props.viewId,
+      key: componentKey++
+    }) : component.fieldType === 'ADDRESS_SEARCH' ? /*#__PURE__*/_react.default.createElement(_AddressSearch.default, {
+      keyHandler: props.keyHandler,
+      config: component,
+      multiline: true,
+      loadCompleteHandler: props.loadCompleteHandler,
+      valueChangeHandler: () => fireChangeEvent(),
+      form: props.form,
+      parentId: props.parentId,
+      handle: createComponentHandle(component),
+      ref: /*#__PURE__*/_react.default.createRef(),
+      values: props.values,
+      viewId: props.viewId,
+      key: componentKey++
     }) : component.fieldType === 'SELECT' ? /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
       keyHandler: props.keyHandler,
       config: component,
@@ -196,7 +230,8 @@ const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
       loadCompleteHandler: props.loadCompleteHandler,
       valueChangeHandler: () => fireChangeEvent(),
       values: props.values,
-      viewId: props.viewId
+      viewId: props.viewId,
+      key: componentKey++
     }) : component.fieldType === 'DATE' ? /*#__PURE__*/_react.default.createElement(_DatePicker.default, {
       keyHandler: props.keyHandler,
       config: component,
@@ -207,7 +242,8 @@ const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
       loadCompleteHandler: props.loadCompleteHandler,
       valueChangeHandler: () => fireChangeEvent(),
       values: props.values,
-      viewId: props.viewId
+      viewId: props.viewId,
+      key: componentKey++
     }) : component.fieldType === 'CHECKBOX' ? /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
       keyHandler: props.keyHandler,
       config: component,
@@ -218,7 +254,8 @@ const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
       loadCompleteHandler: props.loadCompleteHandler,
       valueChangeHandler: () => fireChangeEvent(),
       values: props.values,
-      viewId: props.viewId
+      viewId: props.viewId,
+      key: componentKey++
     }) : component.fieldType === 'LABEL' ? /*#__PURE__*/_react.default.createElement(_LabelField.default, {
       keyHandler: props.keyHandler,
       config: component,
@@ -229,7 +266,8 @@ const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
       loadCompleteHandler: props.loadCompleteHandler,
       valueChangeHandler: () => fireChangeEvent(),
       values: props.values,
-      viewId: props.viewId
+      viewId: props.viewId,
+      key: componentKey++
     }) : component.fieldType === 'FILE_UPLOAD' ? /*#__PURE__*/_react.default.createElement(_UploadField.default, {
       keyHandler: props.keyHandler,
       config: component,
@@ -240,7 +278,8 @@ const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
       loadCompleteHandler: props.loadCompleteHandler,
       valueChangeHandler: () => fireChangeEvent(),
       values: props.values,
-      viewId: props.viewId
+      viewId: props.viewId,
+      key: componentKey++
     }) : component.fieldType === 'IMAGE_UPLOAD' ? /*#__PURE__*/_react.default.createElement(_UploadField.default, {
       keyHandler: props.keyHandler,
       config: component,
@@ -252,7 +291,8 @@ const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
       loadCompleteHandler: props.loadCompleteHandler,
       valueChangeHandler: () => fireChangeEvent(),
       values: props.values,
-      viewId: props.viewId
+      viewId: props.viewId,
+      key: componentKey++
     }) : component.fieldType === 'TRANSFER_LIST' ? /*#__PURE__*/_react.default.createElement(_TransferList.default, {
       keyHandler: props.keyHandler,
       config: component,
@@ -263,7 +303,8 @@ const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
       loadCompleteHandler: props.loadCompleteHandler,
       valueChangeHandler: () => fireChangeEvent(),
       values: props.values,
-      viewId: props.viewId
+      viewId: props.viewId,
+      key: componentKey++
     }) : component.fieldType === 'GRID' ? /*#__PURE__*/_react.default.createElement(_GridField.default, {
       keyHandler: props.keyHandler,
       config: component,
@@ -274,7 +315,8 @@ const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
       loadCompleteHandler: props.loadCompleteHandler,
       valueChangeHandler: () => fireChangeEvent(),
       values: props.values,
-      viewId: props.viewId
+      viewId: props.viewId,
+      key: componentKey++
     }) : component.fieldType === 'TIME' ? /*#__PURE__*/_react.default.createElement(_TimePicker.default, {
       keyHandler: props.keyHandler,
       config: component,
@@ -285,16 +327,73 @@ const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
       loadCompleteHandler: props.loadCompleteHandler,
       valueChangeHandler: () => fireChangeEvent(),
       values: props.values,
-      viewId: props.viewId
+      viewId: props.viewId,
+      key: componentKey++
+    }) : component.fieldType === 'IMAGE_EDITOR' ? /*#__PURE__*/_react.default.createElement(_ImageEditor.default, {
+      keyHandler: props.keyHandler,
+      config: component,
+      form: props.form,
+      parentId: props.parentId,
+      handle: createComponentHandle(component),
+      ref: /*#__PURE__*/_react.default.createRef(),
+      loadCompleteHandler: props.loadCompleteHandler,
+      valueChangeHandler: () => fireChangeEvent(),
+      values: props.values,
+      viewId: props.viewId,
+      key: componentKey++
+    }) : component.fieldType === 'RADIO_GROUP' ? /*#__PURE__*/_react.default.createElement(_RadioGroup.default, {
+      keyHandler: props.keyHandler,
+      config: component,
+      form: props.form,
+      parentId: props.parentId,
+      handle: createComponentHandle(component),
+      ref: /*#__PURE__*/_react.default.createRef(),
+      loadCompleteHandler: props.loadCompleteHandler,
+      valueChangeHandler: () => fireChangeEvent(),
+      values: props.values,
+      viewId: props.viewId,
+      key: componentKey++
+    }) : component.fieldType === 'SIGNATURE_TEMPLATE_DESIGNER' ? /*#__PURE__*/_react.default.createElement(_SignatureTemplateDesignerField.default, {
+      keyHandler: props.keyHandler,
+      config: component,
+      form: props.form,
+      parentId: props.parentId,
+      handle: createComponentHandle(component),
+      ref: /*#__PURE__*/_react.default.createRef(),
+      loadCompleteHandler: props.loadCompleteHandler,
+      valueChangeHandler: () => fireChangeEvent(),
+      values: props.values,
+      viewId: props.viewId,
+      key: componentKey++
     }) : /*#__PURE__*/_react.default.createElement("div", null, "Unsupported fieldset component type " + component.fieldType + ' - ' + component.id);
   }
 
   const api = () => {
     return {
-      getId: () => {
+      get id() {
         return props.config.id;
       },
 
+      get fieldDataBindings() {
+        let fieldNames = [];
+
+        var _iterator3 = _createForOfIteratorHelper(props.config.fields),
+            _step3;
+
+        try {
+          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+            const field = _step3.value;
+            fieldNames.push(!_Utils.default.isNull(field.dataBinding) ? field.dataBinding : field.id);
+          }
+        } catch (err) {
+          _iterator3.e(err);
+        } finally {
+          _iterator3.f();
+        }
+
+        return fieldNames;
+      },
+
       set disabled(disabled) {
         setDisabled(disabled);
       },
@@ -302,43 +401,119 @@ const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
       clear() {
         let properties = Object.getOwnPropertyNames(componentHandles);
 
-        var _iterator2 = _createForOfIteratorHelper(properties),
-            _step2;
+        var _iterator4 = _createForOfIteratorHelper(properties),
+            _step4;
 
         try {
-          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-            const property = _step2.value;
+          for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+            const property = _step4.value;
             let componentRef = componentHandles[property];
-            componentRef.current.value = null;
+            componentRef.api.value = null;
           }
         } catch (err) {
-          _iterator2.e(err);
+          _iterator4.e(err);
         } finally {
-          _iterator2.f();
+          _iterator4.f();
         }
       },
 
       getChildren: () => {
         return [];
       },
-      loadData: actionConfig => {
-        let service = !_Utils.default.isNull(actionConfig.dataService) ? actionConfig.dataService : !_Utils.default.isNull(props.config) ? props.config.dataService : null;
 
-        if (!_Utils.default.isNull(service)) {
-          (0, _RestUtils.invokeRpc)(service, ref.current, props.viewId, result => {
-            if (!_Utils.default.isNull(result) && !_Utils.default.isNull(result.data)) {
-              props.form().bindData(result.data);
-            }
-          }, e => {
-            props.console.error(e);
-
-            _Utils.default.publishSystemErrorMessage(props.viewId);
-          }, parameter => {});
-          return true;
+      set model(model) {
+        var _iterator5 = _createForOfIteratorHelper(props.config.fields),
+            _step5;
+
+        try {
+          for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+            const field = _step5.value;
+            props.form().model[field.id] = model[field.id];
+            let componentRef = componentHandles[field.id];
+            componentRef.api.value = model[field.id];
+          }
+        } catch (err) {
+          _iterator5.e(err);
+        } finally {
+          _iterator5.f();
+        }
+      },
+
+      get value() {
+        let value = {}; // TODO : First check if the form binding is map and process accordingly
+
+        let map = {};
+        let formValue = props.form().value;
+
+        if (formValue === null) {
+          return null;
+        }
+
+        var _iterator6 = _createForOfIteratorHelper(props.config.fields),
+            _step6;
+
+        try {
+          for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+            const field = _step6.value;
+            map[field.id] = formValue.map[field.id];
+          }
+        } catch (err) {
+          _iterator6.e(err);
+        } finally {
+          _iterator6.f();
+        }
+
+        value.map = map;
+        return value;
+      },
+
+      loadData: (actionConfig, eventData) => {
+        let service = !_Utils.default.isNull(actionConfig.dataService) ? actionConfig.dataService : !_Utils.default.isNull(props.config) ? props.config.dataService : null;
+        let componentValue = !_Utils.default.isNull(props.config.value) ? props.config.value : actionConfig !== null ? actionConfig.value : null;
+
+        if (componentValue) {
+          let isEventData = componentValue.toString().startsWith("$event.data");
+
+          let isEpression = _ApplicationContext.default.isExpression(componentValue);
+
+          let val = isEventData || isEpression ? _ApplicationContext.default.resolveExpressionValue(componentValue, eventData) : componentValue;
+          props.form().bindData(val);
+          let event = new _Event.default(props.handle, props.viewId, val);
+
+          _Observable.default.fireEvent(_EventType.default.DATA_ARRIVED, event);
+        } else {
+          if (!_Utils.default.isNull(service)) {
+            let method = service.type === 'remoteObjectProxy' ? _RestUtils.invokeRpc : _RestUtils.invokeRest;
+            method(service, ref.current, props.viewId, result => {
+              if (!_Utils.default.isNull(result)) {
+                let data = service.type === 'remoteObjectProxy' ? result.data : result;
+
+                if (data) {
+                  props.form().bindData(data);
+                  let event = new _Event.default(props.handle, props.viewId, data);
+
+                  _Observable.default.fireEvent(_EventType.default.DATA_ARRIVED, event);
+                }
+              }
+            }, e => {
+              props.console.error(e);
+
+              _Utils.default.publishSystemErrorMessage(props.viewId);
+            }, parameter => {});
+            return true;
+          }
         }
       },
 
       refresh() {
+        if (!_Utils.default.isNull(props.config) && !_Utils.default.isNull(props.config.visible)) {
+          setVisible(_Utils.default.evaluateBooleanExpression(props.config.visible, props.config.id));
+          refreshComponents();
+        } else {
+          setVisible(true);
+          refreshComponents();
+        }
+
         if (!_Utils.default.isNull(props.config) && !_Utils.default.isNull(props.config.disabled)) {
           setDisabled(_Utils.default.evaluateBooleanExpression(props.config.disabled, props.config.id));
         }
@@ -348,21 +523,21 @@ const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
   };
 
   function render(fieldSet) {
-    return _Utils.default.isNull(fieldSet.fields) || fieldSet.fields.length === 0 ? /*#__PURE__*/_react.default.createElement("div", null, " Error: A fieldSet must have fields") : /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        padding: _Utils.default.getComponentAttribute(fieldSet, 'padding', '16px')
-      }
-    }, fieldGrid.rows.map(row => {
+    return _Utils.default.isNull(fieldSet.fields) || fieldSet.fields.length === 0 ? /*#__PURE__*/_react.default.createElement("div", null, " Error: A fieldSet must have fields") : /*#__PURE__*/_react.default.createElement("div", null, fieldGrid.rows.map(row => {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "row",
-        key: componentKey++
+        key: componentKey++,
+        style: {
+          marginLeft: '0',
+          marginRight: '0'
+        }
       }, row.fields.map(field => {
         return /*#__PURE__*/_react.default.createElement("div", {
+          key: componentKey++,
           className: "col",
-          key: field.id,
           style: {
-            textAlign: 'left',
-            display: _Utils.default.getComponentAttribute(field, 'hidden', false) === true ? 'none' : 'block'
+            paddingLeft: '0',
+            paddingRight: '0'
           }
         }, renderComponent(field));
       }));
@@ -371,11 +546,11 @@ const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
 
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
-    style: {
-      width: width,
-      margin: margin,
-      minWidth: _Utils.default.getComponentAttribute(props.config, 'minWidth', null)
-    }
+    style: _Utils.default.mergeStyles({
+      display: visible ? 'block' : 'none',
+      width: '60%',
+      margin: '0'
+    }, props.config)
   }, !initializing && !_Utils.default.isNull(props.config.attributes) && !_Utils.default.isNull(props.config.attributes['label']) ? /*#__PURE__*/_react.default.createElement("div", {
     className: 'fieldSetTitle'
   }, props.config.attributes['label']) : null, !initializing && !_Utils.default.isNull(fieldGrid) ? render(props.config) : null);