Theme: applied theme styles in input comp

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx

@@ -20,13 +20,14 @@ import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { dropdownControl } from "@lowcoder-ee/comps/controls/dropdownControl";
 import { DataOption, DataOptionType, ModeOptions, menuItemStyleOptions, mobileNavJsonMenuItems } from "./navLayoutConstants";
 import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
-import { NavLayoutItemActiveStyle, NavLayoutItemActiveStyleType, NavLayoutItemHoverStyle, NavLayoutItemHoverStyleType, NavLayoutItemStyle, NavLayoutItemStyleType, NavLayoutStyle, NavLayoutStyleType, defaultTheme } from "@lowcoder-ee/comps/controls/styleControlConstants";
+import { NavLayoutItemActiveStyle, NavLayoutItemActiveStyleType, NavLayoutItemHoverStyle, NavLayoutItemHoverStyleType, NavLayoutItemStyle, NavLayoutItemStyleType, NavLayoutStyle, NavLayoutStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants";
 import Segmented from "antd/es/segmented";
 import { controlItem } from "components/control";
 import { check } from "@lowcoder-ee/util/convertUtils";
 import { JSONObject } from "@lowcoder-ee/util/jsonTypes";
 import { isEmpty } from "lodash";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
 
 const TabBar = React.lazy(() => import("antd-mobile/es/components/tab-bar"));
 const TabBarItem = React.lazy(() =>

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

@@ -17,7 +17,7 @@ import { TransformerListComp } from "./transformerListComp";
 import UIComp from "./uiComp";
 import { ThemeContext } from "comps/utils/themeContext";
 import { ModuleLayoutCompName } from "constants/compConstants";
-import { defaultTheme as localDefaultTheme } from "comps/controls/styleControlConstants";
+import { defaultTheme as localDefaultTheme } from "constants/themeConstants";
 import { ModuleLoading } from "components/ModuleLoading";
 import EditorSkeletonView from "pages/editor/editorSkeletonView";
 import { getGlobalSettings } from "comps/utils/globalSettings";

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

@@ -13,7 +13,6 @@ import {
   supportChildrenTree,
 } from "comps/comps/tableComp/tableUtils";
 import {
-  defaultTheme,
   handleToHoverRow,
   handleToSelectedRow,
   TableColumnLinkStyleType,
@@ -41,6 +40,7 @@ import { EmptyContent } from "pages/common/styledComponent";
 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";
 
 
 function genLinerGradient(color: string) {

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

@@ -7,7 +7,7 @@ import { TableOnEventView } from "comps/comps/tableComp/tableTypes";
 import { BoolControl } from "comps/controls/boolControl";
 import { StringControl } from "comps/controls/codeControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
-import { defaultTheme, TableToolbarStyleType } from "comps/controls/styleControlConstants";
+import { TableToolbarStyleType } from "comps/controls/styleControlConstants";
 import { stateComp } from "comps/generators";
 import { genRandomKey } from "comps/utils/idGenerator";
 import { ThemeContext } from "comps/utils/themeContext";
@@ -38,6 +38,7 @@ import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import styled, { css } from "styled-components";
 import { JSONValue } from "util/jsonTypes";
 import { ControlNodeCompBuilder } from "comps/generators/controlCompBuilder";
+import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
 
 const SaveChangeButtons = styled.div`
   display: flex;

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

@@ -134,7 +134,7 @@ let TextTmpComp = (function () {
     horizontalAlignment: alignWithJustifyControl(),
     verticalAlignment: dropdownControl(VerticalAlignmentOptions, "center"),
     style: styleControl(TextStyle, 'style'),
-    animationStyle: styleControl(AnimationStyle),
+    animationStyle: styleControl(AnimationStyle, 'animationStyle'),
     margin: MarginControl,
     padding: PaddingControl,
   };
@@ -143,8 +143,9 @@ let TextTmpComp = (function () {
     const theme = useContext(ThemeContext);
     const compType = useContext(CompTypeContext);
     const compTheme = theme?.theme?.components?.[compType];
+  
     const styleProps: Record<string, any> = {};
-    ['style'].forEach((key: string) => {
+    ['style', 'animationStyle'].forEach((key: string) => {
       styleProps[key] = (props as any)[key];
     });
 

client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx

@@ -33,8 +33,11 @@ import { InputRef } from "antd/es/input";
 import { RefControl } from "comps/controls/refControl";
 import { migrateOldData, withDefault } from "comps/generators/simpleGenerators";
 
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 
 /**
  * Input Comp
@@ -51,16 +54,34 @@ const childrenMap = {
   viewRef: RefControl<InputRef>,
   showCount: BoolControl,
   allowClear: BoolControl,
-  style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}) , 
-  labelStyle:styleControl(LabelStyle), 
+  style: styleControl(InputFieldStyle, 'style'), 
+  labelStyle:styleControl(LabelStyle, 'labelStyle'), 
   prefixIcon: IconControl,
   suffixIcon: IconControl,
-  inputFieldStyle:withDefault(styleControl(InputLikeStyle),{borderWidth: '1px'}) ,
-  animationStyle: styleControl(AnimationStyle),
+  inputFieldStyle: styleControl(InputLikeStyle, 'inputFieldStyle') ,
+  animationStyle: styleControl(AnimationStyle, 'animationStyle'),
 };
 
-let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
+let InputBasicComp = new UICompBuilder(childrenMap, (props, dispatch) => {
   const [inputProps, validateState] = useTextInputProps(props);
+
+  const theme = useContext(ThemeContext);
+  const compType = useContext(CompTypeContext);
+  const compTheme = theme?.theme?.components?.[compType];
+
+  const styleProps: Record<string, any> = {};
+  ['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
+    styleProps[key] = (props as any)[key];
+  });
+
+  useEffect(() => {
+    setInitialCompStyles({
+      dispatch,
+      compTheme,
+      styleProps,
+    });
+  }, []);
+
   return props.label({
     required: props.required,
     children: (