@crossed/sheet
Version:
A Cross Platform(Android & iOS) ActionSheet with a robust and flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.
194 lines (193 loc) • 6.75 kB
JavaScript
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var use_scroll_handlers_exports = {};
__export(use_scroll_handlers_exports, {
ScrollState: () => ScrollState,
resolveScrollRef: () => resolveScrollRef,
useDraggable: () => useDraggable,
useScrollHandlers: () => useScrollHandlers
});
module.exports = __toCommonJS(use_scroll_handlers_exports);
var import_react = __toESM(require("react"));
var import_react_native = require("react-native");
var import_context = require("../context");
const ScrollState = {
END: -1
};
const InitialLayoutRect = {
w: 0,
h: 0,
x: 0,
y: 0,
px: 0,
py: 0
};
function resolveScrollRef(ref) {
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
if ((_a = ref.current) == null ? void 0 : _a._listRef) {
return (_b = ref.current._listRef) == null ? void 0 : _b._scrollRef;
}
if ((_c = ref.current) == null ? void 0 : _c.rlvRef) {
return (_f = (_e = (_d = ref.current) == null ? void 0 : _d.rlvRef) == null ? void 0 : _e._scrollComponent) == null ? void 0 : _f._scrollViewRef;
}
if ((_i = (_h = (_g = ref.current) == null ? void 0 : _g._wrapperListRef) == null ? void 0 : _h._listRef) == null ? void 0 : _i._scrollRef) {
return (_l = (_k = (_j = ref.current) == null ? void 0 : _j._wrapperListRef) == null ? void 0 : _k._listRef) == null ? void 0 : _l._scrollRef;
}
return ref.current;
}
function useDraggable(options) {
const gestureContext = (0, import_context.usePanGestureContext)();
const draggableNodes = (0, import_context.useDraggableNodesContext)();
const nodeRef = (0, import_react.useRef)(null);
const offset = (0, import_react.useRef)({ x: 0, y: 0 });
const layout = (0, import_react.useRef)(InitialLayoutRect);
(0, import_react.useEffect)(() => {
const pushNode = () => {
var _a, _b;
const index = (_a = draggableNodes.nodes.current) == null ? void 0 : _a.findIndex(
(node) => node.ref === nodeRef
);
if (index === void 0 || index === -1) {
(_b = draggableNodes.nodes.current) == null ? void 0 : _b.push({
ref: nodeRef,
offset,
rect: layout,
handlerConfig: options
});
}
};
const popNode = () => {
var _a, _b;
const index = (_a = draggableNodes.nodes.current) == null ? void 0 : _a.findIndex(
(node) => node.ref === nodeRef
);
if (index === void 0 || index > -1) {
(_b = draggableNodes.nodes.current) == null ? void 0 : _b.splice(index, 1);
}
};
pushNode();
return () => {
popNode();
};
}, [draggableNodes.nodes, options]);
return {
nodeRef,
offset,
draggableNodes,
layout,
gestureContext
};
}
function useScrollHandlers(options) {
const [, setRender] = (0, import_react.useState)(false);
const { nodeRef, gestureContext, offset, layout } = useDraggable(options);
const timer = (0, import_react.useRef)();
const subscription = (0, import_react.useRef)();
const onMeasure = (0, import_react.useCallback)(
(x, y, w, h, px, py) => {
layout.current = {
x,
y,
w,
h: h + 10,
px,
py
};
},
[layout]
);
const measureAndLayout = import_react.default.useCallback(() => {
clearTimeout(timer.current);
timer.current = setTimeout(() => {
var _a;
const ref = resolveScrollRef(nodeRef);
if (import_react_native.Platform.OS == "web") {
if (!ref)
return;
const rect = ref.getBoundingClientRect();
ref.style.overflow = "auto";
onMeasure(rect.x, rect.y, rect.width, rect.height, rect.left, rect.top);
} else {
(_a = ref == null ? void 0 : ref.measure) == null ? void 0 : _a.call(ref, onMeasure);
}
}, 300);
}, [nodeRef, onMeasure]);
(0, import_react.useEffect)(() => {
if (import_react_native.Platform.OS === "web" || !gestureContext.ref)
return;
const interval = setInterval(() => {
if (gestureContext.ref.current) {
clearInterval(interval);
setRender(true);
}
}, 10);
}, [gestureContext.ref]);
const memoizedProps = import_react.default.useMemo(() => {
return {
ref: nodeRef,
simultaneousHandlers: gestureContext.ref,
onScroll: (event) => {
const { x, y } = event.nativeEvent.contentOffset;
const maxOffsetX = event.nativeEvent.contentSize.width - layout.current.w;
const maxOffsetY = event.nativeEvent.contentSize.height - layout.current.h;
offset.current = {
x: x === maxOffsetX || x > maxOffsetX - 5 ? ScrollState.END : x,
y: y === maxOffsetY || y > maxOffsetY - 5 ? ScrollState.END : y
};
},
scrollEventThrottle: 1,
onLayout: () => {
var _a;
measureAndLayout();
(_a = subscription.current) == null ? void 0 : _a.unsubscribe();
subscription.current = gestureContext.eventManager.subscribe(
"onoffsetchange",
() => {
measureAndLayout();
}
);
}
};
}, [
gestureContext.eventManager,
gestureContext.ref,
layout,
measureAndLayout,
nodeRef,
offset
]);
return memoizedProps;
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
ScrollState,
resolveScrollRef,
useDraggable,
useScrollHandlers
});
//# sourceMappingURL=use-scroll-handlers.js.map