Skip to content

Commit

Permalink
refactoring -> es6
Browse files Browse the repository at this point in the history
mathieudutour committed Feb 5, 2016

Verified

This commit was signed with the committer’s verified signature. The key has expired.
fborello-lambda Federico Borello
1 parent a3f05ce commit 695f0cb
Showing 15 changed files with 350 additions and 342 deletions.
3 changes: 3 additions & 0 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"presets": ["es2015", "stage-0", "react"]
}
14 changes: 14 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"extends": "standard",
"parser": "babel-eslint",
"env": {
"mocha": true,
"node": true
},
"globals": {
"expect": true
},
"rules": {
"no-unused-expressions": 0
}
}
15 changes: 9 additions & 6 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
# https://git-scm.com/docs/gitignore
# https://help.github.com/articles/ignoring-files
# Example .gitignore files: https://github.com/github/gitignore
/bower_components/
/node_modules/
.DS_Store
pids
logs
npm-debug.log
node_modules
example/lib
example/app.bundle.js
example/app.promise.bundle.js
/lib
coverage
4 changes: 4 additions & 0 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
language: node_js
node_js:
- "4"
- "5"
15 changes: 15 additions & 0 deletions Makefile
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
BIN=node_modules/.bin

build:
$(BIN)/babel src --out-dir lib && \
$(BIN)/babel example/src --out-dir example/lib && \
$(BIN)/webpack example/lib/app.js example/app.bundle.js -p && \
$(BIN)/webpack example/lib/app.promise.js example/app.promise.bundle.js -p

clean:
rm -rf lib && rm -rf example/lib && rm -f example/app.bundle.js && rm -f example/app.promise.bundle.js

lint:
$(BIN)/eslint src && $(BIN)/eslint tests

PHONY: build clean lint
47 changes: 23 additions & 24 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
# react-progress-button

