playground
/
Sortable
mirror of https://github.com/RubaXa/Sortable.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

[MOVED] https://github.com/SortableJS/react-mixin-sortablejs

pull/898/merge
RubaXa 9 years ago
parent
cc39770685
commit
fb57b98b61
3 changed files with 2 additions and 310 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 144
      README.md
  2. 3
      bower.json
  3. 165
      react-sortable-mixin.js

144
README.md
Unescape View File

@ -15,7 +15,7 @@ Demo: http://rubaxa.github.io/Sortable/
* Supports * Supports
* [Meteor](https://github.com/SortableJS/meteor) * [Meteor](https://github.com/SortableJS/meteor)
* [AngularJS](#ng) * [AngularJS](#ng)
* [React](#react) * [React](https://github.com/SortableJS/react-mixin-sortablejs)
* [Knockout](https://github.com/SortableJS/knockout-sortablejs) * [Knockout](https://github.com/SortableJS/knockout-sortablejs)
* [Polymer](https://github.com/SortableJS/polymer-sortablejs) * [Polymer](https://github.com/SortableJS/polymer-sortablejs)
* Supports any CSS library, e.g. [Bootstrap](#bs) * Supports any CSS library, e.g. [Bootstrap](#bs)
@ -366,148 +366,6 @@ angular.module('myApp', ['ng-sortable'])
--- ---
<a name="react"></a>
### Support React
Include [react-sortable-mixin.js](react-sortable-mixin.js).
See [more options](react-sortable-mixin.js#L26).
```jsx
var SortableList = React.createClass({
mixins: [SortableMixin],
getInitialState: function() {
return {
items: ['Mixin', 'Sortable']
};
},
handleSort: function (/** Event */evt) { /*..*/ },
render: function() {
return <ul>{
this.state.items.map(function (text) {
return <li>{text}</li>
})
}</ul>
}
});
React.render(<SortableList />, document.body);
//
// Groups
//
var AllUsers = React.createClass({
mixins: [SortableMixin],
sortableOptions: {
ref: "user",
group: "shared",
model: "users"
},
getInitialState: function() {
return { users: ['Abbi', 'Adela', 'Bud', 'Cate', 'Davis', 'Eric']; };
},
render: function() {
return (
<h1>Users</h1>
<ul ref="user">{
this.state.users.map(function (text) {
return <li>{text}</li>
})
}</ul>
);
}
});
var ApprovedUsers = React.createClass({
mixins: [SortableMixin],
sortableOptions: { group: "shared" },
getInitialState: function() {
return { items: ['Hal', 'Judy']; };
},
render: function() {
return <ul>{
this.state.items.map(function (text) {
return <li>{text}</li>
})
}</ul>
}
});
React.render(<div>
<AllUsers/>
<hr/>
<ApprovedUsers/>
</div>, document.body);
```
### Support React ES2015 / TypeScript syntax
As mixins are not supported in ES2015 / TypeScript syntax here is example of ES2015 ref based implementation.
Using refs is the preferred (by facebook) "escape hatch" to underlaying DOM nodes: [React: The ref Callback Attribute](https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute)
```js
import * as React from "react";
import Sortable from 'sortablejs';
export class SortableExampleEsnext extends React.Component {
sortableContainersDecorator = (componentBackingInstance) => {
// check if backing instance not null
if (componentBackingInstance) {
let options = {
handle: ".group-title" // Restricts sort start click/touch to the specified element
};
Sortable.create(componentBackingInstance, options);
}
};
sortableGroupDecorator = (componentBackingInstance) => {
// check if backing instance not null
if (componentBackingInstance) {
let options = {
draggable: "div", // Specifies which items inside the element should be sortable
group: "shared"
};
Sortable.create(componentBackingInstance, options);
}
};
render() {
return (
<div className="container" ref={this.sortableContainersDecorator}>
<div className="group">
<h2 className="group-title">Group 1</h2>
<div className="group-list" ref={this.sortableGroupDecorator}>
<div>Swap them around</div>
<div>Swap us around</div>
<div>Swap things around</div>
<div>Swap everything around</div>
</div>
</div>
<div className="group">
<h2 className="group-title">Group 2</h2>
<div className="group-list" ref={this.sortableGroupDecorator}>
<div>Swap them around</div>
<div>Swap us around</div>
<div>Swap things around</div>
<div>Swap everything around</div>
</div>
</div>
</div>
);
}
}
```
---
### Method ### Method

3
bower.json
Unescape View File

@ -2,8 +2,7 @@
"name": "Sortable", "name": "Sortable",
"main": [ "main": [
"Sortable.js", "Sortable.js",
"ng-sortable.js", "ng-sortable.js"
"react-sortable-mixin.js"
], ],
"homepage": "http://rubaxa.github.io/Sortable/", "homepage": "http://rubaxa.github.io/Sortable/",
"authors": [ "authors": [

165
react-sortable-mixin.js vendored
Unescape View File

@ -1,165 +0,0 @@
/**
* @author RubaXa <trash@rubaxa.org>
* @licence MIT
*/
(function (factory) {
'use strict';
if (typeof module != 'undefined' && typeof module.exports != 'undefined') {
module.exports = factory(require('./Sortable'));
}
else if (typeof define === 'function' && define.amd) {
define(['./Sortable'], factory);
}
else {
/* jshint sub:true */
window['SortableMixin'] = factory(Sortable);
}
})(function (/** Sortable */Sortable) {
'use strict';
var _nextSibling;
var _activeComponent;
var _defaultOptions = {
ref: 'list',
model: 'items',
animation: 100,
onStart: 'handleStart',
onEnd: 'handleEnd',
onAdd: 'handleAdd',
onUpdate: 'handleUpdate',
onRemove: 'handleRemove',
onSort: 'handleSort',
onFilter: 'handleFilter',
onMove: 'handleMove'
};
function _getModelName(component) {
return component.sortableOptions && component.sortableOptions.model || _defaultOptions.model;
}
function _getModelItems(component) {
var name = _getModelName(component),
items = component.state && component.state[name] || component.props[name];
return items.slice();
}
function _extend(dst, src) {
for (var key in src) {
if (src.hasOwnProperty(key)) {
dst[key] = src[key];
}
}
return dst;
}
/**
* Simple and easy mixin-wrapper for rubaxa/Sortable library, in order to
* make reorderable drag-and-drop lists on modern browsers and touch devices.
*
* @mixin
*/
var SortableMixin = {
sortableMixinVersion: '0.1.1',
/**
* @type {Sortable}
* @private
*/
_sortableInstance: null,
componentDidMount: function () {
var DOMNode, options = _extend(_extend({}, _defaultOptions), this.sortableOptions || {}),
copyOptions = _extend({}, options),
emitEvent = function (/** string */type, /** Event */evt) {
var method = this[options[type]];
method && method.call(this, evt, this._sortableInstance);
}.bind(this);
// Bind callbacks so that "this" refers to the component
'onStart onEnd onAdd onSort onUpdate onRemove onFilter onMove'.split(' ').forEach(function (/** string */name) {
copyOptions[name] = function (evt) {
if (name === 'onStart') {
_nextSibling = evt.item.nextElementSibling;
_activeComponent = this;
}
else if (name === 'onAdd' || name === 'onUpdate') {
evt.from.insertBefore(evt.item, _nextSibling);
var newState = {},
remoteState = {},
oldIndex = evt.oldIndex,
newIndex = evt.newIndex,
items = _getModelItems(this),
remoteItems,
item;
if (name === 'onAdd') {
remoteItems = _getModelItems(_activeComponent);
item = remoteItems.splice(oldIndex, 1)[0];
items.splice(newIndex, 0, item);
remoteState[_getModelName(_activeComponent)] = remoteItems;
}
else {
items.splice(newIndex, 0, items.splice(oldIndex, 1)[0]);
}
newState[_getModelName(this)] = items;
if (copyOptions.stateHandler) {
this[copyOptions.stateHandler](newState);
} else {
this.setState(newState);
}
(this !== _activeComponent) && _activeComponent.setState(remoteState);
}
setTimeout(function () {
emitEvent(name, evt);
}, 0);
}.bind(this);
}, this);
DOMNode = this.getDOMNode() ? (this.refs[options.ref] || this).getDOMNode() : this.refs[options.ref] || this;
/** @namespace this.refs — http://facebook.github.io/react/docs/more-about-refs.html */
this._sortableInstance = Sortable.create(DOMNode, copyOptions);
},
componentWillReceiveProps: function (nextProps) {
var newState = {},
modelName = _getModelName(this),
items = nextProps[modelName];
if (items) {
newState[modelName] = items;
this.setState(newState);
}
},
componentWillUnmount: function () {
this._sortableInstance.destroy();
this._sortableInstance = null;
}
};
// Export
return SortableMixin;
});
Write Preview
Loading…
Cancel
Save