Removable items by moving them out of bounds

.storybook/example.stories.js

@@ -5,6 +5,7 @@ import Table from '../examples/Table';
 import TableAuto from '../examples/TableAuto';
 import SuperSimple from '../examples/SuperSimple';
 import Removable from '../examples/Removable';
+import RemovableByMove from '../examples/RemovableByMove';
 import Handle from '../examples/Handle';
 import Disabled from '../examples/Disabled';
 import NoAnimations from '../examples/NoAnimations';
@@ -15,10 +16,11 @@ import ScrollingContainer from '../examples/ScrollingContainer';
 
 storiesOf('List', module)
   .add('Basic', () => <Basic />)
-  .add('Table Fixed Cell Widths', () => <Table />)
-  .add('Table Auto Cell Widths', () => <TableAuto />)
+  .add('Table fixed cell widths', () => <Table />)
+  .add('Table auto cell widths', () => <TableAuto />)
   .add('Super simple', () => <SuperSimple />)
   .add('Removable', () => <Removable />)
+  .add('Removable by move', () => <RemovableByMove />)
   .add('Handle', () => <Handle />)
   .add('Disabled', () => <Disabled />)
   .add('No animations', () => <NoAnimations />)

README.md

@@ -99,6 +99,7 @@ renderItem: (params: {
   index?: number;
   isDragged: boolean;
   isSelected: boolean;
+  isOutOfBounds: boolean;
   props: {
     key?: number;
     tabIndex?: number;
@@ -117,6 +118,7 @@ renderItem: (params: {
 - `index` - the item index (order)
 - `isDragged` - `true` if the item is dragged, great for styling purposes
 - `isSelected` - `true` if the item is lifted with the `space`
+- `isOutOfBounds` - `true` if the item is dragged far left or right
 - `props` - it has multiple props that you need to spread over your item element
 
 ### values
@@ -130,13 +132,14 @@ An array of values. The value can be a string or any more complex object. The le
 ### onChange
 
 ```ts
-onChange: (meta: { oldIndex: number; newIndex: number }) => void
+onChange: (meta: { oldIndex: number; newIndex: number, targetRect: ClientRect }) => void
 ```
 
 Called when the item is dropped to a new location:
 
 - `oldIndex` - the initial position of the element (0 indexed)
-- `newIndex` - the new position of the element (0 indexed)
+- `newIndex` - the new position of the element (0 indexed), -1 when `removableByMove` is set and item dropped out of bounds
+- `targetRect` - [getBoundingClientRect](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) of dropped item
 
 The List component is `stateless` and `controlled` so you need to implement this function to change the order of input `values`. Check the initial example.
 
@@ -148,6 +151,14 @@ beforeDrag?: (params: { elements: Element[]; index: number }) => void;
 
 Called when a valid drag is initiated. It provides a direct access to all list DOM elements and the index of dragged item. This can be useful when you need to do some upfront measurements like when building a [table with variable column widths](https://react-movable.netlify.com/?selectedKind=List&selectedStory=Table%20Auto%20Cell%20Widths).
 
+### removableByMove
+
+```ts
+removableByMove: boolean;
+```
+
+Default is `false`. When set to `true` and an item is dragged far left or far right (out of bounds), the original gap disappears (animated) and following item drop will cause `onChange` being called with `newIndex = -1`. You can use that to remove the item from your `values` state. [Example](https://react-movable.netlify.com/?selectedKind=List&selectedStory=Removable%20by%20move).
+
 ### transitionDuration
 
 ```ts

e2e/removable.test.ts

@@ -0,0 +1,37 @@
+import {
+  Examples,
+  getTestUrl,
+  trackMouse,
+  untrackMouse,
+  addFontStyles,
+  getListItems
+} from './utils';
+
+jest.setTimeout(10000);
+
+beforeEach(async () => {
+  await page.goto(getTestUrl(Examples.REMOVABLE));
+  await page.setViewport({ width: 1030, height: 800 });
+  await addFontStyles(page);
+});
+
+test('dnd the second item out the bounds to be removed', async () => {
+  await trackMouse(page);
+  await page.mouse.move(517, 275);
+  await page.mouse.down();
+  await page.mouse.move(828, 222);
+  await page.mouse.up();
+  // make sure that originally dragged item is visible (rendered)
+  // in a new place
+  await page.waitForSelector(`#root li:nth-child(1)`, {
+    visible: true
+  });
+  expect(await getListItems(page)).toEqual([
+    'You can remove items by moving them far left or right. Also, onChange always gives you the getBoundingClientRect of the dropped item.',
+    'Item 3',
+    'Item 4',
+    'Item 5',
+    'Item 6'
+  ]);
+  await untrackMouse(page);
+});

e2e/utils.ts

@@ -4,7 +4,8 @@ export enum Examples {
   BASIC,
   HEIGHTS,
   SCROLLING_CONTAINER,
-  SCROLLING_WINDOW
+  SCROLLING_WINDOW,
+  REMOVABLE
 }
 
 export const getTestUrl = (example: Examples): string => {
@@ -18,6 +19,8 @@ export const getTestUrl = (example: Examples): string => {
       return `http://localhost:${PORT}/iframe.html?selectedKind=List&selectedStory=Scrolling%20container`;
     case Examples.SCROLLING_WINDOW:
       return `http://localhost:${PORT}/iframe.html?selectedKind=List&selectedStory=Scrolling%20window`;
+    case Examples.REMOVABLE:
+      return `http://localhost:${PORT}/iframe.html?selectedKind=List&selectedStory=Removable%20by%20move`;
   }
 };
 

examples/RemovableByMove.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { List, arrayMove, arrayRemove } from '../src/index';
+
+const initialState = {
+  items: [
+    'You can remove items by moving them far left or right. Also, onChange always gives you the getBoundingClientRect of the dropped item.',
+    'Note, that newIndex = -1 means that item is out of bounds and should be removed.',
+    'Item 3',
+    'Item 4',
+    'Item 5',
+    'Item 6'
+  ]
+};
+
+class RemovableByMove extends React.Component<{}, { items: string[] }> {
+  state = initialState;
+  render() {
+    return (
+      <div
+        style={{
+          maxWidth: '300px',
+          margin: '0px auto',
+          backgroundColor: '#F7F7F7',
+          padding: '3em',
+          textAlign: 'center'
+        }}
+      >
+        <List
+          removableByMove
+          values={this.state.items}
+          onChange={({ oldIndex, newIndex, targetRect }) => {
+            console.log(oldIndex, newIndex, targetRect);
+            this.setState((prevState: { items: string[] }) => ({
+              items:
+                newIndex === -1
+                  ? arrayRemove(prevState.items, oldIndex)
+                  : arrayMove(prevState.items, oldIndex, newIndex)
+            }));
+          }}
+          renderList={({ children, props, isDragged }) => (
+            <ul
+              {...props}
+              style={{
+                padding: '0em 0em 1em 0em',
+                cursor: isDragged ? 'grabbing' : undefined
+              }}
+            >
+              {children}
+            </ul>
+          )}
+          renderItem={({
+            value,
+            props,
+            isDragged,
+            isSelected,
+            isOutOfBounds
+          }) => (
+            <li
+              {...props}
+              style={{
+                ...props.style,
+                padding: '1.5em',
+                textAlign: 'left',
+                margin: '0.5em 0em',
+                listStyleType: 'none',
+                cursor: isDragged ? 'grabbing' : 'grab',
+                border: '2px solid #CCC',
+                boxShadow: '3px 3px #AAA',
+                color: '#333',
+                borderRadius: '5px',
+                fontFamily: 'Arial, "Helvetica Neue", Helvetica, sans-serif',
+                backgroundColor:
+                  isDragged || isSelected
+                    ? isOutOfBounds
+                      ? '#F08080'
+                      : '#EEE'
+                    : '#FFF'
+              }}
+            >
+              {value}
+            </li>
+          )}
+        />
+        <button onClick={() => this.setState(initialState)}>Reset</button>
+      </div>
+    );
+  }
+}
+
+export default RemovableByMove;

flowtypes/List.js.flow

@@ -23,7 +23,8 @@ declare interface IListProps<Value> {
     props: IItemProps,
     index?: number,
     isDragged: boolean,
-    isSelected: boolean
+    isSelected: boolean,
+    isOutOfBounds: boolean
   }) => React.Node;
   renderList: (props: {
     children: any,
@@ -35,13 +36,15 @@ declare interface IListProps<Value> {
   values: Value[];
   onChange: (meta: {
     oldIndex: number,
-    newIndex: number
+    newIndex: number,
+    targetRect: ClientRect
   }) => mixed;
   beforeDrag?: (params: {
     elements: HTMLElement[],
     index: number
   }) => mixed;
   transitionDuration?: number;
+  removableByMove?: boolean;
   lockVertically?: boolean;
   voiceover?: IVoiceover;
 }

src/List.tsx

@@ -25,6 +25,7 @@ class List<Value = string> extends React.Component<IProps<Value>> {
   afterIndex = -2;
   state = {
     itemDragged: -1,
+    itemDraggedOutOfBounds: -1,
     selectedItem: -1,
     initialX: 0,
     initialY: 0,
@@ -101,6 +102,7 @@ class List<Value = string> extends React.Component<IProps<Value>> {
   static defaultProps = {
     transitionDuration: 300,
     lockVertically: false,
+    removableByMove: false,
     voiceover: {
       item: (position: number) =>
         `You are currently at a draggable item at position ${position}. Press space bar to lift.`,
@@ -247,7 +249,11 @@ class List<Value = string> extends React.Component<IProps<Value>> {
       );
       this.initialYOffset = currentYOffset;
     }
-    this.afterIndex = binarySearch(this.topOffsets, itemVerticalCenter);
+    if (this.isDraggedItemOutOfBounds() && this.props.removableByMove) {
+      this.afterIndex = this.topOffsets.length + 1;
+    } else {
+      this.afterIndex = binarySearch(this.topOffsets, itemVerticalCenter);
+    }
     this.animateItems(
       this.afterIndex === -1 ? 0 : this.afterIndex,
       this.state.itemDragged,
@@ -340,17 +346,41 @@ class List<Value = string> extends React.Component<IProps<Value>> {
     });
   };
 
-  onEnd = (e: Event) => {
+  isDraggedItemOutOfBounds = () => {
+    const initialRect = this.getChildren()[
+      this.state.itemDragged
+    ].getBoundingClientRect();
+    const targetRect = this.ghostRef.current!.getBoundingClientRect();
+    if (Math.abs(initialRect.left - targetRect.left) > targetRect.width) {
+      if (this.state.itemDraggedOutOfBounds === -1) {
+        this.setState({ itemDraggedOutOfBounds: this.state.itemDragged });
+      }
+      return true;
+    }
+    if (this.state.itemDraggedOutOfBounds > -1) {
+      this.setState({ itemDraggedOutOfBounds: -1 });
+    }
+    return false;
+  };
+
+  onEnd = (e: TouchEvent & MouseEvent) => {
     e.cancelable && e.preventDefault();
     document.removeEventListener('mousemove', this.schdOnMouseMove);
     document.removeEventListener('touchmove', this.schdOnTouchMove);
     document.removeEventListener('mouseup', this.schdOnEnd);
     document.removeEventListener('touchup', this.schdOnEnd);
     document.removeEventListener('touchcancel', this.schdOnEnd);
-    if (this.afterIndex > -1 && this.state.itemDragged !== this.afterIndex) {
+
+    const isOutOfBounds = this.isDraggedItemOutOfBounds();
+    if (
+      (this.props.removableByMove && isOutOfBounds) ||
+      (this.afterIndex > -1 && this.state.itemDragged !== this.afterIndex)
+    ) {
       this.props.onChange({
         oldIndex: this.state.itemDragged,
-        newIndex: this.afterIndex
+        newIndex:
+          this.props.removableByMove && isOutOfBounds ? -1 : this.afterIndex,
+        targetRect: this.ghostRef.current!.getBoundingClientRect()
       });
     }
     this.getChildren().forEach(item => {
@@ -380,7 +410,8 @@ class List<Value = string> extends React.Component<IProps<Value>> {
           });
           this.props.onChange({
             oldIndex: selectedItem,
-            newIndex: this.needle
+            newIndex: this.needle,
+            targetRect: this.getChildren()[this.needle].getBoundingClientRect()
           });
           (this.getChildren()[this.needle] as HTMLElement).focus();
         }
@@ -488,7 +519,8 @@ class List<Value = string> extends React.Component<IProps<Value>> {
               props,
               index,
               isDragged: false,
-              isSelected
+              isSelected,
+              isOutOfBounds: false
             });
           }),
           isDragged: this.state.itemDragged > -1,
@@ -507,7 +539,8 @@ class List<Value = string> extends React.Component<IProps<Value>> {
               },
               index: this.state.itemDragged,
               isDragged: true,
-              isSelected: false
+              isSelected: false,
+              isOutOfBounds: this.state.itemDraggedOutOfBounds > -1
             }),
             document.body
           )}

src/types.ts

@@ -24,6 +24,7 @@ export interface IProps<Value> {
     index?: number;
     isDragged: boolean;
     isSelected: boolean;
+    isOutOfBounds: boolean;
   }) => React.ReactNode;
   renderList: (props: {
     children: React.ReactNode;
@@ -33,8 +34,13 @@ export interface IProps<Value> {
     };
   }) => React.ReactNode;
   values: Value[];
-  onChange: (meta: { oldIndex: number; newIndex: number }) => void;
+  onChange: (meta: {
+    oldIndex: number;
+    newIndex: number;
+    targetRect: ClientRect;
+  }) => void;
   transitionDuration: number;
+  removableByMove: boolean;
   lockVertically: boolean;
   voiceover: IVoiceover;
 }