react-messagebox/src/index.jsx

React MessageBox

'use strict';

var React   = require('react')
var Window  = require('react-window/src')
var Button  = require('react-button/src')
var Toolbar = require('react-toolbar/src')
var assign  = require('object-assign')
var normalize = require('react-style-normalizer')
var cloneWithProps = require('react-clonewithprops')

var ToolbarFactory = React.createFactory(Toolbar)

function toUpperFirst(str){
	return str.charAt(0).toUpperCase() + str.substr(1)
}

var MessageBox = React.createClass({

	displayName: 'ReactMessageBox',

	getDefaultProps: function(){
		return {
			renderOnVisible: false,
			centered : true,
			resizable: true,
			constrainTo: true,
			toolbarPosition: 'bottom',
			toolbarBorderColor: 'gray',

			defaultToolbarStyle: {
			},
			toolbarPadding: 5
		}
	},

	render: function(){

		var props = this.prepareProps(this.props)

		return <Window {...props}>
			{props.children}
		</Window>

	},

	prepareProps: function(thisProps) {

		var props = assign({}, thisProps)

		props.toolbarStyle = this.prepareToolbarStyle(props)
		props.toolbar = this.prepareToolbar(props)
		props.bodyFactory = this.bodyFactory.bind(this, props)

		return props
	},

	prepareToolbar: function(props) {

		var toolbar
		var children = React.Children.map(props.children, function(child){
			if (child && child.props && child.props.isReactToolbar){
				toolbar = child
				return false
			}

			return child
		})

		props.children = children

		if (toolbar){
			var style = assign({}, props.toolbarStyle, toolbar.props.style)
			toolbar = cloneWithProps(toolbar, { style: style })
		}

		return toolbar
	},

	prepareToolbarStyle: function(props) {

		var toolbarBorder = props.toolbarBorder
		var toolbarBorderColor  = props.toolbarBorderColor || 'gray'
		var toolbarBorderWidth  = parseInt(props.toolbarBorderWidth || 1) + 'px'

		if (!toolbarBorder){
			toolbarBorder = {}
			toolbarBorder[props.toolbarPosition == 'top'? 'bottom': 'top'] = toolbarBorderWidth + ' solid ' + toolbarBorderColor
		}

		var defaultStyle = {
			margin : props.toolbarMargin,
			padding: props.toolbarPadding,
			border : toolbarBorder
		}

		if (defaultStyle.border && typeof defaultStyle.border == 'object'){
			var border = defaultStyle.border
			delete defaultStyle.border
			Object.keys(border).forEach(function(key){
				var name = 'border' + toUpperFirst(key)
				defaultStyle[name] = border[key]
			})
		}

		var style = assign({}, props.defaultToolbarStyle, defaultStyle, props.toolbarStyle)

		return normalize(style)
	},

	bodyFactory: function(props, bodyProps) {
		var style = normalize({
			flex    : 1,
			display : 'flex',
			flexFlow: 'column'
		})

		var bodyFactory = this.props.bodyFactory || React.DOM.div
		var body = bodyFactory(bodyProps)
		var toolbar = props.toolbar

		var children = props.toolbarPosition == 'top'?
						[toolbar, body]:
						[body, toolbar]

		return <div style={style} children={children} />
	}
})

MessageBox.Toolbar = Toolbar
MessageBox.Button  = Button

module.exports = MessageBox