random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2024-11-26 15:37:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add keyboard handlers to load more and refresh button

Browse Source
This commit is contained in:
Laurent Nguyen 2024-04-23 14:34:33 +02:00
parent d273f7ac6e
commit a0ade247e9
1 changed files with 35 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
View File

@ -864,6 +864,26 @@ const DocumentsTabComponent: React.FunctionComponent<{
}); });
}; };
const onRefreshKeyInput: KeyboardEventHandler<HTMLButtonElement> = (event) => {
if (event.key === " " || event.key === "Enter") {
const focusElement = event.target as HTMLElement;
refreshDocumentsGrid(false);
focusElement && focusElement.focus();
event.stopPropagation();
event.preventDefault();
}
};
const onLoadMoreKeyInput: KeyboardEventHandler<HTMLAnchorElement> = (event) => {
if (event.key === " " || event.key === "Enter") {
const focusElement = event.target as HTMLElement;
loadNextPage();
focusElement && focusElement.focus();
event.stopPropagation();
event.preventDefault();
}
};
const _loadNextPageInternal = (): Promise<DataModels.DocumentId[]> => { const _loadNextPageInternal = (): Promise<DataModels.DocumentId[]> => {
return documentsIterator.iterator.fetchNext().then((response) => response.resources); return documentsIterator.iterator.fetchNext().then((response) => response.resources);
}; };
@ -1466,12 +1486,12 @@ const DocumentsTabComponent: React.FunctionComponent<{
<div <div
className="tab-pane active" className="tab-pane active"
/* data-bind=" /* data-bind="
setTemplateReady: true, setTemplateReady: true,
attr:{ attr:{
id: tabId id: tabId
}, },
visible: isActive" visible: isActive"
*/ */
role="tabpanel" role="tabpanel"
style={{ display: "flex" }} style={{ display: "flex" }}
> >
@ -1560,9 +1580,9 @@ const DocumentsTabComponent: React.FunctionComponent<{
onClick={() => refreshDocumentsGrid(true)} onClick={() => refreshDocumentsGrid(true)}
disabled={!applyFilterButton.enabled} disabled={!applyFilterButton.enabled}
/* data-bind=" /* data-bind="
click: refreshDocumentsGrid.bind($data, true), click: refreshDocumentsGrid.bind($data, true),
enable: applyFilterButton.enabled" enable: applyFilterButton.enabled"
*/ */
aria-label="Apply filter" aria-label="Apply filter"
tabIndex={0} tabIndex={0}
> >
@ -1574,9 +1594,9 @@ const DocumentsTabComponent: React.FunctionComponent<{
<button <button
className="filterbtnstyle queryButton" className="filterbtnstyle queryButton"
/* data-bind=" /* data-bind="
visible: !isPreferredApiMongoDB && isExecuting, visible: !isPreferredApiMongoDB && isExecuting,
click: onAbortQueryClick" click: onAbortQueryClick"
*/ */
aria-label="Cancel Query" aria-label="Cancel Query"
tabIndex={0} tabIndex={0}
> >
@ -1623,7 +1643,7 @@ const DocumentsTabComponent: React.FunctionComponent<{
color: StyleConstants.AccentMedium, color: StyleConstants.AccentMedium,
}} }}
onClick={() => refreshDocumentsGrid(false)} onClick={() => refreshDocumentsGrid(false)}
onKeyDown={() => refreshDocumentsGrid(false)} onKeyDown={onRefreshKeyInput}
/> />
<div <div
style={ style={
@ -1645,8 +1665,9 @@ const DocumentsTabComponent: React.FunctionComponent<{
<a <a
className="loadMore" className="loadMore"
role="button" role="button"
tabIndex={0}
onClick={() => loadNextPage(false)} onClick={() => loadNextPage(false)}
onKeyDown={() => loadNextPage(false)} onKeyDown={onLoadMoreKeyInput}
> >
Load more Load more
</a> </a>