Spacer (merge #129, merge #127)

package.json

@@ -41,10 +41,12 @@
   "dependencies": {
     "blob": "0.0.4",
     "classnames": "2.2.5",
+    "emotion": "9.1.1",
     "form-data": "2.1.2",
     "moment": "2.22.0",
     "react-files": "2.4.5",
-    "react-router-dom": "4.2.2"
+    "react-router-dom": "4.2.2",
+    "throttle-debounce": "1.0.1"
   },
   "devDependencies": {
     "@babel/core": "7.0.0-beta.43",

src/components/Grid/index.js

@@ -1,111 +1,84 @@
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
-import classNames from 'classnames'
-import { getWindowSize, getAttributeForCurrentSize } from '../../utils/size'
-import style from './style.less'
+import { css, cx } from 'emotion'
+import { breakpoints, setAttributeForBreakpoints } from '../../utils/size'
 
 export default class Grid extends Component {
+   /* eslint-disable */
    static propTypes = {
       children: PropTypes.node,
       className: PropTypes.string,
       columns: PropTypes.string,
       gutter: PropTypes.string,
+      height: PropTypes.string,
+      style: PropTypes.object,
       width: PropTypes.string
    }
 
    static defaultProps = {
       columns: '12',
-      gutter: '6px'
+      gutter: '6px',
+      style: {},
+      width: '100%'
    }
+   /* eslint-enable */
 
    static childContextTypes = {
       GridCellStyle: PropTypes.object
    }
 
-   constructor(props) {
-      super(props)
-
-      this.state = {
-         size: getWindowSize(),
-         width: 'auto',
-         innerWidth: '100%',
-         cellWidth: 'auto',
-         cellGutter: 'auto'
-      }
-   }
-
    getChildContext() {
       const GridCellStyle = {
-         width: this.state.cellWidth,
-         gutter: this.state.cellGutter
+         columns: this.props.columns,
+         gutter: this.props.gutter
       }
 
       return { GridCellStyle }
    }
 
-   componentDidMount() {
-      this.updateGrid()
-      window.addEventListener('resize', this.windowSizeUpdated, false)
-   }
-
-   componentDidUpdate() {
-      this.updateGrid()
-   }
-
-   componentWillUnmount() {
-      window.removeEventListener('resize', this.windowSizeUpdated)
-   }
-
-   windowSizeUpdated = () => {
-      const windowSize = getWindowSize()
-      this.setState({ size: windowSize })
-   }
-
-   updateGrid() {
-      const columns = getAttributeForCurrentSize(this.state.size, this.props.columns)
-      const gutter = getAttributeForCurrentSize(this.state.size, this.props.gutter)
-
-      const calculatedGridWidth = this.node.clientWidth
-      const adjustedGridWidth = parseFloat(calculatedGridWidth) + parseFloat(gutter)
-      const cellWidth = (adjustedGridWidth) / columns
-
-      if (this.state.innerWidth !== adjustedGridWidth) {
-         this.setState({
-            innerWidth: adjustedGridWidth
-         })
-      }
-
-      if (this.state.cellWidth !== cellWidth) {
-         this.setState({
-            cellWidth,
-            cellGutter: gutter
-         })
-      }
+   setGridInnerGutter = (styleObj, breakpoint, attributeValue) => {
+      styleObj[breakpoint.key].width = `calc(100% + ${parseFloat(attributeValue)}px)`
    }
 
    render() {
-      const classes = classNames(style.gridContainer, this.props.className)
-      const gutter = parseFloat(getAttributeForCurrentSize(this.state.size, this.props.gutter))
-
-      // TODO: Should use setState
-      if (this.props.width) {
-         const width = getAttributeForCurrentSize(this.state.size, this.props.width)
-         const unit = width.endsWith('px') ? 'px' : '%'
-         this.state.width = parseFloat(width) + unit
+      const styleProps = ['gutter', 'width', 'height']
+
+      const gridStyleObj = {
+         display: 'block',
+         overflow: 'hidden',
+         margin: 'auto',
+         [breakpoints[0].key]: {},
+         [breakpoints[1].key]: {},
+         [breakpoints[2].key]: {},
+         [breakpoints[3].key]: {},
+         [breakpoints[4].key]: {},
+         ...this.props.style
+         // , backgroundColor: 'rgba(0,255,0, 0.1)', // XRAY
       }
 
-      const gridStyle = {
-         width: this.state.width
+      styleProps.forEach((prop) => {
+         setAttributeForBreakpoints(gridStyleObj, prop, this.props[prop])
+      })
+
+      const gridInnerStyleObj = {
+         position: 'relative',
+         top: 0,
+         left: 0,
+         [breakpoints[0].key]: {},
+         [breakpoints[1].key]: {},
+         [breakpoints[2].key]: {},
+         [breakpoints[3].key]: {},
+         [breakpoints[4].key]: {}
       }
 
-      const gridInnerStyle = {
-         width: this.state.innerWidth,
-         marginLeft: `-${gutter}px`
-      }
+      setAttributeForBreakpoints(gridInnerStyleObj, 'height', this.props.height)
+      setAttributeForBreakpoints(
+         gridInnerStyleObj, null, this.props.gutter, this.setGridInnerGutter
+      )
 
       return (
-         <div ref={node => (this.node = node)} className={classes} style={gridStyle}>
-            <div className={style.gridInnerContainer} style={gridInnerStyle}>
+         <div className={cx(css(gridStyleObj), this.props.className)}>
+            <div className={css(gridInnerStyleObj)}>
                {this.props.children}
             </div>
          </div>

src/components/GridCell/index.js

@@ -1,68 +1,96 @@
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
-import classNames from 'classnames'
-import { getWindowSize, getAttributeForCurrentSize } from '../../utils/size'
-import styles from './styles.less'
+import { css, cx } from 'emotion'
+import { breakpoints, setAttributeForBreakpoints, getAttributeForCurrentSize } from '../../utils/size'
 
 export default class GridCell extends Component {
+   /* eslint-disable */
    static propTypes = {
       children: PropTypes.node,
       className: PropTypes.string,
-      colspan: PropTypes.string
+      colspan: PropTypes.string,
+      float: PropTypes.string,
+      height: PropTypes.string,
+      minHeight: PropTypes.string,
+      offset: PropTypes.string,
+      style: PropTypes.object,
    }
 
+   static defaultProps = {
+      colspan: '1',
+      float: 'left',
+      style: {}
+   }
+   /* eslint-enable */
+
    static contextTypes = {
       GridCellStyle: PropTypes.object
    }
 
-   constructor(props) {
-      super(props)
-
-      this.state = {
-         size: getWindowSize(),
-         width: '0',
-         gutter: '0'
-      }
-   }
+   setGridCellWidth = (styleObj, props) => {
+      breakpoints.forEach((breakpoint, index) => {
+         const columns = getAttributeForCurrentSize(breakpoint.name, props.columns)
+         const colspan = getAttributeForCurrentSize(breakpoint.name, props.colspan)
 
-   componentDidMount() {
-      window.addEventListener('resize', this.windowResizeListener, false)
+         styleObj[breakpoint.key].width = `${parseInt(colspan, 10) * parseFloat(100 / columns)}%`
+      })
    }
 
-   componentWillUnmount() {
-      window.removeEventListener('resize', this.windowResizeListener)
+   setGridCellOffset = (styleObj, props) => {
+      if (props.offset) {
+         breakpoints.forEach((breakpoint, index) => {
+            const columns = getAttributeForCurrentSize(breakpoint.name, props.columns)
+            const offset = getAttributeForCurrentSize(breakpoint.name, props.offset)
+            styleObj[breakpoint.key].marginLeft = `${offset * parseFloat(100 / columns)}%`
+         })
+      }
    }
 
-   windowSizeUpdated = () => {
-      const windowSize = getWindowSize()
-      this.setState({ size: windowSize })
+   setGridCellGutter = (styleObj, breakpoint, attributeValue) => {
+      const gutter = parseFloat(attributeValue)
+      styleObj[breakpoint.key].paddingRight = `${gutter}px`
+      styleObj[breakpoint.key].marginBottom = `${gutter}px`
    }
 
    render() {
-      let colspanMultiplier = 1
-      const classes = classNames(styles.gridCell, this.props.className)
-
-      if (this.context.GridCellStyle) {
-         this.state.width = `${this.context.GridCellStyle.width}px`
-         this.state.gutter = `${this.context.GridCellStyle.gutter}`
-      }
+      const { className, colspan, float, minHeight, height, offset } = this.props
+      const gridContext = this.context.GridCellStyle
 
-      if (this.props.colspan) {
-         colspanMultiplier = getAttributeForCurrentSize(this.state.size, this.props.colspan)
+      const gridCellStyleObj = {
+         float: 'left',
+         position: 'relative',
+         [breakpoints[0].key]: {},
+         [breakpoints[1].key]: {},
+         [breakpoints[2].key]: {},
+         [breakpoints[3].key]: {},
+         [breakpoints[4].key]: {},
+         ...this.props.style
+         // , backgroundColor: 'rgba(255,0,0,0.1)', // XRAY
       }
 
-      const gutter = parseFloat(this.state.gutter)
-      const width = parseFloat(this.state.width) * colspanMultiplier
+      this.setGridCellWidth(gridCellStyleObj, { ...gridContext, colspan })
+      this.setGridCellOffset(gridCellStyleObj, { ...gridContext, offset })
+      setAttributeForBreakpoints(gridCellStyleObj, null, gridContext.gutter, this.setGridCellGutter)
+      setAttributeForBreakpoints(gridCellStyleObj, 'float', float)
+      setAttributeForBreakpoints(gridCellStyleObj, 'minHeight', minHeight)
+      setAttributeForBreakpoints(gridCellStyleObj, 'height', height)
 
-      const cellStyle = {
-         width: `${width}px`,
-         paddingLeft: `${gutter}px`,
-         marginBottom: `${gutter}px`
+      const gridCellInnerStyleObj = {
+         width: '100%',
+         [breakpoints[0].key]: {},
+         [breakpoints[1].key]: {},
+         [breakpoints[2].key]: {},
+         [breakpoints[3].key]: {},
+         [breakpoints[4].key]: {}
       }
 
+      setAttributeForBreakpoints(gridCellInnerStyleObj, 'minHeight', minHeight)
+      setAttributeForBreakpoints(gridCellInnerStyleObj, 'height', height)
+
       return (
-         <div className={classes} style={cellStyle} >
-            <div className={styles.gridCellInner}>
+         <div
+            className={cx(css(gridCellStyleObj), className)}>
+            <div className={css(gridCellInnerStyleObj)}>
                {this.props.children}
             </div>
          </div>

src/components/GridRow/style.less

@@ -1,6 +1,8 @@
 .gridRow {
    float: left;
-   display: block;
    width: 100%;
    position: relative;
+   display: flex;
+   align-items: stretch;
+   flex-flow: row wrap;
 }