4
4
[ ![ npm version] ( https://img.shields.io/npm/v/react-sortable-hoc.svg )] ( https://www.npmjs.com/package/react-sortable-hoc )
5
5
[ ![ npm downloads] ( https://img.shields.io/npm/dm/react-sortable-hoc.svg )] ( https://www.npmjs.com/package/react-sortable-hoc )
6
6
[ ![ license] ( https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000 )] ( https://github.com/clauderic/react-sortable-hoc/blob/master/LICENSE )
7
- [ ![ XO code style] ( https://img.shields.io/badge/code_style-XO-5ed9c7.svg )] ( https://github.com/sindresorhus/xo )
8
7
[ ![ Gitter] ( https://badges.gitter.im/clauderic/react-sortable-hoc.svg )] ( https://gitter.im/clauderic/react-sortable-hoc )
9
8
10
9
### Examples available here: <a href =" # " >http://clauderic.github.io/react-sortable-hoc/ </a >
@@ -52,32 +51,32 @@ import React, {Component} from 'react';
52
51
import {render } from ' react-dom' ;
53
52
import {SortableContainer , SortableElement , arrayMove } from ' react-sortable-hoc' ;
54
53
55
- const SortableItem = SortableElement (({value}) => < li> {value}< / li> );
54
+ const SortableItem = SortableElement (({value}) =>
55
+ < li> {value}< / li>
56
+ );
56
57
57
58
const SortableList = SortableContainer (({items}) => {
58
- return (
59
- < ul>
60
- {items .map ((value , index ) =>
61
- < SortableItem key= {` item-${ index} ` } index= {index} value= {value} / >
62
- )}
63
- < / ul>
64
- );
59
+ return (
60
+ < ul>
61
+ {items .map ((value , index ) => (
62
+ < SortableItem key= {` item-${ index} ` } index= {index} value= {value} / >
63
+ ) )}
64
+ < / ul>
65
+ );
65
66
});
66
67
67
68
class SortableComponent extends Component {
68
- state = {
69
- items: [' Item 1' , ' Item 2' , ' Item 3' , ' Item 4' , ' Item 5' , ' Item 6' ]
70
- }
71
- onSortEnd = ({oldIndex, newIndex}) => {
72
- this .setState ({
73
- items: arrayMove (this .state .items , oldIndex, newIndex)
74
- });
75
- };
76
- render () {
77
- return (
78
- < SortableList items= {this .state .items } onSortEnd= {this .onSortEnd } / >
79
- )
80
- }
69
+ state = {
70
+ items: [' Item 1' , ' Item 2' , ' Item 3' , ' Item 4' , ' Item 5' , ' Item 6' ],
71
+ };
72
+ onSortEnd = ({oldIndex, newIndex}) => {
73
+ this .setState ({
74
+ items: arrayMove (this .state .items , oldIndex, newIndex),
75
+ });
76
+ };
77
+ render () {
78
+ return < SortableList items= {this .state .items } onSortEnd= {this .onSortEnd } / > ;
79
+ }
81
80
}
82
81
83
82
render (< SortableComponent/ > , document .getElementById (' root' ));
@@ -95,7 +94,7 @@ There are already a number of great Drag & Drop libraries out there (for instanc
95
94
#### SortableContainer HOC
96
95
| Property | Type | Default | Description |
97
96
| :---------------------------| :------------------| :-----------------------------------------------------------------------------------------------------------| :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
98
- | axis | String | ` y ` | Items can be sorted horizontally, vertically or in a grid. Possible values: ` x ` , ` y ` or ` xy ` |
97
+ | axis | String | ` y ` | Items can be sorted horizontally, vertically or in a grid. Possible values: ` x ` , ` y ` or ` xy ` |
99
98
| lockAxis | String | | If you'd like, you can lock movement to an axis while sorting. This is not something that is possible with HTML5 Drag & Drop |
100
99
| helperClass | String | | You can provide a class you'd like to add to the sortable helper to add some styles to it |
101
100
| transitionDuration | Number | ` 300 ` | The duration of the transition when elements shift positions. Set this to ` 0 ` if you'd like to disable transitions |
0 commit comments