@monimesl/dot-renderer-react 0.1.0-alpha.2 → 0.1.0-alpha.23

package/dist/pull-to-refresh.js

@@ -0,0 +1,120 @@
+import { useTheme } from "./theme.js";
+import { CENTERED } from "./components/tokens.js";
+import { LoadingIcon } from "./components/spinner.js";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/pull-to-refresh.tsx
+const PULL_DISTANCE = 64;
+const LONGEST_PULL = PULL_DISTANCE * 1.5;
+const RESISTANCE = .5;
+const INDICATOR_SIZE = 36;
+const DRAG_DISTANCE = 6;
+function PullToRefresh({ page, children }) {
+	const { colors } = useTheme();
+	const refreshing = useSyncExternalStore(page.subscribeToRefreshing, page.isRefreshing);
+	const [pullDistance, setPullDistance] = useState(0);
+	const areaRef = useRef(null);
+	useEffect(() => {
+		const area = areaRef.current;
+		const view = area.ownerDocument.defaultView;
+		let startY;
+		let pulled = 0;
+		let dragged = false;
+		const begin = (y) => {
+			const atTop = view.scrollY <= 0;
+			startY = page.refreshable && atTop && !page.isRefreshing() ? y : void 0;
+			dragged = false;
+		};
+		const move = (y, event) => {
+			if (startY === void 0) return;
+			const distance = (y - startY) * RESISTANCE;
+			if (distance <= 0) {
+				pulled = 0;
+				setPullDistance(0);
+				return;
+			}
+			if (event.cancelable) event.preventDefault();
+			if (distance > DRAG_DISTANCE) dragged = true;
+			pulled = Math.min(distance, LONGEST_PULL);
+			setPullDistance(pulled);
+		};
+		const end = () => {
+			if (startY !== void 0 && pulled >= PULL_DISTANCE) page.refresh();
+			startY = void 0;
+			pulled = 0;
+			setPullDistance(0);
+		};
+		const ignoreDragClick = (event) => {
+			if (dragged) {
+				dragged = false;
+				event.stopPropagation();
+				event.preventDefault();
+			}
+		};
+		const touchStart = (event) => begin(event.touches[0].clientY);
+		const touchMove = (event) => move(event.touches[0].clientY, event);
+		const mouseDown = (event) => {
+			if (event.button === 0) begin(event.clientY);
+		};
+		const mouseMove = (event) => move(event.clientY, event);
+		const removeListeners = [
+			listen(area, "touchstart", touchStart, { passive: true }),
+			listen(area, "touchmove", touchMove, { passive: false }),
+			listen(area, "touchend", end),
+			listen(area, "touchcancel", end),
+			listen(area, "mousedown", mouseDown),
+			listen(area, "click", ignoreDragClick, { capture: true }),
+			listen(view, "mousemove", mouseMove),
+			listen(view, "mouseup", end)
+		];
+		return () => {
+			for (const removeListener of removeListeners) removeListener();
+		};
+	}, [page]);
+	const indicatorDistance = refreshing ? PULL_DISTANCE : pullDistance;
+	const arrowTurn = Math.min(pullDistance, PULL_DISTANCE) / PULL_DISTANCE * 180;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: areaRef,
+		className: "dot-pull-to-refresh",
+		style: { display: "contents" },
+		children: [children, indicatorDistance > 0 ? /* @__PURE__ */ jsx("span", {
+			role: refreshing ? "status" : void 0,
+			"aria-label": refreshing ? "Refreshing" : void 0,
+			style: {
+				position: "fixed",
+				top: 0,
+				left: "50%",
+				zIndex: 2,
+				...CENTERED,
+				width: INDICATOR_SIZE,
+				height: INDICATOR_SIZE,
+				marginLeft: -18,
+				borderRadius: "50%",
+				background: colors.surface,
+				color: colors.primary,
+				boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
+				transform: `translateY(${indicatorDistance - INDICATOR_SIZE / 2}px)`,
+				transition: pullDistance > 0 ? "none" : "transform 0.2s",
+				pointerEvents: "none"
+			},
+			children: refreshing ? /* @__PURE__ */ jsx(LoadingIcon, { size: 20 }) : /* @__PURE__ */ jsx("svg", {
+				width: 20,
+				height: 20,
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 2.5,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				style: { transform: `rotate(${arrowTurn}deg)` },
+				children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M6 13l6 6 6-6" })
+			})
+		}) : null]
+	});
+}
+function listen(target, type, listener, options) {
+	target.addEventListener(type, listener, options);
+	return () => target.removeEventListener(type, listener, options);
+}
+//#endregion
+export { PullToRefresh };

package/dist/react-host/19.3.0/react-dom.js

@@ -0,0 +1,3 @@
+import { ReactDom } from './react-host.js';
+export default ReactDom;
+export const { __DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, browser, createPortal, flushSync, preconnect, prefetchDNS, preinit, preinitModule, preload, preloadModule, requestFormReset, unstable_batchedUpdates, useFormState, useFormStatus, version } = ReactDom;