Skip to content

Commit

Permalink
refactoring -> es6
Browse files Browse the repository at this point in the history
  • Loading branch information
mathieudutour committed Feb 5, 2016
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.