-
Notifications
You must be signed in to change notification settings - Fork 2.7k
/
Checkbox.types.ts
165 lines (137 loc) · 4.3 KB
/
Checkbox.types.ts
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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
import * as React from 'react';
import { IStyle, ITheme } from '../../Styling';
import { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities';
import { IIconProps } from '../Icon/Icon.types';
import { IKeytipProps } from '../../Keytip';
/**
* Checkbox class interface.
*/
export interface ICheckbox {
/** Gets the current checked state. */
checked: boolean;
/** Sets focus to the checkbox. */
focus: () => void;
}
/**
* Checkbox properties.
*/
export interface ICheckboxProps extends React.ButtonHTMLAttributes<HTMLElement | HTMLInputElement> {
/**
* Optional callback to access the ICheckbox interface. Use this instead of ref for accessing
* the public methods and properties of the component.
*/
componentRef?: IRefObject<ICheckbox>;
/**
* Additional class name to provide on the root element, in addition to the ms-Checkbox class.
*/
className?: string;
/**
* Checked state. Mutually exclusive to "defaultChecked". Use this if you control the checked state at a higher
* level and plan to pass in the correct value based on handling onChange events and re-rendering.
*/
checked?: boolean;
/**
* Default checked state. Mutually exclusive to "checked". Use this if you want an uncontrolled component, and
* want the Checkbox instance to maintain its own state.
*/
defaultChecked?: boolean;
/**
* Label to display next to the checkbox.
*/
label?: string;
/**
* Disabled state of the checkbox.
*/
disabled?: boolean;
/**
* Callback that is called when the checked value has changed.
*/
onChange?: (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, checked?: boolean) => void;
/**
* Optional input props that will be mixed into the input element, *before* other props are applied. This allows
* you to extend the input element with additional attributes, such as data-automation-id needed for automation.
* Note that if you provide, for example, "disabled" as well as "inputProps.disabled", the former will take
* precedence over the later.
*/
inputProps?: React.ButtonHTMLAttributes<HTMLElement | HTMLButtonElement>;
/**
* Allows you to set the checkbox to be at the before (start) or after (end) the label.
* @defaultvalue 'start'
*/
boxSide?: 'start' | 'end';
/**
* Theme provided by HOC.
*/
theme?: ITheme;
/**
* Accessible label for the checkbox.
*/
ariaLabel?: string;
/**
* ID for element that contains label information for the checkbox.
*/
ariaLabelledBy?: string;
/**
* ID for element that provides extended information for the checkbox.
*/
ariaDescribedBy?: string;
/**
* The position in the parent set (if in a set) for aria-posinset.
*/
ariaPositionInSet?: number;
/**
* The total size of the parent set (if in a set) for aria-setsize.
*/
ariaSetSize?: number;
/**
* Call to provide customized styling that will layer on top of the variant rules.
*/
styles?: IStyleFunctionOrObject<ICheckboxStyleProps, ICheckboxStyles>;
/**
* Custom render function for the label.
*/
onRenderLabel?: IRenderFunction<ICheckboxProps>;
/**
* Custom icon props for the check mark rendered by the checkbox
*/
checkmarkIconProps?: IIconProps;
/**
* Optional keytip for this checkbox
*/
keytipProps?: IKeytipProps;
}
export interface ICheckboxStyleProps {
theme: ITheme;
className?: string;
disabled?: boolean;
checked?: boolean;
reversed?: boolean;
isUsingCustomLabelRender: boolean;
}
export interface ICheckboxStyles {
/**
* Style for the root element (a button) of the checkbox component in the default enabled/unchecked state.
*/
root?: IStyle;
/**
* INTERNAL: This is mostly an internal implementation detail which you should avoid styling.
* This refers to the <input type="checkbox"> element that is typically hidden and not rendered on screen.
*/
input?: IStyle;
/**
* Style for the label part (contains the customized checkbox + text) when enabled.
*/
label?: IStyle;
/**
* Style for checkbox in its default unchecked/enabled state.
*/
checkbox?: IStyle;
/**
* Style for the checkmark in the default enabled/unchecked state.
*/
checkmark?: IStyle;
/**
* Style for text appearing with the checkbox in its default enabled state.
*/
text?: IStyle;
}