@bpmn-io/form-js-editor 0.6.1 → 0.7.2

package/dist/index.es.js

@@ -1,7 +1,7 @@
-import Ids from 'ids';
-import { isArray, isFunction, isNumber, bind, assign, debounce, get, isUndefined, set, forEach, isObject, uniqueBy, isString } from 'min-dash';
 import { FormFieldRegistry as FormFieldRegistry$1, clone, Default, FormContext, FormRenderContext, FormComponent, FormFields, createFormContainer, createInjector, schemaVersion } from '@bpmn-io/form-js-viewer';
 export { schemaVersion } from '@bpmn-io/form-js-viewer';
+import Ids from 'ids';
+import { isArray, isFunction, isNumber, bind, assign, debounce, get, isUndefined, set, has, forEach, isObject, uniqueBy, isString } from 'min-dash';
 import { createContext, render } from 'preact';
 import { useContext, useRef, useEffect, useMemo, useState, useCallback } from 'preact/hooks';
 import React from 'preact/compat';
@@ -1156,7 +1156,7 @@ function TextInput(props) {
   const prevValue = usePrevious(value);
   const [cachedValue, setCachedValue] = useState(null);
   const [error, setError] = useState(null);
-  useEffect(() => setError(validate(value)), [value]);
+  useEffect(() => setError(validate(value)), [validate, value]);
   const onInput = useDebounce(event => {
     const value = event.target.value;
     const error = validate(value);
@@ -1670,7 +1670,7 @@ function DisabledEntry(props) {
   } = props;
 
   const onChange = value => {
-    editField(field, 'disabled', value);
+    editField(field, ['disabled'], value);
   };
 
   return jsx(CheckboxInputEntry, {
@@ -1806,9 +1806,18 @@ function ValueEntry(props) {
   const {
     editField,
     field,
-    index
+    index,
+    validate
   } = props;
 
+  const getLabel = () => {
+    return get(field, ['values', index, 'label']);
+  };
+
+  const getValue = () => {
+    return get(field, ['values', index, 'value']);
+  };
+
   const onChange = key => {
     const values = get(field, ['values']);
     return value => {
@@ -1821,14 +1830,93 @@ function ValueEntry(props) {
       id: `value-label-${index}`,
       label: "Label",
       onChange: onChange('label'),
-      value: get(field, ['values', index, 'label'])
+      value: getLabel()
+    }), jsx(TextInputEntry, {
+      id: `value-value-${index}`,
+      label: "Value",
+      onChange: onChange('value'),
+      value: getValue(),
+      validate: validate(getValue())
+    })]
+  });
+}
+
+function CustomValueEntry(props) {
+  const {
+    editField,
+    field,
+    index,
+    validate
+  } = props;
+
+  const getKey = () => {
+    return Object.keys(get(field, ['properties']))[index];
+  };
+
+  const getValue = () => {
+    return get(field, ['properties', getKey()]);
+  };
+
+  const onChange = key => {
+    const properties = get(field, ['properties']);
+    return value => {
+      if (key === 'value') {
+        editField(field, 'properties', updateValue(properties, getKey(), value));
+      } else if (key === 'key') {
+        editField(field, 'properties', updateKey(properties, getKey(), value));
+      }
+    };
+  };
+
+  return jsxs(Fragment, {
+    children: [jsx(TextInputEntry, {
+      id: `value-key-${index}`,
+      label: "Key",
+      onChange: onChange('key'),
+      value: getKey(),
+      validate: validate(getKey())
     }), jsx(TextInputEntry, {
       id: `value-value-${index}`,
       label: "Value",
       onChange: onChange('value'),
-      value: get(field, ['values', index, 'value'])
+      value: getValue()
     })]
   });
+} // helpers //////////
+
+/**
+ * Returns copy of object with updated value.
+ *
+ * @param {Object} properties
+ * @param {string} key
+ * @param {string} value
+ *
+ * @returns {Object}
+ */
+
+function updateValue(properties, key, value) {
+  return { ...properties,
+    [key]: value
+  };
+}
+/**
+ * Returns copy of object with updated key.
+ *
+ * @param {Object} properties
+ * @param {string} oldKey
+ * @param {string} newKey
+ *
+ * @returns {Object}
+ */
+
+
+function updateKey(properties, oldKey, newKey) {
+  return Object.entries(properties).reduce((newProperties, entry) => {
+    const [key, value] = entry;
+    return { ...newProperties,
+      [key === oldKey ? newKey : key]: value
+    };
+  }, {});
 }
 
 function GeneralGroup(field, editField) {
@@ -1939,10 +2027,10 @@ function ValidationGroup(field, editField) {
       onChange: onChange('maxLength'),
       value: get(field, ['validate', 'maxLength'])
     }), jsx(TextInputEntry, {
-      id: "regularExpressionPattern",
+      id: "pattern",
       label: "Regular Expression Pattern",
-      onChange: onChange('regularExpressionPattern'),
-      value: get(field, ['validate', 'regularExpressionPattern'])
+      onChange: onChange('pattern'),
+      value: get(field, ['validate', 'pattern'])
     }));
   }
 
@@ -1973,13 +2061,32 @@ function ValuesGroup(field, editField) {
   } = field;
 
   const addEntry = () => {
+    const index = values.length + 1;
     const entry = {
-      label: 'Value',
-      value: 'value'
+      label: `Value ${index}`,
+      value: `value${index}`
     };
     editField(field, ['values'], arrayAdd$1(values, values.length, entry));
   };
 
+  const validateFactory = key => {
+    return value => {
+      if (value === key) {
+        return;
+      }
+
+      if (isUndefined(value) || !value.length) {
+        return 'Must not be empty.';
+      }
+
+      const isValueAssigned = values.find(entry => entry.value === value);
+
+      if (isValueAssigned) {
+        return 'Must be unique.';
+      }
+    };
+  };
+
   const hasEntries = values.length > 0;
   return jsx(Group, {
     label: "Values",
@@ -2000,13 +2107,92 @@ function ValuesGroup(field, editField) {
         children: jsx(ValueEntry, {
           editField: editField,
           field: field,
-          index: index
+          index: index,
+          validate: validateFactory
         })
       }, `${id}-${index}`);
     })
   });
 }
 
