Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add config to handleKeyDown #333

Merged
merged 1 commit into from
Feb 1, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
added config to handleKeyDown
  • Loading branch information
DLowHP committed Jan 26, 2024
commit 0e508689b096d22b8ee841fdbf961ce3bd7a035a
2 changes: 1 addition & 1 deletion src/behaviors/DefaultBehavior.ts
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,6 @@ export const DefaultBehavior = (config: DefaultBehaviorConfig = CONFIG_DEFAULTS)
},

handleKeyDown: function (event, store) {
return handleKeyDown(event, store);
return handleKeyDown(event, store, { moveHorizontallyOnEnter: config.moveHorizontallyOnEnter });
},
});
30 changes: 24 additions & 6 deletions src/utils/handleKeyDown.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,18 @@ import {
import { ReactGridStore } from "./reactGridStore";
import { resizeSelectionInDirection } from "./resizeSelectionInDirection";

type HandleKeyDownConfig = {
moveHorizontallyOnEnter: boolean;
};

const CONFIG_DEFAULTS: HandleKeyDownConfig = {
moveHorizontallyOnEnter: false,
} as const;

// ? Problem: The more complicated is the key-combination (the more keys are included), the higher-in-code it has to be.
// * By that I mean it has to be executed earlier.

export const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, store: ReactGridStore): ReactGridStore => {
export const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, store: ReactGridStore, config: HandleKeyDownConfig = CONFIG_DEFAULTS): ReactGridStore => {
if (event.altKey || store.currentlyEditedCell.rowIndex !== -1 || store.currentlyEditedCell.colIndex !== -1)
return store;

Expand Down Expand Up @@ -287,8 +295,13 @@ export const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, store:
case "Enter": {
event.preventDefault();

if (event.shiftKey) return moveFocusInsideSelectedRange(store, focusedCell, "up");
else return moveFocusInsideSelectedRange(store, focusedCell, "down");
if (config.moveHorizontallyOnEnter) {
if (event.shiftKey) return moveFocusInsideSelectedRange(store, focusedCell, "left");
return moveFocusInsideSelectedRange(store, focusedCell, "right");
} else {
if (event.shiftKey) return moveFocusInsideSelectedRange(store, focusedCell, "up");
else return moveFocusInsideSelectedRange(store, focusedCell, "down");
}
}
}
}
Expand Down Expand Up @@ -325,10 +338,15 @@ export const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, store:
case "Enter": {
event.preventDefault();

if (event.shiftKey) {
return moveFocusUp(store, focusedCell); // If shift is pressed, move focus up (row up).
if (config.moveHorizontallyOnEnter) {
if (event.shiftKey) return moveFocusInsideSelectedRange(store, focusedCell, "left");
return moveFocusInsideSelectedRange(store, focusedCell, "right");
} else {
return moveFocusDown(store, focusedCell); // Otherwise, move focus down (row down).
if (event.shiftKey) {
return moveFocusUp(store, focusedCell); // If shift is pressed, move focus up (row up).
} else {
return moveFocusDown(store, focusedCell); // Otherwise, move focus down (row down).
}
}
}

Expand Down