yatra / resources / js / blocks / destination / edit.tsx

edit.tsx in Yatra – Travel Booking & Tour Operator Software 3.0.4, at resources/js/blocks/destination/edit.tsx

141 lines 4.1 KB

Raw Download Zip

1	import { InspectorControls } from "@wordpress/block-editor";
2	import {
3	PanelBody,
4	TextControl,
5	RangeControl,
6	SelectControl,
7	ToggleControl,
8	} from "@wordpress/components";
9	import { __ } from "@wordpress/i18n";
10	import { useEffect, useRef } from "@wordpress/element";
11	import ServerSideRender from "@wordpress/server-side-render";
12	import { ClassificationMultiSelect } from "../components/ClassificationMultiSelect";
13	import { migrateNumericCsvPairToIds } from "../utils/migrateTaxonomyIds";
14
15	interface DestinationBlockAttributes {
16	order: "asc" \| "desc";
17	columns: number;
18	per_page: number;
19	title: string;
20	show_pagination: boolean;
21	destinationIds: number[];
22	destination_ids?: string;
23	destination?: string;
24	}
25
26	interface EditProps {
27	attributes: DestinationBlockAttributes;
28	setAttributes: (attrs: Partial<DestinationBlockAttributes>) => void;
29	}
30
31	function normalizeIds(arr: number[] \| undefined): number[] {
32	return Array.isArray(arr)
33	? [...new Set(arr.map((n) => parseInt(String(n), 10)).filter((n) => n > 0))]
34	: [];
35	}
36
37	export default function Edit({ attributes, setAttributes }: EditProps) {
38	const migratedOnce = useRef(false);
39
40	useEffect(() => {
41	if (migratedOnce.current) {
42	return;
43	}
44	migratedOnce.current = true;
45
46	let ids = normalizeIds(attributes.destinationIds);
47	if (ids.length === 0) {
48	ids = migrateNumericCsvPairToIds(
49	attributes.destination_ids,
50	attributes.destination,
51	);
52	}
53	if (ids.length === 0) {
54	return;
55	}
56	setAttributes({
57	destinationIds: ids,
58	destination: "",
59	destination_ids: "",
60	});
61	// eslint-disable-next-line react-hooks/exhaustive-deps
62	}, [setAttributes]);
63
64	const destinationIds = normalizeIds(attributes.destinationIds);
65
66	return (
67	<>
68	<InspectorControls>
69	<PanelBody
70	title={__("Destination Settings", "yatra")}
71	initialOpen={true}
72	>
73	<TextControl
74	label={__("Title", "yatra")}
75	value={attributes.title}
76	onChange={(value: string) => setAttributes({ title: value })}
77	/>
78	<SelectControl
79	label={__("Order", "yatra")}
80	value={attributes.order}
81	options={[
82	{ label: __("Ascending", "yatra"), value: "asc" },
83	{ label: __("Descending", "yatra"), value: "desc" },
84	]}
85	onChange={(value: string) =>
86	setAttributes({ order: value as "asc" \| "desc" })
87	}
88	/>
89	<RangeControl
90	label={__("Number of Destinations", "yatra")}
91	value={attributes.per_page}
92	onChange={(value: number \| undefined) =>
93	setAttributes({
94	per_page: value !== undefined && value !== null ? value : 10,
95	})
96	}
97	min={1}
98	max={50}
99	/>
100	<RangeControl
101	label={__("Columns", "yatra")}
102	value={attributes.columns}
103	onChange={(value: number \| undefined) =>
104	setAttributes({
105	columns: value !== undefined && value !== null ? value : 3,
106	})
107	}
108	min={1}
109	max={6}
110	/>
111	<ToggleControl
112	label={__("Show pagination", "yatra")}
113	checked={attributes.show_pagination}
114	onChange={(value: boolean) =>
115	setAttributes({ show_pagination: value })
116	}
117	/>
118	<ClassificationMultiSelect
119	taxonomy="destination"
120	label={__("Destinations to show", "yatra")}
121	help={__(
122	"Pick \"All published\" for the full catalog; otherwise search and tick specific destinations.",
123	"yatra",
124	)}
125	value={destinationIds}
126	onChange={(ids) => setAttributes({ destinationIds: ids })}
127	/>
128	</PanelBody>
129	</InspectorControls>
130
131	<div className="yatra-block-editor-preview">
132	<ServerSideRender
133	block="yatra/destination"
134	attributes={attributes}
135	key={JSON.stringify(attributes)}
136	/>
137	</div>
138	</>
139	);
140	}
141