Merge pull request #44 from Macrox/fix/unexpected-context-overriding

fix(ConfigProvider): Isolate multiple context data

Author: youluna

docs/dialog/demo/quick.md

@@ -15,7 +15,7 @@ The Dialog provides quick methods called alert and confirm, as well as a lower-l
 ---
 
 ````jsx
-import { Button, Dialog } from '@alifd/next';
+import { Button, Dialog, ConfigProvider } from '@alifd/next';
 
 
 const popupAlert = () => {
@@ -47,9 +47,14 @@ const popupCustom = () => {
     });
 };
 
-ReactDOM.render(<span>
-    <Button onClick={popupAlert}>Alert</Button> &nbsp;
-    <Button onClick={popupConfirm}>Confirm</Button> &nbsp;
-    <Button onClick={popupCustom}>Custom</Button>
-</span>, mountNode);
+ReactDOM.render(
+    <ConfigProvider locale={{ Dialog: { ok: 'OK', cancel: 'Cancel' } }}>
+        <span>
+            <Button onClick={popupAlert}>Alert</Button> &nbsp;
+            <Button onClick={popupConfirm}>Confirm</Button> &nbsp;
+            <Button onClick={popupCustom}>Custom</Button>
+        </span>
+    </ConfigProvider>,
+    mountNode
+);
 ````

src/config-provider/cache.js

@@ -0,0 +1,44 @@
+class Cache {
+  constructor() {
+    this._root = null;
+    this._store = new Map();
+  }
+
+  empty() {
+    return this._store.size === 0;
+  }
+
+  has(key) {
+    return this._store.has(key)
+  }
+
+  get(key, defaultValue) {
+    const res = this.has(key) ? this._store.get(key) : this.root()
+    return (typeof res === 'undefined' || res === null) ?
+      defaultValue : res
+  }
+
+  add(key, value) {
+    const store = this._store;
+    if (this.empty()) {
+      this._root = key;
+    }
+    this._store.set(key, value);
+  }
+
+  update(key, value) {
+    if (this.has(key)) {
+      this._store.set(key, value)
+    }
+  }
+
+  remove(key) {
+    this._store.delete(key);
+  }
+
+  root() {
+    return this._store.get(this._root)
+  }
+}
+
+export default Cache;

src/config-provider/index.jsx

@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 import getContextProps from './get-context-props';
 import { config, initLocales, setLanguage, setLocale, getLocale, getLanguage } from './config';
 import Consumer from './consumer';
+import Cache from './cache'
 
-let childContextCache = {};
+let childContextCache = new Cache();
 
 /**
  * ConfigProvider
@@ -62,7 +63,7 @@ class ConfigProvider extends Component {
      * @returns {Object} 新的 context props
      */
     static getContextProps = (props, displayName) => {
-        return getContextProps(props, childContextCache, displayName);
+        return getContextProps(props, childContextCache.root() || {}, displayName);
     };
 
     static initLocales = initLocales;
