Socket
Socket
Sign inDemoInstall

react-reorder

Package Overview
Dependencies
4
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 3.0.0-alpha.1 to 3.0.0-alpha.2

.eslintrc.json
examples/.babelrc
examples/.eslintrc.json
examples/src/js/grid.js
examples/src/js/kanban.js
examples/src/js/lock-horizontal.js
examples/src/js/lock-vertical.js
examples/src/js/multi-list.js
scripts/start
tests/.babelrc
tests/.eslintrc.json

363

examples/src/js/index.js

@@ -1,165 +0,13 @@

import './styles';
import { classNames } from './styles';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import ReactStyleSheets from 'react-style-sheets';
import Immutable from 'immutable';
import Reorder, { reorderImmutable, reorderFromToImmutable } from '../../../src/index';
const classNames = ReactStyleSheets.createUniqueClassStyles({
app: {
position: 'relative',
width: '100%',
maxWidth: 768,
overflow: 'hidden',
margin: 'auto',
padding: 8
},
myList: {
float: 'left',
width: '100%',
height: 'auto',
border: [1, 'solid', 'grey'],
padding: 8,
listStyle: 'none'
},
myList1: {
height: 200,
overflow: 'auto',
paddingBottom: 0
},
myList2: {
overflowX: 'auto',
overflowY: 'hidden',
height: 62,
whiteSpace: 'nowrap'
},
mylist3: {},
multiList: {
width: '50%',
minHeight: 100,
maxHeight: 400,
overflowX: 'hidden',
overflowY: 'auto'
},
listItem: {
float: 'left',
width: '100%',
height: 46,
padding: 12,
border: [2, 'solid', 'lightblue'],
marginBottom: 8,
transformOrigin: '50% 50%'
},
listItem2: {
float: 'none',
width: 80,
marginBottom: 0,
whiteSpace: 'nowrap',
overflow: 'hidden',
display: 'inline-block'
},
listItem3: {
float: 'left',
width: '50%'
},
multiListItem: {},
placeholder: {
backgroundColor: '#CCC',
border: [1, 'solid', '#CCC']
},
customPlaceholder: {
opacity: 0.2
},
dragged: {
backgroundColor: '#EEE',
transform: 'scale(0.98, 0.98)',
opacity: 0.8
},
selected: {
border: [2, 'solid', 'red']
},
contentHolder: {
display: 'table',
width: '100%'
},
itemName: {
display: 'table-cell'
},
input: {
display: 'table-cell',
width: '100%'
}
});
import { LockHorizontal } from './lock-horizontal';
import { LockVertical } from './lock-vertical';
import { Grid } from './grid';
import { MultiList } from './multi-list';
import { Kanban } from './kanban';
class Main extends Component {
constructor () {
super();
this.state = {
list: Immutable.List(Immutable.Range(0, 10).map(function (value) {
return {
name: ['Thing', value].join(' '),
color: ['rgb(', (value + 1) * 25, ',', 250 - ((value + 1) * 25), ',0)'].join('')
};
})),
listA: Immutable.List(Immutable.Range(0, 5).map(function (value) {
return {
name: ['List A - Item', value].join(' '),
color: ['rgb(', (value + 1) * 25, ',', 250 - ((value + 1) * 25), ',0)'].join('')
};
})),
listB: Immutable.List(Immutable.Range(0, 5).map(function (value) {
return {
name: ['List B - Item', value].join(' '),
color: ['rgb(', (value + 1) * 25, ',', 250 - ((value + 1) * 25), ',0)'].join('')
};
})),
prefix: 'Prefix'
};
}
onReorder (event, previousIndex, nextIndex) {
const list = reorderImmutable(this.state.list, previousIndex, nextIndex);
this.setState({
list: list
});
}
onReorderGroup (event, previousIndex, nextIndex, fromId, toId) {
if (fromId === toId) {
const list = reorderImmutable(this.state[fromId], previousIndex, nextIndex);
this.setState({
[fromId]: list
});
} else {
const lists = reorderFromToImmutable({
from: this.state[fromId],
to: this.state[toId]
}, previousIndex, nextIndex);
this.setState({
[fromId]: lists.from,
[toId]: lists.to
});
}
}
onDisableToggle () {
this.setState({
disableReorder: !this.state.disableReorder
});
}
onPrefixChange (event) {
const target = event.currentTarget;
this.setState({
prefix: target.value
});
}
// ----
render () {

@@ -174,196 +22,9 @@ return (

</h2>
<h3>
Lock horizontal
</h3>
<p>
This example has a hold time of 500 milliseconds before dragging begins,
allowing for other events like clicking / tapping to be attached
</p>
<p>
Selected item: {this.state.clickedItem ? this.state.clickedItem.name : undefined}
</p>
<p>
{'Prefix: '}
<input type="text" value={this.state.prefix} onChange={this.onPrefixChange.bind(this)} />
</p>
<Reorder
reorderId="myList1"
component="ul"
className={[classNames.myList, classNames.myList1].join(' ')}
placeholderClassName={classNames.placeholder}
draggedClassName={classNames.dragged}
lock="horizontal"
holdTime={500}
onReorder={this.onReorder.bind(this)}
placeholder={<div className={[classNames.listItem, classNames.customPlaceholder].join(' ')} />}
>
{
this.state.list.map(function (item) {
return (
<li
key={item.name}
className={classNames.listItem}
style={{color: item.color}}
>
<div className={classNames.contentHolder}>
<span className={classNames.itemName}>
{this.state.prefix} {item.name}
</span>
<input
className={classNames.input}
type="text"
defaultValue="Change me, I retain this state!"
/>
</div>
</li>
);
}.bind(this)).toArray()
}
</Reorder>
<Kanban />
<LockHorizontal />
<LockVertical />
<Grid />
<MultiList />
<h3>
Lock vertical
</h3>
<p>
This example has a hold time of 250 milliseconds
</p>
<p>
{'Reorder disabled: '}
<input
type="checkbox"
value={this.state.disableReorder || false}
onChange={this.onDisableToggle.bind(this)}
/>
Last item clicked: {this.state.clickedItem2 ? this.state.clickedItem2.name : undefined}
</p>
<Reorder
reorderId="myList2"
component="ul"
className={[classNames.myList, classNames.myList2].join(' ')}
placeholderClassName={classNames.placeholder}
draggedClassName={classNames.dragged}
lock="vertical"
holdTime={250}
onReorder={this.onReorder.bind(this)}
disabled={this.state.disableReorder}
>
{
this.state.list.map(function (item) {
return (
<li
key={item.name}
className={[classNames.listItem, classNames.listItem2].join(' ')}
style={{color: item.color}}
>
{item.name}
</li>
);
}.bind(this)).toArray()
}
</Reorder>
<h3>
No lock (grid)
</h3>
<p>
This example has a hold time of 0 milliseconds
</p>
<Reorder
reorderId="myList3"
component="ul"
className={[classNames.myList, classNames.myList3].join(' ')}
placeholderClassName={classNames.placeholder}
draggedClassName={classNames.dragged}
onReorder={this.onReorder.bind(this)}
>
{
this.state.list.map(function (item) {
return (
<li
key={item.name}
className={[classNames.listItem, classNames.listItem3].join(' ')}
style={{color: item.color}}
>
{item.name}
</li>
);
}.bind(this)).toArray()
}
</Reorder>
<h3>
Drag between lists
</h3>
<p>
This example has a group of lists that you can drag items between
</p>
<Reorder
reorderId="listA"
reorderGroup="reorderGroup"
component="ul"
className={[classNames.myList, classNames.multiList].join(' ')}
placeholderClassName={classNames.placeholder}
draggedClassName={classNames.dragged}
onReorder={this.onReorderGroup.bind(this)}
>
{
this.state.listA.map(function (item) {
return (
<li
key={item.name}
className={[classNames.listItem, classNames.multiListItem].join(' ')}
style={{color: item.color}}
>
<div className={classNames.contentHolder}>
<span className={classNames.itemName}>
{item.name}
</span>
<input
className={classNames.input}
type="text"
defaultValue="Change me, I sort of retain this state!"
/>
</div>
</li>
);
}.bind(this)).toArray()
}
</Reorder>
<Reorder
reorderId="listB"
reorderGroup="reorderGroup"
component="ul"
className={[classNames.myList, classNames.multiList].join(' ')}
placeholderClassName={classNames.placeholder}
draggedClassName={classNames.dragged}
onReorder={this.onReorderGroup.bind(this)}
>
{
this.state.listB.map(function (item) {
return (
<li
key={item.name}
className={[classNames.listItem, classNames.multiListItem].join(' ')}
style={{color: item.color}}
>
<div className={classNames.contentHolder}>
<span className={classNames.itemName}>
{item.name}
</span>
<input
className={classNames.input}
type="text"
defaultValue="Change me, I sort of retain this state!"
/>
</div>
</li>
);
}.bind(this)).toArray()
}
</Reorder>
</div>

@@ -370,0 +31,0 @@ );

162

examples/src/js/styles.js

@@ -33,1 +33,163 @@ import ReactStyleSheets from 'react-style-sheets';

});
export const classNames = ReactStyleSheets.createUniqueClassStyles({
app: {
position: 'relative',
width: '100%',
maxWidth: 768,
overflow: 'hidden',
margin: 'auto',
padding: 8
},
clearfix: {
before: {
content: '\'\'',
display: 'table',
clear: 'both'
},
after: {
content: '\'\'',
display: 'table',
clear: 'both'
}
},
myList: {
float: 'left',
width: '100%',
height: 'auto',
border: [1, 'solid', 'grey'],
padding: 8,
paddingBottom: 0,
listStyle: 'none'
},
myList1: {
height: 200,
overflow: 'auto',
paddingBottom: 0
},
myList2: {
overflowX: 'auto',
overflowY: 'hidden',
height: 62,
whiteSpace: 'nowrap'
},
mylist3: {},
multiList: {
width: '50%',
minHeight: 100,
maxHeight: 400,
overflowX: 'hidden',
overflowY: 'auto'
},
listItem: {
float: 'left',
width: '100%',
height: 46,
padding: 12,
border: [2, 'solid', 'lightblue'],
marginBottom: 8,
transformOrigin: '50% 50%'
},
listItem2: {
float: 'none',
width: 80,
marginBottom: 0,
whiteSpace: 'nowrap',
overflow: 'hidden',
display: 'inline-block'
},
listItem3: {
float: 'left',
width: '50%'
},
multiListItem: {},
placeholder: {
backgroundColor: '#CCC',
border: [1, 'solid', '#CCC']
},
customPlaceholder: {
opacity: 0.2
},
dragged: {
backgroundColor: '#EEE',
transform: 'scale(0.98, 0.98)',
opacity: 0.8
},
selected: {
border: [2, 'solid', 'red']
},
contentHolder: {
display: 'table',
width: '100%'
},
itemName: {
display: 'table-cell'
},
input: {
display: 'table-cell',
width: '100%'
},
kanban: {
overflowY: 'auto',
height: 500,
whiteSpace: 'nowrap'
},
kanbanListOuter: {
width: 200,
border: [1, 'solid', '#ddd'],
backgroundColor: '#fafafa',
borderRadius: 4,
display: 'inline-block',
verticalAlign: 'top',
whiteSpace: 'normal',
marginRight: 8
},
kanbanListInner: {
border: 'none',
width: '100%',
minHeight: 100,
maxHeight: 400,
overflowX: 'hidden',
overflowY: 'auto',
margin: 0
},
kanbanItem: {
borderRadius: 4,
border: [1, 'solid', '#ccc'],
backgroundColor: '#eee'
},
kanbanHeader: {
float: 'left',
width: '100%',
padding: 8,
borderBottom: [1, 'solid', '#ddd'],
backgroundColor: '#eee',
fontWeight: 'bold'
},
kanbanFooter: {
float: 'left',
width: '100%',
padding: 8,
borderTop: [1, 'solid', '#ddd'],
backgroundColor: '#eee',
cursor: 'pointer',
textAlign: 'center'
},
delete: {
float: 'right',
color: '#888',
cursor: 'pointer'
},
kanbanAddList: {
width: 200,
padding: 8,
border: [1, 'solid', '#ddd'],
backgroundColor: '#fafafa',
borderRadius: 4,
display: 'inline-block',
verticalAlign: 'top',
whiteSpace: 'normal',
cursor: 'pointer',
textAlign: 'center'
}
});

