@elastic/eui
Version:
Elastic UI Component Library
335 lines (334 loc) • 16.7 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof3 = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.EuiResizablePanel = void 0;
exports.euiResizablePanelWithControls = euiResizablePanelWithControls;
exports.getToggleOptions = exports.getModeType = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _services = require("../../services");
var _global_styling = require("../../global_styling");
var _context = require("./context");
var _panel = require("../panel");
var _i18n = require("../i18n");
var _resizable_collapse_button = require("./resizable_collapse_button");
var _resizable_panel = require("./resizable_panel.styles");
var _react2 = require("@emotion/react");
var _excluded = ["children", "className", "css", "id", "isHorizontal", "size", "initialSize", "minSize", "scrollable", "mode", "registration", "onToggleCollapsed", "onToggleCollapsedInternal", "wrapperProps", "hasShadow", "borderRadius", "color", "paddingSize", "wrapperPadding"];
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" != _typeof3(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; } /*
* 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.
*/
var defaultToggleOptions = {
className: null,
'data-test-subj': undefined,
position: 'middle'
};
var getModeType = exports.getModeType = function getModeType(mode) {
return (0, _typeof2.default)(mode) === 'object' ? mode[0] : mode;
};
var getToggleOptions = exports.getToggleOptions = function getToggleOptions(mode) {
return (0, _typeof2.default)(mode) === 'object' ? _objectSpread(_objectSpread({}, defaultToggleOptions), mode[1]) : defaultToggleOptions;
};
var getPosition = function getPosition(ref) {
var position = 'middle';
if (ref.matches(':first-of-type')) {
position = 'first';
} else if (ref.matches(':last-of-type')) {
position = 'last';
}
return position;
};
var EuiResizablePanel = exports.EuiResizablePanel = function EuiResizablePanel(_ref) {
var children = _ref.children,
className = _ref.className,
css = _ref.css,
id = _ref.id,
isHorizontal = _ref.isHorizontal,
size = _ref.size,
initialSize = _ref.initialSize,
_ref$minSize = _ref.minSize,
minSize = _ref$minSize === void 0 ? '0px' : _ref$minSize,
_ref$scrollable = _ref.scrollable,
scrollable = _ref$scrollable === void 0 ? true : _ref$scrollable,
mode = _ref.mode,
registration = _ref.registration,
onToggleCollapsed = _ref.onToggleCollapsed,
onToggleCollapsedInternal = _ref.onToggleCollapsedInternal,
wrapperProps = _ref.wrapperProps,
_ref$hasShadow = _ref.hasShadow,
hasShadow = _ref$hasShadow === void 0 ? false : _ref$hasShadow,
_ref$borderRadius = _ref.borderRadius,
borderRadius = _ref$borderRadius === void 0 ? 'none' : _ref$borderRadius,
_ref$color = _ref.color,
color = _ref$color === void 0 ? 'transparent' : _ref$color,
_ref$paddingSize = _ref.paddingSize,
paddingSize = _ref$paddingSize === void 0 ? 'm' : _ref$paddingSize,
_ref$wrapperPadding = _ref.wrapperPadding,
wrapperPadding = _ref$wrapperPadding === void 0 ? 'none' : _ref$wrapperPadding,
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
var _useEuiResizableConta = (0, _context.useEuiResizableContainerContext)(),
_useEuiResizableConta2 = _useEuiResizableConta.registry,
_useEuiResizableConta3 = _useEuiResizableConta2 === void 0 ? {
panels: {},
resizers: {}
} : _useEuiResizableConta2,
panels = _useEuiResizableConta3.panels,
resizers = _useEuiResizableConta3.resizers;
var divRef = (0, _react.useRef)(null);
var panelId = (0, _services.useGeneratedHtmlId)({
prefix: 'resizable-panel',
conditionalId: id
});
var resizerIds = (0, _react.useRef)([]);
var modeType = (0, _react.useMemo)(function () {
return getModeType(mode);
}, [mode]);
var toggleOpts = (0, _react.useMemo)(function () {
return getToggleOptions(mode);
}, [mode]);
var innerSize = (0, _react.useMemo)(function () {
var _ref2;
return (_ref2 = panels[panelId] && panels[panelId].size) !== null && _ref2 !== void 0 ? _ref2 : initialSize || 0;
}, [panels, panelId, initialSize]);
var isCollapsed = (0, _react.useMemo)(function () {
return panels[panelId] && panels[panelId].isCollapsed || false;
}, [panels, panelId]);
var position = (0, _react.useMemo)(function () {
return panels[panelId] && panels[panelId].position || 'middle';
}, [panels, panelId]);
var isCollapsible = (0, _react.useMemo)(function () {
return modeType === 'collapsible';
}, [modeType]);
var direction = (0, _react.useMemo)(function () {
var direction = null;
if (position === 'middle' && (isCollapsible || isCollapsed)) {
var ids = Object.keys(panels);
var index = ids.indexOf(panelId);
var prevPanel = panels[ids[index - 1]];
var nextPanel = panels[ids[index + 1]];
var prevPanelMode = prevPanel ? getModeType(prevPanel.mode) : null;
var nextPanelMode = nextPanel ? getModeType(nextPanel.mode) : null;
// Intentional, preferential order
if (prevPanelMode === 'main') {
direction = 'right';
} else if (nextPanelMode === 'main') {
direction = 'left';
} else if (prevPanelMode && prevPanelMode !== 'collapsible') {
direction = 'right';
} else if (nextPanelMode && nextPanelMode !== 'collapsible') {
direction = 'left';
} else if (prevPanel && nextPanel) {
direction = prevPanel.size > nextPanel.size ? 'right' : 'left';
} else if (prevPanel) {
direction = 'right';
} else if (nextPanel) {
direction = 'left';
}
}
return direction;
}, [isCollapsed, isCollapsible, position, panels, panelId]);
var axis = isHorizontal ? 'horizontal' : 'vertical';
var cssStyles = [_resizable_panel.euiResizablePanelStyles.euiResizablePanel, isCollapsed && _resizable_panel.euiResizablePanelStyles.collapsed, (0, _global_styling.useEuiPaddingCSS)()[wrapperPadding], wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.css];
var contentStyles = (0, _services.useEuiMemoizedStyles)(_resizable_panel.euiResizablePanelContentStyles);
var contentCssStyles = [contentStyles.euiResizablePanel__content, scrollable && contentStyles.scrollable, isCollapsed && contentStyles.collapsedChildren, isCollapsed && !isCollapsible && contentStyles[axis].collapsed, isCollapsible && contentStyles[axis].hasCollapsibleButton];
var classes = (0, _classnames.default)('euiResizablePanel', wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.className);
var panelClasses = (0, _classnames.default)('euiResizablePanel__content', className);
var inlineStyles = _objectSpread(_objectSpread({}, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.style), isHorizontal ? (0, _global_styling.logicalSizeStyle)("".concat(size || innerSize, "%"), 'auto') : (0, _global_styling.logicalSizeStyle)('100%', "".concat(size || innerSize, "%")));
var padding = (0, _global_styling.useEuiPaddingSize)(paddingSize) || '0px';
(0, _react.useEffect)(function () {
if (!registration) return;
var initSize = size !== null && size !== void 0 ? size : initialSize || 0;
resizerIds.current = [divRef.current.previousElementSibling ? divRef.current.previousElementSibling.id : '', divRef.current.nextElementSibling ? divRef.current.nextElementSibling.id : ''];
registration.register({
id: panelId,
size: initSize,
prevSize: initSize,
getSizePx: function getSizePx() {
return isHorizontal ? divRef.current.getBoundingClientRect().width : divRef.current.getBoundingClientRect().height;
},
minSize: [minSize, padding],
mode: modeType,
isCollapsed: false,
position: getPosition(divRef.current)
});
return function () {
registration.deregister(panelId);
};
}, [initialSize, isHorizontal, minSize, size, registration, modeType, padding, panelId]);
var onClickCollapse = function onClickCollapse(options) {
onToggleCollapsedInternal && onToggleCollapsedInternal(panelId, options);
onToggleCollapsed && onToggleCollapsed(panelId, options);
};
var collapseRight = function collapseRight(e) {
onClickCollapse({
direction: 'right'
});
if (e.detail) e.currentTarget.blur();
};
var collapseLeft = function collapseLeft(e) {
onClickCollapse({
direction: 'left'
});
if (e.detail) e.currentTarget.blur();
};
var toggleButtonAriaLabel = (0, _i18n.useEuiI18n)('euiResizablePanel.toggleButtonAriaLabel', 'Press to toggle this panel');
var hasLeftToggle = (isCollapsible || isCollapsed) && (position === 'last' || position === 'middle' && direction === 'right');
var hasRightToggle = (isCollapsible || isCollapsed) && (position === 'first' || position === 'middle' && direction === 'left');
var hasVisibleToggle = modeType === 'custom' && isCollapsed || isCollapsible;
var theToggle;
var theResizer;
if ((isCollapsible || modeType === 'custom') && hasLeftToggle) {
theResizer = resizers[resizerIds.current[0]];
theToggle = (0, _react2.jsx)(_resizable_collapse_button.EuiResizableCollapseButton, {
externalPosition: "before",
direction: axis,
isVisible: theResizer && (theResizer.isFocused || theResizer.isDisabled),
isCollapsed: theResizer && theResizer.isDisabled,
internalPosition: toggleOpts.position,
"data-test-subj": toggleOpts['data-test-subj'],
"aria-label": toggleButtonAriaLabel,
onClick: collapseRight
});
} else if ((isCollapsible || modeType === 'custom') && hasRightToggle) {
theResizer = resizers[resizerIds.current[1]];
theToggle = (0, _react2.jsx)(_resizable_collapse_button.EuiResizableCollapseButton, {
externalPosition: "after",
direction: axis,
isVisible: theResizer && (theResizer.isFocused || theResizer.isDisabled),
isCollapsed: theResizer && theResizer.isDisabled,
internalPosition: toggleOpts.position,
"data-test-subj": toggleOpts['data-test-subj'],
"aria-label": toggleButtonAriaLabel,
onClick: collapseLeft
});
}
return (0, _react2.jsx)("div", (0, _extends2.default)({}, wrapperProps, {
css: cssStyles,
id: panelId,
ref: divRef,
style: inlineStyles,
className: classes,
"data-collapsed": isCollapsed || undefined,
"data-position": position
}), hasVisibleToggle && hasLeftToggle && theToggle, (0, _react2.jsx)(_panel.EuiPanel, (0, _extends2.default)({
css: contentCssStyles,
className: panelClasses,
hasShadow: hasShadow,
borderRadius: borderRadius,
color: color,
paddingSize: isCollapsed ? 'none' : paddingSize
}, rest), children), hasVisibleToggle && hasRightToggle && theToggle);
};
EuiResizablePanel.propTypes = {
/**
* Specify a desired minimum panel size in pixels or percents,
* for example "300px" or "30%"
* The actual minimum size will be calculated,
* using the larger of this prop and the panelProps.paddingSize
*/
minSize: _propTypes.default.string,
/**
* Specify id of panel if you want to track panel size in "onPanelWidthChange" callback
*/
id: _propTypes.default.string,
/**
* Initial size of the panel in percents
* Specify this prop if you don't need to handle the panel size from outside
*/
initialSize: _propTypes.default.number,
/**
* Size of the panel in percents.
* Specify this prop if you want to control the size from outside, the panel will ignore the "initialSize"
*/
size: _propTypes.default.number,
/**
* Add Eui scroll and overflow for the panel
*/
scrollable: _propTypes.default.bool,
/*
* For use with collapsible panels.
* Specify either `'collapsible'`, `'main'`, or `'custom'`.
* `'collapsible'` also accepts an array where
* the second item is attributes for the toggle button:
* `['collapsible', {'data-test-subj'?: string, className?: string;}]
*/
mode: _propTypes.default.oneOfType([_propTypes.default.oneOf(["collapsible", "main", "custom"]).isRequired, _propTypes.default.any.isRequired]),
/**
* ReactNode to render as this component's content
*/
children: _propTypes.default.node.isRequired,
/**
* Custom CSS properties applied to the wrapping `.euiResizablePanel` div
*/
style: _propTypes.default.any,
/**
* tabIndex={0} provides full keyboard access when content overflows `<EuiResizablePanel />`
*/
tabIndex: _propTypes.default.number,
/**
* Props to add to the wrapping `.euiResizablePanel` div
*/
wrapperProps: _propTypes.default.shape({
className: _propTypes.default.string,
"aria-label": _propTypes.default.string,
"data-test-subj": _propTypes.default.string,
css: _propTypes.default.any
}),
/**
* Padding to add directly to the wrapping `.euiResizablePanel` div
* Gives space around the actual panel.
*/
wrapperPadding: _propTypes.default.any,
/**
* Adds a medium shadow to the panel;
* Only works when `color="plain"`
*/
hasShadow: _propTypes.default.bool,
/**
* Adds a slight 1px border on all edges.
* Only works when `color="plain | transparent"`
*/
hasBorder: _propTypes.default.bool,
/**
* Padding for all four sides
*/
paddingSize: _propTypes.default.any,
/**
* Corner border radius
*/
borderRadius: _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.any,
className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]),
"aria-label": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]),
"data-test-subj": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]),
css: _propTypes.default.oneOfType([_propTypes.default.any, _propTypes.default.any])
};
function euiResizablePanelWithControls(controls) {
return function (props) {
return (0, _react2.jsx)(EuiResizablePanel, (0, _extends2.default)({}, controls, props));
};
}