@bigfishtv/cockpit/src/components/preview/PreviewWindow.js

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

import { deviceWidthChanged, previewDateChanged } from '../../actions/preview'
import PreviewFrame from './PreviewFrame'
import PreviewToolbar from './PreviewToolbar'

@connect(({ preview }) => ({ preview }))
export default class PreviewWindow extends Component {
	static propTypes = {
		onTitleChange: PropTypes.func,
	}

	handleDeviceWidthChange = deviceWidth => {
		this.props.dispatch(deviceWidthChanged(deviceWidth))
	}

	handleDateChange = date => {
		this.props.dispatch(previewDateChanged(date))
	}

	render() {
		return (
			<div className="preview-window">
				<PreviewToolbar
					date={this.props.preview.date}
					deviceWidth={this.props.preview.deviceWidth}
					onDateChange={this.handleDateChange}
					onDeviceWidthChange={this.handleDeviceWidthChange}
				/>
				<PreviewFrame {...this.props.preview} onTitleChange={this.props.onTitleChange} />
			</div>
		)
	}
}