From 68adf6c06d7ac677b635a5ea2433fc64aac05f9a Mon Sep 17 00:00:00 2001 From: andrii Date: Fri, 24 Feb 2017 23:24:36 +0200 Subject: [PATCH 1/3] Implement Icon and IconStack as stateless presentation component. Add classnames package for more shorten manage of React component className. Add defaultProps for all non-required properties. --- package.json | 1 + src/Icon.js | 82 +++++++++++++++++++++++------------------------- src/IconStack.js | 65 +++++++++++++++++++------------------- 3 files changed, 74 insertions(+), 74 deletions(-) diff --git a/package.json b/package.json index 89ff5fb..f7732e9 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "babel-loader": "^5.3.2", "babel-plugin-espower": "^1.0.0", "babel-runtime": "^5.8.20", + "classnames": "^2.2.5", "css-loader": "^0.18.0", "eslint": "^1.3.1", "eslint-plugin-react": "^3.3.2", diff --git a/src/Icon.js b/src/Icon.js index 7d111b7..e32d2f0 100644 --- a/src/Icon.js +++ b/src/Icon.js @@ -3,10 +3,9 @@ */ import React, {PropTypes} from 'react'; +import classnames from 'classnames'; -export default class Icon extends React.Component { - - static propTypes = { +const propTypes = { name: PropTypes.string.isRequired, className: PropTypes.string, size: PropTypes.oneOf(['lg', '2x', '3x', '4x', '5x']), @@ -18,48 +17,47 @@ export default class Icon extends React.Component { stack: PropTypes.oneOf(['1x', '2x']), inverse: PropTypes.bool, Component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), - }; +}; - static defaultProps = { +const defaultProps = { Component: 'span', - }; + className: '', + size: null, + rotate: null, + flip: null, + fixedWidth: false, + spin: false, + pulse: false, + stack: null, + inverse: false, +}; - render() { - let { - Component, - name, size, rotate, flip, spin, fixedWidth, stack, inverse, - pulse, className, ...props - } = this.props; - let classNames = `fa fa-${name}`; - if (size) { - classNames = `${classNames} fa-${size}`; - } - if (rotate) { - classNames = `${classNames} fa-rotate-${rotate}`; - } - if (flip) { - classNames = `${classNames} fa-flip-${flip}`; - } - if (fixedWidth) { - classNames = `${classNames} fa-fw`; - } - if (spin) { - classNames = `${classNames} fa-spin`; - } - if (pulse) { - classNames = `${classNames} fa-pulse`; - } +function Icon(props) { + const { + Component, + name, size, rotate, flip, spin, fixedWidth, stack, inverse, + pulse, className, ...restProps + } = props; - if (stack) { - classNames = `${classNames} fa-stack-${stack}`; - } - if (inverse) { - classNames = `${classNames} fa-inverse`; - } + const iconClassNames = classnames( + `fa fa-${name}`, + className, + { + [`fa-${size}`]: size, + [`fa-rotate-${rotate}`]: rotate, + [`fa-flip-${flip}`]: flip, + [`fa-stack-${stack}`]: stack, + 'fa-fw': fixedWidth, + 'fa-spin': spin, + 'fa-pulse': pulse, + 'fa-inverse': inverse, + }, + ); - if (className) { - classNames = `${classNames} ${className}`; - } - return ; - } + return ; } + +Icon.propTypes = propTypes; +Icon.defaultProps = defaultProps; + +export default Icon; \ No newline at end of file diff --git a/src/IconStack.js b/src/IconStack.js index faf4534..954ff2a 100644 --- a/src/IconStack.js +++ b/src/IconStack.js @@ -4,38 +4,39 @@ import React, {PropTypes} from 'react'; -export default class IconStack extends React.Component { - - static propTypes = { +const propTypes = { className: PropTypes.string, size: PropTypes.oneOf(['lg', '2x', '3x', '4x', '5x']), - children: PropTypes.node.isRequired - }; - - render() { - let { - className, - size, - children, - ...props - } = this.props; - - let classNames = ['fa-stack']; - - if (size) { - classNames.push(`fa-${size}`); - } - - if (className) { - classNames.push(className); - } - - const iconStackClassName = classNames.join(' '); - - return ( - - {children} - - ); - } + children: PropTypes.node.isRequired, +}; + +const defaultProps = { + className: '', + size: null, +}; + +function IconStack(props) { + let { + className, + size, + children, + ...restProps + } = props; + + const iconStackClassNames = classnames( + 'fa-stack', + className, + { [`fa-${size}`]: size, }, + ); + + return ( + + {children} + + ); } + +IconStack.propTypes = propTypes; +IconStack.defaultProps = defaultProps; + +export default IconStack; \ No newline at end of file From 0da3846e01bb3ac4ddfb0f30008a90207217413f Mon Sep 17 00:00:00 2001 From: andrii Date: Fri, 24 Feb 2017 23:27:24 +0200 Subject: [PATCH 2/3] add new lines at the end of files --- src/Icon.js | 2 +- src/IconStack.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Icon.js b/src/Icon.js index e32d2f0..246abd2 100644 --- a/src/Icon.js +++ b/src/Icon.js @@ -60,4 +60,4 @@ function Icon(props) { Icon.propTypes = propTypes; Icon.defaultProps = defaultProps; -export default Icon; \ No newline at end of file +export default Icon; diff --git a/src/IconStack.js b/src/IconStack.js index 954ff2a..e9ee460 100644 --- a/src/IconStack.js +++ b/src/IconStack.js @@ -39,4 +39,4 @@ function IconStack(props) { IconStack.propTypes = propTypes; IconStack.defaultProps = defaultProps; -export default IconStack; \ No newline at end of file +export default IconStack; From b30f7a2396b803810c923859c72328f0c77701ce Mon Sep 17 00:00:00 2001 From: andrii Date: Mon, 27 Feb 2017 16:26:02 +0200 Subject: [PATCH 3/3] add classnames import --- src/IconStack.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/IconStack.js b/src/IconStack.js index e9ee460..eb85584 100644 --- a/src/IconStack.js +++ b/src/IconStack.js @@ -3,6 +3,7 @@ */ import React, {PropTypes} from 'react'; +import classnames from 'classnames'; const propTypes = { className: PropTypes.string, @@ -16,7 +17,7 @@ const defaultProps = { }; function IconStack(props) { - let { + const { className, size, children,