+function CustomValuesGroup(field, editField) {
+  const {
+    id,
+    properties = {}
+  } = field;
+
+  const addEntry = () => {
+    const index = Object.keys(properties).length + 1;
+    const key = `key${index}`,
+          value = 'value';
+    editField(field, ['properties'], { ...properties,
+      [key]: value
+    });
+  };
+
+  const validateFactory = key => {
+    return value => {
+      if (value === key) {
+        return;
+      }
+
+      if (isUndefined(value) || !value.length) {
+        return 'Must not be empty.';
+      }
+
+      if (has(properties, value)) {
+        return 'Must be unique.';
+      }
+    };
+  };
+
+  const hasEntries = Object.keys(properties).length > 0;
+  return jsx(Group, {
+    label: "Custom Properties",
+    addEntry: addEntry,
+    hasEntries: hasEntries,
+    children: Object.keys(properties).map((key, index) => {
+      const removeEntry = () => {
+        editField(field, ['properties'], removeKey(properties, key));
+      };
+
+      return jsx(CollapsibleEntry, {
+        label: key,
+        removeEntry: removeEntry,
+        children: jsx(CustomValueEntry, {
+          editField: editField,
+          field: field,
+          index: index,
+          validate: validateFactory
+        })
+      }, `${id}-${index}`);
+    })
+  });
+} // helpers //////////
+
+/**
+ * Returns copy of object without key.
+ *
+ * @param {Object} properties
+ * @param {string} oldKey
+ *
+ * @returns {Object}
+ */
+
+function removeKey(properties, oldKey) {
+  return Object.entries(properties).reduce((newProperties, entry) => {
+    const [key, value] = entry;
+
+    if (key === oldKey) {
+      return newProperties;
+    }
+
+    return { ...newProperties,
+      [key]: value
+    };
+  }, {});
+}
+
 const labelsByType = {
   button: 'BUTTON',
   checkbox: 'CHECKBOX',
@@ -2033,6 +2219,10 @@ function getGroups(field, editField) {
     groups.push(ValidationGroup(field, editField));
   }
 
+  if (type !== 'default') {
+    groups.push(CustomValuesGroup(field, editField));
+  }
+
   return groups;
 }
 
@@ -4466,6 +4656,10 @@ const ids = new Ids([32, 36, 1]);
  *   properties: FormEditorProperties,
  *   schema: Schema
  * } } State
+ *
+ * @typedef { (type:string, priority:number, handler:Function) => void } OnEventWithPriority
+ * @typedef { (type:string, handler:Function) => void } OnEventWithOutPriority
+ * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
  */
 
 /**
@@ -4478,10 +4672,16 @@ class FormEditor {
    * @param {FormEditorOptions} options
    */
   constructor(options = {}) {
+    /**
+     * @public
+     * @type {OnEventType}
+     */
+    this.on = this._onEvent;
     /**
      * @public
      * @type {String}
      */
+
     this._id = ids.next();
     /**
      * @private
@@ -4654,16 +4854,6 @@ class FormEditor {
       properties
     });
   }
-  /**
-   * @param {string} type
-   * @param {number} priority
-   * @param {Function} handler
-   */
-
-
-  on(type, priority, handler) {
-    this.get('eventBus').on(type, priority, handler);
-  }
   /**
    * @param {string} type
    * @param {Function} handler
@@ -4736,6 +4926,14 @@ class FormEditor {
   _getModules() {
     return [ModelingModule, EditorActionsModule, KeyboardModule, SelectionModule];
   }
+  /**
+   * @internal
+   */
+
+
+  _onEvent(type, priority, handler) {
+    this.get('eventBus').on(type, priority, handler);
+  }
 
 } // helpers //////////