feat: add load theme info

ant-design · Nov 24, 2019 · 4dd1241 · 4dd1241
1 parent 82b0454
commit 4dd1241
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 35 deletions.
diff --git a/src/SettingDrawer/index.tsx b/src/SettingDrawer/index.tsx
@@ -33,39 +33,6 @@ type MergerSettingsType<T> = Partial<T> & {
   colorWeak?: boolean;
 };
 
-const updateTheme = (dark: boolean, color?: string) => {
-  // ssr
-  if (typeof window === 'undefined') {
-    return;
-  }
-  const href = dark ? '/theme/dark' : '/theme/';
-  const colorFileName =
-    dark && color && color !== 'daybreak' ? `-${color}` : color;
-  const dom = document.getElementById('theme-style') as HTMLLinkElement;
-
-  // 如果这两个都是空
-  if (!href && !colorFileName) {
-    if (dom) {
-      dom.remove();
-      localStorage.removeItem('site-theme');
-    }
-    return;
-  }
-
-  const url = `${href}${colorFileName || ''}.css`;
-  if (dom) {
-    dom.href = url;
-  } else {
-    const style = document.createElement('link');
-    style.type = 'text/css';
-    style.rel = 'stylesheet';
-    style.id = 'theme-style';
-    style.href = url;
-    document.body.append(style);
-  }
-  localStorage.setItem('site-theme', dark ? 'dark' : 'light');
-};
-
 const Body: React.FC<BodyProps> = ({ children, title }) => (
   <div style={{ marginBottom: 24 }}>
     <h3 className="ant-pro-setting-drawer-title">{title}</h3>
@@ -147,6 +114,57 @@ class SettingDrawer extends Component<SettingDrawerProps, SettingDrawerState> {
     }
   };
 
+  updateTheme = (dark: boolean, color?: string) => {
+    // ssr
+    if (typeof window === 'undefined') {
+      return;
+    }
+    const formatMessage = this.getFormatMessage();
+    const hide = message.loading(
+      formatMessage({
+        id: 'app.setting.loading',
+        defaultMessage: '正在加载主题',
+      }),
+    );
+    const href = dark ? '/theme/dark' : '/theme/';
+    const colorFileName =
+      dark && color && color !== 'daybreak' ? `-${color}` : color;
+    const dom = document.getElementById('theme-style') as HTMLLinkElement;
+
+    // 如果这两个都是空
+    if (!href && !colorFileName) {
+      if (dom) {
+        dom.remove();
+        localStorage.removeItem('site-theme');
+      }
+      return;
+    }
+
+    const url = `${href}${colorFileName || ''}.css`;
+    if (dom) {
+      dom.onload = () => {
+        window.setTimeout(() => {
+          hide();
+        });
+      };
+      dom.href = url;
+    } else {
+      const style = document.createElement('link');
+      style.type = 'text/css';
+      style.rel = 'stylesheet';
+      style.id = 'theme-style';
+      style.onload = () => {
+        window.setTimeout(() => {
+          hide();
+        });
+      };
+      style.href = url;
+      document.body.append(style);
+    }
+
+    localStorage.setItem('site-theme', dark ? 'dark' : 'light');
+  };
+
   getLayoutSetting = (): SettingItemProps[] => {
     const { settings } = this.props;
     const formatMessage = this.getFormatMessage();
@@ -239,12 +257,12 @@ class SettingDrawer extends Component<SettingDrawerProps, SettingDrawerState> {
     const nextState = { ...settings };
     nextState[key] = value;
     if (key === 'navTheme') {
-      updateTheme(value === 'realDark');
+      this.updateTheme(value === 'realDark');
       nextState.primaryColor = 'daybreak';
     }
 
     if (key === 'primaryColor') {
-      updateTheme(
+      this.updateTheme(
         nextState.navTheme === 'realDark',
         value === 'daybreak' ? '' : (value as string),
       );

diff --git a/src/locales/en-US/settingDrawer.ts b/src/locales/en-US/settingDrawer.ts
@@ -25,6 +25,7 @@ export default {
   'app.setting.othersettings': 'Other Settings',
   'app.setting.weakmode': 'Weak Mode',
   'app.setting.copy': 'Copy Setting',
+  'app.setting.loading': 'Loading theme',
   'app.setting.copyinfo':
     'copy success，please replace defaultSettings in src/models/setting.js',
   'app.setting.production.hint':

diff --git a/src/locales/zh-CN/settingDrawer.ts b/src/locales/zh-CN/settingDrawer.ts
@@ -25,6 +25,7 @@ export default {
   'app.setting.othersettings': '其他设置',
   'app.setting.weakmode': '色弱模式',
   'app.setting.copy': '拷贝设置',
+  'app.setting.loading': '正在加载主题',
   'app.setting.copyinfo':
     '拷贝成功，请到 src/defaultSettings.js 中替换默认配置',
   'app.setting.production.hint':

diff --git a/src/locales/zh-TW/settingDrawer.ts b/src/locales/zh-TW/settingDrawer.ts
@@ -25,6 +25,7 @@ export default {
   'app.setting.othersettings': '其他設置',
   'app.setting.weakmode': '色弱模式',
   'app.setting.copy': '拷貝設置',
+  'app.setting.loading': '正在加載主題',
   'app.setting.copyinfo':
     '拷貝成功，請到 src/defaultSettings.js 中替換默認配置',
   'app.setting.production.hint':