├── .babelrc
├── .eslintrc
├── .gitignore
├── README.md
├── examples
    ├── HelloWorld.jsx
    ├── index.css
    ├── index.html
    ├── index.jsx
    └── react-flexbox.js
├── lib
    └── index.js
├── package.json
├── src
    └── index.jsx
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     "es2015",
 4 |     "stage-0",
 5 |     "react"
 6 |   ],
 7 |   "plugins": [
 8 |     "react-hot-loader/babel",
 9 |     "transform-react-remove-prop-types"
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "parser": "babel-eslint",
 3 |   "env": {
 4 |     "browser": true,
 5 |     "node": true,
 6 |     "mocha": true
 7 |   },
 8 |   "rules": {
 9 |     "strict": 0,
10 |     "no-var": true,
11 |     "no-underscore-dangle": false,
12 |     "quotes": [2, "single", "avoid-escape"],
13 |     "new-cap": [1, {
14 |       "capIsNewExceptions": ["Map", "List"]
15 |     }],
16 |     "react/display-name": 1,
17 |     "react/jsx-quotes": 1,
18 |     "react/jsx-no-undef": 1,
19 |     "react/jsx-sort-props": 1,
20 |     "react/jsx-uses-react": 1,
21 |     "react/jsx-uses-vars": 1,
22 |     "react/no-did-mount-set-state": 1,
23 |     "react/no-did-update-set-state": 1,
24 |     "react/no-multi-comp": 1,
25 |     "react/no-unknown-property": 1,
26 |     "react/prop-types": 1,
27 |     "react/react-in-jsx-scope": 1,
28 |     "react/self-closing-comp": 1,
29 |     "react/wrap-multilines": 1
30 |   },
31 |   "plugins": [
32 |     "react"
33 |   ]
34 | }
35 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Mac OSX Files
 2 | .DS_Store
 3 | 
 4 | # General Files
 5 | node_modules
 6 | npm-debug.log
 7 | yarn.lock
 8 | examples/dist
 9 | dist
10 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React-flexbox
  2 | 
  3 | Implementation of css flexbox in react with inline styles.
  4 | It is written in ES6 and requires an ES6 to ES5 transpiler. If there is need for
  5 | it I can add a transpiled version to the repo.
  6 | 
  7 | # API
  8 | 
  9 | ## Install
 10 | ```
 11 | npm install react-flexbox --save
 12 | yarn add react-flexbox
 13 | ```
 14 | ```js
 15 | const View = require('react-flexbox')
 16 | // or
 17 | import View from 'react-flexbox'
 18 | ```
 19 | 
 20 | ## UMD
 21 | Module exposed as `ReactFlexbox`
 22 | 
 23 | ```
 24 | <script src="https://unpkg.com/react-flexbox/dist/react-flexbox.js"></scrip>
 25 | ```
 26 | ```js
 27 | const View = ReactFlexbox.default
 28 | ```
 29 | 
 30 | ## Components
 31 | 
 32 | ### View
 33 | 
 34 | A flex view element that can be used instead of `FlexRow` or `FlexColumn`
 35 | 
 36 | This is default import.
 37 | 
 38 | Some simple examples:
 39 | 
 40 | ```js
 41 | <View row>
 42 |   <View auto row>
 43 |     <View column width="100px"><View className="red">Left</View></View>
 44 |     <View column width="100px"><View className="red">Left</View></View>
 45 |   </View>
 46 |   <View row className="green">All the place in the world</View>
 47 | </View>
 48 | ```
 49 | 
 50 | ```js
 51 | <View column height="200px">
 52 |   <View column auto>
 53 |     <View className="green" height="20px">Green</View>
 54 |     <View className="red" height="20px">Red</View>
 55 |   </View>
 56 |   <View className="green">De rest</View>
 57 | </View>
 58 | ```
 59 | 
 60 | ### Props
 61 | 
 62 | All props are optional and can be set on both components.
 63 | 
 64 | #### row
 65 | 
 66 | boolean, sets the flexDirection to row
 67 | 
 68 | #### column
 69 | 
 70 | boolean, sets the flexDirection to column
 71 | 
 72 | #### auto
 73 | 
 74 | boolean, sets flex to '0 0 auto'
 75 | 
 76 | #### className
 77 | 
 78 | must be a string
 79 | 
 80 | #### height
 81 | 
 82 | _height_ must be a string with a valid css unit.
 83 | 
 84 | #### style
 85 | 
 86 | Will be merged the flex style. This allows you to override the style.
 87 | 
 88 | #### width
 89 | 
 90 | _width_ can be either a number `width={2}`, this acts as _flex-grow_ or a string
 91 | with a unit (for example _%_ or _px_) - it must be a valid css unit.
 92 | 
 93 | ### FlexRow
 94 | 
 95 | *deprecated*
 96 | 
 97 | A flex row.
 98 | This is a `View` with prop `row`
 99 | 
