Merge pull request #329 from aaron1604/feat-table-number-input

feat: table number input added

Author: FalkWolsky

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComp.tsx

@@ -15,12 +15,17 @@ import { RatingComp } from "./columnTypeComps/columnRatingComp";
 import { BadgeStatusComp } from "./columnTypeComps/columnStatusComp";
 import { ColumnTagsComp } from "./columnTypeComps/columnTagsComp";
 import { SimpleTextComp } from "./columnTypeComps/simpleTextComp";
+import { ColumnNumberComp } from "./columnTypeComps/ColumnNumberComp";
 
 const actionOptions = [
   {
     label: trans("table.text"),
     value: "text",
   },
+  {
+    label: trans("table.number"),
+    value: "number",
+  },
   {
     label: trans("table.link"),
     value: "link",
@@ -73,6 +78,7 @@ const actionOptions = [
 
 export const ColumnTypeCompMap = {
   text: SimpleTextComp,
+  number: ColumnNumberComp,
   button: ButtonComp,
   badgeStatus: BadgeStatusComp,
   link: LinkComp,

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

@@ -0,0 +1,71 @@
+  import { Input } from "antd";
+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";
+
+const childrenMap = {
+  text: NumberControl,
+  float: BoolControl,
+  prefix: StringControl,
+  suffix: StringControl,
+};
+
+let float = false;
+const getBaseValue: ColumnTypeViewFn<typeof childrenMap, number, number> = (
+  props
+) => {
+  return props.text
+};
+
+export const ColumnNumberComp = (function () {
+  return new ColumnTypeCompBuilder(
+    childrenMap,
+    (props, dispatch) => {
+      float = props.float;
+      const value = !float ? Math.floor(props.changeValue ?? getBaseValue(props, dispatch)) : props.changeValue ?? getBaseValue(props, dispatch);
+      return props.prefix + value + props.suffix;
+    },
+    (nodeValue) => nodeValue.text.value,
+    getBaseValue,
+  )
+    .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}
+      />
+    )})
+    .setPropertyViewFn((children) => {
+      return (
+        <>
+          {children.text.propertyView({
+            label: trans("table.columnValue"),
+            tooltip: ColumnValueTooltip,
+          })}
+          {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,
+          })}
+        </>
+      );
+    })
+    .build();
+})();

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

@@ -1149,7 +1149,11 @@ export const en = {
     auto: "Auto",
     fixed: "Fixed",
     columnType: "Column type",
+    float: "Float",
+    prefix: "Prefix",
+    suffix: "Suffix",
     text: "Text",
+    number: "Number",
     link: "Link",
     links: "Links",
     tag: "Tag",

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

@@ -1130,7 +1130,11 @@ table: {
     auto: "自动",
     fixed: "固定",
     columnType: "列类型",
+    float: "分数",
+    prefix: "字首",
+    suffix: "后缀",
     text: "文本",
+    number: "数字",
     link: "链接",
     links: "多链接",
     tag: "标签",