feat: introduce StepInput

src/Component/FunctionUI/FunctionUI.tsx

@@ -42,6 +42,7 @@ import BooleanExpressionInput from '../ExpressionInput/BooleanExpressionInput/Bo
 import { FunctionConfig, functionConfigs } from './functionConfigs';
 import CaseInput from './CaseInput/CaseInput';
 import UnknownInput from './UnknownInput/UnknownInput';
+import StepInput from './SetpInput/StepInput';
 
 type Type = 'string' | 'number' | 'boolean' | 'unknown';
 
@@ -104,7 +105,17 @@ export const FunctionUI = <T extends GeoStylerFunction>({
       );
     }
     if (cfg.type === 'step') {
-      return 'STEP INPUT';
+      return (
+        <div className='gs-function-arg' key={`${key}${index}`}>
+          <i className='tree-icon' />
+          <StepInput
+            value={functionArgs?.[index]}
+            onChange={(val) => {
+              updateFunctionArg(val, index);
+            }}
+          />
+        </div>
+      );
     }
     if (cfg.type === 'unknown') {
       return <UnknownInput

src/Component/FunctionUI/SetpInput/StepInput.tsx

@@ -0,0 +1,46 @@
+import React, { useCallback } from 'react';
+import { Expression, FStepParameter } from 'geostyler-style';
+import { Input } from 'antd';
+import './StepInput.less';
+import NumberExpressionInput from '../../ExpressionInput/NumberExpressionInput/NumberExpressionInput';
+
+export type StepInputProps = {
+  value?: FStepParameter;
+  onChange: (newValue: FStepParameter) => void;
+};
+
+export const StepInput: React.FC<StepInputProps> = ({
+  value,
+  onChange
+}) => {
+
+  const onBoundaryChante = useCallback((newBoundary: Expression<number>) => {
+    onChange({
+      ...value,
+      boundary: newBoundary
+    });
+  }, [value, onChange]);
+
+  const onValueChange = useCallback((newValue: Expression<unknown>) => {
+    onChange({
+      ...value,
+      value: newValue
+    });
+  }, [value, onChange]);
+
+  return (
+    <div className="gs-boundary-input">
+      <NumberExpressionInput
+        onChange={onBoundaryChante}
+        onCancel={() => onChange(undefined)}
+        value={value?.boundary}
+      />
+      <Input
+        onChange={onValueChange}
+        value={value?.value as any}
+      />
+    </div>
+  );
+};
+
+export default StepInput;