float component

Mac · raheeliftikhar5 · commit 1587f0b0ef11 · 2024-07-03T14:22:20.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx
@@ -16,6 +16,10 @@ import { IconControl } from "comps/controls/iconControl";
 import styled from "styled-components";
 import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { manualOptionsControl } from "comps/controls/optionsControl";
+import { useContext, useEffect } from "react";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 
 const StyledFloatButton = styled(FloatButton)<{
   $animationStyle: AnimationStyleType;
@@ -83,8 +87,8 @@ const childrenMap = {
     image: StringControl,
     icon: withDefault(IconControl, '/icon:antd/questioncircleoutlined'),
     badgeStyle: styleControl(BadgeStyle),
-    style: styleControl(FloatButtonStyle),
-    animationStyle: styleControl(AnimationStyle),
+    style: styleControl(FloatButtonStyle , 'style'),
+    animationStyle: styleControl(AnimationStyle , 'animationStyle'),
     buttons: manualOptionsControl(buttonGroupOption, {
         initOptions: [
             { id: 0, label: trans("optionsControl.optionI", { i: '1' }), icon: "/icon:antd/filetextoutlined", badge: '1' },
@@ -131,9 +135,26 @@ const FloatButtonView = (props: RecordConstructorToView<typeof childrenMap>) =>
 };
 
 let FloatButtonBasicComp = (function () {
-    return new UICompBuilder(childrenMap, (props) => (
+    return new UICompBuilder(childrenMap, (props , dispatch) => {
+        const theme = useContext(ThemeContext);
+        const compType = useContext(CompTypeContext);
+        const compTheme = theme?.theme?.components?.[compType];
+        const styleProps: Record<string, any> = {};
+        ['style', 'animationStyle'].forEach((key: string) => {
+          styleProps[key] = (props as any)[key];
+        });
+    
+        useEffect(() => {
+          setInitialCompStyles({
+            dispatch,
+            compTheme,
+            styleProps,
+          });
+        }, []);
+    
+        return(
       <FloatButtonView {...props} />
-    ))
+    )})
       .setPropertyViewFn((children) => (
         <>
           <Section name={sectionNames.basic}>
