@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
162 lines (161 loc) • 6.42 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _componentHelper = require("../../shared/component-helper.js");
var _PortalRoot = _interopRequireDefault(require("../../components/PortalRoot.js"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
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 DrawerListPortal({
innerRef,
id,
opened,
rootRef = {
current: undefined
},
include_owner_width,
independent_width,
fixed_position,
skipPortal,
className,
children
}) {
const [isMounted, setIsMounted] = (0, _react.useState)(false);
const [, setForceRerender] = (0, _react.useState)();
const localRef = (0, _react.useRef)(null);
const portalRef = innerRef && typeof innerRef !== 'function' ? innerRef : localRef;
const setPosition = (0, _react.useRef)();
const positionTimeout = (0, _react.useRef)();
const customElem = (0, _react.useRef)();
const resizeObserver = (0, _react.useRef)();
const init = (0, _react.useCallback)(() => {
setIsMounted(true);
}, []);
const removePositionObserver = (0, _react.useCallback)(() => {
clearTimeout(positionTimeout.current);
if (typeof window !== 'undefined' && setPosition.current) {
if (customElem.current) {
customElem.current.removeEventListener('scroll', setPosition.current);
}
if (resizeObserver.current) {
resizeObserver.current.disconnect();
resizeObserver.current = null;
}
window.removeEventListener('resize', setPosition.current);
}
setPosition.current = null;
}, []);
(0, _react.useEffect)(() => {
if (document.readyState === 'complete') {
init();
} else if (typeof window !== 'undefined') {
window.addEventListener('load', init);
}
}, [init]);
(0, _react.useEffect)(() => {
return () => {
if (typeof window !== 'undefined') {
window.removeEventListener('load', init);
}
removePositionObserver();
};
}, [init, removePositionObserver]);
const makeStyle = (0, _react.useCallback)(() => {
if (typeof window === 'undefined' || !isMounted) {
return;
}
try {
const rootElem = rootRef.current;
if (!rootElem) {
return;
}
const ownerElem = rootElem.parentElement;
let width = 64;
const ownerWidth = window.getComputedStyle(ownerElem).width;
if (independent_width || parseFloat(ownerWidth) < 64) {
let minWidth = 0;
if (portalRef.current) {
minWidth = parseFloat(window.getComputedStyle(portalRef.current).getPropertyValue('--drawer-list-width')) || 0;
}
width = minWidth * 16;
}
const customWidth = rootElem.getBoundingClientRect().width;
if (!independent_width && (customWidth || 0) >= 64) {
width = customWidth;
}
const rect = rootElem.getBoundingClientRect();
const scrollY = fixed_position ? 0 : window.scrollY !== undefined ? window.scrollY : window.pageYOffset;
const scrollX = fixed_position ? 0 : window.scrollX !== undefined ? window.scrollX : window.pageXOffset;
let top = scrollY + rect.top;
let left = scrollX + rect.left + (include_owner_width ? parseFloat(ownerWidth || '0') : 0);
if (width > window.innerWidth) {
width = window.innerWidth;
}
if (top < 0) {
top = 0;
}
if (left < 0) {
left = 0;
}
const style = {
width,
'--drawer-list-width': `${width / 16}rem`,
top,
left
};
return style;
} catch (e) {
(0, _componentHelper.warn)(e);
}
}, [isMounted, rootRef, independent_width, fixed_position, include_owner_width, portalRef]);
const addPositionObserver = (0, _react.useCallback)(() => {
if (setPosition.current || typeof window === 'undefined') {
return;
}
setPosition.current = () => {
clearTimeout(positionTimeout.current);
positionTimeout.current = setTimeout(() => {
if (opened) {
setForceRerender(Date.now());
}
}, 200);
};
customElem.current = (0, _componentHelper.getClosestScrollViewElement)(rootRef.current) || window;
customElem.current.addEventListener('scroll', setPosition.current);
try {
resizeObserver.current = new ResizeObserver(setPosition.current);
resizeObserver.current.observe(document.body);
} catch (e) {
window.addEventListener('resize', setPosition.current);
}
}, [opened, rootRef]);
if (skipPortal) {
return children;
}
if (typeof window !== 'undefined' && isMounted) {
if (opened) {
addPositionObserver();
}
const style = opened ? makeStyle() : {};
return _react.default.createElement(_PortalRoot.default, null, _react.default.createElement("span", {
className: "dnb-drawer-list__portal",
id: `${id}-portal`,
ref: portalRef
}, _react.default.createElement("span", {
className: (0, _classnames.default)('dnb-drawer-list__portal__style', className, fixed_position && 'dnb-drawer-list__portal__style--fixed'),
style: style
}, children)));
}
return null;
}
var _default = exports.default = _react.default.forwardRef((props, ref) => {
return _react.default.createElement(DrawerListPortal, _extends({
innerRef: ref
}, props));
});
//# sourceMappingURL=DrawerListPortal.js.map