-
Notifications
You must be signed in to change notification settings - Fork 4k
/
types.ts
137 lines (124 loc) · 2.99 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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
/**
* External dependencies
*/
import type { Key, MouseEventHandler } from 'react';
/**
* Internal dependencies
*/
import type Popover from '../popover';
import type { HeadingSize } from '../heading/types';
export type Color = {
color: string;
name: string;
slug: string;
gradient?: never;
};
export type Gradient = {
gradient: string;
name: string;
slug: string;
color?: never;
};
export type PaletteElement = Color | Gradient;
export type BasePaletteEdit = {
/**
* Whether the user can only change the color or gradient values.
* If true, they cannot change names or delete values.
*
* @default false
*/
canOnlyChangeValues?: boolean;
/**
* Whether the user can reset the editor.
*
* @default false
*/
canReset?: boolean;
/**
* A message to show if there's nothing to edit.
*/
emptyMessage?: string;
/**
* A heading label for the palette.
*/
paletteLabel: string;
/**
* The label's heading level.
*
* @default 2
*/
paletteLabelHeadingLevel?: HeadingSize;
/**
* The prefix for the element slug.
*
* @default ''
*/
slugPrefix?: string;
/**
* Props to pass through to the underlying Popover component.
*/
popoverProps?: Omit<
React.ComponentPropsWithoutRef< typeof Popover >,
'children'
>;
};
type PaletteEditColors = {
/**
* The colors in the palette.
*/
colors?: Color[];
/**
* Runs on changing the value.
*/
onChange: ( values?: Color[] ) => void;
gradients?: never;
};
type PaletteEditGradients = {
/**
* The gradients in the palette.
*/
gradients: Gradient[];
/**
* Runs on changing the value.
*/
onChange: ( values?: Gradient[] ) => void;
colors?: never;
};
export type PaletteEditProps = BasePaletteEdit &
( PaletteEditColors | PaletteEditGradients );
type EditingElement = number | null;
export type ColorPickerPopoverProps< T extends Color | Gradient > = {
element: T;
onChange: ( newElement: T ) => void;
isGradient?: T extends Gradient ? true : false;
onClose?: () => void;
popoverProps?: PaletteEditProps[ 'popoverProps' ];
};
export type NameInputProps = {
label: string;
onChange: ( nextName?: PaletteElement[ 'name' ] ) => void;
value: PaletteElement[ 'name' ];
};
export type OptionProps< T extends Color | Gradient > = {
element: T;
onChange: ( newElement: T ) => void;
isGradient: T extends Gradient ? true : false;
canOnlyChangeValues: PaletteEditProps[ 'canOnlyChangeValues' ];
isEditing: boolean;
key: Key;
onRemove: MouseEventHandler< HTMLButtonElement >;
onStartEditing: () => void;
onStopEditing: () => void;
popoverProps?: PaletteEditProps[ 'popoverProps' ];
slugPrefix: string;
};
export type PaletteEditListViewProps< T extends Color | Gradient > = {
elements: T[];
onChange: ( newElements?: T[] ) => void;
isGradient: T extends Gradient ? true : false;
canOnlyChangeValues: PaletteEditProps[ 'canOnlyChangeValues' ];
editingElement?: EditingElement;
popoverProps?: PaletteEditProps[ 'popoverProps' ];
setEditingElement: ( newEditingElement?: EditingElement ) => void;
slugPrefix: string;
};