created toggle input

packages/strapi-plugin-setings-manager/admin/src/components/InputToggle/index.js

@@ -5,9 +5,6 @@
 */
 
 import React from 'react';
-
-import { FormattedMessage } from 'react-intl';
-import messages from './messages';
 import styles from './styles.scss';
 
 class InputToggle extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -17,46 +14,45 @@ class InputToggle extends React.Component { // eslint-disable-line react/prefer-
 
     }
   }
-  onChange = ({ target }) => {
-    console.log(target)
-  }
-  render() {
-    const btnClassOff = this.props.value ? 'btn btn-secondary' : 'btn btn-warning';
-    const btnClassOn = this.props.value ? 'btn btn-primary' : 'btn btn-secondary';
-    console.log(this.props.value);
 
+  render() {
+    const btnClassOff = this.props.isChecked ? 'btn ' : `btn ${styles.gradientOff}`;
+    const btnClassOn = this.props.isChecked ? `btn ${styles.gradientOn}` : 'btn';
+    const customBootstrapClass = this.props.customBootstrapClass ? this.props.customBootstrapClass : 'col-md-4';
     return (
-      <div className={`${styles.inputRadio} btn-group`} data-toggle="buttons">
-        <label className="btn" className={btnClassOff}>
-          <input
-            type="checkbox"
-            name="options"
-            id="off"
-            autocomplete="off"
-            onChange={this.props.handleChange}
-            value={false}
-            checked={this.props.value}
-          />
-          OFF
-        </label>
-        <label className="btn" className={btnClassOn}>
-          <input
-            type="checkbox"
-            name="options"
-            id="on"
-            autocomplete="off"
-            onChange={this.props.handleChange}
-            value={true}
-            checked={this.props.value}
-          />
-          ON
-        </label>
+      <div className={customBootstrapClass}>
+        <div className={`${styles.inputToggle} btn-group`} data-toggle="buttons">
+          <label className={btnClassOff} htmlFor="off">
+            <input
+              type="checkbox"
+              name={this.props.name}
+              id="off"
+              onChange={this.props.handleChange}
+              checked={this.props.isChecked}
+            />
+            OFF
+          </label>
+          <label className="btn" className={btnClassOn} htmlFor="on">
+            <input
+              type="checkbox"
+              name={this.props.name}
+              id="on"
+              onChange={this.props.handleChange}
+              checked={this.props.isChecked}
+            />
+            ON
+          </label>
+        </div>
       </div>
     );
   }
 }
 
+InputToggle.propTypes = {
+  customBootstrapClass: React.PropTypes.string,
+  handleChange: React.PropTypes.func.isRequired,
+  isChecked: React.PropTypes.bool.isRequired,
+  name: React.PropTypes.string.isRequired,
+}
+
 export default InputToggle;
-
-
-// F76B00

packages/strapi-plugin-setings-manager/admin/src/components/InputToggle/styles.scss

@@ -1,3 +1,36 @@
-.inputRadio { /* stylelint-disable */
-
+.inputToggle { /* stylelint-disable */
+  > label {
+    // display and box model
+    width: 5.3rem;
+    height: 3.4rem;
+    padding: 0;
+    line-height: 3.2rem;
+    border: 1px solid #E3E9F3;
+    // color
+    color: #333740;
+    background-color: white;
+    // text
+    font-weight: 600;
+    font-size: 1.2rem;
+    letter-spacing: 0.07rem;
+    &:first-of-type {
+      border-right: none;
+    }
+    &:nth-of-type(2) {
+      border-left: none;
+    }
+    &:hover {
+      z-index: 0 !important;
+    }
+  }
+}
+
+.gradientOff {
+  background-image: linear-gradient( to bottom right, #F65A1D, #F68E0E );
+  color: white !important;
+}
+
+.gradientOn {
+  background-image: linear-gradient( to bottom right, #005EEA, #0097F6);
+  color: white !important;
 }

packages/strapi-plugin-setings-manager/admin/src/containers/Home/index.js

@@ -9,7 +9,7 @@ import { connect } from 'react-redux';
 import Helmet from 'react-helmet';
 import PluginLeftMenu from 'components/PluginLeftMenu';
 import InputToggle from 'components/InputToggle';
-import InputNumber from 'components/InputNumber';
+import InputText from 'components/InputText';
 import selectHome from './selectors';
 import styles from './styles.scss';
 
@@ -17,14 +17,15 @@ export class Home extends React.Component { // eslint-disable-line react/prefer-
   constructor(props) {
     super(props);
     this.state = {
-      value: true,
+      value: false,
       value1: null,
     }
   }
 
   handleChange = ({ target }) => {
-
-    this.setState({ value1: target.value });
+    console.log('ok');
+    console.log(target);
+    this.setState({ value: !this.state.value});
   }
 
   render() {
@@ -59,14 +60,15 @@ export class Home extends React.Component { // eslint-disable-line react/prefer-
 
 
 
-            <InputNumber
+            <InputToggle
                 handleChange={this.handleChange}
-                value={this.state.value1}
+                isChecked={this.state.value}
                 name={test.name}
                 validations={test.validations}
-                customBootstrapClass={'col-lg-4 offset-lg-4'}
-                errors={false}
+                customBootstrapClass={'col-lg-2 offset-lg-4'}
+                errors={[]}
               />
+
               </div>
             </div>
           </div>