@bpmn-io/form-js-editor 0.5.1 → 0.6.0

package/dist/index.es.js

@@ -1007,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",
@@ -1062,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",
@@ -1095,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",
@@ -1129,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",
@@ -1181,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",
@@ -1263,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,
@@ -1473,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'
@@ -1486,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']
   });
 }
 
@@ -1548,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,
@@ -1750,6 +1865,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,
@@ -1880,7 +2002,7 @@ function ValuesGroup(field, editField) {
           field: field,
           index: index
         })
-      }, `${id}-${value.value}`);
+      }, `${id}-${index}`);
     })
   });
 }