'use strict';

Object.defineProperty(exports, "__esModule", {
	value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactCssTransition = require('react-css-transition');

var _Drawer = require('../Drawer');

var _Drawer2 = _interopRequireDefault(_Drawer);

var _withDrawer = require('./withDrawer.scss');

var _withDrawer2 = _interopRequireDefault(_withDrawer);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/**
 * The Layout component is a container
 * that should follow the body of your App.
 * If the Layout is not after the body you have to
 * add some CSS
 * @example
body > div {
	max-height: 100vh;
	overflow: hidden;
	display: flex;
	width: 100vw;
}
 * @param {object} props react props
 * @example
 <Layout mode="TwoColumns" one={one} two={two}></Layout>
 */
function WithDrawer(_ref) {
	var drawers = _ref.drawers,
	    children = _ref.children;

	return _react2.default.createElement(
		'div',
		{ className: _withDrawer2.default['tc-with-drawer'] },
		children,
		_react2.default.createElement(
			_reactCssTransition.CSSTransitionGroup,
			{ transitionAppear: true, className: _withDrawer2.default['tc-with-drawer-container'] },
			drawers && drawers.map(function (drawer, key) {
				return _react2.default.createElement(
					_Drawer2.default.Animation,
					{
						key: drawer.props.route && drawer.props.route.path || key,
						className: 'tc-with-drawer-wrapper'
					},
					drawer
				);
			})
		)
	);
}

WithDrawer.propTypes = {
	drawers: _react.PropTypes.arrayOf(_react.PropTypes.element),
	children: _react.PropTypes.node
};

exports.default = WithDrawer;