add mode select

gfazioli · Feb 9, 2017 · 16cda41 · 16cda41
1 parent 4ea29e7
commit 16cda41
Show file tree

Hide file tree

Showing 13 changed files with 104 additions and 22 deletions.
diff --git a/dist/react-switch-button.css b/dist/react-switch-button.css
@@ -132,6 +132,11 @@
   margin-left: 24px;
   background-color: #d5d5d5;
 }
+.rsbc-switch-button.rsbc-switch-button.rsbc-switch-button-flat-round.rsbc-mode-select input[type="checkbox"] + label:after,
+.rsbc-switch-button.rsbc-switch-button.rsbc-switch-button-flat-round.rsbc-mode-select:hover input[type="checkbox"]:checked + label,
+.rsbc-switch-button.rsbc-switch-button.rsbc-switch-button-flat-round.rsbc-mode-select input[type="checkbox"] + label {
+  background-color: #579fcb !important;
+}
 /**
  * React Switch Button control style square.
  *
@@ -217,3 +222,8 @@
   margin-left: 24px;
   background-color: #d5d5d5;
 }
+.rsbc-switch-button.rsbc-switch-button.rsbc-switch-button-flat-square.rsbc-mode-select input[type="checkbox"] + label:after,
+.rsbc-switch-button.rsbc-switch-button.rsbc-switch-button-flat-square.rsbc-mode-select:hover input[type="checkbox"]:checked + label,
+.rsbc-switch-button.rsbc-switch-button.rsbc-switch-button-flat-square.rsbc-mode-select input[type="checkbox"] + label {
+  background-color: #579fcb !important;
+}
diff --git a/dist/react-switch-button.js b/dist/react-switch-button.js
@@ -10,7 +10,7 @@ var SwitchButton = React.createClass({
   displayName: 'Switch Button',
 
   // Version
-  version: '2.1.0',
+  version: '2.2.0',
 
   /**
    * The props types.
@@ -25,6 +25,7 @@ var SwitchButton = React.createClass({
     disabled: React.PropTypes.bool,
     theme: React.PropTypes.string,
     checked: React.PropTypes.string,
+    mode: React.PropTypes.string,
     onChange: React.PropTypes.func
   },
 
@@ -44,6 +45,7 @@ var SwitchButton = React.createClass({
       defaultChecked: false,
       theme: 'rsbc-switch-button-flat-round',
       checked: null,
+      mode: "switch",
       onChange: this.handleChange
     };
   },
@@ -61,7 +63,8 @@ var SwitchButton = React.createClass({
   render: function render() {
     var id = undefined,
         label = undefined,
-        labelRight = undefined;
+        labelRight = undefined,
+        mode = this.props.mode || "switch";
 
     if (this.props.id === '' && this.props.name !== '') {
       id = this.props.name;
@@ -75,7 +78,11 @@ var SwitchButton = React.createClass({
       labelRight = React.createElement('label', { htmlFor: id }, this.props.labelRight);
     }
 
-    return React.createElement('div', { className: 'rsbc-switch-button ' + this.props.theme + (this.props.disabled ? " disabled" : "") }, label, React.createElement('input', { onChange: this.props.onChange,
+    if (['switch', 'select'].indexOf(mode) < -1) {
+      mode = "switch";
+    }
+
+    return React.createElement('div', { className: 'rsbc-switch-button rsbc-mode-' + mode + ' ' + this.props.theme + (this.props.disabled ? " disabled" : "") }, label, React.createElement('input', { onChange: this.props.onChange,
       defaultChecked: this.props.defaultChecked,
       disabled: this.props.disabled,
       id: id, name: this.props.name,

diff --git a/dist/react-switch-button.min.css b/dist/react-switch-button.min.css
diff --git a/dist/react-switch-button.min.js b/dist/react-switch-button.min.js
diff --git a/example/dist/app.css b/example/dist/app.css
@@ -137,6 +137,11 @@
   margin-left: 24px;
   background-color: #d5d5d5;
 }
+.rsbc-switch-button.rsbc-switch-button.rsbc-switch-button-flat-round.rsbc-mode-select input[type="checkbox"] + label:after,
+.rsbc-switch-button.rsbc-switch-button.rsbc-switch-button-flat-round.rsbc-mode-select:hover input[type="checkbox"]:checked + label,
+.rsbc-switch-button.rsbc-switch-button.rsbc-switch-button-flat-round.rsbc-mode-select input[type="checkbox"] + label {
+  background-color: #579fcb !important;
+}
 /**
  * React Switch Button control style square.
  *
@@ -222,6 +227,11 @@
   margin-left: 24px;
   background-color: #d5d5d5;
 }
+.rsbc-switch-button.rsbc-switch-button.rsbc-switch-button-flat-square.rsbc-mode-select input[type="checkbox"] + label:after,
+.rsbc-switch-button.rsbc-switch-button.rsbc-switch-button-flat-square.rsbc-mode-select:hover input[type="checkbox"]:checked + label,
+.rsbc-switch-button.rsbc-switch-button.rsbc-switch-button-flat-square.rsbc-mode-select input[type="checkbox"] + label {
+  background-color: #579fcb !important;
+}
 body {
   font-family: Helvetica, Arial, sans-serif;
   font-size: 14px;