From c5e2fada2539f6b4cabbe4d4e1ff6f555255a8c1 Mon Sep 17 00:00:00 2001 From: Unknown Date: Sun, 17 Feb 2019 09:46:24 +0000 Subject: [PATCH 1/7] Support custom color --- src/components/ProgressBar.js | 19 +++++++++++++++---- src/components/line.js | 6 +++--- 2 files changed, 18 insertions(+), 7 deletions(-) diff --git a/src/components/ProgressBar.js b/src/components/ProgressBar.js index acf5e08..2adc93b 100644 --- a/src/components/ProgressBar.js +++ b/src/components/ProgressBar.js @@ -12,7 +12,8 @@ class ProgressBar extends Component { super(props); this.state = { show: props.show, - overlay: props.overlay || false + overlay: props.overlay || false, + color: props.color } } @@ -23,7 +24,8 @@ class ProgressBar extends Component { componentWillReceiveProps(nextProps) { this.setState({ show: nextProps.show, - overlay: nextProps.overlay || false + overlay: nextProps.overlay || false, + color: nextProps.color }); } @@ -34,7 +36,7 @@ class ProgressBar extends Component { renderProgressBar() { if (this.state.show) { return ( - + ); } else { return (null); @@ -75,7 +77,16 @@ class ProgressBar extends Component { */ ProgressBar.propTypes = { show: PropTypes.bool, - overlay: PropTypes.bool + overlay: PropTypes.bool, + color: PropTypes.string +}; + +/** + * Default props + * @type {{color: string}} + */ +ProgressBar.defaultProps ={ + color: "#F2F2F2" }; export default ProgressBar; diff --git a/src/components/line.js b/src/components/line.js index 0953c81..218c050 100644 --- a/src/components/line.js +++ b/src/components/line.js @@ -13,10 +13,10 @@ const runningProgressBar = keyframes` margin-left: 100%; margin-right: 0; } -` +`; export const Line = styled.div` - background-color: #F2F2F2; + background-color: ${props => props.color}; display: flex; position: relative; top: 0; @@ -34,4 +34,4 @@ export const Line = styled.div` content: ''; animation: ${runningProgressBar} 2s cubic-bezier(0.4, 0, 0.2, 1) infinite; } -` +`; From 816ed280d36214428edb46d41f7a9a0d9c18b3dc Mon Sep 17 00:00:00 2001 From: Unknown Date: Sun, 17 Feb 2019 09:55:03 +0000 Subject: [PATCH 2/7] Build --- dist/components/ProgressBar.js | 19 +++++++++++++++---- dist/components/line.js | 6 ++++-- 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/dist/components/ProgressBar.js b/dist/components/ProgressBar.js index 742163c..ed15238 100644 --- a/dist/components/ProgressBar.js +++ b/dist/components/ProgressBar.js @@ -40,7 +40,8 @@ var ProgressBar = function (_Component) { _this.state = { show: props.show, - overlay: props.overlay || false + overlay: props.overlay || false, + color: props.color }; return _this; } @@ -56,7 +57,8 @@ var ProgressBar = function (_Component) { value: function componentWillReceiveProps(nextProps) { this.setState({ show: nextProps.show, - overlay: nextProps.overlay || false + overlay: nextProps.overlay || false, + color: nextProps.color }); } @@ -69,7 +71,7 @@ var ProgressBar = function (_Component) { key: 'renderProgressBar', value: function renderProgressBar() { if (this.state.show) { - return _react2.default.createElement(_line.Line, null); + return _react2.default.createElement(_line.Line, { color: this.state.color }); } else { return null; } @@ -118,7 +120,16 @@ var ProgressBar = function (_Component) { ProgressBar.propTypes = { show: _propTypes2.default.bool, - overlay: _propTypes2.default.bool + overlay: _propTypes2.default.bool, + color: _propTypes2.default.string +}; + +/** + * Default props + * @type {{color: string}} + */ +ProgressBar.defaultProps = { + color: "#F2F2F2" }; exports.default = ProgressBar; \ No newline at end of file diff --git a/dist/components/line.js b/dist/components/line.js index fc17416..c105311 100644 --- a/dist/components/line.js +++ b/dist/components/line.js @@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { exports.Line = undefined; var _templateObject = _taggedTemplateLiteral(['\n 0% {\n margin-left: 0px;\n margin-right: 100%;\n }\n 50% {\n margin-left: 25%;\n margin-right: 0%;\n }\n 100% {\n margin-left: 100%;\n margin-right: 0;\n }\n'], ['\n 0% {\n margin-left: 0px;\n margin-right: 100%;\n }\n 50% {\n margin-left: 25%;\n margin-right: 0%;\n }\n 100% {\n margin-left: 100%;\n margin-right: 0;\n }\n']), - _templateObject2 = _taggedTemplateLiteral(['\n background-color: #F2F2F2;\n display: flex;\n position: relative;\n top: 0;\n left: 0;\n z-index: 5;\n height: 4px;\n width: 100%;\n margin: 0;\n\n &:before {\n height: 4px;\n width: 100%;\n margin: 0;\n background-color: #ff9800;\n content: \'\';\n animation: ', ' 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n }\n'], ['\n background-color: #F2F2F2;\n display: flex;\n position: relative;\n top: 0;\n left: 0;\n z-index: 5;\n height: 4px;\n width: 100%;\n margin: 0;\n\n &:before {\n height: 4px;\n width: 100%;\n margin: 0;\n background-color: #ff9800;\n content: \'\';\n animation: ', ' 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n }\n']); + _templateObject2 = _taggedTemplateLiteral(['\n background-color: ', ';\n display: flex;\n position: relative;\n top: 0;\n left: 0;\n z-index: 5;\n height: 4px;\n width: 100%;\n margin: 0;\n\n &:before {\n height: 4px;\n width: 100%;\n margin: 0;\n background-color: #ff9800;\n content: \'\';\n animation: ', ' 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n }\n'], ['\n background-color: ', ';\n display: flex;\n position: relative;\n top: 0;\n left: 0;\n z-index: 5;\n height: 4px;\n width: 100%;\n margin: 0;\n\n &:before {\n height: 4px;\n width: 100%;\n margin: 0;\n background-color: #ff9800;\n content: \'\';\n animation: ', ' 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n }\n']); var _styledComponents = require('styled-components'); @@ -18,4 +18,6 @@ function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defi var runningProgressBar = (0, _styledComponents.keyframes)(_templateObject); -var Line = exports.Line = _styledComponents2.default.div(_templateObject2, runningProgressBar); \ No newline at end of file +var Line = exports.Line = _styledComponents2.default.div(_templateObject2, function (props) { + return props.color; +}, runningProgressBar); \ No newline at end of file From 2d5aa60da48bb0601fbfa62968852b77f2905615 Mon Sep 17 00:00:00 2001 From: Kofi Boahene Date: Sun, 17 Feb 2019 09:57:17 +0000 Subject: [PATCH 3/7] Update README.md Color support --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index af6538f..955d73d 100644 --- a/README.md +++ b/README.md @@ -21,3 +21,4 @@ Name | Description | Default/Required | Type ------|-------------|----------|----------- show | Show or hide ProgressBar. | required | bool overlay | Show or hide overlay. | optional | bool +color | The color of the progress bar. | optional | string From 13c566309b11fce2101fe5c727dc5f84b9c48a4d Mon Sep 17 00:00:00 2001 From: Kofi Boahene Date: Sun, 17 Feb 2019 09:58:54 +0000 Subject: [PATCH 4/7] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 955d73d..5ef6838 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ React Component Material Design Progress Bar. ```javascript import ProgressBar from 'react-md-progress-bar'; - + ``` ## Props From dedb390810d15c6694da4a50ca93728ce8ad1b23 Mon Sep 17 00:00:00 2001 From: Unknown Date: Sun, 17 Feb 2019 10:07:29 +0000 Subject: [PATCH 5/7] Update package --- package.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 207cef9..eeaae38 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { - "name": "react-md-progress-bar", - "version": "0.0.2", - "description": "React Component Material Design Progress bar", + "name": "react-md-progress", + "version": "0.0.1", + "description": "React Customizable Material Design Progress bar. This library is a fork of Paulo McNally's react-md-progress-bar. See https://github.com/mcnallydev/react-md-progress-bar", "main": "index.js", - "repository": "https://github.com/mcnallydev/react-md-progress-bar.git", - "author": "Paulo McNally ", + "repository": "https://github.com/Euler-KB/react-md-progress-bar.git", + "author": "Kofi Boahene ", "license": "MIT", "files": [ "dist" From 01b078eb546234fde154030ae6ea6aa487470f4f Mon Sep 17 00:00:00 2001 From: Unknown Date: Sun, 17 Feb 2019 10:11:56 +0000 Subject: [PATCH 6/7] Documentation & package version update --- README.md | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 5ef6838..ce4d810 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# react-md-progress-bar +# react-md-progress React Component Material Design Progress Bar. ## Preview @@ -6,11 +6,11 @@ React Component Material Design Progress Bar. ## Installation - $ yarn add react-md-progress-bar + $ yarn add react-md-progress ## Example ```javascript -import ProgressBar from 'react-md-progress-bar'; +import ProgressBar from 'react-md-progress'; ``` diff --git a/package.json b/package.json index eeaae38..f2babe3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-md-progress", - "version": "0.0.1", + "version": "0.0.2", "description": "React Customizable Material Design Progress bar. This library is a fork of Paulo McNally's react-md-progress-bar. See https://github.com/mcnallydev/react-md-progress-bar", "main": "index.js", "repository": "https://github.com/Euler-KB/react-md-progress-bar.git", From 2c62ca1665f059dc7fd53eae1a154587447811b7 Mon Sep 17 00:00:00 2001 From: Unknown Date: Sun, 17 Feb 2019 11:58:15 +0000 Subject: [PATCH 7/7] Support background and foreground color customization --- README.md | 1 + dist/components/ProgressBar.js | 14 +++++++++----- dist/components/line.js | 4 +++- package.json | 2 +- src/components/ProgressBar.js | 14 +++++++++----- src/components/line.js | 4 ++-- 6 files changed, 25 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index ce4d810..6a0d8a7 100644 --- a/README.md +++ b/README.md @@ -22,3 +22,4 @@ Name | Description | Default/Required | Type show | Show or hide ProgressBar. | required | bool overlay | Show or hide overlay. | optional | bool color | The color of the progress bar. | optional | string +backgroundColor | Background color of the progress bar. | optional | string diff --git a/dist/components/ProgressBar.js b/dist/components/ProgressBar.js index ed15238..51e5d18 100644 --- a/dist/components/ProgressBar.js +++ b/dist/components/ProgressBar.js @@ -41,7 +41,8 @@ var ProgressBar = function (_Component) { _this.state = { show: props.show, overlay: props.overlay || false, - color: props.color + color: props.color, + backgroundColor: props.backgroundColor }; return _this; } @@ -58,7 +59,8 @@ var ProgressBar = function (_Component) { this.setState({ show: nextProps.show, overlay: nextProps.overlay || false, - color: nextProps.color + color: nextProps.color, + backgroundColor: nextProps.backgroundColor }); } @@ -71,7 +73,7 @@ var ProgressBar = function (_Component) { key: 'renderProgressBar', value: function renderProgressBar() { if (this.state.show) { - return _react2.default.createElement(_line.Line, { color: this.state.color }); + return _react2.default.createElement(_line.Line, { color: this.state.color, backgroundColor: this.state.backgroundColor }); } else { return null; } @@ -121,7 +123,8 @@ var ProgressBar = function (_Component) { ProgressBar.propTypes = { show: _propTypes2.default.bool, overlay: _propTypes2.default.bool, - color: _propTypes2.default.string + color: _propTypes2.default.string, + backgroundColor: _propTypes2.default.string }; /** @@ -129,7 +132,8 @@ ProgressBar.propTypes = { * @type {{color: string}} */ ProgressBar.defaultProps = { - color: "#F2F2F2" + backgroundColor: "#F2F2F2", + color: "#ff9800" }; exports.default = ProgressBar; \ No newline at end of file diff --git a/dist/components/line.js b/dist/components/line.js index c105311..d3865aa 100644 --- a/dist/components/line.js +++ b/dist/components/line.js @@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { exports.Line = undefined; var _templateObject = _taggedTemplateLiteral(['\n 0% {\n margin-left: 0px;\n margin-right: 100%;\n }\n 50% {\n margin-left: 25%;\n margin-right: 0%;\n }\n 100% {\n margin-left: 100%;\n margin-right: 0;\n }\n'], ['\n 0% {\n margin-left: 0px;\n margin-right: 100%;\n }\n 50% {\n margin-left: 25%;\n margin-right: 0%;\n }\n 100% {\n margin-left: 100%;\n margin-right: 0;\n }\n']), - _templateObject2 = _taggedTemplateLiteral(['\n background-color: ', ';\n display: flex;\n position: relative;\n top: 0;\n left: 0;\n z-index: 5;\n height: 4px;\n width: 100%;\n margin: 0;\n\n &:before {\n height: 4px;\n width: 100%;\n margin: 0;\n background-color: #ff9800;\n content: \'\';\n animation: ', ' 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n }\n'], ['\n background-color: ', ';\n display: flex;\n position: relative;\n top: 0;\n left: 0;\n z-index: 5;\n height: 4px;\n width: 100%;\n margin: 0;\n\n &:before {\n height: 4px;\n width: 100%;\n margin: 0;\n background-color: #ff9800;\n content: \'\';\n animation: ', ' 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n }\n']); + _templateObject2 = _taggedTemplateLiteral(['\n background-color: ', ';\n display: flex;\n position: relative;\n top: 0;\n left: 0;\n z-index: 5;\n height: 4px;\n width: 100%;\n margin: 0;\n\n &:before {\n height: 4px;\n width: 100%;\n margin: 0;\n background-color: ', ';\n content: \'\';\n animation: ', ' 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n }\n'], ['\n background-color: ', ';\n display: flex;\n position: relative;\n top: 0;\n left: 0;\n z-index: 5;\n height: 4px;\n width: 100%;\n margin: 0;\n\n &:before {\n height: 4px;\n width: 100%;\n margin: 0;\n background-color: ', ';\n content: \'\';\n animation: ', ' 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n }\n']); var _styledComponents = require('styled-components'); @@ -19,5 +19,7 @@ function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defi var runningProgressBar = (0, _styledComponents.keyframes)(_templateObject); var Line = exports.Line = _styledComponents2.default.div(_templateObject2, function (props) { + return props.backgroundColor; +}, function (props) { return props.color; }, runningProgressBar); \ No newline at end of file diff --git a/package.json b/package.json index f2babe3..512e7a5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-md-progress", - "version": "0.0.2", + "version": "0.0.3", "description": "React Customizable Material Design Progress bar. This library is a fork of Paulo McNally's react-md-progress-bar. See https://github.com/mcnallydev/react-md-progress-bar", "main": "index.js", "repository": "https://github.com/Euler-KB/react-md-progress-bar.git", diff --git a/src/components/ProgressBar.js b/src/components/ProgressBar.js index 2adc93b..854fdfe 100644 --- a/src/components/ProgressBar.js +++ b/src/components/ProgressBar.js @@ -13,7 +13,8 @@ class ProgressBar extends Component { this.state = { show: props.show, overlay: props.overlay || false, - color: props.color + color: props.color, + backgroundColor: props.backgroundColor } } @@ -25,7 +26,8 @@ class ProgressBar extends Component { this.setState({ show: nextProps.show, overlay: nextProps.overlay || false, - color: nextProps.color + color: nextProps.color, + backgroundColor: nextProps.backgroundColor }); } @@ -36,7 +38,7 @@ class ProgressBar extends Component { renderProgressBar() { if (this.state.show) { return ( - + ); } else { return (null); @@ -78,7 +80,8 @@ class ProgressBar extends Component { ProgressBar.propTypes = { show: PropTypes.bool, overlay: PropTypes.bool, - color: PropTypes.string + color: PropTypes.string, + backgroundColor: PropTypes.string }; /** @@ -86,7 +89,8 @@ ProgressBar.propTypes = { * @type {{color: string}} */ ProgressBar.defaultProps ={ - color: "#F2F2F2" + backgroundColor: "#F2F2F2", + color: "#ff9800" }; export default ProgressBar; diff --git a/src/components/line.js b/src/components/line.js index 218c050..87bfd69 100644 --- a/src/components/line.js +++ b/src/components/line.js @@ -16,7 +16,7 @@ const runningProgressBar = keyframes` `; export const Line = styled.div` - background-color: ${props => props.color}; + background-color: ${props => props.backgroundColor}; display: flex; position: relative; top: 0; @@ -30,7 +30,7 @@ export const Line = styled.div` height: 4px; width: 100%; margin: 0; - background-color: #ff9800; + background-color: ${props => props.color}; content: ''; animation: ${runningProgressBar} 2s cubic-bezier(0.4, 0, 0.2, 1) infinite; }