feat(feel): add number feel entry

Related to bpmn-io/form-js#653

src/components/entries/FEEL/Feel.js

@@ -273,6 +273,70 @@ const OptionalFeelInput = forwardRef((props, ref) => {
 });
 
 
+const OptionalFeelNumberField = forwardRef((props, ref) => {
+  const {
+    id,
+    disabled,
+    onInput,
+    value,
+    min,
+    max,
+    step,
+    onFocus,
+    onBlur
+  } = props;
+
+  const inputRef = useRef();
+
+  const handleChange = (event) => {
+    const {
+      validity,
+      value
+    } = event.target;
+
+    if (validity.valid) {
+      onInput(value ? parseFloat(value) : undefined);
+    }
+  };
+
+  // To be consistent with the FEEL editor, set focus at start of input
+  // this ensures clean editing experience when switching with the keyboard
+  ref.current = {
+    focus: (position) => {
+      const input = inputRef.current;
+      if (!input) {
+        return;
+      }
+
+      input.focus();
+      if (typeof position === 'number') {
+        if (position > value.length) {
+          position = value.length;
+        }
+        input.setSelectionRange(position, position);
+      }
+
+    }
+  };
+
+  return <input
+    id={ prefixId(id) }
+    type="number"
+    name={ id }
+    spellCheck="false"
+    autoComplete="off"
+    disabled={ disabled }
+    class="bio-properties-panel-input"
+    max={ max }
+    min={ min }
+    onInput={ handleChange }
+    onFocus={ onFocus }
+    onBlur={ onBlur }
+    step={ step }
+    value={ value } />;
+});
+
+
 const OptionalFeelTextArea = forwardRef((props, ref) => {
   const {
     id,
@@ -492,6 +556,7 @@ export default function FeelEntry(props) {
       }
       data-entry-id={ id }>
       <FeelTextfield
+        { ...props }
         debounce={ debounce }
         disabled={ disabled }
         feel={ feel }
@@ -516,6 +581,32 @@ export default function FeelEntry(props) {
   );
 }
 
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {String} props.max
+ * @param {String} props.min
+ * @param {String} props.step
+ * @param {Boolean} props.feel
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.tooltipContainer
+ * @param {Function} props.validate
+ * @param {Function} props.show
+ * @param {Function} props.example
+ * @param {Function} props.variables
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ */
+export function FeelNumberEntry(props) {
+  return <FeelEntry class="bio-properties-panel-feel-number" OptionalComponent={ OptionalFeelNumberField } { ...props } />;
+}
+
 /**
  * @param {Object} props
  * @param {Object} props.element

src/components/entries/index.js

@@ -4,6 +4,7 @@ export { default as DescriptionEntry } from './Description';
 export {
   default as FeelEntry,
   FeelCheckboxEntry,
+  FeelNumberEntry,
   FeelTextAreaEntry,
   FeelTemplatingEntry,
   FeelToggleSwitchEntry,