remove useMergeCompStyles hook from comps

Author: raheeliftikhar5

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

@@ -55,8 +55,6 @@ import {
   autocompleteIconColor,
   componentSize,
 } from "./autoCompleteConstants";
-import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
-
 
 const InputStyle = styled(Input) <{ $style: InputLikeStyleType }>`
 box-shadow: ${props=>`${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
@@ -104,9 +102,7 @@ const getValidate = (value: any): "" | "warning" | "error" | undefined => {
 };
 
 let AutoCompleteCompBase = (function () {
-  return new UICompBuilder(childrenMap, (props, dispatch) => {
-   useMergeCompStyles(props as Record<string, any>, dispatch);
-
+  return new UICompBuilder(childrenMap, (props) => {
     const {
       items,
       onEvent,

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

@@ -34,7 +34,6 @@ import { BadgeBasicSection, badgeChildren } from "./badgeComp/badgeConstants";
 import { DropdownOptionControl } from "../controls/optionsControl";
 import { ReactElement, useContext, useEffect } from "react";
 import { CompNameContext, EditorContext } from "../editorState";
-import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const AvatarWrapper = styled(Avatar) <AvatarProps & { $cursorPointer?: boolean, $style: AvatarStyleType }>`
   background: ${(props) => props.$style.background};
@@ -198,9 +197,7 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
 };
 
 let AvatarBasicComp = (function () {
-  return new UICompBuilder(childrenMap, (props , dispatch) => { 
-    useMergeCompStyles(props as Record<string, any>, dispatch);    
-
+  return new UICompBuilder(childrenMap, (props) => {
     return(<AvatarView {...props} />)})
     .setPropertyViewFn((children) => (
       <>

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

@@ -19,7 +19,6 @@ import { optionsControl } from "../controls/optionsControl";
 import { BoolControl } from "../controls/boolControl";
 import { dropdownControl } from "../controls/dropdownControl";
 import { JSONObject } from "util/jsonTypes";
-import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const MacaroneList = [
   '#fde68a',
@@ -143,9 +142,7 @@ const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & {
 };
 
 let AvatarGroupBasicComp = (function () {
-  return new UICompBuilder(childrenMap, (props, dispatch) =>{
-    useMergeCompStyles(props as Record<string, any>, dispatch);    
-
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
     return( <AvatarGroupView {...props} dispatch={dispatch} />
 )}) 
     .setPropertyViewFn((children) => (

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

@@ -27,7 +27,6 @@ import { RefControl } from "comps/controls/refControl";
 import React, { useContext, useEffect } from "react";
 import { AnimationStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
 import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
-import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const FormLabel = styled(CommonBlueLabel)`
   font-size: 13px;
@@ -135,9 +134,7 @@ const ButtonTmpComp = (function () {
     animationStyle: styleControl(AnimationStyle, 'animationStyle'),
     viewRef: RefControl<HTMLElement>,
   };
-  return new UICompBuilder(childrenMap, (props , dispatch) => {
-    useMergeCompStyles(props as Record<string, any>, dispatch);
-
+  return new UICompBuilder(childrenMap, (props) => {
     return(
       <ButtonCompWrapper disabled={props.disabled}>
         <EditorContext.Consumer>

client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx

@@ -22,7 +22,6 @@ import {
   getButtonStyle,
 } from "./buttonCompConstants";
 import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
-import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const StyledDropdownButton = styled(DropdownButton)`
   width: 100%;
@@ -90,9 +89,7 @@ const DropdownTmpComp = (function () {
     onEvent: ButtonEventHandlerControl,
     style: styleControl(DropdownStyle, 'style'),
   };
-  return new UICompBuilder(childrenMap, (props, dispatch) => {
-   useMergeCompStyles(props as Record<string, any>, dispatch);
-
+  return new UICompBuilder(childrenMap, (props) => {
     const hasIcon =
       props.options.findIndex((option) => (option.prefixIcon as ReactElement)?.props.value) > -1;
     const items = props.options

client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx

@@ -17,7 +17,6 @@ import styled from "styled-components";
 import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { manualOptionsControl } from "comps/controls/optionsControl";
 import { useContext, useEffect } from "react";
-import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const StyledFloatButton = styled(FloatButton)<{
   $animationStyle: AnimationStyleType;
@@ -133,8 +132,7 @@ const FloatButtonView = (props: RecordConstructorToView<typeof childrenMap>) =>
 };
 
 let FloatButtonBasicComp = (function () {
-    return new UICompBuilder(childrenMap, (props , dispatch) => {
-      useMergeCompStyles(props, dispatch);
+    return new UICompBuilder(childrenMap, (props) => {
       return(
         <FloatButtonView {...props} />
       )})

client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx

@@ -22,7 +22,6 @@ import { RefControl } from "comps/controls/refControl";
 
 import { EditorContext } from "comps/editorState";
 import React, { useContext, useEffect } from "react";
-import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const Link = styled(Button)<{
   $style: LinkStyleType;
@@ -92,10 +91,7 @@ const LinkTmpComp = (function () {
     suffixIcon: IconControl,
     viewRef: RefControl<HTMLElement>,
   };
-  return new UICompBuilder(childrenMap, (props, dispatch) => {
-    useMergeCompStyles(props as Record<string, any>, dispatch);    
-
-
+  return new UICompBuilder(childrenMap, (props) => {  
     // chrome86 bug: button children should not contain only empty span
     const hasChildren = hasIcon(props.prefixIcon) || !!props.text || hasIcon(props.suffixIcon);
     return (

client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx

@@ -24,7 +24,6 @@ import { BoolControl } from "comps/controls/boolControl";
 import type { ItemType } from "antd/es/menu/interface";
 import { RefControl } from "comps/controls/refControl";
 import { EditorContext } from "comps/editorState"; 
-import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const Error = styled.div`
   color: #f5222d;
@@ -74,9 +73,7 @@ const ScannerTmpComp = (function () {
     style: styleControl(DropdownStyle, 'style'),
     viewRef: RefControl<HTMLElement>,
   };
-  return new UICompBuilder(childrenMap, (props, dispatch) => {
-    useMergeCompStyles(props as Record<string, any>, dispatch);
-
+  return new UICompBuilder(childrenMap, (props) => {
     const [showModal, setShowModal] = useState(false);
     const [errMessage, setErrMessage] = useState("");
     const [videoConstraints, setVideoConstraints] = useState<MediaTrackConstraints>({

client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx

@@ -25,7 +25,6 @@ import { BoolControl } from "comps/controls/boolControl";
 import { RefControl } from "comps/controls/refControl";
 import React, { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState"; 
-import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const IconWrapper = styled.div`
   display: flex;
@@ -66,11 +65,10 @@ const ToggleTmpComp = (function () {
     showBorder: withDefault(BoolControl, true),
     viewRef: RefControl<HTMLElement>,
   };
-  return new UICompBuilder(childrenMap, (props, dispatch) => {
+  return new UICompBuilder(childrenMap, (props) => {
     const text = props.showText
       ? (props.value.value ? props.trueText : props.falseText) || undefined
       : undefined;
-    useMergeCompStyles(props as Record<string, any>, dispatch);
 
     return (
       <ButtonCompWrapperStyled

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

@@ -17,7 +17,6 @@ import { AnimationStyle, AnimationStyleType, CarouselStyle } from "comps/control
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
-import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 // TODO: dots at top position needs proper margin (should be the same as bottom position)
 
@@ -49,9 +48,7 @@ let CarouselBasicComp = (function () {
     animationStyle: styleControl(AnimationStyle , 'animationStyle'),
     ...formDataChildren,
   };
-  return new UICompBuilder(childrenMap, (props, dispatch) => {
-    useMergeCompStyles(props as Record<string, any>, dispatch);
-
+  return new UICompBuilder(childrenMap, (props) => {
     const containerRef = useRef<HTMLDivElement>(null);
     const [height, setHeight] = useState(0);
     const onResize = () => {