@ioca/react 1.4.76 → 1.4.77

package/lib/types/js/hooks.js

@@ -0,0 +1,249 @@
+import { useEffect, useRef, useState } from "react";
+//#region packages/js/hooks.ts
+const MouseMoveEvents = /* @__PURE__ */ new Set();
+const MouseUpEvents = /* @__PURE__ */ new Set();
+const KeydownEvents = /* @__PURE__ */ new Set();
+let initialized = false;
+const initEvents = () => {
+	if (typeof document === "undefined" || initialized) return;
+	initialized = true;
+	const touchable = "ontouchend" in document;
+	const EVENTS = {
+		MOVE: touchable ? "touchmove" : "mousemove",
+		UP: touchable ? "touchend" : "mouseup",
+		KEYDOWN: "keydown"
+	};
+	document.addEventListener(EVENTS.MOVE, (e) => {
+		for (const listener of MouseMoveEvents.values()) listener(e);
+	}, { passive: false });
+	document.addEventListener(EVENTS.UP, (e) => {
+		for (const listener of MouseUpEvents.values()) listener(e);
+	});
+	document.addEventListener(EVENTS.KEYDOWN, (e) => {
+		for (const listener of KeydownEvents.values()) listener(e);
+	});
+};
+function initEventsOnce() {
+	useEffect(initEvents, []);
+}
+function useMouseMove(listener, options) {
+	initEventsOnce();
+	useEffect(() => {
+		if (options?.disabled) return;
+		MouseMoveEvents.add(listener);
+		return () => {
+			MouseMoveEvents.delete(listener);
+		};
+	}, []);
+}
+function useMouseUp(listener, options) {
+	initEventsOnce();
+	useEffect(() => {
+		if (options?.disabled) return;
+		MouseUpEvents.add(listener);
+		return () => {
+			MouseUpEvents.delete(listener);
+		};
+	}, []);
+}
+function useKeydown(listener, options) {
+	initEventsOnce();
+	useEffect(() => {
+		if (options?.disabled) return;
+		KeydownEvents.add(listener);
+		return () => {
+			KeydownEvents.delete(listener);
+		};
+	}, []);
+}
+function useReactive(initialState) {
+	const [, setFlag] = useState(0);
+	const scheduledRef = useRef(false);
+	const proxyCacheRef = useRef(/* @__PURE__ */ new WeakMap());
+	const rootRef = useRef(null);
+	const proxyRef = useRef(null);
+	const notify = () => {
+		if (scheduledRef.current) return;
+		scheduledRef.current = true;
+		const flush = () => {
+			scheduledRef.current = false;
+			setFlag((n) => n + 1);
+		};
+		if (typeof queueMicrotask !== "undefined") {
+			queueMicrotask(flush);
+			return;
+		}
+		Promise.resolve().then(flush);
+	};
+	const createProxy = (target) => {
+		if (!target || typeof target !== "object") return target;
+		if (!Array.isArray(target)) {
+			const proto = Object.getPrototypeOf(target);
+			if (!(proto === Object.prototype || proto === null)) return target;
+		}
+		const cached = proxyCacheRef.current.get(target);
+		if (cached) return cached;
+		const proxy = new Proxy(target, {
+			get(t, p, r) {
+				return createProxy(Reflect.get(t, p, r));
+			},
+			set(t, p, v, r) {
+				const prev = Reflect.get(t, p, r);
+				const ok = Reflect.set(t, p, v, r);
+				if (prev !== v) notify();
+				return ok;
+			},
+			deleteProperty(t, p) {
+				const had = Object.prototype.hasOwnProperty.call(t, p);
+				const ok = Reflect.deleteProperty(t, p);
+				if (had) notify();
+				return ok;
+			}
+		});
+		proxyCacheRef.current.set(target, proxy);
+		return proxy;
+	};
+	if (!proxyRef.current) {
+		rootRef.current = initialState;
+		proxyRef.current = createProxy(rootRef.current);
+	}
+	return proxyRef.current;
+}
+function useLocalStorageState(key, options) {
+	const { defaultValue, listenStorageChange } = options ?? {};
+	const getDefault = () => {
+		return typeof defaultValue === "function" ? defaultValue() : defaultValue;
+	};
+	const read = () => {
+		if (typeof window === "undefined") return getDefault();
+		const raw = window.localStorage.getItem(key);
+		if (raw === null) return getDefault();
+		try {
+			return JSON.parse(raw);
+		} catch (e) {
+			return raw;
+		}
+	};
+	const [state, setState] = useState(() => read());
+	const set = (value) => {
+		setState((prev) => {
+			const next = typeof value === "function" ? value(prev) : value;
+			if (typeof window !== "undefined") if (next === void 0) window.localStorage.removeItem(key);
+			else window.localStorage.setItem(key, JSON.stringify(next));
+			return next;
+		});
+	};
+	useEffect(() => {
+		if (!listenStorageChange) return;
+		if (typeof window === "undefined") return;
+		const onStorage = (e) => {
+			if (e.key !== key) return;
+			if (e.newValue === null) {
+				setState(getDefault());
+				return;
+			}
+			try {
+				setState(JSON.parse(e.newValue));
+			} catch (err) {
+				setState(e.newValue);
+			}
+		};
+		window.addEventListener("storage", onStorage);
+		return () => {
+			window.removeEventListener("storage", onStorage);
+		};
+	}, [key, listenStorageChange]);
+	return [state, set];
+}
+function useSize(target) {
+	const [size, setSize] = useState();
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		const resolveTarget = () => {
+			if (!target) return null;
+			if (typeof target === "function") return target();
+			if (typeof target === "object" && "current" in target) return target.current;
+			return target;
+		};
+		const el = resolveTarget();
+		if (!el) return;
+		const update = () => {
+			const rect = el.getBoundingClientRect();
+			setSize({
+				width: rect.width,
+				height: rect.height
+			});
+		};
+		update();
+		let ro;
+		if (typeof ResizeObserver !== "undefined") {
+			ro = new ResizeObserver(update);
+			ro.observe(el);
+		}
+		window.addEventListener("resize", update);
+		return () => {
+			window.removeEventListener("resize", update);
+			ro?.disconnect();
+		};
+	}, [target]);
+	return size;
+}
+const defaultObserver = {
+	observe: void 0,
+	unobserve: void 0,
+	disconnect: void 0
+};
+function useIntersectionObserver(configs) {
+	if (typeof window === "undefined") return { ...defaultObserver };
+	const WM = /* @__PURE__ */ new WeakMap();
+	const IO = new IntersectionObserver((entries) => {
+		entries.map((entry) => {
+			WM.get(entry.target)?.(entry.target, entry.isIntersecting);
+		});
+	}, configs);
+	function observe(target, callback) {
+		if (WM.get(target)) return;
+		WM.set(target, callback);
+		target && IO.observe(target);
+	}
+	function unobserve(target) {
+		target && IO.unobserve(target);
+		WM.delete(target);
+	}
+	function disconnect() {
+		IO.disconnect();
+	}
+	return {
+		observe,
+		unobserve,
+		disconnect
+	};
+}
+function useResizeObserver() {
+	if (typeof window === "undefined") return { ...defaultObserver };
+	const WM = /* @__PURE__ */ new WeakMap();
+	const IO = new ResizeObserver((entries) => {
+		entries.map((entry) => {
+			WM.get(entry.target)?.(entry.target);
+		});
+	});
+	function observe(target, callback) {
+		if (WM.get(target)) return;
+		target && IO.observe(target);
+		WM.set(target, callback);
+	}
+	function unobserve(target) {
+		target && IO.unobserve(target);
+		WM.delete(target);
+	}
+	function disconnect() {
+		IO.disconnect();
+	}
+	return {
+		observe,
+		unobserve,
+		disconnect
+	};
+}
+//#endregion
+export { useIntersectionObserver, useKeydown, useLocalStorageState, useMouseMove, useMouseUp, useReactive, useResizeObserver, useSize };

