feat: allow table column styling

Author: raheeliftikhar5

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

@@ -1,14 +1,16 @@
 import { BoolControl } from "comps/controls/boolControl";
-import { NumberControl, StringControl } from "comps/controls/codeControl";
+import { ColorOrBoolCodeControl, NumberControl, RadiusControl, StringControl } from "comps/controls/codeControl";
 import { dropdownControl, HorizontalAlignmentControl } from "comps/controls/dropdownControl";
-import { MultiCompBuilder, stateComp, valueComp } from "comps/generators";
+import { MultiCompBuilder, stateComp, valueComp, withContext, withDefault } from "comps/generators";
 import { withSelectedMultiContext } from "comps/generators/withSelectedMultiContext";
 import { genRandomKey } from "comps/utils/idGenerator";
 import { trans } from "i18n";
 import _ from "lodash";
 import {
   changeChildAction,
   changeValueAction,
+  CompAction,
+  CompActionTypes,
   ConstructorToComp,
   ConstructorToDataType,
   ConstructorToNodeType,
@@ -19,8 +21,10 @@ import {
   withFunction,
   wrapChildAction,
 } from "lowcoder-core";
-import { AlignClose, AlignLeft, AlignRight } from "lowcoder-design";
+import { AlignClose, AlignLeft, AlignRight, controlItem } from "lowcoder-design";
 import { ColumnTypeComp, ColumnTypeCompMap } from "./columnTypeComp";
+import { ColorControl } from "comps/controls/colorControl";
+import { JSONValue } from "util/jsonTypes";
 
 export type Render = ReturnType<ConstructorToComp<typeof RenderComp>["getOriginalComp"]>;
 export const RenderComp = withSelectedMultiContext(ColumnTypeComp);
@@ -51,6 +55,31 @@ const columnFixOptions = [
   },
 ] as const;
 
+const cellColorLabel = trans("table.cellColor");
+const CellColorTempComp = withContext(
+  new MultiCompBuilder({ color: ColorOrBoolCodeControl }, (props) => props.color)
+    .setPropertyViewFn((children) =>
+      children.color.propertyView({
+        label: cellColorLabel,
+        tooltip: trans("table.cellColorDesc"),
+      })
+    )
+    .build(),
+  ["currentCell"] as const
+);
+
+// @ts-ignore
+export class CellColorComp extends CellColorTempComp {
+  override getPropertyView() {
+    return controlItem({ filterText: cellColorLabel }, super.getPropertyView());
+  }
+}
+
+// fixme, should be infer from RowColorComp, but withContext type incorrect
+export type CellColorViewType = (param: {
+  currentCell: JSONValue | undefined; //number | string;
+}) => string;
+
 export const columnChildrenMap = {
   // column title
   title: StringControl,
@@ -67,6 +96,11 @@ export const columnChildrenMap = {
   tempHide: stateComp<boolean>(false),
   fixed: dropdownControl(columnFixOptions, "close"),
   editable: BoolControl,
+  background: withDefault(ColorControl, ""),
+  text: withDefault(ColorControl, ""),
+  border: withDefault(ColorControl, ""),
+  radius: withDefault(RadiusControl, ""),
+  cellColor: CellColorComp, 
 };
 
 /**
@@ -90,6 +124,21 @@ const ColumnInitComp = new MultiCompBuilder(columnChildrenMap, (props, dispatch)
   .build();
 
 export class ColumnComp extends ColumnInitComp {
+  override reduce(action: CompAction) {
+    let comp = super.reduce(action);
+    if (action.type === CompActionTypes.UPDATE_NODES_V2) {
+      comp = comp.setChild(
+        "cellColor",
+        comp.children.cellColor.reduce(
+          CellColorComp.changeContextDataAction({
+            currentCell: undefined,
+          })
+        )
+      );
+    }
+    return comp;
+  }
+
   override getView() {
     const superView = super.getView();
     const columnType = this.children.render.getSelectedComp().getComp().children.compType.getView();
@@ -143,6 +192,26 @@ export class ColumnComp extends ColumnInitComp {
         })}
         {this.children.autoWidth.getView() === "fixed" &&
           this.children.width.propertyView({ label: trans("prop.width") })}
+        {controlItem({}, (
+          <div style={{marginTop: '8px'}}>
+            <b>{"Style"}</b>
+          </div>
+        ))}
+        {this.children.background.propertyView({
+          label: trans('style.background'),
+        })}
+        {this.children.text.propertyView({
+          label: trans('text'),
+        })}
+        {this.children.border.propertyView({
+          label: trans('style.border')
+        })}
+        {this.children.radius.propertyView({
+          label: trans('style.borderRadius'),
+          // preInputNode: <StyledIcon as={IconRadius} title="" />,	
+          placeholder: '3px',
+        })}
+        {this.children.cellColor.getPropertyView()}
       </>
     );
   }