IE11 处理 (#1271)

examples/components/App.tsx

@@ -8,7 +8,7 @@ import {
   Drawer,
   ToastComponent
 } from '../../src/components/index';
-import {mapTree} from '../../src/utils/helper';
+import {eachTree, mapTree} from '../../src/utils/helper';
 import {Icon} from '../../src/components/icons';
 import '../../src/locale/en';
 import {
@@ -28,6 +28,8 @@ import Example, {examples} from './Example';
 import CssDocs, {cssDocs} from './CssDocs';
 import CSSDocs from './CssDocs';
 
+declare const _hmt: any;
+
 let ExamplePathPrefix = '/examples';
 let DocPathPrefix = '/docs';
 let ContextPath = '';
@@ -145,39 +147,19 @@ export class App extends React.PureComponent<{
     this.setNavigations = this.setNavigations.bind(this);
   }
 
-  componentDidMount() {
-    if (this.state.theme.value !== 'default') {
-      document.querySelectorAll('link[title]').forEach(item => {
-        item.disabled = true;
-      });
-
-      document
-        .querySelectorAll(`link[title="${this.state.theme.value}"]`)
-        .forEach(item => {
-          item.disabled = false;
-        });
-
-      if (this.state.theme.value === 'dark') {
-        document.querySelector('body').classList.add('dark');
-      }
-    }
-  }
-
   componentDidUpdate(preProps, preState) {
     const props = this.props;
 
     if (preState.theme.value !== this.state.theme.value) {
-      document
+      [].slice
-        .querySelectorAll(`link[title="${preState.theme.value}"]`)
+        .call(document.querySelectorAll('link[title]'))
-        .forEach(item => {
+        .forEach((item: HTMLLinkElement) => {
-          item.disabled = true;
+          const theme = item.getAttribute('title');
-        });
+          item.disabled = theme !== this.state.theme.value;
-
-      document
-        .querySelectorAll(`link[title="${this.state.theme.value}"]`)
-        .forEach(item => {
-          item.disabled = false;
         });
+      const body = document.querySelector('body');
+      body.classList.remove(preState.theme.value);
+      body.classList.add(this.state.theme.value);
     }
 
     if (props.location.pathname !== preProps.location.pathname) {
@@ -309,8 +291,9 @@ export class App extends React.PureComponent<{
                 this.setState({theme});
                 localStorage.setItem(
                   'themeIndex',
-                  this.state.themes.indexOf(theme)
+                  `${this.state.themes.indexOf(theme)}`
                 );
+                localStorage.setItem('theme', `${theme.value}`);
                 document
                   .querySelector('body')
                   .classList[theme.value === 'dark' ? 'add' : 'remove']('dark');
@@ -521,9 +504,9 @@ export class App extends React.PureComponent<{
 
           <BackTop />
 
-          {React.cloneElement(this.props.children, {
+          {React.cloneElement(this.props.children as any, {
             key: theme.value,
-            ...this.props.children.props,
+            ...(this.props.children as any).props,
             setNavigations: this.setNavigations,
             theme: theme.value,
             classPrefix: theme.ns,
@@ -547,7 +530,7 @@ function navigations2route(pathPrefix = DocPathPrefix, navigations) {
 
   navigations.forEach(root => {
     root.children &&
-      mapTree(root.children, item => {
+      eachTree(root.children, (item: any) => {
         if (item.path && item.component) {
           routes.push(
             <Route

examples/index.html

@@ -17,22 +17,9 @@
     <link rel="stylesheet" href="prismjs/themes/prism.css" />
     <!--DEPENDENCIES_INJECT_PLACEHOLDER-->
     <link rel="stylesheet" href="./doc.css" />
-    <link rel="stylesheet" title="default" href="../scss/themes/default.scss" />
-    <link
-      rel="stylesheet"
-      title="cxd"
-      disabled
-      href="../scss/themes/cxd.scss"
-    />
-    <link
-      rel="stylesheet"
-      title="dark"
-      disabled
-      href="../scss/themes/dark.scss"
-    />
-
     <link rel="stylesheet" href="../scss/helper.scss" />
     <link rel="stylesheet" href="./style.scss" />
+    <!--STYLE_PLACEHOLDER-->
     <style>
       .app-wrapper {
         position: relative;
@@ -40,6 +27,45 @@
         height: 100%;
       }
     </style>
+    <script type="text/x-jsx">
+      const theme = localStorage.getItem('theme') || 'default';
+
+      // 非 IE 模式
+      if (window.navigator.userAgent.indexOf('Trident') === -1) {
+        document.write(
+          `<link rel="stylesheet" title="default" ${
+            theme !== 'default' ? 'disabled' : ''
+          }  href="${__uri('../scss/themes/default.scss')}" />`
+        );
+        document.write(
+          `<link rel="stylesheet" title="cxd" ${
+            theme !== 'cxd' ? 'disabled' : ''
+          } href="${__uri('../scss/themes/cxd.scss')}" />`
+        );
+        document.write(
+          `<link rel="stylesheet" title="dark" ${
+            theme !== 'dark' ? 'disabled' : ''
+          } href="${__uri('../scss/themes/dark.scss')}" />`
+        );
+      } else {
+        document.write(
+          `<link rel="stylesheet" title="default" ${
+            theme !== 'default' ? 'disabled' : ''
+          }  href="${__uri('../scss/themes/default-ie11.css')}" />`
+        );
+        document.write(
+          `<link rel="stylesheet" title="cxd" ${
+            theme !== 'cxd' ? 'disabled' : ''
+          } href="${__uri('../scss/themes/cxd-ie11.css')}" />`
+        );
+        document.write(
+          `<link rel="stylesheet" title="dark" ${
+            theme !== 'dark' ? 'disabled' : ''
+          } href="${__uri('../scss/themes/dark-ie11.css')}" />`
+        );
+      }
+    </script>
+    <!--ignore-->
   </head>
 
   <body>

examples/polyfills/index.ts

@@ -1,5 +1,6 @@
 import 'core-js/es/array/find';
 import 'core-js/es/array/from';
+import 'core-js/es/array/includes';
 import 'core-js/es/array/find-index';
 import 'core-js/es/string/starts-with';
 import 'core-js/es/promise';

fis-conf.js

@@ -5,6 +5,7 @@ const path = require('path');
 const fs = require('fs');
 const package = require('./package.json');
 const parserMarkdown = require('./scripts/md-parser');
+const convertSCSSIE11 = require('./scripts/scss-ie11');
 const parserCodeMarkdown = require('./scripts/code-md-parser');
 fis.get('project.ignore').push('public/**', 'npm/**', 'gh-pages/**');
 // 配置只编译哪些文件。
@@ -60,6 +61,10 @@ fis.match('*.scss', {
   rExt: '.css'
 });
 
+fis.match('*-ie11.css', {
+  postprocessor: convertSCSSIE11
+});
+
 fis.match('/src/icons/**.svg', {
   rExt: '.js',
   isJsXLike: true,
@@ -802,7 +807,7 @@ if (fis.project.currentMedia() === 'publish') {
     url: 'null',
     useHash: false
   });
-  ghPages.match('{*.jsx,*.tsx,*.ts}', {
+  ghPages.match('{*:scss,*.jsx,*.tsx,*.ts}', {
     moduleId: function (m, path) {
       return fis.util.md5('amis' + path);
     },

package.json

@@ -137,7 +137,7 @@
     "fis3-hook-relative": "^2.0.3",
     "fis3-packager-deps-pack": "^0.1.2",
     "fis3-parser-typescript": "^1.3.0",
-    "fis3-postpackager-loader": "^2.1.11",
+    "fis3-postpackager-loader": "^2.1.12",
     "fis3-prepackager-stand-alone-pack": "^1.0.0",
     "fis3-preprocessor-js-require-css": "^0.1.3",
     "font-awesome": "4.7.0",

scripts/scss-ie11.js

@@ -0,0 +1,8 @@
+const postcss = require('postcss');
+const postcssCustomProperties = require('postcss-custom-properties');
+
+module.exports = function (content, file) {
+  // console.log(content);
+  return postcss([postcssCustomProperties({preserve: false})]).process(content)
+    .css;
+};

scss/themes/cxd-ie11.css

@@ -0,0 +1 @@
+@import url('./cxd.scss?__inline');

scss/themes/dark-ie11.css

@@ -0,0 +1 @@
+@import url('./dark.scss?__inline');

scss/themes/default-ie11.css

@@ -0,0 +1 @@
+@import url('./default.scss?__inline');