diff --git a/dist/react-progressbar.js b/dist/react-progressbar.js index 262572c..fc5029c 100644 --- a/dist/react-progressbar.js +++ b/dist/react-progressbar.js @@ -1,18 +1,37 @@ (function (global, factory) { if (typeof define === "function" && define.amd) { - define(['module', 'react', 'react-dom', 'lodash.isequal', 'progressbar.js'], factory); + define(['exports', 'react', 'prop-types', '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('prop-types'), 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.propTypes, global.lodash, global.progressbar); global.main = mod.exports; } -})(this, function (module, React, ReactDom, isEqual, ProgressBar) { +})(this, function (exports, _react, _propTypes, _lodash, _progressbar) { 'use strict'; + Object.defineProperty(exports, "__esModule", { + value: true + }); + exports.SemiCircle = exports.Circle = exports.Line = exports.Shape = undefined; + + var _react2 = _interopRequireDefault(_react); + + var _propTypes2 = _interopRequireDefault(_propTypes); + + var _lodash2 = _interopRequireDefault(_lodash); + + var _progressbar2 = _interopRequireDefault(_progressbar); + + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { + default: obj + }; + } + var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; @@ -27,122 +46,182 @@ 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); } + } + + return function (Constructor, protoProps, staticProps) { + if (protoProps) defineProperties(Constructor.prototype, protoProps); + if (staticProps) defineProperties(Constructor, staticProps); + return Constructor; + }; + }(); - this._animateProgress(nextProps.progress); - this._setText(nextProps.text); - }, + 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); - this._animateProgress(props.progress); - } else { - this._setProgress(props.progress); - } + return _possibleConstructorReturn(this, (Shape.__proto__ || Object.getPrototypeOf(Shape)).apply(this, arguments)); + } - this._setText(props.text); - }, + _createClass(Shape, [{ + key: 'componentDidMount', + value: function componentDidMount() { + this.shape = null; + this.create(this.props); + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + if (!(0, _lodash2.default)(this.props.options, nextProps.options)) { + this.destroy(); + this.create(nextProps, this.props); + return false; + } - _destroy: function _destroy() { - if (this.state.shape) { - this.state.shape.destroy(); - this.state.shape = null; + this.animateProgress(nextProps.progress); + this.setText(nextProps.text); + return true; } - }, + }, { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + this.destroy(); + } + }, { + key: 'setProgress', + value: function setProgress(progress) { + this.shape.set(progress); + } + }, { + key: 'setText', + value: function setText(text) { + if (text) { + this.shape.setText(text); + } + } + }, { + key: 'create', + value: function create(nextProps, oldProps) { + if (this.shape !== null) { + throw new Error('Progressbar is already created'); + } + + this.shape = new nextProps.ShapeClass(this.progressBar, nextProps.options); - _animateProgress: function _animateProgress(progress) { - this.state.shape.animate(progress); - }, + if (nextProps.initialAnimate) { + if (oldProps) { + this.setProgress(oldProps.progress); + } - _setProgress: function _setProgress(progress) { - this.state.shape.set(progress); - }, + this.animateProgress(nextProps.progress); + } else { + this.setProgress(nextProps.progress); + } - _setText: function _setText(text) { - if (text) { - this.state.shape.setText(text); + this.setText(nextProps.text); } - } - }); + }, { + key: 'animateProgress', + value: function animateProgress(progress) { + this.shape.animate(progress); + } + }, { + key: 'destroy', + value: function destroy() { + if (this.shape) { + this.shape.destroy(); + this.shape = null; + } + } + }, { + key: 'render', + value: function render() { + var _this2 = this; + + var style = this.props.containerStyle; + var className = this.props.containerClassName; + return _react2.default.createElement('div', { + className: className, + style: style, + ref: function ref(node) { + _this2.progressBar = node; + } + }); + } + }]); + + return Shape; + }(_react2.default.Component); + + Shape.defaultProps = { + ShapeClass: null, + options: {}, + progress: 0, + text: null, + initialAnimate: false, + containerStyle: {}, + containerClassName: '.progressbar-container' + }; - var Line = React.createClass({ - displayName: 'Line', - render: function render() { - return React.createElement(Shape, _extends({}, this.props, { ShapeClass: ProgressBar.Line })); - } - }); + Shape.propTypes = { + ShapeClass: _propTypes2.default.oneOf([_progressbar2.default.Circle]), + options: _propTypes2.default.objectOf(_propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string, _propTypes2.default.object])), + progress: _propTypes2.default.number, + text: _propTypes2.default.string, + initialAnimate: _propTypes2.default.bool, + containerStyle: _propTypes2.default.objectOf(_propTypes2.default.string), + containerClassName: _propTypes2.default.string + }; - var Circle = React.createClass({ - displayName: 'Circle', - render: function render() { - return React.createElement(Shape, _extends({}, this.props, { ShapeClass: ProgressBar.Circle })); - } - }); + var Line = exports.Line = function Line(props) { + return _react2.default.createElement(Shape, _extends({}, props, { ShapeClass: _progressbar2.default.Line })); + }; - var SemiCircle = React.createClass({ - displayName: 'SemiCircle', - render: function render() { - return React.createElement(Shape, _extends({}, this.props, { ShapeClass: ProgressBar.SemiCircle })); - } - }); + var Circle = exports.Circle = function Circle(props) { + return _react2.default.createElement(Shape, _extends({}, props, { ShapeClass: _progressbar2.default.Circle })); + }; - module.exports = { - Line: Line, - Circle: Circle, - SemiCircle: SemiCircle + var SemiCircle = exports.SemiCircle = function SemiCircle(props) { + return _react2.default.createElement(Shape, _extends({}, props, { ShapeClass: _progressbar2.default.SemiCircle })); }; });