react-layouts - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

lib/components/FlexBox.js

 'use strict';
 
+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; }; })();
+
 Object.defineProperty(exports, "__esModule", {
@@ -13,18 +15,49 @@ value: true
 
-exports.default = function (props) {
-	var defaultStyle = {
-		display: 'flex'
-	};
-	var style = props.style;
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-	style = Object.assign({}, defaultStyle, style || {});
-	return _react2.default.createElement(
-		'div',
-		{ style: style, className: 'flex-box' },
-		props.children
-	);
-}; /**
-    * Flex Container
-    */
+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; }
 
+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; } /**
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                * Flex Container
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                */
+
+var FlexBox = (function (_React$Component) {
+	_inherits(FlexBox, _React$Component);
+
+	function FlexBox() {
+		_classCallCheck(this, FlexBox);
+
+		return _possibleConstructorReturn(this, Object.getPrototypeOf(FlexBox).apply(this, arguments));
+	}
+
+	_createClass(FlexBox, [{
+		key: 'render',
+		value: function render() {
+			var _props = this.props;
+			var style = _props.style;
+			var flexDirection = _props.flexDirection;
+			var flexWrap = _props.flexWrap;
+
+			var defaultStyle = {
+				display: 'flex',
+				flexDirection: flexDirection || 'initial',
+				flexWrap: flexWrap || 'initial',
+				justifyContent: 'initial',
+				alignItems: 'initial',
+				alignContent: 'initial'
+			};
+
+			style = Object.assign({}, defaultStyle, style || {});
+			return _react2.default.createElement(
+				'div',
+				{ style: style, className: 'flex-box' },
+				this.props.children
+			);
+		}
+	}]);
+
+	return FlexBox;
+})(_react2.default.Component);
+
+exports.default = FlexBox;
 module.exports = exports['default'];

lib/components/FlexItem.js

@@ -1,3 +0,5 @@
-'use strict';
+"use strict";
 
+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; }; })();
+
 Object.defineProperty(exports, "__esModule", {
@@ -7,3 +9,3 @@ value: true
 
-var _react = require('react');
+var _react = require("react");
 
@@ -14,18 +16,43 @@ var _react2 = _interopRequireDefault(_react);
 
-exports.default = function (props) {
-	var defaultStyle = {
-		flex: '1'
-	};
-	var style = props.style;
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-	style = Object.assign({}, defaultStyle, style || {});
-	return _react2.default.createElement(
-		'div',
-		{ style: style, className: 'flex-box__flex-item' },
-		props.children
-	);
-}; /**
-    * Flex Item
-    */
+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; }
 
+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; } /**
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                * Flex Item
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                */
+
+var FlexBox = (function (_React$Component) {
+	_inherits(FlexBox, _React$Component);
+
+	function FlexBox() {
+		_classCallCheck(this, FlexBox);
+
+		return _possibleConstructorReturn(this, Object.getPrototypeOf(FlexBox).apply(this, arguments));
+	}
+
+	_createClass(FlexBox, [{
+		key: "render",
+		value: function render() {
+			var _props = this.props;
+			var style = _props.style;
+			var flexVal = _props.flexVal;
+
+			var defaultStyle = {
+				flex: flexVal || 1
+			};
+			style = Object.assign({}, defaultStyle, style || {});
+			return _react2.default.createElement(
+				"div",
+				{ style: style, className: "flex-box__flex-item" },
+				this.props.children
+			);
+		}
+	}]);
+
+	return FlexBox;
+})(_react2.default.Component);
+
+exports.default = FlexBox;
+;
 module.exports = exports['default'];

package.json

 {
   "name": "react-layouts",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "React UI Library for Layouts",
@@ -32,2 +32,3 @@ "main": "lib/index.js",
     "react-dom": "^0.14.3",
+    "react-element-to-jsx-string": "^2.1.3",
     "react-hot-loader": "^1.3.0",
@@ -34,0 +35,0 @@ "sass-loader": "^3.1.2",

src/components/FlexBox.js

@@ -5,9 +5,18 @@ /**
 import React from 'react';
-export default (props)=>{ 
-	 let defaultStyle = {
-	 	 display : 'flex'
-	 }
-	 let {style} = props;
+export default class FlexBox extends React.Component{ 
+	render(){
+		let {style,flexDirection,flexWrap} = this.props;
+		 let defaultStyle = {
+		 	 display : 'flex',
+		 	 flexDirection:flexDirection || 'initial',
+		 	 flexWrap: flexWrap || 'initial',
+		 	 justifyContent: 'initial',
+		 	 alignItems : 'initial',
+		 	 alignContent:'initial'
+		 }
+	 
 	 style = Object.assign({},defaultStyle,style || {});
-	 return <div style={style} className="flex-box">{props.children}</div>; 
+	 return <div style={style} className="flex-box">{this.props.children}</div>; 
+	}
+	
 }

src/components/FlexItem.js

@@ -5,8 +5,11 @@ /**
 import React from 'react';
-export default (props)=>{ 
-	let defaultStyle = {
-	 	 flex : '1'
+export default class FlexBox extends React.Component{ 
+	render(){
+
+	 let {style,flexVal} = this.props;
+	 let defaultStyle = {
+	 	 flex : flexVal || 1
 	 }
-	 let {style} = props;
 	 style = Object.assign({},defaultStyle,style || {});
-	return <div style={style} className="flex-box__flex-item">{props.children}</div>; }
+	return <div style={style} className="flex-box__flex-item">{this.props.children}</div>; }
+};

webpack.config.js

@@ -12,3 +12,3 @@ var path = require("path");
             'webpack/hot/only-dev-server',
-           './dev/main.js'],
+           './docs/main.js'],
         vendor :['react','lodash','react-dom']
@@ -30,3 +30,3 @@ },
                 include: [path.resolve(__dirname, "src"),
-                path.resolve(__dirname, "dev")]
+                path.resolve(__dirname, "docs")]
             }, {
@@ -33,0 +33,0 @@ test: /\.scss$/,

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

20828

increased by104.16%

Lines of code

350

increased by62.79%

Worsened metrics

Dev dependency count

27

increased by3.85%

Number of package files

23

decreased by-11.54%

No dependency changes