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

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import Ids from 'ids';
-import { isArray, isFunction, isNumber, bind, assign, debounce, get, isUndefined, set, forEach, isObject, uniqueBy, isString } from 'min-dash';
+import { isArray, isFunction, isNumber, bind, assign, debounce, get, isUndefined, set, has, 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 { createContext, render } from 'preact';
@@ -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);
@@ -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,16 +1830,95 @@ 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: get(field, ['values', index, '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: 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) {
   const {
     type
@@ -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,11 +2107,90 @@ 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 = {
@@ -2033,6 +2219,10 @@ function getGroups(field, editField) {
     groups.push(ValidationGroup(field, editField));
   }
 
+  if (type !== 'default') {
+    groups.push(CustomValuesGroup(field, editField));
+  }
+
   return groups;
 }