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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
import * as React from 'react';
const CLICK_TIMEOUT = 1000;
const MOVE_THRESHOLD = 10;
interface IProps {
className?: string;
isOn: boolean;
onChange?: (isOn: boolean) => void;
}
interface IState {
ignoreChange: boolean;
initialPos: { x: number; y: number };
startTime?: number;
}
export default class Switch extends React.Component<IProps, IState> {
public static defaultProps: Partial<IProps> = {
isOn: false,
onChange: undefined,
};
public state: IState = {
ignoreChange: false,
initialPos: { x: 0, y: 0 },
startTime: undefined,
};
public isCapturingMouseEvents = false;
public ref = React.createRef<HTMLInputElement>();
public componentWillUnmount() {
// guard from abrupt programmatic unmount
if (this.isCapturingMouseEvents) {
this.stopCapturingMouseEvents();
}
}
public render() {
const { isOn, onChange, ...otherProps } = this.props;
const className = ('switch ' + (otherProps.className || '')).trim();
return (
<input
{...otherProps}
type="checkbox"
ref={this.ref}
className={className}
checked={isOn}
onMouseDown={this.handleMouseDown}
onChange={this.handleChange}
/>
);
}
private handleMouseDown = (e: React.MouseEvent<HTMLInputElement>) => {
const { clientX: x, clientY: y } = e;
this.startCapturingMouseEvents();
this.setState({
initialPos: { x, y },
startTime: e.timeStamp,
});
};
private handleMouseMove = (e: MouseEvent) => {
const inputElement = this.ref.current;
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);
}
};
private handleMouseUp = () => {
this.stopCapturingMouseEvents();
};
private handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const startTime = this.state.startTime;
const eventTarget = 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);
}
};
private notify(isOn: boolean) {
const onChange = this.props.onChange;
if (onChange) {
onChange(isOn);
}
}
private 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;
}
private 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;
}
}
|
