@bigfishtv/cockpit/src/components/input/ReorderableCellsInput.js

import PropTypes from 'prop-types'
import React, { Component } from 'react'

export default class ReorderableCellsInput extends Component {
	static propTypes = {
		Item: PropTypes.func.isRequired,
		value: PropTypes.array.isRequired,
		onChange: PropTypes.func.isRequired,
		removable: PropTypes.bool,
		reorderable: PropTypes.bool,
		duplicable: PropTypes.bool,
	}

	static defaultProps = {
		removable: true,
		reorderable: true,
		duplicable: true,
	}

	removeItem(index) {
		const value = this.props.value.filter((val, i) => i !== index)
		this.props.onChange(value)
	}

	moveItem = (id, afterId) => {
		let value = this.props.value.slice()
		const cell = value.filter(c => c.id === id)[0]
		const afterCell = value.filter(c => c.id === afterId)[0]
		const cellIndex = value.indexOf(cell)
		const afterIndex = value.indexOf(afterCell)
		value.splice(cellIndex, 1)
		value.splice(afterIndex, 0, cell)
		this.props.onChange(value)
	}

	render() {
		const { removable, reorderable, duplicable } = this.props
		return (
			<div>
				{this.props.value.map((item, i) => (
					<this.props.Item
						{...item}
						CellControl={null}
						id={item.id}
						key={item.id}
						removable={removable}
						reorderable={reorderable}
						duplicable={duplicable}
						onRemove={() => this.removeItem(i)}
						onMove={this.moveItem}
					/>
				))}
			</div>
		)
	}
}