tableberg / components / editor / ColorControl.tsx

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

125 lines 3.6 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	interface ColorSettingsProps {
19	label: string;
20	value: string \| undefined \| null;
21	gradientValue?: string \| null;
22	palette?: "theme" \| "default";
23	onChange: (newValue: string) => any;
24	onGradientChange?: (newValue: string) => any;
25	onDeselect: () => any;
26	resetAllFilter?: () => any;
27	allowGradient?: boolean;
28	}
29
30	function ColorSetting({
31	value: colorValue,
32	gradientValue,
33	label,
34	palette = "theme",
35	onChange: onColorChange,
36	onGradientChange,
37	onDeselect,
38	resetAllFilter,
39	allowGradient = false,
40	}: ColorSettingsProps) {
41	const { clientId } = useBlockEditContext();
42	const colorGradientSettings = useMultipleOriginColorsAndGradients();
43
44	const lastColor = useRef(colorValue);
45	const lastGradient = useRef(gradientValue);
46
47	const { defaultColors, themeColors, defaultGradients, themeGradients } =
48	useSelect(select => {
49	const colorSettings = (
50	select(blockEditorStore) as BlockEditorStoreSelectors
51	).getSettings()?.__experimentalFeatures?.color;
52	return {
53	defaultColors: colorSettings.palette.default,
54	themeColors: colorSettings.palette.theme,
55	defaultGradients: colorSettings.gradients.default,
56	themeGradients: colorSettings.gradients.theme,
57	};
58	}, []);
59
60	const colorPalette = palette === "theme" ? themeColors : defaultColors;
61	const gradientPalette =
62	palette === "theme" ? themeGradients : defaultGradients;
63
64	if (!resetAllFilter) {
65	resetAllFilter = onDeselect;
66	}
67
68	interface Settings {
69	clearable?: boolean;
70	colorValue?: string \| null;
71	gradientValue?: string \| null;
72	colors?: Color[];
73	gradients?: Gradient[];
74	label: string;
75	onColorChange: (newValue: string) => any;
76	onGradientChange?: (newValue: string) => any;
77	resetAllFilter?: () => any;
78	onDeselect?: () => any;
79	}
80
81	let settings: Settings = {
82	clearable: true,
83	resetAllFilter: resetAllFilter,
84	colorValue: colorValue,
85	colors: colorPalette,
86	label: label,
87	onColorChange: val => {
88	if (lastColor.current !== val) {
89	lastColor.current = val;
90	onColorChange(val);
91	}
92	},
93	onDeselect: onDeselect,
94	};
95
96	if (allowGradient) {
97	settings = {
98	...settings,
99	gradientValue: gradientValue,
100	gradients: gradientPalette,
101	onGradientChange: val => {
102	if (onGradientChange && lastGradient.current !== val) {
103	lastGradient.current = val;
104	onGradientChange(val);
105	}
106	},
107	};
108	}
109
110	return (
111	<ColorGradientSettingsDropdown
112	{...colorGradientSettings}
113	enableAlpha
114	panelId={clientId}
115	title={__("Color Settings", "tableberg")}
116	popoverProps={{
117	placement: "left start",
118	}}
119	settings={[settings]}
120	/>
121	);
122	}
123
124	export default ColorSetting;
125