Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: query creation via shortcut (#15281)

Browse Source 
## Description

- Shortcut key-up and key-down were not working because the list of file operations on ui were filtered out of the `sectionTitle` but on key actions it was being referred to which was adding in the offset for the current active item.

Fixes #15264

## Type of change

- Bug fix (non-breaking change which fixes an issue)
This commit is contained in:
Aman Agarwal 2022-07-20 10:06:51 +05:30 committed by GitHub
parent 39ad73228c
commit 10ca5b5033
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 44 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
app/client/src/pages/Editor/Explorer/Files/Submenu.tsx
View File

@ -61,6 +61,9 @@ export default function ExplorerSubMenu({
const [query, setQuery] = useState("");
const [show, setShow] = useState(openMenu);
const fileOperations = useFilteredFileOperations(query);
const filteredFileOperations = fileOperations.filter(
(item: any) => item.kind !== SEARCH_ITEM_TYPES.sectionTitle,
);
const pageId = useSelector(getCurrentPageId);
const dispatch = useDispatch();
const plugins = useSelector((state: AppState) => {
@ -85,34 +88,27 @@ export default function ExplorerSubMenu({
const handleUpKey = useCallback(() => {
setActiveItemIdx((currentActiveIndex) => {
if (currentActiveIndex <= 0) return fileOperations.length - 1;
const offset =
fileOperations[currentActiveIndex - 1].kind ===
SEARCH_ITEM_TYPES.sectionTitle
? 2
: 1;
return Math.max(currentActiveIndex - offset, 0);
if (currentActiveIndex <= 0) return filteredFileOperations.length - 1;
return Math.max(currentActiveIndex - 1, 0);
});
}, [fileOperations]);
}, [filteredFileOperations]);
const handleDownKey = useCallback(() => {
setActiveItemIdx((currentActiveIndex) => {
if (currentActiveIndex >= fileOperations.length - 1) return 0;
const offset =
fileOperations[currentActiveIndex + 1].kind ===
SEARCH_ITEM_TYPES.sectionTitle
? 2
: 1;
return Math.min(currentActiveIndex + offset, fileOperations.length - 1);
if (currentActiveIndex >= filteredFileOperations.length - 1) return 0;
return Math.min(
currentActiveIndex + 1,
filteredFileOperations.length - 1,
);
});
}, [fileOperations]);
}, [filteredFileOperations]);
const onChange = useCallback((e) => {
setQuery(e.target.value);
}, []);
const handleSelect = () => {
const item = fileOperations[activeItemIdx];
const item = filteredFileOperations[activeItemIdx];
handleClick(item);
};
@ -164,41 +160,37 @@ export default function ExplorerSubMenu({
)}
</div>
<div className="ops-container">
{fileOperations
.filter(
(item: any) => item.kind !== SEARCH_ITEM_TYPES.sectionTitle,
)
.map((item: any, idx: number) => {
const icon =
item.icon ||
(item.pluginId && (
<EntityIcon>
{getPluginIcon(pluginGroups[item.pluginId])}
</EntityIcon>
));
return (
<div
className={classNames({
"px-4 py-2 text-sm flex items-center gap-2 t--file-operation": true,
"cursor-pointer":
item.kind !== SEARCH_ITEM_TYPES.sectionTitle,
active:
activeItemIdx === idx &&
item.kind !== SEARCH_ITEM_TYPES.sectionTitle,
"font-medium text-gray section-title":
item.kind === SEARCH_ITEM_TYPES.sectionTitle,
})}
id={`file-op-${idx}`}
key={`file-op-${idx}`}
onClick={() => handleClick(item)}
>
{icon && <span className="flex-shrink-0">{icon}</span>}
<span className="overflow-hidden whitespace-nowrap overflow-ellipsis">
{item.shortTitle || item.title}
</span>
</div>
);
})}
{filteredFileOperations.map((item: any, idx: number) => {
const icon =
item.icon ||
(item.pluginId && (
<EntityIcon>
{getPluginIcon(pluginGroups[item.pluginId])}
</EntityIcon>
));
return (
<div
className={classNames({
"px-4 py-2 text-sm flex items-center gap-2 t--file-operation": true,
"cursor-pointer":
item.kind !== SEARCH_ITEM_TYPES.sectionTitle,
active:
activeItemIdx === idx &&
item.kind !== SEARCH_ITEM_TYPES.sectionTitle,
"font-medium text-gray section-title":
item.kind === SEARCH_ITEM_TYPES.sectionTitle,
})}
id={`file-op-${idx}`}
key={`file-op-${idx}`}
onClick={() => handleClick(item)}
>
{icon && <span className="flex-shrink-0">{icon}</span>}
<span className="overflow-hidden whitespace-nowrap overflow-ellipsis">
{item.shortTitle || item.title}
</span>
</div>
);
})}
</div>
</SubMenuContainer>
</SubmenuHotKeys>