100 | ### FlexColumn
101 | 
102 | *deprecated*
103 | 
104 | A flex column
105 | This is a `View` with prop `column`
106 | 
107 | 
108 | # Examples
109 | 
110 | See _examples_
111 | 
112 | To run, make sure the devDependencies are installed and run `npm run example`,
113 | after that surf to _http://localhost:8080/webpack-dev-server/_
114 | 


--------------------------------------------------------------------------------
/examples/HelloWorld.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | 
 3 | import View from '../src'
 4 | 
 5 | export default class HelloWorld extends Component {
 6 |   render() {
 7 |     return (
 8 |       <View column className="border" height="70vh">
 9 |         <View row>
10 |           <View column>Twice the size of the others, the width is set without a unit.</View>
11 |           <View column width="100px" className="red">100px</View>
12 |           <View column>other 1</View>
13 |           <View row auto>
14 |             <View column width="50px" className="green">50px</View>
15 |             <View column width="50px" className="green">50px</View>
16 |           </View>
17 |         </View>
18 |         <View row>
19 |           <View auto row>
20 |             <View column width="100px"><View className="red">Left</View></View>
21 |             <View column width="100px"><View className="red">Left</View></View>
22 |           </View>
23 |           <View row className="green">All the place in the world</View>
24 |         </View>
25 |         <View column height="200px">
26 |           <View column auto>
27 |             <View className="green" height="20px">Green</View>
28 |             <View className="red" height="20px">Red</View>
29 |           </View>
30 |           <View className="green">All the rest</View>
31 |         </View>
32 |       </View>
33 |     );
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/examples/index.css:
--------------------------------------------------------------------------------
 1 | .red {
 2 |   background: red;
 3 | }
 4 | 
 5 | .green {
 6 |   background: green;
 7 | }
 8 | 
 9 | .border {
10 |   border: 1px solid black;
11 | }
12 | 


--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <title>React Flexbox</title>
 5 |   <link href="index.css" rel="stylesheet" type="text/css">
 6 | </head>
 7 | <body>
 8 |   <div id="app"></div>
 9 |   <script src="bundle.js"></script>
10 | </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/examples/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import { AppContainer } from 'react-hot-loader';
 4 | 
 5 | import HelloWorld from './HelloWorld';
 6 | 
 7 | const render = (Component) => {
 8 |   ReactDOM.render(
 9 |   <AppContainer>
10 |     <Component/>
11 |   </AppContainer>,
12 |   document.getElementById('app'));
13 | };
14 | 
15 | render(HelloWorld);
16 | 
17 | // Hot Module Replacement API
18 | if (module.hot) {
19 |   module.hot.accept('./HelloWorld', () => {
20 |     render(HelloWorld)
21 |   });
22 | }
23 | 


--------------------------------------------------------------------------------
/examples/react-flexbox.js:
--------------------------------------------------------------------------------
  1 | (function webpackUniversalModuleDefinition(root, factory) {
  2 | 	if(typeof exports === 'object' && typeof module === 'object')
  3 | 		module.exports = factory(require("React"));
  4 | 	else if(typeof define === 'function' && define.amd)
  5 | 		define(["React"], factory);
  6 | 	else if(typeof exports === 'object')
  7 | 		exports["ReactFlexbox"] = factory(require("React"));
  8 | 	else
  9 | 		root["ReactFlexbox"] = factory(root["React"]);
 10 | })(this, function(__WEBPACK_EXTERNAL_MODULE_0__) {
 11 | return /******/ (function(modules) { // webpackBootstrap
 12 | /******/ 	// The module cache
 13 | /******/ 	var installedModules = {};
 14 | /******/
 15 | /******/ 	// The require function
 16 | /******/ 	function __webpack_require__(moduleId) {
 17 | /******/
 18 | /******/ 		// Check if module is in cache
 19 | /******/ 		if(installedModules[moduleId])
 20 | /******/ 			return installedModules[moduleId].exports;
 21 | /******/
 22 | /******/ 		// Create a new module (and put it into the cache)
 23 | /******/ 		var module = installedModules[moduleId] = {
 24 | /******/ 			i: moduleId,
 25 | /******/ 			l: false,
 26 | /******/ 			exports: {}
 27 | /******/ 		};
 28 | /******/
 29 | /******/ 		// Execute the module function
 30 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 31 | /******/
 32 | /******/ 		// Flag the module as loaded
 33 | /******/ 		module.l = true;
 34 | /******/
 35 | /******/ 		// Return the exports of the module
 36 | /******/ 		return module.exports;
 37 | /******/ 	}
 38 | /******/
 39 | /******/
 40 | /******/ 	// expose the modules object (__webpack_modules__)
 41 | /******/ 	__webpack_require__.m = modules;
 42 | /******/
 43 | /******/ 	// expose the module cache
 44 | /******/ 	__webpack_require__.c = installedModules;
 45 | /******/
 46 | /******/ 	// identity function for calling harmony imports with the correct context
 47 | /******/ 	__webpack_require__.i = function(value) { return value; };
 48 | /******/
 49 | /******/ 	// define getter function for harmony exports
 50 | /******/ 	__webpack_require__.d = function(exports, name, getter) {
 51 | /******/ 		if(!__webpack_require__.o(exports, name)) {
 52 | /******/ 			Object.defineProperty(exports, name, {
 53 | /******/ 				configurable: false,
 54 | /******/ 				enumerable: true,
 55 | /******/ 				get: getter
 56 | /******/ 			});
 57 | /******/ 		}
 58 | /******/ 	};
 59 | /******/
 60 | /******/ 	// getDefaultExport function for compatibility with non-harmony modules
 61 | /******/ 	__webpack_require__.n = function(module) {
 62 | /******/ 		var getter = module && module.__esModule ?
 63 | /******/ 			function getDefault() { return module['default']; } :
 64 | /******/ 			function getModuleExports() { return module; };
 65 | /******/ 		__webpack_require__.d(getter, 'a', getter);
 66 | /******/ 		return getter;
 67 | /******/ 	};
 68 | /******/
 69 | /******/ 	// Object.prototype.hasOwnProperty.call
 70 | /******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
 71 | /******/
 72 | /******/ 	// __webpack_public_path__
 73 | /******/ 	__webpack_require__.p = "";
 74 | /******/
 75 | /******/ 	// Load entry module and return exports
 76 | /******/ 	return __webpack_require__(__webpack_require__.s = 3);
 77 | /******/ })
 78 | /************************************************************************/
 79 | /******/ ([
 80 | /* 0 */
 81 | /***/ (function(module, exports) {
 82 | 
 83 | eval("module.exports = __WEBPACK_EXTERNAL_MODULE_0__;\n\n//////////////////\n// WEBPACK FOOTER\n// external \"React\"\n// module id = 0\n// module chunks = 0\n\n//# sourceURL=webpack:///external_%22React%22?");
 84 | 
 85 | /***/ }),
 86 | /* 1 */
 87 | /***/ (function(module, exports, __webpack_require__) {
 88 | 
 89 | "use strict";
 90 | eval("\n\nvar _typeof = typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; };\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _createClass = function () {\n  function defineProperties(target, props) {\n    for (var i = 0; i < props.length; i++) {\n      var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if (\"value\" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);\n    }\n  }return function (Constructor, protoProps, staticProps) {\n    if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;\n  };\n}();\n\nvar _extends = Object.assign || function (target) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source = arguments[i];for (var key in source) {\n      if (Object.prototype.hasOwnProperty.call(source, key)) {\n        target[key] = source[key];\n      }\n    }\n  }return target;\n};\n\nvar _react = __webpack_require__(0);\n\nvar _react2 = _interopRequireDefault(_react);\n\nfunction _interopRequireDefault(obj) {\n  return obj && obj.__esModule ? obj : { default: obj };\n}\n\nfunction _objectWithoutProperties(obj, keys) {\n  var target = {};for (var i in obj) {\n    if (keys.indexOf(i) >= 0) continue;if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;target[i] = obj[i];\n  }return target;\n}\n\nfunction _classCallCheck(instance, Constructor) {\n  if (!(instance instanceof Constructor)) {\n    throw new TypeError(\"Cannot call a class as a function\");\n  }\n}\n\nfunction _possibleConstructorReturn(self, call) {\n  if (!self) {\n    throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n  }return call && ((typeof call === \"undefined\" ? \"undefined\" : _typeof(call)) === \"object\" || typeof call === \"function\") ? call : self;\n}\n\nfunction _inherits(subClass, superClass) {\n  if (typeof superClass !== \"function\" && superClass !== null) {\n    throw new TypeError(\"Super expression must either be null or a function, not \" + (typeof superClass === \"undefined\" ? \"undefined\" : _typeof(superClass)));\n  }subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;\n}\n\n// import PropTypes from 'prop-types'\n\nvar flexStyle = {\n  boxSizing: 'border-box',\n  display: 'flex',\n  flexWrap: 'nowrap',\n  flex: '1 0 auto',\n  justifyContent: 'space-between',\n  alignContent: 'space-between',\n  alignItems: 'stretch'\n};\n\nvar mixProps = function mixProps(style, props) {\n  var divStyle = {};\n\n  if (props.row) {\n    divStyle.flexDirection = 'row';\n  } else if (props.column) {\n    divStyle.flexDirection = 'column';\n  }\n\n  if (typeof props.width === 'number') {\n    divStyle.flexGrow = props.width;\n  } else if (props.width) {\n    divStyle.flexBasis = 'auto';\n    divStyle.flexGrow = 0;\n    divStyle.flexShrink = 0;\n    divStyle.width = props.width;\n  }\n\n  if (props.height) {\n    divStyle.flexBasis = 'auto';\n    divStyle.flexGrow = 0;\n    divStyle.flexShrink = 0;\n    divStyle.height = props.height;\n  }\n\n  if (props.style) {\n    return _extends({}, flexStyle, style, divStyle, props.style);\n  } else {\n    return _extends({}, flexStyle, style, divStyle);\n  }\n};\n\nvar View = function (_Component) {\n  _inherits(View, _Component);\n\n  function View() {\n    _classCallCheck(this, View);\n\n    return _possibleConstructorReturn(this, (View.__proto__ || Object.getPrototypeOf(View)).apply(this, arguments));\n  }\n\n  _createClass(View, [{\n    key: 'render',\n\n    // static propTypes = {\n    //   row: PropTypes.bool,\n    //   column: PropTypes.bool,\n    //   auto: PropTypes.bool,\n    //   className: PropTypes.string,\n    //   height: PropTypes.string,\n    //   style: PropTypes.object,\n    //   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n    // }\n\n    value: function render() {\n      var style = mixProps({}, this.props);\n      if (this.props.auto) {\n        style.flex = '0 0 auto';\n      }\n\n      // strip props that are invalid to set on a div.\n      // (prevents https://fb.me/react-unknown-prop)\n\n      var _props = this.props,\n          row = _props.row,\n          column = _props.column,\n          auto = _props.auto,\n          divProps = _objectWithoutProperties(_props, ['row', 'column', 'auto']);\n\n      return _react2.default.createElement('div', _extends({}, divProps, { style: style }), this.props.children);\n    }\n  }]);\n\n  return View;\n}(_react.Component);\n\nexports.default = View;\n\n//////////////////\n// WEBPACK FOOTER\n// ./lib/index.js\n// module id = 1\n// module chunks = 0\n\n//# sourceURL=webpack:///./lib/index.js?");
 91 | 
 92 | /***/ }),
 93 | /* 2 */
 94 | /***/ (function(module, exports, __webpack_require__) {
 95 | 
 96 | "use strict";
 97 | eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\nvar _react = __webpack_require__(0);\n\nvar _react2 = _interopRequireDefault(_react);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n// import PropTypes from 'prop-types'\n\nvar flexStyle = {\n  boxSizing: 'border-box',\n  display: 'flex',\n  flexWrap: 'nowrap',\n  flex: '1 0 auto',\n  justifyContent: 'space-between',\n  alignContent: 'space-between',\n  alignItems: 'stretch'\n};\n\nvar mixProps = function mixProps(style, props) {\n  var divStyle = {};\n\n  if (props.row) {\n    divStyle.flexDirection = 'row';\n  } else if (props.column) {\n    divStyle.flexDirection = 'column';\n  }\n\n  if (typeof props.width === 'number') {\n    divStyle.flexGrow = props.width;\n  } else if (props.width) {\n    divStyle.flexBasis = 'auto';\n    divStyle.flexGrow = 0;\n    divStyle.flexShrink = 0;\n    divStyle.width = props.width;\n  }\n\n  if (props.height) {\n    divStyle.flexBasis = 'auto';\n    divStyle.flexGrow = 0;\n    divStyle.flexShrink = 0;\n    divStyle.height = props.height;\n  }\n\n  if (props.style) {\n    return _extends({}, flexStyle, style, divStyle, props.style);\n  } else {\n    return _extends({}, flexStyle, style, divStyle);\n  }\n};\n\nvar View = function (_Component) {\n  _inherits(View, _Component);\n\n  function View() {\n    _classCallCheck(this, View);\n\n    return _possibleConstructorReturn(this, (View.__proto__ || Object.getPrototypeOf(View)).apply(this, arguments));\n  }\n\n  _createClass(View, [{\n    key: 'render',\n\n\n    // static propTypes = {\n    //   row: PropTypes.bool,\n    //   column: PropTypes.bool,\n    //   auto: PropTypes.bool,\n    //   className: PropTypes.string,\n    //   height: PropTypes.string,\n    //   style: PropTypes.object,\n    //   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n    // }\n\n    value: function render() {\n      var style = mixProps({}, this.props);\n      if (this.props.auto) {\n        style.flex = '0 0 auto';\n      }\n\n      // strip props that are invalid to set on a div.\n      // (prevents https://fb.me/react-unknown-prop)\n\n      var _props = this.props,\n          row = _props.row,\n          column = _props.column,\n          auto = _props.auto,\n          divProps = _objectWithoutProperties(_props, ['row', 'column', 'auto']);\n\n      return _react2.default.createElement(\n        'div',\n        _extends({}, divProps, { style: style }),\n        this.props.children\n      );\n    }\n  }]);\n\n  return View;\n}(_react.Component);\n\nexports.default = View;\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/index.jsx\n// module id = 2\n// module chunks = 0\n\n//# sourceURL=webpack:///./src/index.jsx?");
 98 | 
 99 | /***/ }),
100 | /* 3 */
101 | /***/ (function(module, exports, __webpack_require__) {
102 | 
103 | eval("__webpack_require__(1);\nmodule.exports = __webpack_require__(2);\n\n\n//////////////////\n// WEBPACK FOOTER\n// multi ./ ./src/index.jsx\n// module id = 3\n// module chunks = 0\n\n//# sourceURL=webpack:///multi_./_./src/index.jsx?");
104 | 
105 | /***/ })
106 | /******/ ]);
107 | });


--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | Object.defineProperty(exports, "__esModule", {
  4 |   value: true
  5 | });
  6 | 
  7 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
  8 | 
  9 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 10 | 
 11 | var _react = require('react');
 12 | 
 13 | var _react2 = _interopRequireDefault(_react);
 14 | 
 15 | var _propTypes = require('prop-types');
 16 | 
 17 | var _propTypes2 = _interopRequireDefault(_propTypes);
 18 | 
 19 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 20 | 
 21 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 22 | 
 23 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 24 | 
 25 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 26 | 
 27 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 28 | 
 29 | var flexStyle = {
 30 |   boxSizing: 'border-box',
 31 |   display: 'flex',
 32 |   flexWrap: 'nowrap',
 33 |   flex: '1 0 auto',
 34 |   justifyContent: 'space-between',
 35 |   alignContent: 'space-between',
 36 |   alignItems: 'stretch'
 37 | };
 38 | 
 39 | var mixProps = function mixProps(style, props) {
 40 |   var divStyle = {};
 41 | 
 42 |   if (props.row) {
 43 |     divStyle.flexDirection = 'row';
 44 |   } else if (props.column) {
 45 |     divStyle.flexDirection = 'column';
 46 |   }
 47 | 
 48 |   if (typeof props.width === 'number') {
 49 |     divStyle.flexGrow = props.width;
 50 |   } else if (props.width) {
 51 |     divStyle.flexBasis = 'auto';
 52 |     divStyle.flexGrow = 0;
 53 |     divStyle.flexShrink = 0;
 54 |     divStyle.width = props.width;
 55 |   }
 56 | 
 57 |   if (props.height) {
 58 |     divStyle.flexBasis = 'auto';
 59 |     divStyle.flexGrow = 0;
 60 |     divStyle.flexShrink = 0;
 61 |     divStyle.height = props.height;
 62 |   }
 63 | 
 64 |   if (props.style) {
 65 |     return _extends({}, flexStyle, style, divStyle, props.style);
 66 |   } else {
 67 |     return _extends({}, flexStyle, style, divStyle);
 68 |   }
 69 | };
 70 | 
 71 | var View = function (_Component) {
 72 |   _inherits(View, _Component);
 73 | 
 74 |   function View() {
 75 |     _classCallCheck(this, View);
 76 | 
 77 |     return _possibleConstructorReturn(this, (View.__proto__ || Object.getPrototypeOf(View)).apply(this, arguments));
 78 |   }
 79 | 
 80 |   _createClass(View, [{
 81 |     key: 'render',
 82 |     value: function render() {
 83 |       var style = mixProps({}, this.props);
 84 |       if (this.props.auto) {
 85 |         style.flex = '0 0 auto';
 86 |       }
 87 | 
 88 |       // strip props that are invalid to set on a div.
 89 |       // (prevents https://fb.me/react-unknown-prop)
 90 | 
 91 |       var _props = this.props,
 92 |           row = _props.row,
 93 |           column = _props.column,
 94 |           auto = _props.auto,
 95 |           divProps = _objectWithoutProperties(_props, ['row', 'column', 'auto']);
 96 | 
 97 |       return _react2.default.createElement(
 98 |         'div',
 99 |         _extends({}, divProps, { style: style }),
100 |         this.props.children
101 |       );
102 |     }
103 |   }]);
104 | 
105 |   return View;
106 | }(_react.Component);
107 | 
108 | exports.default = View;


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-flexbox",
 3 |   "version": "3.1.4",
 4 |   "description": "React flexbox implementation",
 5 |   "author": "Thomas Coopman @tcoopman",
 6 |   "main": "lib/index.js",
 7 |   "scripts": {
 8 |     "build": "npm run build:lib && npm run build:umd && npm run build:umd:min",
 9 |     "build:lib": "NODE_ENV=production babel src --out-dir lib",
10 |     "build:umd": "NODE_ENV=production webpack src/index.jsx dist/react-flexbox.js",
11 |     "build:umd:min": "NODE_ENV=production webpack -p src/index.jsx dist/react-flexbox.min.js",
12 |     "prepublish": "npm run build",
13 |     "examples": "NODE_ENV=development webpack-dev-server examples"
14 |   },
15 |   "licenses": [
16 |     {
17 |       "type": "MIT",
18 |       "url": "http://www.opensource.org/licenses/mit-license.php"
19 |     }
20 |   ],
21 |   "repository": {
22 |     "type": "git",
23 |     "url": "git@github.com:tcoopman/react-flexbox.git"
24 |   },
25 |   "keywords": [
26 |     "react",
27 |     "react-component",
28 |     "flexbox"
29 |   ],
30 |   "engines": {
31 |     "node": ">= 0.12",
32 |     "iojs": ">= 3.0",
33 |     "npm": ">= 2.1"
34 |   },
35 |   "devDependencies": {
36 |     "babel-cli": "^6.24.1",
37 |     "babel-core": "^6.24.1",
38 |     "babel-eslint": "^7.2.2",
39 |     "babel-loader": "^6.4.1",
40 |     "babel-plugin-transform-react-remove-prop-types": "^0.4.0",
41 |     "babel-preset-es2015": "^6.24.0",
42 |     "babel-preset-react": "^6.23.0",
43 |     "babel-preset-react-hmre": "^1.1.1",
44 |     "babel-preset-stage-0": "^6.22.0",
45 |     "debug": "^2.2.0",
46 |     "eslint": "^3.19.0",
47 |     "eslint-plugin-react": "^6.10.3",
48 |     "react": "^15.5.4",
49 |     "react-dom": "^15.5.4",
50 |     "react-hot-loader": "^3.0.0-beta.6",
51 |     "webpack": "^2.3.3",
52 |     "webpack-dev-server": "^2.4.2"
53 |   },
54 |   "peerDependencies": {
55 |     "react": "^0.14.0 || ^15.0.0 || ^16.0.0",
56 |     "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0"
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/src/index.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react';
 2 | 
 3 | const flexStyle = {
 4 |   boxSizing: 'border-box',
 5 |   display: 'flex',
 6 |   flexWrap: 'nowrap',
 7 |   flex: '1 0 auto',
 8 |   justifyContent: 'space-between',
 9 |   alignContent: 'space-between',
10 |   alignItems: 'stretch'
11 | };
12 | 
13 | const mixProps = (style, props) => {
14 |   const divStyle = {};
15 | 
16 |   if (props.row) {
17 |     divStyle.flexDirection = 'row';
18 |   } else if (props.column) {
19 |     divStyle.flexDirection = 'column';
20 |   }
21 | 
22 |   if (typeof props.width === 'number') {
23 |     divStyle.flexGrow = props.width;
24 |   } else if (props.width) {
25 |     divStyle.flexBasis = 'auto';
26 |     divStyle.flexGrow = 0;
27 |     divStyle.flexShrink = 0;
28 |     divStyle.width = props.width;
29 |   }
30 | 
31 |   if (props.height) {
32 |     divStyle.flexBasis = 'auto';
33 |     divStyle.flexGrow = 0;
34 |     divStyle.flexShrink = 0;
35 |     divStyle.height = props.height;
36 |   }
37 | 
38 |   if (props.style) {
39 |     return {...flexStyle, ...style, ...divStyle, ...props.style};
40 |   } else {
41 |     return {...flexStyle, ...style, ...divStyle};
42 |   }
43 | }
44 | 
45 | export default class View extends Component {
46 | 
47 |   static propTypes = {
48 |     row: PropTypes.bool,
49 |     column: PropTypes.bool,
50 |     auto: PropTypes.bool,
51 |     className: PropTypes.string,
52 |     height: PropTypes.string,
53 |     style: PropTypes.object,
54 |     width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
55 |   }
56 | 
57 |   render() {
58 |     const style = mixProps({}, this.props);
59 |     if (this.props.auto) {
60 |       style.flex = '0 0 auto';
61 |     }
62 | 
63 |     // strip props that are invalid to set on a div.
64 |     // (prevents https://fb.me/react-unknown-prop)
65 |     let {
66 |       row, column, auto,
67 |       ...divProps
68 |     } = this.props;
69 | 
70 |     return <div {...divProps} style={style}>{this.props.children}</div>;
71 |   }
72 | }
73 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const { resolve } = require('path')
 2 | const webpack = require('webpack')
 3 | const dev = process.env.NODE_ENV !== 'production'
 4 | 
 5 | module.exports = {
 6 |   devtool: 'eval',
 7 | 
 8 |   entry: dev ? ['react-hot-loader/patch', 'webpack-dev-server/client?http://localhost:8080', 'webpack/hot/only-dev-server', './'] : ['./'],
 9 | 
10 |   output: dev ? {
11 |     filename: 'bundle.js',
12 |     publicPath: '/'
13 |   } : {
14 |     library: 'ReactFlexbox',
15 |     libraryTarget: 'umd',
16 |   },
17 | 
18 |   externals: dev ? {} : {
19 |     'react': 'React',
20 |     'react-dom': 'ReactDOM',
21 |     'prop-types': 'PropTypes',
22 |   },
23 | 
24 |   devServer: {
25 |     hot: true,
26 |     contentBase: resolve(__dirname, 'examples'),
27 |     publicPath: '/'
28 |   },
29 | 
30 |   resolve: {
31 |     extensions: ['.js','.jsx'],
32 |     modules: [
33 |       resolve(__dirname, "src"),
34 |       "node_modules"
35 |     ],
36 |   },
37 | 
38 |   module: {
39 |     rules: [
40 |       { test: /\.(js|jsx)$/, exclude: /node_modules/, loader: "babel-loader" },
41 |     ]
42 |   },
43 | 
44 |   plugins: dev ? [
45 |     new webpack.HotModuleReplacementPlugin(),
46 |     new webpack.NamedModulesPlugin()
47 |   ] : [
48 |     // new webpack.optimize.UglifyJsPlugin({ minimize: true })
49 |   ]
50 | }
51 | 


--------------------------------------------------------------------------------