@ozen-ui/kit
Version:
React component library
94 lines (93 loc) • 4.15 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useBottomSheetBaseDrag = void 0;
var tslib_1 = require("tslib");
var react_1 = require("@use-gesture/react");
var math_1 = require("../../../utils/math");
var number_1 = require("../../../utils/number");
var constants_1 = require("../constants");
var context_1 = require("../context");
var useBottomSheetBaseCSSValue_1 = require("./useBottomSheetBaseCSSValue");
var rubberbandIfOutOfBoundsConstant = 0.55;
var useBottomSheetBaseDrag = function (target, options) {
var _a = options !== null && options !== void 0 ? options : {}, _b = _a.isCloseOnTap, isCloseOnTap = _b === void 0 ? false : _b, _c = _a.isDraggable, isDraggable = _c === void 0 ? true : _c;
var _d = (0, context_1.useBottomSheetBaseContext)(), minSnap = _d.minSnap, onCloseContext = _d.onClose, canDrag = _d.canDrag, maxSnap = _d.maxSnap, isClosable = _d.isClosable, snapsControl = _d.snapsControl, findClosestSnap = _d.findClosestSnap, rootRef = _d.rootRef;
var userSelect = (0, useBottomSheetBaseCSSValue_1.useBottomSheetBaseCSSValue)({
rootRef: rootRef,
defaultValue: 'auto',
variableName: constants_1.BOTTOM_SHEET_BASE_CSS_VARIABLE.USER_SELECT,
});
var onClose = function () {
snapsControl.toClosed(true);
onCloseContext === null || onCloseContext === void 0 ? void 0 : onCloseContext();
};
var calculateAnimationTime = function (pxChange, velocity) {
var rawTime = Math.abs(pxChange / velocity);
if ((0, number_1.isNaN)(rawTime)) {
return 0;
}
return (0, math_1.clamp)(rawTime, 200, 500);
};
var onDragStart = function () {
userSelect.setValue('none');
};
var onDragFinish = function () {
userSelect.setValue('auto');
};
(0, react_1.useDrag)(function (params) {
var cancel = params.cancel, down = params.down, first = params.first, last = params.last, _a = params.memo, memo = _a === void 0 ? snapsControl.point.current : _a, _b = tslib_1.__read(params.movement, 2), _my = _b[1], tap = params.tap, _c = tslib_1.__read(params.velocity, 2), velocity = _c[1];
var my = _my * -1;
if (!canDrag.current) {
cancel();
return memo;
}
if (isClosable && isCloseOnTap && tap) {
cancel();
setTimeout(function () { return onClose(); }, 0);
return memo;
}
if (tap) {
return memo;
}
if (first) {
onDragStart();
}
var rawOffset = memo + my;
var predictedDistance = my * velocity;
var predictedPoint = Math.max(minSnap, Math.min(maxSnap, rawOffset + predictedDistance * 2));
if (last && isClosable && rawOffset + predictedDistance < minSnap / 2) {
onDragFinish();
onClose();
return memo;
}
var newOffset = (function () {
if (!down) {
return predictedPoint;
}
if (!isClosable && minSnap === maxSnap) {
if (rawOffset < minSnap) {
return (0, react_1.rubberbandIfOutOfBounds)(rawOffset, minSnap, maxSnap * 1.5, rubberbandIfOutOfBoundsConstant);
}
return (0, react_1.rubberbandIfOutOfBounds)(rawOffset, minSnap / 1.5, maxSnap, rubberbandIfOutOfBoundsConstant);
}
return (0, react_1.rubberbandIfOutOfBounds)(rawOffset, isClosable ? 0 : minSnap, maxSnap, rubberbandIfOutOfBoundsConstant);
})();
if (last) {
var closestSnap = findClosestSnap.current(newOffset);
snapsControl.toAnimated(closestSnap, {
duration: calculateAnimationTime(Math.abs(closestSnap - snapsControl.point.current), velocity),
});
onDragFinish();
return memo;
}
snapsControl.to(newOffset);
return memo;
}, {
target: isDraggable
? target
: {
current: null,
},
});
};
exports.useBottomSheetBaseDrag = useBottomSheetBaseDrag;