Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-reorder
Advanced tools
react-reorder - npm Package Compare versions
Comparing version 3.0.0-alpha.1 to 3.0.0-alpha.2
@@ -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 @@ ); |
@@ -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' | ||
| } | ||
| }); |
| { | ||
| "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", |
@@ -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 @@ } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by11.45%
85294
- Number of package files
- increased by32%
33
- Lines of code
- increased by16.84%
2116
Worsened metrics
- Dev dependency count
- increased by4.76%
22
No dependency changes