/
types.ts
91 lines (83 loc) · 1.92 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
/**
* External dependencies
*/
import type { CSSProperties, ReactNode } from 'react';
/**
* Internal dependencies
*/
import type { DropdownProps } from '../dropdown/types';
import type { HeadingSize } from '../heading/types';
export type ColorObject = {
name: string;
color: NonNullable< CSSProperties[ 'color' ] >;
};
export type PaletteObject = {
name: string;
colors: ColorObject[];
};
type PaletteProps = {
className?: string;
clearColor: () => void;
/**
* Callback called when a color is selected.
*/
onChange: ( newColor?: string, index?: number ) => void;
value?: string;
actions?: ReactNode;
headingLevel?: HeadingSize;
};
export type SinglePaletteProps = PaletteProps & {
colors: ColorObject[];
};
export type MultiplePalettesProps = PaletteProps & {
colors: PaletteObject[];
};
export type CustomColorPickerDropdownProps = DropdownProps & {
isRenderedInSidebar: boolean;
};
export type ColorPaletteProps = Pick< PaletteProps, 'onChange' > & {
/**
* Whether the palette should have a clearing button.
*
* @default true
*/
clearable?: boolean;
/**
* Array with the colors to be shown. When displaying multiple color palettes
* to choose from, the format of the array changes from an array of colors
* objects, to an array of color palettes.
*
* @default []
*/
colors?: PaletteObject[] | ColorObject[];
/**
* Whether to allow the user to pick a custom color on top of the predefined
* choices (defined via the `colors` prop).
*
* @default false
*/
disableCustomColors?: boolean;
/**
* This controls whether the alpha channel will be offered when selecting
* custom colors.
*
* @default false
*/
enableAlpha?: boolean;
/**
* The heading level.
*
* @default 2
*/
headingLevel?: HeadingSize;
/**
* Currently active value.
*/
value?: string;
/**
* Whether this is rendered in the sidebar.
*
* @default false
*/
__experimentalIsRenderedInSidebar?: boolean;
};