react-sortablejs - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

examples/package.json

@@ -12,2 +12,3 @@ {
   "dependencies": {
+    "lodash": "^4.6.1",
     "react": "^0.14.7",
@@ -14,0 +15,0 @@ "react-dom": "^0.14.7",

examples/src/index.jsx

@@ -0,1 +1,2 @@
+import random from 'lodash/random';
 import React from 'react';
@@ -7,29 +8,71 @@ import ReactDOM from 'react-dom';
 
-ReactDOM.render(
-    <div>
-        <div className="container-fluid">
-            <div className="title">Simple List</div>
-            <div className="row">
-                <div className="col-sm-12">
-                    <SimpleList />
+const items = [
+    'Apple',
+    'Banana',
+    'Cherry',
+    'Guava',
+    'Grape',
+    'Kiwi',
+    'Lemon',
+    'Melon',
+    'Orange',
+    'Pear',
+    'Peach',
+    'Strawberry'
+];
+
+class App extends React.Component {
+    state = {
+        left: ['Apple', 'Banaba', 'Cherry', 'Grape'],
+        right: ['Lemon', 'Orange', 'Pear', 'Peach']
+    };
+
+    handleClick() {
+        const i = random(0, items.length - 1);
+        const state = this.state.left.concat(items[i]);
+        this.setState({ left: state });
+    }
+    render() {
+        return (
+            <div>
+                <div className="container-fluid">
+                    <div className="title">Simple List</div>
+                    <div className="row">
+                        <div className="col-sm-12">
+                            <SimpleList />
+                        </div>
+                    </div>
                 </div>
-            </div>
-        </div>
-        <div className="container-fluid">
-            <div className="title" style={{marginTop: 100}}>Shared Group</div>
-            <div className="row">
-                <div className="col-sm-6">
-                    <SharedGroup
-                        items={['Apple', 'Banaba', 'Cherry', 'Grape']}
-                    />
+                <div className="container-fluid">
+                    <div className="title" style={{marginTop: 100}}>Shared Group</div>
+                    <div className="form-group">
+                        <button
+                            type="button"
+                            className="btn btn-default"
+                            onClick={::this.handleClick}
+                        >
+                            Add more items
+                        </button>
+                    </div>
+                    <div className="row">
+                        <div className="col-sm-6">
+                            <SharedGroup
+                                items={this.state.left}
+                            />
+                        </div>
+                        <div className="col-sm-6">
+                            <SharedGroup
+                                items={this.state.right}
+                            />
+                        </div>
+                    </div>
                 </div>
-                <div className="col-sm-6">
-                    <SharedGroup
-                        items={['Lemon', 'Orange', 'Pear', 'Peach']}
-                    />
-                </div>
             </div>
-        </div>
-    </div>,
+        );
+    }
+}
+
+ReactDOM.render(
+    <App />,
     document.getElementById('container')
 );

examples/src/shared-group.jsx

@@ -7,3 +7,7 @@ import React from 'react';
     model: 'items',
-    group: 'shared'
+    group: {
+        name: 'shared',
+        pull: true, //'clone',
+        put: true
+    }
 };
@@ -28,3 +32,3 @@
         ));
-        
+
         return (
@@ -31,0 +35,0 @@ <ul ref="list" className="block-list">{items}</ul>

examples/webpack.config.babel.js

 import path from 'path';
+import webpack from 'webpack';
 
@@ -24,2 +25,5 @@ export default {
     },
+    plugins: [
+        new webpack.optimize.UglifyJsPlugin()
+    ],
     resolve: {
@@ -26,0 +30,0 @@ extensions: ['', '.js', '.jsx']

lib/index.js

@@ -94,3 +94,5 @@ 'use strict';
 
-                return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(_class2)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.sortableInstance = null, _this.sortableOptions = extend({}, defaultOptions, options), _temp), _possibleConstructorReturn(_this, _ret);
+                return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(_class2)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+                    sortableInstance: null
+                }, _this.sortableOptions = extend({}, defaultOptions, options), _temp), _possibleConstructorReturn(_this, _ret);
             }
@@ -107,3 +109,3 @@
                         var method = sortableComponent[methodName];
-                        method && method.call(sortableComponent, evt, _this2.sortableInstance);
+                        method && method.call(sortableComponent, evt, _this2.state.sortableInstance);
                     };
@@ -156,5 +158,4 @@
                     });
