diff options
| author | Andrej Mihajlov <and@mullvad.net> | 2018-07-18 15:07:37 +0200 |
|---|---|---|
| committer | Andrej Mihajlov <and@mullvad.net> | 2018-08-15 17:39:38 +0200 |
| commit | 71592249b2dd669b6f24f37bfb7b0f4e43b74998 (patch) | |
| tree | a6097dc7e5d94d06e99c65fdfe160e824395f50c /app/components/Switch.js | |
| parent | e84e87f4ce5a8c242f756566cdc6fb59a45f7bea (diff) | |
| download | mullvadvpn-71592249b2dd669b6f24f37bfb7b0f4e43b74998.tar.xz mullvadvpn-71592249b2dd669b6f24f37bfb7b0f4e43b74998.zip | |
Add workspaces
Diffstat (limited to 'app/components/Switch.js')
| -rw-r--r-- | app/components/Switch.js | 150 |
1 files changed, 0 insertions, 150 deletions
diff --git a/app/components/Switch.js b/app/components/Switch.js deleted file mode 100644 index 4abb4a247f..0000000000 --- a/app/components/Switch.js +++ /dev/null @@ -1,150 +0,0 @@ -// @flow - -import * as React from 'react'; - -const CLICK_TIMEOUT = 1000; -const MOVE_THRESHOLD = 10; - -export type SwitchProps = { - className?: string, - isOn: boolean, - onChange: ?(isOn: boolean) => void, -}; - -type State = { - ignoreChange: boolean, - initialPos: { x: number, y: number }, - startTime: ?number, -}; - -export default class Switch extends React.Component<SwitchProps, State> { - static defaultProps: SwitchProps = { - isOn: false, - onChange: null, - }; - - state = { - ignoreChange: false, - initialPos: { x: 0, y: 0 }, - startTime: (null: ?number), - }; - - isCapturingMouseEvents = false; - ref: ?HTMLInputElement; - 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, - }); - }; - - handleMouseMove = (e: MouseEvent) => { - const inputElement = this.ref; - const { x: x0 } = this.state.initialPos; - const { clientX: x, clientY: y } = e; - const dx = Math.abs(x0 - x); - - if (dx < MOVE_THRESHOLD) { - return; - } - - const isOn = !!this.props.isOn; - let nextOn = isOn; - - if (x < x0 && isOn) { - nextOn = false; - } else if (x > x0 && !isOn) { - nextOn = true; - } - - if (isOn !== nextOn) { - this.setState({ - initialPos: { x, y }, - ignoreChange: true, - }); - - 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') { - throw new Error('startTime must be a number.'); - } - - const dt = e.timeStamp - startTime; - - if (this.state.ignoreChange) { - this.setState({ ignoreChange: false }); - e.preventDefault(); - } else if (dt > CLICK_TIMEOUT) { - e.preventDefault(); - } else { - this.notify(eventTarget.checked); - } - }; - - notify(isOn: boolean) { - const onChange = this.props.onChange; - if (onChange) { - onChange(isOn); - } - } - - startCapturingMouseEvents() { - if (this.isCapturingMouseEvents) { - throw new Error('startCapturingMouseEvents() is called out of order.'); - } - document.addEventListener('mousemove', this.handleMouseMove); - document.addEventListener('mouseup', this.handleMouseUp); - this.isCapturingMouseEvents = true; - } - - stopCapturingMouseEvents() { - if (!this.isCapturingMouseEvents) { - throw new Error('stopCapturingMouseEvents() is called out of order.'); - } - document.removeEventListener('mousemove', this.handleMouseMove); - document.removeEventListener('mouseup', this.handleMouseUp); - this.isCapturingMouseEvents = false; - } - - componentWillUnmount() { - // guard from abrupt programmatic unmount - if (this.isCapturingMouseEvents) { - this.stopCapturingMouseEvents(); - } - } - - render() { - // eslint-disable-next-line no-unused-vars - const { isOn, onChange, ...otherProps } = this.props; - const className = ('switch ' + (otherProps.className || '')).trim(); - return ( - <input - {...otherProps} - type="checkbox" - ref={this.onRef} - className={className} - checked={isOn} - onMouseDown={this.handleMouseDown} - onChange={this.handleChange} - /> - ); - } -} |
