Skip to content

Commit

Permalink
feat: Add keyCodes option to configure the keyboard shortcuts
Browse files Browse the repository at this point in the history
  • Loading branch information
@pimterry
pimterry committed Aug 22, 2019
1 parent 51b164e commit f36aa21
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 23 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ There are already a number of great Drag & Drop libraries out there (for instanc
| helperClass | String | | You can provide a class you'd like to add to the sortable helper to add some styles to it |
| transitionDuration | Number | `300` | The duration of the transition when elements shift positions. Set this to `0` if you'd like to disable transitions |
| 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 |
| keyCodes | Array<Number> | `{`<br/>`lift: [32],`<br/>`drop: [32],`<br/>`cancel: [27],`<br/>`up: [38, 37],`<br/>`down: [40, 39]`<br/>`}` | A object, containing an array of keycodes for each keyboard-accessible action. |
| 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. |
| pressThreshold | Number | `5` | Number of pixels of movement to tolerate before ignoring a press event. |
| 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. |
Expand Down
42 changes: 19 additions & 23 deletions src/SortableContainer/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,12 @@ import {
setInlineStyles,
setTransitionDuration,
setTranslate3d,
KEYCODE,
getTargetIndex,
getScrollAdjustedBoundingClientRect,
} from '../utils';

import AutoScroller from '../AutoScroller';
import {defaultProps, omittedProps, propTypes, validateProps} from './props';
import {defaultProps, omittedProps, propTypes, validateProps, defaultKeyCodes} from './props';

export default function sortableContainer(
WrappedComponent,
Expand Down Expand Up @@ -893,12 +892,17 @@ export default function sortableContainer(

handleKeyDown = (event) => {
const {keyCode} = event;
const {shouldCancelStart} = this.props;
const {shouldCancelStart, keyCodes: customKeyCodes = {}} = this.props;

const keyCodes = {
...defaultKeyCodes,
...customKeyCodes,
};

if (
(this.manager.active && !this.manager.isKeySorting) ||
(!this.manager.active &&
(keyCode !== KEYCODE.SPACE ||
(!keyCodes.lift.includes(keyCode) ||
shouldCancelStart(event) ||
!this.isValidSortingTarget(event)))
) {
Expand All @@ -908,25 +912,17 @@ export default function sortableContainer(
event.stopPropagation();
event.preventDefault();

switch (keyCode) {
case KEYCODE.SPACE:
if (this.manager.active) {
this.keyDrop(event);
} else {
this.keyLift(event);
}
break;
case KEYCODE.DOWN:
case KEYCODE.RIGHT:
this.keyMove(1);
break;
case KEYCODE.UP:
case KEYCODE.LEFT:
this.keyMove(-1);
break;
case KEYCODE.ESC:
this.newIndex = this.manager.active.index;
this.keyDrop(event);
if (keyCodes.lift.includes(keyCode) && !this.manager.active) {
this.keyLift(event);
} else if (keyCodes.drop.includes(keyCode) && this.manager.active) {
this.keyDrop(event);
} else if (keyCodes.cancel.includes(keyCode)) {
this.newIndex = this.manager.active.index;
this.keyDrop(event);
} else if (keyCodes.up.includes(keyCode)) {
this.keyMove(-1);
} else if (keyCodes.down.includes(keyCode)) {
this.keyMove(1);
}
};

Expand Down
17 changes: 17 additions & 0 deletions src/SortableContainer/props.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import PropTypes from 'prop-types';
import invariant from 'invariant';

import {KEYCODE} from '../utils';
import defaultGetHelperDimensions from './defaultGetHelperDimensions';
import defaultShouldCancelStart from './defaultShouldCancelStart';

Expand Down Expand Up @@ -35,13 +36,28 @@ export const propTypes = {
onSortStart: PropTypes.func,
pressDelay: PropTypes.number,
pressThreshold: PropTypes.number,
keyCodes: PropTypes.objectOf({
lift: PropTypes.arrayOf(PropTypes.number),
drop: PropTypes.arrayOf(PropTypes.number),
cancel: PropTypes.arrayOf(PropTypes.number),
up: PropTypes.arrayOf(PropTypes.number),
down: PropTypes.arrayOf(PropTypes.number),
}),
shouldCancelStart: PropTypes.func,
transitionDuration: PropTypes.number,
updateBeforeSortStart: PropTypes.func,
useDragHandle: PropTypes.bool,
useWindowAsScrollContainer: PropTypes.bool,
};

export const defaultKeyCodes = {
lift: [KEYCODE.SPACE],
drop: [KEYCODE.SPACE],
cancel: [KEYCODE.ESC],
up: [KEYCODE.UP, KEYCODE.LEFT],
down: [KEYCODE.DOWN, KEYCODE.RIGHT],
};

export const defaultProps = {
axis: 'y',
disableAutoscroll: false,
Expand All @@ -52,6 +68,7 @@ export const defaultProps = {
lockToContainerEdges: false,
pressDelay: 0,
pressThreshold: 5,
keyCodes: defaultKeyCodes,
shouldCancelStart: defaultShouldCancelStart,
transitionDuration: 300,
useWindowAsScrollContainer: false,
Expand Down
7 changes: 7 additions & 0 deletions types/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,13 @@ export interface SortableContainerProps {
helperClass?: string;
transitionDuration?: number;
keyboardSortingTransitionDuration?: number;
keyCodes?: {
lift?: Array<number>;
drop?: Array<number>;
cancel?: Array<number>;
up?: Array<number>;
down?: Array<number>;
},
pressDelay?: number;
pressThreshold?: number;
distance?: number;
Expand Down

0 comments on commit f36aa21

Please sign in to comment.