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

package/dist/index.es.js

@@ -1,4 +1,5 @@
-import { isArray, isFunction, isNumber, bind, assign, debounce, get, isUndefined, set, forEach, isObject, uniqueBy, isString } from 'min-dash';
+import Ids from 'ids';
+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';
@@ -6,7 +7,7 @@ import { useContext, useRef, useEffect, useMemo, useState, useCallback } from 'p
 import React from 'preact/compat';
 import { jsxs, jsx, Fragment } from 'preact/jsx-runtime';
 import dragula from 'dragula';
-import { matches, event } from 'min-dom';
+import { matches, closest, event } from 'min-dom';
 import { mutate } from 'array-move';
 
 var FN_REF = '__fn';
@@ -1006,7 +1007,7 @@ function CheckboxInput(props) {
   };
 
   return jsxs("div", {
-    class: "fjs-properties-panel-textfield",
+    class: "fjs-properties-panel-checkbox",
     children: [jsx("label", {
       for: prefixId(id),
       class: "fjs-properties-panel-label",
@@ -1061,7 +1062,7 @@ function NumberInput(props) {
     }
   }, [_onInput]);
   return jsxs("div", {
-    class: "fjs-properties-panel-textfield",
+    class: "fjs-properties-panel-number",
     children: [jsx("label", {
       for: prefixId(id),
       class: "fjs-properties-panel-label",
@@ -1094,7 +1095,7 @@ function Select(props) {
   };
 
   return jsxs("div", {
-    class: "fjs-properties-panel-textfield",
+    class: "fjs-properties-panel-select",
     children: [jsx("label", {
       for: prefixId(id),
       class: "fjs-properties-panel-label",
@@ -1128,7 +1129,7 @@ function Textarea(props) {
     _onInput(value.length ? value : undefined);
   }, [_onInput]);
   return jsxs("div", {
-    class: "fjs-properties-panel-textfield",
+    class: "fjs-properties-panel-textarea",
     children: [jsx("label", {
       for: prefixId(id),
       class: "fjs-properties-panel-label",
@@ -1155,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);
@@ -1180,7 +1181,7 @@ function TextInput(props) {
   }
 
   return jsxs("div", {
-    class: "fjs-properties-panel-textfield",
+    class: "fjs-properties-panel-text",
     children: [jsx("label", {
       for: prefixId(id),
       class: "fjs-properties-panel-label",
@@ -1262,6 +1263,41 @@ function NumberInputEntry(props) {
   });
 }
 
+function SelectEntry(props) {
+  const {
+    editField,
+    field,
+    id,
+    description,
+    label,
+    options,
+    path
+  } = props;
+
+  const onChange = value => {
+    if (editField && path) {
+      editField(field, path, value);
+    } else {
+      props.onChange(value);
+    }
+  };
+
+  const value = path ? get(field, path, '') : props.value;
+  return jsxs("div", {
+    class: "fjs-properties-panel-entry",
+    children: [jsx(Select, {
+      id: id,
+      label: label,
+      onChange: onChange,
+      options: options,
+      value: value
+    }), description && jsx("div", {
+      class: "fjs-properties-panel-description",
+      children: description
+    })]
+  });
+}
+
 function TextareaEntry(props) {
   const {
     editField,
@@ -1472,12 +1508,6 @@ function ActionEntry(props) {
     editField,
     field
   } = props;
-
-  const onChange = value => {
-    editField(field, 'action', value);
-  };
-
-  const value = field.action;
   const options = [{
     label: 'Submit',
     value: 'submit'
@@ -1485,15 +1515,13 @@ function ActionEntry(props) {
     label: 'Reset',
     value: 'reset'
   }];
-  return jsx("div", {
-    class: "fjs-properties-panel-entry",
-    children: jsx(Select, {
-      id: "action",
-      label: "Action",
-      options: options,
-      onChange: onChange,
-      value: value
-    })
+  return jsx(SelectEntry, {
+    editField: editField,
+    field: field,
+    id: "action",
+    label: "Action",
+    options: options,
+    path: ['action']
   });
 }
 
@@ -1547,6 +1575,94 @@ function DescriptionEntry(props) {
   });
 }
 
+function DefaultValueEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+  const {
+    defaultValue,
+    type,
+    values = []
+  } = field;
+
+  if (type === 'checkbox') {
+    const options = [{
+      label: 'Checked',
+      value: 'true'
+    }, {
+      label: 'Not checked',
+      value: 'false'
+    }];
+
+    const onChange = value => {
+      editField(field, ['defaultValue'], parseStringToBoolean(value));
+    };
+
+    return jsx(SelectEntry, {
+      id: "defaultValue",
+      label: "Default Value",
+      onChange: onChange,
+      options: options,
+      value: parseBooleanToString(defaultValue)
+    });
+  }
+
+  if (type === 'number') {
+    return jsx(NumberInputEntry, {
+      editField: editField,
+      field: field,
+      id: "defaultValue",
+      label: "Default Value",
+      path: ['defaultValue']
+    });
+  }
+
+  if (type === 'radio' || type === 'select') {
+    const options = [{
+      label: '<none>'
+    }, ...values];
+
+    const onChange = value => {
+      editField(field, ['defaultValue'], value.length ? value : undefined);
+    };
+
+    return jsx(SelectEntry, {
+      id: "defaultValue",
+      label: "Default Value",
+      onChange: onChange,
+      options: options,
+      value: defaultValue
+    });
+  }
+
+  if (type === 'textfield') {
+    return jsx(TextInputEntry, {
+      editField: editField,
+      field: field,
+      id: "defaultValue",
+      label: "Default Value",
+      path: ['defaultValue']
+    });
+  }
+}
+
+function parseStringToBoolean(value) {
+  if (value === 'true') {
+    return true;
+  }
+
+  return false;
+}
+
+function parseBooleanToString(value) {
+  if (value === true) {
+    return 'true';
+  }
+
+  return 'false';
+}
+
 function DisabledEntry(props) {
   const {
     editField,
@@ -1690,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 => {
@@ -1705,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) {
@@ -1749,6 +1953,13 @@ function GeneralGroup(field, editField) {
     }));
   }
 
+  if (INPUTS.includes(type)) {
+    entries.push(jsx(DefaultValueEntry, {
+      editField: editField,
+      field: field
+    }));
+  }
+
   if (type === 'button') {
     entries.push(jsx(ActionEntry, {
       editField: editField,
@@ -1850,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",
@@ -1877,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}-${value.value}`);
+      }, `${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 = {
@@ -1910,6 +2219,10 @@ function getGroups(field, editField) {
     groups.push(ValidationGroup(field, editField));
   }
 
+  if (type !== 'default') {
+    groups.push(CustomValuesGroup(field, editField));
+  }
+
   return groups;
 }
 
@@ -2200,8 +2513,9 @@ function FormEditor$1(props) {
       }
 
       return injector.get(type, strict);
-    }
+    },
 
+    formId: formEditor._id
   };
   const onSubmit = useCallback(() => {}, []);
   const onReset = useCallback(() => {}, []);
@@ -2677,6 +2991,7 @@ function isShift(event) {
 
 var KEYDOWN_EVENT = 'keyboard.keydown',
     KEYUP_EVENT = 'keyboard.keyup';
+var HANDLE_MODIFIER_ATTRIBUTE = 'input-handle-modified-keys';
 var DEFAULT_PRIORITY$1 = 1000;
 /**
  * A keyboard abstraction that may be activated and
@@ -2755,7 +3070,27 @@ Keyboard.prototype._keyHandler = function (event, type) {
 };
 
 Keyboard.prototype._isEventIgnored = function (event) {
-  return isInput(event.target) && !isCmd(event);
+  return isInput(event.target) && this._isModifiedKeyIgnored(event);
+};
+
+Keyboard.prototype._isModifiedKeyIgnored = function (event) {
+  if (!isCmd(event)) {
+    return true;
+  }
+
+  var allowedModifiers = this._getAllowedModifiers(event.target);
+
+  return !allowedModifiers.includes(event.key);
+};
+
+Keyboard.prototype._getAllowedModifiers = function (element) {
+  var modifierContainer = closest(element, '[' + HANDLE_MODIFIER_ATTRIBUTE + ']', true);
+
+  if (!modifierContainer || this._node && !this._node.contains(modifierContainer)) {
+    return [];
+  }
+
+  return modifierContainer.getAttribute(HANDLE_MODIFIER_ATTRIBUTE).split(',');
 };
 
 Keyboard.prototype.bind = function (node) {
@@ -4308,6 +4643,7 @@ var SelectionModule = {
   selectionBehavior: ['type', SelectionBehavior]
 };
 
+const ids = new Ids([32, 36, 1]);
 /**
  * @typedef { import('./types').Injector } Injector
  * @typedef { import('./types').Module } Module
@@ -4332,11 +4668,20 @@ class FormEditor {
    * @param {FormEditorOptions} options
    */
   constructor(options = {}) {
+    /**
+     * @public
+     * @type {String}
+     */
+    this._id = ids.next();
     /**
      * @private
      * @type {Element}
      */
+
     this._container = createFormContainer();
+
+    this._container.setAttribute('input-handle-modified-keys', 'z,y');
+
     const {
       container,
       exporter,
@@ -4595,10 +4940,9 @@ function exportSchema(schema, exporter, schemaVersion) {
 
     return value;
   });
-  return {
-    schemaVersion,
+  return { ...cleanedSchema,
     ...exportDetails,
-    ...cleanedSchema
+    schemaVersion
   };
 }