@ozen-ui/kit
Version:
React component library
104 lines (103 loc) • 4.17 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useBottomSheetBaseSnaps = void 0;
var react_1 = require("react");
var useEventListener_1 = require("../../../../hooks/useEventListener");
var useStoredValue_1 = require("../../../../hooks/useStoredValue");
var animateProperty_1 = require("../../../../utils/animateProperty");
var math_1 = require("../../../../utils/math");
var constants_1 = require("../../constants");
var hooks_1 = require("../../hooks");
var useBottomSheetBaseSnaps = function (_a) {
var minSnap = _a.minSnap, maxSnap = _a.maxSnap, defaultSnap = _a.defaultSnap, rootRef = _a.rootRef, onAnimationStart = _a.onAnimationStart, onAnimationFinish = _a.onAnimationFinish, isReady = _a.isReady, findClosestSnap = _a.findClosestSnap;
var y = (0, hooks_1.useBottomSheetBaseCSSValue)({
defaultValue: -defaultSnap,
variableName: constants_1.BOTTOM_SHEET_BASE_CSS_VARIABLE.Y,
rootRef: rootRef,
formatValue: function (value) { return "".concat(value, "px"); },
});
var height = (0, hooks_1.useBottomSheetBaseCSSValue)({
defaultValue: defaultSnap,
variableName: constants_1.BOTTOM_SHEET_BASE_CSS_VARIABLE.HEIGHT,
rootRef: rootRef,
formatValue: function (value) { return "".concat(value, "px"); },
});
var openPercent = (0, hooks_1.useBottomSheetBaseCSSValue)({
defaultValue: 0,
variableName: constants_1.BOTTOM_SHEET_BASE_CSS_VARIABLE.OPEN_PERCENT,
rootRef: rootRef,
});
var point = (0, useStoredValue_1.useStoredValue)(function () { return height.value.current + y.value.current; });
var setSnapPoint = function (newPoint) {
if (newPoint === point.current) {
return;
}
point.current = newPoint;
height.setValue((0, math_1.clamp)(newPoint, minSnap, maxSnap));
y.setValue(newPoint - height.value.current);
var newOpenPercent = (function () {
if (newPoint === 0 && minSnap === 0) {
return 0;
}
return (0, math_1.clamp)((newPoint / minSnap) * 100, 0, 100);
})();
openPercent.setValue(newOpenPercent);
};
var snapTo = function (newPoint) {
setSnapPoint(newPoint);
};
var snapToAnimated = function (newPoint, options) {
onAnimationStart === null || onAnimationStart === void 0 ? void 0 : onAnimationStart();
(0, animateProperty_1.animateNumberValue)(function (value) {
snapTo(value);
}, point.current, newPoint, {
onFinish: function () {
var _a;
(_a = options === null || options === void 0 ? void 0 : options.onFinish) === null || _a === void 0 ? void 0 : _a.call(options);
onAnimationFinish === null || onAnimationFinish === void 0 ? void 0 : onAnimationFinish();
},
});
};
var snapToClosed = function (isAnimated) {
if (isAnimated) {
snapToAnimated(0);
}
else {
snapTo(0);
}
};
var snapToDefault = function (isAnimated) {
if (isAnimated) {
snapToAnimated(defaultSnap);
}
else {
snapTo(defaultSnap);
}
};
var previousReady = (0, useStoredValue_1.useStoredValue)(isReady);
// Перерасчет текущей точки при изменении minSnap, maxSnap
(0, react_1.useEffect)(function () {
if (!isReady) {
return;
}
if (previousReady.current) {
snapTo(findClosestSnap.current(point.current));
}
previousReady.current = isReady;
}, [minSnap, maxSnap, isReady]);
(0, useEventListener_1.useEventListener)({
eventName: 'resize',
handler: function () {
var closestSnap = findClosestSnap.current(point.current);
snapTo(closestSnap);
},
});
return {
to: snapTo,
point: point,
toAnimated: snapToAnimated,
toClosed: snapToClosed,
toDefault: snapToDefault,
};
};
exports.useBottomSheetBaseSnaps = useBottomSheetBaseSnaps;