Merge branch 'lowcoder-org:main' into remove-moment

Author: raheeliftikhar5

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/comps/controls/styleControlConstants.tsx

@@ -945,45 +945,42 @@ export type CarouselStyleType = StyleConfigType<typeof CarouselStyle>;
 export type RichTextEditorStyleType = StyleConfigType<typeof RichTextEditorStyle>;
 
 export function widthCalculator(margin: string) {
-  const marginArr = margin?.trim().split(" ") || "";
+  const marginArr = margin?.trim().replace(/\s+/g,' ').split(" ") || "";
   if (marginArr.length === 1) {
     return `calc(100% - ${
-      parseInt(margin.replace(/[^\d.]/g, "")) * 2 + margin.replace(/[0-9]/g, "")
+      parseInt(margin.replace(/[^\d.]/g, "")) * 2 + 
+      (margin.replace(/[0-9]/g, "") || "px")
     })`;
   } else if (marginArr.length === 2 || marginArr.length === 3) {
     return `calc(100% - ${
       parseInt(marginArr[1].replace(/[^\d.]/g, "")) * 2 +
-      marginArr[1].replace(/[0-9]/g, "")
+      (marginArr[1].replace(/[0-9]/g, "") || 'px')
     })`;
   } else {
     return `calc(100% - ${
       parseInt(marginArr[1]?.replace(/[^\d.]/g, "") || "0") +
-      marginArr[1]?.replace(/[0-9]/g, "" || "px")
+      (marginArr[1]?.replace(/[0-9]/g, "") || "px")
     } - ${
       parseInt(marginArr[3]?.replace(/[^\d.]/g, "") || "0") +
-      marginArr[3]?.replace(/[0-9]/g, "" || "px")
+      (marginArr[3]?.replace(/[0-9]/g, "") || "px")
     })`;
   }
 }
 
 export function heightCalculator(margin: string) {
   const marginArr = margin?.trim().split(" ") || "";
-  if (marginArr.length === 1) {
-    return `calc(100% - ${
-      parseInt(margin.replace(/[^\d.]/g, "")) * 2 + margin.replace(/[0-9]/g, "")
-    })`;
-  } else if (marginArr.length === 2) {
+  if (marginArr.length === 1 || marginArr.length === 2) {
     return `calc(100% - ${
-      parseInt(marginArr[0].replace(/[^\d.]/g, "")) * 2 +
-      marginArr[0].replace(/[0-9]/g, "")
+      parseInt(marginArr[0].replace(/[^\d.]/g, "")) * 2 + 
+      (marginArr[0].replace(/[0-9]/g, "") || 'px')
     })`;
-  } else {
+  }else if(marginArr.length >2){
     return `calc(100% - ${
       parseInt(marginArr[0]?.replace(/[^\d.]/g, "") || "0") +
-        marginArr[0]?.replace(/[0-9]/g, "") || "px"
+      (marginArr[0]?.replace(/[0-9]/g, "") || "px")
     } - ${
       parseInt(marginArr[2]?.replace(/[^\d.]/g, "") || "0") +
-        marginArr[2]?.replace(/[0-9]/g, "") || "px"
+      (marginArr[2]?.replace(/[0-9]/g, "") || "px")
     })`;
   }
 }

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: "标签",