Skip to content
This repository has been archived by the owner on Aug 16, 2021. It is now read-only.

Commit

Permalink
Merge pull request #6 from blogfoster/feature/dist-output
Browse files Browse the repository at this point in the history
Upgrade to React v15, prepare dist folder.
  • Loading branch information
kimmobrunfeldt committed Jun 16, 2016
2 parents 16f80e2 + 90e25a1 commit 4b15907
Show file tree
Hide file tree
Showing 5 changed files with 181 additions and 20 deletions.
4 changes: 4 additions & 0 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"presets": ["es2015", "react"],
"plugins": ["transform-es2015-modules-umd"]
}
148 changes: 148 additions & 0 deletions dist/react-progressbar.js
Original file line number Diff line number Diff line change
@@ -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
};
});
3 changes: 2 additions & 1 deletion local-dev/main.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
var React = require('react');
var ReactDom = require('react-dom');
var ProgressBar = require('../src/main.js');
var Circle = ProgressBar.Circle;

Expand Down Expand Up @@ -34,7 +35,7 @@ var App = React.createClass({
}
});

React.render(
ReactDom.render(
<App />,
document.querySelector('body')
);
43 changes: 25 additions & 18 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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": [
Expand All @@ -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"
}
}
}
3 changes: 2 additions & 1 deletion src/main.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
var React = require('react');
var ReactDom = require('react-dom');
var isEqual = require('lodash.isequal');
var ProgressBar = require('progressbar.js');

Expand Down Expand Up @@ -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
Expand Down

0 comments on commit 4b15907

Please sign in to comment.