Theme: apply theme styles in textComp

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/textComp.tsx

@@ -6,7 +6,7 @@ import styled, { css } from "styled-components";
 import { AlignCenter } from "lowcoder-design";
 import { AlignLeft } from "lowcoder-design";
 import { AlignRight } from "lowcoder-design";
-import { UICompBuilder } from "../generators";
+import { UICompBuilder, withDefault } from "../generators";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing";
 import { markdownCompCss, TacoMarkDown } from "lowcoder-design";
 import { styleControl } from "comps/controls/styleControl";
@@ -18,8 +18,12 @@ import { alignWithJustifyControl } from "comps/controls/alignControl";
 import { MarginControl } from "../controls/marginControl";
 import { PaddingControl } from "../controls/paddingControl";
 
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
+import { ThemeContext } from "../utils/themeContext";
+import { CompTypeContext } from "../utils/compTypeContext";
+import { changeChildAction } from "lowcoder-core";
+import { setInitialCompStyles } from "../utils/themeUtil";
 
 const getStyle = (style: TextStyleType) => {
   return css`
@@ -112,6 +116,7 @@ const typeOptions = [
     value: "text",
   },
 ] as const;
+
 const VerticalAlignmentOptions = [
   { label: <AlignTop />, value: "flex-start" },
   { label: <AlignVerticalCenter />, value: "center" },
@@ -128,13 +133,29 @@ let TextTmpComp = (function () {
     type: dropdownControl(typeOptions, "markdown"),
     horizontalAlignment: alignWithJustifyControl(),
     verticalAlignment: dropdownControl(VerticalAlignmentOptions, "center"),
-    style: styleControl(TextStyle),
+    style: styleControl(TextStyle, 'style'),
     animationStyle: styleControl(AnimationStyle),
     margin: MarginControl,
     padding: PaddingControl,
   };
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
     const value = props.text.value;
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+  
     return (
       <TextContainer
         $animationStyle={props.animationStyle}

client/packages/lowcoder/src/comps/utils/themeUtil.ts

@@ -1,6 +1,8 @@
 import { ThemeType } from "api/commonSettingApi";
 import { getLocalThemeId } from "util/localStorageUtil";
 import { getGlobalSettings } from "./globalSettings";
+import { CompAction, multiChangeAction, changeValueAction } from "lowcoder-core";
+import { JSONObject, JSONValue } from "@lowcoder-ee/util/jsonTypes";
 
 export const DEFAULT_THEMEID = "default";
 
@@ -20,3 +22,26 @@ export function getCurrentTheme(themeList: ThemeType[], appThemeId: string) {
       : appThemeId
   );
 }
+
+export function setInitialCompStyles({
+  dispatch,
+  compTheme,
+  styleProps,
+}: {
+  dispatch: (action: CompAction) => void,
+  compTheme?: JSONObject,
+  styleProps: Record<string, any>,
+}) {
+  const styleKeys = Object.keys(styleProps);
+  const actions: Record<string, any> = {};
+  styleKeys.forEach(styleKey => {
+    actions[styleKey] = changeValueAction({
+      ...(compTheme?.[styleKey] as object || {}),
+      ...styleProps[styleKey],
+    }, false);
+  })
+
+  dispatch(
+    multiChangeAction(actions),
+  );
+}