Skip to content

Commit 3869d15

Browse files
chetoncheton
committed
Refactor code
1 parent cbb0e00 commit 3869d15

File tree

4 files changed

+46
-79
lines changed

4 files changed

+46
-79
lines changed

‎dist/react-sortable.js‎

Lines changed: 34 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -86,35 +86,16 @@ return /******/ (function(modules) { // webpackBootstrap
8686
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
8787

8888
var defaultOptions = {
89-
ref: 'list',
90-
model: 'items',
91-
onStart: 'handleStart',
92-
onEnd: 'handleEnd',
93-
onAdd: 'handleAdd',
94-
onUpdate: 'handleUpdate',
95-
onRemove: 'handleRemove',
96-
onSort: 'handleSort',
97-
onFilter: 'handleFilter',
98-
onMove: 'handleMove'
89+
ref: 'list'
9990
};
10091

101-
var _nextSibling = null;
102-
var _activeWrapperComponent = null;
92+
var store = {
93+
nextSibling: null,
94+
activeComponent: null
95+
};
10396

10497
var refName = 'sortableComponent';
10598

106-
var getModelItems = function getModelItems(wrapperComponent) {
107-
var model = wrapperComponent.sortableOptions.model;
108-
var sortableComponent = wrapperComponent.refs[refName];
109-
var _sortableComponent$st = sortableComponent.state;
110-
var state = _sortableComponent$st === undefined ? {} : _sortableComponent$st;
111-
var _sortableComponent$pr = sortableComponent.props;
112-
var props = _sortableComponent$pr === undefined ? {} : _sortableComponent$pr;
113-
114-
var items = state[model] || props[model] || [];
115-
return items.slice(); // returns a shallow copy of the items array
116-
};
117-
11899
var extend = function extend(target) {
119100
for (var _len = arguments.length, sources = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
120101
sources[_key - 1] = arguments[_key];
@@ -141,101 +122,74 @@ return /******/ (function(modules) { // webpackBootstrap
141122
var SortableMixin = function SortableMixin() {
142123
var options = arguments.length <= 0 || arguments[0] === undefined ? defaultOptions : arguments[0];
143124
return function (Component) {
144-
return function (_React$Component) {
145-
_inherits(_class2, _React$Component);
125+
var _class, _temp2;
126+
127+
return _temp2 = _class = function (_React$Component) {
128+
_inherits(_class, _React$Component);
146129

147-
function _class2() {
130+
function _class() {
148131
var _Object$getPrototypeO;
149132

150133
var _temp, _this, _ret;
151134

152-
_classCallCheck(this, _class2);
135+
_classCallCheck(this, _class);
153136

154137
for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
155138
args[_key2] = arguments[_key2];
156139
}
157140

158-
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(_class2)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
141+
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(_class)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
159142
sortableInstance: null
160143
}, _this.sortableOptions = extend({}, defaultOptions, options), _temp), _possibleConstructorReturn(_this, _ret);
161144
}
162145

163-
_createClass(_class2, [{
146+
_createClass(_class, [{
164147
key: 'componentDidMount',
165148
value: function componentDidMount() {
166149
var _this2 = this;
167150

168-
var sortableComponent = this.refs[refName];
169-
var emitEvent = function emitEvent(type, evt) {
170-
var methodName = _this2.sortableOptions[type];
171-
var method = sortableComponent[methodName];
172-
method && method.call(sortableComponent, evt, _this2.state.sortableInstance);
173-
};
174-
175-
var copyOptions = extend({}, this.sortableOptions);
176-
177151
[// Bind callbacks
178152
'onStart', 'onEnd', 'onAdd', 'onSort', 'onUpdate', 'onRemove', 'onFilter', 'onMove'].forEach(function (name) {
179-
copyOptions[name] = function (evt) {
153+
_this2.sortableOptions[name] = function (evt) {
180154
if (name === 'onStart') {
181-
_nextSibling = evt.item.nextElementSibling;
182-
_activeWrapperComponent = _this2;
155+
store.nextSibling = evt.item.nextElementSibling;
156+
store.activeComponent = _this2;
183157
} else if (name === 'onAdd' || name === 'onUpdate') {
184-
evt.from.insertBefore(evt.item, _nextSibling);
158+
evt.from.insertBefore(evt.item, store.nextSibling);
185159

186160
var oldIndex = evt.oldIndex;
187161
var newIndex = evt.newIndex;
188-
var newState = {};
189-
var remoteState = {};
190-
var items = getModelItems(_this2);
162+
var items = _this2.props.items;
163+
var remoteItems = [];
191164

192165
if (name === 'onAdd') {
193-
var remoteItems = getModelItems(_activeWrapperComponent);
166+
remoteItems = store.activeComponent.props.items;
194167
var item = remoteItems.splice(oldIndex, 1)[0];
195168
items.splice(newIndex, 0, item);
196-
197-
remoteState[_activeWrapperComponent.sortableOptions.model] = remoteItems;
198169
} else {
199170
items.splice(newIndex, 0, items.splice(oldIndex, 1)[0]);
200171
}
201172

202-
newState[_this2.sortableOptions.model] = items;
203-
204-
if (copyOptions.stateHandler) {
205-
sortableComponent[copyOptions.stateHandler](newState);
206-
} else {
207-
sortableComponent.setState(newState);
208-
}
173+
// Called by any change to the list (add / update / remove)
174+
_this2.props.onSort(items);
209175

210-
if (_activeWrapperComponent !== _this2) {
211-
_activeWrapperComponent.refs[refName].setState(remoteState);
176+
if (store.activeComponent !== _this2) {
177+
store.activeComponent.props.onSort(remoteItems);
212178
}
213179
}
214180

215181
setTimeout(function () {
216-
emitEvent(name, evt);
182+
_this2.props[name] && _this2.props[name](evt, _this2.state.sortableInstance);
217183
}, 0);
218184
};
219185
});
220-
this.populatedOptions = copyOptions;
221-
this.initSortable(sortableComponent);
222-
}
223-
}, {
224-
key: 'componentWillReceiveProps',
225-
value: function componentWillReceiveProps(nextProps) {
226-
var sortableComponent = this.refs[refName];
227-
var model = this.sortableOptions.model;
228-
var items = nextProps[model];
229186

230-
if (items) {
231-
var newState = {};
232-
newState[model] = items;
233-
sortableComponent.setState(newState);
234-
}
187+
var sortableComponent = this.refs[refName];
188+
this.initSortable(sortableComponent);
235189
}
236190
}, {
237191
key: 'componentDidUpdate',
238-
value: function componentDidUpdate(prevProps) {
192+
value: function componentDidUpdate(prevProps, prevState) {
239193
var model = this.sortableOptions.model;
240194
var prevItems = prevProps[model];
241195
var currItems = this.props[model];
@@ -253,7 +207,7 @@ return /******/ (function(modules) { // webpackBootstrap
253207
value: function initSortable(sortableComponent) {
254208
this.destroySortable();
255209
var domNode = _reactDom2.default.findDOMNode(sortableComponent.refs[this.sortableOptions.ref] || sortableComponent);
256-
var sortableInstance = _sortablejs2.default.create(domNode, this.populatedOptions);
210+
var sortableInstance = _sortablejs2.default.create(domNode, this.sortableOptions);
257211
this.setState({ sortableInstance: sortableInstance });
258212
}
259213
}, {
@@ -271,8 +225,11 @@ return /******/ (function(modules) { // webpackBootstrap
271225
}
272226
}]);
273227

274-
return _class2;
275-
}(_react2.default.Component);
228+
return _class;
229+
}(_react2.default.Component), _class.propTypes = {
230+
items: _react2.default.PropTypes.array.isRequired,
231+
onSort: _react2.default.PropTypes.func.isRequired
232+
}, _temp2;
276233
};
277234
};
278235

‎dist/react-sortable.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/src/shared-group.jsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,18 @@ const sortableOptions = {
66
ref: 'list',
77
group: {
88
name: 'shared',
9-
pull: true, //'clone',
9+
pull: true, // 'clone',
1010
put: true
1111
}
1212
};
1313

1414
@Sortable(sortableOptions)
1515
export default class SharedGroup extends React.Component {
16+
static propTypes = {
17+
items: React.PropTypes.array,
18+
onChange: React.PropTypes.func
19+
};
20+
1621
render() {
1722
const items = this.props.items.map((text, index) => (
1823
<li key={index}>{text}</li>

‎examples/src/simple-list.jsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,11 @@ const sortableOptions = {
88

99
@Sortable(sortableOptions)
1010
export default class SimpleList extends React.Component {
11+
static propTypes = {
12+
items: React.PropTypes.array,
13+
onChange: React.PropTypes.func
14+
};
15+
1116
render() {
1217
const items = this.props.items.map((text, index) => (
1318
<li key={index}>List Item {text}</li>

0 commit comments

Comments
 (0)