tableberg / components / editor / ColorControl.tsx

ColorControl.tsx in Tableberg – Simple Gutenberg Table Block 1.2.0, at components/editor/ColorControl.tsx

131 lines 3.9 KB

Raw Download Zip

1	/**
2	* WordPress Dependencies
3	*/
4	import { useSelect } from "@wordpress/data";
5	import { __ } from "@wordpress/i18n";
6	import {
7	useBlockEditContext,
8	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
9	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
10	store as blockEditorStore,
11	} from "@wordpress/block-editor";
12	import {
13	Color,
14	Gradient,
15	} from "@wordpress/components/build-types/palette-edit/types";
16	import { useRef } from "react";
17
18	import { useColorPalettes, PaletteOrigin } from "./useColorPalettes";
19
20	interface ColorSettingsProps {
21	label: string;
22	value: string \| undefined \| null;
23	gradientValue?: string \| null;
24	palette?: "theme" \| "default";
25	onChange: (newValue: string) => any;
26	onGradientChange?: (newValue: string) => any;
27	onDeselect: () => any;
28	resetAllFilter?: () => any;
29	allowGradient?: boolean;
30	}
31
32	function ColorSetting({
33	value: colorValue,
34	gradientValue,
35	label,
36	palette = "theme",
37	onChange: onColorChange,
38	onGradientChange,
39	onDeselect,
40	resetAllFilter,
41	allowGradient = false,
42	}: ColorSettingsProps) {
43	const { clientId } = useBlockEditContext();
44	const colorGradientSettings = useMultipleOriginColorsAndGradients();
45
46	const lastColor = useRef(colorValue);
47	const lastGradient = useRef(gradientValue);
48
49	const { defaultColors, themeColors, defaultGradients, themeGradients } =
50	useSelect(select => {
51	const colorSettings = (
52	select(blockEditorStore) as BlockEditorStoreSelectors
53	).getSettings()?.__experimentalFeatures?.color;
54	return {
55	defaultColors: colorSettings.palette.default,
56	themeColors: colorSettings.palette.theme,
57	defaultGradients: colorSettings.gradients.default,
58	themeGradients: colorSettings.gradients.theme,
59	};
60	}, []);
61
62	// Colours are offered as origin groups (Theme, Default, Custom) so this
63	// picker matches the border one. `palette` now only picks the gradient
64	// set, which still has no grouped UI.
65	const colorPalette = useColorPalettes();
66	const gradientPalette =
67	palette === "theme" ? themeGradients : defaultGradients;
68
69	if (!resetAllFilter) {
70	resetAllFilter = onDeselect;
71	}
72
73	interface Settings {
74	clearable?: boolean;
75	colorValue?: string \| null;
76	gradientValue?: string \| null;
77	// Either a flat palette or origin groups (Theme, Default, Custom).
78	colors?: Color[] \| PaletteOrigin[];
79	gradients?: Gradient[];
80	label: string;
81	onColorChange: (newValue: string) => any;
82	onGradientChange?: (newValue: string) => any;
83	resetAllFilter?: () => any;
84	onDeselect?: () => any;
85	}
86
87	let settings: Settings = {
88	clearable: true,
89	resetAllFilter: resetAllFilter,
90	colorValue: colorValue,
91	colors: colorPalette,
92	label: label,
93	onColorChange: val => {
94	if (lastColor.current !== val) {
95	lastColor.current = val;
96	onColorChange(val);
97	}
98	},
99	onDeselect: onDeselect,
100	};
101
102	if (allowGradient) {
103	settings = {
104	...settings,
105	gradientValue: gradientValue,
106	gradients: gradientPalette,
107	onGradientChange: val => {
108	if (onGradientChange && lastGradient.current !== val) {
109	lastGradient.current = val;
110	onGradientChange(val);
111	}
112	},
113	};
114	}
115
116	return (
117	<ColorGradientSettingsDropdown
118	{...colorGradientSettings}
119	enableAlpha
120	panelId={clientId}
121	title={__("Color Settings", "tableberg")}
122	popoverProps={{
123	placement: "left start",
124	}}
125	settings={[settings]}
126	/>
127	);
128	}
129
130	export default ColorSetting;
131