Skip to content

Commit e7d9e68

Browse files
MichaelMatejkoMichaelMatejko
authored
Merge pull request #444 from silevis/v4-fix/behavior-of-function-keys-in-cell-templates
V4: Fixed the behavior of function keys in cell templates
2 parents 594b012 + 656ab6a commit e7d9e68

8 files changed

Lines changed: 69 additions & 9 deletions

File tree

‎src/lib/CellTemplates/ChevronCellTemplate.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import * as React from "react";
44
import { getCellProperty } from "../Functions/getCellProperty";
55
import { keyCodes } from "../Functions/keyCodes";
66
import { Cell, CellStyle, CellTemplate, Compatible, Id, Uncertain, UncertainCompatible } from "../Model/PublicModel";
7-
import { isNavigationKey, isAlphaNumericKey } from "./keyCodeCheckings";
7+
import { isNavigationKey, isAlphaNumericKey, isFunctionKey } from "./keyCodeCheckings";
88
import { getCharFromKey } from "./getCharFromKeyCode";
99

1010
export interface ChevronCell extends Cell {
@@ -56,6 +56,11 @@ export class ChevronCellTemplate implements CellTemplate<ChevronCell> {
5656
key: string,
5757
capsLock: boolean
5858
): { cell: Compatible<ChevronCell>; enableEditMode: boolean } {
59+
if (isFunctionKey(keyCode)) {
60+
if (keyCode === keyCodes.F2) return { cell, enableEditMode: true };
61+
return { cell, enableEditMode: false };
62+
}
63+
5964
let enableEditMode = keyCode === keyCodes.POINTER || keyCode === keyCodes.ENTER;
6065
const cellCopy = { ...cell };
6166

‎src/lib/CellTemplates/DateCellTemplate.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import * as React from "react";
44
import { getCellProperty } from "../Functions/getCellProperty";
55
import { Cell, CellTemplate, Compatible, Uncertain, UncertainCompatible } from "../Model/PublicModel";
66
import { keyCodes } from "../Functions/keyCodes";
7-
import { inNumericKey, isNavigationKey, isAlphaNumericKey, isCharAlphaNumeric } from "./keyCodeCheckings";
7+
import { inNumericKey, isNavigationKey, isCharAlphaNumeric, isFunctionKey } from "./keyCodeCheckings";
88
import { getFormattedTimeUnit } from "./timeUtils";
99
import { getCharFromKey } from "./getCharFromKeyCode";
1010

@@ -34,6 +34,11 @@ export class DateCellTemplate implements CellTemplate<DateCell> {
3434
key: string,
3535
capsLock: boolean
3636
): { cell: Compatible<DateCell>; enableEditMode: boolean } {
37+
if (isFunctionKey(keyCode)) {
38+
if (keyCode === keyCodes.F2) return { cell, enableEditMode: true };
39+
return { cell, enableEditMode: false };
40+
}
41+
3742
if (!ctrl && isCharAlphaNumeric(getCharFromKey(key)))
3843
return { cell: this.getCompatibleCell({ ...cell }), enableEditMode: true };
3944
return { cell, enableEditMode: keyCode === keyCodes.POINTER || keyCode === keyCodes.ENTER };

‎src/lib/CellTemplates/EmailCellTemplate.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from "react";
22

33
// NOTE: all modules imported below may be imported from '@silevis/reactgrid'
4-
import { isAlphaNumericKey, isNavigationKey } from "./keyCodeCheckings";
4+
import { isAlphaNumericKey, isFunctionKey, isNavigationKey } from "./keyCodeCheckings";
55
import { getCellProperty } from "../Functions/getCellProperty";
66
import { keyCodes } from "../Functions/keyCodes";
77
import { Cell, CellTemplate, Compatible, Uncertain, UncertainCompatible } from "../Model/PublicModel";
@@ -33,11 +33,20 @@ export class EmailCellTemplate implements CellTemplate<EmailCell> {
3333
key: string,
3434
capsLock: boolean
3535
): { cell: Compatible<EmailCell>; enableEditMode: boolean } {
36+
if (isFunctionKey(keyCode)) {
37+
if (keyCode === keyCodes.F2) return { cell, enableEditMode: true };
38+
return { cell, enableEditMode: false };
39+
}
40+
3641
const char = getCharFromKey(key, shift, capsLock);
3742

3843
if (!ctrl && !alt && isAlphaNumericKey(keyCode) && !(shift && keyCode === keyCodes.SPACE))
3944
return { cell: { ...cell, text: char }, enableEditMode: true };
40-
return { cell, enableEditMode: keyCode === keyCodes.POINTER || keyCode === keyCodes.ENTER };
45+
46+
return {
47+
cell,
48+
enableEditMode: keyCode === keyCodes.POINTER || keyCode === keyCodes.ENTER,
49+
};
4150
}
4251

4352
handleCompositionEnd(

‎src/lib/CellTemplates/NumberCellTemplate.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
isNumpadNumericKey,
1111
isAllowedOnNumberTypingKey,
1212
isCharAllowedOnNumberInput,
13+
isFunctionKey,
1314
} from "./keyCodeCheckings";
1415
import { getCharFromKey } from "./getCharFromKeyCode";
1516
import { parseLocaleNumber } from "../Functions/parseLocaleNumber";
@@ -53,15 +54,25 @@ export class NumberCellTemplate implements CellTemplate<NumberCell> {
5354
capsLock: boolean
5455
): { cell: Compatible<NumberCell>; enableEditMode: boolean } {
5556
if (isNumpadNumericKey(keyCode)) keyCode -= 48;
57+
if (isFunctionKey(keyCode)) {
58+
if (keyCode === keyCodes.F2) return { cell, enableEditMode: true };
59+
return { cell, enableEditMode: false };
60+
}
61+
5662
const char = getCharFromKey(key);
63+
5764
if (!ctrl && isCharAllowedOnNumberInput(char)) {
5865
const value = Number(char);
5966

6067
if (Number.isNaN(value) && isCharAllowedOnNumberInput(char))
6168
return { cell: { ...this.getCompatibleCell({ ...cell, value }), text: char }, enableEditMode: true };
6269
return { cell: this.getCompatibleCell({ ...cell, value }), enableEditMode: true };
6370
}
64-
return { cell, enableEditMode: keyCode === keyCodes.POINTER || keyCode === keyCodes.ENTER };
71+
72+
return {
73+
cell,
74+
enableEditMode: keyCode === keyCodes.POINTER || keyCode === keyCodes.ENTER,
75+
};
6576
}
6677

6778
update(cell: Compatible<NumberCell>, cellToMerge: UncertainCompatible<NumberCell>): Compatible<NumberCell> {

‎src/lib/CellTemplates/TextCellTemplate.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from "react";
22

33
// NOTE: all modules imported below may be imported from '@silevis/reactgrid'
4-
import { isAlphaNumericKey, isNavigationKey } from "./keyCodeCheckings";
4+
import { isAlphaNumericKey, isFunctionKey, isNavigationKey } from "./keyCodeCheckings";
55
import { getCellProperty } from "../Functions/getCellProperty";
66
import { keyCodes } from "../Functions/keyCodes";
77
import { Cell, CellTemplate, Compatible, Uncertain, UncertainCompatible } from "../Model/PublicModel";
@@ -44,11 +44,19 @@ export class TextCellTemplate implements CellTemplate<TextCell> {
4444
key: string,
4545
capsLock: boolean
4646
): { cell: Compatible<TextCell>; enableEditMode: boolean } {
47+
if (isFunctionKey(keyCode)) {
48+
if (keyCode === keyCodes.F2) return { cell, enableEditMode: true };
49+
return { cell, enableEditMode: false };
50+
}
51+
4752
const char = getCharFromKey(key, shift, capsLock);
4853

4954
if (!ctrl && !alt && isAlphaNumericKey(keyCode) && !(shift && keyCode === keyCodes.SPACE))
5055
return { cell: this.getCompatibleCell({ ...cell, text: char }), enableEditMode: true };
51-
return { cell, enableEditMode: keyCode === keyCodes.POINTER || keyCode === keyCodes.ENTER };
56+
return {
57+
cell,
58+
enableEditMode: keyCode === keyCodes.POINTER || keyCode === keyCodes.ENTER,
59+
};
5260
}
5361

5462
handleCompositionEnd(

‎src/lib/CellTemplates/TimeCellTemplate.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import * as React from "react";
44
import { getCellProperty } from "../Functions/getCellProperty";
55
import { keyCodes } from "../Functions/keyCodes";
66
import { Cell, CellTemplate, Compatible, Uncertain, UncertainCompatible } from "../Model/PublicModel";
7-
import { inNumericKey, isNavigationKey, isAlphaNumericKey, isCharAllowedOnNumberInput } from "./keyCodeCheckings";
7+
import { inNumericKey, isNavigationKey, isCharAllowedOnNumberInput, isFunctionKey } from "./keyCodeCheckings";
88
import { getTimestamp, getFormattedTimeUnit, getDefaultDate } from "./timeUtils";
99
import { getCharFromKey } from "./getCharFromKeyCode";
1010

@@ -35,6 +35,11 @@ export class TimeCellTemplate implements CellTemplate<TimeCell> {
3535
alt: boolean,
3636
key: string
3737
): { cell: Compatible<TimeCell>; enableEditMode: boolean } {
38+
if (isFunctionKey(keyCode)) {
39+
if (keyCode === keyCodes.F2) return { cell, enableEditMode: true };
40+
return { cell, enableEditMode: false };
41+
}
42+
3843
if (!ctrl && isCharAllowedOnNumberInput(getCharFromKey(key)))
3944
return { cell: this.getCompatibleCell({ ...cell }), enableEditMode: true };
4045
return { cell, enableEditMode: keyCode === keyCodes.POINTER || keyCode === keyCodes.ENTER };

‎src/lib/CellTemplates/keyCodeCheckings.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,3 +84,14 @@ export const isNavigationKey = (keyCode: number): boolean =>
8484
keyCode === keyCodes.UP_ARROW || keyCode === keyCodes.DOWN_ARROW ||
8585
keyCode === keyCodes.END || keyCode === keyCodes.HOME ||
8686
keyCode === keyCodes.BACKSPACE || keyCode === keyCodes.DELETE;
87+
88+
/**
89+
* Checks that the pressed key's `keyCode` is one of function keys
90+
*
91+
* @param {number} keyCode `keyCode` field from `KeyboardEvent` interface
92+
* @returns {boolean} Returns `true` if `keyCode` is one of function keys
93+
*
94+
* @see https://reactgrid.com/docs/3.1/7-api/2-functions/
95+
* */
96+
export const isFunctionKey = (keyCode: number): boolean =>
97+
(keyCode >= keyCodes.F1 && keyCode <= keyCodes.F12);

‎src/test/flagCell/FlagCellTemplate.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import * as React from 'react';
22
import {
33
CellTemplate, Cell, Compatible, Uncertain, UncertainCompatible, isNavigationKey, getCellProperty,
4-
isAlphaNumericKey, keyCodes, getCharFromKey
4+
isAlphaNumericKey, keyCodes, getCharFromKey,
5+
isFunctionKey
56
} from '../../reactgrid';
67
import './flag-cell-style.scss';
78

@@ -20,6 +21,11 @@ export class FlagCellTemplate implements CellTemplate<FlagCell> {
2021
}
2122

2223
handleKeyDown(cell: Compatible<FlagCell>, keyCode: number, ctrl: boolean, shift: boolean, alt: boolean, key: string, capsLock: boolean): { cell: Compatible<FlagCell>, enableEditMode: boolean } {
24+
if (isFunctionKey(keyCode)) {
25+
if (keyCode === keyCodes.F2) return { cell, enableEditMode: true };
26+
return { cell, enableEditMode: false };
27+
}
28+
2329
const char = getCharFromKey(key, shift, capsLock);
2430

2531
if (!ctrl && !alt && isAlphaNumericKey(keyCode) && !(shift && keyCode === keyCodes.SPACE))

0 commit comments

Comments
 (0)