-
Notifications
You must be signed in to change notification settings - Fork 4k
/
types.ts
115 lines (109 loc) · 2.62 KB
/
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
/**
* External dependencies
*/
import type { CSSProperties, SyntheticEvent } from 'react';
/**
* Internal dependencies
*/
import type { StateReducer } from '../input-control/reducer/state';
import type {
InputChangeCallback,
Size as InputSize,
} from '../input-control/types';
export type SelectSize = InputSize;
export type WPUnitControlUnit = {
/**
* The value for the unit, used in a CSS value (e.g `px`).
*/
value: string;
/**
* The label used in a dropdown selector for the unit.
*/
label: string;
/**
* Default value (quantity) for the unit, used when switching units.
*/
default?: number;
/**
* An accessible label used by screen readers.
*/
a11yLabel?: string;
/**
* A step value used when incrementing/decrementing the value.
*/
step?: number;
};
export type UnitControlOnChangeCallback = InputChangeCallback<
SyntheticEvent< HTMLSelectElement | HTMLInputElement >,
{ data?: WPUnitControlUnit }
>;
export type UnitSelectControlProps = {
/**
* Whether the control can be focused via keyboard navigation.
*
* @default true
*/
isUnitSelectTabbable?: boolean;
/**
* A callback function invoked when the value is changed.
*
* @default noop
*/
onChange?: UnitControlOnChangeCallback;
/**
* Size of the control option. Supports "default" and "small".
*
* @default 'default'
*/
size?: SelectSize;
/**
* Current unit.
*/
unit?: string;
/**
* Available units to select from.
*
* @default CSS_UNITS
*/
units?: WPUnitControlUnit[];
};
// TODO: when available, should (partially) extend `NumberControl` props.
export type UnitControlProps = UnitSelectControlProps & {
__unstableStateReducer?: StateReducer;
__unstableInputWidth?: CSSProperties[ 'width' ];
/**
* If `true`, the unit `<select>` is hidden.
*
* @default false
*/
disableUnits?: boolean;
/**
* If `true`, the `ENTER` key press is required in order to trigger an `onChange`.
* If enabled, a change is also triggered when tabbing away (`onBlur`).
*
* @default false
*/
isPressEnterToChange?: boolean;
/**
* If `true`, and the selected unit provides a `default` value, this value is set
* when changing units.
*
* @default false
*/
isResetValueOnUnitChange?: boolean;
/**
* If this property is added, a label will be generated using label property as the content.
*/
label?: string;
/**
* Callback when the `unit` changes.
*
* @default noop
*/
onUnitChange?: UnitControlOnChangeCallback;
/**
* Current value. If passed as a string, the current unit will be inferred from this value.
* For example, a `value` of "50%" will set the current unit to `%`.
*/
value?: string | number;
};