-
Notifications
You must be signed in to change notification settings - Fork 4k
/
types.ts
122 lines (118 loc) · 3.24 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
116
117
118
119
120
121
122
/**
* Internal dependencies
*/
import type { HeadingSize } from '../heading/types';
export type GradientObject = {
gradient: string;
name: string;
slug: string;
};
export type OriginObject = { name: string; gradients: GradientObject[] };
export type GradientsProp = GradientObject[] | OriginObject[];
type GradientPickerBaseProps = {
/**
* The class name added to the wrapper.
*/
className?: string;
/**
* The function called when a new gradient has been defined. It is passed to
* the `currentGradient` as an argument.
*/
onChange: ( currentGradient: string | undefined ) => void;
/**
* The current value of the gradient. Pass a css gradient string (See default value for example).
* Optionally pass in a `null` value to specify no gradient is currently selected.
*
* @default 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'
*/
value?: GradientObject[ 'gradient' ] | null;
/**
* Whether the palette should have a clearing button or not.
*
* @default true
*/
clearable?: boolean;
/**
* The heading level. Only applies in cases where gradients are provided
* from multiple origins (ie. when the array passed as the `gradients` prop
* contains two or more items).
*
* @default 2
*/
headingLevel?: HeadingSize;
/**
* Whether the control should present as a set of buttons,
* each with its own tab stop.
*
* @default false
*/
asButtons?: boolean;
/**
* Prevents keyboard interaction from wrapping around.
* Only used when `asButtons` is not true.
*
* @default true
*/
loop?: boolean;
} & (
| {
/**
* A label to identify the purpose of the control.
*
* @todo [#54055] Either this or `aria-labelledby` should be required
*/
'aria-label'?: string;
'aria-labelledby'?: never;
}
| {
/**
* An ID of an element to provide a label for the control.
*
* @todo [#54055] Either this or `aria-label` should be required
*/
'aria-labelledby'?: string;
'aria-label'?: never;
}
);
export type GradientPickerComponentProps = GradientPickerBaseProps & {
/**
* An array of objects as predefined gradients displayed above the gradient
* selector. Alternatively, if there are multiple sets (or 'origins') of
* gradients, you can pass an array of objects each with a `name` and a
* `gradients` array which will in turn contain the predefined gradient objects.
*
* @default []
*/
gradients?: GradientsProp;
/**
* Start opting in to the new margin-free styles that will become the default
* in a future version, currently scheduled to be WordPress 6.4. (The prop
* can be safely removed once this happens.)
*
* @default false
*/
__nextHasNoMargin?: boolean;
/**
* If true, the gradient picker will not be displayed and only defined
* gradients from `gradients` will be shown.
*
* @default false
*/
disableCustomGradients?: boolean;
/**
* Whether this is rendered in the sidebar.
*
* @default false
*/
__experimentalIsRenderedInSidebar?: boolean;
};
export type PickerProps< TOriginType extends GradientObject | OriginObject > =
GradientPickerBaseProps & {
clearGradient: () => void;
onChange: (
currentGradient: string | undefined,
index: number
) => void;
actions?: React.ReactNode;
gradients: TOriginType[];
};