@elastic/eui
Version:
Elastic UI Component Library
203 lines (192 loc) • 10.3 kB
JavaScript
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; }
/*
* 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 { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { keys } from '../../services';
import { getPosition } from '../resizable_container/helpers';
/**
* @internal
*/
export var useEuiFlyoutResizable = function useEuiFlyoutResizable(_ref) {
var enabled = _ref.enabled,
_ref$minWidth = _ref.minWidth,
minWidth = _ref$minWidth === void 0 ? 0 : _ref$minWidth,
maxWidth = _ref.maxWidth,
siblingFlyoutWidth = _ref.siblingFlyoutWidth,
referenceWidth = _ref.referenceWidth,
onResize = _ref.onResize,
side = _ref.side,
_size = _ref.size;
// Use container width when provided. When referenceWidth is 0 (e.g. container
// not yet measured by ResizeObserver), do not fall back to viewport — that
// would allow resizing beyond the container (e.g. over a sidebar). Use 0 so
// the clamp keeps the flyout at minWidth until the real width is available.
var _referenceWidth = referenceWidth !== undefined ? referenceWidth : typeof window !== 'undefined' ? window.innerWidth : Infinity;
var getFlyoutMinMaxWidth = useCallback(function (width) {
var maxResizeWidth = siblingFlyoutWidth ? _referenceWidth * 0.9 - siblingFlyoutWidth : _referenceWidth * 0.9;
// Clamp between minWidth and the maximum allowed width.
// minWidth always takes precedence — if the available space
// (maxResizeWidth) is smaller than minWidth, the flyout stays
// at minWidth. The fill sibling's CSS will adjust accordingly.
var upperBound = Math.min(maxWidth || Infinity, maxResizeWidth);
return Math.max(minWidth, Math.min(width, upperBound));
}, [minWidth, maxWidth, siblingFlyoutWidth, _referenceWidth]);
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];
useEffect(function () {
if (!enabled) return; // Don't measure when resizing is disabled
if (!flyoutWidth && flyoutRef) {
setCallOnResize(false); // Don't call `onResize` for non-user width changes
setFlyoutWidth(getFlyoutMinMaxWidth(flyoutRef.offsetWidth));
}
}, [flyoutWidth, flyoutRef, getFlyoutMinMaxWidth, enabled]);
// Track the previous `_size` prop to distinguish between a consumer size
// change (which should reset the width) and a reference-width / constraint
// change (which should re-clamp the existing width).
// Initialized to `null` so the first render always takes the "reset" path.
var prevSizeRef = useRef(null);
// Track the previous reference width so we can scale proportionally when
// the container / viewport resizes (both shrink AND grow).
var prevReferenceWidthRef = useRef(_referenceWidth);
// Update flyout width when consumers pass in a new `size`, or scale
// proportionally and re-clamp when constraints change (e.g. container
// resize, sibling width change).
useEffect(function () {
if (!enabled) return; // Don't update width when resizing is disabled
if (prevSizeRef.current !== _size) {
// The consumer's `size` prop actually changed — reset so the new size takes effect
prevSizeRef.current = _size;
prevReferenceWidthRef.current = _referenceWidth;
setCallOnResize(false);
setFlyoutWidth(typeof _size === 'number' ? getFlyoutMinMaxWidth(_size) : 0);
} else {
var _prevReferenceWidthRe;
// Only constraints changed (referenceWidth, sibling width, etc.) —
// scale the pixel width proportionally to the reference width change
// and then clamp. This preserves the flyout's percentage position in
// both directions (viewport shrink AND grow).
var prevRefWidth = (_prevReferenceWidthRe = prevReferenceWidthRef.current) !== null && _prevReferenceWidthRe !== void 0 ? _prevReferenceWidthRe : _referenceWidth;
prevReferenceWidthRef.current = _referenceWidth;
setFlyoutWidth(function (currentWidth) {
if (currentWidth && prevRefWidth > 0 && _referenceWidth > 0) {
var scaleFactor = _referenceWidth / prevRefWidth;
return getFlyoutMinMaxWidth(currentWidth * scaleFactor);
}
// When reference width was 0 (e.g. container not yet measured), now
// that we have a real width, reset from the size prop instead of scaling.
if (_referenceWidth > 0) {
return typeof _size === 'number' ? getFlyoutMinMaxWidth(_size) : 0;
}
return currentWidth;
});
}
}, [_size, getFlyoutMinMaxWidth, enabled, _referenceWidth]);
// 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) {
if (!enabled) {
return;
}
var mouseOffset = getPosition(e, true) - initialMouseX.current;
var changedFlyoutWidth = initialWidth.current + mouseOffset * direction;
setFlyoutWidth(getFlyoutMinMaxWidth(changedFlyoutWidth));
}, [getFlyoutMinMaxWidth, direction, enabled]);
var onMouseUp = useCallback(function () {
setCallOnResize(true);
if (!enabled) {
return;
}
initialMouseX.current = 0;
window.removeEventListener('mousemove', onMouseMove);
window.removeEventListener('mouseup', onMouseUp);
window.removeEventListener('touchmove', onMouseMove);
window.removeEventListener('touchend', onMouseUp);
}, [onMouseMove, enabled]);
var onMouseDown = useCallback(function (e) {
var _flyoutRef$offsetWidt;
setCallOnResize(false);
if (!enabled) {
return;
}
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, enabled]);
var onKeyDown = useCallback(function (e) {
setCallOnResize(true);
if (!enabled) {
return;
}
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, enabled]);
// 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 && enabled) {
onResize === null || onResize === void 0 || onResize(flyoutWidth);
}
}, [onResize, callOnResize, flyoutWidth, enabled]);
var size = useMemo(function () {
if (enabled && flyoutWidth && _referenceWidth > 0) {
var pctValue = flyoutWidth / _referenceWidth * 100;
return "".concat(pctValue, "%");
}
return _size;
}, [enabled, flyoutWidth, _referenceWidth, _size]);
return {
onKeyDown: onKeyDown,
onMouseDown: onMouseDown,
setFlyoutRef: setFlyoutRef,
size: size
};
};