package/lib/types/js/usePreview/content.d.ts

@@ -0,0 +1,2 @@
+import { IPreview } from './type';
+export default function Content(props: IPreview): import("react/jsx-runtime").JSX.Element;

package/lib/types/js/usePreview/content.js

@@ -0,0 +1,193 @@
+import { useMouseMove, useMouseUp, useReactive } from "../hooks.js";
+import button_default from "../../components/button/index.js";
+import icon_default from "../../components/icon/index.js";
+import { getFileType, getSuffixByUrl } from "../utils.js";
+import { TFileType } from "./type.js";
+import renderFile from "./renderFile.js";
+import classNames from "classnames";
+import { throttle } from "/Users/iann/codes/ioca-react/node_modules/.pnpm/radash@12.1.1/node_modules/radash/dist/esm/index.mjs";
+import { useEffect, useMemo, useRef } from "react";
+import { AspectRatioRound, CloseRound, FileDownloadOutlined, KeyboardArrowLeftRound, KeyboardArrowRightRound, OpenInNewRound, RotateLeftRound, RotateRightRound } from "/Users/iann/codes/ioca-react/node_modules/.pnpm/@ricons+material@0.12.0/node_modules/@ricons/material/es/index.js";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/js/usePreview/content.tsx
+function Content(props) {
+	const { items = [], initial = 0, renderFile: renderFile$1 = renderFile, onRotate, onChange, onClose, onZoom } = props;
+	const state = useReactive({
+		current: initial,
+		rotate: 0,
+		scale: 1,
+		translate: [0, 0],
+		start: [0, 0],
+		dragging: false,
+		controlHidden: true
+	});
+	const box = useRef(null);
+	const translate = useRef([0, 0]);
+	const hiddenTO = useRef(null);
+	const files = useMemo(() => {
+		return items.map((item) => {
+			const o = { src: "" };
+			if (typeof item === "string") o.src = item;
+			else Object.assign(o, item);
+			o.suffix = getSuffixByUrl(o.src) || "";
+			o.type = getFileType(o.suffix, item["type"]);
+			return o;
+		});
+	}, [items]);
+	const { file, content } = useMemo(() => {
+		const file = files[state.current];
+		return {
+			file,
+			content: renderFile$1(file)
+		};
+	}, [state.current, items]);
+	const isImage = file.type === TFileType.IMAGE;
+	const handleSwitch = (next) => {
+		const l = files.length;
+		const { current: before } = state;
+		if (next >= l) state.current = 0;
+		else if (next < 0) state.current = l - 1;
+		else state.current = next;
+		onChange?.(state.current, before);
+		state.rotate = files[state.current].rotate || 0;
+		if (state.scale !== 1) {
+			state.scale = 1;
+			onZoom?.(1);
+		}
+		onRotate?.(state.rotate);
+		state.translate = translate.current = [0, 0];
+	};
+	const handleRotate = (deg) => {
+		state.rotate += deg;
+		onRotate?.(state.rotate);
+	};
+	const handleMouseWheel = throttle({ interval: 60 }, (e) => {
+		e.stopPropagation();
+		e.preventDefault();
+		if (!isImage) return;
+		let after = state.scale + (e.deltaY < 0 ? .05 : -.05);
+		if (after > 2) after = 2;
+		if (after < .25) after = .25;
+		onZoom?.(after);
+		state.scale = after;
+	});
+	const handleMouseDown = (e) => {
+		if (!isImage) return;
+		e.preventDefault();
+		state.dragging = true;
+		state.start = [e.pageX, e.pageY];
+	};
+	const clearHiddenTO = () => {
+		if (!hiddenTO.current || state.controlHidden) return;
+		clearTimeout(hiddenTO.current);
+		hiddenTO.current = null;
+	};
+	const setHiddenFalse = () => {
+		if (!state.controlHidden) return;
+		state.controlHidden = false;
+		clearHiddenTO();
+		hiddenTO.current = setTimeout(() => {
+			state.controlHidden = true;
+		}, 1e3);
+	};
+	const throttleMouseMove = throttle({ interval: 300 }, setHiddenFalse);
+	const handleMouseMove = (e) => {
+		throttleMouseMove();
+		if (!state.dragging) return;
+		e.preventDefault();
+		const [x, y] = translate.current;
+		const [ox, oy] = state.start;
+		const offsetX = e.pageX - ox;
+		const offsetY = e.pageY - oy;
+		state.translate = [x + offsetX, y + offsetY];
+	};
+	const handleMouseUp = () => {
+		if (!state.dragging) return;
+		state.dragging = false;
+		translate.current = state.translate;
+	};
+	useMouseMove(handleMouseMove);
+	useMouseUp(handleMouseUp);
+	useEffect(() => {
+		if (!box.current) return;
+		box.current.addEventListener("wheel", handleMouseWheel, { passive: false });
+		return () => {
+			if (!box.current) return;
+			box.current.removeEventListener("wheel", handleMouseWheel);
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		ref: box,
+		className: classNames("i-preview-content", { "no-transition": state.dragging }),
+		style: { transform: `translate(${state.translate.map((n) => `${n}px`).join(",")}) rotate(${state.rotate}deg) scale(${state.scale})` },
+		onMouseDown: handleMouseDown,
+		onClick: (e) => e.stopPropagation(),
+		children: content
+	}), /* @__PURE__ */ jsxs("div", {
+		className: classNames("i-preview-controls", { "i-preview-controls-hidden": state.controlHidden }),
+		children: [
+			/* @__PURE__ */ jsx(button_default, {
+				square: true,
+				flat: true,
+				onClick: onClose,
+				children: /* @__PURE__ */ jsx(icon_default, { icon: /* @__PURE__ */ jsx(CloseRound, {}) })
+			}),
+			files.length > 1 && /* @__PURE__ */ jsxs("span", {
+				className: "px-8",
+				children: [
+					state.current + 1,
+					" / ",
+					files.length
+				]
+			}),
+			state.scale !== 1 && /* @__PURE__ */ jsxs(button_default, {
+				flat: true,
+				onClick: () => state.scale = 1,
+				children: [/* @__PURE__ */ jsx(icon_default, { icon: /* @__PURE__ */ jsx(AspectRatioRound, {}) }), /* @__PURE__ */ jsxs("span", {
+					className: "mt-2",
+					children: [(state.scale * 100).toFixed(0), "%"]
+				})]
+			}),
+			/* @__PURE__ */ jsx(button_default, {
+				square: true,
+				flat: true,
+				href: file.src,
+				target: "_blank",
+				children: /* @__PURE__ */ jsx(icon_default, { icon: /* @__PURE__ */ jsx(OpenInNewRound, {}) })
+			}),
+			/* @__PURE__ */ jsx(button_default, {
+				square: true,
+				flat: true,
+				href: file.src,
+				download: true,
+				target: "_blank",
+				children: /* @__PURE__ */ jsx(icon_default, { icon: /* @__PURE__ */ jsx(FileDownloadOutlined, {}) })
+			}),
+			/* @__PURE__ */ jsx(button_default, {
+				square: true,
+				flat: true,
+				onClick: () => handleRotate(90),
+				children: /* @__PURE__ */ jsx(icon_default, { icon: /* @__PURE__ */ jsx(RotateRightRound, {}) })
+			}),
+			/* @__PURE__ */ jsx(button_default, {
+				square: true,
+				flat: true,
+				onClick: () => handleRotate(-90),
+				children: /* @__PURE__ */ jsx(icon_default, { icon: /* @__PURE__ */ jsx(RotateLeftRound, {}) })
+			}),
+			files.length > 1 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(button_default, {
+				square: true,
+				flat: true,
+				onClick: () => handleSwitch(state.current - 1),
+				children: /* @__PURE__ */ jsx(icon_default, { icon: /* @__PURE__ */ jsx(KeyboardArrowLeftRound, {}) })
+			}), /* @__PURE__ */ jsx(button_default, {
+				square: true,
+				flat: true,
+				onClick: () => handleSwitch(state.current + 1),
+				children: /* @__PURE__ */ jsx(icon_default, { icon: /* @__PURE__ */ jsx(KeyboardArrowRightRound, {}) })
+			})] })
+		]
+	})] });
+}
+//#endregion
+export { Content as default };

