@bigfishtv/cockpit/src/components/asset/AssetFolderEditModal.js

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

import { pruneTree } from '../../utils/treeUtils'

import Tree from '../tree/Tree'
import Button from '../button/Button'
import Modal from '../modal/Modal'
import InfoTooltip from '../InfoTooltip'
import AssetFolderTreeCell from './AssetFolderTreeCell'

// used in AssetFolderEditModal
const ModalActions = props => {
	const { primaryActionText, folderName, onSave, onClose } = props.modalActionProps
	return (
		<div>
			<Button text={primaryActionText} style="primary" onClick={onSave} disabled={!folderName} />
			<Button text="Cancel" onClick={onClose} />
		</div>
	)
}

/**
 * Modal component for editing existing folder or creating a new one
 */
export default class AssetFolderEditModal extends Component {
	static propTypes = {
		/** Modal title */
		title: PropTypes.string,
		/** Primary button text */
		primaryActionText: PropTypes.string,
		/** If editing, name of folder */
		folderName: PropTypes.string,
		/** Folder id of parent folder, null if top-level */
		parentId: PropTypes.number,
		/** Only applicable if editing */
		folderId: PropTypes.number,
		/** An array of one item, used to know which parent folder to auto-select in the parent folder select tree */
		selectedIds: PropTypes.array,
		/** An array of collapsed folder ids, to mimic in the parent folder select tree */
		collapsedIds: PropTypes.array,
		/** Nested data for all asset folders */
		data: PropTypes.array,
		/** Called on save */
		onSave: PropTypes.func,
		/** Called on close */
		onClose: PropTypes.func,
	}

	static defaultProps = {
		title: 'Add New Folder',
		primaryActionText: 'Add',
		folderName: '',
		parentId: null,
		folderId: null,
		selectedIds: [],
		collapsedIds: [],
		data: [],
		onSave: () => console.warn('[AssetFolderEditModal] no onSave prop provided'),
		onClose: () => console.warn('[AssetFolderEditModal] no onClose prop provided'),
	}

	constructor(props) {
		super()
		const { folderId, parentId, folderName } = props
		const data = pruneTree(pruneTree(props.data, 'locked', [true]), 'id', [null, folderId])
		this.state = { folderName, parentId, data }
	}

	/**
	 * called by ModalActions button
	 */
	handleSave = () => {
		const { folderName, parentId } = this.state
		this.props.onSave({
			folderId: this.props.folderId,
			folderName,
			parentId,
		})
		this.props.closeModal()
	}

	/**
	 * called by ModalActions button or default ModalToolbar close button
	 */
	handleClose = () => {
		this.props.onClose()
		this.props.closeModal()
	}

	/**
	 * called by modal parent folder select tree
	 * @param  {Number[]} selectedIds [description]
	 */
	handleSelectionChange = selectedIds => {
		const parentId = selectedIds.length ? selectedIds[0] : null
		this.setState({ parentId })
	}

	/**
	 * called on input onChange
	 * @param  {InputEvent} event
	 */
	handleFolderNameChange = event => {
		this.setState({ folderName: event.target.value })
	}

	render() {
		const { title, primaryActionText, selectedIds, collapsedIds } = this.props
		const { data, folderName } = this.state
		const modalActionProps = {
			folderName,
			primaryActionText,
			onSave: this.handleSave,
			onClose: this.handleClose,
		}
		return (
			<Modal
				title={title}
				size="medium"
				onClose={this.handleClose}
				onSave={this.handleSave}
				ModalActions={ModalActions}
				modalActionProps={modalActionProps}>
				<div className="form-input">
					<label>Folder Name</label>
					<input value={this.state.folderName} onChange={this.handleFolderNameChange} autoFocus />
				</div>

				<div className="form-input">
					<label>
						Select Parent Folder
						<InfoTooltip text="To make folder top-level, don't make a selection." />
					</label>
					<Tree
						uncontrolled={true}
						value={data}
						TreeCell={AssetFolderTreeCell}
						multiselect={false}
						reorderable={false}
						stickySelect={false}
						selectedIds={selectedIds}
						collapsedIds={collapsedIds}
						onSelectionChange={this.handleSelectionChange}
					/>
				</div>
			</Modal>
		)
	}
}