-
-                    var domNode = _reactDom2.default.findDOMNode(sortableComponent.refs[this.sortableOptions.ref] || sortableComponent);
-                    this.sortableInstance = _sortablejs2.default.create(domNode, copyOptions);
+                    this.populatedOptions = copyOptions;
+                    this.initSortable(sortableComponent);
                 }
@@ -175,7 +176,30 @@ }, {
             }, {
+                key: 'componentDidUpdate',
+                value: function componentDidUpdate(prevProps) {
+                    var model = this.sortableOptions.model;
+                    var prevItems = prevProps[model];
+                    var currItems = this.props[model];
+                    if (prevItems !== currItems) {
+                        this.initSortable(this.refs[refName]);
+                    }
+                }
+            }, {
                 key: 'componentWillUnmount',
                 value: function componentWillUnmount() {
-                    if (this.sortableInstance) {
-                        this.sortableInstance.destroy();
-                        this.sortableInstance = null;
+                    this.destroySortable();
+                }
+            }, {
+                key: 'initSortable',
+                value: function initSortable(sortableComponent) {
+                    this.destroySortable();
+                    var domNode = _reactDom2.default.findDOMNode(sortableComponent.refs[this.sortableOptions.ref] || sortableComponent);
+                    var sortableInstance = _sortablejs2.default.create(domNode, this.populatedOptions);
+                    this.setState({ sortableInstance: sortableInstance });
+                }
+            }, {
+                key: 'destroySortable',
+                value: function destroySortable() {
+                    if (this.state.sortableInstance) {
+                        this.state.sortableInstance.destroy();
+                        this.setState({ sortableInstance: null });
                     }
@@ -186,3 +210,3 @@ }
                 value: function render() {
-                    return _react2.default.createElement(Component, _extends({ ref: refName }, this.props));
+                    return _react2.default.createElement(Component, _extends({ ref: refName }, this.props, this.state));
                 }
@@ -189,0 +213,0 @@ }]);

package.json

 {
   "name": "react-sortablejs",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "A higher order React component for Sortable (https://github.com/RubaXa/Sortable).",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/index.jsx

@@ -44,3 +44,7 @@ import React from 'react';
 const SortableMixin = (options = defaultOptions) => (Component) => class extends React.Component {
-    sortableInstance = null;
+
+    state = {
+        sortableInstance: null
+    };
+
     sortableOptions = extend({}, defaultOptions, options);
@@ -53,3 +57,3 @@
             const method = sortableComponent[methodName];
-            method && method.call(sortableComponent, evt, this.sortableInstance);
+            method && method.call(sortableComponent, evt, this.state.sortableInstance);
         };
@@ -110,5 +114,4 @@
         });
-
-        const domNode = ReactDOM.findDOMNode(sortableComponent.refs[this.sortableOptions.ref] || sortableComponent);
-        this.sortableInstance = Sortable.create(domNode, copyOptions);
+        this.populatedOptions = copyOptions
+        this.initSortable(sortableComponent);
     }
@@ -126,6 +129,23 @@ componentWillReceiveProps(nextProps) {
     }
+    componentDidUpdate(prevProps) {
+        const model = this.sortableOptions.model;
+        const prevItems = prevProps[model];
+        const currItems = this.props[model];
+        if(prevItems !== currItems) {
+            this.initSortable(this.refs[refName]);
+        }
+    }
     componentWillUnmount() {
-        if (this.sortableInstance) {
-            this.sortableInstance.destroy();
-            this.sortableInstance = null;
+        this.destroySortable();
+    }
+    initSortable(sortableComponent) {
+        this.destroySortable();
+        const domNode = ReactDOM.findDOMNode(sortableComponent.refs[this.sortableOptions.ref] || sortableComponent);
+        const sortableInstance = Sortable.create(domNode, this.populatedOptions);
+        this.setState({sortableInstance});
+    }
+    destroySortable() {
+        if (this.state.sortableInstance) {
+            this.state.sortableInstance.destroy();
+            this.setState({sortableInstance: null});
         }
@@ -136,3 +156,3 @@ }
         return (
-            <Component ref={refName} {...this.props} />
+            <Component ref={refName} {...this.props} {...this.state} />
         );
@@ -139,0 +159,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

4

decreased by-20%

Worsened metrics

Total package byte prevSize

1277448

decreased by-28.48%

Lines of code

9220

decreased by-65.73%

No dependency changes