@bpmn-io/form-js-viewer 0.4.4 → 0.7.0

package/dist/index.es.js

@@ -1,5 +1,5 @@
-import { isArray, isFunction, isNumber, bind, assign, get, set, isString } from 'min-dash';
 import Ids from 'ids';
+import { isArray, isFunction, isNumber, bind, assign, isNil, get, isUndefined, set, isString } from 'min-dash';
 import snarkdown from '@bpmn-io/snarkdown';
 import { jsx, jsxs } from 'preact/jsx-runtime';
 import { useContext, useState, useCallback } from 'preact/hooks';
@@ -600,7 +600,7 @@ class Validator {
       errors = [...errors, `Field must match pattern ${validate.pattern}.`];
     }
 
-    if (validate.required && (typeof value === 'undefined' || value === '')) {
+    if (validate.required && (isNil(value) || value === '')) {
       errors = [...errors, 'Field is required.'];
     }
 
@@ -716,8 +716,8 @@ class Importer {
     const warnings = [];
 
     try {
-      const importedData = clone(data);
-      const importedSchema = this.importFormField(clone(schema), importedData);
+      const importedSchema = this.importFormField(clone(schema)),
+            importedData = this.importData(clone(data));
       return {
         warnings,
         schema: importedSchema,
@@ -730,14 +730,13 @@ class Importer {
   }
   /**
    * @param {any} formField
-   * @param {Object} [data]
    * @param {string} [parentId]
    *
-   * @return {any} field
+   * @return {any} importedField
    */
 
 
-  importFormField(formField, data = {}, parentId) {
+  importFormField(formField, parentId) {
     const {
       components,
       key,
@@ -760,10 +759,13 @@ class Importer {
         throw new Error(`form field with key <${key}> already exists`);
       }
 
-      this._formFieldRegistry._keys.claim(key, formField); // set form field path
+      this._formFieldRegistry._keys.claim(key, formField); // TODO: buttons should not have key
 
 
-      formField._path = [key];
+      if (type !== 'button') {
+        // set form field path
+        formField._path = [key];
+      }
     }
 
     if (id) {
@@ -781,17 +783,44 @@ class Importer {
     this._formFieldRegistry.add(formField);
 
     if (components) {
-      this.importFormFields(components, data, id);
+      this.importFormFields(components, id);
     }
 
     return formField;
   }
 
-  importFormFields(components, data = {}, parentId) {
+  importFormFields(components, parentId) {
     components.forEach(component => {
-      this.importFormField(component, data, parentId);
+      this.importFormField(component, parentId);
     });
   }
+  /**
+   * @param {Object} data
+   *
+   * @return {Object} importedData
+   */
+
+
+  importData(data) {
+    return this._formFieldRegistry.getAll().reduce((importedData, formField) => {
+      const {
+        defaultValue,
+        _path,
+        type
+      } = formField;
+
+      if (!_path) {
+        return importedData;
+      } // (1) try to get value from data
+      // (2) try to get default value from form field
+      // (3) get empty value from form field
+
+
+      return { ...importedData,
+        [_path[0]]: get(data, _path, isUndefined(defaultValue) ? this._formFields.get(type).emptyValue : defaultValue)
+      };
+    }, {});
+  }
 
 }
 Importer.$inject = ['formFieldRegistry', 'formFields'];
@@ -933,7 +962,11 @@ function formFieldClasses(type, errors = []) {
 
   return classes.join(' ');
 }
-function prefixId(id) {
+function prefixId(id, formId) {
+  if (formId) {
+    return `fjs-form-${formId}-${id}`;
+  }
+
   return `fjs-form-${id}`;
 }
 function markdownToHTML(markdown) {
@@ -977,6 +1010,32 @@ Button.type = type$6;
 Button.label = 'Button';
 Button.keyed = true;
 
+const FormRenderContext = createContext({
+  Empty: props => {
+    return null;
+  },
+  Children: props => {
+    return props.children;
+  },
+  Element: props => {
+    return props.children;
+  }
+});
+
+/**
+ * @param {string} type
+ * @param {boolean} [strict]
+ *
+ * @returns {any}
+ */
+
+function getService(type, strict) {}
+
+const FormContext = createContext({
+  getService,
+  formId: null
+});
+
 function Description(props) {
   const {
     description
@@ -1052,17 +1111,20 @@ function Checkbox(props) {
     });
   };
 
+  const {
+    formId
+  } = useContext(FormContext);
   return jsxs("div", {
     class: formFieldClasses(type$5, errors),
     children: [jsx(Label, {
-      id: prefixId(id),
+      id: prefixId(id, formId),
       label: label,
       required: false,
       children: jsx("input", {
         checked: value,
         class: "fjs-input",
         disabled: disabled,
-        id: prefixId(id),
+        id: prefixId(id, formId),
         type: "checkbox",
         onChange: onChange
       })
@@ -1082,31 +1144,7 @@ Checkbox.create = function (options = {}) {
 Checkbox.type = type$5;
 Checkbox.label = 'Checkbox';
 Checkbox.keyed = true;
-
-const FormRenderContext = createContext({
-  Empty: props => {
-    return null;
-  },
-  Children: props => {
-    return props.children;
-  },
-  Element: props => {
-    return props.children;
-  }
-});
-
-/**
- * @param {string} type
- * @param {boolean} [strict]
- *
- * @returns {any}
- */
-
-function getService(type, strict) {}
-
-const FormContext = createContext({
-  getService
-});
+Checkbox.emptyValue = false;
 
 function useService (type, strict) {
   const {
@@ -1347,20 +1385,23 @@ function Number(props) {
     const parsedValue = parseInt(target.value, 10);
     props.onChange({
       field,
-      value: isNaN(parsedValue) ? undefined : parsedValue
+      value: isNaN(parsedValue) ? null : parsedValue
     });
   };
 
+  const {
+    formId
+  } = useContext(FormContext);
   return jsxs("div", {
     class: formFieldClasses(type$4, errors),
     children: [jsx(Label, {
-      id: prefixId(id),
+      id: prefixId(id, formId),
       label: label,
       required: required
     }), jsx("input", {
       class: "fjs-input",
       disabled: disabled,
-      id: prefixId(id),
+      id: prefixId(id, formId),
       onInput: onChange,
       type: "number",
       value: value || ''
@@ -1380,6 +1421,7 @@ Number.create = function (options = {}) {
 Number.type = type$4;
 Number.keyed = true;
 Number.label = 'Number';
+Number.emptyValue = null;
 
 const type$3 = 'radio';
 function Radio(props) {
@@ -1407,6 +1449,9 @@ function Radio(props) {
     });
   };
 
+  const {
+    formId
+  } = useContext(FormContext);
   return jsxs("div", {
     class: formFieldClasses(type$3, errors),
     children: [jsx(Label, {
@@ -1414,18 +1459,18 @@ function Radio(props) {
       required: required
     }), values.map((v, index) => {
       return jsx(Label, {
-        id: prefixId(`${id}-${index}`),
+        id: prefixId(`${id}-${index}`, formId),
         label: v.label,
         required: false,
         children: jsx("input", {
           checked: v.value === value,
           class: "fjs-input",
           disabled: disabled,
-          id: prefixId(`${id}-${index}`),
+          id: prefixId(`${id}-${index}`, formId),
           type: "radio",
           onClick: () => onChange(v.value)
         })
-      }, v.value);
+      }, `${id}-${index}`);
     }), jsx(Description, {
       description: description
     }), jsx(Errors, {
@@ -1447,6 +1492,7 @@ Radio.create = function (options = {}) {
 Radio.type = type$3;
 Radio.label = 'Radio';
 Radio.keyed = true;
+Radio.emptyValue = null;
 
 const type$2 = 'select';
 function Select(props) {
@@ -1472,29 +1518,32 @@ function Select(props) {
   }) => {
     props.onChange({
       field,
-      value: target.value === '' ? undefined : target.value
+      value: target.value === '' ? null : target.value
     });
   };
 
+  const {
+    formId
+  } = useContext(FormContext);
   return jsxs("div", {
     class: formFieldClasses(type$2, errors),
     children: [jsx(Label, {
-      id: prefixId(id),
+      id: prefixId(id, formId),
       label: label,
       required: required
     }), jsxs("select", {
       class: "fjs-select",
       disabled: disabled,
-      id: prefixId(id),
+      id: prefixId(id, formId),
       onChange: onChange,
       value: value || '',
       children: [jsx("option", {
         value: ""
-      }), values.map(v => {
+      }), values.map((v, index) => {
         return jsx("option", {
           value: v.value,
           children: v.label
-        }, v.value);
+        }, `${id}-${index}`);
       })]
     }), jsx(Description, {
       description: description
@@ -1517,6 +1566,7 @@ Select.create = function (options = {}) {
 Select.type = type$2;
 Select.label = 'Select';
 Select.keyed = true;
+Select.emptyValue = null;
 
 const type$1 = 'text';
 function Text(props) {
@@ -1572,16 +1622,19 @@ function Textfield(props) {
     });
   };
 
+  const {
+    formId
+  } = useContext(FormContext);
   return jsxs("div", {
     class: formFieldClasses(type, errors),
     children: [jsx(Label, {
-      id: prefixId(id),
+      id: prefixId(id, formId),
       label: label,
       required: required
     }), jsx("input", {
       class: "fjs-input",
       disabled: disabled,
-      id: prefixId(id),
+      id: prefixId(id, formId),
       onInput: onChange,
       type: "text",
       value: value
@@ -1601,6 +1654,7 @@ Textfield.create = function (options = {}) {
 Textfield.type = type;
 Textfield.label = 'Text Field';
 Textfield.keyed = true;
+Textfield.emptyValue = '';
 
 const formFields = [Button, Checkbox, Default, Number, Radio, Select, Text, Textfield];
 
@@ -1631,8 +1685,9 @@ function Renderer(config, eventBus, form, injector) {
     const formContext = {
       getService(type, strict = true) {
         return injector.get(type, strict);
-      }
+      },
 
+      formId: form._id
     };
     eventBus.on('changed', newState => {
       setState(newState);
@@ -1712,6 +1767,7 @@ var core = {
  * } } State
  */
 
+const ids = new Ids([32, 36, 1]);
 /**
  * The form.
  */
@@ -1722,10 +1778,16 @@ class Form {
    * @param {FormOptions} options
    */
   constructor(options = {}) {
+    /**
+     * @public
+     * @type {String}
+     */
+    this._id = ids.next();
     /**
      * @private
      * @type {Element}
      */
+
     this._container = createFormContainer();
     const {
       container,
@@ -1834,21 +1896,22 @@ class Form {
       throw new Error('form is read-only');
     }
 
-    const formFieldRegistry = this.get('formFieldRegistry'); // do not submit disabled form fields
-
+    const formFieldRegistry = this.get('formFieldRegistry');
     const data = formFieldRegistry.getAll().reduce((data, field) => {
       const {
         disabled,
         _path
-      } = field;
+      } = field; // do not submit disabled form fields
 
-      if (disabled) {
-        // strip disabled field value
-        set(data, _path, undefined);
+      if (disabled || !_path) {
+        return data;
       }
 
-      return data;
-    }, clone(this._getState().data));
+      const value = get(this._getState().data, _path);
+      return { ...data,
+        [_path[0]]: value
+      };
+    }, {});
     const errors = this.validate();
 
     this._emit('submit', {
@@ -2072,7 +2135,7 @@ class Form {
 
 }
 
-const schemaVersion = 2;
+const schemaVersion = 4;
 /**
  * @typedef { import('./types').CreateFormOptions } CreateFormOptions
  */