Theme: added debounce for style changes and update theme

raheeliftikhar5 · raheeliftikhar5 · commit 61e3963d3621 · 2024-07-03T14:19:51.000+05:00
diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts
@@ -2,6 +2,7 @@ import Api from "./api";
 import { AxiosPromise } from "axios";
 import { ApiResponse, GenericApiResponse } from "./apiResponses";
 import { trans } from "i18n";
+import { JSONObject } from "@lowcoder-ee/util/jsonTypes";
 
 export type FetchCommonSettingPayload = {
   orgId: string;
@@ -59,7 +60,7 @@ export interface ThemeDetail {
   boxShadow?: string;
   boxShadowColor?: string;
   animationIterationCount?: string;
-  components?: Record<string, object>;
+  components?: Record<string, JSONObject>;
 }
 
 export function getThemeDetailName(key: keyof ThemeDetail) {
diff --git a/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx b/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
@@ -12,7 +12,7 @@ import {
   RightPanelContentWrapper,
 } from "pages/editor/right/styledComponent";
 import { tableDragClassName } from "pages/tutorials/tutorialsConstant";
-import React, { useEffect, useMemo, useState } from "react";
+import React, { Fragment, useEffect, useMemo, useState } from "react";
 import styled from "styled-components";
 import {
   BaseSection,
@@ -162,8 +162,8 @@ export const ThemeCompPanel = (props: any) => {
       setSelectedComp(compType);
       const compKey = genRandomKey();
       let { comp, defaultDataFn } = compInfo;
-  
-      const compData = parseCompType(compType)
+      let newComp: any;
+
       if (compInfo.lazyLoad) {
         comp = (await import(`../../../comps/${compInfo.compPath!}`))[compInfo.compName!];
         const {
@@ -175,32 +175,32 @@ export const ThemeCompPanel = (props: any) => {
           const module = await import(`../../../comps/${defaultDataFnPath}.tsx`);
           defaultDataFn = module[defaultDataFnName];
         }
-        const newComp = new comp!({});
-        const compChildrens = newComp.children;
-        const styleChildrenKeys = Object.keys(compChildrens).filter(child => child.toLowerCase().endsWith('style'));
-        let styleChildrens: Record<string, any> = {};
-        styleChildrenKeys.forEach((childKey: string) => {
-          styleChildrens[childKey] = compChildrens[childKey];
-        })
-        setStyleChildrens(styleChildrens);
+        newComp = new comp!({});
       } else {
         comp = compInfo.comp;
-        let newComp = new comp!({
+        newComp = new comp!({
           dispatch: (action) => {
             if (newComp) {
               newComp = newComp.reduce(action);
             }
           },
         }) as any;
         await newComp.load();
+      }
 
-
+      if (newComp) {
         const compChildrens = newComp.children;
-        const styleChildrenKeys = Object.keys(compChildrens).filter(child => child.toLowerCase().endsWith('style') || child.toLowerCase().endsWith('styles'));
+        let styleChildrenKeys = Object.keys(compChildrens).filter(child => child.toLowerCase().endsWith('style'));
         let styleChildrens: Record<string, any> = {};
         styleChildrenKeys.forEach((childKey: string) => {
           styleChildrens[childKey] = compChildrens[childKey];
         })
+        if (compChildrens.container) {
+          styleChildrenKeys = Object.keys(compChildrens.container.children).filter(child => child.toLowerCase().endsWith('style'));
+          styleChildrenKeys.forEach((childKey: string) => {
+            styleChildrens[childKey] = compChildrens.container.children[childKey];
+          })
+        }
         setStyleChildrens(styleChildrens);
       }
   
@@ -277,7 +277,7 @@ export const ThemeCompPanel = (props: any) => {
       <>
         {Object.keys(styleChildrens || {})?.map((styleKey: string) => {
           return (
-            <>
+            <Fragment key={styleKey}>
               <h4>
                 { sectionNames.hasOwnProperty(styleKey)
                   ? sectionNames[styleKey as keyof typeof sectionNames]
@@ -286,12 +286,12 @@ export const ThemeCompPanel = (props: any) => {
               </h4>
               <ThemeSettingsCompStyles
                 styleOptions={Object.keys(styleChildrens?.[styleKey].children)}
-                defaultStyle={theme.components?.[selectedComp] || {}}
+                defaultStyle={{...theme.components?.[selectedComp]?.[styleKey] || {}}}
                 configChange={(params) => {
-                  props.onCompStyleChange(selectedComp, params);
+                  props.onCompStyleChange(selectedComp, styleKey, params);
                 }}
               />
-            </>
+            </Fragment>
           )
         })}
       </>
@@ -304,7 +304,7 @@ export const ThemeCompPanel = (props: any) => {
     return (
       <PreviewApp
         style={{
-          height: "500px",
+          height: "600px",
           minWidth: "auto",
           width: "100%",
         }}
@@ -341,11 +341,9 @@ export const ThemeCompPanel = (props: any) => {
           {compList}
         </PropertySectionContext.Provider>
       </RightPanelContentWrapper>
-      {/* <Divider type="vertical" style={{height: "510px"}}/> */}
       <div style={{flex: "1"}}>
         {appPreview}
       </div>
-      {/* <Divider type="vertical" style={{height: "510px"}}/> */}
       <div style={{
         width: "280px",
         padding: "12px",
diff --git a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
@@ -522,13 +522,20 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
               >
                 <ThemeCompPanel
                   theme={this.state.theme}
-                  onCompStyleChange={(compName: string, compStyle: Record<string, string>) => {
+                  onCompStyleChange={(
+                    compName: string,
+                    styleKey: string,
+                    compStyle: Record<string, string>
+                  ) => {
                     this.setState({
                       theme: {
                         ...this.state.theme,
                         components: {
                           ...this.state.theme.components,
-                          [compName]: compStyle,
+                          [compName]: {
+                            ...this.state.theme.components?.[compName],
+                            [styleKey]: compStyle,
+                          }
                         }
                       },
                     });
