From b62a3e33a1841ab0af171a148622ffd3d6730120 Mon Sep 17 00:00:00 2001 From: maciekmp Date: Fri, 18 Aug 2017 11:53:53 +0200 Subject: [PATCH 1/2] Fix for deprecation warnings, use es6 syntax. --- package.json | 7 +- src/main.js | 182 +++++++++++++++++++++++++-------------------------- 2 files changed, 92 insertions(+), 97 deletions(-) diff --git a/package.json b/package.json index c8d30a0..dedd186 100644 --- a/package.json +++ b/package.json @@ -31,8 +31,9 @@ "dependencies": { "lodash.isequal": "^4.1.4", "progressbar.js": "^1.0.1", - "react": "^15.0.1", - "react-dom": "^15.0.1" + "prop-types": "^15.5.10", + "react": "^15.6.1", + "react-dom": "^15.6.1" }, "devDependencies": { "babel": "^6.5.2", @@ -72,4 +73,4 @@ "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..e44bc40 100644 --- a/src/main.js +++ b/src/main.js @@ -1,121 +1,115 @@ -var React = require('react'); -var ReactDom = require('react-dom'); -var isEqual = require('lodash.isequal'); -var ProgressBar = require('progressbar.js'); - -var Shape = React.createClass({ - 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
; - }, - - componentWillReceiveProps: function componentWillReceiveProps(nextProps) { +import React from 'react'; +import PropTypes from 'prop-types'; +import isEqual from 'lodash.isequal'; +import ProgressBar from 'progressbar.js'; + +export class Shape extends React.Component { + componentDidMount() { + this.shape = null; + this.create(this.props); + } + + componentWillReceiveProps(nextProps) { if (!isEqual(this.props.options, nextProps.options)) { - this._destroy(); - this._create(nextProps, this.props); - return; + this.destroy(); + this.create(nextProps, this.props); + return false; } - this._animateProgress(nextProps.progress); - this._setText(nextProps.text); - }, + this.animateProgress(nextProps.progress); + this.setText(nextProps.text); + return true; + } + + componentWillUnmount() { + this.destroy(); + } - componentDidMount: function componentDidMount() { - this._create(this.props); - }, + setProgress(progress) { + this.shape.set(progress); + } - componentWillUnmount: function componentWillUnmount() { - this._destroy() - }, + setText(text) { + if (text) { + this.shape.setText(text); + } + } - _create: function _create(props, oldProps) { - if (this.state.shape !== null) { + create(nextProps, oldProps) { + if (this.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.shape = new nextProps.ShapeClass( + this.progressBar, + nextProps.options, ); - if (props.initialAnimate) { + if (nextProps.initialAnimate) { if (oldProps) { - this._setProgress(oldProps.progress); + this.setProgress(oldProps.progress); } - this._animateProgress(props.progress); + this.animateProgress(nextProps.progress); } else { - this._setProgress(props.progress); - } - - this._setText(props.text); - }, - - _destroy: function _destroy() { - if (this.state.shape) { - this.state.shape.destroy(); - this.state.shape = null; + this.setProgress(nextProps.progress); } - }, - _animateProgress: function _animateProgress(progress) { - this.state.shape.animate(progress); - }, - - _setProgress: function _setProgress(progress) { - this.state.shape.set(progress); - }, - - _setText: function _setText(text) { - if (text) { - this.state.shape.setText(text); - } + this.setText(nextProps.text); } -}); -var Line = React.createClass({ - render() { - return ; + animateProgress(progress) { + this.shape.animate(progress); } -}); -var Circle = React.createClass({ - render() { - return ; + destroy() { + if (this.shape) { + this.shape.destroy(); + this.shape = null; + } } -}); -var SemiCircle = React.createClass({ render() { - return ; + const style = this.props.containerStyle; + const className = this.props.containerClassName; + return ( +
{ + this.progressBar = node; + }} + /> + ); } -}); +} + +Shape.defaultProps = { + ShapeClass: null, + options: {}, + progress: 0, + text: null, + initialAnimate: false, + containerStyle: {}, + containerClassName: '.progressbar-container', +}; -module.exports = { - Line: Line, - Circle: Circle, - SemiCircle: SemiCircle +Shape.propTypes = { + ShapeClass: PropTypes.oneOf([ProgressBar.Circle]), + options: PropTypes.objectOf(PropTypes.oneOfType([ + PropTypes.number, + PropTypes.string, + PropTypes.object, + ])), + progress: PropTypes.number, + text: PropTypes.string, + initialAnimate: PropTypes.bool, + containerStyle: PropTypes.objectOf(PropTypes.string), + containerClassName: PropTypes.string, }; + +export const Line = props => ; + +export const Circle = props => ; + +export const SemiCircle = props => ; From cd16ce3105a1832611ec0d6858513b153daa46fe Mon Sep 17 00:00:00 2001 From: Anton Novosyolov Date: Thu, 28 Sep 2017 09:07:46 +0300 Subject: [PATCH 2/2] Build --- dist/react-progressbar.js | 281 ++++++++++++++++++++++++-------------- 1 file changed, 180 insertions(+), 101 deletions(-) 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 })); }; });