fix theme footer styles, and infinite rerendering issue

Author: iamfaran

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -3454,7 +3454,7 @@ export const en = {
     "exportTheme": "Export Theme",
     "importTheme": "Import Theme",
     "importSuccessMsg": "Theme Imported Successfully",
-    "importError": "Failed to Import Theme: {{message}}",
+    "importError": "Failed to Import Theme: {message}",
     "importParseError": "Invalid Theme File: Could Not Parse JSON",
     "importFormatError": "Invalid Theme File: Missing Required Theme Data",
     "importFileError": "Failed to Read Theme File",

client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx

@@ -45,6 +45,7 @@ import { Card, Divider, Flex, List, Tooltip } from 'antd';
 import { ThemeCompPanel } from "pages/setting/theme/ThemeCompPanel";
 import { JSONObject } from "@lowcoder-ee/util/jsonTypes";
 import { exportThemeAsJSONFile } from "../themeImportExport";
+import _ from "lodash";
 
 const ThemeSettingsView = styled.div`
   font-size: 14px;
@@ -130,7 +131,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
   }
 
   componentDidUpdate(prevProps: ThemeDetailPageProps, prevState: ThemeDetailPageState) {
-    if (prevProps.themeList?.length !== this.props.themeList?.length) {
+    if (prevProps.themeList !== this.props.themeList && prevProps.themeList?.length !== this.props.themeList?.length) {
       this.findCurrentTheme();
     }
   }
@@ -170,10 +171,17 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
   configChange(params: configChangeParams) {
     if (!this.state.theme) return;
 
+    const { themeSettingKey, ...rest } = params;
+    const value = _.find(_.values(rest), (v) => v !== undefined);
+
+    if (_.isEqual(this.state.theme[themeSettingKey as keyof typeof this.state.theme], value)) {
+      return;
+    }
+
     this.setState({
       theme: {
         ...this.state.theme,
-        [params.themeSettingKey]: params.color || params.radius || params.chart || params.margin || params.padding  || params.borderWidth || params.borderStyle || params.fontFamily || params.showComponentLoadingIndicators || params.showDataLoadingIndicators || params.dataLoadingIndicator || params.gridColumns || params.gridRowHeight || params.gridRowCount || params.gridPaddingX || params.gridPaddingY || params.gridBgImage || params.gridBgImageRepeat || params.gridBgImageSize || params.gridBgImagePosition || params.gridBgImageOrigin,
+        [themeSettingKey]: value,
       },
     });
   }
@@ -904,17 +912,20 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
             >
               {trans("reset")}
             </ResetButton>
-            <ResetButton onClick={this.handleExport} disabled={!this.state.name || !this.state.theme}>
-              {trans("theme.exportTheme")}
-            </ResetButton>
             <SaveButton
               type="primary"
               disabled={this.isThemeNotChange() || !this.state.name}
               onClick={() => this.handleSave()}
-              style={{ marginLeft: "auto" }}
             >
               {trans("theme.saveBtn")}
             </SaveButton>
+            <ResetButton
+              onClick={this.handleExport}
+              disabled={!this.state.name || !this.state.theme}
+              style={{ marginLeft: "auto" }}
+            >
+              {trans("theme.exportTheme")}
+            </ResetButton>
           </Footer>
         </DetailContainer>
       </>

client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx

@@ -124,7 +124,7 @@ export const Footer = styled.div`
   padding: 24px;
   position: fixed;
   bottom: 0;
-  width: calc(100vw - 492px);
+  width: calc(100% - 520px);
   background-color: #fff;
   z-index: 1000;
   margin-right: 10px;
@@ -659,44 +659,43 @@ export const CustomModalStyled = styled(CustomModal)`
   }
 `;
 
-export const Margin = styled.div<{ $margin: string }>`	
-> div {	
-  margin: 3px;	
-  overflow: hidden;	
-    > svg {	
-      fill: currentColor;	
-    }	
-  }	
-}	
-`;	
-export const Padding = styled.div<{ $padding: string }>`	
-> div {	
-  margin: 3px;	
-  overflow: hidden;	
-    > svg {	
-      fill: currentColor;	
-    }	
-  }	
-}`
+export const Margin = styled.div<{ $margin: string }>`
+  > div {
+    margin: 3px;
+    overflow: hidden;
+    > svg {
+      fill: currentColor;
+    }
+  }
+`;
+
+export const Padding = styled.div<{ $padding: string }>`
+  > div {
+    margin: 3px;
+    overflow: hidden;
+    > svg {
+      fill: currentColor;
+    }
+  }
+`;
+
 // Added By Aqib Mirza
-export const GridColumns = styled.div<{ $gridColumns: string }>` 
+export const GridColumns = styled.div<{ $gridColumns: string }>`
   > div {
     margin: 3px;
     overflow: hidden;
-      > svg {
-        fill: currentColor;
-      }
+    > svg {
+      fill: currentColor;
     }
   }
 `;
 
-export const BorderStyle = styled.div<{ $borderStyle: string }>` 
+export const BorderStyle = styled.div<{ $borderStyle: string }>`
   > div {
     margin: 3px;
     overflow: hidden;
-      > svg {
-        fill: currentColor;
-      }
+    > svg {
+      fill: currentColor;
     }
   }
 `;
@@ -705,9 +704,8 @@ export const BorderWidth = styled.div<{ $borderWidth: string }>`
   > div {
     margin: 3px;
     overflow: hidden;
-      > svg {
-        fill: currentColor;
-      }
+    > svg {
+      fill: currentColor;
     }
   }
 `;

client/packages/lowcoder/src/pages/setting/theme/themeImportExport.ts

@@ -1,6 +1,7 @@
 import { ThemeDetail, ThemeType } from "api/commonSettingApi";
 import { genQueryId } from "comps/utils/idGenerator";
 import { trans } from "i18n";
+import { saveDataAsFile } from "util/fileUtils";
 
 export const THEME_EXPORT_VERSION = 1;
 export const THEME_EXPORT_TYPE = "lowcoder-theme";
@@ -95,19 +96,11 @@ export function exportThemeAsJSONFile(theme: ThemeType) {
     type: THEME_EXPORT_TYPE,
     theme,
   };
-
-  const link = document.createElement("a");
-  const blob = new Blob([JSON.stringify(exportObj, null, 2)], {
-    type: "application/json",
+  void saveDataAsFile({
+    data: exportObj,
+    filename: `${theme.name}.json`,
+    fileType: "json",
   });
-  const url = URL.createObjectURL(blob);
-  link.href = url;
-  const safeName = theme.name.replace(/[^\w\s-]/g, "").trim() || "theme";
-  link.download = `${safeName}.json`;
-  document.body.appendChild(link);
-  link.click();
-  link.remove();
-  URL.revokeObjectURL(url);
 }
 
 export function readThemeFile(file: File): Promise<ThemeType> {