102 lines
3.8 KiB
Plaintext
102 lines
3.8 KiB
Plaintext
"use strict";
|
|
var __defProp = Object.defineProperty;
|
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
var __export = (target, all) => {
|
|
for (var name in all)
|
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
};
|
|
var __copyProps = (to, from, except, desc) => {
|
|
if (from && typeof from === "object" || typeof from === "function") {
|
|
for (let key of __getOwnPropNames(from))
|
|
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
}
|
|
return to;
|
|
};
|
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
|
|
// src/index.ts
|
|
var src_exports = {};
|
|
__export(src_exports, {
|
|
useDraggable: () => useDraggable
|
|
});
|
|
module.exports = __toCommonJS(src_exports);
|
|
var import_react = require("react");
|
|
var import_interactions = require("@react-aria/interactions");
|
|
function useDraggable(props) {
|
|
const { targetRef, isDisabled = false, canOverflow = false } = props;
|
|
const boundary = (0, import_react.useRef)({ minLeft: 0, minTop: 0, maxLeft: 0, maxTop: 0 });
|
|
let transform = { offsetX: 0, offsetY: 0 };
|
|
const onMoveStart = (0, import_react.useCallback)(() => {
|
|
var _a, _b, _c, _d, _e;
|
|
const { offsetX, offsetY } = transform;
|
|
const targetRect = (_a = targetRef == null ? void 0 : targetRef.current) == null ? void 0 : _a.getBoundingClientRect();
|
|
const targetLeft = (_b = targetRect == null ? void 0 : targetRect.left) != null ? _b : 0;
|
|
const targetTop = (_c = targetRect == null ? void 0 : targetRect.top) != null ? _c : 0;
|
|
const targetWidth = (_d = targetRect == null ? void 0 : targetRect.width) != null ? _d : 0;
|
|
const targetHeight = (_e = targetRect == null ? void 0 : targetRect.height) != null ? _e : 0;
|
|
const clientWidth = document.documentElement.clientWidth;
|
|
const clientHeight = document.documentElement.clientHeight;
|
|
const minLeft = -targetLeft + offsetX;
|
|
const minTop = -targetTop + offsetY;
|
|
const maxLeft = clientWidth - targetLeft - targetWidth + offsetX;
|
|
const maxTop = clientHeight - targetTop - targetHeight + offsetY;
|
|
boundary.current = {
|
|
minLeft,
|
|
minTop,
|
|
maxLeft,
|
|
maxTop
|
|
};
|
|
}, [transform, targetRef == null ? void 0 : targetRef.current]);
|
|
const onMove = (0, import_react.useCallback)(
|
|
(e) => {
|
|
if (isDisabled) {
|
|
return;
|
|
}
|
|
const { offsetX, offsetY } = transform;
|
|
const { minLeft, minTop, maxLeft, maxTop } = boundary.current;
|
|
let moveX = offsetX + e.deltaX;
|
|
let moveY = offsetY + e.deltaY;
|
|
if (!canOverflow) {
|
|
moveX = Math.min(Math.max(moveX, minLeft), maxLeft);
|
|
moveY = Math.min(Math.max(moveY, minTop), maxTop);
|
|
}
|
|
transform = {
|
|
offsetX: moveX,
|
|
offsetY: moveY
|
|
};
|
|
if (targetRef == null ? void 0 : targetRef.current) {
|
|
targetRef.current.style.transform = `translate(${moveX}px, ${moveY}px)`;
|
|
}
|
|
},
|
|
[isDisabled, transform, boundary.current, canOverflow, targetRef == null ? void 0 : targetRef.current]
|
|
);
|
|
const { moveProps } = (0, import_interactions.useMove)({
|
|
onMoveStart,
|
|
onMove
|
|
});
|
|
const preventDefault = (0, import_react.useCallback)((e) => {
|
|
e.preventDefault();
|
|
}, []);
|
|
(0, import_react.useEffect)(() => {
|
|
if (!isDisabled) {
|
|
document.body.addEventListener("touchmove", preventDefault, { passive: false });
|
|
}
|
|
return () => {
|
|
document.body.removeEventListener("touchmove", preventDefault);
|
|
};
|
|
}, [isDisabled]);
|
|
return {
|
|
moveProps: {
|
|
...moveProps,
|
|
style: { cursor: !isDisabled ? "move" : void 0 }
|
|
}
|
|
};
|
|
}
|
|
// Annotate the CommonJS export names for ESM import in node:
|
|
0 && (module.exports = {
|
|
useDraggable
|
|
});
|