From ad871457d6f1f191748de6a05c55c9711e25f3f6 Mon Sep 17 00:00:00 2001 From: Mathieu Dutour <mathieu@dutour.me> Date: Tue, 6 Oct 2015 18:24:38 +0100 Subject: [PATCH] pass all other props to top element --- README.md | 2 +- bower.json | 2 +- package.json | 2 +- react-progress-button.js | 24 ++++++++++++++++-------- 4 files changed, 19 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 4ded747..97644f5 100755 --- a/README.md +++ b/README.md @@ -50,7 +50,7 @@ var App = React.createClass({ ### Props -All props are optional. +All props are optional. All props other than that will be passed to the top element. ##### classNamespace diff --git a/bower.json b/bower.json index 6e2d5a5..5dcddb9 100755 --- a/bower.json +++ b/bower.json @@ -4,7 +4,7 @@ "react-progress-button.js", "react-progress-button.css" ], - "version": "1.1.0", + "version": "2.0.0", "homepage": "https://github.com/mathieudutour/react-progress-button", "description": "Simple react.js component for a inline progress indicator", "keywords": [ diff --git a/package.json b/package.json index 41048bb..3ec4c82 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-progress-button", - "version": "1.1.0", + "version": "2.0.0", "description": "Simple react.js component for a inline progress indicator", "main": "react-progress-button.js", "dependencies": { diff --git a/react-progress-button.js b/react-progress-button.js index 75ccae2..910a4cc 100644 --- a/react-progress-button.js +++ b/react-progress-button.js @@ -8,6 +8,7 @@ } })(this, function (React) { "use strict"; + function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } var ProgressButton = React.createClass({displayName: "ProgressButton", propTypes: { @@ -42,22 +43,29 @@ }, render: function() { + var className = this.props.className; + var classNamespace = this.props.classNamespace; + var children = this.props.children; + var type = this.props.type; + var form = this.props.form; + + var containerProps = _objectWithoutProperties(this.props, ["classNamespace", "children", "type", "form", "durationError", "durationSuccess", "onClick", "onError", "state", "shouldAllowClickOnLoading"]); + containerProps.className = classNamespace + "container " + this.state.currentState + ' ' + className; + containerProps.onClick = this.handleClick; return ( - React.createElement("div", {className: this.props.classNamespace + "container " + this.state.currentState, - onClick: this.handleClick}, - React.createElement("button", {type: this.props.type, form: this.props.form, - className: this.props.classNamespace + "button"}, - React.createElement("span", null, this.props.children), - React.createElement("svg", {className: this.props.classNamespace + "progress-circle", + React.createElement("div", containerProps, + React.createElement("button", {type: type, form: form, className: classNamespace + "button"}, + React.createElement("span", null, children), + React.createElement("svg", {className: classNamespace + "progress-circle", viewBox: "0 0 41 41"}, React.createElement("path", {d: "M38,20.5 C38,30.1685093 30.1685093,38 20.5,38"}) ), - React.createElement("svg", {className: this.props.classNamespace + "checkmark", + React.createElement("svg", {className: classNamespace + "checkmark", viewBox: "0 0 70 70"}, React.createElement("path", {d: "m31.5,46.5l15.3,-23.2"}), React.createElement("path", {d: "m31.5,46.5l-8.5,-7.1"}) ), - React.createElement("svg", {className: this.props.classNamespace + "cross", + React.createElement("svg", {className: classNamespace + "cross", viewBox: "0 0 70 70"}, React.createElement("path", {d: "m35,35l-9.3,-9.3"}), React.createElement("path", {d: "m35,35l9.3,9.3"}),