Skip to content

Commit 4c6d8dd

Browse files
pimterryClaudéric Demers
pimterry
authored and
Claudéric Demers
committed
feat: Add keyCodes prop to configure the keyboard shortcuts (#588)
1 parent 51b164e commit 4c6d8dd

File tree

4 files changed

+50
-23
lines changed

4 files changed

+50
-23
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@ There are already a number of great Drag & Drop libraries out there (for instanc
102102
| helperClass | String | | You can provide a class you'd like to add to the sortable helper to add some styles to it |
103103
| transitionDuration | Number | `300` | The duration of the transition when elements shift positions. Set this to `0` if you'd like to disable transitions |
104104
| keyboardSortingTransitionDuration | Number | `transitionDuration` | The duration of the transition when the helper is shifted during keyboard sorting. Set this to `0` if you'd like to disable transitions for the keyboard sorting helper. Defaults to the value set for `transitionDuration` if undefined |
105+
| keyCodes | Array<Number> | `{`<br/>&nbsp;&nbsp;`lift: [32],`<br/>&nbsp;&nbsp;`drop: [32],`<br/>&nbsp;&nbsp;`cancel: [27],`<br/>&nbsp;&nbsp;`up: [38, 37],`<br/>&nbsp;&nbsp;`down: [40, 39]`<br/>`}` | A object, containing an array of keycodes for each keyboard-accessible action. |
105106
| pressDelay | Number | `0` | If you'd like elements to only become sortable after being pressed for a certain time, change this property. A good sensible default value for mobile is `200`. Cannot be used in conjunction with the `distance` prop. |
106107
| pressThreshold | Number | `5` | Number of pixels of movement to tolerate before ignoring a press event. |
107108
| distance | Number | `0` | If you'd like elements to only become sortable after being dragged a certain number of pixels. Cannot be used in conjunction with the `pressDelay` prop. |

‎src/SortableContainer/index.js

+25-23
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,18 @@ import {
2323
setInlineStyles,
2424
setTransitionDuration,
2525
setTranslate3d,
26-
KEYCODE,
2726
getTargetIndex,
2827
getScrollAdjustedBoundingClientRect,
2928
} from '../utils';
3029

3130
import AutoScroller from '../AutoScroller';
32-
import {defaultProps, omittedProps, propTypes, validateProps} from './props';
31+
import {
32+
defaultProps,
33+
omittedProps,
34+
propTypes,
35+
validateProps,
36+
defaultKeyCodes,
37+
} from './props';
3338

3439
export default function sortableContainer(
3540
WrappedComponent,
@@ -893,12 +898,17 @@ export default function sortableContainer(
893898

894899
handleKeyDown = (event) => {
895900
const {keyCode} = event;
896-
const {shouldCancelStart} = this.props;
901+
const {shouldCancelStart, keyCodes: customKeyCodes = {}} = this.props;
902+
903+
const keyCodes = {
904+
...defaultKeyCodes,
905+
...customKeyCodes,
906+
};
897907

898908
if (
899909
(this.manager.active && !this.manager.isKeySorting) ||
900910
(!this.manager.active &&
901-
(keyCode !== KEYCODE.SPACE ||
911+
(!keyCodes.lift.includes(keyCode) ||
902912
shouldCancelStart(event) ||
903913
!this.isValidSortingTarget(event)))
904914
) {
@@ -908,25 +918,17 @@ export default function sortableContainer(
908918
event.stopPropagation();
909919
event.preventDefault();
910920

911-
switch (keyCode) {
912-
case KEYCODE.SPACE:
913-
if (this.manager.active) {
914-
this.keyDrop(event);
915-
} else {
916-
this.keyLift(event);
917-
}
918-
break;
919-
case KEYCODE.DOWN:
920-
case KEYCODE.RIGHT:
921-
this.keyMove(1);
922-
break;
923-
case KEYCODE.UP:
924-
case KEYCODE.LEFT:
925-
this.keyMove(-1);
926-
break;
927-
case KEYCODE.ESC:
928-
this.newIndex = this.manager.active.index;
929-
this.keyDrop(event);
921+
if (keyCodes.lift.includes(keyCode) && !this.manager.active) {
922+
this.keyLift(event);
923+
} else if (keyCodes.drop.includes(keyCode) && this.manager.active) {
924+
this.keyDrop(event);
925+
} else if (keyCodes.cancel.includes(keyCode)) {
926+
this.newIndex = this.manager.active.index;
927+
this.keyDrop(event);
928+
} else if (keyCodes.up.includes(keyCode)) {
929+
this.keyMove(-1);
930+
} else if (keyCodes.down.includes(keyCode)) {
931+
this.keyMove(1);
930932
}
931933
};
932934

‎src/SortableContainer/props.js

+17
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import PropTypes from 'prop-types';
22
import invariant from 'invariant';
33

4+
import {KEYCODE} from '../utils';
45
import defaultGetHelperDimensions from './defaultGetHelperDimensions';
56
import defaultShouldCancelStart from './defaultShouldCancelStart';
67

@@ -35,13 +36,28 @@ export const propTypes = {
3536
onSortStart: PropTypes.func,
3637
pressDelay: PropTypes.number,
3738
pressThreshold: PropTypes.number,
39+
keyCodes: PropTypes.objectOf({
40+
lift: PropTypes.arrayOf(PropTypes.number),
41+
drop: PropTypes.arrayOf(PropTypes.number),
42+
cancel: PropTypes.arrayOf(PropTypes.number),
43+
up: PropTypes.arrayOf(PropTypes.number),
44+
down: PropTypes.arrayOf(PropTypes.number),
45+
}),
3846
shouldCancelStart: PropTypes.func,
3947
transitionDuration: PropTypes.number,
4048
updateBeforeSortStart: PropTypes.func,
4149
useDragHandle: PropTypes.bool,
4250
useWindowAsScrollContainer: PropTypes.bool,
4351
};
4452

53+
export const defaultKeyCodes = {
54+
lift: [KEYCODE.SPACE],
55+
drop: [KEYCODE.SPACE],
56+
cancel: [KEYCODE.ESC],
57+
up: [KEYCODE.UP, KEYCODE.LEFT],
58+
down: [KEYCODE.DOWN, KEYCODE.RIGHT],
59+
};
60+
4561
export const defaultProps = {
4662
axis: 'y',
4763
disableAutoscroll: false,
@@ -52,6 +68,7 @@ export const defaultProps = {
5268
lockToContainerEdges: false,
5369
pressDelay: 0,
5470
pressThreshold: 5,
71+
keyCodes: defaultKeyCodes,
5572
shouldCancelStart: defaultShouldCancelStart,
5673
transitionDuration: 300,
5774
useWindowAsScrollContainer: false,

‎types/index.d.ts

+7
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,13 @@ export interface SortableContainerProps {
5959
helperClass?: string;
6060
transitionDuration?: number;
6161
keyboardSortingTransitionDuration?: number;
62+
keyCodes?: {
63+
lift?: number[];
64+
drop?: number[];
65+
cancel?: number[];
66+
up?: number[];
67+
down?: number[];
68+
},
6269
pressDelay?: number;
6370
pressThreshold?: number;
6471
distance?: number;

0 commit comments

Comments
 (0)