react-flexr - npm Package Compare versions

Comparing version 2.0.0-alpha.3 to 2.0.0-alpha.4

dist/cell.component.js

@@ -43,8 +43,6 @@ 'use strict';
 
-var _utilsFindMatchingBreakpointProp = require('./utils/find-matching-breakpoint-prop');
+var _defaults = require('./defaults');
 
-var _utilsFindMatchingBreakpointProp2 = _interopRequireDefault(_utilsFindMatchingBreakpointProp);
+var _utils = require('./utils');
 
-var _defaults = require('./defaults');
-
 var cellStyles = _stilr2['default'].create({
@@ -112,8 +110,7 @@ base: {
 
-      var currentBreakpointProp = _utilsFindMatchingBreakpointProp2['default'](this.props, this.context.width);
-      var flexSize = currentBreakpointProp && currentBreakpointProp !== 'hidden' ? this.calcWidth(currentBreakpointProp) : size ? this.calcWidth(size) : growStyle !== undefined ? {
-        flex: '' + growStyle + ' 1 auto',
+      var breakpoint = _utils.matchingBreakpoint(this.props, this.context.breakpoints);
+
+      var flexSize = breakpoint && breakpoint !== 'hidden' ? this.calcWidth(breakpoint) : size ? this.calcWidth(size) : growStyle !== undefined ? { flex: '' + growStyle + ' 1 auto',
         WebkitFlex: '' + growStyle + ' 1 auto',
-        msFlex: '' + growStyle + ' 1 auto'
-      } : null;
+        msFlex: '' + growStyle + ' 1 auto' } : null;
 
@@ -124,3 +121,3 @@ this.styles = _reactLibObjectAssign2['default']({}, gutter ? { padding: '0 ' + gutter } : null, flexSize, style);
 
-      return currentBreakpointProp === 'hidden' ? null : _react2['default'].createElement(
+      return breakpoint === 'hidden' ? null : _react2['default'].createElement(
         'div',
@@ -136,3 +133,3 @@ _extends({}, rest, {
     value: {
-      width: _react.PropTypes.number
+      breakpoints: _react.PropTypes.arrayOf(_react.PropTypes.string)
     },
@@ -139,0 +136,0 @@ enumerable: true

dist/grid.component.js

@@ -39,6 +39,2 @@ 'use strict';
 
-var _cellComponent = require('./cell.component');
-
-var _cellComponent2 = _interopRequireDefault(_cellComponent);
-
 var _utilsFlexAlignments = require('./utils/flex-alignments');
@@ -52,3 +48,5 @@
 
-var gridStyles = _stilr2['default'].create({
+var _utils = require('./utils');
+
+var styles = _stilr2['default'].create({
   base: {
@@ -60,17 +58,23 @@ display: 'flex',
     margin: '0 -' + _defaults.variables.gutter + ' ' + _utilsDoubleUnit2['default'](_defaults.variables.gutter)
+  },
+  leftHorizontal: {
+    justifyContent: _utilsFlexAlignments.horizontal.left
+  },
+  centerHorizontal: {
+    justifyContent: _utilsFlexAlignments.horizontal.center
+  },
+  rightHorizontal: {
+    justifyContent: _utilsFlexAlignments.horizontal.right
+  },
+  topVertical: {
+    alignItems: _utilsFlexAlignments.vertical.top
+  },
+  centerVertical: {
+    alignItems: _utilsFlexAlignments.vertical.center
+  },
+  bottomVertical: {
+    alignItems: _utilsFlexAlignments.vertical.bottom
   }
 }, _stylesheet2['default']);
 
-var HorizontalStyles = _stilr2['default'].create({
-  left: { justifyContent: _utilsFlexAlignments.horizontal.left },
-  center: { justifyContent: _utilsFlexAlignments.horizontal.center },
-  right: { justifyContent: _utilsFlexAlignments.horizontal.right }
-}, _stylesheet2['default']);
-
-var VerticalStyles = _stilr2['default'].create({
-  top: { alignItems: _utilsFlexAlignments.vertical.top },
-  center: { alignItems: _utilsFlexAlignments.vertical.center },
-  bottom: { alignItems: _utilsFlexAlignments.vertical.bottom }
-}, _stylesheet2['default']);
-
 var Grid = (function (_Component) {
@@ -88,2 +92,9 @@ function Grid() {
   _createClass(Grid, [{
+    key: 'getChildContext',
+    value: function getChildContext() {
+      return {
+        breakpoints: this.context.breakpoints || this.props.breakpoints || _utils.findCurrentBreakpoints() || []
+      };
+    }
+  }, {
     key: 'render',
@@ -104,7 +115,10 @@ value: function render() {
 
-      var classes = [gridStyles.base, className, align ? VerticalStyles[align] : null, hAlign ? HorizontalStyles[hAlign] : null].filter(Boolean).join(' ');
+      var classes = [styles.base, className, align ? styles[align + 'Vertical'] : null, hAlign ? styles[hAlign + 'Horizontal'] : null].filter(Boolean).join(' ');
 
-      var wrapppedChildren = flexCells ? _react2['default'].Children.map(children, function (child) {
-        return child.type === _cellComponent2['default'] ? _reactLibCloneWithProps2['default'](child, { flex: true }) : _reactLibCloneWithProps2['default'](child);
-      }) : children;
+      // TODO: Find a better context solution when React 0.14 lands.
+      var parentProps = {};
+      if (flexCells) parentProps.flex = true;
+      var contextifiedChildren = _react2['default'].Children.map(children, function (child) {
+        return _reactLibCloneWithProps2['default'](child, parentProps);
+      });
 
@@ -116,3 +130,3 @@ return _react2['default'].createElement(
           className: classes }),
-        wrapppedChildren
+        contextifiedChildren
       );
@@ -128,2 +142,14 @@ }
     enumerable: true
+  }, {
+    key: 'contextTypes',
+    value: {
+      breakpoints: _react.PropTypes.arrayOf(_react.PropTypes.string)
+    },
+    enumerable: true
+  }, {
+    key: 'childContextTypes',
+    value: {
+      breakpoints: _react.PropTypes.arrayOf(_react.PropTypes.string)
+    },
+    enumerable: true
   }]);
@@ -134,5 +160,3 @@
 
-_reactLibObjectAssign2['default'](Grid.prototype, _defaults.baseMethods);
-
 exports['default'] = Grid;
 module.exports = exports['default'];

dist/index.js

@@ -25,2 +25,4 @@ 'use strict';
 
+var _utils = require('./utils');
+
 exports['default'] = {
@@ -30,4 +32,6 @@ Grid: _gridComponent2['default'],
   breakpoints: _utilsBreakpoints2['default'],
-  stylesheet: _stylesheet2['default']
+  stylesheet: _stylesheet2['default'],
+  optimizedResize: _utils.optimizedResize,
+  findCurrentBreakpoints: _utils.findCurrentBreakpoints
 };
 module.exports = exports['default'];

lib/cell.component.js

@@ -6,4 +6,4 @@ import stylesheet from './stylesheet';
 import { vertical } from './utils/flex-alignments';
-import findMatchingBreakpointProp from './utils/find-matching-breakpoint-prop';
 import { baseMethods, variables } from './defaults';
+import { matchingBreakpoint } from './utils';
 
@@ -37,3 +37,3 @@ const cellStyles = StyleSheet.create({
   static contextTypes = {
-    width: Type.number
+    breakpoints: Type.arrayOf( Type.string )
   }
@@ -71,3 +71,4 @@
       children,
-      ...rest } = this.props;
+      ...rest
+    } = this.props;
 
@@ -80,14 +81,13 @@ const growStyle = typeof grow === 'number'
 
-    const currentBreakpointProp = findMatchingBreakpointProp(this.props, this.context.width);
-    const flexSize = currentBreakpointProp && currentBreakpointProp !== 'hidden'
-      ? this.calcWidth( currentBreakpointProp )
+
+    const breakpoint = matchingBreakpoint(this.props, this.context.breakpoints);
+
+    const flexSize = breakpoint && breakpoint !== 'hidden'
+      ? this.calcWidth( breakpoint )
       : size
         ? this.calcWidth(size)
         : growStyle !== undefined
-          ?
-            {
-              flex: `${ growStyle } 1 auto`,
+          ? { flex: `${ growStyle } 1 auto`,
               WebkitFlex: `${ growStyle } 1 auto`,
-              msFlex: `${ growStyle } 1 auto`
-            }
+              msFlex: `${ growStyle } 1 auto` }
           : null;
@@ -118,3 +118,3 @@
 
-    return currentBreakpointProp === 'hidden'
+    return breakpoint === 'hidden'
       ? null
@@ -121,0 +121,0 @@ : (

lib/grid.component.js

@@ -6,8 +6,8 @@ import stylesheet from './stylesheet';
 import cloneWithProps from 'react/lib/cloneWithProps';
-import Cell from './cell.component';
 import { vertical, horizontal } from './utils/flex-alignments';
-import { baseMethods, variables } from './defaults';
+import { variables } from './defaults';
 import doubleUnit from './utils/double-unit';
+import { findCurrentBreakpoints } from './utils';
 
-const gridStyles = StyleSheet.create({
+const styles = StyleSheet.create({
   base: {
@@ -19,17 +19,24 @@ display: 'flex',
     margin: `0 -${ variables.gutter } ${ doubleUnit(variables.gutter) }`
+  },
+  leftHorizontal: {
+    justifyContent: horizontal.left
+  },
+  centerHorizontal: {
+    justifyContent: horizontal.center
+  },
+  rightHorizontal: {
+    justifyContent: horizontal.right
+  },
+  topVertical: {
+    alignItems: vertical.top
+  },
+  centerVertical: {
+    alignItems: vertical.center
+  },
+  bottomVertical: {
+    alignItems: vertical.bottom
   }
 }, stylesheet);
 
-const HorizontalStyles = StyleSheet.create({
-  left: { justifyContent: horizontal.left },
-  center: { justifyContent: horizontal.center },
-  right: { justifyContent: horizontal.right }
-}, stylesheet);
 
-const VerticalStyles = StyleSheet.create({
-  top: { alignItems: vertical.top },
-  center: { alignItems: vertical.center },
-  bottom: { alignItems: vertical.bottom }
-}, stylesheet);
-
 class Grid extends Component {
@@ -42,2 +49,19 @@ static propTypes = {
 
+  static contextTypes = {
+    breakpoints: Type.arrayOf( Type.string )
+  }
+
+  static childContextTypes = {
+    breakpoints: Type.arrayOf( Type.string )
+  }
+
+  getChildContext() {
+    return {
+      breakpoints: this.context.breakpoints
+        || this.props.breakpoints
+        || findCurrentBreakpoints()
+        || []
+    };
+  }
+
   render() {
@@ -63,18 +87,20 @@ const {
     const classes = [
-      gridStyles.base,
+      styles.base,
       className,
       align
-        ? VerticalStyles[align]
+        ? styles[align + 'Vertical']
         : null,
       hAlign
-        ? HorizontalStyles[hAlign]
+        ? styles[hAlign + 'Horizontal']
         : null
     ].filter(Boolean).join(' ');
 
-    const wrapppedChildren = flexCells
-      ? React.Children.map( children, ( child ) => child.type === Cell
-        ? cloneWithProps( child, { flex: true })
-        : cloneWithProps( child ) )
-      : children;
 
+    // TODO: Find a better context solution when React 0.14 lands.
+    let parentProps = {};
+    if (flexCells) parentProps.flex = true;
+    const contextifiedChildren = React.Children.map(
+      children, ( child ) => cloneWithProps( child, parentProps )
+    );
+
     return (
@@ -85,3 +111,3 @@ <div
         className={ classes }>
-        { wrapppedChildren }
+        { contextifiedChildren }
       </div>
@@ -92,4 +118,2 @@ );
 
-assign(Grid.prototype, baseMethods);
-
 export default Grid;

lib/index.js

@@ -5,2 +5,3 @@ import Grid from './grid.component';
 import stylesheet from './stylesheet';
+import { findCurrentBreakpoints, optimizedResize } from './utils';
 
@@ -11,3 +12,5 @@ export default {
   breakpoints,
-  stylesheet
+  stylesheet,
+  optimizedResize,
+  findCurrentBreakpoints
 };

package.json

 {
   "name": "react-flexr",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.4",
   "description": "React flexbox grid made simple.",
@@ -5,0 +5,0 @@ "main": "dist",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38161

increased by15.54%

Number of package files

30

increased by7.14%

Lines of code

884

increased by30.96%

Worsened metrics

Number of downloads

26

decreased by-86.24%

No dependency changes