/
checkbox.tsx
125 lines (112 loc) · 4.19 KB
/
checkbox.tsx
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
//
// Copyright (c) Microsoft. All rights reserved.
// Licensed under the MIT license.
//
// Microsoft Bot Framework: http://botframework.com
//
// Bot Framework Emulator Github:
// https://github.com/Microsoft/BotFramwork-Emulator
//
// Copyright (c) Microsoft Corporation
// All rights reserved.
//
// MIT License:
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED ""AS IS"", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//
import * as React from 'react';
import * as styles from './checkbox.scss';
export interface CheckboxProps extends React.HTMLAttributes<HTMLInputElement> {
label?: string;
checkboxContainerClassName?: string;
checked?: boolean;
disabled?: boolean;
indeterminate?: boolean;
name?: string;
onChange?: (event: React.FormEvent<HTMLInputElement>) => void;
}
export interface CheckboxState {
checked?: boolean;
focused?: boolean;
indeterminate?: boolean;
}
let id = 0;
export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
private readonly checkboxId = 'emulator-checkbox-' + id++;
private inputRef: HTMLInputElement;
public static getDerivedStateFromProps(newProps: CheckboxProps, prevState: CheckboxState = {}): CheckboxState {
const { checked = false, indeterminate = false } = newProps;
const { checked: prevChecked, indeterminate: prevIndeterminate } = prevState;
if (prevChecked !== checked || prevIndeterminate !== indeterminate) {
return { checked, indeterminate };
}
return prevState;
}
constructor(props: CheckboxProps) {
super(props);
const { checked } = props;
this.state = { focused: false, checked };
}
public render(): React.ReactNode {
// Trim off what we don't want to send to the input tag
const { className, label = '', ...inputProps } = this.props;
const { checked = false, indeterminate = false, focused } = this.state;
const { disabled } = inputProps;
const disabledClass = disabled ? styles.disabled : '';
let checkMarkStyles = '';
if (indeterminate) {
checkMarkStyles = styles.indeterminate;
} else if (checked) {
checkMarkStyles = styles.checked;
}
if (focused) {
checkMarkStyles += ` ${styles.focused}`;
}
return (
<label id={this.checkboxId} className={`${styles.label} ${disabledClass} ${className}`} data-checked={checked}>
<span className={`${styles.checkMark} ${checkMarkStyles}`} />
<input type="checkbox" {...inputProps} className={styles.checkbox} ref={this.checkboxRef} readOnly={true} />
{label}
{this.props.children}
</label>
);
}
private checkboxRef = (ref: HTMLInputElement): void => {
const { inputRef, checkboxEventHandler } = this;
if (inputRef) {
inputRef.removeEventListener('focus', checkboxEventHandler);
inputRef.removeEventListener('blur', checkboxEventHandler);
}
this.inputRef = ref;
if (ref) {
ref.addEventListener('focus', checkboxEventHandler);
ref.addEventListener('blur', checkboxEventHandler);
}
};
private checkboxEventHandler = (event: Event): void => {
switch (event.type) {
case 'focus':
return this.setState({ focused: true });
case 'blur':
return this.setState({ focused: false });
default:
return null;
}
};
}