first release

jamesjjk · Apr 28, 2015 · bf0c2ca · bf0c2ca
1 parent 69558e0
commit bf0c2ca
Show file tree

Hide file tree

Showing 9 changed files with 500 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -2,4 +2,5 @@
 # https://help.github.com/articles/ignoring-files
 # Example .gitignore files: https://github.com/github/gitignore
 /bower_components/
-/node_modules/
+/node_modules/
+.DS_Store
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,3 @@
+### 0.1.0 (2015-27-04)
+
+* first release
diff --git a/README.md b/README.md
@@ -0,0 +1,113 @@
+# react-progress-button
+
+> Simple [React](http://facebook.github.io/react/index.html) component for a circular Progress Button.
+
+### [Demo](https://mathieudutour.github.io/react-progress-button)
+
+[![Demo](https://cdn.rawgit.com/mathieudutour/react-progress-button/master/example/demo.gif "Demo")](https://github.com/mathieudutour/react-progress-button/blob/master/example/index.html)
+
+## Install
+
+```bash
+npm install react-progress-button --save
+```
+
+or
+
+```bash
+bower install react-progress-button --save
+```
+
+## Example
+
+Controlled usage:
+
+```javascript
+var ProgressButton = require('react-progress-button');
+
+var App = React.createClass({
+  render() {
+    return (
+      <div>
+        <ProgressButton ref='button' onClick={this.handleClick}>
+          Go!
+        </ProgressButton>
+      </div>
+    );
+  },
+
+  handleClick() {
+    this.refs.button.loading();
+    //make asynchronious call
+    setTimeout(function() {
+      this.refs.button.success();
+    }.bind(this), 3000);
+  }
+});
+```
+
+## API
+
+### Props
+
+All props are optional.
+
+##### classNamespace
+
+Namespace for CSS classes, default is `pb` i.e CSS classes are `pb-button`.
+
+##### durationError
+
+Duration (ms) before going back to normal state when an error occurs,
+default is 1200
+
+##### durationSuccess
+
+Duration (ms) before going back to normal state when an success occurs,
+default is 500
+
+##### onClick
+
+Function to call onClick on the button
+
+##### onError
+
+Function to call when going back to the normal state after an error
+
+##### onSuccess
+
+Function to call when going back to the normal state after a success
+
+##### state
+
+State of the button if you do not want to use the functions. Can be '', 'loading', 'success' or 'error'.
+
+
+### Methods
+
+##### loading()
+
+Put the button in the loading state.
+
+##### notLoading()
+
+Put the button in the normal state.
+
+##### success([callback])
+
+Put the button in the success state. Call the callback or the onSuccess prop when going back to the normal state.
+
+##### error([callback])
+
+Put the button in the error state. Call the callback or the onSuccess prop when going back to the normal state.
+
+## Styles
+
+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.
+
+---
+
+MIT Licensed
+
+
+
diff --git a/bower.json b/bower.json
@@ -0,0 +1,33 @@
+{
+  "name": "react-progress-button",
+  "main": [
+    "react-progress-button.js",
+    "react-progress-button.css"
+  ],
+  "version": "0.1.0",
+  "homepage": "https://github.com/mathieudutour/react-progress-button",
+  "description": "Simple react.js component for a inline progress indicator",
+  "keywords": [
+    "react",
+    "progress",
+    "button",
+    "component",
+    "javascript",
+    "react-component"
+  ],
+  "authors": [
+    "Mathieu Dutour <[email protected]>"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests",
+    "example"
+  ],
+  "dependencies": {
+    "react": "^0.12.0"
+  }
+}
diff --git a/example/demo.gif b/example/demo.gif
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,82 @@
+<!doctype html>
+<html>
+<head>
+  <title>react-progress-button example (without JSX)</title>
+  <link rel="stylesheet" href="../react-progress-button.css">
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      border: 0;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+    }
+    body {
+      background: #eeefef;
+      color: #0099cc;
+    }
+    #button-success {
+      width: 200px;
+      margin: 100px auto;
+    }
+    #button-error {
+      width: 200px;
+      margin: 100px auto;
+    }
+  </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/JSXTransformer.js"></script>
+  <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, {ref: "button", onClick: this.handleClick},
+              "Go!"
+            )
+          )
+        );
+      },
+
+      handleClick() {
+        this.refs.button.loading();
+        //make asynchronious call
+        setTimeout(function() {
+          this.refs.button.success();
+        }.bind(this), 3000);
+      }
+    });
+    var ButtonErrorContainer = React.createClass({
+      displayName: "ButtonErrorContainer",
+
+      render() {
+        return (
+          React.createElement("div", null,
+            React.createElement(ProgressButton, {ref: "buttonError", onClick: this.handleClick},
+              "Go!"
+            )
+          )
+        );
+      },
+
+      handleClick() {
+        this.refs.buttonError.loading();
+        //make asynchronious call
+        setTimeout(function() {
+          this.refs.buttonError.error();
+        }.bind(this), 3000);
+      }
+    });
+
+    React.render(React.createElement(ButtonSuccessContainer, null), document.getElementById("button-success"));
+    React.render(React.createElement(ButtonErrorContainer, null), document.getElementById("button-error"));
+  </script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "react-progress-button",
+  "version": "0.1.0",
+  "description": "Simple react.js component for a inline progress indicator",
+  "main": "react-progress-button.js",
+  "dependencies": {
+    "react": "^0.12.0"
+  },
+  "devDependencies": {
+    "jsdom": "^3.0.2"
+    , "coveralls": "^2.11.2"
+    , "mocha": "^2.1.0"
+    , "istanbul": "^0.3.5"
+  },
+  "scripts": {},
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mathieudutour/react-progress-button"
+  },
+  "keywords": [
+    "react",
+    "progress",
+    "button",
+    "component",
+    "javascript",
+    "react-component"
+  ],
+  "author": "Mathieu Dutour",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mathieudutour/react-progress-button/issues"
+  },
+  "homepage": "https://github.com/mathieudutour/react-progress-button"
+}
diff --git a/react-progress-button.css b/react-progress-button.css
@@ -0,0 +1,100 @@
+.pb-container {
+  display: inline-block;
+  text-align: center;
+  width: 100%;
+}
+.pb-container .pb-button {
+  background: transparent;
+  border: 2px solid currentColor;
+  border-radius: 27px;
+  color: currentColor;
+  cursor: pointer;
+  padding: 0.7em 1em;
+  text-decoration: none;
+  text-align: center;
+  height: 54px;
+  width: 100%;
+  -webkit-tap-highlight-color: transparent;
+  outline: none;
+  transition: background-color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s, border-radius 0.3s;
+}
+.pb-container .pb-button span {
+  display: inherit;
+  transition: opacity 0.3s 0.1s;
+  font-size: 2em;
+  font-weight: 100;
+}
+.pb-container .pb-button svg {
+  height: 54px;
+  width: 54px;
+  position: absolute;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+.pb-container .pb-button svg path {
+  opacity: 0;
+  fill: none;
+}
+.pb-container .pb-button svg.pb-progress-circle {
+  animation: spin 0.9s infinite cubic-bezier(0.085, 0.260, 0.935, 0.710);
+}
+.pb-container .pb-button svg.pb-progress-circle path {
+  stroke: currentColor;
+  stroke-width: 5;
+}
+.pb-container .pb-button svg.pb-checkmark path,
+.pb-container .pb-button svg.pb-cross path {
+  stroke: #fff;
+  stroke-linecap: round;
+  stroke-width: 4;
+}
+.pb-container.loading .pb-button {
+  width: 54px;
+  border-width: 6.5px;
+  border-color: #ddd;
+  background-color: transparent;
+  padding: 0;
+}
+.pb-container.loading .pb-button span {
+  transition: all 0.15s;
+  opacity: 0;
+  display: none;
+}
+.pb-container.loading .pb-button .pb-progress-circle > path {
+  transition: opacity 0.15s 0.3s;
+  opacity: 1;
+}
+.pb-container.success .pb-button {
+  border-color: #A0D468;
+  background-color: #A0D468;
+}
+.pb-container.success .pb-button span {
+  transition: all 0.15s;
+  opacity: 0;
+  display: none;
+}
+.pb-container.success .pb-button .pb-checkmark > path {
+  opacity: 1;
+}
+.pb-container.error .pb-button {
+  border-color: #ED5565;
+  background-color: #ED5565;
+}
+.pb-container.error .pb-button span {
+  transition: all 0.15s;
+  opacity: 0;
+  display: none;
+}
+.pb-container.error .pb-button .pb-cross > path {
+  opacity: 1;
+}
+@keyframes spin {
+  from {
+    transform: translate(-50%, -50%) rotate(0deg);
+    transform-origin: center center;
+  }
+  to {
+    transform: translate(-50%, -50%) rotate(360deg);
+    transform-origin: center center;
+  }
+}