code-snippets / js / components / ImportMenu / UploadForm / SelectFiles / DuplicateActionSelector.tsx

DuplicateActionSelector.tsx in Code Snippets 3.10.2, at js/components/ImportMenu/UploadForm/SelectFiles/DuplicateActionSelector.tsx

45 lines 1.6 KB

Raw Download Zip

1	import React from 'react'
2	import { __ } from '@wordpress/i18n'
3	import { ImportCard } from '../../common/ImportCard'
4
5	export const ACTIONS = ['ignore', 'replace', 'skip'] as const
6
7	export type DuplicateAction = typeof ACTIONS[number]
8
9	const ACTION_LABELS: Record<DuplicateAction, string> = {
10	ignore: __('Ignore any duplicate snippets: import all snippets from the file regardless and leave all existing snippets unchanged.', 'code-snippets'),
11	replace: __('Replace any existing snippets with a newly imported snippet of the same name.', 'code-snippets'),
12	skip: __('Do not import any duplicate snippets; leave all existing snippets unchanged.', 'code-snippets')
13	}
14
15	export interface DuplicateActionSelectorProps {
16	value: DuplicateAction
17	onChange: (action: DuplicateAction) => void
18	}
19
20	export const DuplicateActionSelector: React.FC<DuplicateActionSelectorProps> = ({ value, onChange }) =>
21	<ImportCard className="duplicate-action-selector-card">
22	<h2>{__('Duplicate snippets', 'code-snippets')}</h2>
23
24	<p className="description">
25	{__('What should happen if an existing snippet is found with an identical name to an imported snippet?', 'code-snippets')}
26	</p>
27
28	<fieldset>
29	<div>
30	{ACTIONS.map(action =>
31	<label key={action}>
32	<input
33	type="radio"
34	name="duplicate_action"
35	value={action}
36	checked={action === value}
37	onChange={() => onChange(action)}
38	aria-labelledby={`duplicate-action-${action}-label`}
39	/>
40	<span id={`duplicate-action-${action}-label`}>{ACTION_LABELS[action]}</span>
41	</label>)}
42	</div>
43	</fieldset>
44	</ImportCard>
45