Migrate ListControl from react-sortable to react-sortable-hoc
This commit is contained in:
Benaiah Mischenko
Shawn Erquhart
parent
43a44743c8
commit
f649e8cad6
@ -154,7 +154,7 @@
|
||||
"react-router-dom": "^4.2.2",
|
||||
"react-router-redux": "^5.0.0-alpha.6",
|
||||
"react-sidebar": "^2.2.1",
|
||||
"react-sortable": "^1.2.0",
|
||||
"react-sortable-hoc": "^0.6.8",
|
||||
"react-split-pane": "^0.1.66",
|
||||
"react-toolbox": "^2.0.0-beta.12",
|
||||
"react-topbar-progress-indicator": "^1.0.0",
|
||||
|
||||
@ -52,7 +52,6 @@
|
||||
.nc-listControl-item {
|
||||
position: relative;
|
||||
padding-left: 24px;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.nc-listControl-objectLabel {
|
||||
@ -83,9 +82,11 @@
|
||||
}
|
||||
|
||||
.nc-listControl-dragIcon {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
cursor: move;
|
||||
display: block;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 2px;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import { List, Map, fromJS } from 'immutable';
|
||||
import { sortable } from 'react-sortable';
|
||||
import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
|
||||
import FontIcon from 'react-toolbox/lib/font_icon';
|
||||
import ObjectControl from './ObjectControl';
|
||||
|
||||
function ListItem(props) {
|
||||
return <div {...props} className={`list-item ${ props.className }`}>{props.children}</div>;
|
||||
return <div {...props} className={`list-item ${ props.className || '' }`}>{props.children}</div>;
|
||||
}
|
||||
ListItem.propTypes = {
|
||||
className: PropTypes.string,
|
||||
@ -18,7 +18,12 @@ function valueToString(value) {
|
||||
return value ? value.join(',').replace(/,([^\s]|$)/g, ', $1') : '';
|
||||
}
|
||||
|
||||
const SortableListItem = sortable(ListItem);
|
||||
const SortableListItem = SortableElement(ListItem);
|
||||
const DragHandle = SortableHandle(
|
||||
() => <FontIcon value="drag_handle" className="nc-listControl-dragIcon" />
|
||||
);
|
||||
const SortableList = SortableContainer(({ items, renderItem }) =>
|
||||
(<div>{items.map(renderItem)}</div>));
|
||||
|
||||
const valueTypes = {
|
||||
SINGLE: 'SINGLE',
|
||||
@ -126,55 +131,52 @@ export default class ListControl extends Component {
|
||||
return value || `No ${ labelField.get('name') }`;
|
||||
}
|
||||
|
||||
handleSort = (obj) => {
|
||||
this.setState({ draggingIndex: obj.draggingIndex });
|
||||
if ('items' in obj) {
|
||||
this.props.onChange(fromJS(obj.items));
|
||||
}
|
||||
onSortEnd = ({ oldIndex, newIndex }) => {
|
||||
const { value, onChange } = this.props;
|
||||
const item = value.get(oldIndex);
|
||||
const newValue = value.delete(oldIndex).insert(newIndex, item);
|
||||
this.props.onChange(newValue);
|
||||
};
|
||||
|
||||
renderItem(item, index) {
|
||||
const { value, field, getAsset, onAddAsset, onRemoveAsset } = this.props;
|
||||
renderItem = (item, index) => {
|
||||
const { field, getAsset, onAddAsset, onRemoveAsset } = this.props;
|
||||
const { itemStates } = this.state;
|
||||
const collapsed = itemStates.getIn([index, 'collapsed']);
|
||||
const classNames = ['nc-listControl-item', collapsed ? 'nc-listControl-collapsed' : 'nc-listControl-expanded'];
|
||||
|
||||
return (<SortableListItem
|
||||
key={index}
|
||||
updateState={this.handleSort} // eslint-disable-line
|
||||
items={value ? value.toJS() : []}
|
||||
draggingIndex={this.state.draggingIndex}
|
||||
sortId={index}
|
||||
outline="list"
|
||||
>
|
||||
<div className={classNames.join(' ')}>
|
||||
<button className="nc-listControl-toggleButton" onClick={this.handleToggle(index)}>
|
||||
<FontIcon value={collapsed ? 'expand_more' : 'expand_less'} />
|
||||
</button>
|
||||
<FontIcon value="drag_handle" className="nc-listControl-dragIcon" />
|
||||
<button className="nc-listControl-removeButton" onClick={this.handleRemove(index)}>
|
||||
<FontIcon value="close" />
|
||||
</button>
|
||||
<div className="nc-listControl-objectLabel">{this.objectLabel(item)}</div>
|
||||
<ObjectControl
|
||||
value={item}
|
||||
field={field}
|
||||
className="nc-listControl-objectControl"
|
||||
onChange={this.handleChangeFor(index)}
|
||||
getAsset={getAsset}
|
||||
onAddAsset={onAddAsset}
|
||||
onRemoveAsset={onRemoveAsset}
|
||||
/>
|
||||
</div>
|
||||
return (<SortableListItem className={classNames.join(' ')} index={index} key={`item-${ index }`}>
|
||||
<button className="nc-listControl-toggleButton" onClick={this.handleToggle(index)}>
|
||||
<FontIcon value={collapsed ? 'expand_more' : 'expand_less'} />
|
||||
</button>
|
||||
<DragHandle />
|
||||
<button className="nc-listControl-removeButton" onClick={this.handleRemove(index)}>
|
||||
<FontIcon value="close" />
|
||||
</button>
|
||||
<div className="nc-listControl-objectLabel">{this.objectLabel(item)}</div>
|
||||
<ObjectControl
|
||||
value={item}
|
||||
field={field}
|
||||
className="nc-listControl-objectControl"
|
||||
onChange={this.handleChangeFor(index)}
|
||||
getAsset={getAsset}
|
||||
onAddAsset={onAddAsset}
|
||||
onRemoveAsset={onRemoveAsset}
|
||||
/>
|
||||
</SortableListItem>);
|
||||
}
|
||||
};
|
||||
|
||||
renderListControl() {
|
||||
const { value, forID, field } = this.props;
|
||||
const listLabel = field.get('label');
|
||||
|
||||
return (<div id={forID}>
|
||||
{value && value.map((item, index) => this.renderItem(item, index))}
|
||||
<SortableList
|
||||
items={value || List()}
|
||||
renderItem={this.renderItem}
|
||||
onSortEnd={this.onSortEnd}
|
||||
useDragHandle
|
||||
lockAxis="y"
|
||||
/>
|
||||
<button className="nc-listControl-addButton" onClick={this.handleAdd}>
|
||||
<FontIcon value="add" className="nc-listControl-addButtonIcon" />
|
||||
<span className="nc-listControl-addButtonText">new {listLabel}</span>
|
||||
@ -198,4 +200,4 @@ export default class ListControl extends Component {
|
||||
onBlur={this.handleCleanup}
|
||||
/>);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
15
yarn.lock
15
yarn.lock
@ -1177,7 +1177,7 @@ babel-register@^6.26.0:
|
||||
mkdirp "^0.5.1"
|
||||
source-map-support "^0.4.15"
|
||||
|
||||
babel-runtime@6.x.x, babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0, babel-runtime@^6.5.0, babel-runtime@^6.6.1, babel-runtime@^6.9.2:
|
||||
babel-runtime@6.x.x, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0, babel-runtime@^6.5.0, babel-runtime@^6.6.1, babel-runtime@^6.9.2:
|
||||
version "6.26.0"
|
||||
resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
|
||||
dependencies:
|
||||
@ -5303,7 +5303,7 @@ lodash.uniq@^4.5.0:
|
||||
version "4.5.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
|
||||
|
||||
"lodash@4.6.1 || ^4.16.1", lodash@^4.0.0, lodash@^4.1.0, lodash@^4.11.2, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.16.2, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1, lodash@^4.6.1, lodash@^4.7.0:
|
||||
"lodash@4.6.1 || ^4.16.1", lodash@^4.0.0, lodash@^4.1.0, lodash@^4.11.2, lodash@^4.12.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.16.2, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1, lodash@^4.6.1, lodash@^4.7.0:
|
||||
version "4.17.4"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
|
||||
|
||||
@ -7536,9 +7536,14 @@ react-simple-di@^1.2.0:
|
||||
babel-runtime "6.x.x"
|
||||
hoist-non-react-statics "1.x.x"
|
||||
|
||||
react-sortable@^1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/react-sortable/-/react-sortable-1.2.0.tgz#5acd7e1910df665408957035acb5f2354519d849"
|
||||
react-sortable-hoc@^0.6.8:
|
||||
version "0.6.8"
|
||||
resolved "https://registry.yarnpkg.com/react-sortable-hoc/-/react-sortable-hoc-0.6.8.tgz#b08562f570d7c41f6e393fca52879d2ebb9118e9"
|
||||
dependencies:
|
||||
babel-runtime "^6.11.6"
|
||||
invariant "^2.2.1"
|
||||
lodash "^4.12.0"
|
||||
prop-types "^15.5.7"
|
||||
|
||||
react-split-pane@^0.1.66:
|
||||
version "0.1.66"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user