@bigfishtv/cockpit/src/components/modal/ReorderableCellsModal.js

import React, { Component } from 'react'

import Modal from '../modal/Modal'
import Cell from '../cell/Cell'
import Icon from '../Icon'
import ReorderableCells from '../input/ReorderableCellsInput'

const ReorderableCell = props => <Cell Icon={<Icon name="drag-handle" />} {...props} />

export default class ReorderableCellsModal extends Component {
	static defaultProps = {
		value: [],
	}

	componentWillMount() {
		this.setState({ value: this.props.value })
	}

	handleSave = () => {
		this.props.onSave(this.state.value)
		this.props.onClose(this.state.value)
		this.props.closeModal()
	}

	handleClose = () => {
		this.props.onClose(this.state.value)
		this.props.closeModal()
	}

	updateList = value => {
		this.setState({ value })
	}

	render() {
		const { title } = this.props
		return (
			<Modal
				{...this.props}
				title={title || 'Reorder Items'}
				size="medium"
				onSave={this.handleSave}
				onClose={this.handleClose}>
				<ReorderableCells {...this.props} value={this.state.value} onChange={this.updateList} Item={ReorderableCell} />
			</Modal>
		)
	}
}