Class 'ui-sortable-item' not being added when using <SortableContainer>

[jasonslyvia]

Class 'ui-sortable-item' not being added when using

from react-anything-sortable.

[jasonslyvia]

By separating sortable item in another React component, you need to pass to props to <SortableContainer> in CategoryListing.js.

Basically SortableContainer is just some sort of props filter that only pass certain props to its children (eg. className, onClick ).

// CategoryListing.js
import DirectoryActions from 'app/actions/DirectoryActions';
import React, {Component, PropTypes} from 'react';
import {SortableContainer} from 'react-anything-sortable';

export default class CategoryListing extends Component {
  static propTypes = {
    sortData: PropTypes.object,
  };

  constructor(props) {
    super(props);
    this._handleCheckboxToggle = ::this._handleCheckboxToggle;
  }

  _handleCheckboxToggle(e) {
    DirectoryActions.setCategoryEnabled({
      category_id: this.props.sortData.category_id,
      enabled: e.target.checked,
    });
  }

  render() {
    return (
      <SortableContainer {...this.props}>  // pay attention to this line
        <div>
          <div className="category-listing">
            {this.props.sortData.name}
            <input
              type="checkbox"
              className="right"
              checked={this.props.sortData.checked}
              onChange={this._handleCheckboxToggle}
            />
          </div>
        </div>
      </SortableContainer>
    );
  }
}

[rdsilver]

I nocited you added
@sortable
to the modern usage example, is that also required?

[chinesedfan]

Right, but SortableContainer has something wrong now(v1.6.1). You can only construct it manually.

[jasonslyvia]

I'm sorry, this whole SortableContainer thing is ill-considered, I'll try to get this stagrait ASAP, and thanks for your effort here @chinesedfan

[Darmody]

@rdsilver I think you should add @sortable

You should not put SortableContainer inside your own component.

It should be:

<Sortable>
  <SortableContainer>
    <CategoryListing />
  </SortableContainer>
  <SortableContainer>
    <CategoryListing />
  </SortableContainer>
</Sortable>

[rdsilver]

Thanks for the help.