Skip to content

Commit

Permalink
Migrate ListControl from react-sortable to react-sortable-hoc
Browse files Browse the repository at this point in the history
  • Loading branch information
@Benaiah
Benaiah committed Oct 17, 2017
1 parent f966cd8 commit a6f5f0e
Show file tree
Hide file tree
Showing 4 changed files with 56 additions and 48 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@
"react-router-redux": "^5.0.0-alpha.6",
"react-sidebar": "^2.2.1",
"react-simple-dnd": "^0.1.2",
"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",
Expand Down
1 change: 1 addition & 0 deletions src/components/Widgets/ListControl.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,4 +91,5 @@
display: block;
width: 100%;
text-align: center;
z-index: 1;
}
86 changes: 44 additions & 42 deletions src/components/Widgets/ListControl.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
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';
import styles from './ListControl.css';

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,
Expand All @@ -19,7 +19,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={styles.dragIcon} />
);
const SortableList = SortableContainer(({ items, renderItem }) =>
(<div>{items.map(renderItem)}</div>));

const valueTypes = {
SINGLE: 'SINGLE',
Expand Down Expand Up @@ -118,64 +123,61 @@ export default class ListControl extends Component {
};
}

objectLabel(item) {
objectLabel = (item) => {
const { field } = this.props;
const multiFields = field.get('fields');
const singleField = field.get('field');
const labelField = (multiFields && multiFields.first()) || singleField;
const value = multiFields ? item.get(multiFields.first().get('name')) : singleField.get('label');
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 = [styles.item, collapsed ? styles.collapsed : styles.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={styles.toggleButton} onClick={this.handleToggle(index)}>
<FontIcon value={collapsed ? 'expand_more' : 'expand_less'} />
</button>
<FontIcon value="drag_handle" className={styles.dragIcon} />
<button className={styles.removeButton} onClick={this.handleRemove(index)}>
<FontIcon value="close" />
</button>
<div className={styles.objectLabel}>{this.objectLabel(item)}</div>
<ObjectControl
value={item}
field={field}
className={styles.objectControl}
onChange={this.handleChangeFor(index)}
getAsset={getAsset}
onAddAsset={onAddAsset}
onRemoveAsset={onRemoveAsset}
/>
</div>
return (<SortableListItem className={classNames.join(' ')} index={index} key={`item-${ index }`}>
<button className={styles.toggleButton} onClick={this.handleToggle(index)}>
<FontIcon value={collapsed ? 'expand_more' : 'expand_less'} />
</button>
<DragHandle />
<button className={styles.removeButton} onClick={this.handleRemove(index)}>
<FontIcon value="close" />
</button>
<div className={styles.objectLabel}>{this.objectLabel(item)}</div>
<ObjectControl
value={item}
field={field}
className={styles.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={styles.addButton} onClick={this.handleAdd}>
<FontIcon value="add" className={styles.addButtonIcon} />
<span className={styles.addButtonText}>new {listLabel}</span>
Expand All @@ -199,4 +201,4 @@ export default class ListControl extends Component {
onBlur={this.handleCleanup}
/>);
}
}
};
15 changes: 10 additions & 5 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1138,7 +1138,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:
Expand Down Expand Up @@ -5183,7 +5183,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"

Expand Down Expand Up @@ -7210,9 +7210,14 @@ react-simple-dnd@^0.1.2:
react-dnd "^2.1.4"
react-dnd-html5-backend "^2.1.2"

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"
Expand Down

0 comments on commit a6f5f0e

Please sign in to comment.