perf(component): Add generateAcrylicTextures only run on change iamge

myxvisual · Jun 14, 2017 · 4491774 · 4491774
1 parent 183aa79
commit 4491774
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 7 deletions.
diff --git a/docs/src/routes/Styles/Typography/README.md b/docs/src/routes/Styles/Typography/README.md
@@ -1,4 +1,4 @@
-### How to use Typography style?
+### How to use Typography style? [Source typographyStyles](https://github.com/myxvisual/react-uwp/blob/master/src/styles/getTheme.ts#L114)
 
 ``` jsx
 import * as React from "react";

diff --git a/src/Theme/getBaseCSS.tsx b/src/Theme/getBaseCSS.tsx
@@ -3,6 +3,9 @@ const getBaseCSS = (theme: ReactUWP.ThemeType, themeClassName: string) => `* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+}
+
+.${themeClassName} * {
   font-family: ${theme.fonts.sansSerifFonts.split(", ").map((font: string) => `"${font}"`).join(", ")};
 }
 
@@ -36,9 +39,6 @@ body {
 
 .${themeClassName} {
   -webkit-text-size-adjust: none;
-}
-
-.${themeClassName} {
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   -moz-osx-font-smoothing: grayscale;

diff --git a/src/Theme/index.tsx b/src/Theme/index.tsx
@@ -108,6 +108,18 @@ export class Theme extends React.Component<ThemeProps, ThemeState> {
   componentWillReceiveProps(nextProps: ThemeProps) {
     const { theme } = nextProps;
     const { currTheme } = this.state;
+
+    let needGenerateAcrylic = theme.useFluentDesign && theme.desktopBackgroundImage && this.props.needGenerateAcrylic;
+
+    if (needGenerateAcrylic && theme.desktopBackgroundImage === currTheme.desktopBackgroundImage) {
+      needGenerateAcrylic = false;
+      Object.assign(theme, {
+        acrylicTexture40: currTheme.acrylicTexture40,
+        acrylicTexture60: currTheme.acrylicTexture60,
+        acrylicTexture80: currTheme.acrylicTexture80
+      } as ReactUWP.ThemeType);
+    }
+
     if (nextProps && nextProps.theme && !this.props.autoSaveTheme) {
       if (
         theme.accent !== currTheme.accent ||
@@ -118,7 +130,7 @@ export class Theme extends React.Component<ThemeProps, ThemeState> {
         this.setState({
           currTheme: theme
         }, () => {
-          if (theme.useFluentDesign && theme.desktopBackgroundImage && nextProps.needGenerateAcrylic) {
+          if (needGenerateAcrylic) {
             this.generateAcrylicTextures();
           }
         });
@@ -142,22 +154,47 @@ export class Theme extends React.Component<ThemeProps, ThemeState> {
       desktopBackgroundImage: newTheme.desktopBackgroundImage
     }));
 
+    const { currTheme } = this.state;
+
+    let needGenerateAcrylic = newTheme.useFluentDesign && newTheme.desktopBackgroundImage && this.props.needGenerateAcrylic;
+    if (needGenerateAcrylic && newTheme.desktopBackgroundImage === currTheme.desktopBackgroundImage) {
+      needGenerateAcrylic = false;
+      Object.assign(newTheme, {
+        acrylicTexture40: currTheme.acrylicTexture40,
+        acrylicTexture60: currTheme.acrylicTexture60,
+        acrylicTexture80: currTheme.acrylicTexture80
+      } as ReactUWP.ThemeType);
+    }
+
     this.setState({
       currTheme: newTheme
     }, () => {
       callback(newTheme);
-      if (newTheme.useFluentDesign && newTheme.desktopBackgroundImage && this.props.needGenerateAcrylic) {
+      if (needGenerateAcrylic) {
         this.generateAcrylicTextures();
       }
     });
   }
 
   updateTheme = (newTheme?: ReactUWP.ThemeType, callback = themeCallback) => {
+    const { currTheme } = this.state;
+
+    let needGenerateAcrylic = newTheme.useFluentDesign && newTheme.desktopBackgroundImage && this.props.needGenerateAcrylic;
+
+    if (needGenerateAcrylic && newTheme.desktopBackgroundImage === currTheme.desktopBackgroundImage) {
+      needGenerateAcrylic = false;
+      Object.assign(newTheme, {
+        acrylicTexture40: currTheme.acrylicTexture40,
+        acrylicTexture60: currTheme.acrylicTexture60,
+        acrylicTexture80: currTheme.acrylicTexture80
+      } as ReactUWP.ThemeType);
+    }
+
     this.setState({
       currTheme: newTheme
     }, () => {
       callback(newTheme);
-      if (newTheme.useFluentDesign && newTheme.desktopBackgroundImage && this.props.needGenerateAcrylic) {
+      if (needGenerateAcrylic) {
         this.generateAcrylicTextures();
       }
     });