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

package/dist/index.cjs

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var Ids = require('ids');
 var minDash = require('min-dash');
 var formJsViewer = require('@bpmn-io/form-js-viewer');
 var preact = require('preact');
@@ -14,6 +15,7 @@ var arrayMove = require('array-move');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var Ids__default = /*#__PURE__*/_interopDefaultLegacy(Ids);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var dragula__default = /*#__PURE__*/_interopDefaultLegacy(dragula);
 
@@ -1014,7 +1016,7 @@ function CheckboxInput(props) {
   };
 
   return jsxRuntime.jsxs("div", {
-    class: "fjs-properties-panel-textfield",
+    class: "fjs-properties-panel-checkbox",
     children: [jsxRuntime.jsx("label", {
       for: prefixId(id),
       class: "fjs-properties-panel-label",
@@ -1069,7 +1071,7 @@ function NumberInput(props) {
     }
   }, [_onInput]);
   return jsxRuntime.jsxs("div", {
-    class: "fjs-properties-panel-textfield",
+    class: "fjs-properties-panel-number",
     children: [jsxRuntime.jsx("label", {
       for: prefixId(id),
       class: "fjs-properties-panel-label",
@@ -1102,7 +1104,7 @@ function Select(props) {
   };
 
   return jsxRuntime.jsxs("div", {
-    class: "fjs-properties-panel-textfield",
+    class: "fjs-properties-panel-select",
     children: [jsxRuntime.jsx("label", {
       for: prefixId(id),
       class: "fjs-properties-panel-label",
@@ -1136,7 +1138,7 @@ function Textarea(props) {
     _onInput(value.length ? value : undefined);
   }, [_onInput]);
   return jsxRuntime.jsxs("div", {
-    class: "fjs-properties-panel-textfield",
+    class: "fjs-properties-panel-textarea",
     children: [jsxRuntime.jsx("label", {
       for: prefixId(id),
       class: "fjs-properties-panel-label",
@@ -1163,7 +1165,7 @@ function TextInput(props) {
   const prevValue = usePrevious(value);
   const [cachedValue, setCachedValue] = hooks$1.useState(null);
   const [error, setError] = hooks$1.useState(null);
-  hooks$1.useEffect(() => setError(validate(value)), [value]);
+  hooks$1.useEffect(() => setError(validate(value)), [validate, value]);
   const onInput = useDebounce(event => {
     const value = event.target.value;
     const error = validate(value);
@@ -1188,7 +1190,7 @@ function TextInput(props) {
   }
 
   return jsxRuntime.jsxs("div", {
-    class: "fjs-properties-panel-textfield",
+    class: "fjs-properties-panel-text",
     children: [jsxRuntime.jsx("label", {
       for: prefixId(id),
       class: "fjs-properties-panel-label",
@@ -1270,6 +1272,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 ? minDash.get(field, path, '') : props.value;
+  return jsxRuntime.jsxs("div", {
+    class: "fjs-properties-panel-entry",
+    children: [jsxRuntime.jsx(Select, {
+      id: id,
+      label: label,
+      onChange: onChange,
+      options: options,
+      value: value
+    }), description && jsxRuntime.jsx("div", {
+      class: "fjs-properties-panel-description",
+      children: description
+    })]
+  });
+}
+
 function TextareaEntry(props) {
   const {
     editField,
@@ -1480,12 +1517,6 @@ function ActionEntry(props) {
     editField,
     field
   } = props;
-
-  const onChange = value => {
-    editField(field, 'action', value);
-  };
-
-  const value = field.action;
   const options = [{
     label: 'Submit',
     value: 'submit'
@@ -1493,15 +1524,13 @@ function ActionEntry(props) {
     label: 'Reset',
     value: 'reset'
   }];
-  return jsxRuntime.jsx("div", {
-    class: "fjs-properties-panel-entry",
-    children: jsxRuntime.jsx(Select, {
-      id: "action",
-      label: "Action",
-      options: options,
-      onChange: onChange,
-      value: value
-    })
+  return jsxRuntime.jsx(SelectEntry, {
+    editField: editField,
+    field: field,
+    id: "action",
+    label: "Action",
+    options: options,
+    path: ['action']
   });
 }
 
@@ -1555,6 +1584,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 jsxRuntime.jsx(SelectEntry, {
+      id: "defaultValue",
+      label: "Default Value",
+      onChange: onChange,
+      options: options,
+      value: parseBooleanToString(defaultValue)
+    });
+  }
+
+  if (type === 'number') {
+    return jsxRuntime.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 jsxRuntime.jsx(SelectEntry, {
+      id: "defaultValue",
+      label: "Default Value",
+      onChange: onChange,
+      options: options,
+      value: defaultValue
+    });
+  }
+
+  if (type === 'textfield') {
+    return jsxRuntime.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,
@@ -1698,9 +1815,18 @@ function ValueEntry(props) {
   const {
     editField,
     field,
-    index
+    index,
+    validate
   } = props;
 
+  const getLabel = () => {
+    return minDash.get(field, ['values', index, 'label']);
+  };
+
+  const getValue = () => {
+    return minDash.get(field, ['values', index, 'value']);
+  };
+
   const onChange = key => {
     const values = minDash.get(field, ['values']);
     return value => {
@@ -1713,14 +1839,93 @@ function ValueEntry(props) {
       id: `value-label-${index}`,
       label: "Label",
       onChange: onChange('label'),
-      value: minDash.get(field, ['values', index, 'label'])
+      value: getLabel()
+    }), jsxRuntime.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(minDash.get(field, ['properties']))[index];
+  };
+
+  const getValue = () => {
+    return minDash.get(field, ['properties', getKey()]);
+  };
+
+  const onChange = key => {
+    const properties = minDash.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 jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(TextInputEntry, {
+      id: `value-key-${index}`,
+      label: "Key",
+      onChange: onChange('key'),
+      value: getKey(),
+      validate: validate(getKey())
     }), jsxRuntime.jsx(TextInputEntry, {
       id: `value-value-${index}`,
       label: "Value",
       onChange: onChange('value'),
-      value: minDash.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) {
@@ -1757,6 +1962,13 @@ function GeneralGroup(field, editField) {
     }));
   }
 
+  if (INPUTS.includes(type)) {
+    entries.push(jsxRuntime.jsx(DefaultValueEntry, {
+      editField: editField,
+      field: field
+    }));
+  }
+
   if (type === 'button') {
     entries.push(jsxRuntime.jsx(ActionEntry, {
       editField: editField,
@@ -1858,13 +2070,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 (minDash.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 jsxRuntime.jsx(Group, {
     label: "Values",
@@ -1885,11 +2116,90 @@ function ValuesGroup(field, editField) {
         children: jsxRuntime.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 (minDash.isUndefined(value) || !value.length) {
+        return 'Must not be empty.';
+      }
+
+      if (minDash.has(properties, value)) {
+        return 'Must be unique.';
+      }
+    };
+  };
+
+  const hasEntries = Object.keys(properties).length > 0;
+  return jsxRuntime.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 jsxRuntime.jsx(CollapsibleEntry, {
+        label: key,
+        removeEntry: removeEntry,
+        children: jsxRuntime.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 = {
@@ -1918,6 +2228,10 @@ function getGroups(field, editField) {
     groups.push(ValidationGroup(field, editField));
   }
 
+  if (type !== 'default') {
+    groups.push(CustomValuesGroup(field, editField));
+  }
+
   return groups;
 }
 
@@ -2208,8 +2522,9 @@ function FormEditor$1(props) {
       }
 
       return injector.get(type, strict);
-    }
+    },
 
+    formId: formEditor._id
   };
   const onSubmit = hooks$1.useCallback(() => {}, []);
   const onReset = hooks$1.useCallback(() => {}, []);
@@ -2685,6 +3000,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
@@ -2763,7 +3079,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 = minDom.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) {
@@ -4316,6 +4652,7 @@ var SelectionModule = {
   selectionBehavior: ['type', SelectionBehavior]
 };
 
+const ids = new Ids__default['default']([32, 36, 1]);
 /**
  * @typedef { import('./types').Injector } Injector
  * @typedef { import('./types').Module } Module
@@ -4340,11 +4677,20 @@ class FormEditor {
    * @param {FormEditorOptions} options
    */
   constructor(options = {}) {
+    /**
+     * @public
+     * @type {String}
+     */
+    this._id = ids.next();
     /**
      * @private
      * @type {Element}
      */
+
     this._container = formJsViewer.createFormContainer();
+
+    this._container.setAttribute('input-handle-modified-keys', 'z,y');
+
     const {
       container,
       exporter,
@@ -4603,10 +4949,9 @@ function exportSchema(schema, exporter, schemaVersion) {
 
     return value;
   });
-  return {
-    schemaVersion,
+  return { ...cleanedSchema,
     ...exportDetails,
-    ...cleanedSchema
+    schemaVersion
   };
 }