@elastic/eui
Version:
Elastic UI Component Library
123 lines (122 loc) • 6.7 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports._EuiSplitPanelOuter = exports._EuiSplitPanelInner = exports.EuiSplitPanel = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _breakpoint = require("../../../services/breakpoint");
var _services = require("../../../services");
var _panel = require("../panel");
var _split_panel = require("./split_panel.styles");
var _react2 = require("@emotion/react");
var _excluded = ["children", "className"],
_excluded2 = ["children", "className", "direction", "responsive"];
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/**
* Consumed via `EuiSplitPanel.Inner`.
* Extends most `EuiPanelProps`.
*/
var _EuiSplitPanelInner = exports._EuiSplitPanelInner = function _EuiSplitPanelInner(_ref) {
var children = _ref.children,
className = _ref.className,
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
var borderDirection = (0, _react.useContext)(SplitPanelInnerBorderDirection);
var classes = (0, _classnames.default)('euiSplitPanel__inner', className);
var styles = (0, _services.useEuiMemoizedStyles)(_split_panel.euiSplitPanelInnerStyles);
var cssStyles = [styles.euiSplitPanelInner, borderDirection && styles.highContrastBorders[borderDirection]];
var panelProps = {
hasShadow: false,
color: 'transparent',
borderRadius: 'none',
hasBorder: false
};
return (0, _react2.jsx)(_panel.EuiPanel, (0, _extends2.default)({
element: "div",
className: classes,
css: cssStyles
}, panelProps, rest), children);
};
_EuiSplitPanelInner.propTypes = {
/**
* Padding for all four sides
*/
paddingSize: _propTypes.default.any,
/**
* When true the panel will grow in height to match `EuiFlexItem`
*/
grow: _propTypes.default.bool,
panelRef: _propTypes.default.any,
/**
* Background color of the panel;
* Usually a lightened form of the brand colors
*/
color: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf(["highlighted"])]),
className: _propTypes.default.string,
"aria-label": _propTypes.default.string,
"data-test-subj": _propTypes.default.string,
css: _propTypes.default.any
};
/**
* Consumed via `EuiSplitPanel.Outer`.
* Extends most `EuiPanelProps`.
*/
var _EuiSplitPanelOuter = exports._EuiSplitPanelOuter = function _EuiSplitPanelOuter(_ref2) {
var children = _ref2.children,
className = _ref2.className,
_ref2$direction = _ref2.direction,
direction = _ref2$direction === void 0 ? 'column' : _ref2$direction,
_ref2$responsive = _ref2.responsive,
responsive = _ref2$responsive === void 0 ? ['xs', 's'] : _ref2$responsive,
rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
var isResponsive = (0, _breakpoint.useIsWithinBreakpoints)(responsive, !!responsive);
var responsiveDirection = direction === 'row' && !isResponsive ? 'row' : 'column';
var innerBorderDirection = (0, _panel._canRenderHighContrastBorder)(_objectSpread({}, rest)) ? responsiveDirection : undefined;
var styles = _split_panel.euiSplitPanelOuterStyles;
var cssStyles = [styles.euiSplitPanelOuter, styles[responsiveDirection]];
var classes = (0, _classnames.default)('euiSplitPanel', className);
return (0, _react2.jsx)(_panel.EuiPanel, (0, _extends2.default)({
paddingSize: "none",
grow: false,
className: classes,
css: cssStyles
}, rest), (0, _react2.jsx)(SplitPanelInnerBorderDirection.Provider, {
value: innerBorderDirection
}, children));
};
_EuiSplitPanelOuter.propTypes = {
/**
* Any number of _EuiSplitPanelInner components
*/
children: _propTypes.default.node,
/**
* Changes the flex-direction
*/
direction: _propTypes.default.oneOf(["column", "row"]),
/**
* Stacks row display on small screens.
* Remove completely with `false` or provide your own list of breakpoint sizes to stack on.
*/
responsive: _propTypes.default.oneOfType([_propTypes.default.oneOf([false]), _propTypes.default.arrayOf(_propTypes.default.any.isRequired).isRequired])
};
var SplitPanelInnerBorderDirection = /*#__PURE__*/(0, _react.createContext)(undefined);
var EuiSplitPanel = exports.EuiSplitPanel = {
Outer: _EuiSplitPanelOuter,
Inner: _EuiSplitPanelInner
};