Meeting & Colaboration

Author: Mac

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

@@ -32,8 +32,11 @@ import { stringExposingStateControl } from "../controls/codeStateControl";
 import { BoolControl } from "../controls/boolControl";
 import { BadgeBasicSection, badgeChildren } from "./badgeComp/badgeConstants";
 import { DropdownOptionControl } from "../controls/optionsControl";
-import { ReactElement, useContext } from "react";
+import { ReactElement, useContext, useEffect } from "react";
 import { CompNameContext, EditorContext } from "../editorState";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 
 const AvatarWrapper = styled(Avatar) <AvatarProps & { $cursorPointer?: boolean, $style: AvatarStyleType }>`
   background: ${(props) => props.$style.background};
@@ -118,10 +121,10 @@ const sideOptions = [
 ] as const;
 
 const childrenMap = {
-  style: styleControl(avatarContainerStyle),
-  avatarStyle: styleControl(AvatarStyle),
-  labelStyle: styleControl(avatarLabelStyle),
-  captionStyle: styleControl(avatarLabelStyle),
+  style: styleControl(avatarContainerStyle , 'style'),
+  avatarStyle: styleControl(AvatarStyle , 'avatarStyle'),
+  labelStyle: styleControl(avatarLabelStyle , 'labelStyle'),
+  captionStyle: styleControl(avatarLabelStyle , 'captionStyle'),
   icon: withDefault(IconControl, "/icon:solid/user"),
   iconSize: withDefault(NumberControl, 40),
   onEvent: eventHandlerControl(EventOptions),
@@ -197,7 +200,24 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
 };
 
 let AvatarBasicComp = (function () {
-  return new UICompBuilder(childrenMap, (props) => <AvatarView {...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', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+    return(<AvatarView {...props} />)})
     .setPropertyViewFn((children) => (
       <>
         <Section name={sectionNames.basic}>

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

@@ -10,7 +10,7 @@ import { NumberControl, StringControl } from "comps/controls/codeControl";
 import { Avatar, Tooltip } from "antd";
 import { clickEvent, eventHandlerControl, refreshEvent } from "../controls/eventHandlerControl";
 import styled from "styled-components";
-import { useContext, ReactElement } from "react";
+import { useContext, ReactElement, useEffect } from "react";
 import { MultiCompBuilder, stateComp, withDefault } from "../generators";
 import { EditorContext } from "comps/editorState";
 import { IconControl } from "../controls/iconControl";
@@ -19,6 +19,9 @@ import { optionsControl } from "../controls/optionsControl";
 import { BoolControl } from "../controls/boolControl";
 import { dropdownControl } from "../controls/dropdownControl";
 import { JSONObject } from "util/jsonTypes";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 
 const MacaroneList = [
   '#fde68a',
@@ -86,8 +89,8 @@ export const alignOptions = [
 ] as const;
 
 const childrenMap = {
-  avatar: styleControl(avatarGroupStyle),
-  style: styleControl(avatarContainerStyle),
+  avatar: styleControl(avatarGroupStyle , 'avatar'),
+  style: styleControl(avatarContainerStyle , 'style'),
   maxCount: withDefault(NumberControl, 3),
   avatarSize: withDefault(NumberControl, 40),
   alignment: dropdownControl(alignOptions, "center"),
@@ -142,7 +145,24 @@ const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & {
 };
 
 let AvatarGroupBasicComp = (function () {
-  return new UICompBuilder(childrenMap, (props, dispatch) => <AvatarGroupView {...props} dispatch={dispatch} />)
+  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', 'avatar'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+  
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []); 
+    return( <AvatarGroupView {...props} dispatch={dispatch} />
+)}) 
     .setPropertyViewFn((children) => (
       <>
         {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (

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

@@ -66,6 +66,12 @@ import dayjs from "dayjs";
 // import "dayjs/locale/zh-cn";
 import { getInitialsAndColorCode } from "util/stringUtils";
 import { default as CloseOutlined } from "@ant-design/icons/CloseOutlined";
+
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+
+
 dayjs.extend(relativeTime);
 // dayjs.locale("zh-cn");
 
@@ -100,8 +106,8 @@ const childrenMap = {
     "#": ["123", "456", "789"],
   }),
   onEvent: eventHandlerControl(EventOptions),
-  style: styleControl(CommentStyle),
-  animationStyle: styleControl(AnimationStyle),
+  style: styleControl(CommentStyle , 'style'),
+  animationStyle: styleControl(AnimationStyle , 'animationStyle'),
   commentList: jsonValueExposingStateControl("commentList", []),
   deletedItem: jsonValueExposingStateControl("deletedItem", []),
   submitedItem: jsonValueExposingStateControl("submitedItem", []),
@@ -370,9 +376,27 @@ const CommentCompBase = (
 };
 
 let CommentBasicComp = (function () {
-  return new UICompBuilder(childrenMap, (props, dispatch) => (
+  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 (
     <CommentCompBase {...props} dispatch={dispatch} />
-  ))
+  )})
     .setPropertyViewFn((children) => (
       <>
         <Section name={sectionNames.basic}>

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnAvatarsComp.tsx

@@ -10,13 +10,16 @@ import { AlignCenter, AlignLeft, AlignRight } from "lowcoder-design";
 import { NumberControl } from "comps/controls/codeControl";
 import { Avatar, Tooltip } from "antd";
 import { clickEvent, eventHandlerControl, refreshEvent } from "comps/controls/eventHandlerControl";
-import { ReactElement } from "react";
+import { ReactElement, useContext, useEffect } from "react";
 import { IconControl } from "comps/controls/iconControl";
 import { ColorControl } from "comps/controls/colorControl";
 import { optionsControl } from "comps/controls/optionsControl";
 import { BoolControl } from "comps/controls/boolControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { JSONObject } from "util/jsonTypes";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 
 const MenuLinkWrapper = styled.div`
   > a {
@@ -88,7 +91,7 @@ export const alignOptions = [
 
 export const ColumnAvatarsComp = (function () {
   const childrenMap = {
-    style: styleControl(avatarGroupStyle),
+    style: styleControl(avatarGroupStyle , 'style'),
     maxCount: withDefault(NumberControl, 3),
     avatarSize: withDefault(NumberControl, 40),
     alignment: dropdownControl(alignOptions, "center"),
@@ -107,7 +110,24 @@ export const ColumnAvatarsComp = (function () {
 
   return new ColumnTypeCompBuilder(
     childrenMap,
-    (props) => {
+    (props , dispatch) => {
+
+      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 (
         <Container
           $style={props.style}

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

@@ -58,6 +58,10 @@ import React, { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+
 const Wrapper = styled.div<{
   $style: InputLikeStyleType;
 }>`
@@ -96,8 +100,8 @@ let MentionTmpComp = (function () {
     viewRef: RefControl<TextAreaRef>,
     allowClear: BoolControl,
     autoHeight: AutoHeightControl,
-    style: styleControl(InputLikeStyle),
-    animationStyle: styleControl(AnimationStyle),
+    style: styleControl(InputLikeStyle , 'style'),
+    animationStyle: styleControl(AnimationStyle , 'animationStyle'),
     mentionList: jsonControl(checkMentionListData, {
       "@": ["Li Lei", "Han Meimei"],
       "#": ["123", "456", "789"],
@@ -106,7 +110,25 @@ let MentionTmpComp = (function () {
     invalid: booleanExposingStateControl("invalid"),
   };
 
-  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,
+      });
+    }, []);
+
+
     const { mentionList } = props;
     const [validateState, setvalidateState] = useState({});
     const [activationFlag, setActivationFlag] = useState(false);