New feature/add loading

spec/component.spec.js

@@ -53,6 +53,20 @@ describe('Component', () => {
     expect(wrapper.find('input').hasClass(className)).to.be.false
   })
 
+  it('allows to be set as loading', () => {
+    wrapper = shallow(<Toggle loading />)
+
+    expect(wrapper.state('loading')).to.be.true
+    expect(wrapper.find('.react-toggle--loading')).to.not.be.empty
+  })
+
+  it('defaults the value of `loading` to false', () => {
+    wrapper = shallow(<Toggle />)
+
+    expect(wrapper.state('loading')).to.be.false
+    expect(wrapper.find('.react-toggle--loading')).to.be.empty
+  })
+
   it('defaults to the value of `defaultChecked`', () => {
     wrapper = shallow(<Toggle defaultChecked={false} />)
 
@@ -86,6 +100,13 @@ describe('Component', () => {
     expect(wrapper.find('.react-toggle-track-x')).to.be.contain(unchecked)
   })
 
+  it('takes loading custom icons', () => {
+    const loading = <div>loading</div>
+    wrapper = shallow(<Toggle loading icons={{ loading }} />)
+
+    expect(wrapper.find('.react-toggle--loading')).to.be.contain(loading)
+  })
+
   it('defaults to the regular icon if only one is supplied', () => {
     const checked = <div>checked</div>
     const unchecked = <div>unchecked</div>

src/component/index.js

@@ -3,6 +3,7 @@ import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import Check from './check'
 import X from './x'
+import Loading from './loading'
 import { pointerCoord } from './util'
 
 export default class Toggle extends PureComponent {
@@ -18,6 +19,7 @@ export default class Toggle extends PureComponent {
     this.state = {
       checked: !!(props.checked || props.defaultChecked),
       hasFocus: false,
+      loading: !!(props.loading || false),
     }
   }
 
@@ -125,11 +127,20 @@ export default class Toggle extends PureComponent {
   render () {
     const { className, icons: _icons, ...inputProps } = this.props
     const classes = classNames('react-toggle', {
+      'react-toggle--loading  react-toggle--default-cursor': this.state.loading,
       'react-toggle--checked': this.state.checked,
       'react-toggle--focus': this.state.hasFocus,
       'react-toggle--disabled': this.props.disabled,
     }, className)
 
+    if (this.state.loading) {
+      return (
+        <div className={classes}>
+          {this.getIcon('loading')}
+        </div>
+      )
+    }
+
     return (
       <div className={classes}
         onClick={this.handleClick}
@@ -164,10 +175,12 @@ Toggle.defaultProps = {
   icons: {
     checked: <Check />,
     unchecked: <X />,
+    loading: <Loading />,
   },
 }
 
 Toggle.propTypes = {
+  loading: PropTypes.bool,
   checked: PropTypes.bool,
   disabled: PropTypes.bool,
   defaultChecked: PropTypes.bool,
@@ -185,6 +198,7 @@ Toggle.propTypes = {
     PropTypes.shape({
       checked: PropTypes.node,
       unchecked: PropTypes.node,
+      loading: PropTypes.node,
     }),
   ]),
 }

src/component/loading.js

@@ -0,0 +1,20 @@
+import React from 'react'
+
+export default () => (
+  <svg width='38' height='38' viewBox='0 0 38 38' xmlns='http://www.w3.org/2000/svg' stroke='#ccc'>
+    <g fill='none' fillRule='evenodd'>
+      <g transform='translate(1 1)' strokeWidth='2'>
+        <circle strokeOpacity='.5' cx='18' cy='18' r='18' />
+        <path d='M36 18c0-9.94-8.06-18-18-18'>
+          <animateTransform
+            attributeName='transform'
+            type='rotate'
+            from='0 18 18'
+            to='360 18 18'
+            dur='1s'
+            repeatCount='indefinite' />
+        </path>
+      </g>
+    </g>
+  </svg>
+)

src/docs/index.js

@@ -19,6 +19,25 @@ const Heart = () => (
   </div>
 )
 
+const LoadingText = () => (
+  <div>
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='#ff0000'>
+      <circle transform='translate(8 0)' cx='0' cy='16' r='0'>
+        <animate attributeName='r' values='0; 4; 0; 0' dur='1.2s' repeatCount='indefinite' begin='0'
+          keytimes='0;0.2;0.7;1' keySplines='0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8' calcMode='spline' />
+      </circle>
+      <circle transform='translate(16 0)' cx='0' cy='16' r='0'>
+        <animate attributeName='r' values='0; 4; 0; 0' dur='1.2s' repeatCount='indefinite' begin='0.3'
+          keytimes='0;0.2;0.7;1' keySplines='0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8' calcMode='spline' />
+      </circle>
+      <circle transform='translate(24 0)' cx='0' cy='16' r='0'>
+        <animate attributeName='r' values='0; 4; 0; 0' dur='1.2s' repeatCount='indefinite' begin='0.6'
+          keytimes='0;0.2;0.7;1' keySplines='0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8' calcMode='spline' />
+      </circle>
+    </svg>
+  </div>
+)
+
 class App extends Component {
   constructor (props) {
     super(props)
@@ -286,6 +305,27 @@ class App extends Component {
           </pre>
         </div>
 
+        {/* Loading */}
+
+        <div className='example'>
+          <div style={{marginBottom: '8px'}}>
+            <label>
+              <Toggle
+                loading
+                className='custom-classname' />
+              <span className='label-text'>Loading</span>
+            </label>
+          </div>
+
+          <pre>
+            {`<label>
+  <Toggle
+    loading={true} />
+  <span className='label-text'>Loading</span>
+</label>`}
+          </pre>
+        </div>
+
         {/* Custom className */}
 
         <div className='example'>
@@ -336,7 +376,31 @@ class App extends Component {
       unchecked: null,
     }}
     onChange={this.handleSoupChange} />
-  <span>Custom icons</span>
+    <span>Custom icons</span>
+</label>`}
+          </pre>
+        </div>
+
+        {/* Loading Custom icon */}
+
+        <div className='example'>
+          <label>
+            <Toggle
+              loading
+              icons={{
+                loading: <LoadingText />,
+              }} />
+            <span className='label-text'>Loading Custom icon</span>
+          </label>
+
+          <pre>
+            {`<label>
+  <Toggle
+  loading={true}
+    icons={{
+      checked: <LoadingText />,
+    }} />
+  <span>Loading Custom icon</span>
 </label>`}
           </pre>
         </div>

src/docs/style.css

@@ -24,3 +24,4 @@ pre {
 .custom-classname.react-toggle--checked .react-toggle-track {
   background-color: #ab199f;
 }
+

style.css

@@ -139,3 +139,7 @@
   -moz-box-shadow: 0px 0px 5px 5px #0099E0;
   box-shadow: 0px 0px 5px 5px #0099E0;
 }
+
+.react-toggle--default-cursor {
+  cursor: default;
+}