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

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;

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; }

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import classnames from 'classnames';

import PanelToolbar from './PanelToolbar';
import Icon from '../../Icon';

// we define this because react-docgen fails when defaultProp directly references an imported component
var DefaultPanelToolbar = function DefaultPanelToolbar(props) {
	return React.createElement(PanelToolbar, 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 React.createElement(
			'div',
			{ className: classnames(panelClassName, marginClassName) },
			(this.props.collapsible || this.props.title || PanelToolbar != DefaultPanelToolbar) && React.createElement(
				'header',
				{ className: 'panel-header' },
				icon && React.createElement(Icon, { name: icon, className: 'icon', size: 18 }),
				this.props.title && React.createElement(
					'h3',
					{ className: classnames('panel-title', { truncate: _typeof(this.props.title) !== 'object' }) },
					this.props.title
				),
				PanelToolbar && React.createElement(PanelToolbar, _extends({}, props, { collapsed: collapsed, onToggleCollapsed: function onToggleCollapsed() {
						return _this2.toggleCollapsed();
					} }))
			),
			React.createElement(
				'div',
				{ className: classnames('panel-content', { hide: collapsed }) },
				children
			),
			PanelActions && React.createElement(
				'footer',
				{ className: classnames('panel-footer', { hide: collapsed }) },
				React.createElement(PanelActions, props)
			),
			!collapsed && PanelDrawer && React.createElement(PanelDrawer, props)
		);
	};

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