diff --git a/packages/components-faraday/src/components/AuthorList/AuthorList.js b/packages/components-faraday/src/components/AuthorList/AuthorList.js index a3f1c3f1c7c033cb7a3e677183939f31c4122144..7a959a6f9423472fa2ff1960ca2d3f172890b28e 100644 --- a/packages/components-faraday/src/components/AuthorList/AuthorList.js +++ b/packages/components-faraday/src/components/AuthorList/AuthorList.js @@ -65,7 +65,6 @@ const Authors = ({ <SortableList dragHandle={DragHandle} dropItem={dropItem} - editedAuthor={editedAuthor} items={authors} listItem={Author} moveItem={moveAuthor} diff --git a/packages/components-faraday/src/components/SortableList/README.md b/packages/components-faraday/src/components/SortableList/README.md deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git a/packages/components-faraday/src/components/SortableList/SortableList.js b/packages/components-faraday/src/components/SortableList/SortableList.js index cff5d1e6c208a48082076e07d4d94994754c0073..86f710b6db530e668b1454aab6ea5ca982a39685 100644 --- a/packages/components-faraday/src/components/SortableList/SortableList.js +++ b/packages/components-faraday/src/components/SortableList/SortableList.js @@ -37,8 +37,8 @@ const itemTarget = { } monitor.getItem().index = hoverIndex }, - drop({ dropItem }) { - if (dropItem && typeof dropItem === 'function') dropItem() + drop({ dropItem, index }) { + if (dropItem && typeof dropItem === 'function') dropItem(index) }, } @@ -48,7 +48,6 @@ const Item = ({ connectDropTarget, listItem, dragHandle, - isEditing, ...rest }) => dragHandle @@ -97,7 +96,6 @@ const SortableList = ({ <DecoratedItem dragHandle={dragHandle} index={i} - isEditing={rest.editedAuthor !== -1} key={item.name || Math.random()} listItem={listItem} moveItem={moveItem} diff --git a/packages/components-faraday/src/components/SortableList/SortableList.md b/packages/components-faraday/src/components/SortableList/SortableList.md new file mode 100644 index 0000000000000000000000000000000000000000..79522551f903790231b34af4450eb9e498c8f4db --- /dev/null +++ b/packages/components-faraday/src/components/SortableList/SortableList.md @@ -0,0 +1,78 @@ +A sortable list implemented with `react-dnd`. + +## Props + +| Prop | Description | Required | Default | +| :--------: | :------------------------------------------------------------------------------------------------------------------------------------------: | :------: | :-------------------: | +| items | The items of the sortable list. | true | [] | +| listItem | A React component that will be rendered for each item of the list. Receives `isDragging`, `isOver` and all other props from the items array. | true | none | +| moveItem | Function to be called when moving an item through the list. SortableList will provide the dragIndex of hoverIndex of the items. | true | SortableList.moveItem | +| dragHandle | A React component for the drag handle. If not present, the whole item can be dragged. | false | none | +| dropItem | Function to be called when dropping an item. The index of the dragged item is passed. | false | none | + +## Usage + +### Pass in a list of users + +```js +const items = [ + {firstName: 'John', lastName: 'Doe'}, + {firstName: 'Michael', lastName: 'Jackson'}, + {firstName: 'David', lastName: 'Blaine'}, +] + +const Item = ({ isOver, isDragging, ...rest }) => + <div>`${rest.firstName} ${rest.lastName}`</div> + +const DragHandle + +<SortableList + items={items} + listItem={Item} + moveItem={(dragIndex, hoverIndex) => change items} +/> +``` + +### With custom drag handle +```js +const DragHandle = () => <div>Drag me!</div> + +const ItemWithDragHandle = ({ dragHandle, ...rest }) => <div> + {dragHandle} + <span>Rest of the item' content.</span> +</div> + +<SortableList + ... + listItem={ItemWithDragHandle} + dragHandle={DragHandle} + ... +/> +``` + +### How to move items around + +To move items of the parent container whenever `moveItem` function is called we can use the `SortableList.moveItem` helper. More info in the example below. + +```js +const Container = ({ moveItem, items }) => <div> + ... + <SortableList + items={items} + listItem={Item} + moveItem={moveItem} + /> + ... +</div> +``` +Enhanced using recompose +```js +const MoveExample = compose( + withState('items', 'setItems', [{name: 'John'}, {name: 'Nancy'}, {name: 'Adam'}]), + withHandlers({ + moveItem: ({ setItems, items }) => (dragIndex, hoverIndex) => { + setItems(prevItems => SortableList.moveItem(prevItems, dragIndex, hoverIndex)) + } + }) +)(Container) +```