Sortable List

list.md

Lists can be sortable...

initialState = {
  items: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"]
};
const onSortEnd = ({ oldIndex, newIndex }) => {
  setState({
    items: Sortable.move(state.items, oldIndex, newIndex)
  });
};
<List direction="horizontal" spacing="wide" sortable onSortEnd={onSortEnd}>
  {state.items.map((item, index) => <List.Item key={index}>{item}</List.Item>)}
</List>;

...with or without an handle

initialState = {
  items: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"]
};

const SortHandle = <Icon is="button" name="sort" tabindex="-1" />;

const onSortEnd = ({ oldIndex, newIndex }) => {
  setState({
    items: Sortable.move(state.items, oldIndex, newIndex)
  });
};

<List sortable SortHandle={SortHandle} onSortEnd={onSortEnd}>
  {state.items.map((item, index) => <List.Item key={index}>{item}</List.Item>)}
</List>;

...with or without an handle

initialState = {
  items: [
    "Item 1",
    "Item 2",
    "Item 3",
    "Item 4",
    "Item 5",
    "Item 6",
    "Item 7",
    "Item 8",
    "Item 9"
  ]
};

const SortHandle = <Icon is="button" name="sort" tabindex="-1" />;

const onSortEnd = ({ oldIndex, newIndex }) => {
  setState({
    items: Sortable.move(state.items, oldIndex, newIndex)
  });
};
<List sortable direction="both" SortHandle={SortHandle} onSortEnd={onSortEnd}>
  {state.items.map((item, index) => <List.Item key={index}>{item}</List.Item>)}
</List>;