Icons for Number, Text & Tag Columns Types

FalkWolsky · FalkWolsky · commit 4033990b824d · 2024-05-09T03:06:37.000+02:00
diff --git a/client/packages/lowcoder/src/components/table/EditableCell.tsx b/client/packages/lowcoder/src/components/table/EditableCell.tsx
@@ -71,6 +71,7 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
     changeValue,
     baseValue,
     candidateTags,
+    // tagColors
     candidateStatus,
     onTableEvent,
   } = props;
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
@@ -6,6 +6,8 @@ import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilde
 import { ColumnValueTooltip } from "../simpleColumnTypeComps";
 import { withDefault } from "comps/generators";
 import styled from "styled-components";
+import { IconControl } from "comps/controls/iconControl";
+import { hasIcon } from "comps/utils";
 
 const InputNumberWrapper = styled.div`
   .ant-input-number  {
@@ -28,6 +30,8 @@ const childrenMap = {
   precision: RangeControl.closed(0, 20, 0),
   float: BoolControl,
   prefix: StringControl,
+  prefixIcon: IconControl,
+  suffixIcon: IconControl,
   suffix: StringControl,
 };
 
@@ -46,14 +50,22 @@ export const ColumnNumberComp = (function () {
     childrenMap,
     (props, dispatch) => {
       float = props.float;
-      step = props.step;
+      step = props.step; 
       precision = props.precision;
       const value = props.changeValue ?? getBaseValue(props, dispatch);
       let formattedValue: string | number = !float ? Math.floor(value) : value;
       if(float) {
         formattedValue = formattedValue.toFixed(precision + 1);
       }
-      return props.prefix + formattedValue + props.suffix;
+      return (
+          <>{hasIcon(props.prefixIcon) && (
+            <span>{props.prefixIcon}</span>
+          )}
+          <span>{props.prefix + formattedValue + props.suffix}</span>
+          {hasIcon(props.suffixIcon) && (
+            <span>{props.suffixIcon}</span>
+          )} </>
+      );
     },
     (nodeValue) => nodeValue.text.value,
     getBaseValue,
@@ -103,9 +115,15 @@ export const ColumnNumberComp = (function () {
           {children.prefix.propertyView({
             label: trans("table.prefix"),
           })}
+          {children.prefixIcon.propertyView({
+            label: trans("button.prefixIcon"),
+          })}
           {children.suffix.propertyView({
             label: trans("table.suffix"),
           })}
+          {children.suffixIcon.propertyView({
+            label: trans("button.suffixIcon"),
+          })}
           {children.float.propertyView({
             label: trans("table.float"),
             onChange: (isFloat) => {
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnBooleanComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnBooleanComp.tsx
@@ -9,6 +9,8 @@ import { CheckboxStyle, CheckboxStyleType } from "comps/controls/styleControlCon
 import { useStyle } from "comps/controls/styleControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { TableCheckedIcon, TableUnCheckedIcon } from "lowcoder-design";
+import { IconControl } from "comps/controls/iconControl";
+import { hasIcon } from "comps/utils";
 
 const CheckboxStyled = styled(Checkbox)<{ $style: CheckboxStyleType }>`
   ${(props) => props.$style && getStyle(props.$style)}
