From bb28a9de0ce1048c463b702974f2a9cd3238c9fb Mon Sep 17 00:00:00 2001 From: Alex Reardon Date: Thu, 17 May 2018 21:59:30 +1000 Subject: [PATCH] original --- src/state/action-creators.js | 40 +++++++-------- src/state/reducer.js | 14 +++++- src/view/drag-handle/drag-handle-types.js | 12 ++--- src/view/drag-handle/drag-handle.jsx | 2 +- .../sensor/create-keyboard-sensor.js | 49 +++---------------- src/view/drag-handle/sensor/sensor-types.js | 2 +- src/view/drag-handle/util/create-scheduler.js | 24 ++++----- src/view/draggable/connected-draggable.js | 11 ----- src/view/draggable/draggable-types.js | 19 +++---- src/view/draggable/draggable.jsx | 26 +++++----- 10 files changed, 76 insertions(+), 123 deletions(-) diff --git a/src/state/action-creators.js b/src/state/action-creators.js index fe1b456054..2932026ac6 100644 --- a/src/state/action-creators.js +++ b/src/state/action-creators.js @@ -141,43 +141,43 @@ export const moveByWindowScroll = (args: MoveByWindowScrollArgs): MoveByWindowSc payload: args, }); -export type MoveBackwardAction = {| - type: 'MOVE_BACKWARD', +export type MoveUpAction = {| + type: 'MOVE_UP', payload: null |} -export const moveBackward = (): MoveBackwardAction => ({ - type: 'MOVE_BACKWARD', +export const moveUp = (): MoveUpAction => ({ + type: 'MOVE_UP', payload: null, }); -export type MoveForwardAction = {| - type: 'MOVE_FORWARD', +export type MoveDownAction = {| + type: 'MOVE_DOWN', payload: null |} -export const moveForward = (): MoveForwardAction => ({ - type: 'MOVE_FORWARD', +export const moveDown = (): MoveDownAction => ({ + type: 'MOVE_DOWN', payload: null, }); -export type CrossAxisMoveForwardAction = {| - type: 'CROSS_AXIS_MOVE_FORWARD', +export type MoveRightAction = {| + type: 'MOVE_RIGHT', payload: null |} -export const crossAxisMoveForward = (): CrossAxisMoveForwardAction => ({ - type: 'CROSS_AXIS_MOVE_FORWARD', +export const moveRight = (): MoveRightAction => ({ + type: 'MOVE_RIGHT', payload: null, }); -export type CrossAxisMoveBackwardAction = {| - type: 'CROSS_AXIS_MOVE_BACKWARD', +export type MoveLeftAction = {| + type: 'MOVE_LEFT', payload: null |} -export const crossAxisMoveBackward = (): CrossAxisMoveBackwardAction => ({ - type: 'CROSS_AXIS_MOVE_BACKWARD', +export const moveLeft = (): MoveLeftAction => ({ + type: 'MOVE_LEFT', payload: null, }); @@ -264,10 +264,10 @@ export type Action = UpdateDroppableIsEnabledAction | MoveByWindowScrollAction | MoveAction | - MoveBackwardAction | - MoveForwardAction | - CrossAxisMoveForwardAction | - CrossAxisMoveBackwardAction | + MoveUpAction | + MoveDownAction | + MoveRightAction | + MoveLeftAction | DropPendingAction | DropAction | DropAnimateAction | diff --git a/src/state/reducer.js b/src/state/reducer.js index 8daddda0cb..4416433fdb 100644 --- a/src/state/reducer.js +++ b/src/state/reducer.js @@ -459,7 +459,12 @@ export default (state: State = idle, action: Action): State => { } invariant(state.phase === 'DRAGGING', `${action.type} received while not in DRAGGING phase`); - invariant(state.impact.destination, `Cannot ${action.type} if there is no previous destination`); + + // It is possible to lift a draggable in a disabled droppable + // In which case it will not have a destination + if (!state.impact.destination) { + return state; + } const isMovingForward: boolean = action.type === 'MOVE_FORWARD'; @@ -504,7 +509,12 @@ export default (state: State = idle, action: Action): State => { } invariant(state.phase === 'DRAGGING', `${action.type} received while not in DRAGGING phase`); - invariant(state.impact.destination, `Cannot ${action.type} if there is no previous destination`); + + // It is possible to lift a draggable in a disabled droppable + // In which case it will not have a destination + if (!state.impact.destination) { + return state; + } const home: DraggableLocation = { index: state.critical.draggable.index, diff --git a/src/view/drag-handle/drag-handle-types.js b/src/view/drag-handle/drag-handle-types.js index aa706de060..d67e7925d5 100644 --- a/src/view/drag-handle/drag-handle-types.js +++ b/src/view/drag-handle/drag-handle-types.js @@ -3,19 +3,17 @@ import { type Position } from 'css-box-model'; import { type Node } from 'react'; import type { AutoScrollMode, - Direction, DraggableId, - DropReason, } from '../../types'; export type Callbacks = {| onLift: ({ clientSelection: Position, autoScrollMode: AutoScrollMode }) => void, onMove: (point: Position) => void, onWindowScroll: () => void, - onMoveForward: () => void, - onMoveBackward: () => void, - onCrossAxisMoveForward: () => void, - onCrossAxisMoveBackward: () => void, + onMoveUp: () => void, + onMoveDown: () => void, + onMoveRight: () => void, + onMoveLeft: () => void, onDrop: () => void, onCancel: () => void, |} @@ -55,8 +53,6 @@ export type Props = {| isDragging: boolean, // whether the application thinks a drop is occurring isDropAnimating: boolean, - // the direction of the current droppable - direction: ?Direction, // get the ref of the draggable getDraggableRef: () => ?HTMLElement, // whether interactive elements should be permitted to start a drag diff --git a/src/view/drag-handle/drag-handle.jsx b/src/view/drag-handle/drag-handle.jsx index 633f02396a..380b31739c 100644 --- a/src/view/drag-handle/drag-handle.jsx +++ b/src/view/drag-handle/drag-handle.jsx @@ -209,7 +209,7 @@ export default class DragHandle extends Component { return; } - this.keyboardSensor.onKeyDown(event, this.props); + this.keyboardSensor.onKeyDown(event); } onMouseDown = (event: MouseEvent) => { diff --git a/src/view/drag-handle/sensor/create-keyboard-sensor.js b/src/view/drag-handle/sensor/create-keyboard-sensor.js index c83f345eb4..9f5fbf6a22 100644 --- a/src/view/drag-handle/sensor/create-keyboard-sensor.js +++ b/src/view/drag-handle/sensor/create-keyboard-sensor.js @@ -9,17 +9,11 @@ import { bindEvents, unbindEvents } from '../util/bind-events'; import supportedPageVisibilityEventName from '../util/supported-page-visibility-event-name'; import type { EventBinding } from '../util/event-types'; import type { KeyboardSensor, CreateSensorArgs } from './sensor-types'; -import type { Props } from '../drag-handle-types'; type State = {| isDragging: boolean, |} -type ExecuteBasedOnDirection = {| - vertical: Function, - horizontal: Function, -|} - type KeyMap = { [key: number]: true } @@ -65,9 +59,7 @@ export default ({ const isDragging = (): boolean => state.isDragging; const schedule = createScheduler(callbacks); - const onKeyDown = (event: KeyboardEvent, props: Props) => { - const { direction } = props; - + const onKeyDown = (event: KeyboardEvent) => { // not yet dragging if (!isDragging()) { // We may already be lifting on a child draggable. @@ -122,57 +114,28 @@ export default ({ // Movement - // already dragging - if (!direction) { - console.error('Cannot handle keyboard movement event if direction is not provided'); - // calling prevent default here as the action resulted in the drop - // this one is border line - event.preventDefault(); - cancel(); - return; - } - - const executeBasedOnDirection = (fns: ExecuteBasedOnDirection) => { - if (direction === 'vertical') { - fns.vertical(); - return; - } - fns.horizontal(); - }; - if (event.keyCode === keyCodes.arrowDown) { event.preventDefault(); - executeBasedOnDirection({ - vertical: schedule.moveForward, - horizontal: schedule.crossAxisMoveForward, - }); + schedule.moveDown(); return; } if (event.keyCode === keyCodes.arrowUp) { event.preventDefault(); - executeBasedOnDirection({ - vertical: schedule.moveBackward, - horizontal: schedule.crossAxisMoveBackward, - }); + schedule.moveUp(); return; } if (event.keyCode === keyCodes.arrowRight) { event.preventDefault(); - executeBasedOnDirection({ - vertical: schedule.crossAxisMoveForward, - horizontal: schedule.moveForward, - }); + schedule.moveRight(); return; } if (event.keyCode === keyCodes.arrowLeft) { event.preventDefault(); - executeBasedOnDirection({ - vertical: schedule.crossAxisMoveBackward, - horizontal: schedule.moveBackward, - }); + schedule.moveLeft(); + return; } // preventing scroll jumping at this time diff --git a/src/view/drag-handle/sensor/sensor-types.js b/src/view/drag-handle/sensor/sensor-types.js index 953d048319..bb4d9996d5 100644 --- a/src/view/drag-handle/sensor/sensor-types.js +++ b/src/view/drag-handle/sensor/sensor-types.js @@ -27,7 +27,7 @@ export type MouseSensor = {| export type KeyboardSensor = {| ...SensorBase, - onKeyDown: (event: KeyboardEvent, props: Props) => void, + onKeyDown: (event: KeyboardEvent) => void, |} export type TouchSensor = {| diff --git a/src/view/drag-handle/util/create-scheduler.js b/src/view/drag-handle/util/create-scheduler.js index 2b06de7c05..1b2d671947 100644 --- a/src/view/drag-handle/util/create-scheduler.js +++ b/src/view/drag-handle/util/create-scheduler.js @@ -11,29 +11,29 @@ export default (callbacks: Callbacks) => { }); const move = rafSchd((point: Position) => memoizedMove(point.x, point.y)); - const moveForward = rafSchd(callbacks.onMoveForward); - const moveBackward = rafSchd(callbacks.onMoveBackward); - const crossAxisMoveForward = rafSchd(callbacks.onCrossAxisMoveForward); - const crossAxisMoveBackward = rafSchd(callbacks.onCrossAxisMoveBackward); + const moveUp = rafSchd(callbacks.onMoveUp); + const moveDown = rafSchd(callbacks.onMoveDown); + const moveRight = rafSchd(callbacks.onMoveRight); + const moveLeft = rafSchd(callbacks.onMoveLeft); const windowScrollMove = rafSchd(callbacks.onWindowScroll); const cancel = () => { // cancel all of the next animation frames move.cancel(); - moveForward.cancel(); - moveBackward.cancel(); - crossAxisMoveForward.cancel(); - crossAxisMoveBackward.cancel(); + moveUp.cancel(); + moveDown.cancel(); + moveRight.cancel(); + moveLeft.cancel(); windowScrollMove.cancel(); }; return { move, - moveForward, - moveBackward, - crossAxisMoveForward, - crossAxisMoveBackward, + moveUp, + moveDown, + moveRight, + moveLeft, windowScrollMove, cancel, }; diff --git a/src/view/draggable/connected-draggable.js b/src/view/draggable/connected-draggable.js index b6c9c08c25..e27bdcc33a 100644 --- a/src/view/draggable/connected-draggable.js +++ b/src/view/draggable/connected-draggable.js @@ -24,7 +24,6 @@ import type { DroppableId, DragMovement, DraggableDimension, - Direction, Displacement, PendingDrop, } from '../../types'; @@ -48,7 +47,6 @@ const defaultMapProps: MapProps = { shouldAnimateDisplacement: true, // these properties are only populated when the item is dragging dimension: null, - direction: null, draggingOver: null, }; @@ -70,7 +68,6 @@ export const makeMapStateToProps = (): Selector => { // not relevant shouldAnimateDragMovement: false, dimension: null, - direction: null, draggingOver: null, }), ); @@ -79,8 +76,6 @@ export const makeMapStateToProps = (): Selector => { offset: Position, shouldAnimateDragMovement: boolean, dimension: DraggableDimension, - // direction of the droppable you are over - direction: ?Direction, // the id of the droppable you are over draggingOver: ?DroppableId, ): MapProps => ({ @@ -90,7 +85,6 @@ export const makeMapStateToProps = (): Selector => { offset, shouldAnimateDragMovement, dimension, - direction, draggingOver, })); @@ -132,7 +126,6 @@ export const makeMapStateToProps = (): Selector => { const offset: Position = state.current.client.offset; const dimension: DraggableDimension = state.dimensions.draggables[ownProps.draggableId]; - const direction: ?Direction = state.impact.direction; const shouldAnimateDragMovement: boolean = state.shouldAnimate; const draggingOver: ?DroppableId = state.impact.destination ? state.impact.destination.droppableId : @@ -142,7 +135,6 @@ export const makeMapStateToProps = (): Selector => { memoizedOffset(offset.x, offset.y), shouldAnimateDragMovement, dimension, - direction, draggingOver, ); } @@ -156,8 +148,6 @@ export const makeMapStateToProps = (): Selector => { const draggingOver: ?DroppableId = pending.result.destination ? pending.result.destination.droppableId : null; - const direction: ?Direction = pending.impact.direction ? - pending.impact.direction : null; // not memoized as it is the only execution return { @@ -167,7 +157,6 @@ export const makeMapStateToProps = (): Selector => { // still need to provide the dimension for the placeholder dimension: state.dimensions.draggables[ownProps.draggableId], draggingOver, - direction, // animation will be controlled by the isDropAnimating flag shouldAnimateDragMovement: false, // not relevant, diff --git a/src/view/draggable/draggable-types.js b/src/view/draggable/draggable-types.js index 8ac3060ae6..5e510e1324 100644 --- a/src/view/draggable/draggable-types.js +++ b/src/view/draggable/draggable-types.js @@ -5,7 +5,6 @@ import type { DraggableId, DroppableId, DraggableDimension, - Direction, ZIndex, State, } from '../../types'; @@ -13,10 +12,10 @@ import { lift, move, moveByWindowScroll, - moveForward, - moveBackward, - crossAxisMoveForward, - crossAxisMoveBackward, + moveUp, + moveDown, + moveRight, + moveLeft, drop, dropAnimationFinished, } from '../../state/action-creators'; @@ -117,10 +116,10 @@ export type DispatchProps = {| lift: typeof lift, move: typeof move, moveByWindowScroll: typeof moveByWindowScroll, - moveForward: typeof moveForward, - moveBackward: typeof moveBackward, - crossAxisMoveForward: typeof crossAxisMoveForward, - crossAxisMoveBackward: typeof crossAxisMoveBackward, + moveUp: typeof moveUp, + moveDown: typeof moveDown, + moveRight: typeof moveRight, + moveLeft: typeof moveLeft, drop: typeof drop, dropAnimationFinished: typeof dropAnimationFinished, |} @@ -136,8 +135,6 @@ export type MapProps = {| isDropAnimating: boolean, offset: Position, // only provided when dragging - // can be null if not over a droppable - direction: ?Direction, dimension: ?DraggableDimension, draggingOver: ?DroppableId, |} diff --git a/src/view/draggable/draggable.jsx b/src/view/draggable/draggable.jsx index eb7d3b4788..0ded2f09ab 100644 --- a/src/view/draggable/draggable.jsx +++ b/src/view/draggable/draggable.jsx @@ -62,10 +62,10 @@ export default class Draggable extends Component { onMove: this.onMove, onDrop: this.onDrop, onCancel: this.onCancel, - onMoveBackward: this.onMoveBackward, - onMoveForward: this.onMoveForward, - onCrossAxisMoveForward: this.onCrossAxisMoveForward, - onCrossAxisMoveBackward: this.onCrossAxisMoveBackward, + onMoveUp: this.onMoveUp, + onMoveDown: this.onMoveDown, + onMoveRight: this.onMoveRight, + onMoveLeft: this.onMoveLeft, onWindowScroll: this.onWindowScroll, }; @@ -141,24 +141,24 @@ export default class Draggable extends Component { move({ client: clientSelection, shouldAnimate: false }); } - onMoveForward = () => { + onMoveUp = () => { this.throwIfCannotDrag(); - this.props.moveForward(); + this.props.moveUp(); } - onMoveBackward = () => { + onMoveDown = () => { this.throwIfCannotDrag(); - this.props.moveBackward(); + this.props.moveDown(); } - onCrossAxisMoveForward = () => { + onMoveRight = () => { this.throwIfCannotDrag(); - this.props.crossAxisMoveForward(); + this.props.moveRight(); } - onCrossAxisMoveBackward = () => { + onMoveLeft = () => { this.throwIfCannotDrag(); - this.props.crossAxisMoveBackward(); + this.props.moveLeft(); } onWindowScroll = () => { @@ -356,7 +356,6 @@ export default class Draggable extends Component { isDragging, isDropAnimating, isDragDisabled, - direction, shouldAnimateDragMovement, disableInteractiveElementBlocking, } = this.props; @@ -386,7 +385,6 @@ export default class Draggable extends Component { draggableId={draggableId} isDragging={isDragging} isDropAnimating={isDropAnimating} - direction={direction} isEnabled={!isDragDisabled} callbacks={this.callbacks} getDraggableRef={this.getDraggableRef}