diff --git a/README.md b/README.md index af6538f..6a0d8a7 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,13 +6,13 @@ 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'; - + ``` ## Props @@ -21,3 +21,5 @@ 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 742163c..51e5d18 100644 --- a/dist/components/ProgressBar.js +++ b/dist/components/ProgressBar.js @@ -40,7 +40,9 @@ var ProgressBar = function (_Component) { _this.state = { show: props.show, - overlay: props.overlay || false + overlay: props.overlay || false, + color: props.color, + backgroundColor: props.backgroundColor }; return _this; } @@ -56,7 +58,9 @@ var ProgressBar = function (_Component) { value: function componentWillReceiveProps(nextProps) { this.setState({ show: nextProps.show, - overlay: nextProps.overlay || false + overlay: nextProps.overlay || false, + color: nextProps.color, + backgroundColor: nextProps.backgroundColor }); } @@ -69,7 +73,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, backgroundColor: this.state.backgroundColor }); } else { return null; } @@ -118,7 +122,18 @@ var ProgressBar = function (_Component) { ProgressBar.propTypes = { show: _propTypes2.default.bool, - overlay: _propTypes2.default.bool + overlay: _propTypes2.default.bool, + color: _propTypes2.default.string, + backgroundColor: _propTypes2.default.string +}; + +/** + * Default props + * @type {{color: string}} + */ +ProgressBar.defaultProps = { + 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 fc17416..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: #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: ', ';\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'); @@ -18,4 +18,8 @@ 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.backgroundColor; +}, function (props) { + return props.color; +}, runningProgressBar); \ No newline at end of file diff --git a/package.json b/package.json index 207cef9..512e7a5 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.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/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" diff --git a/src/components/ProgressBar.js b/src/components/ProgressBar.js index acf5e08..854fdfe 100644 --- a/src/components/ProgressBar.js +++ b/src/components/ProgressBar.js @@ -12,7 +12,9 @@ class ProgressBar extends Component { super(props); this.state = { show: props.show, - overlay: props.overlay || false + overlay: props.overlay || false, + color: props.color, + backgroundColor: props.backgroundColor } } @@ -23,7 +25,9 @@ class ProgressBar extends Component { componentWillReceiveProps(nextProps) { this.setState({ show: nextProps.show, - overlay: nextProps.overlay || false + overlay: nextProps.overlay || false, + color: nextProps.color, + backgroundColor: nextProps.backgroundColor }); } @@ -34,7 +38,7 @@ class ProgressBar extends Component { renderProgressBar() { if (this.state.show) { return ( - + ); } else { return (null); @@ -75,7 +79,18 @@ class ProgressBar extends Component { */ ProgressBar.propTypes = { show: PropTypes.bool, - overlay: PropTypes.bool + overlay: PropTypes.bool, + color: PropTypes.string, + backgroundColor: PropTypes.string +}; + +/** + * Default props + * @type {{color: string}} + */ +ProgressBar.defaultProps ={ + backgroundColor: "#F2F2F2", + color: "#ff9800" }; export default ProgressBar; diff --git a/src/components/line.js b/src/components/line.js index 0953c81..87bfd69 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.backgroundColor}; display: flex; position: relative; top: 0; @@ -30,8 +30,8 @@ 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; } -` +`;