feat(ConfigProvider): add device prop

alibaba-fusion · Aug 7, 2019 · 67161a1 · 67161a1
1 parent 67f0d49
commit 67161a1
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 12 deletions.
diff --git a/docs/config-provider/index.en-us.md b/docs/config-provider/index.en-us.md
@@ -151,6 +151,7 @@ export default config(Component);
 | -------- | ----------------------------------- | ------------ | --- |
 | errorBoundary | turn errorBoundary on or not<br>If you pass object, properties：<br><br>fallbackUI `Function(error?: {}, errorInfo?: {}) => Element` <br>afterCatch `Function(error?: {}, errorInfo?: {})` after being catched, e.g. send data to server for data statistics | Boolean/Object | false |
 | pure     | whether enable the Pure Render mode, it will improve performance, but it will also have side effects | Boolean      | -   |
+| device | Responsive of device <br>Options:<br> `desktop`, `tablet`, `phone` | - |
 | warning  | whether to display the warning prompt for component properties being deprecated in development mode        | Boolean      | true  |
 | children | component tree                                 | ReactElement | -   |
 

diff --git a/docs/config-provider/index.md b/docs/config-provider/index.md
@@ -220,6 +220,7 @@ export default config(Component);
 | pure          | 是否开启 Pure Render 模式，会提高性能，但是也会带来副作用                                                                                                                                                                    | Boolean        | -     |
 | warning       | 是否在开发模式下显示组件属性被废弃的 warning 提示                                                                                                                                                                          | Boolean        | true  |
 | rtl           | 是否开启 rtl 模式                                                                                                                                                                                            | Boolean        | -     |
+| device | 设备类型，针对不同的设备类型组件做出对应的响应式变化 <br>可选值:<br> `desktop`, `tablet`, `phone` | - |
 | children      | 组件树                                                                                                                                                                                                    | ReactElement   | -     |
 
 <!-- api-extra-start -->

