extendify / src / Draft / components / TranslationDropdown.jsx

TranslationDropdown.jsx in Extendify 3.1.5, at src/Draft/components/TranslationDropdown.jsx

287 lines 6.3 KB

Raw Download Zip

1	import { magic } from '@draft/svg';
2	import { Dropdown, MenuGroup, MenuItem } from '@wordpress/components';
3	import { __, isRTL } from '@wordpress/i18n';
4	import { chevronLeft, chevronRight, Icon, language } from '@wordpress/icons';
5
6	export const DropdownTranslate = ({
7	text,
8	closePopup,
9	openDraft,
10	updatePrompt,
11	}) => {
12	const items = [
13	{
14	language: __('Arabic', 'extendify-local'),
15	code: 'ar',
16	languageName: 'Arabic',
17	},
18	{
19	language: __('Arabic (Morocco)', 'extendify-local'),
20	code: 'ary',
21	languageName: 'Arabic (Morocco)',
22	},
23	{
24	language: __('Bulgarian', 'extendify-local'),
25	code: 'bg_BG',
26	languageName: 'Bulgarian',
27	},
28	{
29	language: __('Catalan', 'extendify-local'),
30	code: 'ca',
31	languageName: 'Catalan',
32	},
33	{
34	language: __('Czech', 'extendify-local'),
35	code: 'cs_CZ',
36	languageName: 'Czech',
37	},
38	{
39	language: __('Danish', 'extendify-local'),
40	code: 'da_DK',
41	languageName: 'Danish',
42	},
43	{
44	language: __('Dutch', 'extendify-local'),
45	code: 'nl_NL',
46	languageName: 'Dutch',
47	},
48	{
49	language: __('Dutch (Belgium)', 'extendify-local'),
50	code: 'de_BE',
51	languageName: 'Dutch (Belgium)',
52	},
53	{
54	language: __('English', 'extendify-local'),
55	code: 'en',
56	languageName: 'English',
57	},
58	{
59	language: __('English (UK)', 'extendify-local'),
60	code: 'en_GB',
61	languageName: 'English (UK)',
62	},
63	{
64	language: __('Estonian', 'extendify-local'),
65	code: 'et',
66	languageName: 'Estonian',
67	},
68	{
69	language: __('Finnish', 'extendify-local'),
70	code: 'fi',
71	languageName: 'Finnish',
72	},
73	{
74	language: __('French (Belgium)', 'extendify-local'),
75	code: 'fr_BE',
76	languageName: 'French (Belgium)',
77	},
78	{
79	language: __('French (Canada)', 'extendify-local'),
80	code: 'fr_CA',
81	languageName: 'French (Canada)',
82	},
83	{
84	language: __('French (France)', 'extendify-local'),
85	code: 'fr_FR',
86	languageName: 'French (France)',
87	},
88	{
89	language: __('German', 'extendify-local'),
90	code: 'de_DE',
91	languageName: 'German',
92	},
93	{
94	language: __('German (Switzerland)', 'extendify-local'),
95	code: 'de_CH',
96	languageName: 'German (Switzerland)',
97	},
98	{
99	language: __('Greek', 'extendify-local'),
100	code: 'el',
101	languageName: 'Greek',
102	},
103	{
104	language: __('Hebrew', 'extendify-local'),
105	code: 'he_IL',
106	languageName: 'Hebrew',
107	},
108	{
109	language: __('Hindi', 'extendify-local'),
110	code: 'hi_IN',
111	languageName: 'Hindi',
112	},
113	{
114	language: __('Hungarian', 'extendify-local'),
115	code: 'hu_HU',
116	languageName: 'Hungarian',
117	},
118	{
119	language: __('Indonesian', 'extendify-local'),
120	code: 'id_ID',
121	languageName: 'Indonesian',
122	},
123	{
124	language: __('Italian', 'extendify-local'),
125	code: 'it_IT',
126	languageName: 'Italian',
127	},
128	{
129	language: __('Japanese', 'extendify-local'),
130	code: 'jp',
131	languageName: 'Japanese',
132	},
133	{
134	language: __('Lithuanian', 'extendify-local'),
135	code: 'lt_LT',
136	languageName: 'Lithuanian',
137	},
138	{
139	language: __('Latvian', 'extendify-local'),
140	code: 'lv',
141	languageName: 'Latvian',
142	},
143	{
144	language: __('Norwegian', 'extendify-local'),
145	code: 'nb_NO',
146	languageName: 'Norwegian',
147	},
148	{
149	language: __('Polish', 'extendify-local'),
150	code: 'pl_PL',
151	languageName: 'Polish',
152	},
153	{
154	language: __('Portuguese (Brazil)', 'extendify-local'),
155	code: 'pt_BR',
156	languageName: 'Portuguese (Brazil)',
157	},
158	{
159	language: __('Portuguese (Portugal)', 'extendify-local'),
160	code: 'pt_PT',
161	languageName: 'Portuguese (Portugal)',
162	},
163	{
164	language: __('Romanian', 'extendify-local'),
165	code: 'ro_RO',
166	languageName: 'Romanian',
167	},
168	{
169	language: __('Russian', 'extendify-local'),
170	code: 'ru_RU',
171	languageName: 'Russian',
172	},
173	{
174	language: __('Slovak', 'extendify-local'),
175	code: 'sk_SK',
176	languageName: 'Slovak',
177	},
178	{
179	language: __('Spanish (Spain)', 'extendify-local'),
180	code: 'es_ES',
181	languageName: 'Spanish (Spain)',
182	},
183	{
184	language: __('Spanish (Colombia)', 'extendify-local'),
185	code: 'es_CO',
186	languageName: 'Spanish (Colombia)',
187	},
188	{
189	language: __('Spanish (Mexico)', 'extendify-local'),
190	code: 'es_MX',
191	languageName: 'Spanish (Mexico)',
192	},
193	{
194	language: __('Swedish', 'extendify-local'),
195	code: 'sv_SE',
196	languageName: 'Swedish',
197	},
198	{
199	language: __('Turkish', 'extendify-local'),
200	code: 'tr_TR',
201	languageName: 'Turkish',
202	},
203	{
204	language: __('Ukrainian', 'extendify-local'),
205	code: 'uk',
206	languageName: 'Ukrainian',
207	},
208	{
209	language: __('Vietnamese', 'extendify-local'),
210	code: 'vi',
211	languageName: 'Vietnamese',
212	},
213	];
214
215	return (
216	<Dropdown
217	className="my-container-class-name flex w-full items-center justify-between"
218	contentClassName="my-dropdown-content-classname"
219	popoverProps={{ placement: 'right-start' }}
220	renderToggle={({ isOpen, onToggle }) => (
221	<div className="group flex w-full items-center justify-between hover:text-design-main">
222	<MenuItem
223	className="flex w-full justify-between"
224	icon={language}
225	iconPosition={isRTL() ? 'left' : 'right'}
226	variant={undefined}
227	onClick={onToggle}
228	aria-expanded={isOpen}
229	>
230	{__('Translate', 'extendify-local')}
231	</MenuItem>
232	<Icon
233	icon={isRTL() ? chevronLeft : chevronRight}
234	size={24}
235	className="fill-current group-hover:text-current"
236	/>
237	</div>
238	)}
239	renderContent={() => (
240	<MenuGroup
241	className="extendify-draft"
242	label={
243	<div className="flex items-center gap-2">
244	<Icon className="fill-gray-900" size={16} icon={magic} />
245	{__('Translate to...', 'extendify-local')}
246	</div>
247	}
248	>
249	{items.map(
250	({
251	language,
252	code,
253	languageName,
254	promptType = 'translate',
255	systemMessageKey = 'edit',
256	}) => (
257	<MenuItem
258	key={`${promptType}-${code}-${systemMessageKey}`}
259	style={{ width: '100%' }}
260	isSelected={false}
261	disabled={false}
262	variant={undefined}
263	onClick={() => {
264	openDraft?.();
265	closePopup?.();
266	window.requestAnimationFrame(() =>
267	window.requestAnimationFrame(() =>
268	updatePrompt({
269	text,
270	promptType,
271	systemMessageKey,
272	details: { languageInto: languageName },
273	}),
274	),
275	);
276	}}
277	>
278	{language}
279	</MenuItem>
280	),
281	)}
282	</MenuGroup>
283	)}
284	/>
285	);
286	};
287