← All changes | js/components/ImportMenu/UploadForm/SelectSnippets/SelectSnippets.tsx +45 -41 3.10.0-beta.1 → trunk View file →

		@@ -7,9 +7,9 @@
7	7	import { Button } from '../../../common/Button'
8	8	import { ImportCard } from '../../common/ImportCard'
9	9	import { useSelection } from '../../../../hooks/useSelection'
10	10	import { SnippetSelectionTable } from './SnippetSelectionTable'
11		-import type { FormEventHandler, ReactNode} from 'react'
	11	+import type { FormEventHandler, ReactNode } from 'react'
12	12	import type { UseSelection } from '../../../../hooks/useSelection'
13	13	import type { ImportResult } from './ImportResultDisplay'
14	14	import type { ImportableSnippetSchema } from '../../../../types/schema/ImportableSnippetSchema'
15	15	import type { DuplicateAction } from '../SelectFiles/DuplicateActionSelector'
		@@ -40,8 +40,33 @@
40	40	{__('← Upload Different Files', 'code-snippets')}
41	41	</Button>
42	42	</div>
43	43
	44	+interface SelectAllButtonProps {
	45	+ selectAll: VoidFunction
	46	+ isAllSelected: boolean
	47	+}
	48	+
	49	+const SelectAllButton: React.FC<SelectAllButtonProps> = ({ selectAll, isAllSelected }) =>
	50	+ <Button onClick={selectAll}>
	51	+ {isAllSelected
	52	+ ? __('Deselect All', 'code-snippets')
	53	+ : __('Select All', 'code-snippets')}
	54	+ </Button>
	55	+
	56	+interface SubmitButtonProps {
	57	+ isImporting: boolean
	58	+ selectedCount: number
	59	+}
	60	+
	61	+const SubmitButton: React.FC<SubmitButtonProps> = ({ isImporting, selectedCount }) =>
	62	+ <Button type="submit" primary disabled={0 === selectedCount || isImporting}>
	63	+ {isImporting
	64	+ ? __('Importing…', 'code-snippets')
	65	+ // translators: %d: number of selected snippets.
	66	+ : sprintf(__('Import Selected (%d)', 'code-snippets'), selectedCount)}
	67	+ </Button>
	68	+
44	69	interface SelectSnippetsFormProps {
45	70	isImporting: boolean
46	71	availableSnippets: ImportableSnippetSchema[]
47	72	snippetSelection: UseSelection<ImportableSnippetSchema, ImportableSnippetSchema['table_data']['id']>
		@@ -46,50 +71,29 @@
46	71	availableSnippets: ImportableSnippetSchema[]
47	72	snippetSelection: UseSelection<ImportableSnippetSchema, ImportableSnippetSchema['table_data']['id']>
48	73	}
49	74
50		-const SelectSnippetsForm: React.FC<SelectSnippetsFormProps> = ({ availableSnippets, snippetSelection, isImporting }) => {
51		- const SelectAllButton = () =>
52		- <Button onClick={snippetSelection.selectAll}>
53		- {snippetSelection.isAllSelected
54		- ? __('Deselect All', 'code-snippets')
55		- : __('Select All', 'code-snippets')}
56		- </Button>
57		-
58		- const SubmitButton = () =>
59		- <Button type="submit" primary disabled={0 === snippetSelection.selectedItems.size || isImporting}>
60		- {isImporting
61		- ? __('Importing…', 'code-snippets')
62		- // translators: %d: number of selected snippets.
63		- : sprintf(__('Import Selected (%d)', 'code-snippets'), snippetSelection.selectedItems.size)}
64		- </Button>
65		-
66		- return (
67		- <>
68		- <div className="tablenav top">
69		- <div>
70		- <h4>{sprintf(
71		- // translators: %d: number of available snippets.
72		- __('Available snippets (%d)', 'code-snippets'),
73		- availableSnippets.length
74		- )}</h4>
75		- <p>{__('Select the snippets you would like to import.', 'code-snippets')}</p>
76		- </div>
77		- <div className="table-actions">
78		- <SelectAllButton />
79		- <SubmitButton />
80		- </div>
	75	+const SelectSnippetsForm: React.FC<SelectSnippetsFormProps> = ({ availableSnippets, snippetSelection, isImporting }) =>
	76	+ <>
	77	+ <div className="tablenav top">
	78	+ <div>
	79	+ <h2>{// translators: %d: number of available snippets.
	80	+ sprintf(__('Available snippets (%d)', 'code-snippets'), availableSnippets.length)}</h2>
	81	+ <p>{__('Select the snippets you would like to import.', 'code-snippets')}</p>
81	82	</div>
	83	+ <div className="table-actions">
	84	+ <SelectAllButton selectAll={snippetSelection.selectAll} isAllSelected={snippetSelection.isAllSelected} />
	85	+ <SubmitButton isImporting={isImporting} selectedCount={snippetSelection.selectedItems.size} />
	86	+ </div>
	87	+ </div>
82	88
83		- <SnippetSelectionTable snippets={availableSnippets} selection={snippetSelection} />
	89	+ <SnippetSelectionTable snippets={availableSnippets} selection={snippetSelection} />
84	90
85		- <div className="tablenav bottom">
86		- <SelectAllButton />
87		- <SubmitButton />
88		- </div>
89		- </>
90		- )
91		-}
	91	+ <div className="tablenav bottom">
	92	+ <SelectAllButton selectAll={snippetSelection.selectAll} isAllSelected={snippetSelection.isAllSelected} />
	93	+ <SubmitButton isImporting={isImporting} selectedCount={snippetSelection.selectedItems.size} />
	94	+ </div>
	95	+ </>
92	96
93	97	interface SubmitFormProps {
94	98	children: ReactNode
95	99	duplicateAction: DuplicateAction
		@@ -124,9 +128,9 @@
124	128	setIsImporting(true)
125	129	setImportResult(undefined)
126	130
127	131	api
128		- .post<SnippetImportResponse, SnippetImportRequest>(`${REST_BASES.importFiles}/import`, request)
	132	+ .post<SnippetImportResponse, SnippetImportRequest>(`${REST_BASES.import.files}/import`, request)
129	133	.then(({ message, imported }) => {
130	134	setImportResult({ step: 'select', success: true, message, imported })
131	135	})
132	136	.catch((error: unknown) => {