added step control for number type columns

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx

@@ -1,18 +1,37 @@
-  import { default as Input } from "antd/es/input";
+  import { default as InputNumber } from "antd/es/input-number";
 import { NumberControl, StringControl } from "comps/controls/codeControl";
 import { BoolControl } from "comps/controls/boolControl";
 import { trans } from "i18n";
 import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder";
 import { ColumnValueTooltip } from "../simpleColumnTypeComps";
+import { withDefault } from "comps/generators";
+import styled from "styled-components";
+
+const InputNumberWrapper = styled.div`
+  .ant-input-number  {
+    width: 100%;
+    border-radius: 0;
+    background: transparent !important;
+    padding: 0 !important;
+    box-shadow: none;
+
+    input {
+      padding: 0;
+      border-radius: 0;
+    }
+  }
+`;
 
 const childrenMap = {
   text: NumberControl,
+  step: withDefault(NumberControl, 1),
   float: BoolControl,
   prefix: StringControl,
   suffix: StringControl,
 };
 
 let float = false;
+let step = 1;
 const getBaseValue: ColumnTypeViewFn<typeof childrenMap, number, number> = (
   props
 ) => {
@@ -24,6 +43,7 @@ export const ColumnNumberComp = (function () {
     childrenMap,
     (props, dispatch) => {
       float = props.float;
+      step = props.step;
       const value = !float ? Math.floor(props.changeValue ?? getBaseValue(props, dispatch)) : props.changeValue ?? getBaseValue(props, dispatch);
       return props.prefix + value + props.suffix;
     },
@@ -32,18 +52,20 @@ export const ColumnNumberComp = (function () {
   )
     .setEditViewFn((props) => {
       return (
-      <Input
-        type="number"
-        step={float?"0.01": "1"}
-        defaultValue={props.value}
-        autoFocus
-        bordered={false}
-        onChange={(e) => {
-          props.onChange(!float ? Math.floor(e.target.valueAsNumber) : e.target.valueAsNumber);
-        }}
-        onBlur={props.onChangeEnd}
-        onPressEnter={props.onChangeEnd}
-      />
+      <InputNumberWrapper>
+        <InputNumber
+          step={step}
+          defaultValue={props.value}
+          autoFocus
+          bordered={false}
+          onChange={(value) => {
+            value = value ?? 0;
+            props.onChange(!float ? Math.floor(value) : value);
+          }}
+          onBlur={props.onChangeEnd}
+          onPressEnter={props.onChangeEnd}
+        />
+      </InputNumberWrapper>
     )})
     .setPropertyViewFn((children) => {
       return (
@@ -52,17 +74,31 @@ export const ColumnNumberComp = (function () {
             label: trans("table.columnValue"),
             tooltip: ColumnValueTooltip,
           })}
+          {children.step.propertyView({
+            label: trans("table.numberStep"),
+            tooltip: trans("table.numberStepTooltip"),
+            onFocus: (focused) => {
+              if(!focused) {
+                const value = children.step.getView();
+                const isFloat = children.float.getView();
+                const newValue = !isFloat ? Math.floor(value) : value;
+                children.step.dispatchChangeValueAction(String(newValue));
+              }
+            }
+          })}
           {children.prefix.propertyView({
             label: trans("table.prefix"),
-            // tooltip: ColumnValueTooltip,
           })}
           {children.suffix.propertyView({
             label: trans("table.suffix"),
-            // tooltip: ColumnValueTooltip,
           })}
           {children.float.propertyView({
             label: trans("table.float"),
-            // tooltip: ColumnValueTooltip,
+            onChange: (isFloat) => {
+              const value = children.step.getView();
+              const newValue = !isFloat ? Math.floor(value) : value;
+              children.step.dispatchChangeValueAction(String(newValue));
+            }
           })}
         </>
       );

client/packages/lowcoder/src/comps/controls/boolControl.tsx

@@ -106,7 +106,7 @@ class BoolControl extends AbstractComp<boolean, DataType, Node<ValueAndMsg<boole
     return customAction<ChangeModeAction>({ useCodeEditor: !this.useCodeEditor }, true);
   }
 
-  propertyView(params: ControlParams) {
+  propertyView(params: ControlParams & {onChange?: (changed: boolean) => void}) {
     const changeModeIcon = (
       <SwitchJsIcon
         checked={this.useCodeEditor}
@@ -127,7 +127,10 @@ class BoolControl extends AbstractComp<boolean, DataType, Node<ValueAndMsg<boole
           {!this.useCodeEditor && (
             <Switch
               value={this.getView()}
-              onChange={(x) => this.dispatchChangeValueAction(x)}
+              onChange={(x) => {
+                this.dispatchChangeValueAction(x);
+                params?.onChange?.(x);
+              }}
             ></Switch>
           )}
         </SwitchWrapper>

client/packages/lowcoder/src/i18n/locales/de.ts

@@ -1135,6 +1135,8 @@ export const de = {
       "auto": "Auto",
       "fixed": "Festgelegt",
       "columnType": "Säule Typ",
+      "numberStep": "Schritt",
+      "numberStepTooltip": "Die Zahl, auf die der aktuelle Wert erhöht oder verringert wird. Es kann eine ganze Zahl oder eine Dezimalzahl sein",
       "float": "Schwimmer",
       "prefix": "Präfix",
       "suffix": "Nachsilbe",

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -1239,6 +1239,8 @@ export const en = {
     "auto": "Auto",
     "fixed": "Fixed",
     "columnType": "Column Type",
+    "numberStep": "Step",
+    "numberStepTooltip": "The number to which the current value is increased or decreased. It can be an integer or decimal",
     "float": "Float",
     "prefix": "Prefix",
     "suffix": "Suffix",

client/packages/lowcoder/src/i18n/locales/zh.ts

@@ -1210,6 +1210,8 @@ table: {
     auto: "自动",
     fixed: "固定",
     columnType: "列类型",
+    numberStep: "步",
+    numberStepTooltip: "当前值增加或减少的数量。它可以是整数或小数",
     float: "分数",
     prefix: "字首",
     suffix: "后缀",