Theme: apply theme styles on table comp

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx

@@ -41,6 +41,10 @@ import { messageInstance } from "lowcoder-design/src/components/GlobalInstances"
 import { ReactRef, ResizeHandleAxis } from "layout/gridLayoutPropTypes";
 import { CellColorViewType } from "./column/tableColumnComp";
 import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { childrenToProps } from "@lowcoder-ee/comps/generators/multi";
 
 
 function genLinerGradient(color: string) {
@@ -345,7 +349,6 @@ const TableTd = styled.td<{
   background: ${(props) => props.$background} !important;
   border-color: ${(props) => props.$style.border} !important;
   border-radius: ${(props) => props.$style.radius};
-
   padding: 0 !important;
 
   > div {
@@ -775,6 +778,24 @@ export function TableCompView(props: {
     };
   }, [pagination, data]);
 
+  const childrenProps = childrenToProps(comp.children);
+  const theme = useContext(ThemeContext);
+  const compType = useContext(CompTypeContext);
+  const compTheme = theme?.theme?.components?.[compType];
+
+  const styleProps: Record<string, any> = {};
+  ['style', 'rowStyle', 'toolbarStyle', 'headerStyle', 'columnsStyle'].forEach((key: string) => {
+    styleProps[key] = (childrenProps as any)[key];
+  });
+
+  useEffect(() => {
+    setInitialCompStyles({
+      dispatch: comp.dispatch,
+      compTheme,
+      styleProps,
+    });
+  }, []);
+
   const handleChangeEvent = useCallback(
     (eventName: TableEventOptionValues) => {
       if (eventName === "saveChanges" && !compChildren.onEvent.isBind(eventName)) {

client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx

@@ -205,12 +205,12 @@ const tableChildrenMap = {
   pagination: PaginationControl,
   sort: valueComp<Array<SortValue>>([]),
   toolbar: TableToolbarComp,
-  style: withDefault(styleControl(TableStyle), {borderWidth: '1px'}),
-  rowStyle: withDefault(styleControl(TableRowStyle),{ borderWidth: '1px'}),
-  toolbarStyle: styleControl(TableToolbarStyle),
-  headerStyle:withDefault(styleControl(TableHeaderStyle), {borderWidth: '1px'}),
+  style: styleControl(TableStyle, 'style'),
+  rowStyle: styleControl(TableRowStyle, 'rowStyle'),
+  toolbarStyle: styleControl(TableToolbarStyle, 'toolbarStyle'),
+  headerStyle: styleControl(TableHeaderStyle, 'headerStyle'),
   searchText: StringControl,
-  columnsStyle: withDefault(styleControl(TableColumnStyle), {radius:'0px'}),
+  columnsStyle: styleControl(TableColumnStyle, 'columnsStyle'),
   viewModeResizable: BoolControl,
   visibleResizables: BoolControl,
   // sample data for regenerating columns

client/packages/lowcoder/src/comps/controls/styleControl.tsx

@@ -355,8 +355,12 @@ function calcColors<ColorMap extends Record<string, string>>(
   bgColor?: string,
   compTheme?: Record<string, string>,
 ) {
-  let themeWithDefault = (theme || defaultTheme) as unknown as Record<string, string>;
-  themeWithDefault = {...themeWithDefault, ...(compTheme || {})};
+  // let themeWithDefault = (theme || defaultTheme) as unknown as Record<string, string>;
+  let themeWithDefault = {
+    ...defaultTheme,
+    ...(theme || {}),
+    ...(compTheme || {}),
+  } as unknown as Record<string, string>;
 
   // Cover what is not there for the first pass
   let res: Record<string, string> = {};

client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx

@@ -241,7 +241,7 @@ export function contrastText(
   textDark: string,
   textLight: string
 ) {
-  return isDarkColor(color) && color !== "#00000000" ? textLight : textDark;
+  return color && isDarkColor(color) && color !== "#00000000" ? textLight : textDark;
 }
 
 // return similar background color

client/packages/lowcoder/src/constants/themeConstants.ts

@@ -20,6 +20,21 @@ const input = {
   }
 };
 
+const table = {
+  style: {
+    borderWidth: '1px'
+  },
+  rowStyle: {
+    borderWidth: '1px'
+  },
+  headerStyle: {
+    borderWidth: '1px'
+  },
+  columnsStyle: {
+    radius: '0px'
+  }
+}
+
 export const defaultTheme: ThemeDetail = {
   primary: "#3377FF",
   textDark: "#222222",
@@ -34,6 +49,7 @@ export const defaultTheme: ThemeDetail = {
   padding: "3px",
   gridColumns: "24",
   textSize: "14px",
+  text: "#222222",
   animation: "",
   animationDelay: "",
   animationDuration: "",
@@ -44,5 +60,6 @@ export const defaultTheme: ThemeDetail = {
   components: {
     text,
     input,
+    table,
   },
 };

client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx

@@ -30,6 +30,7 @@ import ThemeSettingsCompStyles from "components/ThemeSettingsCompStyles";
 import { JSONObject } from "util/jsonTypes";
 import PreviewApp from "components/PreviewApp";
 import { parseCompType } from "comps/utils/remote";
+import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
 
 const CompDiv = styled.div`
   display: flex;
@@ -308,7 +309,7 @@ export const ThemeCompPanel = (props: any) => {
           minWidth: "auto",
           width: "100%",
         }}
-        theme={theme}
+        theme={{...defaultTheme, ...theme}}
         dsl={appDsl}
       />
     );