[![build status](https://img.shields.io/travis/mathieudutour/react-progress-button/master.svg?style=flat-square)](https://travis-ci.org/mathieudutour/react-progress-button)
[![npm version](https://img.shields.io/npm/v/react-progress-button.svg?style=flat-square)](https://www.npmjs.com/package/react-progress-button)
[![Dependency Status](https://david-dm.org/mathieudutour/react-progress-button.svg)](https://david-dm.org/mathieudutour/react-progress-button)
[![devDependency Status](https://david-dm.org/mathieudutour/react-progress-button/dev-status.svg)](https://david-dm.org/mathieudutour/mathieudutour/react-progress-button#info=devDependencies)

> Simple [React](http://facebook.github.io/react/index.html) component for a circular Progress Button.
### [Demo](https://mathieudutour.github.io/react-progress-button)
@@ -12,44 +17,38 @@
npm install react-progress-button --save
```

or

```bash
bower install react-progress-button --save
```

## Example

### Controlled usage:

```javascript
var ProgressButton = require('react-progress-button');
import ProgressButton from 'react-progress-button'

var App = React.createClass({
getInitialState() {
const App = React.createClass({
getInitialState () {
return {
buttonState: ''
};
}
},

render() {
render () {
return (
<div>
<ProgressButton onClick={this.handleClick} state={this.state.buttonState}>
Go!
</ProgressButton>
</div>
);
)
},

handleClick() {
this.setState({buttonState: 'loading'});
handleClick () {
this.setState({buttonState: 'loading'})
// make asynchronous call
setTimeout(function() {
this.setState({buttonState: 'success'});
}.bind(this), 3000);
this.setState({buttonState: 'success'})
}.bind(this), 3000)
}
});
})
```

[Source](https://github.com/mathieudutour/react-progress-button/blob/master/example/index.html)
@@ -63,22 +62,22 @@ states based on the outcome of the Promise without the need for
external manipulation of state using a ref.

```javascript
var ProgressButton = require('react-progress-button');
import ProgressButton from 'react-progress-button'

var App = React.createClass({
render() {
const App = React.createClass({
render () {
return (
<div>
<ProgressButton onClick={this.handleClick}>
Go!
</ProgressButton>
</div>
);
)
},

handleClick() {
return new Promise(function(resolve, reject) {
setTimeout(resolve, 3000);
setTimeout(resolve, 3000)
})
}
});
@@ -162,6 +161,6 @@ Put the button in the error state. Call the callback or the onSuccess prop when

Look at [react-progress-button.css](https://github.com/mathieudutour/react-progress-button/blob/master/react-progress-button.css) for an idea on how to style this component.

---
## License

MIT Licensed
MIT
33 changes: 0 additions & 33 deletions bower.json

This file was deleted.

51 changes: 3 additions & 48 deletions example/index-promises.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
<title>react-progress-button example, using Promises (without JSX)</title>
<title>react-progress-button example</title>
<link rel="stylesheet" href="../react-progress-button.css">
<style>
* {
@@ -26,52 +26,7 @@
</style>
</head>
<body>
<div id="button-success"></div>
<div id="button-error"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.0/react.min.js"></script>
<script src="../react-progress-button.js"></script>
<script>
var ButtonSuccessContainer = React.createClass({
displayName: "ButtonSuccessContainer",

render() {
return (
React.createElement("div", null,
React.createElement(ProgressButton, {onClick: this.handleClick},
"Go!"
)
)
);
},

handleClick() {
return new Promise(function(resolve, reject) {
setTimeout(resolve, 3000);
});
}
});
var ButtonErrorContainer = React.createClass({
displayName: "ButtonErrorContainer",

render() {
return (
React.createElement("div", null,
React.createElement(ProgressButton, {onClick: this.handleClick},
"Go!"
)
)
);
},

handleClick() {
return new Promise(function(resolve, reject) {
setTimeout(reject, 3000);
})
}
});

React.render(React.createElement(ButtonSuccessContainer, null), document.getElementById("button-success"));
React.render(React.createElement(ButtonErrorContainer, null), document.getElementById("button-error"));
</script>
<div id="app"></div>
<script src="./app.promise.bundle.js"></script>
</body>
</html>
67 changes: 3 additions & 64 deletions example/index.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
<title>react-progress-button example (without JSX)</title>
<title>react-progress-button example</title>
<link rel="stylesheet" href="../react-progress-button.css">
<style>
* {
@@ -26,68 +26,7 @@
</style>
</head>
<body>
<div id="button-success"></div>
<div id="button-error"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.0/react.min.js"></script>
<script src="../react-progress-button.js"></script>
<script>
var ButtonSuccessContainer = React.createClass({
displayName: "ButtonSuccessContainer",

getInitialState() {
return {
buttonState: ''
};
},

render() {
return (
React.createElement("div", null,
React.createElement(ProgressButton, {state: this.state.buttonState, onClick: this.handleClick},
"Go!"
)
)
);
},

handleClick() {
this.setState({buttonState: 'loading'});
// make asynchronous call
setTimeout(function() {
this.setState({buttonState: 'success'});
}.bind(this), 3000);
}
});
var ButtonErrorContainer = React.createClass({
displayName: "ButtonErrorContainer",

getInitialState() {
return {
buttonState: ''
};
},

render() {
return (
React.createElement("div", null,
React.createElement(ProgressButton, {state: this.state.buttonState, onClick: this.handleClick},
"Go!"
)
)
);
},

handleClick() {
this.setState({buttonState: 'loading'});
// make asynchronous call
setTimeout(function() {
this.setState({buttonState: 'success'});
}.bind(this), 3000);
}
});

React.render(React.createElement(ButtonSuccessContainer, null), document.getElementById("button-success"));
React.render(React.createElement(ButtonErrorContainer, null), document.getElementById("button-error"));
</script>
<div id="app"></div>
<script src="./app.bundle.js"></script>
</body>
</html>
47 changes: 47 additions & 0 deletions example/src/app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import React from 'react'
import ReactDOM from 'react-dom'
import ProgressButton, {STATE} from '../../lib/index'

const App = React.createClass({
getInitialState () {
return {
button1State: STATE.NOTHING,
button2State: STATE.NOTHING
}
},

render () {
return (
<div>
<div id="button-success">
<ProgressButton state={this.state.button1State} onClick={this.handleClick1}>
Go!
</ProgressButton>
</div>
<div id="button-error">
<ProgressButton state={this.state.button2State} onClick={this.handleClick2}>
Go!
</ProgressButton>
</div>
</div>
)
},

handleClick1 () {
this.setState({button1State: STATE.LOADING})
// make asynchronous call
setTimeout(() => {
this.setState({button1State: STATE.SUCCESS})
}, 3000)
},

handleClick2 () {
this.setState({button2State: STATE.LOADING})
// make asynchronous call
setTimeout(() => {
this.setState({button2State: STATE.ERROR})
}, 3000)
}
})

ReactDOM.render(<App />, document.getElementById('app'))
Loading

0 comments on commit 695f0cb

Please sign in to comment.