tableberg / components / editor / BorderRadiusControl.tsx

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

74 lines 1.8 KB

Raw Download Zip

1	/**
2	* WordPress Dependencies
3	*/
4	import { __ } from "@wordpress/i18n";
5	import {
6	useBlockEditContext,
7	__experimentalBorderRadiusControl as RadiusControl,
8	} from "@wordpress/block-editor";
9	import {
10	BaseControl,
11	__experimentalToolsPanelItem as ToolsPanelItem,
12	} from "@wordpress/components";
13
14	import "./border-radius-control-style.scss";
15
16	interface BorderRadiusControlPropTypes {
17	label: string;
18	value: any;
19	hasValue: () => boolean;
20	onChange: (newBorder: any) => any;
21	resetAllFilter?: () => any;
22	onDeselect: () => any;
23	isShownByDefault?: boolean;
24	}
25
26	function BorderRadiusControl({
27	label,
28	isShownByDefault = true,
29	value,
30	hasValue,
31	onChange = () => {},
32	resetAllFilter,
33	onDeselect = () => {},
34	}: BorderRadiusControlPropTypes) {
35	const { clientId } = useBlockEditContext();
36
37	if (!resetAllFilter) {
38	resetAllFilter = onDeselect;
39	}
40
41	const handleChange = (value: any) => {
42	if (typeof value === "string") {
43	onChange({
44	topLeft: value,
45	topRight: value,
46	bottomLeft: value,
47	bottomRight: value,
48	});
49	return;
50	}
51	onChange(value);
52	};
53
54	return (
55	<ToolsPanelItem
56	panelId={clientId}
57	isShownByDefault={isShownByDefault}
58	resetAllFilter={resetAllFilter}
59	hasValue={hasValue}
60	label={label}
61	onDeselect={onDeselect}
62	>
63	<div className="tableberg-border-radius-control">
64	<BaseControl.VisualLabel as="legend">
65	{label}
66	</BaseControl.VisualLabel>
67	<RadiusControl onChange={handleChange} values={value} />
68	</div>
69	</ToolsPanelItem>
70	);
71	}
72
73	export default BorderRadiusControl;
74