react-extras - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

dist/index.js

@@ -6,4 +6,10 @@ 'use strict';
 });
-exports.canUseDOM = exports.BodyClass = exports.RootClass = exports.If = exports.classNames = exports.autoBind = undefined;
+exports.canUseDOM = exports.getDisplayName = exports.isStatelessComponent = exports.BodyClass = exports.RootClass = exports.For = exports.Choose = exports.If = exports.classNames = exports.autoBind = undefined;
 
+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; }; }();
+
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+
+var _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; };
+
 var _react = require('react');
@@ -23,24 +29,87 @@
 
-const autoBind = exports.autoBind = _autoBind3.default.react; /* eslint-disable no-unused-vars */
-const classNames = exports.classNames = (...args) => {
-	const ret = new Set();
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-	for (const item of args) {
-		const type = typeof 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; }
 
-		if (type === 'string' && item.length > 0) {
-			ret.add(item);
-		} else if (type === 'object' && item !== null) {
-			for (const [key, value] of Object.entries(item)) {
-				if (value) {
-					ret.add(key);
+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; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } /* eslint-disable no-unused-vars */
+
+
+var autoBind = exports.autoBind = _autoBind3.default.react;
+
+var classNames = exports.classNames = function classNames() {
+	for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+		args[_key] = arguments[_key];
+	}
+
+	var ret = new Set();
+
+	var _iteratorNormalCompletion = true;
+	var _didIteratorError = false;
+	var _iteratorError = undefined;
+
+	try {
+		for (var _iterator = args[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+			var item = _step.value;
+
+			var type = typeof item === 'undefined' ? 'undefined' : _typeof(item);
+
+			if (type === 'string' && item.length > 0) {
+				ret.add(item);
+			} else if (type === 'object' && item !== null) {
+				var _iteratorNormalCompletion2 = true;
+				var _didIteratorError2 = false;
+				var _iteratorError2 = undefined;
+
+				try {
+					for (var _iterator2 = Object.entries(item)[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+						var _ref = _step2.value;
+
+						var _ref2 = _slicedToArray(_ref, 2);
+
+						var key = _ref2[0];
+						var value = _ref2[1];
+
+						if (value) {
+							ret.add(key);
+						}
+					}
+				} catch (err) {
+					_didIteratorError2 = true;
+					_iteratorError2 = err;
+				} finally {
+					try {
+						if (!_iteratorNormalCompletion2 && _iterator2.return) {
+							_iterator2.return();
+						}
+					} finally {
+						if (_didIteratorError2) {
+							throw _iteratorError2;
+						}
+					}
 				}
 			}
 		}
+	} catch (err) {
+		_didIteratorError = true;
+		_iteratorError = err;
+	} finally {
+		try {
+			if (!_iteratorNormalCompletion && _iterator.return) {
+				_iterator.return();
+			}
+		} finally {
+			if (_didIteratorError) {
+				throw _iteratorError;
+			}
+		}
 	}
 
-	return [...ret].join(' ');
+	return [].concat(_toConsumableArray(ret)).join(' ');
 };
 
-const If = exports.If = props => props.condition ? props.render ? props.render() : props.children : null;
+var If = exports.If = function If(props) {
+	return props.condition ? props.render ? props.render() : props.children : null;
+};
 If.propTypes = {
@@ -52,33 +121,97 @@ condition: _propTypes2.default.bool.isRequired,
 
-class ElementClass extends _react2.default.PureComponent {
-	componentWillMount() {
-		const { add, remove } = this.props;
-		const { classList } = this.element;
+var Choose = exports.Choose = function Choose(props) {
+	var when = null;
+	var otherwise = null;
 
-		if (add) {
-			classList.add(...add.trim().split(' '));
+	_react2.default.Children.forEach(props.children, function (children) {
+		if (children.props.condition === undefined) {
+			otherwise = children;
+		} else if (!when && children.props.condition === true) {
+			when = children;
 		}
+	});
 
-		if (remove) {
-			classList.remove(...remove.trim().split(' '));
-		}
+	return when || otherwise;
+};
+Choose.propTypes = {
+	children: _propTypes2.default.node
+};
+
+Choose.When = If;
+
+Choose.Otherwise = function (_ref3) {
+	var render = _ref3.render,
+	    children = _ref3.children;
+	return render ? render() : children;
+};
+Choose.Otherwise.propTypes = {
+	children: _propTypes2.default.node,
+	render: _propTypes2.default.func
+};
+
+var For = exports.For = function For(_ref4) {
+	var render = _ref4.render,
+	    of = _ref4.of;
+	return of.map(function (item, index) {
+		return render(item, index);
+	});
+};
+For.propTypes = {
+	of: _propTypes2.default.array.isRequired,
+	render: _propTypes2.default.func
+};
+
+var ElementClass = function (_React$PureComponent) {
+	_inherits(ElementClass, _React$PureComponent);
+
+	function ElementClass() {
+		_classCallCheck(this, ElementClass);
+
+		return _possibleConstructorReturn(this, (ElementClass.__proto__ || Object.getPrototypeOf(ElementClass)).apply(this, arguments));
 	}
 
-	componentWillUnmount() {
-		const { add, remove } = this.props;
-		const { classList } = this.element;
+	_createClass(ElementClass, [{
+		key: 'componentWillMount',
+		value: function componentWillMount() {
+			var _props = this.props,
+			    add = _props.add,
+			    remove = _props.remove;
+			var classList = this.element.classList;
 
-		if (add) {
-			classList.remove(...add.trim().split(' '));
+
+			if (add) {
+				classList.add.apply(classList, _toConsumableArray(add.trim().split(' ')));
+			}
+
+			if (remove) {
+				classList.remove.apply(classList, _toConsumableArray(remove.trim().split(' ')));
+			}
 		}
+	}, {
+		key: 'componentWillUnmount',
+		value: function componentWillUnmount() {
+			var _props2 = this.props,
+			    add = _props2.add,
+			    remove = _props2.remove;
+			var classList = this.element.classList;
 
-		if (remove) {
-			classList.add(...remove.trim().split(' '));
+
+			if (add) {
+				classList.remove.apply(classList, _toConsumableArray(add.trim().split(' ')));
+			}
+
+			if (remove) {
+				classList.add.apply(classList, _toConsumableArray(remove.trim().split(' ')));
+			}
 		}
-	}
+	}, {
+		key: 'render',
+		value: function render() {
+			return null;
+		}
+	}]);
 
-	render() {
-		return null;
-	}
-}
+	return ElementClass;
+}(_react2.default.PureComponent);
+
 ElementClass.propTypes = {
@@ -89,20 +222,44 @@ add: _propTypes2.default.string,
 
-class RootClass extends ElementClass {
-	constructor() {
-		super();
-		this.element = document.documentElement;
+var RootClass = exports.RootClass = function (_ElementClass) {
+	_inherits(RootClass, _ElementClass);
+
+	function RootClass() {
+		_classCallCheck(this, RootClass);
+
+		var _this2 = _possibleConstructorReturn(this, (RootClass.__proto__ || Object.getPrototypeOf(RootClass)).call(this));
+
+		_this2.element = document.documentElement;
+		return _this2;
 	}
-}
-exports.RootClass = RootClass;
+
+	return RootClass;
+}(ElementClass);
+
 RootClass.propTypes = ElementClass.propTypes;
 
-class BodyClass extends ElementClass {
-	constructor() {
-		super();
-		this.element = document.body;
+var BodyClass = exports.BodyClass = function (_ElementClass2) {
+	_inherits(BodyClass, _ElementClass2);
+
+	function BodyClass() {
+		_classCallCheck(this, BodyClass);
+
+		var _this3 = _possibleConstructorReturn(this, (BodyClass.__proto__ || Object.getPrototypeOf(BodyClass)).call(this));
+
+		_this3.element = document.body;
+		return _this3;
 	}
-}
-exports.BodyClass = BodyClass;
+
+	return BodyClass;
+}(ElementClass);
+
 BodyClass.propTypes = ElementClass.propTypes;
 
-const canUseDOM = exports.canUseDOM = typeof window !== 'undefined' && 'document' in window && 'createElement' in window.document;
+var isStatelessComponent = exports.isStatelessComponent = function isStatelessComponent(Component) {
+	return !(typeof Component.prototype !== 'undefined' && typeof Component.prototype.render === 'function');
+};
+
+var getDisplayName = exports.getDisplayName = function getDisplayName(Component) {
+	return Component.displayName || Component.name || 'Component';
+};
+
+var canUseDOM = exports.canUseDOM = typeof window !== 'undefined' && 'document' in window && 'createElement' in window.document;

package.json

 {
 	"name": "react-extras",
-	"version": "0.4.0",
+	"version": "0.5.0",
 	"description": "Useful components and utilities for working with React",
@@ -52,2 +52,3 @@ "license": "MIT",
 		"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
+		"babel-preset-env": "^1.6.1",
 		"babel-preset-react": "^6.24.1",
@@ -86,2 +87,3 @@ "babel-preset-stage-3": "^6.24.1",
 		"presets": [
+			"env",
 			"react",
@@ -88,0 +90,0 @@ "stage-3"

readme.md

@@ -112,2 +112,48 @@ # react-extras [![Build Status](https://travis-ci.org/sindresorhus/react-extras.svg?branch=master)](https://travis-ci.org/sindresorhus/react-extras)
 
+### `<Choose>`
+
+React component similar to a switch case. `<Choose>` has 2 children components:
+ - `<Choose.When>` that renders the children if the `condition` prop is `true`.
+ - `<Choose.Otherwise>` that renders the children if has no `<Choose.When>` with `true` prop `condition`.
+ 
+Note that even when the children are not rendered, they're still evaluated.
+
+```jsx
+<div>
+	<Choose>
+		<Choose.When condition={props.success}>
+			<h1>{props.success}</h1>
+		</Choose.When>
+		<Choose.When condition={props.error}>
+			<h1>{props.error}</h1>
+		</Choose.When>
+		<Choose.Otherwise>
+			<h1>😎</h1>
+		</Choose.Otherwise>
+	</Choose>
+</div>
+```
+
+### `<For/>`
+
+React component that iterates over the `of` prop and renders the `render` prop.
+
+```jsx
+<div>
+	<For of={['🌈', '🦄', '😎']} render={(item, index) =>
+		<button key={index}>{item}</button>
+	}/>
+</div>
+```
+
+Or you could just use plain JavaScript:
+
+```jsx
+<div>
+    {['🌈', '🦄', '😎'].map((item, index) =>
+        <button key={index}>{item}</button>
+    )}
+</div>
+```
+
 ### `<RootClass/>`
@@ -155,2 +201,10 @@
 
+### isStatelessComponent(Component)
+
+Returns a boolean of whether the given `Component` is a [functional stateless component](https://javascriptplayground.com/functional-stateless-components-react/).
+
+### getDisplayName(Component)
+
+Returns the [display name](https://reactjs.org/docs/react-component.html#displayname) of the given `Component`.
+
 ### canUseDOM
@@ -157,0 +211,0 @@

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

16724

increased by93.41%

Lines of code

202

increased by152.5%

Number of lines in readme file

221

increased by32.34%

Worsened metrics

Dev dependency count

12

increased by9.09%

No dependency changes