docs: add example for grouping items (#511)

Author: Claudéric Demers

src/.stories/grouping-items/Item/Item.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import classNames from 'classnames';
+import {sortableElement} from '../../../../src';
+
+import styles from './Item.scss';
+
+function Item(props) {
+  const {dragging, onClick, selected, selectedItemsCount, value} = props;
+  const shouldRenderItemCountBadge = dragging && selectedItemsCount > 1;
+
+  return (
+    <div
+      className={classNames(
+        styles.Item,
+        selected && !dragging && styles.selected,
+        dragging && styles.dragging,
+      )}
+      onClick={() => onClick(value)}
+    >
+      Item {value}
+      {shouldRenderItemCountBadge ? <Badge count={selectedItemsCount} /> : null}
+    </div>
+  );
+}
+
+function Badge(props) {
+  return <div className={styles.Badge}>{props.count}</div>;
+}
+
+export default sortableElement(Item);

src/.stories/grouping-items/Item/Item.scss

@@ -0,0 +1,69 @@
+$color: #333;
+$white: #fff;
+$backgroundColor: $white;
+
+$boxShadow: 0 5px 5px -5px rgba(0, 0, 0, 0.2);
+
+$fontWeight-regular: 400;
+$fontWeight-bold: 600;
+
+$borderRadius: 3px;
+$borderWidth: 1px;
+$borderColor: #efefef;
+
+$selectedColor: $white;
+$selectedBackgroundColor: #759fff;
+$selectedBorderColor: #5e83d6;
+
+$badgeColor: $white;
+$badgeBackgroundColor: #f75959;
+$badgeBorderColor: #da4553;
+
+.Item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 20px;
+  background-color: $backgroundColor;
+  border-top: $borderWidth solid #efefef;
+  box-sizing: border-box;
+  user-select: none;
+
+  color: $color;
+  font-weight: $fontWeight-regular;
+
+  &:first-child {
+    border-top: none;
+  }
+
+  &.selected {
+    background: $selectedBackgroundColor;
+    border: 1px solid $selectedBorderColor;
+    color: $selectedColor;
+    font-weight: $fontWeight-bold;
+
+    & + .Item {
+      border-top: none;
+    }
+  }
+
+  &.dragging {
+    border-radius: $borderRadius;
+    border: $borderWidth solid #efefef;
+    box-shadow: $boxShadow;
+  }
+}
+
+.Badge {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  padding: 0.35em 0.5em;
+  border-radius: 0.3rem;
+
+  color: $badgeColor;
+  font-size: 0.8em;
+  font-weight: $fontWeight-bold;
+  background-color: $badgeBackgroundColor;
+  border: $borderWidth solid $badgeBorderColor;
+}

src/.stories/grouping-items/Item/index.js

@@ -0,0 +1,3 @@
+import Item from './Item';
+
+export default Item;

