From 97321417af8ee12df551e0283c7b828dec665c6a Mon Sep 17 00:00:00 2001 From: Nathan Flurry Date: Thu, 18 May 2017 21:07:42 -0700 Subject: [PATCH 01/12] Moved to ES6 --- dist/react-progressbar.js | 299 +++++++++++++++++++++++++------------- local-dev/main.js | 50 ++++--- package.json | 16 +- src/main.js | 64 ++++---- 4 files changed, 268 insertions(+), 161 deletions(-) diff --git a/dist/react-progressbar.js b/dist/react-progressbar.js index 262572c..465cd56 100644 --- a/dist/react-progressbar.js +++ b/dist/react-progressbar.js @@ -1,18 +1,22 @@ (function (global, factory) { if (typeof define === "function" && define.amd) { - define(['module', 'react', 'react-dom', 'lodash.isequal', 'progressbar.js'], factory); + define(['exports', 'react', 'react-dom', 'lodash.isequal', 'progressbar.js'], factory); } else if (typeof exports !== "undefined") { - factory(module, require('react'), require('react-dom'), require('lodash.isequal'), require('progressbar.js')); + factory(exports, require('react'), require('react-dom'), require('lodash.isequal'), require('progressbar.js')); } else { var mod = { exports: {} }; - factory(mod, global.react, global.reactDom, global.lodash, global.progressbar); + factory(mod.exports, global.react, global.reactDom, global.lodash, global.progressbar); global.main = mod.exports; } -})(this, function (module, React, ReactDom, isEqual, ProgressBar) { +})(this, function (exports, React, ReactDom, isEqual, ProgressBar) { 'use strict'; + Object.defineProperty(exports, "__esModule", { + value: true + }); + var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; @@ -27,122 +31,221 @@ return target; }; - var Shape = React.createClass({ - displayName: 'Shape', - - getDefaultProps: function getDefaultProps() { - return { - ShapeClass: null, - options: {}, - progress: 0, - text: null, - initialAnimate: false, - containerStyle: {}, - containerClassName: '.progressbar-container' - }; - }, - - getInitialState: function getInitialState() { - return { - shape: null - }; - }, - - render: function render() { - var style = this.props.containerStyle; - var className = this.props.containerClassName; - - return React.createElement('div', { className: className, style: style, ref: 'progressBar' }); - }, - - componentWillReceiveProps: function componentWillReceiveProps(nextProps) { - if (!isEqual(this.props.options, nextProps.options)) { - this._destroy(); - this._create(nextProps, this.props); - return; + function _classCallCheck(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } + } + + 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); } + } - this._animateProgress(nextProps.progress); - this._setText(nextProps.text); - }, + return function (Constructor, protoProps, staticProps) { + if (protoProps) defineProperties(Constructor.prototype, protoProps); + if (staticProps) defineProperties(Constructor, staticProps); + return Constructor; + }; + }(); + + function _possibleConstructorReturn(self, call) { + if (!self) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } - componentDidMount: function componentDidMount() { - this._create(this.props); - }, + return call && (typeof call === "object" || typeof call === "function") ? call : self; + } - componentWillUnmount: function componentWillUnmount() { - this._destroy(); - }, + 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); + } - _create: function _create(props, oldProps) { - if (this.state.shape !== null) { - throw new Error('Progressbar is already created'); + 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; + } - // setState function is not used to prevent a new render cycle - // This handling happens outside of React component's lifecycle - var container = ReactDom.findDOMNode(this.refs.progressBar); - this.state.shape = new props.ShapeClass(container, props.options); + var Shape = exports.Shape = function (_React$Component) { + _inherits(Shape, _React$Component); - if (props.initialAnimate) { - if (oldProps) { - this._setProgress(oldProps.progress); - } + function Shape() { + _classCallCheck(this, Shape); + + return _possibleConstructorReturn(this, (Shape.__proto__ || Object.getPrototypeOf(Shape)).apply(this, arguments)); + } - this._animateProgress(props.progress); - } else { - this._setProgress(props.progress); + _createClass(Shape, [{ + key: 'getDefaultProps', + value: function getDefaultProps() { + return { + ShapeClass: null, + options: {}, + progress: 0, + text: null, + initialAnimate: false, + containerStyle: {}, + containerClassName: '.progressbar-container' + }; + } + }, { + key: 'getInitialState', + value: function getInitialState() { + return { + shape: null + }; } + }, { + key: 'render', + value: function render() { + var style = this.props.containerStyle; + var className = this.props.containerClassName; - this._setText(props.text); - }, + return React.createElement('div', { className: className, style: style, ref: 'progressBar' }); + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + if (!isEqual(this.props.options, nextProps.options)) { + this._destroy(); + this._create(nextProps, this.props); + return; + } - _destroy: function _destroy() { - if (this.state.shape) { - this.state.shape.destroy(); - this.state.shape = null; + this._animateProgress(nextProps.progress); + this._setText(nextProps.text); + } + }, { + key: 'componentDidMount', + value: function componentDidMount() { + this._create(this.props); } - }, + }, { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + this._destroy(); + } + }, { + key: '_create', + value: function _create(props, oldProps) { + if (this.state.shape !== null) { + throw new Error('Progressbar is already created'); + } - _animateProgress: function _animateProgress(progress) { - this.state.shape.animate(progress); - }, + // setState function is not used to prevent a new render cycle + // This handling happens outside of React component's lifecycle + var container = ReactDom.findDOMNode(this.refs.progressBar); + this.state.shape = new props.ShapeClass(container, props.options); - _setProgress: function _setProgress(progress) { - this.state.shape.set(progress); - }, + if (props.initialAnimate) { + if (oldProps) { + this._setProgress(oldProps.progress); + } - _setText: function _setText(text) { - if (text) { - this.state.shape.setText(text); + this._animateProgress(props.progress); + } else { + this._setProgress(props.progress); + } + + this._setText(props.text); } - } - }); + }, { + key: '_destroy', + value: function _destroy() { + if (this.state.shape) { + this.state.shape.destroy(); + this.state.shape = null; + } + } + }, { + key: '_animateProgress', + value: function _animateProgress(progress) { + this.state.shape.animate(progress); + } + }, { + key: '_setProgress', + value: function _setProgress(progress) { + this.state.shape.set(progress); + } + }, { + key: '_setText', + value: function _setText(text) { + if (text) { + this.state.shape.setText(text); + } + } + }]); - var Line = React.createClass({ - displayName: 'Line', - render: function render() { - return React.createElement(Shape, _extends({}, this.props, { ShapeClass: ProgressBar.Line })); + return Shape; + }(React.Component); + + var Line = exports.Line = function (_Shape) { + _inherits(Line, _Shape); + + function Line() { + _classCallCheck(this, Line); + + return _possibleConstructorReturn(this, (Line.__proto__ || Object.getPrototypeOf(Line)).apply(this, arguments)); } - }); - var Circle = React.createClass({ - displayName: 'Circle', - render: function render() { - return React.createElement(Shape, _extends({}, this.props, { ShapeClass: ProgressBar.Circle })); + _createClass(Line, [{ + key: 'render', + value: function render() { + return React.createElement(Shape, _extends({}, this.props, { ShapeClass: ProgressBar.Line })); + } + }]); + + return Line; + }(Shape); + + var Circle = exports.Circle = function (_Shape2) { + _inherits(Circle, _Shape2); + + function Circle() { + _classCallCheck(this, Circle); + + return _possibleConstructorReturn(this, (Circle.__proto__ || Object.getPrototypeOf(Circle)).apply(this, arguments)); } - }); - var SemiCircle = React.createClass({ - displayName: 'SemiCircle', - render: function render() { - return React.createElement(Shape, _extends({}, this.props, { ShapeClass: ProgressBar.SemiCircle })); + _createClass(Circle, [{ + key: 'render', + value: function render() { + return React.createElement(Shape, _extends({}, this.props, { ShapeClass: ProgressBar.Circle })); + } + }]); + + return Circle; + }(Shape); + + var SemiCircle = exports.SemiCircle = function (_Shape3) { + _inherits(SemiCircle, _Shape3); + + function SemiCircle() { + _classCallCheck(this, SemiCircle); + + return _possibleConstructorReturn(this, (SemiCircle.__proto__ || Object.getPrototypeOf(SemiCircle)).apply(this, arguments)); } - }); - module.exports = { - Line: Line, - Circle: Circle, - SemiCircle: SemiCircle - }; + _createClass(SemiCircle, [{ + key: 'render', + value: function render() { + return React.createElement(Shape, _extends({}, this.props, { ShapeClass: ProgressBar.SemiCircle })); + } + }]); + + return SemiCircle; + }(Shape); }); diff --git a/local-dev/main.js b/local-dev/main.js index 2e80c15..21ec8b8 100644 --- a/local-dev/main.js +++ b/local-dev/main.js @@ -3,39 +3,41 @@ var ReactDom = require('react-dom'); var ProgressBar = require('../src/main.js'); var Circle = ProgressBar.Circle; -var App = React.createClass({ - getInitialState: function() { - return { +class App extends React.Component { + constructor(props) { + super(props); + + this.state = { progress: 0.1, options: {} }; - }, + } - render: function() { + render() { + console.log("render"); return ; - }, - - componentDidMount: function() { - var self = this; - setTimeout(function() { - console.log('setstate') - self.setState({ - progress: 1 - }); - }, 1000); + } - setTimeout(function() { - console.log('setstate') - self.setState({ - initialAnimate: true, - progress: 1 - }); - }, 500); + componentDidMount() { + // var self = this; + // setTimeout(function() { + // console.log('setstate') + // self.setState({ + // progress: 1 + // }); + // }, 1000); + // setTimeout(function() { + // console.log('setstate') + // self.setState({ + // initialAnimate: true, + // progress: 1 + // }); + // }, 500); } -}); +} ReactDom.render( , - document.querySelector('body') + document.querySelector('#progress') ); diff --git a/package.json b/package.json index c8d30a0..50a55eb 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "devDependencies": { "babel": "^6.5.2", "babel-cli": "^6.7.7", - "babel-eslint": "^6.0.3", + "babel-eslint": "^7.2.3", "babel-jscs": "^3.0.0-beta1", "babel-plugin-transform-es2015-modules-umd": "^6.6.5", "babel-preset-es2015": "^6.6.0", @@ -45,16 +45,16 @@ "babelify": "^7.2.0", "bluebird": "^3.3.5", "commander": "^2.8.1", - "concurrently": "^2.0.0", - "eslint": "^2.8.0", - "eslint-plugin-react": "^5.0.1", - "http-server": "^0.9.0", + "concurrently": "^3.4.0", + "eslint": "^3.19.0", + "eslint-plugin-react": "^7.0.1", + "http-server": "^0.10.0", "jscs": "^3.0.3", "lodash": "^4.11.1", "mustache": "^2.1.3", "reactify": "^1.1.1", "semver": "^5.0.1", - "shelljs": "^0.6.0", + "shelljs": "^0.7.7", "string": "^3.3.1", "watchify": "^3.4.0" }, @@ -65,11 +65,11 @@ }, "scripts": { "start": "concurrent 'npm run serve' 'npm run watch-js' 'open http://localhost:8080'", - "watch-js": "watchify local-dev/main.js -t reactify -o local-dev/bundle.js --debug --verbose", + "watch-js": "watchify local-dev/main.js -o local-dev/bundle.js --debug --verbose", "build": "babel src/main.js -o ./dist/react-progressbar.js", "serve": "http-server ./local-dev -c 0", "lint": "./tools/lint.sh", "jscs": "jscs ./src ./test", "eslint": "eslint --ext .js ./src ./test" } -} \ No newline at end of file +} diff --git a/src/main.js b/src/main.js index 250404e..6803c8e 100644 --- a/src/main.js +++ b/src/main.js @@ -3,8 +3,8 @@ var ReactDom = require('react-dom'); var isEqual = require('lodash.isequal'); var ProgressBar = require('progressbar.js'); -var Shape = React.createClass({ - getDefaultProps: function getDefaultProps() { +class Shape extends React.Component { + static get defaultProps() { return { ShapeClass: null, options: {}, @@ -14,22 +14,24 @@ var Shape = React.createClass({ containerStyle: {}, containerClassName: '.progressbar-container' }; - }, + } - getInitialState: function getInitialState() { - return { + constructor(props) { + super(props); + + this.state = { shape: null }; - }, + } - render: function render() { + render() { var style = this.props.containerStyle; var className = this.props.containerClassName; return
; - }, + } - componentWillReceiveProps: function componentWillReceiveProps(nextProps) { + componentWillReceiveProps(nextProps) { if (!isEqual(this.props.options, nextProps.options)) { this._destroy(); this._create(nextProps, this.props); @@ -38,17 +40,17 @@ var Shape = React.createClass({ this._animateProgress(nextProps.progress); this._setText(nextProps.text); - }, + } - componentDidMount: function componentDidMount() { + componentDidMount() { this._create(this.props); - }, + } - componentWillUnmount: function componentWillUnmount() { + componentWillUnmount() { this._destroy() - }, + } - _create: function _create(props, oldProps) { + _create(props, oldProps) { if (this.state.shape !== null) { throw new Error('Progressbar is already created'); } @@ -72,50 +74,50 @@ var Shape = React.createClass({ } this._setText(props.text); - }, + } - _destroy: function _destroy() { + _destroy() { if (this.state.shape) { this.state.shape.destroy(); this.state.shape = null; } - }, + } - _animateProgress: function _animateProgress(progress) { + _animateProgress(progress) { this.state.shape.animate(progress); - }, + } - _setProgress: function _setProgress(progress) { + _setProgress(progress) { this.state.shape.set(progress); - }, + } - _setText: function _setText(text) { + _setText(text) { if (text) { this.state.shape.setText(text); } } -}); +} -var Line = React.createClass({ +class Line extends React.Component { render() { return ; } -}); +} -var Circle = React.createClass({ +class Circle extends React.Component { render() { return ; } -}); +} -var SemiCircle = React.createClass({ +class SemiCircle extends React.Component { render() { return ; } -}); +} module.exports = { Line: Line, Circle: Circle, SemiCircle: SemiCircle -}; +} From 2ac7c51abf79ffb42fb39e66df0c4ac8cde7cc4a Mon Sep 17 00:00:00 2001 From: Nathan Flurry Date: Thu, 18 May 2017 21:18:46 -0700 Subject: [PATCH 02/12] Added type file --- package.json | 3 +- typings/react-progressbar.js.d.ts | 60 +++++++++++++++++++++++++++++++ 2 files changed, 62 insertions(+), 1 deletion(-) create mode 100644 typings/react-progressbar.js.d.ts diff --git a/package.json b/package.json index 50a55eb..2ccd219 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,9 @@ { "name": "react-progressbar.js", - "version": "0.2.0-dev", + "version": "0.2.1-dev", "description": "React wrapper for progressbar.js", "main": "dist/react-progressbar.js", + "types": "typings/react-progressbar.js.d.ts", "repository": { "type": "git", "url": "git+https://github.com/kimmobrunfeldt/react-progressbar.js.git" diff --git a/typings/react-progressbar.js.d.ts b/typings/react-progressbar.js.d.ts new file mode 100644 index 0000000..3470fae --- /dev/null +++ b/typings/react-progressbar.js.d.ts @@ -0,0 +1,60 @@ +declare module "react-progressbar.js" { + import React = require("react"); + + export interface ShapeOptions { + color?: string, + strokeWidth?: number, + trailColor?: string, + trailWidth?: number, + svgStyle?: { + display?: string, + width?: string + }, + text?: { + value?: string, + className?: string, + style?: { + color?: string, + position?: string, + left?: string, + top?: string, + padding?: number, + margin?: number, + transform?: { + prefix?: boolean, + value?: string + } + }, + autoStyleContainer?: boolean, + alignToBottom?: boolean + }, + fill?: string, + duration?: number, + easing?: string, + from?: { color?: string }, + to?: { color?: string }, + step?: (state, circle, attachment) => void, + warnings?: boolean + } + + export interface ShapeProps { + // ShapeClass: any; + options?: ShapeOptions; + progress?: number; + text?: string; + initialAnimate?: boolean; + containerStyle?: any; + containerClassName?: string; + } + export interface ShapeState { + shape: any; + } + + export class Shape extends React.Component { } + + export class Line extends Shape { } + + export class Circle extends Shape { } + + export class SemiCircle extends Shape { } +} From 67d4ca4e7fc714ca13813d3e08d1599d355cbb2b Mon Sep 17 00:00:00 2001 From: Nathan Flurry Date: Thu, 18 May 2017 21:31:50 -0700 Subject: [PATCH 03/12] Changed main file --- dist/react-progressbar.js | 353 ++++++++++++++++---------------------- package.json | 2 +- 2 files changed, 148 insertions(+), 207 deletions(-) diff --git a/dist/react-progressbar.js b/dist/react-progressbar.js index 465cd56..c2752cd 100644 --- a/dist/react-progressbar.js +++ b/dist/react-progressbar.js @@ -1,251 +1,192 @@ -(function (global, factory) { - if (typeof define === "function" && define.amd) { - define(['exports', 'react', 'react-dom', 'lodash.isequal', 'progressbar.js'], factory); - } else if (typeof exports !== "undefined") { - factory(exports, require('react'), require('react-dom'), require('lodash.isequal'), require('progressbar.js')); - } else { - var mod = { - exports: {} - }; - factory(mod.exports, global.react, global.reactDom, global.lodash, global.progressbar); - global.main = mod.exports; - } -})(this, function (exports, React, ReactDom, isEqual, ProgressBar) { - 'use strict'; +'use strict'; - Object.defineProperty(exports, "__esModule", { - value: true - }); +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; - var _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; +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; }; }(); - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - return target; - }; +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 _classCallCheck(instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); - } - } +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; } - 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); - } - } +var React = require('react'); +var ReactDom = require('react-dom'); +var isEqual = require('lodash.isequal'); +var ProgressBar = require('progressbar.js'); - return function (Constructor, protoProps, staticProps) { - if (protoProps) defineProperties(Constructor.prototype, protoProps); - if (staticProps) defineProperties(Constructor, staticProps); - return Constructor; - }; - }(); +var Shape = function (_React$Component) { + _inherits(Shape, _React$Component); - function _possibleConstructorReturn(self, call) { - if (!self) { - throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + _createClass(Shape, null, [{ + key: 'defaultProps', + get: function get() { + return { + ShapeClass: null, + options: {}, + progress: 0, + text: null, + initialAnimate: false, + containerStyle: {}, + containerClassName: '.progressbar-container' + }; } + }]); - return call && (typeof call === "object" || typeof call === "function") ? call : self; - } + function Shape(props) { + _classCallCheck(this, Shape); - 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); - } + var _this = _possibleConstructorReturn(this, (Shape.__proto__ || Object.getPrototypeOf(Shape)).call(this, props)); - 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; + _this.state = { + shape: null + }; + return _this; } - var Shape = exports.Shape = function (_React$Component) { - _inherits(Shape, _React$Component); - - function Shape() { - _classCallCheck(this, Shape); + _createClass(Shape, [{ + key: 'render', + value: function render() { + var style = this.props.containerStyle; + var className = this.props.containerClassName; - return _possibleConstructorReturn(this, (Shape.__proto__ || Object.getPrototypeOf(Shape)).apply(this, arguments)); + return React.createElement('div', { className: className, style: style, ref: 'progressBar' }); } - - _createClass(Shape, [{ - key: 'getDefaultProps', - value: function getDefaultProps() { - return { - ShapeClass: null, - options: {}, - progress: 0, - text: null, - initialAnimate: false, - containerStyle: {}, - containerClassName: '.progressbar-container' - }; - } - }, { - key: 'getInitialState', - value: function getInitialState() { - return { - shape: null - }; - } - }, { - key: 'render', - value: function render() { - var style = this.props.containerStyle; - var className = this.props.containerClassName; - - return React.createElement('div', { className: className, style: style, ref: 'progressBar' }); - } - }, { - key: 'componentWillReceiveProps', - value: function componentWillReceiveProps(nextProps) { - if (!isEqual(this.props.options, nextProps.options)) { - this._destroy(); - this._create(nextProps, this.props); - return; - } - - this._animateProgress(nextProps.progress); - this._setText(nextProps.text); - } - }, { - key: 'componentDidMount', - value: function componentDidMount() { - this._create(this.props); - } - }, { - key: 'componentWillUnmount', - value: function componentWillUnmount() { + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + if (!isEqual(this.props.options, nextProps.options)) { this._destroy(); + this._create(nextProps, this.props); + return; } - }, { - key: '_create', - value: function _create(props, oldProps) { - if (this.state.shape !== null) { - throw new Error('Progressbar is already created'); - } - // setState function is not used to prevent a new render cycle - // This handling happens outside of React component's lifecycle - var container = ReactDom.findDOMNode(this.refs.progressBar); - this.state.shape = new props.ShapeClass(container, props.options); + this._animateProgress(nextProps.progress); + this._setText(nextProps.text); + } + }, { + key: 'componentDidMount', + value: function componentDidMount() { + this._create(this.props); + } + }, { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + this._destroy(); + } + }, { + key: '_create', + value: function _create(props, oldProps) { + if (this.state.shape !== null) { + throw new Error('Progressbar is already created'); + } - if (props.initialAnimate) { - if (oldProps) { - this._setProgress(oldProps.progress); - } + // setState function is not used to prevent a new render cycle + // This handling happens outside of React component's lifecycle + var container = ReactDom.findDOMNode(this.refs.progressBar); + this.state.shape = new props.ShapeClass(container, props.options); - this._animateProgress(props.progress); - } else { - this._setProgress(props.progress); + if (props.initialAnimate) { + if (oldProps) { + this._setProgress(oldProps.progress); } - this._setText(props.text); + this._animateProgress(props.progress); + } else { + this._setProgress(props.progress); } - }, { - key: '_destroy', - value: function _destroy() { - if (this.state.shape) { - this.state.shape.destroy(); - this.state.shape = null; - } - } - }, { - key: '_animateProgress', - value: function _animateProgress(progress) { - this.state.shape.animate(progress); - } - }, { - key: '_setProgress', - value: function _setProgress(progress) { - this.state.shape.set(progress); + + this._setText(props.text); + } + }, { + key: '_destroy', + value: function _destroy() { + if (this.state.shape) { + this.state.shape.destroy(); + this.state.shape = null; } - }, { - key: '_setText', - value: function _setText(text) { - if (text) { - this.state.shape.setText(text); - } + } + }, { + key: '_animateProgress', + value: function _animateProgress(progress) { + this.state.shape.animate(progress); + } + }, { + key: '_setProgress', + value: function _setProgress(progress) { + this.state.shape.set(progress); + } + }, { + key: '_setText', + value: function _setText(text) { + if (text) { + this.state.shape.setText(text); } - }]); + } + }]); + + return Shape; +}(React.Component); - return Shape; - }(React.Component); +var Line = function (_React$Component2) { + _inherits(Line, _React$Component2); - var Line = exports.Line = function (_Shape) { - _inherits(Line, _Shape); + function Line() { + _classCallCheck(this, Line); - function Line() { - _classCallCheck(this, Line); + return _possibleConstructorReturn(this, (Line.__proto__ || Object.getPrototypeOf(Line)).apply(this, arguments)); + } - return _possibleConstructorReturn(this, (Line.__proto__ || Object.getPrototypeOf(Line)).apply(this, arguments)); + _createClass(Line, [{ + key: 'render', + value: function render() { + return React.createElement(Shape, _extends({}, this.props, { ShapeClass: ProgressBar.Line })); } + }]); - _createClass(Line, [{ - key: 'render', - value: function render() { - return React.createElement(Shape, _extends({}, this.props, { ShapeClass: ProgressBar.Line })); - } - }]); + return Line; +}(React.Component); - return Line; - }(Shape); +var Circle = function (_React$Component3) { + _inherits(Circle, _React$Component3); - var Circle = exports.Circle = function (_Shape2) { - _inherits(Circle, _Shape2); + function Circle() { + _classCallCheck(this, Circle); - function Circle() { - _classCallCheck(this, Circle); + return _possibleConstructorReturn(this, (Circle.__proto__ || Object.getPrototypeOf(Circle)).apply(this, arguments)); + } - return _possibleConstructorReturn(this, (Circle.__proto__ || Object.getPrototypeOf(Circle)).apply(this, arguments)); + _createClass(Circle, [{ + key: 'render', + value: function render() { + return React.createElement(Shape, _extends({}, this.props, { ShapeClass: ProgressBar.Circle })); } + }]); - _createClass(Circle, [{ - key: 'render', - value: function render() { - return React.createElement(Shape, _extends({}, this.props, { ShapeClass: ProgressBar.Circle })); - } - }]); + return Circle; +}(React.Component); - return Circle; - }(Shape); +var SemiCircle = function (_React$Component4) { + _inherits(SemiCircle, _React$Component4); - var SemiCircle = exports.SemiCircle = function (_Shape3) { - _inherits(SemiCircle, _Shape3); + function SemiCircle() { + _classCallCheck(this, SemiCircle); - function SemiCircle() { - _classCallCheck(this, SemiCircle); + return _possibleConstructorReturn(this, (SemiCircle.__proto__ || Object.getPrototypeOf(SemiCircle)).apply(this, arguments)); + } - return _possibleConstructorReturn(this, (SemiCircle.__proto__ || Object.getPrototypeOf(SemiCircle)).apply(this, arguments)); + _createClass(SemiCircle, [{ + key: 'render', + value: function render() { + return React.createElement(Shape, _extends({}, this.props, { ShapeClass: ProgressBar.SemiCircle })); } + }]); - _createClass(SemiCircle, [{ - key: 'render', - value: function render() { - return React.createElement(Shape, _extends({}, this.props, { ShapeClass: ProgressBar.SemiCircle })); - } - }]); + return SemiCircle; +}(React.Component); - return SemiCircle; - }(Shape); -}); +module.exports = { + Line: Line, + Circle: Circle, + SemiCircle: SemiCircle +}; diff --git a/package.json b/package.json index 2ccd219..f2a6801 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "react-progressbar.js", "version": "0.2.1-dev", "description": "React wrapper for progressbar.js", - "main": "dist/react-progressbar.js", + "main": "src/main.js", "types": "typings/react-progressbar.js.d.ts", "repository": { "type": "git", From 7e45e628b46272a59d8d24413cbc59112d76501c Mon Sep 17 00:00:00 2001 From: Nathan Flurry Date: Thu, 18 May 2017 21:34:38 -0700 Subject: [PATCH 04/12] Fixed build --- .babelrc | 3 +- dist/react-progressbar.js | 226 +++++++++++++------------------------- package.json | 2 +- 3 files changed, 80 insertions(+), 151 deletions(-) diff --git a/.babelrc b/.babelrc index b73b1e0..12d195e 100644 --- a/.babelrc +++ b/.babelrc @@ -1,4 +1,3 @@ { - "presets": ["es2015", "react"], - "plugins": ["transform-es2015-modules-umd"] + "presets": ["react"] } diff --git a/dist/react-progressbar.js b/dist/react-progressbar.js index c2752cd..1f32d7b 100644 --- a/dist/react-progressbar.js +++ b/dist/react-progressbar.js @@ -1,189 +1,119 @@ -'use strict'; - var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; -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; }; }(); - -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - -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; } - var React = require('react'); var ReactDom = require('react-dom'); var isEqual = require('lodash.isequal'); var ProgressBar = require('progressbar.js'); -var Shape = function (_React$Component) { - _inherits(Shape, _React$Component); - - _createClass(Shape, null, [{ - key: 'defaultProps', - get: function get() { - return { - ShapeClass: null, - options: {}, - progress: 0, - text: null, - initialAnimate: false, - containerStyle: {}, - containerClassName: '.progressbar-container' - }; - } - }]); - - function Shape(props) { - _classCallCheck(this, Shape); +class Shape extends React.Component { + static get defaultProps() { + return { + ShapeClass: null, + options: {}, + progress: 0, + text: null, + initialAnimate: false, + containerStyle: {}, + containerClassName: '.progressbar-container' + }; + } - var _this = _possibleConstructorReturn(this, (Shape.__proto__ || Object.getPrototypeOf(Shape)).call(this, props)); + constructor(props) { + super(props); - _this.state = { + this.state = { shape: null }; - return _this; } - _createClass(Shape, [{ - key: 'render', - value: function render() { - var style = this.props.containerStyle; - var className = this.props.containerClassName; + render() { + var style = this.props.containerStyle; + var className = this.props.containerClassName; - return React.createElement('div', { className: className, style: style, ref: 'progressBar' }); - } - }, { - key: 'componentWillReceiveProps', - value: function componentWillReceiveProps(nextProps) { - if (!isEqual(this.props.options, nextProps.options)) { - this._destroy(); - this._create(nextProps, this.props); - return; - } + return React.createElement('div', { className: className, style: style, ref: 'progressBar' }); + } - this._animateProgress(nextProps.progress); - this._setText(nextProps.text); - } - }, { - key: 'componentDidMount', - value: function componentDidMount() { - this._create(this.props); - } - }, { - key: 'componentWillUnmount', - value: function componentWillUnmount() { + componentWillReceiveProps(nextProps) { + if (!isEqual(this.props.options, nextProps.options)) { this._destroy(); + this._create(nextProps, this.props); + return; } - }, { - key: '_create', - value: function _create(props, oldProps) { - if (this.state.shape !== null) { - throw new Error('Progressbar is already created'); - } - // setState function is not used to prevent a new render cycle - // This handling happens outside of React component's lifecycle - var container = ReactDom.findDOMNode(this.refs.progressBar); - this.state.shape = new props.ShapeClass(container, props.options); + this._animateProgress(nextProps.progress); + this._setText(nextProps.text); + } - if (props.initialAnimate) { - if (oldProps) { - this._setProgress(oldProps.progress); - } + componentDidMount() { + this._create(this.props); + } - this._animateProgress(props.progress); - } else { - this._setProgress(props.progress); - } + componentWillUnmount() { + this._destroy(); + } - this._setText(props.text); + _create(props, oldProps) { + if (this.state.shape !== null) { + throw new Error('Progressbar is already created'); } - }, { - key: '_destroy', - value: function _destroy() { - if (this.state.shape) { - this.state.shape.destroy(); - this.state.shape = null; - } - } - }, { - key: '_animateProgress', - value: function _animateProgress(progress) { - this.state.shape.animate(progress); - } - }, { - key: '_setProgress', - value: function _setProgress(progress) { - this.state.shape.set(progress); - } - }, { - key: '_setText', - value: function _setText(text) { - if (text) { - this.state.shape.setText(text); - } - } - }]); - return Shape; -}(React.Component); + // setState function is not used to prevent a new render cycle + // This handling happens outside of React component's lifecycle + var container = ReactDom.findDOMNode(this.refs.progressBar); + this.state.shape = new props.ShapeClass(container, props.options); -var Line = function (_React$Component2) { - _inherits(Line, _React$Component2); + if (props.initialAnimate) { + if (oldProps) { + this._setProgress(oldProps.progress); + } - function Line() { - _classCallCheck(this, Line); + this._animateProgress(props.progress); + } else { + this._setProgress(props.progress); + } - return _possibleConstructorReturn(this, (Line.__proto__ || Object.getPrototypeOf(Line)).apply(this, arguments)); + this._setText(props.text); } - _createClass(Line, [{ - key: 'render', - value: function render() { - return React.createElement(Shape, _extends({}, this.props, { ShapeClass: ProgressBar.Line })); + _destroy() { + if (this.state.shape) { + this.state.shape.destroy(); + this.state.shape = null; } - }]); - - return Line; -}(React.Component); - -var Circle = function (_React$Component3) { - _inherits(Circle, _React$Component3); + } - function Circle() { - _classCallCheck(this, Circle); + _animateProgress(progress) { + this.state.shape.animate(progress); + } - return _possibleConstructorReturn(this, (Circle.__proto__ || Object.getPrototypeOf(Circle)).apply(this, arguments)); + _setProgress(progress) { + this.state.shape.set(progress); } - _createClass(Circle, [{ - key: 'render', - value: function render() { - return React.createElement(Shape, _extends({}, this.props, { ShapeClass: ProgressBar.Circle })); + _setText(text) { + if (text) { + this.state.shape.setText(text); } - }]); - - return Circle; -}(React.Component); - -var SemiCircle = function (_React$Component4) { - _inherits(SemiCircle, _React$Component4); - - function SemiCircle() { - _classCallCheck(this, SemiCircle); + } +} - return _possibleConstructorReturn(this, (SemiCircle.__proto__ || Object.getPrototypeOf(SemiCircle)).apply(this, arguments)); +class Line extends React.Component { + render() { + return React.createElement(Shape, _extends({}, this.props, { ShapeClass: ProgressBar.Line })); } +} - _createClass(SemiCircle, [{ - key: 'render', - value: function render() { - return React.createElement(Shape, _extends({}, this.props, { ShapeClass: ProgressBar.SemiCircle })); - } - }]); +class Circle extends React.Component { + render() { + return React.createElement(Shape, _extends({}, this.props, { ShapeClass: ProgressBar.Circle })); + } +} - return SemiCircle; -}(React.Component); +class SemiCircle extends React.Component { + render() { + return React.createElement(Shape, _extends({}, this.props, { ShapeClass: ProgressBar.SemiCircle })); + } +} module.exports = { Line: Line, diff --git a/package.json b/package.json index f2a6801..2ccd219 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "react-progressbar.js", "version": "0.2.1-dev", "description": "React wrapper for progressbar.js", - "main": "src/main.js", + "main": "dist/react-progressbar.js", "types": "typings/react-progressbar.js.d.ts", "repository": { "type": "git", From 247624c3de918e4f81cd7b691b746a5f9a4610ac Mon Sep 17 00:00:00 2001 From: Nathan Flurry Date: Fri, 19 May 2017 00:40:07 -0700 Subject: [PATCH 05/12] Made `animateProgress`, `setProgress`, and `setText` public Added `shape` property to all progress types --- dist/react-progressbar.js | 36 ++++++++++++++++++++++++------------ src/main.js | 36 ++++++++++++++++++++++++------------ 2 files changed, 48 insertions(+), 24 deletions(-) diff --git a/dist/react-progressbar.js b/dist/react-progressbar.js index 1f32d7b..d7b5700 100644 --- a/dist/react-progressbar.js +++ b/dist/react-progressbar.js @@ -40,8 +40,8 @@ class Shape extends React.Component { return; } - this._animateProgress(nextProps.progress); - this._setText(nextProps.text); + this.animateProgress(nextProps.progress); + this.setText(nextProps.text); } componentDidMount() { @@ -64,15 +64,15 @@ class Shape extends React.Component { if (props.initialAnimate) { if (oldProps) { - this._setProgress(oldProps.progress); + this.setProgress(oldProps.progress); } - this._animateProgress(props.progress); + this.animateProgress(props.progress); } else { - this._setProgress(props.progress); + this.setProgress(props.progress); } - this._setText(props.text); + this.setText(props.text); } _destroy() { @@ -82,15 +82,15 @@ class Shape extends React.Component { } } - _animateProgress(progress) { + animateProgress(progress) { this.state.shape.animate(progress); } - _setProgress(progress) { + setProgress(progress) { this.state.shape.set(progress); } - _setText(text) { + setText(text) { if (text) { this.state.shape.setText(text); } @@ -98,20 +98,32 @@ class Shape extends React.Component { } class Line extends React.Component { + get shape() { + return this.refs.shape; + } + render() { - return React.createElement(Shape, _extends({}, this.props, { ShapeClass: ProgressBar.Line })); + return React.createElement(Shape, _extends({}, this.props, { ref: 'shape', ShapeClass: ProgressBar.Line })); } } class Circle extends React.Component { + get shape() { + return this.refs.shape; + } + render() { - return React.createElement(Shape, _extends({}, this.props, { ShapeClass: ProgressBar.Circle })); + return React.createElement(Shape, _extends({}, this.props, { ref: 'shape', ShapeClass: ProgressBar.Circle })); } } class SemiCircle extends React.Component { + get shape() { + return this.refs.shape; + } + render() { - return React.createElement(Shape, _extends({}, this.props, { ShapeClass: ProgressBar.SemiCircle })); + return React.createElement(Shape, _extends({}, this.props, { ref: 'shape', ShapeClass: ProgressBar.SemiCircle })); } } diff --git a/src/main.js b/src/main.js index 6803c8e..0c404b7 100644 --- a/src/main.js +++ b/src/main.js @@ -38,8 +38,8 @@ class Shape extends React.Component { return; } - this._animateProgress(nextProps.progress); - this._setText(nextProps.text); + this.animateProgress(nextProps.progress); + this.setText(nextProps.text); } componentDidMount() { @@ -65,15 +65,15 @@ class Shape extends React.Component { if (props.initialAnimate) { if (oldProps) { - this._setProgress(oldProps.progress); + this.setProgress(oldProps.progress); } - this._animateProgress(props.progress); + this.animateProgress(props.progress); } else { - this._setProgress(props.progress); + this.setProgress(props.progress); } - this._setText(props.text); + this.setText(props.text); } _destroy() { @@ -83,15 +83,15 @@ class Shape extends React.Component { } } - _animateProgress(progress) { + animateProgress(progress) { this.state.shape.animate(progress); } - _setProgress(progress) { + setProgress(progress) { this.state.shape.set(progress); } - _setText(text) { + setText(text) { if (text) { this.state.shape.setText(text); } @@ -99,20 +99,32 @@ class Shape extends React.Component { } class Line extends React.Component { + get shape() { + return this.refs.shape; + } + render() { - return ; + return ; } } class Circle extends React.Component { + get shape() { + return this.refs.shape; + } + render() { - return ; + return ; } } class SemiCircle extends React.Component { + get shape() { + return this.refs.shape; + } + render() { - return ; + return ; } } From 9184beea61e091bc9edf7119f46bc5c4ea11fb56 Mon Sep 17 00:00:00 2001 From: Nathan Flurry Date: Fri, 19 May 2017 00:42:17 -0700 Subject: [PATCH 06/12] Moved `shape` to `_shape` Updated typings --- src/main.js | 6 +++--- typings/react-progressbar.js.d.ts | 18 ++++++++++++++---- 2 files changed, 17 insertions(+), 7 deletions(-) diff --git a/src/main.js b/src/main.js index 0c404b7..ea187c0 100644 --- a/src/main.js +++ b/src/main.js @@ -99,7 +99,7 @@ class Shape extends React.Component { } class Line extends React.Component { - get shape() { + get _shape() { return this.refs.shape; } @@ -109,7 +109,7 @@ class Line extends React.Component { } class Circle extends React.Component { - get shape() { + get _shape() { return this.refs.shape; } @@ -119,7 +119,7 @@ class Circle extends React.Component { } class SemiCircle extends React.Component { - get shape() { + get _shape() { return this.refs.shape; } diff --git a/typings/react-progressbar.js.d.ts b/typings/react-progressbar.js.d.ts index 3470fae..8917c99 100644 --- a/typings/react-progressbar.js.d.ts +++ b/typings/react-progressbar.js.d.ts @@ -50,11 +50,21 @@ declare module "react-progressbar.js" { shape: any; } - export class Shape extends React.Component { } + export class Shape extends React.Component { + animateProgress(progress: number); + setProgress(progress: number); + setText(text: string); + } - export class Line extends Shape { } + export class Line extends Shape { + public _shape: Shape; + } - export class Circle extends Shape { } + export class Circle extends Shape { + public _shape: Shape; + } - export class SemiCircle extends Shape { } + export class SemiCircle extends Shape { + public _shape: Shape; + } } From bebb950bba43eae23c6597734092dad75ad3bf3c Mon Sep 17 00:00:00 2001 From: Nathan Flurry Date: Fri, 19 May 2017 00:46:06 -0700 Subject: [PATCH 07/12] Made `_shape` reasonly in type definition --- typings/react-progressbar.js.d.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/typings/react-progressbar.js.d.ts b/typings/react-progressbar.js.d.ts index 8917c99..74889fa 100644 --- a/typings/react-progressbar.js.d.ts +++ b/typings/react-progressbar.js.d.ts @@ -57,14 +57,14 @@ declare module "react-progressbar.js" { } export class Line extends Shape { - public _shape: Shape; + public readonly _shape: Shape; } export class Circle extends Shape { - public _shape: Shape; + public readonly _shape: Shape; } export class SemiCircle extends Shape { - public _shape: Shape; + public readonly _shape: Shape; } } From 3c0b11fca6f1d86c99a2ff38c2b64c52a7a75084 Mon Sep 17 00:00:00 2001 From: Nathan Flurry Date: Fri, 19 May 2017 00:49:00 -0700 Subject: [PATCH 08/12] =?UTF-8?q?Forgot=20to=20build=20=F0=9F=98=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/react-progressbar.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/dist/react-progressbar.js b/dist/react-progressbar.js index d7b5700..133d263 100644 --- a/dist/react-progressbar.js +++ b/dist/react-progressbar.js @@ -98,7 +98,7 @@ class Shape extends React.Component { } class Line extends React.Component { - get shape() { + get _shape() { return this.refs.shape; } @@ -108,7 +108,7 @@ class Line extends React.Component { } class Circle extends React.Component { - get shape() { + get _shape() { return this.refs.shape; } @@ -118,7 +118,7 @@ class Circle extends React.Component { } class SemiCircle extends React.Component { - get shape() { + get _shape() { return this.refs.shape; } From f57555238b633a7e347805a57fb3b588e520ef4c Mon Sep 17 00:00:00 2001 From: Nathan Flurry Date: Fri, 23 Jun 2017 00:45:45 -0700 Subject: [PATCH 09/12] Exporting Shapes because I need to --- src/main.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/main.js b/src/main.js index ea187c0..90923c8 100644 --- a/src/main.js +++ b/src/main.js @@ -129,6 +129,7 @@ class SemiCircle extends React.Component { } module.exports = { + Shape: Shape, Line: Line, Circle: Circle, SemiCircle: SemiCircle From 432c00518ac64c00ba6dfe03d4ade5c50a64f76f Mon Sep 17 00:00:00 2001 From: Nathan Flurry Date: Fri, 23 Jun 2017 00:55:58 -0700 Subject: [PATCH 10/12] Built --- dist/react-progressbar.js | 1 + 1 file changed, 1 insertion(+) diff --git a/dist/react-progressbar.js b/dist/react-progressbar.js index 133d263..8103e1a 100644 --- a/dist/react-progressbar.js +++ b/dist/react-progressbar.js @@ -128,6 +128,7 @@ class SemiCircle extends React.Component { } module.exports = { + Shape: Shape, Line: Line, Circle: Circle, SemiCircle: SemiCircle From 5cdc7739ce38ef6be371a91d51c7df8cbcad2831 Mon Sep 17 00:00:00 2001 From: Nathan Flurry Date: Fri, 23 Jun 2017 01:10:01 -0700 Subject: [PATCH 11/12] Working on adding Path --- dist/react-progressbar.js | 23 +++++++++++++++++++---- src/main.js | 23 +++++++++++++++++++---- 2 files changed, 38 insertions(+), 8 deletions(-) diff --git a/dist/react-progressbar.js b/dist/react-progressbar.js index 8103e1a..ebe4a58 100644 --- a/dist/react-progressbar.js +++ b/dist/react-progressbar.js @@ -14,10 +14,15 @@ class Shape extends React.Component { text: null, initialAnimate: false, containerStyle: {}, - containerClassName: '.progressbar-container' + containerClassName: '.progressbar-container', + svgPath: null }; } + get _isPath() { + return this.props.ShapeClass instanceof ProgressBar.Path; + } + constructor(props) { super(props); @@ -60,7 +65,7 @@ class Shape extends React.Component { // setState function is not used to prevent a new render cycle // This handling happens outside of React component's lifecycle var container = ReactDom.findDOMNode(this.refs.progressBar); - this.state.shape = new props.ShapeClass(container, props.options); + this.state.shape = new props.ShapeClass(this._isPath ? this.props.svgPath : container, props.options); if (props.initialAnimate) { if (oldProps) { @@ -127,9 +132,19 @@ class SemiCircle extends React.Component { } } +class Path extends React.Component { + get _shape() { + return this.refs.shape; + } + + render() { + return React.createElement(Shape, _extends({}, this.props, { ref: 'shape', ShapeClass: ProgressBar.Path })); + } +} + module.exports = { - Shape: Shape, Line: Line, Circle: Circle, - SemiCircle: SemiCircle + SemiCircle: SemiCircle, + Path: Path }; diff --git a/src/main.js b/src/main.js index 90923c8..064c266 100644 --- a/src/main.js +++ b/src/main.js @@ -12,10 +12,15 @@ class Shape extends React.Component { text: null, initialAnimate: false, containerStyle: {}, - containerClassName: '.progressbar-container' + containerClassName: '.progressbar-container', + svgPath: null }; } + get _isPath() { + return this.props.ShapeClass instanceof ProgressBar.Path; + } + constructor(props) { super(props); @@ -59,7 +64,7 @@ class Shape extends React.Component { // This handling happens outside of React component's lifecycle var container = ReactDom.findDOMNode(this.refs.progressBar); this.state.shape = new props.ShapeClass( - container, + this._isPath ? this.props.svgPath : container, props.options ); @@ -128,9 +133,19 @@ class SemiCircle extends React.Component { } } +class Path extends React.Component { + get _shape() { + return this.refs.shape; + } + + render() { + return ; + } +} + module.exports = { - Shape: Shape, Line: Line, Circle: Circle, - SemiCircle: SemiCircle + SemiCircle: SemiCircle, + Path: Path } From 2f3d224e1363534fe73f97f54c32d354434cae21 Mon Sep 17 00:00:00 2001 From: Nathan Flurry Date: Fri, 23 Jun 2017 03:04:08 -0700 Subject: [PATCH 12/12] Now exports only `Shape`, `Line`, `Circle`, and `SemiCircle` --- dist/react-progressbar.js | 4 ++-- src/main.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/dist/react-progressbar.js b/dist/react-progressbar.js index ebe4a58..c00b5d8 100644 --- a/dist/react-progressbar.js +++ b/dist/react-progressbar.js @@ -143,8 +143,8 @@ class Path extends React.Component { } module.exports = { + Shape: Shape, Line: Line, Circle: Circle, - SemiCircle: SemiCircle, - Path: Path + SemiCircle: SemiCircle }; diff --git a/src/main.js b/src/main.js index 064c266..b4ab94b 100644 --- a/src/main.js +++ b/src/main.js @@ -144,8 +144,8 @@ class Path extends React.Component { } module.exports = { + Shape: Shape, Line: Line, Circle: Circle, - SemiCircle: SemiCircle, - Path: Path + SemiCircle: SemiCircle }