diff options
| author | Andrej Mihajlov <and@mullvad.net> | 2018-06-01 16:13:10 +0200 |
|---|---|---|
| committer | Andrej Mihajlov <and@mullvad.net> | 2018-06-05 12:11:55 +0200 |
| commit | ca2f6fbfcad7b73d4ea63ef46cb1cab943ec9087 (patch) | |
| tree | b1f7754eb50896ab3681e35fa4e08be642b940c9 /app/components/Switch.js | |
| parent | 5852c980980de53e00d76a0bdb4b41bf5c0f5b39 (diff) | |
| download | mullvadvpn-ca2f6fbfcad7b73d4ea63ef46cb1cab943ec9087.tar.xz mullvadvpn-ca2f6fbfcad7b73d4ea63ef46cb1cab943ec9087.zip | |
Add formatted source code
Diffstat (limited to 'app/components/Switch.js')
| -rw-r--r-- | app/components/Switch.js | 66 |
1 files changed, 34 insertions, 32 deletions
diff --git a/app/components/Switch.js b/app/components/Switch.js index 6bd4b8e4d0..257b2c6587 100644 --- a/app/components/Switch.js +++ b/app/components/Switch.js @@ -5,41 +5,41 @@ const CLICK_TIMEOUT = 1000; const MOVE_THRESHOLD = 10; export type SwitchProps = { - className?: string; - isOn: boolean; - onChange: ?((isOn: boolean) => void); + className?: string, + isOn: boolean, + onChange: ?(isOn: boolean) => void, }; type State = { ignoreChange: boolean, - initialPos: {x: number, y: number}, + initialPos: { x: number, y: number }, startTime: ?number, }; export default class Switch extends React.Component<SwitchProps, State> { static defaultProps: SwitchProps = { isOn: false, - onChange: null + onChange: null, }; state = { ignoreChange: false, - initialPos: {x: 0, y: 0}, - startTime: (null: ?number) + initialPos: { x: 0, y: 0 }, + startTime: (null: ?number), }; isCapturingMouseEvents = false; ref: ?HTMLInputElement; - onRef = (e: ?HTMLInputElement) => this.ref = e; + onRef = (e: ?HTMLInputElement) => (this.ref = e); handleMouseDown = (e: MouseEvent) => { const { clientX: x, clientY: y } = e; this.startCapturingMouseEvents(); this.setState({ initialPos: { x, y }, - startTime: e.timeStamp + startTime: e.timeStamp, }); - } + }; handleMouseMove = (e: MouseEvent) => { const inputElement = this.ref; @@ -47,66 +47,66 @@ export default class Switch extends React.Component<SwitchProps, State> { const { clientX: x, clientY: y } = e; const dx = Math.abs(x0 - x); - if(dx < MOVE_THRESHOLD) { + if (dx < MOVE_THRESHOLD) { return; } const isOn = !!this.props.isOn; let nextOn = isOn; - if(x < x0 && isOn) { + if (x < x0 && isOn) { nextOn = false; - } else if(x > x0 && !isOn) { + } else if (x > x0 && !isOn) { nextOn = true; } - if(isOn !== nextOn) { + if (isOn !== nextOn) { this.setState({ initialPos: { x, y }, - ignoreChange: true + ignoreChange: true, }); - if(inputElement) { + if (inputElement) { inputElement.checked = nextOn; } this.notify(nextOn); } - } + }; handleMouseUp = () => { this.stopCapturingMouseEvents(); - } + }; handleChange = (e: Event) => { const startTime = this.state.startTime; const eventTarget: Object = e.target; - if(typeof(startTime) !== 'number') { + if (typeof startTime !== 'number') { throw new Error('startTime must be a number.'); } const dt = e.timeStamp - startTime; - if(this.state.ignoreChange) { + if (this.state.ignoreChange) { this.setState({ ignoreChange: false }); e.preventDefault(); - } else if(dt > CLICK_TIMEOUT) { + } else if (dt > CLICK_TIMEOUT) { e.preventDefault(); } else { this.notify(eventTarget.checked); } - } + }; notify(isOn: boolean) { const onChange = this.props.onChange; - if(onChange) { + if (onChange) { onChange(isOn); } } startCapturingMouseEvents() { - if(this.isCapturingMouseEvents) { + if (this.isCapturingMouseEvents) { throw new Error('startCapturingMouseEvents() is called out of order.'); } document.addEventListener('mousemove', this.handleMouseMove); @@ -115,7 +115,7 @@ export default class Switch extends React.Component<SwitchProps, State> { } stopCapturingMouseEvents() { - if(!this.isCapturingMouseEvents) { + if (!this.isCapturingMouseEvents) { throw new Error('stopCapturingMouseEvents() is called out of order.'); } document.removeEventListener('mousemove', this.handleMouseMove); @@ -125,7 +125,7 @@ export default class Switch extends React.Component<SwitchProps, State> { componentWillUnmount() { // guard from abrupt programmatic unmount - if(this.isCapturingMouseEvents) { + if (this.isCapturingMouseEvents) { this.stopCapturingMouseEvents(); } } @@ -135,13 +135,15 @@ export default class Switch extends React.Component<SwitchProps, State> { const { isOn, onChange, ...otherProps } = this.props; const className = ('switch ' + (otherProps.className || '')).trim(); return ( - <input { ...otherProps } + <input + {...otherProps} type="checkbox" - ref={ this.onRef } - className={ className } - checked={ isOn } - onMouseDown={ this.handleMouseDown } - onChange={ this.handleChange } /> + ref={this.onRef} + className={className} + checked={isOn} + onMouseDown={this.handleMouseDown} + onChange={this.handleChange} + /> ); } } |
