Merge pull request clauderic#84 from nervetattoo/feature/controllable…

…-height

Add a getHelperDimensions fn to control SortableItem size. Fixes clauderic#83

src/.stories/Storybook.scss

@@ -102,6 +102,9 @@
     }
 }
 
+.shrinkedHelper {
+    height: 20px !important;
+}
 
 :global {
     body {

src/.stories/index.js

@@ -37,7 +37,7 @@ class ListWrapper extends Component {
 	constructor({items}) {
 		super();
 		this.state = {
-			items
+			items, isSorting: false
 		};
 	}
 	static propTypes = {
@@ -55,21 +55,35 @@ class ListWrapper extends Component {
 		width: 400,
 		height: 600
 	};
+	onSortStart = () => {
+		let {onSortStart} = this.props;
+		this.setState({isSorting: true});
+
+		if (onSortStart) {
+			onSortStart(this.refs.component);
+		}
+	};
     onSortEnd = ({oldIndex, newIndex}) => {
 		let {onSortEnd} = this.props;
         let {items} = this.state;
 
-        this.setState({items: arrayMove(items, oldIndex, newIndex)});
+        this.setState({items: arrayMove(items, oldIndex, newIndex), isSorting: false});
 
 		if (onSortEnd) {
 			onSortEnd(this.refs.component);
 		}
     };
 	render() {
 		const Component = this.props.component;
-		const {items} = this.state;
+		const {items, isSorting} = this.state;
+		const props = {
+			isSorting, items,
+			onSortEnd: this.onSortEnd,
+			onSortStart: this.onSortStart,
+			ref: "component"
+		}
 
-		return <Component ref="component" {...this.props} items={items} onSortEnd={this.onSortEnd} />;
+		return <Component {...this.props} {...props} />
 	}
 }
 
@@ -182,6 +196,24 @@ const SortableList = SortableContainer(({className, items, itemClass, sortingInd
 	);
 });
 
+const ShrinkingSortableList = SortableContainer(({className, isSorting, items, itemClass, sortingIndex, useDragHandle, sortableHandlers}) => {
+	return (
+		<div className={className} {...sortableHandlers}>
+			{items.map(({value, height}, index) =>
+				<Item
+					key={`item-${value}`}
+					className={itemClass}
+					sortingIndex={sortingIndex}
+					index={index}
+					value={value}
+					height={isSorting ? 20 : height}
+					useDragHandle={useDragHandle}
+					/>
+			)}
+		</div>
+	);
+});
+
 
 storiesOf('Basic Configuration', module)
 .add('Basic usage', () => {
@@ -205,6 +237,14 @@ storiesOf('Basic Configuration', module)
 		</div>
 	);
 })
+.add('Elements that shrink', () => {
+	const getHelperDimensions = ({node}) => ({ height: 20, width: node.offsetWidth })
+	return (
+		<div className={style.root}>
+			<ListWrapper component={ShrinkingSortableList} items={getItems(50)} helperClass={style.shrinkedHelper} getHelperDimensions={getHelperDimensions} />
+		</div>
+	);
+})
 .add('Horizontal', () => {
 	return (
 		<div className={style.root}>

src/SortableContainer/index.js

@@ -43,7 +43,11 @@ export default function SortableContainer(WrappedComponent, config = {withRef: f
 				}
 			},
 			lockToContainerEdges: false,
-			lockOffset: '50%'
+			lockOffset: '50%',
+			getHelperDimensions: ({node}) => ({
+				width: node.offsetWidth,
+				height: node.offsetHeight
+			})
 		};
 
 		static propTypes = {
@@ -67,7 +71,8 @@ export default function SortableContainer(WrappedComponent, config = {withRef: f
 				PropTypes.string,
 				PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))
 			]),
-			getContainer: PropTypes.func
+			getContainer: PropTypes.func,
+			getHelperDimensions: PropTypes.func
 		};
 
 		static childContextTypes = {
@@ -163,17 +168,18 @@ export default function SortableContainer(WrappedComponent, config = {withRef: f
 			const active = this.manager.getActive();
 
 			if (active) {
-				const {axis, onSortStart, helperClass, hideSortableGhost, useWindowAsScrollContainer} = this.props;
+				const {axis, onSortStart, helperClass, hideSortableGhost, useWindowAsScrollContainer, getHelperDimensions} = this.props;
 				let {node, collection} = active;
 				const {index} = node.sortableInfo;
 				const margin = getElementMargin(node);
 
 				const containerBoundingRect = this.container.getBoundingClientRect();
+				const dimensions = getHelperDimensions({index, node, collection})
 
 				this.node = node;
+				this.width = dimensions.width
+				this.height = dimensions.height
 				this.margin = margin;
-				this.width = node.offsetWidth;
-				this.height = node.offsetHeight;
 				this.dimension = (axis === 'x') ? this.width : this.height;
 				this.marginOffset = {
 					x: this.margin.left + this.margin.right,