'use strict';
var React = require('react');
var Sortable = require('../views/Sortable');
var {deepPureRenderMixin} = require('../react-utils');

// We skip the first column to keep 'samples' on the left.
function makeSortable(Component) {
	return React.createClass({
		displayName: 'SpreadsheetSortable',
		mixins: [deepPureRenderMixin],
		render() {
			var {onClick, onReorder, children, ...otherProps} = this.props,
				[first, ...rest] = React.Children.toArray(children);
			return (
				<Component {...otherProps}>
					{first}
					<Sortable onClick={onClick} onReorder={order => onReorder([first.props.actionKey, ...order])}>
						{rest}
					</Sortable>
				</Component>);
		}
	});
}

module.exports = makeSortable;

@@ -521,15 +521,57 @@
 %09%09%09%09
-%7Bfirst%7D
+%3Cdiv onClick=%7BonClick%7D%3E%0A%09%09%09%09%09%09%7Bfirst%7D%0A%09%09%09%09%09%3C/div%3E
 %0A%09%09%09

Enable tooltip freeze on samples.