Switch to new React Context API

trendmicro-frontend · Jan 17, 2019 · 8896bb8 · 8896bb8
1 parent d709e54
commit 8896bb8
Show file tree

Hide file tree

Showing 17 changed files with 325 additions and 430 deletions.
diff --git a/README.md b/README.md
@@ -81,10 +81,10 @@ You can wrap `<Container />`, `<Row />`, and `<Col />` in `<Provider />` to pass
 
 ```jsx
 <Provider
-    breakpoints={[576, 768, 992, 1200]}
-    containerWidths={[540, 720, 960, 1140]}
+    breakpoints={[576, 768, 992, 1200, 1600]}
+    containerWidths={[540, 720, 960, 1140, 1440]}
     columns={12}
-    gutterWidth={20}
+    gutterWidth={0}
     layout="flexbox"
 >
     <Container>
@@ -149,7 +149,7 @@ breakpoints | Number[] | [576, 768, 992, 1200, 0] | The breakpoints (minimum wid
 containerWidths | Number[] | [540, 720, 960, 1140, 0] | The container widths in pixels of devices in screen class `sm`, `md`, `lg`, `xl`, and `xxl`.
 columns | Number | 12 | The number of columns.
 gutterWidth | Number | 30 | The horizontal padding (called gutter) between two columns. A gutter width of 30 means 15px on each side of a column.
-layout | One of:<br>'floats'<br>'flexbox' | 'floats' | The grid system layout.
+layout | One of:<br>'flexbox'<br>'floats' | 'flexbox' | The grid system layout.
 
 #### Container
 
@@ -162,18 +162,14 @@ md | Boolean | false | True makes container fluid only in `md`, not present mean
 lg | Boolean | false | True makes container fluid only in `lg`, not present means fluid everywhere.
 xl | Boolean | false | True makes container fluid only in `xl`, not present means fluid everywhere.
 xxl | Boolean | false | True makes container fluid only in `xxl`, not present means fluid everywhere.
-columns | Number | 12 | The number of columns.
-gutterWidth | Number | 30 | The horizontal padding (called gutter) between two columns. A gutter width of 30 means 15px on each side of a column.
-layout | One of:<br>'floats'<br>'flexbox' | 'floats' | The grid system layout.
-onResize | Function({ screenClass }) | | A callback fired when the resize event occurs.
+columns | Number | inherited | The number of columns.
+gutterWidth | Number | inherited | The horizontal padding (called gutter) between two columns. A gutter width of 30 means 15px on each side of a column.
+layout | One of:<br>'flexbox'<br>'floats' | inherited | The grid system layout.
 
 #### Row
 
 Name | Type | Default | Description 
 :--- | :--- | :------ | :----------
-columns | Number | 12 | The number of columns.
-gutterWidth | Number | 30 | The horizontal padding (called gutter) between two columns. A gutter width of 30 means 15px on each side of a column.
-layout | One of:<br>'floats'<br>'flexbox' | 'floats' | The grid system layout.
 
 #### Col
 
@@ -200,7 +196,6 @@ md | Boolean | false | Visible on medimum devices.
 lg | Boolean | false | Visible on large devices.
 xl | Boolean | false | Visible on extra large devices.
 xxl | Boolean | false | Visible on double extra large devices.
-onResize | Function({ screenClass }) | | A callback fired when the resize event occurs.
 
 #### Hidden
 
@@ -212,7 +207,6 @@ md | Boolean | false | Hidden on medimum devices.
 lg | Boolean | false | Hidden on large devices.
 xl | Boolean | false | Hidden on extra large devices.
 xxl | Boolean | false | Hidden on double extra large devices.
-onResize | Function({ screenClass }) | | A callback fired when the resize event occurs.
 
 ## License
 

diff --git a/package.json b/package.json
@@ -54,7 +54,7 @@
     "flexbox"
   ],
   "peerDependencies": {
-    "react": ">=16.0.0"
+    "react": ">=16.3.0"
   },
   "dependencies": {
     "classnames": "^2.2.5",
@@ -93,8 +93,8 @@
     "jsdom": "^13.1.0",
     "mini-css-extract-plugin": "~0.5.0",
     "nib": "~1.1.2",
-    "react": ">=16.0.0",
-    "react-dom": ">=16.0.0",
+    "react": ">=16.3.0",
+    "react-dom": ">=16.3.0",
     "react-styleguidist": "~8.0.6",
     "resize-observer-polyfill": "~1.5.1",
     "style-loader": "~0.23.1",

diff --git a/src/Col.jsx b/src/Col.jsx
@@ -1,17 +1,12 @@
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
-import throttle from 'lodash.throttle';
-import { getScreenClass } from './utils';
 import {
     LAYOUT_FLEXBOX,
     LAYOUT_FLOATS,
-    LAYOUTS,
     SCREEN_CLASSES,
-    DEFAULT_COLUMNS,
-    DEFAULT_GUTTER_WIDTH,
-    DEFAULT_LAYOUT
 } from './constants';
+import { ConfigurationContext, ScreenClassContext } from './context';
 import styles from './index.styl';
 
 const flexboxAutoprefixer = (style) => Object.keys(style).reduce((obj, key) => {
@@ -39,7 +34,7 @@ const flexboxAutoprefixer = (style) => Object.keys(style).reduce((obj, key) => {
     return obj;
 }, {});
 
-const getWidth = (width, columns = DEFAULT_COLUMNS) => {
+const getWidth = (width, columns) => {
     if (width === 'auto') {
         return width;
     }
@@ -52,7 +47,7 @@ const getWidth = (width, columns = DEFAULT_COLUMNS) => {
 
     columns = Math.floor(columns);
     if (columns <= 0) {
-        columns = DEFAULT_COLUMNS;
+        columns = 1;
     }
 
     const colWidth = Math.max(0, Math.min(columns, width));
@@ -149,35 +144,7 @@ class Col extends PureComponent {
         pull: {}
     };
 
-    static contextTypes = {
-        breakpoints: PropTypes.arrayOf(PropTypes.number),
-        columns: PropTypes.number,
-        gutterWidth: PropTypes.number,
-        layout: PropTypes.oneOf(LAYOUTS)
-    };
-
-    get columns() {
-        if (this.context.columns > 0) {
-            return this.context.columns;
-        }
-        return DEFAULT_COLUMNS;
-    }
-
-    get gutterWidth() {
-        if (this.context.gutterWidth >= 0) {
-            return this.context.gutterWidth;
-        }
-        return DEFAULT_GUTTER_WIDTH;
-    }
-
-    get layout() {
-        const layout = this.context.layout;
-        return (LAYOUTS.indexOf(layout) >= 0) ? layout : DEFAULT_LAYOUT;
-    }
-
-    get floatsStyle() {
-        const columns = this.columns;
-        const gutterWidth = this.gutterWidth;
+    getFloatsStyle = ({ columns, gutterWidth, screenClass }) => {
         const style = {
             paddingLeft: gutterWidth / 2,
             paddingRight: gutterWidth / 2
@@ -196,7 +163,6 @@ class Col extends PureComponent {
             xxl: this.props.xxl
         };
         const { offset, push, pull } = this.props;
-        const { screenClass } = this.state;
         const screenClasses = SCREEN_CLASSES;
         screenClasses.forEach((size, index) => {
             if (screenClasses.indexOf(screenClass) < index) {
@@ -210,11 +176,9 @@ class Col extends PureComponent {
         });
 
         return style;
-    }
+    };
 
-    get flexboxStyle() {
-        const columns = this.columns;
-        const gutterWidth = this.gutterWidth;
+    getFlexboxStyle = ({ columns, gutterWidth, screenClass }) => {
         const style = {
             paddingLeft: gutterWidth / 2,
             paddingRight: gutterWidth / 2,
@@ -243,7 +207,6 @@ class Col extends PureComponent {
             xxl: this.props.xxl
         };
         const { offset, push, pull } = this.props;
-        const { screenClass } = this.state;
         const screenClasses = SCREEN_CLASSES;
         screenClasses.forEach((size, index) => {
             if (screenClasses.indexOf(screenClass) < index) {
@@ -275,42 +238,8 @@ class Col extends PureComponent {
         }
 
         return flexboxAutoprefixer(style);
-    }
-
-    get style() {
-        const layout = this.layout;
-        if (layout === LAYOUT_FLOATS) {
-            return this.floatsStyle;
-        }
-        if (layout === LAYOUT_FLEXBOX) {
-            return this.flexboxStyle;
-        }
-        return this.floatsStyle;
-    }
-
-    setScreenClass = () => {
-        this.setState(state => ({
-            screenClass: getScreenClass({ breakpoints: this.context.breakpoints })
-        }));
     };
 
-    componentWillMount() {
-        this.setScreenClass();
-    }
-
-    componentDidMount() {
-        this.eventListener = throttle(this.setScreenClass, Math.floor(1000 / 60)); // 60Hz
-        window.addEventListener('resize', this.eventListener);
-    }
-
-    componentWillUnmount() {
-        if (this.eventListener) {
-            this.eventListener.cancel();
-            window.removeEventListener('resize', this.eventListener);
-            this.eventListener = null;
-        }
-    }
-
     render() {
         const {
             width, xs, sm, md, lg, xl, xxl, // eslint-disable-line
@@ -322,19 +251,38 @@ class Col extends PureComponent {
         } = this.props;
 
         return (
-            <div
-                {...props}
-                className={cx(className, {
-                    [styles.flexboxCol]: this.layout === LAYOUT_FLEXBOX,
-                    [styles.floatsCol]: this.layout === LAYOUT_FLOATS
-                })}
-                style={{
-                    ...this.style,
-                    ...style
-                }}
-            >
-                {children}
-            </div>
+            <ConfigurationContext.Consumer>
+                {config => (
+                    <ScreenClassContext.Consumer>
+                        {screenClass => {
+                            const { columns, gutterWidth, layout } = config;
+                            let colStyle = {};
+                            if (layout === LAYOUT_FLEXBOX) {
+                                colStyle = this.getFlexboxStyle({ columns, gutterWidth, screenClass });
+                            }
+                            if (layout === LAYOUT_FLOATS) {
+                                colStyle = this.getFloatsStyle({ columns, gutterWidth, screenClass });
+                            }
+
+                            return (
+                                <div
+                                    {...props}
+                                    className={cx(className, {
+                                        [styles.flexboxCol]: layout === LAYOUT_FLEXBOX,
+                                        [styles.floatsCol]: layout === LAYOUT_FLOATS
+                                    })}
+                                    style={{
+                                        ...colStyle,
+                                        ...style
+                                    }}
+                                >
+                                    {children}
+                                </div>
+                            );
+                        }}
+                    </ScreenClassContext.Consumer>
+                )}
+            </ConfigurationContext.Consumer>
         );
     }
 }