Theme: apply theme styles in rating comp

Author: raheeliftikhar5

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

@@ -17,6 +17,10 @@ import { trans } from "i18n";
 
 import { useContext, useEffect, useRef } from "react";
 import { EditorContext } from "comps/editorState";
+import { CompTypeContext } from "../utils/compTypeContext";
+import { ThemeContext } from "../utils/themeContext";
+import { setInitialCompStyles } from "../utils/themeUtil";
+
 
 const EventOptions = [changeEvent] as const;
 
@@ -43,20 +47,37 @@ const RatingBasicComp = (function () {
     allowHalf: BoolControl,
     disabled: BoolCodeControl,
     onEvent: eventHandlerControl(EventOptions),
-    style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}) , 
-    animationStyle: styleControl(AnimationStyle),
+    style: styleControl(InputFieldStyle, 'style') , 
+    animationStyle: styleControl(AnimationStyle, 'animationStyle'),
     labelStyle: styleControl(
       LabelStyle.filter(
         (style) => ['accent', 'validate'].includes(style.name) === false
-      )
+      ),
+      'labelStyle',
     ),
-    inputFieldStyle: migrateOldData(styleControl(RatingStyle), fixOldData),
+    inputFieldStyle: migrateOldData(styleControl(RatingStyle, 'inputFieldStyle'), fixOldData),
     ...formDataChildren,
   };
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
     const defaultValue = { ...props.defaultValue }.value;
     const value = { ...props.value }.value;
-    const changeRef = useRef(false)
+    const changeRef = useRef(false);
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+  
+    const styleProps: Record<string, any> = {};
+    ['style', 'animationStyle', 'labelStyle', 'inputFieldStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
 
     useEffect(() => {
       props.value.onChange(defaultValue);

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

@@ -42,6 +42,19 @@ const link = {
   }
 }
 
+const rating = {
+  style: {
+    background: 'transparent',
+    borderWidth: '0px',
+  },
+  labelStyle: {
+    borderWidth: '0px',
+  },
+  inputFieldStyle: {
+    borderWidth: '0px',
+  }
+}
+
 export const defaultTheme: ThemeDetail = {
   primary: "#3377FF",
   textDark: "#222222",
@@ -69,5 +82,6 @@ export const defaultTheme: ThemeDetail = {
     input,
     table,
     link,
+    rating,
   },
 };