yatra / resources / js / blocks / trip-category / edit.tsx

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

194 lines 5.8 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	export interface TripCategoryBlockAttributes {
16	order: "asc" \| "desc";
17	columns: number;
18	per_page: number;
19	title: string;
20	show_pagination: boolean;
21	categoryIds: number[];
22	category?: string;
23	category_ids?: string;
24	show_trip_count: boolean;
25	show_description: boolean;
26	show_image: boolean;
27	hide_empty: boolean;
28	featured_only: boolean;
29	}
30
31	interface EditProps {
32	attributes: TripCategoryBlockAttributes;
33	setAttributes: (attrs: Partial<TripCategoryBlockAttributes>) => void;
34	}
35
36	function normalizeIds(arr: number[] \| undefined): number[] {
37	return Array.isArray(arr)
38	? [...new Set(arr.map((n) => parseInt(String(n), 10)).filter((n) => n > 0))]
39	: [];
40	}
41
42	export default function Edit({ attributes, setAttributes }: EditProps) {
43	const migratedOnce = useRef(false);
44
45	useEffect(() => {
46	if (migratedOnce.current) {
47	return;
48	}
49	migratedOnce.current = true;
50
51	let ids = normalizeIds(attributes.categoryIds);
52	if (ids.length === 0) {
53	ids = migrateNumericCsvPairToIds(attributes.category_ids, attributes.category);
54	}
55	if (ids.length === 0) {
56	return;
57	}
58	setAttributes({
59	categoryIds: ids,
60	category: "",
61	category_ids: "",
62	});
63	// eslint-disable-next-line react-hooks/exhaustive-deps
64	}, [setAttributes]);
65
66	const {
67	order,
68	columns,
69	per_page,
70	title,
71	show_pagination,
72	show_trip_count,
73	show_description,
74	show_image,
75	hide_empty,
76	featured_only,
77	} = attributes;
78
79	const categoryIds = normalizeIds(attributes.categoryIds);
80
81	return (
82	<>
83	<InspectorControls>
84	<PanelBody
85	title={__("Trip category settings", "yatra")}
86	initialOpen={true}
87	>
88	<TextControl
89	label={__("Title", "yatra")}
90	value={title}
91	onChange={(value: string) => setAttributes({ title: value })}
92	/>
93	<ClassificationMultiSelect
94	taxonomy="trip_category"
95	label={__("Trip categories to show", "yatra")}
96	help={__(
97	"All published lists every category; narrow with search and checkboxes. Yatra trip types only.",
98	"yatra",
99	)}
100	value={categoryIds}
101	onChange={(ids) => setAttributes({ categoryIds: ids })}
102	/>
103	<SelectControl
104	label={__("Order", "yatra")}
105	value={order}
106	options={[
107	{ label: __("Ascending", "yatra"), value: "asc" },
108	{ label: __("Descending", "yatra"), value: "desc" },
109	]}
110	onChange={(value: string) =>
111	setAttributes({ order: value as "asc" \| "desc" })
112	}
113	/>
114	<RangeControl
115	label={__("Number of categories", "yatra")}
116	value={per_page}
117	onChange={(value: number \| undefined) =>
118	setAttributes({
119	per_page: value !== undefined && value !== null ? value : 10,
120	})
121	}
122	min={1}
123	max={50}
124	/>
125	<RangeControl
126	label={__("Columns", "yatra")}
127	value={columns}
128	onChange={(value: number \| undefined) =>
129	setAttributes({
130	columns: value !== undefined && value !== null ? value : 3,
131	})
132	}
133	min={1}
134	max={6}
135	/>
136	<ToggleControl
137	label={__("Show pagination", "yatra")}
138	checked={show_pagination}
139	onChange={(value: boolean) =>
140	setAttributes({ show_pagination: value })
141	}
142	/>
143	</PanelBody>
144
145	<PanelBody title={__("Display options", "yatra")} initialOpen={false}>
146	<ToggleControl
147	label={__("Show trip count", "yatra")}
148	checked={show_trip_count}
149	onChange={(value: boolean) =>
150	setAttributes({ show_trip_count: value })
151	}
152	/>
153	<ToggleControl
154	label={__("Show description", "yatra")}
155	checked={show_description}
156	onChange={(value: boolean) =>
157	setAttributes({ show_description: value })
158	}
159	/>
160	<ToggleControl
161	label={__("Show image", "yatra")}
162	checked={show_image}
163	onChange={(value: boolean) => setAttributes({ show_image: value })}
164	/>
165	<ToggleControl
166	label={__("Hide empty categories", "yatra")}
167	checked={hide_empty}
168	onChange={(value: boolean) => setAttributes({ hide_empty: value })}
169	/>
170	<ToggleControl
171	label={__("Featured only (filter list)", "yatra")}
172	help={__(
173	"When on, only categories with “Featured category” enabled in Yatra → Trips → Categories are listed. The red “Featured” badge on each card is controlled per category there—not by this toggle.",
174	"yatra",
175	)}
176	checked={featured_only}
177	onChange={(value: boolean) =>
178	setAttributes({ featured_only: value })
179	}
180	/>
181	</PanelBody>
182	</InspectorControls>
183
184	<div className="yatra-block-editor-preview">
185	<ServerSideRender
186	block="yatra/trip-category"
187	attributes={attributes}
188	key={JSON.stringify(attributes)}
189	/>
190	</div>
191	</>
192	);
193	}
194