@@ -73,7 +74,7 @@ class ConfigProvider extends Component {
     static Consumer = Consumer;
 
     static getContext = () => {
-        const { nextPrefix, nextLocale, nextPure, nextWarning } = childContextCache;
+        const { nextPrefix, nextLocale, nextPure, nextWarning } = childContextCache.root() || {};
 
         return {
             prefix: nextPrefix,
@@ -83,6 +84,14 @@ class ConfigProvider extends Component {
         };
     }
 
+    constructor(...args) {
+        super(...args)
+        childContextCache.add(
+            this,
+            Object.assign({}, childContextCache.get(this, {}), this.getChildContext())
+        );
+    }
+
     getChildContext() {
         const { prefix, locale, pure, warning } = this.props;
 
@@ -98,22 +107,21 @@ class ConfigProvider extends Component {
         this.setMomentLocale(this.props.locale);
     }
 
-    componentDidMount() {
-        childContextCache = Object.assign({}, this.getChildContext(), childContextCache);
-    }
-
     componentWillReceiveProps(nextProps) {
         if (this.props.locale !== nextProps.locale) {
             this.setMomentLocale(nextProps.locale);
         }
     }
 
     componentDidUpdate() {
-        childContextCache = this.getChildContext();
+        childContextCache.add(
+            this,
+            Object.assign({}, childContextCache.get(this, {}), this.getChildContext())
+        );
     }
 
     componentWillUnmount() {
-        childContextCache = {};
+        childContextCache.remove(this);
     }
 
     setMomentLocale(locale) {

test/dialog/index-spec.js

@@ -356,7 +356,7 @@ describe('inner', () => {
         assert(cancel.innerHTML === 'near cancel');
     });
 
-    it('quick should obey: self.locale > nearest ConfigProvider.locale > further ConfigProvider.locale', () => {
+    it('quick-calling should use root context\'s state if its exists', () => {
         wrapper = render(
             <ConfigProvider prefix="far-" locale={{
                 momentLocale: 'en',
@@ -391,90 +391,19 @@ describe('inner', () => {
         const btn = document.querySelector('button');
         ReactTestUtils.Simulate.click(btn);
 
-        const footer = document.querySelector('.near-dialog-footer');
-        const overlayWrapper = document.querySelector('.near-overlay-wrapper');
+        const footer = document.querySelector('.far-dialog-footer');
+        const overlayWrapper = document.querySelector('.far-overlay-wrapper');
         const ok = footer.querySelectorAll('button')[0];
         const cancel = footer.querySelectorAll('button')[1];
 
         assert(footer);
         assert(overlayWrapper);
-        assert(ok.innerHTML === 'near ok');
+        assert(ok.innerHTML === 'far ok');
         assert(cancel.innerHTML === 'my cancel');
 
         document.body.removeChild(overlayWrapper);
 
-        assert(!document.querySelector('.near-overlay-wrapper'));
-    });
-
-    it('alert should obey: self.locale > nearest ConfigProvider.locale > further ConfigProvider.locale', () => {
-        wrapper = render(
-            <ConfigProvider prefix="far-" locale={{
-                momentLocale: 'en',
-                Dialog: {
-                    ok: 'far ok',
-                    cancel: 'far cancel'
-                }
-            }}>
-                <ConfigProvider prefix="near-" locale={{
-                    momentLocale: 'en',
-                    Dialog: {
-                        ok: 'near ok',
-                        cancel: 'near cancel'
-                    }
-                }}>
-                    <div>
-                        <Button
-                            type="primary"
-                            onClick={() => {
-                                Dialog.alert({
-                                    locale: {
-                                        ok: 'my ok'
-                                    },
-                                    content: <Button type="primary">test</Button>,
-                                });
-                            }}>
-                            OK
-                        </Button>
-                        <Button
-                            type="primary"
-                            onClick={() => {
-                                Dialog.alert({
-                                    content: <Button type="primary">test</Button>,
-                                });
-                            }}>
-                            OK
-                        </Button>
-                    </div>
-                </ConfigProvider>
-            </ConfigProvider>
-        );
-
-        const btn1 = document.querySelectorAll('button')[0];
-        const btn2 = document.querySelectorAll('button')[1];
-        ReactTestUtils.Simulate.click(btn1);
-        let footer = document.querySelector('.near-dialog-footer');
-        let overlayWrapper = document.querySelector('.near-overlay-wrapper');
-        let ok = footer.querySelectorAll('button')[0];
-        let innerBtn = document.querySelector('.near-dialog-message button.near-btn-primary');
-
-        assert(footer);
-        assert(overlayWrapper);
-        assert(innerBtn);
-        assert(ok.innerHTML === 'my ok');
-        document.body.removeChild(overlayWrapper);
-        assert(!document.querySelector('.near-overlay-wrapper'));
-
-        ReactTestUtils.Simulate.click(btn2);
-        footer = document.querySelector('.near-dialog-footer');
-        overlayWrapper = document.querySelector('.near-overlay-wrapper');
-        ok = footer.querySelectorAll('button')[0];
-        innerBtn = document.querySelector('.near-dialog-message button.near-btn-primary');
-        assert(footer);
-        assert(overlayWrapper);
-        assert(innerBtn);
-        assert(ok.innerHTML === 'near ok');
-        document.body.removeChild(overlayWrapper);
-        assert(!document.querySelector('.near-overlay-wrapper'));
+        assert(!document.querySelector('.far-overlay-wrapper'));
     });
 });
 

test/message/index-spec.js

@@ -247,31 +247,10 @@ describe('toast', done => {
     });
 });
 
-describe('toast quick', () => {
-    it('should render type message', () => {
-        const methods = ['success', 'warning', 'error', 'notice', 'help', 'loading'];
-        methods.forEach(method => {
-            Message[method](method);
-            const nodes = document.querySelectorAll(`.next-overlay-wrapper .next-message.next-message-${method}`);
-            assert(nodes[nodes.length - 1].innerText.trim() === method);
-        });
-    });
-});
-
 describe('should support configProvider', () => {
-
-    let wrapper;
-
-    afterEach(() => {
-        if (wrapper) {
-            wrapper.unmount();
-            wrapper = null;
-        }
-    });
-
     it('normal should obey: self.locale > nearest ConfigProvider.locale > further ConfigProvider.locale', () => {
         const methods = ['success', 'warning', 'error', 'notice', 'help', 'loading'];
-        wrapper = render(
+        const wrapper = render(
                 <ConfigProvider prefix="far-" locale={{
                     momentLocale: 'en',
                     Dialog: {
@@ -298,12 +277,13 @@ describe('should support configProvider', () => {
             );
         const innerBtn = document.querySelectorAll('.near-message .near-message-content .near-btn-primary');
         assert(innerBtn.length === methods.length);
+        wrapper.unmount();
     });
 
-    it('quick should obey: self.locale > nearest ConfigProvider.locale > further ConfigProvider.locale', () => {
+    it('quick-calling should use root context\'s state if its exists', () => {
         const methods = ['success', 'warning', 'error', 'notice', 'help', 'loading'];
         methods.forEach(method => {
-            wrapper = render(
+            const wrapper = render(
                 <ConfigProvider prefix="far-" locale={{
                     momentLocale: 'en',
                     Dialog: {
@@ -337,20 +317,36 @@ describe('should support configProvider', () => {
 
             const btn = document.querySelector('button');
             ReactTestUtils.Simulate.click(btn);
-            const overlayWrapper = document.querySelector('.near-overlay-wrapper');
-            const icon = document.querySelector('.near-icon.near-message-symbol');
-            const innerBtn = document.querySelector('.near-message-content .near-btn-primary');
+            const icon = document.querySelector('.far-icon.far-message-symbol');
+            const innerBtn = document.querySelector('.far-message-content .far-btn-primary');
 
-            assert(overlayWrapper);
             assert(icon);
             assert(innerBtn);
 
             wrapper.unmount();
-            wrapper = null;
         });
-
-        const lastOverlayWrapper = document.querySelector('.near-overlay-wrapper');
-        document.body.removeChild(lastOverlayWrapper);
-        assert(!document.querySelector('.near-overlay-wrapper'));
     });
 });
+
+describe('toast quick-calling', () => {
+    const avaliableMethods = [
+        'success',
+        'warning',
+        'error',
+        'notice',
+        'help',
+        'loading',
+    ];
+
+    for (const method of avaliableMethods) {
+        it(`render ${method}`, (done) => {
+            Message.show('content');
+            assert(document.querySelector('.next-overlay-wrapper .next-message').innerText.trim() === 'content');
+            setTimeout(() => {
+                Message.hide();
+            }, 500);
+            setTimeout(done, 1000);
+            done()
+        })
+    }
+});