All files / components/toggle index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import cx from 'classnames'
import ToggleStyled from './toggle.styled'
 
const IconOn = ({ color = '#6197C6' }) => (
  <span>
    <svg xmlns="http://www.w3.org/2000/svg" width="9" height="6" viewBox="0 0 9 6">
      <path fill={color} fillRule="evenodd" d="M2.293 5.707l-2-2a.999.999 0 1 1 1.414-1.414L3 3.586 6.293.293a.999.999 0 1 1 1.414 1.414l-4 4a.997.997 0 0 1-1.414 0z" />
    </svg>
  </span>
)
 
const IconOff = ({ color = '#95A3B7' }) => (
  <span>
    <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6">
      <path fill={color} fillRule="evenodd" d="M1.586 3L.293 1.707A.999.999 0 1 1 1.707.293L3 1.586 4.293.293a.999.999 0 1 1 1.414 1.414L4.414 3l1.293 1.293a.999.999 0 1 1-1.414 1.414L3 4.414 1.707 5.707A.999.999 0 1 1 .293 4.293L1.586 3z" />
    </svg>
  </span>
)
 
class Toggle extends Component {
  constructor(props) {
    super(props)
    this.state = {
      on: props.on || false
    }
  }
 
  onClick = () => {
    const { onChange, onCheck, onUnCheck, disabled } = this.props
 
    if (disabled)
      return
 
    this.setState({
      on: !this.state.on
    }, () => {
      if (onChange) {
        onChange(this.state.on)
      }
 
      if (this.state.on && onCheck) {
        onCheck()
      }
      else if (!this.state.on && onUnCheck) {
        onUnCheck()
      }
    })
  }
 
  render () {
    const { on } = this.state
    const { position, label, disabled } = this.props
    return (
      <ToggleStyled onClick={this.onClick} disabled={disabled}>
        {label !== null && <div className='widget-toggle-label'>{label}</div>}
        <div className={cx({
          [position]: true
        }, 'element-position')}>
          <div className={cx({
            'on': on
          }, 'widget-toggle-container')}>
            <div className='toggle-labels'>
              <IconOn color={disabled ? '#aaaaaa' : '#6197C6'} />
              <IconOff color={disabled ? '#aaaaaa' : '#95A3B7'} />
            </div>
            <div className='toggle-button' />
          </div>
        </div>
      </ToggleStyled>
    )
  }
}
 
Toggle.propTypes = {
  position: PropTypes.oneOf(['left', 'center', 'right']),
  label: PropTypes.string,
  on: PropTypes.bool,
  onChange: PropTypes.func,
  onCheck: PropTypes.func,
  onUnCheck: PropTypes.func
}
 
Toggle.defaultProps = {
  position: 'left',
  label: null,
  on: false,
  onChange: () => { },
  onCheck: () => { },
  onUnCheck: () => { }
}
 
export { Toggle }