diff --git a/src/config-provider/config.jsx b/src/config-provider/config.jsx
@@ -90,6 +90,7 @@ export function config(Component, options = {}) {
             locale: PropTypes.object,
             pure: PropTypes.bool,
             rtl: PropTypes.bool,
+            device: PropTypes.oneOf(['tablet', 'desktop', 'phone']),
             errorBoundary: PropTypes.oneOfType([
                 PropTypes.bool,
                 PropTypes.object,
@@ -102,6 +103,7 @@ export function config(Component, options = {}) {
             nextPure: PropTypes.bool,
             nextRtl: PropTypes.bool,
             nextWarning: PropTypes.bool,
+            nextDevice: PropTypes.oneOf(['tablet', 'desktop', 'phone']),
             nextErrorBoundary: PropTypes.oneOfType([
                 PropTypes.bool,
                 PropTypes.object,
@@ -146,6 +148,7 @@ export function config(Component, options = {}) {
                 locale,
                 pure,
                 rtl,
+                device,
                 errorBoundary,
                 ...others
             } = this.props;
@@ -154,17 +157,19 @@ export function config(Component, options = {}) {
                 nextLocale = {},
                 nextPure,
                 nextRtl,
+                nextDevice,
                 nextErrorBoundary,
             } = this.context;
 
             const displayName =
                 options.componentName || getDisplayName(Component);
             const contextProps = getContextProps(
-                { prefix, locale, pure, rtl, errorBoundary },
+                { prefix, locale, pure, device, rtl, errorBoundary },
                 {
                     nextPrefix,
                     nextLocale: { ...currentGlobalLocale, ...nextLocale },
                     nextPure,
+                    nextDevice,
                     nextRtl:
                         typeof nextRtl === 'boolean'
                             ? nextRtl
@@ -177,15 +182,18 @@ export function config(Component, options = {}) {
             );
 
             // errorBoundary is only for <ErrorBoundary>
-            const newContextProps = ['prefix', 'locale', 'pure', 'rtl'].reduce(
-                (ret, name) => {
-                    if (typeof contextProps[name] !== 'undefined') {
-                        ret[name] = contextProps[name];
-                    }
-                    return ret;
-                },
-                {}
-            );
+            const newContextProps = [
+                'prefix',
+                'locale',
+                'pure',
+                'rtl',
+                'device',
+            ].reduce((ret, name) => {
+                if (typeof contextProps[name] !== 'undefined') {
+                    ret[name] = contextProps[name];
+                }
+                return ret;
+            }, {});
 
             const newOthers = options.transform
                 ? options.transform(others, this._deprecated)

diff --git a/src/config-provider/consumer.jsx b/src/config-provider/consumer.jsx
@@ -66,6 +66,7 @@ Consumer.contextTypes = {
     nextPure: PropTypes.bool,
     newRtl: PropTypes.bool,
     nextWarning: PropTypes.bool,
+    nextDevice: PropTypes.oneOf(['tablet', 'desktop', 'phone']),
 };
 
 export default Consumer;
diff --git a/src/config-provider/get-context-props.jsx b/src/config-provider/get-context-props.jsx
@@ -19,13 +19,14 @@ const parseBoundary = input => {
 };
 
 export default function getContextProps(props, context, displayName) {
-    const { prefix, locale, pure, rtl, errorBoundary } = props;
+    const { prefix, locale, pure, rtl, device, errorBoundary } = props;
     const {
         nextPrefix,
         nextLocale,
         nextPure,
         nextWarning,
         nextRtl,
+        nextDevice,
         nextErrorBoundary,
     } = context;
 
@@ -72,6 +73,7 @@ export default function getContextProps(props, context, displayName) {
         pure: newPure,
         rtl: newRtl,
         warning: nextWarning,
+        device: device || nextDevice || undefined,
         errorBoundary: newErrorBoundary,
     };
 }
diff --git a/src/config-provider/index.jsx b/src/config-provider/index.jsx
@@ -51,6 +51,10 @@ class ConfigProvider extends Component {
          * 是否开启 rtl 模式
          */
         rtl: PropTypes.bool,
+        /**
+         * 设备类型，针对不同的设备类型组件做出对应的响应式变化
+         */
+        device: PropTypes.oneOf(['tablet', 'desktop', 'phone']),
         /**
          * 组件树
          */
@@ -68,6 +72,7 @@ class ConfigProvider extends Component {
         nextPure: PropTypes.bool,
         nextRtl: PropTypes.bool,
         nextWarning: PropTypes.bool,
+        nextDevice: PropTypes.oneOf(['tablet', 'desktop', 'phone']),
         nextErrorBoundary: PropTypes.oneOfType([
             PropTypes.bool,
             PropTypes.object,
@@ -115,6 +120,7 @@ class ConfigProvider extends Component {
             nextPure,
             nextRtl,
             nextWarning,
+            nextDevice,
             nextErrorBoundary,
         } = childContextCache.root() || {};
 
@@ -124,6 +130,7 @@ class ConfigProvider extends Component {
             pure: nextPure,
             rtl: nextRtl,
             warning: nextWarning,
+            device: nextDevice,
             errorBoundary: nextErrorBoundary,
         };
     };
@@ -147,6 +154,7 @@ class ConfigProvider extends Component {
             pure,
             warning,
             rtl,
+            device,
             errorBoundary,
         } = this.props;
 
@@ -156,6 +164,7 @@ class ConfigProvider extends Component {
             nextPure: pure,
             nextRtl: rtl,
             nextWarning: warning,
+            nextDevice: device,
             nextErrorBoundary: errorBoundary,
         };
     }

diff --git a/test/config-provider/index-spec.js b/test/config-provider/index-spec.js
@@ -223,6 +223,14 @@ class TestAlias extends Component {
     }
 }
 
+class TestDevice extends Component {
+    render() {
+        return <span>{this.props.device}</span>
+    }
+}
+
+const NTestDevice = config(TestDevice);
+
 describe('ConfigProvider', () => {
     let wrapper;
 
@@ -537,4 +545,19 @@ describe('ConfigProvider.ErrorBoundary', () => {
         );
         assert(wrapper.dive().name() === 'ErrorBoundary');
     });
+
+    it('should support device', () => {
+        wrapper = mount(
+            <ConfigProvider device="tablet">
+                <NTestDevice />
+            </ConfigProvider>
+        );
+
+        assert(wrapper.text() === 'tablet');
+        wrapper.setProps({
+            device: 'desktop'
+        });
+
+        assert(wrapper.text() === 'desktop');
+    });
 });
diff --git a/types/config-provider/index.d.ts b/types/config-provider/index.d.ts
@@ -35,8 +35,12 @@ export interface ConfigProviderProps {
     /**
      * 是否开启 rtl 模式
      */
-    rtl?: boolean;
 
+    rtl?: boolean;
+    /**
+     * 设备类型，针对不同的设备类型组件做出对应的响应式变化
+     */
+    device: 'tablet' | 'desktop' | 'phone',
     /**
      * 组件树
      */