src/.stories/grouping-items/List/List.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import {sortableContainer} from '../../../../src';
+
+import Item from '../Item';
+
+import styles from './List.scss';
+
+function List({items, selectedItems, sortingItemKey, onItemSelect}) {
+  return (
+    <div className={styles.List}>
+      {items.map((value, index) => {
+        const isSelected = selectedItems.includes(value);
+        const itemIsBeingDragged = sortingItemKey === value;
+
+        return (
+          <Item
+            key={`item-${value}`}
+            selected={isSelected}
+            dragging={itemIsBeingDragged}
+            index={index}
+            value={value}
+            onClick={onItemSelect}
+            selectedItemsCount={selectedItems.length}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+export default sortableContainer(List);

src/.stories/grouping-items/List/List.scss

@@ -0,0 +1,16 @@
+$backgroundColor: #f3f3f3;
+$borderColor: #efefef;
+$borderWidth: 1px;
+
+.List {
+  position: relative;
+  width: 400px;
+  height: 600px;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  z-index: 0;
+  background-color: $backgroundColor;
+  border: $borderWidth solid $borderColor;
+  border-radius: 3px;
+  outline: none;
+}

src/.stories/grouping-items/List/index.js

@@ -0,0 +1,3 @@
+import List from './List';
+
+export default List;

src/.stories/grouping-items/index.js

@@ -0,0 +1,114 @@
+import React from 'react';
+import arrayMove from 'array-move';
+import {generateItems} from './utils';
+
+import SortableList from './List';
+
+class GroupedItems extends React.Component {
+  state = {
+    selectedItems: [],
+    items: generateItems(50),
+  };
+
+  render() {
+    const {items, selectedItems, sortingItemKey} = this.state;
+
+    return (
+      <SortableList
+        items={items.filter(this.filterItems)}
+        sortingItemKey={sortingItemKey}
+        selectedItems={selectedItems}
+        onItemSelect={this.handleItemSelect}
+        shouldCancelStart={this.handleShouldCancelStart}
+        updateBeforeSortStart={this.handleUpdateBeforeSortStart}
+        onSortEnd={this.handleSortEnd}
+        distance={3}
+      />
+    );
+  }
+
+  filterItems = (value) => {
+    const {selectedItems, sortingItemKey, isSorting} = this.state;
+
+    // Do not hide the ghost of the element currently being sorted
+    if (sortingItemKey === value) {
+      return true;
+    }
+
+    // Hide the other items that are selected
+    if (isSorting && selectedItems.includes(value)) {
+      return false;
+    }
+
+    // Do not hide any other items
+    return true;
+  };
+
+  handleUpdateBeforeSortStart = ({index}) => {
+    return new Promise((resolve) =>
+      this.setState(
+        ({items}) => ({
+          sortingItemKey: items[index],
+          isSorting: true,
+        }),
+        resolve,
+      ),
+    );
+  };
+
+  handleSortEnd = ({oldIndex, newIndex}) => {
+    const {selectedItems} = this.state;
+    let newItems;
+
+    if (selectedItems.length) {
+      const items = this.state.items.filter(
+        (value) => !selectedItems.includes(value),
+      );
+
+      newItems = [
+        ...items.slice(0, newIndex),
+        ...selectedItems,
+        ...items.slice(newIndex, items.length),
+      ];
+    } else {
+      newItems = arrayMove(this.state.items, oldIndex, newIndex);
+    }
+
+    this.setState({
+      items: newItems,
+      isSorting: false,
+      sortingItemKey: null,
+      selectedItems: [],
+    });
+  };
+
+  handleItemSelect = (item) => {
+    this.setState(({selectedItems}) => {
+      if (selectedItems.includes(item)) {
+        return {
+          selectedItems: selectedItems.filter((value) => value !== item),
+        };
+      }
+
+      return {
+        selectedItems: [...selectedItems, item],
+      };
+    });
+  };
+
+  handleShouldCancelStart = (event) => {
+    const {items, selectedItems} = this.state;
+    const item = items[event.target.sortableInfo.index];
+
+    // Never cancel start if there are no selected items
+    if (!selectedItems.length) {
+      return false;
+    }
+
+    // If there are selected items, we want to cancel sorting
+    // from starting when dragging elements that are not selected
+    return !selectedItems.includes(item);
+  };
+}
+
+export default GroupedItems;

src/.stories/grouping-items/utils.js

@@ -0,0 +1,3 @@
+export function generateItems(length) {
+  return Array.from(Array(length), (_, index) => index.toString());
+}

src/.stories/index.js

@@ -14,6 +14,8 @@ import range from 'lodash/range';
 import random from 'lodash/random';
 import classNames from 'classnames';
 
+import GroupedItems from './grouping-items';
+
 function getItems(count, height) {
   var heights = [65, 110, 140, 65, 90, 65];
   return range(count).map((value) => {
@@ -585,7 +587,10 @@ storiesOf('General | Configuration / Customization', module)
     );
   });
 
-storiesOf('Other | Virtualization libraries / react-tiny-virtual-list', module)
+storiesOf(
+  'Advanced examples | Virtualization libraries / react-tiny-virtual-list',
+  module,
+)
   .add('Basic setup', () => {
     return (
       <div className={style.root}>
@@ -611,7 +616,7 @@ storiesOf('Other | Virtualization libraries / react-tiny-virtual-list', module)
     );
   });
 
-storiesOf('Other | Virtualization libraries / react-window', module)
+storiesOf('Advanced examples | Virtualization libraries / react-window', module)
   .add('Basic setup', () => {
     return (
       <div className={style.root}>
@@ -650,7 +655,10 @@ storiesOf('Other | Virtualization libraries / react-window', module)
     );
   });
 
-storiesOf('Other | Virtualization libraries / react-virtualized', module)
+storiesOf(
+  'Advanced examples | Virtualization libraries / react-virtualized',
+  module,
+)
   .add('Basic setup', () => {
     return (
       <div className={style.root}>
@@ -696,7 +704,10 @@ storiesOf('Other | Virtualization libraries / react-virtualized', module)
     );
   });
 
-storiesOf('Other | Virtualization libraries / react-infinite', module)
+storiesOf(
+  'Advanced examples | Virtualization libraries / react-infinite',
+  module,
+)
   .add('Basic setup', () => {
     return (
       <div className={style.root}>
@@ -720,9 +731,13 @@ storiesOf('Other | Virtualization libraries / react-infinite', module)
     );
   });
 
-storiesOf('Stress Test | Re-rendering before sorting', module).add(
-  'Elements that shrink',
-  () => {
+storiesOf('Advanced examples | Re-rendering before sorting', module)
+  .add('Grouping items', () => (
+    <div className={style.root}>
+      <GroupedItems />
+    </div>
+  ))
+  .add('Elements that shrink', () => {
     const getHelperDimensions = ({node}) => ({
       height: 20,
       width: node.offsetWidth,
@@ -737,5 +752,4 @@ storiesOf('Stress Test | Re-rendering before sorting', module).add(
         />
       </div>
     );
-  },
-);
+  });