@elastic/eui
Version:
Elastic UI Component Library
159 lines (151 loc) • 8.94 kB
JavaScript
var _excluded = ["size", "maxWidth", "minWidth", "onResize", "side", "type", "ownFocus", "children"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
/*
* 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.
*/
import React, { forwardRef, useState, useEffect, useRef, useMemo, useCallback } from 'react';
import { keys, useCombinedRefs, useEuiMemoizedStyles } from '../../services';
import { EuiResizableButton } from '../resizable_container';
import { getPosition } from '../resizable_container/helpers';
import { EuiFlyout } from './flyout';
import { euiFlyoutResizableButtonStyles } from './flyout_resizable.styles';
import { jsx as ___EmotionJSX } from "@emotion/react";
// If not omitted, the correct props don't show up in the docs prop table
export var EuiFlyoutResizable = /*#__PURE__*/forwardRef(function (_ref, ref) {
var size = _ref.size,
maxWidth = _ref.maxWidth,
_ref$minWidth = _ref.minWidth,
minWidth = _ref$minWidth === void 0 ? 200 : _ref$minWidth,
onResize = _ref.onResize,
_ref$side = _ref.side,
side = _ref$side === void 0 ? 'right' : _ref$side,
_ref$type = _ref.type,
type = _ref$type === void 0 ? 'overlay' : _ref$type,
_ref$ownFocus = _ref.ownFocus,
ownFocus = _ref$ownFocus === void 0 ? true : _ref$ownFocus,
children = _ref.children,
rest = _objectWithoutProperties(_ref, _excluded);
var hasOverlay = type === 'overlay' && ownFocus;
var styles = useEuiMemoizedStyles(euiFlyoutResizableButtonStyles);
var cssStyles = [styles.euiFlyoutResizableButton, styles[type][side], !hasOverlay && styles.noOverlay.noOverlay, !hasOverlay && styles.noOverlay[side]];
var getFlyoutMinMaxWidth = useCallback(function (width) {
return Math.min(Math.max(width, minWidth), maxWidth || Infinity, window.innerWidth - 20 // Leave some offset
);
}, [minWidth, maxWidth]);
var _useState = useState(0),
_useState2 = _slicedToArray(_useState, 2),
flyoutWidth = _useState2[0],
setFlyoutWidth = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
callOnResize = _useState4[0],
setCallOnResize = _useState4[1];
// Must use state for the flyout ref in order for the useEffect to be correctly called after render
var _useState5 = useState(null),
_useState6 = _slicedToArray(_useState5, 2),
flyoutRef = _useState6[0],
setFlyoutRef = _useState6[1];
var setRefs = useCombinedRefs([setFlyoutRef, ref]);
useEffect(function () {
if (!flyoutWidth && flyoutRef) {
setCallOnResize(false); // Don't call `onResize` for non-user width changes
setFlyoutWidth(getFlyoutMinMaxWidth(flyoutRef.offsetWidth));
}
}, [flyoutWidth, flyoutRef, getFlyoutMinMaxWidth]);
// Update flyout width when consumers pass in a new `size`
useEffect(function () {
setCallOnResize(false);
// For string `size`s, resetting flyoutWidth to 0 will trigger the above useEffect's recalculation
setFlyoutWidth(typeof size === 'number' ? getFlyoutMinMaxWidth(size) : 0);
}, [size, getFlyoutMinMaxWidth]);
// Initial numbers to calculate from, on resize drag start
var initialWidth = useRef(0);
var initialMouseX = useRef(0);
// Account for flyout side and logical property direction
var direction = useMemo(function () {
var modifier = side === 'right' ? -1 : 1;
if (flyoutRef) {
var languageDirection = window.getComputedStyle(flyoutRef).direction;
if (languageDirection === 'rtl') modifier *= -1;
}
return modifier;
}, [side, flyoutRef]);
var onMouseMove = useCallback(function (e) {
var mouseOffset = getPosition(e, true) - initialMouseX.current;
var changedFlyoutWidth = initialWidth.current + mouseOffset * direction;
setFlyoutWidth(getFlyoutMinMaxWidth(changedFlyoutWidth));
}, [getFlyoutMinMaxWidth, direction]);
var onMouseUp = useCallback(function () {
setCallOnResize(true);
initialMouseX.current = 0;
window.removeEventListener('mousemove', onMouseMove);
window.removeEventListener('mouseup', onMouseUp);
window.removeEventListener('touchmove', onMouseMove);
window.removeEventListener('touchend', onMouseUp);
}, [onMouseMove]);
var onMouseDown = useCallback(function (e) {
var _flyoutRef$offsetWidt;
setCallOnResize(false);
initialMouseX.current = getPosition(e, true);
initialWidth.current = (_flyoutRef$offsetWidt = flyoutRef === null || flyoutRef === void 0 ? void 0 : flyoutRef.offsetWidth) !== null && _flyoutRef$offsetWidt !== void 0 ? _flyoutRef$offsetWidt : 0;
// Window event listeners instead of React events are used
// in case the user's mouse leaves the component
window.addEventListener('mousemove', onMouseMove);
window.addEventListener('mouseup', onMouseUp);
window.addEventListener('touchmove', onMouseMove);
window.addEventListener('touchend', onMouseUp);
}, [flyoutRef, onMouseMove, onMouseUp]);
var onKeyDown = useCallback(function (e) {
setCallOnResize(true);
var KEYBOARD_OFFSET = 10;
switch (e.key) {
case keys.ARROW_RIGHT:
e.preventDefault(); // Safari+VO will screen reader navigate off the button otherwise
setFlyoutWidth(function (flyoutWidth) {
return getFlyoutMinMaxWidth(flyoutWidth + KEYBOARD_OFFSET * direction);
});
break;
case keys.ARROW_LEFT:
e.preventDefault(); // Safari+VO will screen reader navigate off the button otherwise
setFlyoutWidth(function (flyoutWidth) {
return getFlyoutMinMaxWidth(flyoutWidth - KEYBOARD_OFFSET * direction);
});
}
}, [getFlyoutMinMaxWidth, direction]);
// To reduce unnecessary calls, only fire onResize callback:
// 1. After initial mount / on user width change events only
// 2. If not currently mouse dragging
useEffect(function () {
if (callOnResize) {
onResize === null || onResize === void 0 || onResize(flyoutWidth);
}
}, [onResize, callOnResize, flyoutWidth]);
return ___EmotionJSX(EuiFlyout, _extends({}, rest, {
size: flyoutWidth || size,
maxWidth: maxWidth,
side: side,
type: type,
ownFocus: ownFocus,
ref: setRefs
}), ___EmotionJSX(EuiResizableButton, {
isHorizontal: true,
indicator: "border",
css: cssStyles,
onMouseDown: onMouseDown,
onTouchStart: onMouseDown,
onKeyDown: onKeyDown
}), children);
});
EuiFlyoutResizable.displayName = 'EuiFlyoutResizable';