diff --git a/.size-snapshot.json b/.size-snapshot.json index 424d87419e..c6e93a2219 100644 --- a/.size-snapshot.json +++ b/.size-snapshot.json @@ -1,18 +1,18 @@ { "dist/react-beautiful-dnd.js": { - "bundled": 364998, - "minified": 133574, - "gzipped": 39437 + "bundled": 365855, + "minified": 133626, + "gzipped": 39508 }, "dist/react-beautiful-dnd.min.js": { - "bundled": 306810, - "minified": 108365, - "gzipped": 31340 + "bundled": 307667, + "minified": 108417, + "gzipped": 31402 }, "dist/react-beautiful-dnd.esm.js": { - "bundled": 240910, - "minified": 125371, - "gzipped": 32650, + "bundled": 241737, + "minified": 125403, + "gzipped": 32719, "treeshaked": { "rollup": { "code": 21121, diff --git a/docs/sensors/keyboard.md b/docs/sensors/keyboard.md index 9c39f51636..bdb0a0ead1 100644 --- a/docs/sensors/keyboard.md +++ b/docs/sensors/keyboard.md @@ -13,22 +13,25 @@ Once a drag is started the following keyboard shortcuts can be used: - **spacebar** space - drop the `` - **escape** esc - cancel the drag +### Moving a draggable within a droppable + The following commands are also available but they depend on the `type` of `` that the `` is _currently_ in: -### Within a vertical list +#### Within a vertical list - **Up arrow** ↑ - move a `` upwards in a `` - **Down arrow** ↓ - move a `` downwards in a `` -- **Right arrow** → - move a `` to a `` to the _right_ of the current `` (move to new list) -- **Left arrow** ← - move a `` to a `` to the _left_ of the current `` (move to new list) -### Within a horizontal list +#### Within a horizontal list -- **Up arrow** ↑ - move a `` to a `` to _above_ the current `` (move to new list) -- **Down arrow** ↓ - move a `` to a `` to _below_ the current `` (move to new list) - **Right arrow** → - move a `` to the _right_ in the current `` - **Left arrow** ← - move a `` to the _left_ in the current `` +### Moving a draggable to another droppable + +- **Arrows** ↑ ↓ → ← - Move draggables to the nearest droppable. +(If the desired destination draggable exists in the same dimension that the draggables are oriented, the draggable must first reach the outermost position before it can be moved to the droppable.) + During a drag the following standard keyboard events have their default behaviour prevented (through `event.preventDefault()`) to avoid a bad experience: - **tab** tab ↹ - preventing tabbing diff --git a/src/state/move-in-direction/index.js b/src/state/move-in-direction/index.js index 7080aa1980..faebe34228 100644 --- a/src/state/move-in-direction/index.js +++ b/src/state/move-in-direction/index.js @@ -11,7 +11,7 @@ import type { DragImpact, } from '../../types'; import moveToNextPlace from './move-to-next-place'; -import moveCrossAxis from './move-cross-axis'; +import moveAxis from './move-axis'; import whatIsDraggedOver from '../droppable/what-is-dragged-over'; type Args = {| @@ -59,26 +59,32 @@ export default ({ state, type }: Args): ?PublicResult => { state.current.page.borderBoxCenter; const { draggables, droppables } = state.dimensions; - return isMovingOnMainAxis - ? moveToNextPlace({ - isMovingForward, - previousPageBorderBoxCenter, - draggable, - destination: isOver, - draggables, - viewport: state.viewport, - previousClientSelection: state.current.client.selection, - previousImpact: state.impact, - afterCritical: state.afterCritical, - }) - : moveCrossAxis({ - isMovingForward, - previousPageBorderBoxCenter, - draggable, - isOver, - draggables, - droppables, - viewport: state.viewport, - afterCritical: state.afterCritical, - }); + if (isMovingOnMainAxis) { + const moveToNextPlaceResult = moveToNextPlace({ + isMovingForward, + previousPageBorderBoxCenter, + draggable, + destination: isOver, + draggables, + viewport: state.viewport, + previousClientSelection: state.current.client.selection, + previousImpact: state.impact, + afterCritical: state.afterCritical, + }); + if (moveToNextPlaceResult) { + return moveToNextPlaceResult; + } + } + + return moveAxis({ + isMovingOnMainAxis, + isMovingForward, + previousPageBorderBoxCenter, + draggable, + isOver, + draggables, + droppables, + viewport: state.viewport, + afterCritical: state.afterCritical, + }); }; diff --git a/src/state/move-in-direction/move-cross-axis/get-best-cross-axis-droppable.js b/src/state/move-in-direction/move-axis/get-best-axis-droppable.js similarity index 72% rename from src/state/move-in-direction/move-cross-axis/get-best-cross-axis-droppable.js rename to src/state/move-in-direction/move-axis/get-best-axis-droppable.js index 6f732bb5ec..7738e699c9 100644 --- a/src/state/move-in-direction/move-cross-axis/get-best-cross-axis-droppable.js +++ b/src/state/move-in-direction/move-axis/get-best-axis-droppable.js @@ -14,6 +14,7 @@ import type { } from '../../../types'; type GetBestDroppableArgs = {| + isMovingOnMainAxis?: boolean, isMovingForward: boolean, // the current position of the dragging item pageBorderBoxCenter: Position, @@ -33,6 +34,7 @@ const getKnownActive = (droppable: DroppableDimension): Rect => { }; export default ({ + isMovingOnMainAxis, isMovingForward, pageBorderBoxCenter, source, @@ -46,7 +48,23 @@ export default ({ } const axis: Axis = source.axis; - const isBetweenSourceClipped = isWithin(active[axis.start], active[axis.end]); + + const movementAxisStart = isMovingOnMainAxis + ? axis.start + : axis.crossAxisStart; + const movementAxisEnd = isMovingOnMainAxis ? axis.end : axis.crossAxisEnd; + const transverseAxisStart = isMovingOnMainAxis + ? axis.crossAxisStart + : axis.start; + const transverseAxisEnd = isMovingOnMainAxis ? axis.crossAxisEnd : axis.end; + const transverseAxisLine = isMovingOnMainAxis + ? axis.crossAxisLine + : axis.line; + + const isBetweenSourceClipped = isWithin( + active[transverseAxisStart], + active[transverseAxisEnd], + ); const candidates: DroppableDimension[] = toDroppableList(droppables) // Remove the source droppable from the list .filter((droppable: DroppableDimension): boolean => droppable !== source) @@ -65,31 +83,31 @@ export default ({ // is the target in front of the source on the cross axis? if (isMovingForward) { - return active[axis.crossAxisEnd] < activeOfTarget[axis.crossAxisEnd]; + return active[movementAxisEnd] < activeOfTarget[movementAxisEnd]; } // is the target behind the source on the cross axis? - return activeOfTarget[axis.crossAxisStart] < active[axis.crossAxisStart]; + return activeOfTarget[movementAxisStart] < active[movementAxisStart]; }) // Must have some overlap on the main axis .filter((droppable: DroppableDimension): boolean => { const activeOfTarget: Rect = getKnownActive(droppable); const isBetweenDestinationClipped = isWithin( - activeOfTarget[axis.start], - activeOfTarget[axis.end], + activeOfTarget[transverseAxisStart], + activeOfTarget[transverseAxisEnd], ); return ( - isBetweenSourceClipped(activeOfTarget[axis.start]) || - isBetweenSourceClipped(activeOfTarget[axis.end]) || - isBetweenDestinationClipped(active[axis.start]) || - isBetweenDestinationClipped(active[axis.end]) + isBetweenSourceClipped(activeOfTarget[transverseAxisStart]) || + isBetweenSourceClipped(activeOfTarget[transverseAxisEnd]) || + isBetweenDestinationClipped(active[transverseAxisStart]) || + isBetweenDestinationClipped(active[transverseAxisEnd]) ); }) // Sort on the cross axis .sort((a: DroppableDimension, b: DroppableDimension) => { - const first: number = getKnownActive(a)[axis.crossAxisStart]; - const second: number = getKnownActive(b)[axis.crossAxisStart]; + const first: number = getKnownActive(a)[movementAxisStart]; + const second: number = getKnownActive(b)[movementAxisStart]; if (isMovingForward) { return first - second; @@ -103,8 +121,8 @@ export default ({ index: number, array: DroppableDimension[], ): boolean => - getKnownActive(droppable)[axis.crossAxisStart] === - getKnownActive(array[0])[axis.crossAxisStart], + getKnownActive(droppable)[movementAxisStart] === + getKnownActive(array[0])[movementAxisStart], ); // no possible candidates @@ -124,10 +142,10 @@ export default ({ const contains: DroppableDimension[] = candidates.filter( (droppable: DroppableDimension) => { const isWithinDroppable = isWithin( - getKnownActive(droppable)[axis.start], - getKnownActive(droppable)[axis.end], + getKnownActive(droppable)[transverseAxisStart], + getKnownActive(droppable)[transverseAxisEnd], ); - return isWithinDroppable(pageBorderBoxCenter[axis.line]); + return isWithinDroppable(pageBorderBoxCenter[transverseAxisLine]); }, ); @@ -140,7 +158,8 @@ export default ({ // sort on the main axis and choose the first return contains.sort( (a: DroppableDimension, b: DroppableDimension): number => - getKnownActive(a)[axis.start] - getKnownActive(b)[axis.start], + getKnownActive(a)[transverseAxisStart] - + getKnownActive(b)[transverseAxisStart], )[0]; } @@ -162,7 +181,10 @@ export default ({ // They both have the same distance - // choose the one that is first on the main axis - return getKnownActive(a)[axis.start] - getKnownActive(b)[axis.start]; + return ( + getKnownActive(a)[transverseAxisStart] - + getKnownActive(b)[transverseAxisStart] + ); }, )[0]; }; diff --git a/src/state/move-in-direction/move-cross-axis/get-closest-draggable.js b/src/state/move-in-direction/move-axis/get-closest-draggable.js similarity index 100% rename from src/state/move-in-direction/move-cross-axis/get-closest-draggable.js rename to src/state/move-in-direction/move-axis/get-closest-draggable.js diff --git a/src/state/move-in-direction/move-cross-axis/index.js b/src/state/move-in-direction/move-axis/index.js similarity index 92% rename from src/state/move-in-direction/move-cross-axis/index.js rename to src/state/move-in-direction/move-axis/index.js index e87ede0f6f..4034ae99cf 100644 --- a/src/state/move-in-direction/move-cross-axis/index.js +++ b/src/state/move-in-direction/move-axis/index.js @@ -10,7 +10,7 @@ import type { Viewport, LiftEffect, } from '../../../types'; -import getBestCrossAxisDroppable from './get-best-cross-axis-droppable'; +import getBestAxisDroppable from './get-best-axis-droppable'; import getClosestDraggable from './get-closest-draggable'; // import moveToNewDroppable from './move-to-new-droppable'; import getDraggablesInsideDroppable from '../../get-draggables-inside-droppable'; @@ -19,6 +19,7 @@ import getPageBorderBoxCenter from '../../get-center-from-impact/get-page-border import moveToNewDroppable from './move-to-new-droppable'; type Args = {| + isMovingOnMainAxis?: boolean, isMovingForward: boolean, // the current page center of the dragging item previousPageBorderBoxCenter: Position, @@ -35,6 +36,7 @@ type Args = {| |}; export default ({ + isMovingOnMainAxis, isMovingForward, previousPageBorderBoxCenter, draggable, @@ -46,7 +48,8 @@ export default ({ }: Args): ?PublicResult => { // not considering the container scroll changes as container scrolling cancels a keyboard drag - const destination: ?DroppableDimension = getBestCrossAxisDroppable({ + const destination: ?DroppableDimension = getBestAxisDroppable({ + isMovingOnMainAxis, isMovingForward, pageBorderBoxCenter: previousPageBorderBoxCenter, source: isOver, diff --git a/src/state/move-in-direction/move-cross-axis/move-to-new-droppable.js b/src/state/move-in-direction/move-axis/move-to-new-droppable.js similarity index 100% rename from src/state/move-in-direction/move-cross-axis/move-to-new-droppable.js rename to src/state/move-in-direction/move-axis/move-to-new-droppable.js diff --git a/src/state/move-in-direction/move-cross-axis/without-starting-displacement.js b/src/state/move-in-direction/move-axis/without-starting-displacement.js similarity index 100% rename from src/state/move-in-direction/move-cross-axis/without-starting-displacement.js rename to src/state/move-in-direction/move-axis/without-starting-displacement.js diff --git a/stories/3-board.stories.stories.js b/stories/3-board.stories.stories.js index 1337ff3af4..c5123a4673 100644 --- a/stories/3-board.stories.stories.js +++ b/stories/3-board.stories.stories.js @@ -11,6 +11,7 @@ const data = { storiesOf('board', module) .add('simple', () => ) + .add('vertically-stacked', () => ) .add('dragging a clone', () => ) .add('medium data set', () => ) .add('large data set', () => ) diff --git a/stories/src/board/board.jsx b/stories/src/board/board.jsx index e635c801cd..4e8f61d3ba 100644 --- a/stories/src/board/board.jsx +++ b/stories/src/board/board.jsx @@ -23,8 +23,8 @@ const Container = styled.div` background-color: ${colors.B100}; min-height: 100vh; /* like display:flex but will allow bleeding over the window width */ - min-width: 100vw; display: inline-flex; + flex-direction: ${({ vertical }) => (vertical ? 'column' : 'row')}; `; type Props = {| @@ -33,6 +33,7 @@ type Props = {| isCombineEnabled?: boolean, containerHeight?: string, useClone?: boolean, + vertical?: boolean, |}; type State = {| @@ -123,6 +124,7 @@ export default class Board extends Component { useClone, isCombineEnabled, withScrollableColumns, + vertical, } = this.props; const board = ( @@ -134,7 +136,11 @@ export default class Board extends Component { isCombineEnabled={isCombineEnabled} > {(provided: DroppableProvided) => ( - + {ordered.map((key: string, index: number) => ( { [forward.descriptor.id]: forward, }; - const result: ?DroppableDimension = getBestCrossAxisDroppable({ + const result: ?DroppableDimension = getBestAxisDroppable({ isMovingForward: true, pageBorderBoxCenter: source.page.borderBox.center, source, @@ -97,7 +97,7 @@ describe('get best cross axis droppable', () => { [source.descriptor.id]: source, }; - const result: ?DroppableDimension = getBestCrossAxisDroppable({ + const result: ?DroppableDimension = getBestAxisDroppable({ // moving backwards isMovingForward: false, pageBorderBoxCenter: source.page.borderBox.center, @@ -143,7 +143,7 @@ describe('get best cross axis droppable', () => { [source.descriptor.id]: source, }; - const result: ?DroppableDimension = getBestCrossAxisDroppable({ + const result: ?DroppableDimension = getBestAxisDroppable({ isMovingForward: true, pageBorderBoxCenter: source.page.borderBox.center, source, @@ -153,7 +153,7 @@ describe('get best cross axis droppable', () => { expect(result).toBe(null); // checking that it would have been returned if was moving in the other direction - const result2: ?DroppableDimension = getBestCrossAxisDroppable({ + const result2: ?DroppableDimension = getBestAxisDroppable({ isMovingForward: false, pageBorderBoxCenter: source.page.borderBox.center, source, @@ -198,7 +198,7 @@ describe('get best cross axis droppable', () => { [disabled.descriptor.id]: disabled, }; - const result: ?DroppableDimension = getBestCrossAxisDroppable({ + const result: ?DroppableDimension = getBestAxisDroppable({ isMovingForward: true, pageBorderBoxCenter: source.page.borderBox.center, source, @@ -243,7 +243,7 @@ describe('get best cross axis droppable', () => { [outsideViewport.descriptor.id]: outsideViewport, }; - const result: ?DroppableDimension = getBestCrossAxisDroppable({ + const result: ?DroppableDimension = getBestAxisDroppable({ isMovingForward: true, pageBorderBoxCenter: source.page.borderBox.center, source, @@ -290,7 +290,7 @@ describe('get best cross axis droppable', () => { [noOverlap.descriptor.id]: noOverlap, }; - const result: ?DroppableDimension = getBestCrossAxisDroppable({ + const result: ?DroppableDimension = getBestAxisDroppable({ isMovingForward: true, pageBorderBoxCenter: source.page.borderBox.center, source, @@ -377,7 +377,7 @@ describe('get best cross axis droppable', () => { x: 10, }; - const result: ?DroppableDimension = getBestCrossAxisDroppable({ + const result: ?DroppableDimension = getBestAxisDroppable({ isMovingForward: true, pageBorderBoxCenter: center, source, @@ -397,7 +397,7 @@ describe('get best cross axis droppable', () => { // if we're clipping dimensions correctly we should land in sibling2 // if not, we'll land in sibling1 - const result: ?DroppableDimension = getBestCrossAxisDroppable({ + const result: ?DroppableDimension = getBestAxisDroppable({ isMovingForward: true, pageBorderBoxCenter: center, source, @@ -417,7 +417,7 @@ describe('get best cross axis droppable', () => { x: 10, }; - const result: ?DroppableDimension = getBestCrossAxisDroppable({ + const result: ?DroppableDimension = getBestAxisDroppable({ isMovingForward: true, pageBorderBoxCenter: center, source, @@ -436,7 +436,7 @@ describe('get best cross axis droppable', () => { x: 10, }; - const result: ?DroppableDimension = getBestCrossAxisDroppable({ + const result: ?DroppableDimension = getBestAxisDroppable({ isMovingForward: true, pageBorderBoxCenter: center, source, @@ -448,7 +448,7 @@ describe('get best cross axis droppable', () => { // checking that center position was selected correctly const center2: Position = add(center, { x: 0, y: 1 }); - const result2: ?DroppableDimension = getBestCrossAxisDroppable({ + const result2: ?DroppableDimension = getBestAxisDroppable({ isMovingForward: true, pageBorderBoxCenter: center2, source, @@ -498,7 +498,7 @@ describe('get best cross axis droppable', () => { [forward.descriptor.id]: forward, }; - const result: ?DroppableDimension = getBestCrossAxisDroppable({ + const result: ?DroppableDimension = getBestAxisDroppable({ isMovingForward: true, pageBorderBoxCenter: source.page.borderBox.center, source, @@ -543,7 +543,7 @@ describe('get best cross axis droppable', () => { [source.descriptor.id]: source, }; - const result: ?DroppableDimension = getBestCrossAxisDroppable({ + const result: ?DroppableDimension = getBestAxisDroppable({ // moving backwards isMovingForward: false, pageBorderBoxCenter: source.page.borderBox.center, @@ -590,7 +590,7 @@ describe('get best cross axis droppable', () => { }; // now moving in the other direction - const result: ?DroppableDimension = getBestCrossAxisDroppable({ + const result: ?DroppableDimension = getBestAxisDroppable({ isMovingForward: true, pageBorderBoxCenter: source.page.borderBox.center, source, @@ -600,7 +600,7 @@ describe('get best cross axis droppable', () => { expect(result).toBe(null); // Ensuring that normally it would be returned if moving in the right direction - const result2: ?DroppableDimension = getBestCrossAxisDroppable({ + const result2: ?DroppableDimension = getBestAxisDroppable({ isMovingForward: false, pageBorderBoxCenter: source.page.borderBox.center, source, @@ -645,7 +645,7 @@ describe('get best cross axis droppable', () => { [disabled.descriptor.id]: disabled, }; - const result: ?DroppableDimension = getBestCrossAxisDroppable({ + const result: ?DroppableDimension = getBestAxisDroppable({ isMovingForward: true, pageBorderBoxCenter: source.page.borderBox.center, source, @@ -708,7 +708,7 @@ describe('get best cross axis droppable', () => { .id]: subjectNotVisibleThroughFrame, }; - const result: ?DroppableDimension = getBestCrossAxisDroppable({ + const result: ?DroppableDimension = getBestAxisDroppable({ isMovingForward: true, pageBorderBoxCenter: source.page.borderBox.center, source, @@ -753,7 +753,7 @@ describe('get best cross axis droppable', () => { [notInViewport.descriptor.id]: notInViewport, }; - const result: ?DroppableDimension = getBestCrossAxisDroppable({ + const result: ?DroppableDimension = getBestAxisDroppable({ isMovingForward: true, pageBorderBoxCenter: source.page.borderBox.center, source, @@ -801,7 +801,7 @@ describe('get best cross axis droppable', () => { [noOverlap.descriptor.id]: noOverlap, }; - const result: ?DroppableDimension = getBestCrossAxisDroppable({ + const result: ?DroppableDimension = getBestAxisDroppable({ isMovingForward: true, pageBorderBoxCenter: source.page.borderBox.center, source, @@ -873,7 +873,7 @@ describe('get best cross axis droppable', () => { x: 50, }; - const result: ?DroppableDimension = getBestCrossAxisDroppable({ + const result: ?DroppableDimension = getBestAxisDroppable({ isMovingForward: true, pageBorderBoxCenter: center, source, @@ -894,7 +894,7 @@ describe('get best cross axis droppable', () => { x: 10, }; - const result: ?DroppableDimension = getBestCrossAxisDroppable({ + const result: ?DroppableDimension = getBestAxisDroppable({ isMovingForward: true, pageBorderBoxCenter: center, source, @@ -913,7 +913,7 @@ describe('get best cross axis droppable', () => { x: 40, }; - const result: ?DroppableDimension = getBestCrossAxisDroppable({ + const result: ?DroppableDimension = getBestAxisDroppable({ isMovingForward: true, pageBorderBoxCenter: center, source, @@ -926,7 +926,7 @@ describe('get best cross axis droppable', () => { // checking that center point is correct const center2: Position = add(center, { y: 0, x: 1 }); - const result2: ?DroppableDimension = getBestCrossAxisDroppable({ + const result2: ?DroppableDimension = getBestAxisDroppable({ isMovingForward: true, pageBorderBoxCenter: center2, source, @@ -977,7 +977,7 @@ describe('get best cross axis droppable', () => { [forward.descriptor.id]: forward, }; - const result: ?DroppableDimension = getBestCrossAxisDroppable({ + const result: ?DroppableDimension = getBestAxisDroppable({ isMovingForward: true, pageBorderBoxCenter: source.page.borderBox.center, source, @@ -1018,7 +1018,7 @@ describe('get best cross axis droppable', () => { [forward.descriptor.id]: forward, }; - const result: ?DroppableDimension = getBestCrossAxisDroppable({ + const result: ?DroppableDimension = getBestAxisDroppable({ isMovingForward: true, pageBorderBoxCenter: source.page.borderBox.center, source, @@ -1065,7 +1065,7 @@ describe('get best cross axis droppable', () => { [forward.descriptor.id]: forward, }; - const result: ?DroppableDimension = getBestCrossAxisDroppable({ + const result: ?DroppableDimension = getBestAxisDroppable({ isMovingForward: true, pageBorderBoxCenter: source.page.borderBox.center, source, @@ -1111,7 +1111,7 @@ describe('get best cross axis droppable', () => { [backwards.descriptor.id]: backwards, }; - const result: ?DroppableDimension = getBestCrossAxisDroppable({ + const result: ?DroppableDimension = getBestAxisDroppable({ isMovingForward: false, pageBorderBoxCenter: source.page.borderBox.center, source, @@ -1152,7 +1152,7 @@ describe('get best cross axis droppable', () => { [backward.descriptor.id]: backward, }; - const result: ?DroppableDimension = getBestCrossAxisDroppable({ + const result: ?DroppableDimension = getBestAxisDroppable({ isMovingForward: false, pageBorderBoxCenter: source.page.borderBox.center, source, @@ -1199,7 +1199,7 @@ describe('get best cross axis droppable', () => { [backward.descriptor.id]: backward, }; - const result: ?DroppableDimension = getBestCrossAxisDroppable({ + const result: ?DroppableDimension = getBestAxisDroppable({ isMovingForward: true, pageBorderBoxCenter: source.page.borderBox.center, source, diff --git a/test/unit/state/move-in-direction/move-cross-axis/get-closest-draggable/with-starting-displacement.spec.js b/test/unit/state/move-in-direction/move-cross-axis/get-closest-draggable/with-starting-displacement.spec.js index 0c00a9999c..b47be3ebfe 100644 --- a/test/unit/state/move-in-direction/move-cross-axis/get-closest-draggable/with-starting-displacement.spec.js +++ b/test/unit/state/move-in-direction/move-cross-axis/get-closest-draggable/with-starting-displacement.spec.js @@ -9,7 +9,7 @@ import type { import { horizontal, vertical } from '../../../../../../src/state/axis'; import { toDraggableMap } from '../../../../../../src/state/dimension-structures'; import getLiftEffect from '../../../../../../src/state/get-lift-effect'; -import getClosestDraggable from '../../../../../../src/state/move-in-direction/move-cross-axis/get-closest-draggable'; +import getClosestDraggable from '../../../../../../src/state/move-in-direction/move-axis/get-closest-draggable'; import { negate, patch } from '../../../../../../src/state/position'; import scrollViewport from '../../../../../../src/state/scroll-viewport'; import { offsetByPosition } from '../../../../../../src/state/spacing'; diff --git a/test/unit/state/move-in-direction/move-cross-axis/get-closest-draggable/without-starting-displacement.spec.js b/test/unit/state/move-in-direction/move-cross-axis/get-closest-draggable/without-starting-displacement.spec.js index ebab82c731..d2335cc9a4 100644 --- a/test/unit/state/move-in-direction/move-cross-axis/get-closest-draggable/without-starting-displacement.spec.js +++ b/test/unit/state/move-in-direction/move-cross-axis/get-closest-draggable/without-starting-displacement.spec.js @@ -6,7 +6,7 @@ import type { DroppableDimension, Viewport, } from '../../../../../../src/types'; -import getClosestDraggable from '../../../../../../src/state/move-in-direction/move-cross-axis/get-closest-draggable'; +import getClosestDraggable from '../../../../../../src/state/move-in-direction/move-axis/get-closest-draggable'; import scrollDroppable from '../../../../../../src/state/droppable/scroll-droppable'; import { add, distance, patch } from '../../../../../../src/state/position'; import { diff --git a/test/unit/state/move-in-direction/move-cross-axis/move-to-new-droppable/to-foreign-list.spec.js b/test/unit/state/move-in-direction/move-cross-axis/move-to-new-droppable/to-foreign-list.spec.js index 0fe520305c..74450ec301 100644 --- a/test/unit/state/move-in-direction/move-cross-axis/move-to-new-droppable/to-foreign-list.spec.js +++ b/test/unit/state/move-in-direction/move-cross-axis/move-to-new-droppable/to-foreign-list.spec.js @@ -13,7 +13,7 @@ import scrollDroppable from '../../../../../../src/state/droppable/scroll-droppa import { goIntoStart } from '../../../../../../src/state/get-center-from-impact/move-relative-to'; import getDisplacedBy from '../../../../../../src/state/get-displaced-by'; import getLiftEffect from '../../../../../../src/state/get-lift-effect'; -import moveToNewDroppable from '../../../../../../src/state/move-in-direction/move-cross-axis/move-to-new-droppable'; +import moveToNewDroppable from '../../../../../../src/state/move-in-direction/move-axis/move-to-new-droppable'; import { add, negate, diff --git a/test/unit/state/move-in-direction/move-cross-axis/move-to-new-droppable/to-home-list.spec.js b/test/unit/state/move-in-direction/move-cross-axis/move-to-new-droppable/to-home-list.spec.js index e69f826887..2bd00a8832 100644 --- a/test/unit/state/move-in-direction/move-cross-axis/move-to-new-droppable/to-home-list.spec.js +++ b/test/unit/state/move-in-direction/move-cross-axis/move-to-new-droppable/to-home-list.spec.js @@ -10,7 +10,7 @@ import { invariant } from '../../../../../../src/invariant'; import { vertical, horizontal } from '../../../../../../src/state/axis'; import getDisplacedBy from '../../../../../../src/state/get-displaced-by'; import getLiftEffect from '../../../../../../src/state/get-lift-effect'; -import moveToNewDroppable from '../../../../../../src/state/move-in-direction/move-cross-axis/move-to-new-droppable'; +import moveToNewDroppable from '../../../../../../src/state/move-in-direction/move-axis/move-to-new-droppable'; import { getPreset } from '../../../../../util/dimension'; import { getForcedDisplacement } from '../../../../../util/impact'; import { emptyGroups } from '../../../../../../src/state/no-impact'; diff --git a/test/unit/state/move-in-direction/move-cross-axis/no-visible-targets-in-list.spec.js b/test/unit/state/move-in-direction/move-cross-axis/no-visible-targets-in-list.spec.js index 16f508191d..900fc71835 100644 --- a/test/unit/state/move-in-direction/move-cross-axis/no-visible-targets-in-list.spec.js +++ b/test/unit/state/move-in-direction/move-cross-axis/no-visible-targets-in-list.spec.js @@ -7,7 +7,7 @@ import type { DraggableDimensionMap, DroppableDimensionMap, } from '../../../../../src/types'; -import moveCrossAxis from '../../../../../src/state/move-in-direction/move-cross-axis'; +import moveAxis from '../../../../../src/state/move-in-direction/move-axis'; import getViewport from '../../../../../src/view/window/get-viewport'; import { getPreset, @@ -19,8 +19,8 @@ import getLiftEffect from '../../../../../src/state/get-lift-effect'; const preset = getPreset(); const viewport: Viewport = getViewport(); -// The functionality of move-cross-axis is covered by other files in this folder. -// This spec file is directed any any logic in move-cross-axis/index.js +// The functionality of move-axis is covered by other files in this folder. +// This spec file is directed any any logic in move-axis/index.js it('should return null if there are draggables in a destination list but none are visible', () => { const custom: DroppableDimension = getDroppableDimension({ @@ -66,7 +66,8 @@ it('should return null if there are draggables in a destination list but none ar viewport: preset.viewport, }); - const result: ?PublicResult = moveCrossAxis({ + const result: ?PublicResult = moveAxis({ + isMovingOnMainAxis: false, isMovingForward: true, previousPageBorderBoxCenter: preset.inHome1.page.borderBox.center, draggable: preset.inHome1,