Theme: created a hook to merge styles initially

Author: raheeliftikhar5

client/packages/lowcoder/src/util/hooks.ts

@@ -17,6 +17,10 @@ import { EditorContext } from "comps/editorState";
 import { getDataSourceStructures } from "redux/selectors/datasourceSelectors";
 import { DatasourceStructure } from "api/datasourceApi";
 import { loadAuthSearchParams } from "pages/userAuth/authUtils";
+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 { CompAction, changeChildAction } from "lowcoder-core";
 
 export const ForceViewModeContext = React.createContext<boolean>(false);
 
@@ -162,3 +166,29 @@ export function useMetaData(datasourceId: string) {
     [datasourceStructure, datasourceId]
   );
 }
+
+
+export function useMergeCompStyles(
+  props: Record<string, any>,
+  dispatch: (action: CompAction) => void
+) {
+  const theme = useContext(ThemeContext);
+  const compType = useContext(CompTypeContext);
+  const compTheme = theme?.theme?.components?.[compType];
+  const themeId = theme?.themeId;
+
+  const styleKeys = Object.keys(props).filter(key => key.toLowerCase().endsWith('style'));
+  const styleProps: Record<string, any> = {};
+  styleKeys.forEach((key: string) => {
+    styleProps[key] = (props as any)[key];
+  });
+
+  useEffect(() => {
+    setInitialCompStyles({
+      dispatch,
+      compTheme,
+      styleProps,
+      themeId,
+    });
+  }, []);
+}