From 8896bb8cf2beb375a6d1a628a12eee4e41fa64a8 Mon Sep 17 00:00:00 2001 From: Cheton Wu Date: Thu, 17 Jan 2019 18:57:10 +0800 Subject: [PATCH] Switch to new React Context API --- README.md | 20 ++--- package.json | 6 +- src/Col.jsx | 128 +++++++++------------------- src/Container.jsx | 159 +++++++++++++---------------------- src/Hidden.jsx | 60 ++++--------- src/Provider.jsx | 106 ++++++++++++++++++----- src/Row.jsx | 106 +++++++---------------- src/Visible.jsx | 57 ++++--------- src/constants.js | 2 +- src/context.js | 18 ++++ src/index.styl | 12 +-- styleguide.config.js | 27 +++--- styleguide/Wrapper.jsx | 14 +++ styleguide/flexbox/README.md | 2 +- styleguide/floats/README.md | 12 ++- styleguide/setup.js | 18 +--- styleguide/styles.css | 8 +- 17 files changed, 325 insertions(+), 430 deletions(-) create mode 100644 src/context.js create mode 100644 styleguide/Wrapper.jsx diff --git a/README.md b/README.md index 1f3f548..535a1db 100644 --- a/README.md +++ b/README.md @@ -81,10 +81,10 @@ You can wrap ``, ``, and `` in `` to pass ```jsx @@ -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:
'floats'
'flexbox' | 'floats' | The grid system layout. +layout | One of:
'flexbox'
'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:
'floats'
'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:
'flexbox'
'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:
'floats'
'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 index 7da9259..e4a0b68 100644 --- 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 index d08a070..bb37241 100644 --- 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 ( -
- {children} -
+ + {config => ( + + {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 ( +
+ {children} +
+ ); + }} + + )} + ); } } diff --git a/src/Container.jsx b/src/Container.jsx index 89fdf08..7fd350f 100644 --- a/src/Container.jsx +++ b/src/Container.jsx @@ -2,8 +2,6 @@ import cx from 'classnames'; import ensureArray from 'ensure-array'; import PropTypes from 'prop-types'; import React, { PureComponent } from 'react'; -import throttle from 'lodash.throttle'; -import { getScreenClass } from './utils'; import { LAYOUT_FLEXBOX, LAYOUT_FLOATS, @@ -11,8 +9,9 @@ import { DEFAULT_CONTAINER_WIDTHS, DEFAULT_COLUMNS, DEFAULT_GUTTER_WIDTH, - DEFAULT_LAYOUT + DEFAULT_LAYOUT, } from './constants'; +import { ConfigurationContext, ScreenClassContext } from './context'; import styles from './index.styl'; class Container extends PureComponent { @@ -52,9 +51,6 @@ class Container extends PureComponent { // The grid system layout. layout: PropTypes.oneOf(LAYOUTS), - - // A callback fired when the resize event occurs. - onResize: PropTypes.func }; static defaultProps = { @@ -67,53 +63,7 @@ class Container extends PureComponent { xxl: false }; - static contextTypes = { - breakpoints: PropTypes.arrayOf(PropTypes.number), - containerWidths: PropTypes.arrayOf(PropTypes.number), - columns: PropTypes.number, - gutterWidth: PropTypes.number, - layout: PropTypes.oneOf(LAYOUTS) - }; - - static childContextTypes = { - columns: PropTypes.number, - gutterWidth: PropTypes.number, - layout: PropTypes.oneOf(LAYOUTS) - }; - - getChildContext = () => ({ - columns: this.columns, - gutterWidth: this.gutterWidth, - layout: this.layout - }); - - get columns() { - if (this.props.columns > 0) { - return this.props.columns; - } - if (this.context.columns > 0) { - return this.context.columns; - } - return DEFAULT_COLUMNS; - } - - get gutterWidth() { - if (this.props.gutterWidth >= 0) { - return this.props.gutterWidth; - } - if (this.context.gutterWidth >= 0) { - return this.context.gutterWidth; - } - return DEFAULT_GUTTER_WIDTH; - } - - get layout() { - const layout = this.props.layout || this.context.layout; - return (LAYOUTS.indexOf(layout) >= 0) ? layout : DEFAULT_LAYOUT; - } - - get style() { - const gutterWidth = this.gutterWidth; + getStyle = ({ containerWidths, gutterWidth, screenClass }) => { const style = { paddingLeft: gutterWidth / 2, paddingRight: gutterWidth / 2 @@ -124,10 +74,7 @@ class Container extends PureComponent { return style; } - const { screenClass } = this.state; - const containerWidths = (ensureArray(this.context.containerWidths).length > 0) - ? ensureArray(this.context.containerWidths) - : DEFAULT_CONTAINER_WIDTHS; + containerWidths = ensureArray(containerWidths); if (screenClass === 'sm' && (containerWidths[0] > 0) && (!sm && !xs)) { style.maxWidth = `${containerWidths[0]}px`; @@ -146,42 +93,15 @@ class Container extends PureComponent { } return style; - } - - setScreenClass = () => { - const screenClass = getScreenClass({ breakpoints: this.context.breakpoints }); - - this.setState({ screenClass: screenClass }, () => { - if (typeof this.props.onResize === 'function') { - this.props.onResize({ screenClass: screenClass }); - } - }); }; - 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 { fluid, // eslint-disable-line xs, sm, md, lg, xl, xxl, // eslint-disable-line - gutterWidth, // eslint-disable-line - layout, // eslint-disable-line - onResize, // eslint-disable-line + columns: _columns, // eslint-disable-line + gutterWidth: _gutterWidth, // eslint-disable-line + layout: _layout, // eslint-disable-line className, style, children, @@ -189,19 +109,58 @@ class Container extends PureComponent { } = this.props; return ( -
- {children} -
+ + {config => ( + + {screenClass => { + config = { ...config }; + const containerWidths = (() => { + const containerWidths = ensureArray(config.containerWidths); + return containerWidths.length > 0 ? containerWidths : DEFAULT_CONTAINER_WIDTHS; + })(); + const columns = (() => { + const { columns = config.columns } = this.props; + return Number(columns) > 0 ? Number(columns) : DEFAULT_COLUMNS; + })(); + const gutterWidth = (() => { + const { gutterWidth = config.gutterWidth } = this.props; + return Number(gutterWidth) >= 0 ? (Number(gutterWidth) || 0) : DEFAULT_GUTTER_WIDTH; + })(); + const layout = (() => { + const { layout = config.layout } = this.props; + return (LAYOUTS.indexOf(layout) >= 0) ? layout : DEFAULT_LAYOUT; + })(); + const containerStyle = this.getStyle({ containerWidths, gutterWidth, screenClass }); + + return ( + +
+ {children} +
+ + ); + }} + + )} + ); } } diff --git a/src/Hidden.jsx b/src/Hidden.jsx index 2d1c067..0a4aadf 100644 --- a/src/Hidden.jsx +++ b/src/Hidden.jsx @@ -1,7 +1,6 @@ import PropTypes from 'prop-types'; -import { PureComponent } from 'react'; -import throttle from 'lodash.throttle'; -import { getScreenClass } from './utils'; +import React, { PureComponent } from 'react'; +import { ScreenClassContext } from './context'; const hidden = (screenClass, { xs, sm, md, lg, xl, xxl }) => { if (screenClass === 'xxl') { @@ -44,9 +43,6 @@ class Hidden extends PureComponent { // Hidden on double extra large devices. xxl: PropTypes.bool, - - // A callback fired when the resize event occurs. - onResize: PropTypes.func }; static defaultProps = { @@ -55,51 +51,25 @@ class Hidden extends PureComponent { md: false, lg: false, xl: false, - xxl: false - }; - - static contextTypes = { - breakpoints: PropTypes.arrayOf(PropTypes.number) + xxl: false, }; - setScreenClass = () => { - const screenClass = getScreenClass({ breakpoints: this.context.breakpoints }); - - this.setState({ screenClass: screenClass }, () => { - if (typeof this.props.onResize === 'function') { - this.props.onResize({ screenClass: screenClass }); - } - }); - }; - - 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 { - xs, sm, md, lg, xl, xxl, // eslint-disable-line - onResize // eslint-disable-line + xs, sm, md, lg, xl, xxl, } = this.props; - if (hidden(this.state.screenClass, { xs, sm, md, lg, xl, xxl })) { - return null; - } - - return this.props.children; + return ( + + {screenClass => { + if (hidden(screenClass, { xs, sm, md, lg, xl, xxl })) { + return null; + } + + return this.props.children; + }} + + ); } } diff --git a/src/Provider.jsx b/src/Provider.jsx index 3dd93d6..c38a7e1 100644 --- a/src/Provider.jsx +++ b/src/Provider.jsx @@ -1,13 +1,20 @@ +import ensureArray from 'ensure-array'; +import throttle from 'lodash.throttle'; import PropTypes from 'prop-types'; -import React from 'react'; +import React, { PureComponent } from 'react'; import { + LAYOUTS, + SCREEN_CLASSES, DEFAULT_BREAKPOINTS, DEFAULT_CONTAINER_WIDTHS, DEFAULT_COLUMNS, - DEFAULT_GUTTER_WIDTH + DEFAULT_GUTTER_WIDTH, + DEFAULT_LAYOUT, } from './constants'; +import { ConfigurationContext, ScreenClassContext } from './context'; +import { getScreenClass } from './utils'; -class Provider extends React.Component { +class Provider extends PureComponent { static propTypes = { // The breakpoints (minimum width) of devices in screen class sm, md, lg, xl, and xxl. breakpoints: PropTypes.arrayOf(PropTypes.number), @@ -21,8 +28,11 @@ class Provider extends React.Component { // The horizontal padding (called gutter) between two columns. A gutter width of 30 means 15px on each side of a column. gutterWidth: PropTypes.number, - // The grid system layout. One of: 'floats', 'flexbox' - layout: PropTypes.oneOf(['floats', 'flexbox']) + // The grid system layout. One of: 'flexbox', 'floats' + layout: PropTypes.oneOf(LAYOUTS), + + // A callback invoked when the resize event occurs. + onResize: PropTypes.func, }; static defaultProps = { @@ -30,27 +40,81 @@ class Provider extends React.Component { containerWidths: DEFAULT_CONTAINER_WIDTHS, columns: DEFAULT_COLUMNS, gutterWidth: DEFAULT_GUTTER_WIDTH, - layout: 'flexbox', + layout: DEFAULT_LAYOUT, + onResize: () => {}, }; - static childContextTypes = { - breakpoints: PropTypes.arrayOf(PropTypes.number), - containerWidths: PropTypes.arrayOf(PropTypes.number), - columns: PropTypes.number, - gutterWidth: PropTypes.number, - layout: PropTypes.oneOf(['floats', 'flexbox']) - }; + constructor(props) { + super(props); + + this.state = { + screenClass: SCREEN_CLASSES[0] + }; + } - getChildContext = () => ({ - breakpoints: this.props.breakpoints, - containerWidths: this.props.containerWidths, - columns: this.props.columns, - gutterWidth: this.props.gutterWidth, - layout: this.props.layout - }); + componentDidMount() { + this.setScreenClass(); + + 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; + } + } + + setScreenClass = () => { + const { breakpoints } = this.props; + const screenClass = getScreenClass({ breakpoints }); + if (screenClass !== this.state.screenClass) { + this.setState({ screenClass: screenClass }); + } + }; render() { - return this.props.children; + const breakpoints = (() => { + const breakpoints = ensureArray(this.props.breakpoints); + return breakpoints.length > 0 ? breakpoints : DEFAULT_BREAKPOINTS; + })(); + const containerWidths = (() => { + const containerWidths = ensureArray(this.props.containerWidths); + return containerWidths.length > 0 ? containerWidths : DEFAULT_CONTAINER_WIDTHS; + })(); + const columns = (() => { + const columns = Number(this.props.columns) || 0; + return columns > 0 ? columns : DEFAULT_COLUMNS; + })(); + const gutterWidth = (() => { + const gutterWidth = Number(this.props.gutterWidth) || 0; + return gutterWidth >= 0 ? gutterWidth : DEFAULT_GUTTER_WIDTH; + })(); + const layout = (() => { + const layout = this.props.layout; + return (LAYOUTS.indexOf(layout) >= 0) ? layout : DEFAULT_LAYOUT; + })(); + const { screenClass } = this.state; + + return ( + + + + {this.props.children} + + + + ); } } diff --git a/src/Row.jsx b/src/Row.jsx index 3fd705f..3c163f4 100644 --- a/src/Row.jsx +++ b/src/Row.jsx @@ -1,85 +1,24 @@ import cx from 'classnames'; -import PropTypes from 'prop-types'; import React, { PureComponent } from 'react'; import { LAYOUT_FLEXBOX, LAYOUT_FLOATS, - LAYOUTS, - DEFAULT_COLUMNS, - DEFAULT_GUTTER_WIDTH, - DEFAULT_LAYOUT } from './constants'; +import { ConfigurationContext, ScreenClassContext } from './context'; import styles from './index.styl'; class Row extends PureComponent { - static propTypes = { - // The number of columns. - columns: PropTypes.number, - - // The horizontal padding (called gutter) between two columns. - gutterWidth: PropTypes.number, - - // The grid system layout. - layout: PropTypes.oneOf(LAYOUTS) - }; - - static contextTypes = { - columns: PropTypes.number, - gutterWidth: PropTypes.number, - layout: PropTypes.oneOf(LAYOUTS) - }; - - static childContextTypes = { - columns: PropTypes.number, - gutterWidth: PropTypes.number, - layout: PropTypes.oneOf(LAYOUTS) - }; - - getChildContext = () => ({ - columns: this.columns, - gutterWidth: this.gutterWidth, - layout: this.layout - }); - - get columns() { - if (this.props.columns > 0) { - return this.props.columns; - } - if (this.context.columns > 0) { - return this.context.columns; - } - return DEFAULT_COLUMNS; - } - - get gutterWidth() { - if (this.props.gutterWidth >= 0) { - return this.props.gutterWidth; - } - if (this.context.gutterWidth >= 0) { - return this.context.gutterWidth; - } - return DEFAULT_GUTTER_WIDTH; - } - - get layout() { - const layout = this.props.layout || this.context.layout; - return (LAYOUTS.indexOf(layout) >= 0) ? layout : DEFAULT_LAYOUT; - } - - get style() { - const gutterWidth = this.gutterWidth; + getStyle = ({ gutterWidth }) => { const style = { marginLeft: -(gutterWidth / 2), marginRight: -(gutterWidth / 2) }; return style; - } + }; render() { const { - gutterWidth, // eslint-disable-line - layout, // eslint-disable-line className, style, children, @@ -87,19 +26,32 @@ class Row extends PureComponent { } = this.props; return ( -
- {children} -
+ + {config => ( + + {screenClass => { + const { gutterWidth, layout } = config; + const rowStyle = this.getStyle({ gutterWidth }); + + return ( +
+ {children} +
+ ); + }} + + )} + ); } } diff --git a/src/Visible.jsx b/src/Visible.jsx index 795aeaf..1ce796c 100644 --- a/src/Visible.jsx +++ b/src/Visible.jsx @@ -1,7 +1,6 @@ import PropTypes from 'prop-types'; -import { PureComponent } from 'react'; -import throttle from 'lodash.throttle'; -import { getScreenClass } from './utils'; +import React, { PureComponent } from 'react'; +import { ScreenClassContext } from './context'; const visible = (screenClass, { xs, sm, md, lg, xl, xxl }) => { if (screenClass === 'xxl') { @@ -55,51 +54,25 @@ class Visible extends PureComponent { md: false, lg: false, xl: false, - xxl: false + xxl: false, }; - static contextTypes = { - breakpoints: PropTypes.arrayOf(PropTypes.number) - }; - - setScreenClass = () => { - const screenClass = getScreenClass({ breakpoints: this.context.breakpoints }); - - this.setState({ screenClass: screenClass }, () => { - if (typeof this.props.onResize === 'function') { - this.props.onResize({ screenClass: screenClass }); - } - }); - }; - - 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 { - xs, sm, md, lg, xl, xxl, // eslint-disable-line - onResize // eslint-disable-line + xs, sm, md, lg, xl, xxl, } = this.props; - if (visible(this.state.screenClass, { xs, sm, md, lg, xl, xxl })) { - return this.props.children; - } - - return null; + return ( + + {screenClass => { + if (visible(screenClass, { xs, sm, md, lg, xl, xxl })) { + return this.props.children; + } + + return null; + }} + + ); } } diff --git a/src/constants.js b/src/constants.js index a58841a..d6a91f5 100644 --- a/src/constants.js +++ b/src/constants.js @@ -30,7 +30,7 @@ export const LAYOUT_FLEXBOX = 'flexbox'; export const LAYOUT_FLOATS = 'floats'; export const LAYOUTS = [ LAYOUT_FLEXBOX, - LAYOUT_FLOATS + LAYOUT_FLOATS, ]; export const SCREEN_CLASSES = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']; diff --git a/src/context.js b/src/context.js new file mode 100644 index 0000000..b3a85fd --- /dev/null +++ b/src/context.js @@ -0,0 +1,18 @@ +import React from 'react'; +import { + DEFAULT_BREAKPOINTS, + DEFAULT_CONTAINER_WIDTHS, + DEFAULT_COLUMNS, + DEFAULT_GUTTER_WIDTH, + DEFAULT_LAYOUT, +} from './constants'; + +export const ConfigurationContext = React.createContext({ + breakpoints: DEFAULT_BREAKPOINTS, + containerWidths: DEFAULT_CONTAINER_WIDTHS, + columns: DEFAULT_COLUMNS, + gutterWidth: DEFAULT_GUTTER_WIDTH, + layout: DEFAULT_LAYOUT, +}); + +export const ScreenClassContext = React.createContext(null); diff --git a/src/index.styl b/src/index.styl index 66e9bda..8875297 100644 --- a/src/index.styl +++ b/src/index.styl @@ -1,18 +1,18 @@ /** * Container */ -.floats-container { - clearfix(); - +.flexbox-container { position: relative; - margin-right: auto; margin-left: auto; + margin-right: auto; } -.flexbox-container { +.floats-container { + clearfix(); + position: relative; - margin-left: auto; margin-right: auto; + margin-left: auto; } /** diff --git a/styleguide.config.js b/styleguide.config.js index 4147bb4..f670562 100644 --- a/styleguide.config.js +++ b/styleguide.config.js @@ -92,24 +92,19 @@ const webpackConfig = { }; module.exports = { - title: 'React Grid System', - require: [ - '@babel/polyfill', - path.resolve(__dirname, 'styleguide/setup.js'), - path.resolve(__dirname, 'styleguide/styles.css'), - ], + title: `React Grid System v${pkg.version}`, sections: [ { - name: 'Flexbox', - content: path.resolve(__dirname, 'styleguide/flexbox/README.md'), + name: 'Layout: Flexbox', + content: path.resolve(__dirname, 'styleguide/flexbox/README.md') }, { - name: 'Floats', - content: path.resolve(__dirname, 'styleguide/floats/README.md'), + name: 'Layout: Floats', + content: path.resolve(__dirname, 'styleguide/floats/README.md') }, { name: 'Responsive Utilities', - content: path.resolve(__dirname, 'styleguide/responsive-utilities/README.md'), + content: path.resolve(__dirname, 'styleguide/responsive-utilities/README.md') }, { name: 'Components', @@ -120,9 +115,14 @@ module.exports = { 'Col', 'Hidden', 'Visible' - ].map(c => path.resolve(__dirname, `src/${c}.jsx`)), + ].map(c => path.resolve(__dirname, `src/${c}.jsx`)) } ], + require: [ + '@babel/polyfill', + path.resolve(__dirname, 'styleguide/setup.js'), + path.resolve(__dirname, 'styleguide/styles.css') + ], ribbon: { url: pkg.homepage, text: 'Fork me on GitHub' @@ -131,6 +131,9 @@ module.exports = { exampleMode: 'expand', usageMode: 'expand', showSidebar: true, + styleguideComponents: { + Wrapper: path.resolve(__dirname, 'styleguide/Wrapper.jsx'), + }, styleguideDir: 'docs/', webpackConfig: webpackConfig }; diff --git a/styleguide/Wrapper.jsx b/styleguide/Wrapper.jsx new file mode 100644 index 0000000..00958f6 --- /dev/null +++ b/styleguide/Wrapper.jsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { Provider } from '../src'; + +const Wrapper = (props) => ( + + {props.children} + +); + +export default Wrapper; diff --git a/styleguide/flexbox/README.md b/styleguide/flexbox/README.md index b77d966..357ae88 100644 --- a/styleguide/flexbox/README.md +++ b/styleguide/flexbox/README.md @@ -213,7 +213,7 @@ ```jsx - + col-12 col-sm-6 col-md-8 col-6 col-md-4 diff --git a/styleguide/floats/README.md b/styleguide/floats/README.md index b6e23a2..541fd47 100644 --- a/styleguide/floats/README.md +++ b/styleguide/floats/README.md @@ -52,18 +52,24 @@ ```jsx - Stack the columns on mobile by making one full-width and the other half-width + + Stack the columns on mobile by making one full-width and the other half-width + col-xs-12 col-md-8 col-xs-6 col-md-4 - Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop + + Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop + col-xs-6 col-md-4 col-xs-6 col-md-4 col-xs-6 col-md-4 - Columns are always 50% wide, on mobile and desktop + + Columns are always 50% wide, on mobile and desktop + col-xs-6 col-xs-6 diff --git a/styleguide/setup.js b/styleguide/setup.js index 4312556..dba5301 100644 --- a/styleguide/setup.js +++ b/styleguide/setup.js @@ -1,23 +1,13 @@ import { Fragment } from 'react'; -import styled from 'styled-components'; -import { Provider, Container, Row, Col, Visible, Hidden } from '../src'; +import { Provider, Container, Row, Col, Hidden, Visible } from '../src'; import Text from './Text'; global.Fragment = Fragment; global.Text = Text; -global.Row = styled(Row)` - margin-bottom: 1rem; -`; - -global.Col = styled(Col)` - padding-top: .75rem; - padding-bottom: .75rem; - background-color: rgba(86, 61, 124, .15); - border: 1px solid rgba(86, 61, 124, .2); -`; - global.Provider = Provider; global.Container = Container; -global.Visible = Visible; +global.Row = Row; +global.Col = Col; global.Hidden = Hidden; +global.Visible = Visible; diff --git a/styleguide/styles.css b/styleguide/styles.css index 5affd60..56da3ab 100644 --- a/styleguide/styles.css +++ b/styleguide/styles.css @@ -1,9 +1,13 @@ +body { + font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; +} + [class^="flexbox-row-"] > [class^="flexbox-col-"], [class^="floats-row-"] > [class^="floats-col-"] { - padding-top: .75rem; - padding-bottom: .75rem; background-color: rgba(86, 61, 124, .15); border: 1px solid rgba(86, 61, 124, .2); + padding-top: .75rem; + padding-bottom: .75rem; } [class^="flexbox-row-"] + [class^="flexbox-row-"],