@@ -4,8 +4,7 @@ import { CommandLineIcon, PencilIcon, TrashIcon, ChevronDownIcon, XMarkIcon, Eye
44import { useRecoilState , useRecoilValue } from 'recoil' ;
55import { MultiSelectedItemsAtom , PagedItems , SelectedItemActionAtom , SelectedMediaFolderSelector , SettingsSelector } from '../../state' ;
66import { ActionsBarItem } from './ActionsBarItem' ;
7- import * as l10n from '@vscode/l10n' ;
8- import { LocalizationKey } from '../../../localization' ;
7+ import { LocalizationKey , localize } from '../../../localization' ;
98import { Alert } from '../Modals/Alert' ;
109import { messageHandler } from '@estruyf/vscode/dist/client' ;
1110import { DashboardMessage } from '../../DashboardMessage' ;
@@ -68,8 +67,14 @@ export const ActionsBar: React.FunctionComponent<IActionsBarProps> = ({
6867 } , [ selectedFiles ] ) ;
6968
7069 const selectAllItems = React . useCallback ( ( ) => {
71- setSelectedFiles ( [ ...pagedItems ] ) ;
72- } , [ pagedItems ] ) ;
70+ const allSelected = [ ...selectedFiles , ...pagedItems ] ;
71+ setSelectedFiles ( Array . from ( new Set ( allSelected ) ) ) ;
72+ } , [ selectedFiles , pagedItems ] ) ;
73+
74+ const hasAllItemsSelectedOnPage = React . useMemo ( ( ) => {
75+ const selectedItemsOnPage = selectedFiles . filter ( ( file ) => pagedItems . includes ( file ) ) ;
76+ return selectedItemsOnPage . length >= pagedItems . length ;
77+ } , [ selectedFiles , pagedItems ] ) ;
7378
7479 const languageActions = React . useMemo ( ( ) => {
7580 const actions : React . ReactNode [ ] = [ ] ;
@@ -92,7 +97,7 @@ export const ActionsBar: React.FunctionComponent<IActionsBarProps> = ({
9297 } )
9398 } } >
9499 < LanguageIcon className = { `mr-2 h-4 w-4` } aria-hidden = { true } />
95- < span > { l10n . t ( LocalizationKey . commonTranslate ) } </ span >
100+ < span > { localize ( LocalizationKey . commonTranslate ) } </ span >
96101 </ ActionsBarItem >
97102 )
98103
@@ -107,7 +112,7 @@ export const ActionsBar: React.FunctionComponent<IActionsBarProps> = ({
107112 className = 'flex items-center text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]'
108113 >
109114 < LanguageIcon className = "mr-2 h-4 w-4" aria-hidden = { true } />
110- < span > { l10n . t ( LocalizationKey . commonLanguages ) } </ span >
115+ < span > { localize ( LocalizationKey . commonLanguages ) } </ span >
111116 < ChevronDownIcon className = "ml-2 h-4 w-4" aria-hidden = { true } />
112117 </ DropdownMenuTrigger >
113118
@@ -163,7 +168,7 @@ export const ActionsBar: React.FunctionComponent<IActionsBarProps> = ({
163168 disabled = { selectedFiles . length === 0 }
164169 >
165170 < CommandLineIcon className = "mr-2 h-4 w-4" aria-hidden = { true } />
166- < span > { l10n . t ( LocalizationKey . commonScripts ) } </ span >
171+ < span > { localize ( LocalizationKey . commonScripts ) } </ span >
167172 < ChevronDownIcon className = "ml-2 h-4 w-4" aria-hidden = { true } />
168173 </ DropdownMenuTrigger >
169174
@@ -197,10 +202,10 @@ export const ActionsBar: React.FunctionComponent<IActionsBarProps> = ({
197202 < ActionsBarItem
198203 disabled = { selectedFiles . length === 0 || selectedFiles . length > 1 }
199204 onClick = { viewFile }
200- title = { l10n . t ( LocalizationKey . commonView ) }
205+ title = { localize ( LocalizationKey . commonView ) }
201206 >
202207 < EyeIcon className = "w-4 h-4 mr-2" aria-hidden = "true" />
203- < span > { l10n . t ( LocalizationKey . commonView ) } </ span >
208+ < span > { localize ( LocalizationKey . commonView ) } </ span >
204209 </ ActionsBarItem >
205210
206211 {
@@ -211,10 +216,10 @@ export const ActionsBar: React.FunctionComponent<IActionsBarProps> = ({
211216 messageHandler . send ( DashboardMessage . rename , selectedFiles [ 0 ] ) ;
212217 setSelectedFiles ( [ ] ) ;
213218 } }
214- title = { l10n . t ( LocalizationKey . commonRename ) }
219+ title = { localize ( LocalizationKey . commonRename ) }
215220 >
216221 < RenameIcon className = "w-4 h-4 mr-2" aria-hidden = "true" />
217- < span > { l10n . t ( LocalizationKey . commonRename ) } </ span >
222+ < span > { localize ( LocalizationKey . commonRename ) } </ span >
218223 </ ActionsBarItem >
219224 )
220225 }
@@ -228,10 +233,10 @@ export const ActionsBar: React.FunctionComponent<IActionsBarProps> = ({
228233 path : selectedFiles [ 0 ] ,
229234 action : 'edit'
230235 } ) }
231- title = { l10n . t ( LocalizationKey . commonEdit ) }
236+ title = { localize ( LocalizationKey . commonEdit ) }
232237 >
233238 < PencilIcon className = "w-4 h-4 mr-2" aria-hidden = "true" />
234- < span > { l10n . t ( LocalizationKey . commonEdit ) } </ span >
239+ < span > { localize ( LocalizationKey . commonEdit ) } </ span >
235240 </ ActionsBarItem >
236241 </ >
237242 )
@@ -245,10 +250,10 @@ export const ActionsBar: React.FunctionComponent<IActionsBarProps> = ({
245250 className = 'hover:text-[var(--vscode-statusBarItem-errorBackground)]'
246251 disabled = { selectedFiles . length === 0 }
247252 onClick = { ( ) => setShowAlert ( true ) }
248- title = { l10n . t ( LocalizationKey . commonDelete ) }
253+ title = { localize ( LocalizationKey . commonDelete ) }
249254 >
250255 < TrashIcon className = "w-4 h-4 mr-2" aria-hidden = "true" />
251- < span > { l10n . t ( LocalizationKey . commonDelete ) } </ span >
256+ < span > { localize ( LocalizationKey . commonDelete ) } </ span >
252257 </ ActionsBarItem >
253258 </ div >
254259
@@ -258,33 +263,33 @@ export const ActionsBar: React.FunctionComponent<IActionsBarProps> = ({
258263 < ActionsBarItem
259264 className = 'flex items-center hover:text-[var(--vscode-statusBarItem-warningBackground)]'
260265 onClick = { ( ) => setSelectedFiles ( [ ] ) }
261- title = { l10n . t ( LocalizationKey . dashboardHeaderActionsBarItemsSelected , selectedFiles . length ) }
266+ title = { localize ( LocalizationKey . dashboardHeaderActionsBarItemsSelected , selectedFiles . length ) }
262267 >
263268 < XMarkIcon className = "w-4 h-4 mr-1" aria-hidden = "true" />
264- < span > { l10n . t ( LocalizationKey . dashboardHeaderActionsBarItemsSelected , selectedFiles . length ) } </ span >
269+ < span > { localize ( LocalizationKey . dashboardHeaderActionsBarItemsSelected , selectedFiles . length ) } </ span >
265270 </ ActionsBarItem >
266271 )
267272 }
268273
269274 < ActionsBarItem
270- disabled = { selectedFiles . length === pagedItems . length }
275+ disabled = { hasAllItemsSelectedOnPage }
271276 onClick = { selectAllItems }
272- title = { l10n . t ( LocalizationKey . dashboardHeaderActionsBarSelectAll ) }
277+ title = { localize ( LocalizationKey . dashboardHeaderActionsBarSelectAll ) }
273278 >
274279 < div className = 'w-4 h-4 inline-flex items-center justify-center border border-[var(--vscode-sideBar-foreground)] group-hover:border-[var(--vscode-statusBarItem-warningBackground)] rounded mr-1' >
275280 < CheckIcon className = "w-3 h-3" aria-hidden = "true" />
276281 </ div >
277- < span > { l10n . t ( LocalizationKey . dashboardHeaderActionsBarSelectAll ) } </ span >
282+ < span > { localize ( LocalizationKey . dashboardHeaderActionsBarSelectAll ) } </ span >
278283 </ ActionsBarItem >
279284 </ div >
280285 </ div >
281286
282287 { showAlert && (
283288 < Alert
284- title = { `${ l10n . t ( LocalizationKey . dashboardHeaderActionsBarAlertDeleteTitle ) } ` }
285- description = { l10n . t ( LocalizationKey . dashboardHeaderActionsBarAlertDeleteDescription ) }
286- okBtnText = { l10n . t ( LocalizationKey . commonDelete ) }
287- cancelBtnText = { l10n . t ( LocalizationKey . commonCancel ) }
289+ title = { `${ localize ( LocalizationKey . dashboardHeaderActionsBarAlertDeleteTitle ) } ` }
290+ description = { localize ( LocalizationKey . dashboardHeaderActionsBarAlertDeleteDescription ) }
291+ okBtnText = { localize ( LocalizationKey . commonDelete ) }
292+ cancelBtnText = { localize ( LocalizationKey . commonCancel ) }
288293 dismiss = { ( ) => setShowAlert ( false ) }
289294 trigger = { onDeleteConfirm }
290295 />
0 commit comments