react-sortable-hoc - npm Package Compare versions

Comparing version 1.4.0 to 1.5.0

CHANGELOG.md

@@ -5,2 +5,10 @@ # Change Log
 
+<a name="1.5.0"></a>
+
+# [1.5.0](https://github.com/clauderic/react-sortable-hoc/compare/v1.4.0...v1.5.0) (2019-01-22)
+
+### Features
+
+- allow helperContainer prop to be a function returning an HTMLElement ([f4a9b4a](https://github.com/clauderic/react-sortable-hoc/commit/f4a9b4a))
+
 <a name="1.4.0"></a>
@@ -7,0 +15,0 @@

examples/basic.js

 import React, {Component} from 'react';
 import {render} from 'react-dom';
-import {SortableContainer, SortableElement} from 'react-sortable-hoc';
+import {sortableContainer, sortableElement} from 'react-sortable-hoc';
 import {arrayMove} from 'array-move';
 
-const SortableItem = SortableElement(({value}) => <li>{value}</li>);
+const SortableItem = sortableElement(({value}) => <li>{value}</li>);
 
-const SortableList = SortableContainer(({items}) => {
-  return (
-    <ul>
-      {items.map((value, index) => (
-        <SortableItem key={`item-${index}`} index={index} value={value} />
-      ))}
-    </ul>
-  );
+const SortableContainer = sortableContainer(({children}) => {
+  return <ul>{children}</ul>;
 });
 
-class SortableComponent extends Component {
+class App extends Component {
   state = {
     items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
   };
+
   onSortEnd = ({oldIndex, newIndex}) => {
-    this.setState({
-      items: arrayMove(this.state.items, oldIndex, newIndex),
-    });
+    this.setState(({items}) => ({
+      items: arrayMove(items, oldIndex, newIndex),
+    }));
   };
+
   render() {
-    return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />;
+    const {items} = this.state;
+
+    return (
+      <SortableContainer onSortEnd={this.onSortEnd}>
+        {items.map((value, index) => (
+          <SortableItem key={`item-${index}`} index={index} value={value} />
+        ))}
+      </SortableContainer>
+    );
   }
 }
 
-render(<SortableComponent />, document.getElementById('root'));
+render(<App />, document.getElementById('root'));

examples/drag-handle.js

 import React, {Component} from 'react';
 import {render} from 'react-dom';
 import {
-  SortableContainer,
-  SortableElement,
-  SortableHandle,
+  sortableContainer,
+  sortableElement,
+  sortableHandle,
 } from 'react-sortable-hoc';
 import arrayMove from 'array-move';
 
-// This can be any component you want
-const DragHandle = SortableHandle(() => <span>::</span>);
+const DragHandle = sortableHandle(() => <span>::</span>);
 
-const SortableItem = SortableElement(({value}) => {
-  return (
-    <li>
-      <DragHandle />
-      {value}
-    </li>
-  );
-});
+const SortableItem = sortableElement(({value}) => (
+  <li>
+    <DragHandle />
+    {value}
+  </li>
+));
 
-const SortableList = SortableContainer(({items}) => {
-  return (
-    <ul>
-      {items.map((value, index) => (
-        <SortableItem key={`item-${index}`} index={index} value={value} />
-      ))}
-    </ul>
-  );
+const SortableContainer = sortableContainer(({children}) => {
+  return <ul>{children}</ul>;
 });
 
-class SortableComponent extends Component {
+class App extends Component {
   state = {
     items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
   };
+
   onSortEnd = ({oldIndex, newIndex}) => {
-    const {items} = this.state;
-
-    this.setState({
+    this.setState(({items}) => ({
       items: arrayMove(items, oldIndex, newIndex),
-    });
+    }));
   };
+
   render() {
@@ -47,7 +38,7 @@ const {items} = this.state;
     return (
-      <SortableList
-        items={items}
-        onSortEnd={this.onSortEnd}
-        useDragHandle={true}
-      />
+      <SortableContainer onSortEnd={this.onSortEnd} useDragHandle>
+        {items.map((value, index) => (
+          <SortableItem key={`item-${index}`} index={index} value={value} />
+        ))}
+      </SortableContainer>
     );
@@ -57,2 +48,2 @@ }
 
-render(<SortableComponent />, document.getElementById('root'));
+render(<App />, document.getElementById('root'));

package.json

 {
   "name": "react-sortable-hoc",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Set of higher-order components to turn any list into a sortable, touch-friendly, animated list",
@@ -5,0 +5,0 @@ "author": {

README.md

@@ -9,3 +9,3 @@ # React Sortable (HOC)
 [![Gitter](https://badges.gitter.im/clauderic/react-sortable-hoc.svg)](https://gitter.im/clauderic/react-sortable-hoc)
-![gzip size](http://img.badgesize.io/https://npmcdn.com/react-sortable-hoc/dist/umd/react-sortable-hoc.min.js?compression=gzip)
+![gzip size](http://img.badgesize.io/https://npmcdn.com/react-sortable-hoc/dist/react-sortable-hoc.umd.min.js?compression=gzip)
 
@@ -77,5 +77,5 @@ ### Examples available here: <a href="#">http://clauderic.github.io/react-sortable-hoc/</a>
   onSortEnd = ({oldIndex, newIndex}) => {
-    this.setState({
-      items: arrayMove(this.state.items, oldIndex, newIndex),
-    });
+    this.setState(({items}) => ({
+      items: arrayMove(items, oldIndex, newIndex),
+    }));
   };
@@ -141,7 +141,7 @@ render() {
 
-In root folder:
+In root folder, run the following commands to launch React Storybook:
 
 ```
-	$ npm install
-	$ npm run storybook
+$ npm install
+$ npm start
 ```
@@ -148,0 +148,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

Total package byte prevSize

654222

increased by0.29%

Number of package files

17

increased by6.25%

Lines of code

3678

increased by1.04%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes