v0.1.1

Author: RubaXa

README.md

@@ -14,7 +14,6 @@ Demo: http://rubaxa.github.io/Sortable/
 Include [react-sortable-mixin.js](react-sortable-mixin.js).
 See [more options](react-sortable-mixin.js#L26).
 
-
 ```jsx
 var SortableList = React.createClass({
 	mixins: [SortableMixin],
@@ -29,14 +28,14 @@ var SortableList = React.createClass({
 
 	render: function() {
 		return <ul>{
-			this.state.items.map(function (text) {
-				return <li>{text}</li>
+			this.state.items.map(function (text, i) {
+				return <li ref={i}>{text}</li>
 			})
 		}</ul>
 	}
 });
 
-React.render(<SortableList />, document.body);
+ReactDOM.render(<SortableList />, document.body);
 
 
 //
@@ -52,17 +51,18 @@ var AllUsers = React.createClass({
 	},
 
 	getInitialState: function() {
-		return { users: ['Abbi', 'Adela', 'Bud', 'Cate', 'Davis', 'Eric']; };
+		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>
+		return (<div>
+				<h1>Users</h1>
+				<ul ref="user">{
+					this.state.users.map(function (text, i) {
+						return <li ref={i}>{text}</li>
+					})
+				}</ul>
+			</div>
 		);
 	}
 });
@@ -72,19 +72,19 @@ var ApprovedUsers = React.createClass({
 	sortableOptions: { group: "shared" },
 
 	getInitialState: function() {
-		return { items: ['Hal', 'Judy']; };
+		return { items: ['Hal', 'Judy'] };
 	},
 
 	render: function() {
 		return <ul>{
-			this.state.items.map(function (text) {
-				return <li>{text}</li>
+			this.state.items.map(function (text, i) {
+				return <li ref={i}>{text}</li>
 			})
 		}</ul>
 	}
 });
 
-React.render(<div>
+ReactDOM.render(<div>
 	<AllUsers/>
 	<hr/>
 	<ApprovedUsers/>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mixin-sortablejs",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "React mixin for SortableJS.",
   "main": "react-mixin-sortable.js",
   "scripts": {

react-mixin-sortable.js

@@ -35,7 +35,8 @@
 		onRemove: 'handleRemove',
 		onSort: 'handleSort',
 		onFilter: 'handleFilter',
-		onMove: 'handleMove'
+		onMove: 'handleMove',
+		onClone: 'handleClone'
 	};
 
 
@@ -70,7 +71,7 @@
 	 * @mixin
 	 */
 	var SortableMixin = {
-		sortableMixinVersion: '0.1.1',
+		sortableMixinVersion: '0.1.2',
 
 
 		/**
@@ -85,8 +86,11 @@
 				copyOptions = _extend({}, options),
 
 				emitEvent = function (/** string */type, /** Event */evt) {
-					var method = this[options[type]];
-					method && method.call(this, evt, this._sortableInstance);
+					var method = options[type];
+					if (method && typeof method === "string") {
+						method = this[method];
+					}
+					method && typeof method === "function" && method.call(this, evt, this._sortableInstance);
 				}.bind(this);
 
 
@@ -120,13 +124,13 @@
 						}
 
 						newState[_getModelName(this)] = items;
-						
+
 						if (copyOptions.stateHandler) {
 							this[copyOptions.stateHandler](newState);
 						} else {
 							this.setState(newState);
 						}
-						
+
 						(this !== _activeComponent) && _activeComponent.setState(remoteState);
 					}
 
@@ -136,7 +140,7 @@
 				}.bind(this);
 			}, this);
 
-			DOMNode = this.getDOMNode() ? (this.refs[options.ref] || this).getDOMNode() : this.refs[options.ref] || this;
+			DOMNode = typeof this.getDOMNode === 'function' ? (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);