tableberg / components / editor / BorderControl.tsx

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

154 lines 3.8 KB

Raw Download Zip

1	/**
2	* WordPress Dependencies
3	*/
4	import { __ } from "@wordpress/i18n";
5	import {
6	useBlockEditContext,
7	store as BlockEditorStore,
8	} from "@wordpress/block-editor";
9	import { useSelect } from "@wordpress/data";
10	import {
11	__experimentalToolsPanelItem as ToolsPanelItem,
12	BorderBoxControl,
13	} from "@wordpress/components";
14	import { Border as CSSBorder } from "@wordpress/components/build-types/border-control/types";
15	import {
16	AnyBorder,
17	Borders as CSSBorders,
18	} from "@wordpress/components/build-types/border-box-control/types";
19
20	type Borders = {
21	top: string;
22	right: string;
23	bottom: string;
24	left: string;
25	};
26
27	interface BorderControlPropTypes {
28	label: string;
29	value: Borders;
30	hasValue: () => boolean;
31	onChange: (newBorder: Borders) => any;
32	resetAllFilter?: () => any;
33	onDeselect: () => any;
34	isShownByDefault?: boolean;
35	}
36
37	function getBorderStringFromObject(border?: CSSBorder) {
38	if (!border) {
39	return "";
40	}
41
42	if (!border.width) {
43	border.width = "0";
44	}
45	if (!border.style) {
46	border.style = "solid";
47	}
48	if (!border.color) {
49	border.color = "black";
50	}
51
52	return `${border?.width} ${border?.style} ${border?.color}`;
53	}
54
55	function mutateOutgoingBorderValues(border: AnyBorder) {
56	const newBorder: Borders = {
57	top: "",
58	right: "",
59	bottom: "",
60	left: "",
61	};
62
63	if (!border) {
64	return newBorder;
65	}
66
67	const sides = ["top", "right", "bottom", "left"];
68
69	if ("top" in border) {
70	for (const side of sides) {
71	const key = side as keyof CSSBorders;
72	const val = border[key];
73	newBorder[key] = getBorderStringFromObject(val);
74	}
75	} else {
76	const singleBorder = border as CSSBorder;
77
78	for (const side of sides) {
79	const key = side as keyof CSSBorders;
80	newBorder[key] = getBorderStringFromObject(singleBorder);
81	}
82	}
83
84	return newBorder;
85	}
86
87	function mutateIncomingBorderValues(border: Borders): CSSBorders {
88	const newBorder: CSSBorders = {};
89	const sides = ["top", "right", "bottom", "left"] as const;
90
91	for (const side of sides) {
92	const borderString = border[side];
93	if (borderString && borderString.trim()) {
94	const parts = borderString.trim().split(/\s+/);
95
96	newBorder[side] = {
97	width: parts[0] \|\| undefined,
98	style: parts[1] \|\| undefined,
99	color: parts[2] \|\| undefined,
100	} as CSSBorder;
101	}
102	}
103
104	return newBorder;
105	}
106
107	function BorderControl({
108	label,
109	isShownByDefault = true,
110	value,
111	hasValue,
112	onChange,
113	resetAllFilter,
114	onDeselect = () => {},
115	}: BorderControlPropTypes) {
116	const { clientId } = useBlockEditContext();
117
118	const { defaultColors } = useSelect(select => {
119	return {
120	defaultColors: (
121	select(BlockEditorStore) as BlockEditorStoreSelectors
122	).getSettings()?.__experimentalFeatures?.color?.palette?.default,
123	};
124	}, []);
125
126	if (!resetAllFilter) {
127	resetAllFilter = onDeselect;
128	}
129
130	return (
131	<ToolsPanelItem
132	panelId={clientId}
133	isShownByDefault={isShownByDefault}
134	resetAllFilter={resetAllFilter}
135	hasValue={hasValue}
136	label={label}
137	onDeselect={onDeselect}
138	>
139	<BorderBoxControl
140	enableAlpha
141	size={"__unstable-large"}
142	colors={defaultColors}
143	label={label}
144	onChange={newBorders => {
145	return onChange(mutateOutgoingBorderValues(newBorders));
146	}}
147	value={mutateIncomingBorderValues(value)}
148	/>
149	</ToolsPanelItem>
150	);
151	}
152
153	export default BorderControl;
154