11

package.json
{
"name": "react-reorder",
"version": "3.0.0-alpha.1",
"version": "3.0.0-alpha.2",
"description": "Drag & drop, touch enabled, reorderable / sortable list, React component",

@@ -9,3 +9,3 @@ "author": "Jake 'Sid' Smith",

"scripts": {
"start": "http-server examples/ -c-1 -o",
"start": "./scripts/start",
"build-js": "browserify -t babelify examples/src/js/index.js -o examples/build/js/index.js",

@@ -16,7 +16,5 @@ "watch-js": "watchify -t babelify examples/src/js/index.js -o examples/build/js/index.js -v",

"watch": "npm run watch-js",
"lint-src": "eslint -c .eslintrc-src.json src/",
"lint-examples": "eslint -c .eslintrc-examples.json examples/src/js/",
"lint-tests": "eslint -c .eslintrc-tests.json tests/",
"lint": "eslint src/ tests/ examples/js/",
"mocha": "BABEL_ENV=mocha nyc mocha --opts .mocharc 'tests/**/*.test.js'",
"test": "npm run lint-src && npm run lint-examples && npm run lint-tests && npm run mocha"
"test": "npm run lint && npm run mocha"
},

@@ -49,2 +47,3 @@ "bugs": "https://github.com/JakeSidSmith/react-reorder/issues",

"chai": "3.5.0",
"concurrently": "3.5.0",
"eslintrc": "git+https://github.com/JakeSidSmith/eslintrc.git#v2.1.0",

@@ -51,0 +50,0 @@ "http-server": "0.8.5",

16

src/index.js

@@ -61,6 +61,2 @@ 'use strict';

if (reorderId in reorderComponents) {
throw new Error('Duplicate reorderId: ' + reorderId);
}
if (typeof reorderGroup !== 'undefined') {

@@ -74,2 +70,6 @@ if ((reorderGroup in reorderGroups) && (reorderId in reorderGroups[reorderGroup])) {

} else {
if (reorderId in reorderComponents) {
throw new Error('Duplicate reorderId: ' + reorderId);
}
reorderComponents[reorderId] = callback;

@@ -82,6 +82,2 @@ }

if (!(reorderId in reorderComponents)) {
throw new Error('Unknown reorderId: ' + reorderId);
}
if (typeof reorderGroup !== 'undefined') {

@@ -98,2 +94,6 @@ if (!(reorderGroup in reorderGroups)) {

} else {
if (!(reorderId in reorderComponents)) {
throw new Error('Unknown reorderId: ' + reorderId);
}
delete reorderComponents[reorderId];

@@ -100,0 +100,0 @@ }

.eslintrc-examples.json
.eslintrc-src.json
.eslintrc-tests.json
.babelrc

Sorry, the diff of this file is not supported yet

.nvmrc

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc