| 1 |
import React, { useId } from 'react' |
| 2 |
import { __, sprintf } from '@wordpress/i18n' |
| 3 |
import { ImportCard } from '../common/ImportCard' |
| 4 |
import type { Importer } from './WithMigrationData' |
| 5 |
|
| 6 |
export interface ImporterSelectorProps { |
| 7 |
value: string |
| 8 |
onChange: (newValue: string) => void |
| 9 |
isLoading: boolean |
| 10 |
options: Importer[] |
| 11 |
} |
| 12 |
|
| 13 |
export const ImporterSelector: React.FC<ImporterSelectorProps> = ({ value, onChange, options, isLoading }) => { |
| 14 |
const importerId = useId() |
| 15 |
|
| 16 |
return ( |
| 17 |
<ImportCard variant="controls" className="importer-selector-card"> |
| 18 |
<h2 id="importer-select-heading">{__('Select plugin', 'code-snippets')}</h2> |
| 19 |
<label htmlFor={importerId} className="screen-reader-text"> |
| 20 |
{__('Select plugin to migrate from', 'code-snippets')} |
| 21 |
</label> |
| 22 |
|
| 23 |
<select |
| 24 |
aria-labelledby="importer-select-heading" |
| 25 |
id={importerId} |
| 26 |
value={value} |
| 27 |
onChange={event => onChange(event.target.value)} |
| 28 |
className="regular-text" |
| 29 |
disabled={isLoading} |
| 30 |
> |
| 31 |
<option value="">{__('-- Select an importer --', 'code-snippets')}</option> |
| 32 |
{options.map(importer => |
| 33 |
<option |
| 34 |
key={importer.name} |
| 35 |
value={importer.name} |
| 36 |
disabled={!importer.is_active} |
| 37 |
> |
| 38 |
{importer.is_active |
| 39 |
? importer.title |
| 40 |
// translators: %s: importer title. |
| 41 |
: sprintf(__('%s (Inactive)', 'code-snippets'), importer.title)} |
| 42 |
</option>)} |
| 43 |
</select> |
| 44 |
|
| 45 |
{isLoading && <p role="status" aria-live="polite">{__('Loading snippets…', 'code-snippets')}</p>} |
| 46 |
</ImportCard> |
| 47 |
) |
| 48 |
} |
| 49 |
|
