diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..b73b1e0 --- /dev/null +++ b/.babelrc @@ -0,0 +1,4 @@ +{ + "presets": ["es2015", "react"], + "plugins": ["transform-es2015-modules-umd"] +} diff --git a/dist/react-progressbar.js b/dist/react-progressbar.js new file mode 100644 index 0000000..262572c --- /dev/null +++ b/dist/react-progressbar.js @@ -0,0 +1,148 @@ +(function (global, factory) { + if (typeof define === "function" && define.amd) { + define(['module', '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')); + } else { + var mod = { + exports: {} + }; + factory(mod, global.react, global.reactDom, global.lodash, global.progressbar); + global.main = mod.exports; + } +})(this, function (module, React, ReactDom, isEqual, ProgressBar) { + '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 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; + } + + this._animateProgress(nextProps.progress); + this._setText(nextProps.text); + }, + + componentDidMount: function componentDidMount() { + this._create(this.props); + }, + + componentWillUnmount: function componentWillUnmount() { + this._destroy(); + }, + + _create: 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); + + if (props.initialAnimate) { + if (oldProps) { + this._setProgress(oldProps.progress); + } + + this._animateProgress(props.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; + } + }, + + _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); + } + } + }); + + var Line = React.createClass({ + displayName: 'Line', + render: function render() { + return React.createElement(Shape, _extends({}, this.props, { ShapeClass: ProgressBar.Line })); + } + }); + + var Circle = React.createClass({ + displayName: 'Circle', + render: function render() { + return React.createElement(Shape, _extends({}, this.props, { ShapeClass: ProgressBar.Circle })); + } + }); + + var SemiCircle = React.createClass({ + displayName: 'SemiCircle', + render: function render() { + return React.createElement(Shape, _extends({}, this.props, { ShapeClass: ProgressBar.SemiCircle })); + } + }); + + module.exports = { + Line: Line, + Circle: Circle, + SemiCircle: SemiCircle + }; +}); diff --git a/local-dev/main.js b/local-dev/main.js index 013363b..2e80c15 100644 --- a/local-dev/main.js +++ b/local-dev/main.js @@ -1,4 +1,5 @@ var React = require('react'); +var ReactDom = require('react-dom'); var ProgressBar = require('../src/main.js'); var Circle = ProgressBar.Circle; @@ -34,7 +35,7 @@ var App = React.createClass({ } }); -React.render( +ReactDom.render( , document.querySelector('body') ); diff --git a/package.json b/package.json index d2df48d..04721d2 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "react-progressbar.js", "version": "0.1.2-dev", "description": "React wrapper for progressbar.js", - "main": "src/main.js", + "main": "dist/react-progressbar.js", "repository": { "type": "git", "url": "git+https://github.com/kimmobrunfeldt/react-progressbar.js.git" @@ -29,28 +29,34 @@ }, "homepage": "https://github.com/kimmobrunfeldt/react-progressbar.js#readme", "dependencies": { - "lodash.isequal": "^3.0.4", - "progressbar.js": "^0.9.0", - "react": "^0.13.3" + "lodash.isequal": "^4.1.4", + "progressbar.js": "^1.0.1", + "react": "^15.0.1", + "react-dom": "^15.0.1" }, "devDependencies": { - "babel": "^5.8.23", - "babel-eslint": "^4.1.1", - "babel-jscs": "^2.0.4", - "bluebird": "^2.9.34", + "babel": "^6.5.2", + "babel-cli": "^6.7.7", + "babel-eslint": "^6.0.3", + "babel-jscs": "^3.0.0-beta1", + "babel-plugin-transform-es2015-modules-umd": "^6.6.5", + "babel-preset-es2015": "^6.6.0", + "babel-preset-react": "^6.5.0", + "babelify": "^7.2.0", + "bluebird": "^3.3.5", "commander": "^2.8.1", - "concurrently": "^0.1.1", - "eslint": "^1.3.1", - "eslint-plugin-react": "^3.3.1", - "http-server": "^0.8.0", - "jscs": "^2.1.1", - "lodash": "^3.10.1", + "concurrently": "^2.0.0", + "eslint": "^2.8.0", + "eslint-plugin-react": "^5.0.1", + "http-server": "^0.9.0", + "jscs": "^3.0.3", + "lodash": "^4.11.1", "mustache": "^2.1.3", + "reactify": "^1.1.1", "semver": "^5.0.1", - "shelljs": "^0.5.3", + "shelljs": "^0.6.0", "string": "^3.3.1", - "watchify": "^3.4.0", - "reactify": "^1.1.1" + "watchify": "^3.4.0" }, "browserify": { "transform": [ @@ -60,9 +66,10 @@ "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", + "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 dc4ceb7..250404e 100644 --- a/src/main.js +++ b/src/main.js @@ -1,4 +1,5 @@ var React = require('react'); +var ReactDom = require('react-dom'); var isEqual = require('lodash.isequal'); var ProgressBar = require('progressbar.js'); @@ -54,7 +55,7 @@ var Shape = React.createClass({ // setState function is not used to prevent a new render cycle // This handling happens outside of React component's lifecycle - var container = React.findDOMNode(this.refs.progressBar); + var container = ReactDom.findDOMNode(this.refs.progressBar); this.state.shape = new props.ShapeClass( container, props.options