Language: ENCN

Sortable List React Component

Sortable List is not a separate component, but just a particular case of using <List> and <ListItem> components.

Usage example

Here is the full sortable list page example:

...
constructor() {
  this.state = {
    sorting: false,
    items: [1, 2, 3, 4, 5]                  
  };
}

...
...
render() {
  return (
    <Page>
      <Navbar backLink="Back" title="Sortable" sliding>
        <NavRight>
          <!-- Link to enable/disable sortable -->
          <Link toggleSortable="#sortable">{sorting ? 'Done' : 'Open'}</Link>
        </NavRight>
      </Navbar>

      <List 
        id="sortable" 
        sortable 
        onSortableSort={this.onSort} 
        onSortableOpen={this.onOpen} 
        onSortableClose={this.onClose}
      >
        {this.state.items.map((item) => (
          <ListItem title={'Item ' + item}></ListItem>
        ))}                  
      </List>
    </Page>
  );
}

...
...

onOpen() {
  this.setState({
    sorting: !this.state.sorting,
    ...this.state
  });                
}

onClose() {
  this.setState({
    sorting: !this.state.sorting,
    ...this.state
  });
}

onSort(event, indexes) {
    console.log('sort', indexes);
}

Renders to:

<div class="page">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="left sliding">
        <a href="#" class="back link toggle-sortable" data-sortable="#sortable">Back</a>
      </div>
      <div class="center sliding">Sortable</div>
    </div>
  </div>
  <div class="page-content">
    <div class="list-block sortable" id="sortable">
      <ul>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">Item 1</div>
            </div>
          </div>
          <div class="sortable-handler"></div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">Item 2</div>
            </div>
          </div>
          <div class="sortable-handler"></div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">Item 3</div>
            </div>
          </div>
          <div class="sortable-handler"></div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">Item 4</div>
            </div>
          </div>
          <div class="sortable-handler"></div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">Item 5</div>
            </div>
          </div>
          <div class="sortable-handler"></div>
        </li>
      </ul>
    </div>
  </div>
</div>

Event Properties

Event Description
onSortableOpen Event will be triggered when sortable mode is enabled
onSortableClose Event will be triggered when sortable mode is disabled
onSortableSort Event will be triggered after user release currently sorting element in new position. event.detail will contain object with startIndex and newIndex properties with start/new index numbers of sorted list item