@bigfishtv/cockpit/es5/components/container/panel/Panel.js

'use strict';

exports.__esModule = true;
exports.default = undefined;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

var _class, _temp;

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _PanelToolbar = require('./PanelToolbar');

var _PanelToolbar2 = _interopRequireDefault(_PanelToolbar);

var _Icon = require('../../Icon');

var _Icon2 = _interopRequireDefault(_Icon);

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

// we define this because react-docgen fails when defaultProp directly references an imported component
var DefaultPanelToolbar = function DefaultPanelToolbar(props) {
	return _react2.default.createElement(_PanelToolbar2.default, props);
};

/**
 * Wraps children in a panel with PanelToolbar and PanelActions,
 * can be controlled or uncontrolled in terms of collapsibility etc.
 */
var Panel = (_temp = _class = function (_Component) {
	_inherits(Panel, _Component);

	function Panel(props) {
		_classCallCheck(this, Panel);

		var _this = _possibleConstructorReturn(this, _Component.call(this));

		_this.state = { collapsed: props.collapsed };
		return _this;
	}

	Panel.prototype.isCollapsed = function isCollapsed() {
		return this.props.uncontrolled ? this.state.collapsed : this.props.collapsed;
	};

	Panel.prototype.toggleCollapsed = function toggleCollapsed() {
		var collapsed = this.isCollapsed();
		if (this.props.uncontrolled) {
			this.setState({ collapsed: !collapsed });
		}
		this.props.onToggleCollapsed(!collapsed);
	};

	Panel.prototype.render = function render() {
		var _this2 = this;

		var collapsed = this.isCollapsed();

		var _props = this.props,
		    PanelToolbar = _props.PanelToolbar,
		    PanelActions = _props.PanelActions,
		    PanelDrawer = _props.PanelDrawer,
		    icon = _props.icon,
		    children = _props.children,
		    panelClassName = _props.panelClassName,
		    margin = _props.margin,
		    props = _objectWithoutProperties(_props, ['PanelToolbar', 'PanelActions', 'PanelDrawer', 'icon', 'children', 'panelClassName', 'margin']);

		var marginClassName = margin === true ? 'margin-medium' : margin ? 'margin-' + margin : '';
		return _react2.default.createElement(
			'div',
			{ className: (0, _classnames2.default)(panelClassName, marginClassName) },
			(this.props.collapsible || this.props.title || PanelToolbar != DefaultPanelToolbar) && _react2.default.createElement(
				'header',
				{ className: 'panel-header' },
				icon && _react2.default.createElement(_Icon2.default, { name: icon, className: 'icon', size: 18 }),
				this.props.title && _react2.default.createElement(
					'h3',
					{ className: (0, _classnames2.default)('panel-title', { truncate: _typeof(this.props.title) !== 'object' }) },
					this.props.title
				),
				PanelToolbar && _react2.default.createElement(PanelToolbar, _extends({}, props, { collapsed: collapsed, onToggleCollapsed: function onToggleCollapsed() {
						return _this2.toggleCollapsed();
					} }))
			),
			_react2.default.createElement(
				'div',
				{ className: (0, _classnames2.default)('panel-content', { hide: collapsed }) },
				children
			),
			PanelActions && _react2.default.createElement(
				'footer',
				{ className: (0, _classnames2.default)('panel-footer', { hide: collapsed }) },
				_react2.default.createElement(PanelActions, props)
			),
			!collapsed && PanelDrawer && _react2.default.createElement(PanelDrawer, props)
		);
	};

	return Panel;
}(_react.Component), _class.propTypes = {
	/** String or react node */
	title: _propTypes2.default.node,
	collapsible: _propTypes2.default.bool,
	removable: _propTypes2.default.bool,
	collapsed: _propTypes2.default.bool,
	/** Callback function for when panel is collapsed / uncollapsed */
	onToggleCollapsed: _propTypes2.default.func,
	onRemove: _propTypes2.default.func,
	panelClassName: _propTypes2.default.string,
	/** Whether or not pannel is allowed to control its own collapse state */
	uncontrolled: _propTypes2.default.bool,
	/** React component for panel toolbar */
	PanelToolbar: _propTypes2.default.func,
	/** React component for panel actions */
	PanelActions: _propTypes2.default.func,
	/** React component for panel drawer */
	PanelDrawer: _propTypes2.default.func,
	/** Panel margin, true for default margin-medium otherwise 'xsmall', 'small' etc. */
	margin: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.bool]),
	icon: _propTypes2.default.string
}, _class.defaultProps = {
	collapsible: false,
	removable: false,
	collapsed: false,
	onToggleCollapsed: function onToggleCollapsed() {},
	onRemove: function onRemove() {},
	panelClassName: 'panel',
	uncontrolled: false,
	PanelToolbar: DefaultPanelToolbar
}, _temp);
exports.default = Panel;