package/lib/types/js/usePreview/index.d.ts

@@ -1,5 +1,2 @@
-import { IPreview } from './type.js';
-
-declare function usePreview(): (config: IPreview) => void;
-
-export { usePreview as default };
+import { IPreview } from './type';
+export default function usePreview(): (config: IPreview) => void;

package/lib/types/js/usePreview/index.js

@@ -0,0 +1,37 @@
+import { renderNode } from "../utils.js";
+import HookModal from "../../components/modal/hookModal.js";
+import Content from "./content.js";
+import { useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import "./index.css";
+//#region packages/js/usePreview/index.tsx
+function usePreview() {
+	const ref = useRef(null);
+	const preview = (config) => {
+		const { items, modalProps, onClose, ...restProps } = config;
+		const handleClose = () => {
+			onClose?.();
+			unMount?.();
+		};
+		const unMount = renderNode(/* @__PURE__ */ jsx(HookModal, {
+			ref,
+			visible: true,
+			className: "i-preview",
+			customized: true,
+			hideShadow: true,
+			...modalProps,
+			children: /* @__PURE__ */ jsx(Content, {
+				...restProps,
+				items,
+				onClose: () => {
+					ref.current?.update({ visible: false });
+				}
+			}),
+			fixed: true,
+			onClose: handleClose
+		}));
+	};
+	return preview;
+}
+//#endregion
+export { usePreview as default };

package/lib/types/js/usePreview/renderFile.d.ts

@@ -0,0 +1,2 @@
+import { TPreviewItem } from './type';
+export default function renderFile(props: TPreviewItem): import("react/jsx-runtime").JSX.Element;

package/lib/types/js/usePreview/renderFile.js

@@ -0,0 +1,25 @@
+import icon_default from "../../components/icon/index.js";
+import video_default from "../../components/video/index.js";
+import { TFileType } from "./type.js";
+import { FeedOutlined } from "/Users/iann/codes/ioca-react/node_modules/.pnpm/@ricons+material@0.12.0/node_modules/@ricons/material/es/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/js/usePreview/renderFile.tsx
+function renderFile(props) {
+	const { name, suffix, type } = props;
+	switch (type) {
+		case TFileType.IMAGE: return /* @__PURE__ */ jsx("img", { src: props.src });
+		case TFileType.VIDEO: return /* @__PURE__ */ jsx(video_default, { ...props });
+		default: return /* @__PURE__ */ jsxs("div", {
+			className: "i-preview-unknown",
+			children: [/* @__PURE__ */ jsx(icon_default, {
+				icon: /* @__PURE__ */ jsx(FeedOutlined, {}),
+				size: "3em"
+			}), /* @__PURE__ */ jsx("h5", {
+				className: "mt-4",
+				children: name || suffix || "?"
+			})]
+		});
+	}
+}
+//#endregion
+export { renderFile as default };

package/lib/types/js/usePreview/type.d.ts

@@ -1,7 +1,6 @@
-import { ReactNode, CSSProperties } from 'react';
-import { IModal } from '../../components/modal/type.js';
-
-type TPreviewItem = {
+import { CSSProperties, ReactNode } from 'react';
+import { IModal } from '../../components/modal/type';
+export type TPreviewItem = {
     src: string;
     name?: ReactNode;
     thumb?: string;
@@ -11,7 +10,16 @@ type TPreviewItem = {
     type?: string;
     suffix?: string;
 };
-interface IPreview {
+export declare enum TFileType {
+    IMAGE = "IMAGE",
+    VIDEO = "VIDEO",
+    AUDIO = "AUDIO",
+    PDF = "PDF",
+    EXCEL = "EXCEL",
+    TXT = "TXT",
+    UNKNOWN = "UNKNOWN"
+}
+export interface IPreview {
     items: (TPreviewItem | string)[];
     initial?: number;
     controls?: boolean;
@@ -26,5 +34,3 @@ interface IPreview {
     onZoom?: (scale: number) => void;
     onRotate?: (deg: number) => void;
 }
-
-export type { IPreview, TPreviewItem };

package/lib/types/js/usePreview/type.js

@@ -0,0 +1,13 @@
+//#region packages/js/usePreview/type.ts
+let TFileType = /* @__PURE__ */ function(TFileType) {
+	TFileType["IMAGE"] = "IMAGE";
+	TFileType["VIDEO"] = "VIDEO";
+	TFileType["AUDIO"] = "AUDIO";
+	TFileType["PDF"] = "PDF";
+	TFileType["EXCEL"] = "EXCEL";
+	TFileType["TXT"] = "TXT";
+	TFileType["UNKNOWN"] = "UNKNOWN";
+	return TFileType;
+}({});
+//#endregion
+export { TFileType };

package/lib/types/js/useRipple/index.d.ts

@@ -0,0 +1,2 @@
+declare const useRipple: () => void;
+export default useRipple;

package/lib/types/js/useRipple/index.js

@@ -0,0 +1,44 @@
+import "./ripple.css";
+//#region packages/js/useRipple/index.ts
+const TIMEOUT = 500;
+const useRipple = () => {
+	if (!document) return;
+	if (document.documentElement.dataset["iocaRipple"]) return;
+	document.documentElement.dataset["iocaRipple"] = "enable";
+	document.addEventListener("mousedown", listener);
+};
+function listener(e) {
+	const target = e.target;
+	const parent = target.closest("[data-ripple]");
+	if (!target || !parent) return;
+	triggerRipple(parent, e);
+}
+function triggerRipple(target, e) {
+	if (!document) return;
+	const [$box, $ripple] = createRipple();
+	const rect = target.getBoundingClientRect();
+	const size = Math.max(rect.width, rect.height) * 2;
+	$ripple.style.cssText = `
+        left: ${e.pageX - rect.left}px;
+        top: ${e.pageY - rect.top}px;
+        width: ${size}px;
+        height: ${size}px;
+        transition: all ${TIMEOUT / 1e3}s;
+    `;
+	target.insertAdjacentElement("afterbegin", $box);
+	target.offsetHeight;
+	$ripple.classList.add("i-ripple-active");
+	setTimeout(() => {
+		$box.remove();
+	}, TIMEOUT);
+}
+function createRipple() {
+	const $box = document.createElement("SPAN");
+	const $ripple = document.createElement("SPAN");
+	$box.className = "i-ripple-container";
+	$ripple.className = "i-ripple";
+	$box.append($ripple);
+	return [$box, $ripple];
+}
+//#endregion
+export { useRipple as default };

package/lib/types/js/useTheme/index.d.ts

@@ -1,8 +1,6 @@
-import { ITheme } from './type.js';
-
+import { ITheme } from './type';
 declare const useTheme: (props?: ITheme) => {
     theme: string;
     setTheme: (value: string | ((prev: string) => string)) => void;
 };
-
-export { useTheme as default };
+export default useTheme;

package/lib/types/js/useTheme/index.js

@@ -0,0 +1,27 @@
+import { useLocalStorageState } from "../hooks.js";
+import { useEffect, useState } from "react";
+//#region packages/js/useTheme/index.ts
+const useTheme = (props) => {
+	const { key = "ioca-react-theme", defaultValue = "theme-auto", listenStorageChange } = props ?? {};
+	const [mounted, setMounted] = useState(false);
+	const [theme, setTheme] = useLocalStorageState(key, {
+		defaultValue,
+		listenStorageChange
+	});
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+	useEffect(() => {
+		if (!mounted || !theme) return;
+		const cls = document.documentElement.classList;
+		const prev = Array.from(cls).find((n) => n.startsWith("theme-"));
+		if (prev) cls.replace(prev, theme);
+		else cls.add(theme);
+	}, [theme, mounted]);
+	return {
+		theme: mounted ? theme : defaultValue,
+		setTheme: mounted ? setTheme : () => {}
+	};
+};
+//#endregion
+export { useTheme as default };

package/lib/types/js/useTheme/type.d.ts

@@ -1,7 +1,9 @@
-interface ITheme {
+export interface ITheme {
     listenStorageChange?: boolean;
     defaultValue?: string;
     key?: string;
 }
-
-export type { ITheme };
+export type TSettings = {
+    theme?: string;
+    update?: (key: string | Record<string, any>, value?: any) => void;
+};