@bigfishtv/cockpit/src/components/prompt/PromptInputModal.js

import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { Input } from '@bigfishtv/react-forms'

import Modal from '../modal/Modal'
import ConfirmCancel from './ConfirmCancel'

// we define this because react-docgen fails when defaultProp directly references an imported component
const DefaultButtons = props => <ConfirmCancel {...props} />

export default class PromptInputModal extends Component {
	static propTypes = {
		/** What input component to use, defaults to */
		InputModel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
		/** What component to use for tray buttons, default being ConfirmCancel */
		Buttons: PropTypes.func,
		/** Title string or react node */
		title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
		/** Message string or react node */
		message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
		/** Default value for input component -- node */
		defaultValue: PropTypes.node,
		/** Callback function, will return input value or false if prompt is cancelled */
		callback: PropTypes.func,
	}

	static defaultProps = {
		InputModel: Input,
		Buttons: DefaultButtons,
		title: 'Input required',
		style: 'primary',
		message: null,
		defaultValue: null,
		callback: () => console.warn('[PromptInputModal] no callback prop'),
	}

	constructor(props) {
		super(props)
		this.state = { value: props.defaultValue }
	}

	handleCallback = result => {
		if (result) result = this.state.value
		this.props.callback(result)
		this.props.closeModal()
	}

	handleChange = newValue => {
		const value = typeof newValue !== 'string' && newValue['target'] ? newValue.target.value : newValue
		this.setState({ value })
	}

	handleSubmit = event => {
		event.preventDefault()
		this.handleCallback(true)
		return false
	}

	render() {
		const { title, message, style, Buttons, InputModel } = this.props
		return (
			<Modal
				{...this.props}
				size="xsmall"
				title={title}
				callback={this.handleCallback}
				style={style}
				onClose={() => this.props.closeModal()}
				ModalActions={Buttons}>
				{message}

				<form onSubmit={this.handleSubmit}>
					<InputModel onChange={this.handleChange} value={this.state.value} />
				</form>
			</Modal>
		)
	}
}