feat(feel): add number feel entry

Related to bpmn-io/form-js#653

src/components/entries/FEEL/Feel.js

@@ -28,6 +28,8 @@ import FeelIcon from './FeelIcon';
 
 import { ToggleSwitch } from '../ToggleSwitch';
 
+import { NumberField } from '../NumberField';
+
 const noop = () => { };
 
 function FeelTextfield(props) {
@@ -273,6 +275,59 @@ const OptionalFeelInput = forwardRef((props, ref) => {
 });
 
 
+const OptionalFeelNumberField = forwardRef((props, ref) => {
+  const {
+    id,
+    debounce,
+    disabled,
+    onInput,
+    value,
+    min,
+    max,
+    step,
+    onFocus,
+    onBlur
+  } = props;
+
+  const inputRef = useRef();
+
+  // 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' && position !== Infinity) {
+        if (position > value.length) {
+          position = value.length;
+        }
+        input.setSelectionRange(position, position);
+      }
+
+    }
+  };
+
+  return <NumberField
+    id={ id }
+    debounce={ debounce }
+    disabled={ disabled }
+    displayLabel={ false }
+    inputRef={ inputRef }
+    max={ max }
+    min={ min }
+    onInput={ onInput }
+    step={ step }
+    value={ value }
+    onFocus={ onFocus }
+    onBlur={ onBlur }
+  />;
+});
+
+
 const OptionalFeelTextArea = forwardRef((props, ref) => {
   const {
     id,
@@ -492,6 +547,7 @@ export default function FeelEntry(props) {
       }
       data-entry-id={ id }>
       <FeelTextfield
+        { ...props }
         debounce={ debounce }
         disabled={ disabled }
         feel={ feel }
@@ -516,6 +572,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/NumberField.js

@@ -15,12 +15,14 @@ import {
   usePrevious
 } from '../../hooks';
 
-function NumberField(props) {
+export function NumberField(props) {
 
   const {
     debounce,
     disabled,
+    displayLabel = true,
     id,
+    inputRef,
     label,
     max,
     min,
@@ -62,9 +64,10 @@ function NumberField(props) {
 
   return (
     <div class="bio-properties-panel-numberfield">
-      <label for={ prefixId(id) } class="bio-properties-panel-label">{ label }</label>
+      {displayLabel && <label for={ prefixId(id) } class="bio-properties-panel-label">{ label }</label> }
       <input
         id={ prefixId(id) }
+        ref={ inputRef }
         type="number"
         name={ id }
         spellCheck="false"

src/components/entries/index.js

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