fix: shift keyboard navigation

This commit is contained in:
Aaryan Khandelwal 2024-05-24 15:59:52 +05:30
parent cd038c5400
commit 07e482833c
5 changed files with 6 additions and 9 deletions

View File

@ -1,6 +1,6 @@
import { observer } from "mobx-react";
// hooks
import { TSelectionHelper, TSelectionSnapshot, useMultipleSelect } from "@/hooks/use-multiple-select";
import { TSelectionHelper, useMultipleSelect } from "@/hooks/use-multiple-select";
type Props = {
children: (helpers: TSelectionHelper) => React.ReactNode;

View File

@ -13,8 +13,8 @@ import {
// helpers
import { cn } from "@/helpers/common.helper";
// hooks
import { TSelectionHelper, TSelectionSnapshot } from "@/hooks/use-multiple-select";
import { useMultipleSelectStore } from "@/hooks/store";
import { TSelectionHelper } from "@/hooks/use-multiple-select";
type Props = {
className?: string;

View File

@ -106,9 +106,6 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
const isIssueActive = selectionHelpers.isEntityActive(issue.id);
const isSubIssue = nestingLevel !== 0;
console.log("isIssueSelected", issue.id, isIssueSelected);
console.log("isIssueActive", issue.id, isIssueActive);
// if sub issues have been fetched for the issue, use that for count or use issue's sub_issues_count
// const subIssuesCount = subIssues ? subIssues.length : issue.sub_issues_count;

View File

@ -265,14 +265,13 @@ export const useMultipleSelect = (props: Props) => {
const activeEntityDetails = getActiveEntityDetails();
const nextActiveEntity = getNextActiveEntity();
const previousActiveEntity = getPreviousActiveEntity();
if (e.key === "ArrowDown" && activeEntityDetails) {
if (!nextActiveEntity) return;
// console.log("selected by down", elementDetails.entityID);
handleEntitySelection(nextActiveEntity);
}
if (e.key === "ArrowUp" && activeEntityDetails) {
if (!previousActiveEntity) return;
// console.log("selected by up", elementDetails.entityID);
handleEntitySelection(previousActiveEntity);
}
};
@ -291,6 +290,7 @@ export const useMultipleSelect = (props: Props) => {
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.shiftKey) return;
const activeEntityDetails = getActiveEntityDetails();
// set active entity id to the first entity
if (["ArrowUp", "ArrowDown"].includes(e.key) && !activeEntityDetails) {
@ -346,7 +346,7 @@ export const useMultipleSelect = (props: Props) => {
handleGroupClick,
isGroupSelected,
}),
[handleEntityClick, handleGroupClick, isEntityActive, isEntitySelected, isGroupSelected]
[clearSelection, handleEntityClick, handleGroupClick, isEntityActive, isEntitySelected, isGroupSelected]
);
return helpers;

View File

@ -1,9 +1,9 @@
import { action, computed, makeObservable, observable, runInAction } from "mobx";
import { computedFn } from "mobx-utils";
// hooks
import { TEntityDetails } from "@/hooks/use-multiple-select";
// services
import { IssueService } from "@/services/issue";
import { computedFn } from "mobx-utils";
export type IMultipleSelectStore = {
// observables