From d92f9172a2d71f7f3ee5cc565324acb0bfc06e66 Mon Sep 17 00:00:00 2001
From: Aqib Mirza <aaron.smith@nninjatechnolabs.com>
Date: Tue, 1 Aug 2023 19:11:58 +0530
Subject: [PATCH] feat: table number input added

---
 .../comps/tableComp/column/columnTypeComp.tsx |  6 ++
 .../columnTypeComps/ColumnNumberComp.tsx      | 71 +++++++++++++++++++
 .../packages/lowcoder/src/i18n/locales/en.ts  |  4 ++
 .../packages/lowcoder/src/i18n/locales/zh.ts  |  4 ++
 4 files changed, 85 insertions(+)
 create mode 100644 client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx

diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComp.tsx
index b3e1e1faf..f6b3e1901 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComp.tsx
+++ b/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,
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx
new file mode 100644
index 000000000..a775a1887
--- /dev/null
+++ b/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();
+})();
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index 160955098..82dfdaf9c 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -1141,7 +1141,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",
diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts
index f92dff893..908ecee3a 100644
--- a/client/packages/lowcoder/src/i18n/locales/zh.ts
+++ b/client/packages/lowcoder/src/i18n/locales/zh.ts
@@ -1122,7 +1122,11 @@ table: {
     auto: "自动",
     fixed: "固定",
     columnType: "列类型",
+    float: "分数",
+    prefix: "字首",
+    suffix: "后缀",
     text: "文本",
+    number: "数字",
     link: "链接",
     links: "链接",
     tag: "标签",