@@ -49,6 +51,9 @@ const falseValuesOptions = [
 const childrenMap = {
   text: BoolCodeControl,
   falseValues: dropdownControl(falseValuesOptions, ""),
+  iconTrue: IconControl,
+  iconFalse: IconControl,
+  iconNull: IconControl,
 };
 
 const getBaseValue: ColumnTypeViewFn<typeof childrenMap, boolean, boolean> = (props) => props.text;
@@ -88,16 +93,10 @@ export const BooleanComp = (function () {
       const CheckBoxComp = () => {
         const style = useStyle(CheckboxStyle);
         return (
-          <IconWrapper
-            $style={style}
-            $ifChecked={value}
-          >
-            {value ? (
-              <TableCheckedIcon />
-            ) : props.falseValues === "x" ? (
-              <TableUnCheckedIcon />
-            ) : (
-              props.falseValues
+          <IconWrapper $style={style} $ifChecked={value}>
+            {value === true ? ( hasIcon(props.iconTrue) ? props.iconTrue : <TableCheckedIcon /> ) 
+            : value === false ? ( hasIcon(props.iconFalse) ? props.iconFalse  : ( props.falseValues === "x" ? <TableUnCheckedIcon /> : props.falseValues )
+            ) : ( hasIcon(props.iconNull) ? props.iconNull : "No Value"
             )}
           </IconWrapper>
         );
@@ -127,6 +126,15 @@ export const BooleanComp = (function () {
             label: trans("table.falseValues"),
             radioButton: true,
           })}
+          {children.iconTrue.propertyView({
+            label: trans("table.iconTrue"),
+          })}
+          {children.iconFalse.propertyView({
+            label: trans("table.iconFalse"),
+          })}
+          {children.iconNull.propertyView({
+            label: trans("table.iconNull"),
+          })}
         </>
       );
     })
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx
@@ -15,6 +15,7 @@ import { toJson } from "really-relaxed-json";
 import { hashToNum } from "util/stringUtils";
 import { CustomSelect, PackUpIcon } from "lowcoder-design";
 import { ScrollBar } from "lowcoder-design";
+import { ColoredTagOptionControl } from "comps/controls/optionsControl";
 
 const colors = PresetStatusColorTypes;
 
@@ -55,13 +56,22 @@ const TagsControl = codeControl<Array<string> | string>(
   { expectedType: "string | Array<string>", codeType: "JSON" }
 );
 
-function getTagColor(text: string) {
-  const index = Math.abs(hashToNum(text)) % colors.length;
-  return colors[index];
+function getTagColor(tagText : any, tagOptions: any[]) {
+  const foundOption = tagOptions.find((option: { label: any; }) => option.label === tagText);
+  return foundOption ? foundOption.color : (function() {
+    const index = Math.abs(hashToNum(tagText)) % colors.length;
+    return colors[index];
+  })();
+}
+
+function getTagIcon(tagText: any, tagOptions: any[]) {
+  const foundOption = tagOptions.find(option => option.label === tagText);
+  return foundOption ? foundOption.icon : undefined;
 }
 
 const childrenMap = {
   text: TagsControl,
+  tagColors: ColoredTagOptionControl,
 };
 
 const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string | string[], string | string[]> = (
@@ -135,6 +145,9 @@ export const Wrapper = styled.div`
       }
     }
   }
+  .ant-tag svg {
+    margin-right: 4px;
+  }
 `;
 
 export const DropdownStyled = styled.div`
@@ -152,6 +165,12 @@ export const DropdownStyled = styled.div`
   }
 `;
 
+export const TagStyled = styled(Tag)`
+  svg {
+    margin-right: 4px;
+  }
+`;
+
 const TagEdit = (props: TagEditPropsType) => {
   const defaultTags = useContext(TagsContext);
   const [tags, setTags] = useState(() => {
@@ -206,12 +225,12 @@ const TagEdit = (props: TagEditPropsType) => {
           <CustomSelect.Option value={value} key={index}>
             {value.split(",")[1] ? (
               value.split(",").map((item, i) => (
-                <Tag color={getTagColor(item)} key={i} style={{ marginRight: "8px" }}>
+                <Tag color={getTagColor(item, [])} key={i} style={{ marginRight: "8px" }}>
                   {item}
                 </Tag>
               ))
             ) : (
-              <Tag color={getTagColor(value)} key={index}>
+              <Tag color={getTagColor(value, [])} key={index}>
                 {value}
               </Tag>
             )}
@@ -226,16 +245,17 @@ export const ColumnTagsComp = (function () {
   return new ColumnTypeCompBuilder(
     childrenMap,
     (props, dispatch) => {
+      const tagOptions = props.tagColors;
       let value = props.changeValue ?? getBaseValue(props, dispatch);
       value = typeof value === "string" && value.split(",")[1] ? value.split(",") : value;
       const tags = _.isArray(value) ? value : [value];
       const view = tags.map((tag, index) => {
         // The actual eval value is of type number or boolean
         const tagText = String(tag);
         return (
-          <Tag color={getTagColor(tagText)} key={index}>
+          <TagStyled color={getTagColor(tagText, tagOptions)} icon={getTagIcon(tagText, tagOptions)} key={index} >
             {tagText}
-          </Tag>
+          </TagStyled>
         );
       });
       return view;
@@ -257,6 +277,9 @@ export const ColumnTagsComp = (function () {
           label: trans("table.columnValue"),
           tooltip: ColumnValueTooltip,
         })}
+        {children.tagColors.propertyView({
+          title: "test",
+        })}
       </>
     ))
     .build();
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/simpleTextComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/simpleTextComp.tsx
@@ -3,9 +3,13 @@ import { StringOrNumberControl } from "comps/controls/codeControl";
 import { trans } from "i18n";
 import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder";
 import { ColumnValueTooltip } from "../simpleColumnTypeComps";
+import { IconControl } from "comps/controls/iconControl";
+import { hasIcon } from "comps/utils";
 
 const childrenMap = {
   text: StringOrNumberControl,
+  prefixIcon: IconControl,
+  suffixIcon: IconControl,
 };
 
 const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string | number, string | number> = (
@@ -17,7 +21,13 @@ export const SimpleTextComp = (function () {
     childrenMap,
     (props, dispatch) => {
       const value = props.changeValue ?? getBaseValue(props, dispatch);
-      return value;
+      return <>{hasIcon(props.prefixIcon) && (
+        <span>{props.prefixIcon}</span>
+      )}
+      <span>{value}</span>
+      {hasIcon(props.suffixIcon) && (
+        <span>{props.suffixIcon}</span>
+      )} </>;
     },
     (nodeValue) => nodeValue.text.value,
     getBaseValue
@@ -42,6 +52,12 @@ export const SimpleTextComp = (function () {
             label: trans("table.columnValue"),
             tooltip: ColumnValueTooltip,
           })}
+          {children.prefixIcon.propertyView({
+            label: trans("button.prefixIcon"),
+          })}
+          {children.suffixIcon.propertyView({
+            label: trans("button.suffixIcon"),
+          })}
         </>
       );
     })
diff --git a/client/packages/lowcoder/src/comps/controls/optionsControl.tsx b/client/packages/lowcoder/src/comps/controls/optionsControl.tsx
@@ -671,4 +671,31 @@ export const StepOptionControl = optionsControl(StepOption, {
     { value: "4", label: "Step 4", subTitle: "Completion", description: "Process completed successfully.", status: "wait", disabled: "true" },
   ],
   uniqField: "label",
+});
+
+
+let ColoredTagOption = new MultiCompBuilder(
+  {
+    label: StringControl,
+    icon: IconControl,
+    color: withDefault(ColorControl, ""),
+  },
+  (props) => props
+).build();
+
+ColoredTagOption = class extends ColoredTagOption implements OptionCompProperty {
+  propertyView(param: { autoMap?: boolean }) {
+    return (
+      <>
+        {this.children.label.propertyView({ label: trans("coloredTagOptionControl.tag") })}
+        {this.children.icon.propertyView({ label: trans("coloredTagOptionControl.icon") })}
+        {this.children.color.propertyView({ label: trans("coloredTagOptionControl.color") })}
+      </>
+    );
+  }
+};
+
+export const ColoredTagOptionControl = optionsControl(ColoredTagOption, {
+  initOptions: [{ label: "Tag1", icon: "/icon:solid/tag", color: "#f50" }, { label: "Tag2", icon: "/icon:solid/tag", color: "#2db7f5" }],
+  uniqField: "label",
 });
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -1951,6 +1951,9 @@ export const en = {
     "toUpdateRowsDesc": "An Array of Objects for Rows to Be Updated in Editable Tables.",
     "empty": "Empty",
     "falseValues": "Text When False",
+    "iconTrue": "Icon When True",
+    "iconFalse": "Icon When False",
+    "iconNull": "Icon When Null",
     "allColumn": "All",
     "visibleColumn": "Visible",
     "emptyColumns": "No Columns Are Currently Visible"
