@ozen-ui/kit
Version:
React component library
82 lines (81 loc) • 3.73 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useBottomSheetBaseHeight = void 0;
var tslib_1 = require("tslib");
var react_1 = require("react");
var environment_1 = require("../../../constants/environment");
var useEventListener_1 = require("../../../hooks/useEventListener");
var useMultipleResizeObserver_1 = require("../../../hooks/useMultipleResizeObserver");
var isFunction_1 = require("../../../utils/isFunction");
var number_1 = require("../../../utils/number");
var useBottomSheetBaseHeight = function (_a) {
var contentRef = _a.contentRef, blocksRefs = _a.blocksRefs, customMaxHeightProp = _a.customMaxHeight, registerReady = _a.registerReady;
var setReadyContentHeight = (0, react_1.useMemo)(function () { return registerReady('contentHeight'); }, [registerReady]);
var setReadyMaxHeight = (0, react_1.useMemo)(function () { return registerReady('maxHeight'); }, [registerReady]);
var getElementHeight = function (element) {
var _a;
var rect = element === null || element === void 0 ? void 0 : element.getBoundingClientRect();
return (_a = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _a !== void 0 ? _a : 0;
};
var getRawMaxHeight = function () {
if (environment_1.isServer) {
return 0;
}
return window.innerHeight;
};
var _b = tslib_1.__read((0, react_1.useState)(0), 2), minHeight = _b[0], setMinHeight = _b[1];
var getCustomMaxHeight = function () {
if ((0, isFunction_1.isFunction)(customMaxHeightProp)) {
return customMaxHeightProp({
maxHeight: getRawMaxHeight(),
minHeight: minHeight,
});
}
return customMaxHeightProp;
};
var checkHasCustomMaxHeight = function (customMaxHeight) { return (0, number_1.isNumber)(customMaxHeight); };
var calculateMaxHeight = function () {
var customMaxHeight = getCustomMaxHeight();
if (checkHasCustomMaxHeight(customMaxHeight)) {
return customMaxHeight;
}
return getRawMaxHeight();
};
var _c = tslib_1.__read((0, react_1.useState)(function () { return calculateMaxHeight(); }), 2), maxHeight = _c[0], setMaxHeightState = _c[1];
var calculateMinHeight = function (maxHeight) {
var contentHeight = getElementHeight(contentRef.current);
var notContentBlocksHeight = 0;
Object.values(blocksRefs.current).forEach(function (element) {
notContentBlocksHeight += getElementHeight(element);
});
return Math.max(0, Math.min(maxHeight - notContentBlocksHeight, contentHeight) +
notContentBlocksHeight);
};
var recalculateHeight = function () {
var newMaxHeight = calculateMaxHeight();
setMaxHeightState(newMaxHeight);
setMinHeight(calculateMinHeight(newMaxHeight));
};
(0, useMultipleResizeObserver_1.useMultipleResizeObserver)(tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(Object.values(blocksRefs.current)), false), [contentRef.current], false), function () {
recalculateHeight();
});
(0, react_1.useEffect)(function () {
setReadyContentHeight();
}, []);
(0, useEventListener_1.useEventListener)({
eventName: 'resize',
handler: function () {
recalculateHeight();
},
});
(0, react_1.useEffect)(function () {
recalculateHeight();
setReadyMaxHeight();
}, [getCustomMaxHeight()]);
return {
minHeight: minHeight,
maxHeight: maxHeight,
recalculateHeight: recalculateHeight,
};
};
exports.useBottomSheetBaseHeight = useBottomSheetBaseHeight;