@ioca/react 1.4.80 → 1.4.81

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

@@ -1,193 +0,0 @@
-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 "@ricons/material";
-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.js

@@ -1,36 +0,0 @@
-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";
-//#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.js

@@ -1,25 +0,0 @@
-import icon_default from "../../components/icon/index.js";
-import video_default from "../../components/video/index.js";
-import { TFileType } from "./type.js";
-import { FeedOutlined } from "@ricons/material";
-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.js

@@ -1,13 +0,0 @@
-//#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.js

@@ -1,43 +0,0 @@
-//#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.js

@@ -1,27 +0,0 @@
-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/utils.js

@@ -1,267 +0,0 @@
-import "react";
-import { createRoot } from "/Users/iann/codes/ioca-react/node_modules/.pnpm/react-dom@19.2.4_react@19.2.4/node_modules/react-dom/client.js";
-//#region packages/js/utils.ts
-function getPosition($source, $popup, options = {}) {
-	const { refWindow, gap = 0, offset = 0, position = "top", align } = options;
-	if (!$source || !$popup) return [
-		0,
-		0,
-		{
-			arrowX: 0,
-			arrowY: 0,
-			arrowPos: "bottom"
-		}
-	];
-	const rectT = $source.getBoundingClientRect();
-	const rectC = $popup.getBoundingClientRect();
-	let w = window.innerWidth;
-	let h = window.innerHeight;
-	let { left: tl, top: tt, right: tr, bottom: tb, width: tw, height: th } = rectT;
-	const { height: ch, width: cw } = rectC;
-	if (!refWindow) {
-		const rectPa = $source.offsetParent?.getBoundingClientRect();
-		w = rectPa?.width || w;
-		h = rectPa?.height || h;
-		tl = $source.offsetLeft;
-		tt = $source.offsetTop;
-		tr = tl + rectT.width;
-		tb = tt + rectT.height;
-	}
-	let y = 0;
-	let x = 0;
-	let arrowX = 0;
-	let arrowY = 0;
-	let arrowPos = "bottom";
-	switch (position) {
-		case "left":
-		case "right":
-			y = th !== ch ? computePosition({
-				containerSize: h,
-				targetSize: th,
-				targetOffset: tt,
-				contentSize: ch,
-				gap,
-				align
-			}) : tt;
-			arrowY = y < tt ? tt - y + th / 2 : th / 2;
-			const xl = tl - offset - cw;
-			const xr = tr + offset + cw;
-			if (position === "left") {
-				const R = xl < 0 && xr <= w;
-				x = R ? tr + offset : xl;
-				arrowX = R ? 0 : cw;
-				arrowPos = R ? "left" : "right";
-			} else {
-				const R = w > xr || xl < 0;
-				x = R ? tr + offset : xl;
-				arrowX = R ? 0 : cw;
-				arrowPos = R ? "left" : "right";
-			}
-			break;
-		case "top":
-		case "bottom":
-			x = tw !== cw ? computePosition({
-				containerSize: w,
-				targetOffset: tl,
-				targetSize: tw,
-				contentSize: cw,
-				gap,
-				align
-			}) : tl;
-			arrowX = x > tl ? cw / 2 : tl - x + tw / 2;
-			const yt = tt - offset - ch;
-			const yb = tb + offset + ch;
-			if (position === "top") {
-				const T = yt < 0 && yb <= h;
-				y = T ? tb + offset : yt;
-				arrowY = T ? 0 : ch;
-				arrowPos = T ? "top" : "bottom";
-			} else {
-				const B = h > yb || yt < 0;
-				y = B ? tb + offset : yt;
-				arrowY = B ? 0 : ch;
-				arrowPos = B ? "top" : "bottom";
-			}
-			break;
-		default: break;
-	}
-	return [
-		x,
-		y,
-		{
-			arrowX,
-			arrowY,
-			arrowPos
-		}
-	];
-}
-function getPointPosition(e, content) {
-	const { width: w, height: h } = content.getBoundingClientRect();
-	const parent = content.offsetParent;
-	let pw, ph, pl = 0, pt = 0;
-	if (parent) {
-		const { width: ow, height: oh, left: ol, top: ot } = parent.getBoundingClientRect();
-		const st = parent.scrollTop ?? 0;
-		pw = ow;
-		ph = oh;
-		pt = ot - st;
-		pl = ol;
-	} else {
-		pw = window.innerWidth;
-		ph = window.innerHeight;
-	}
-	const x = e.pageX - pl;
-	const y = e.pageY - pt;
-	return [x + w >= pw ? x - w > 0 ? x - w : x : x, y + h >= ph ? y - h > 0 ? y - h : y : y];
-}
-function computePosition({ containerSize, targetSize, targetOffset, contentSize, gap, align = "center" }) {
-	const centerPoint = targetOffset + targetSize / 2;
-	switch (align) {
-		case "start": return targetOffset + contentSize > containerSize ? containerSize - contentSize - gap : targetOffset;
-		case "center":
-			if (targetSize >= contentSize) return centerPoint - contentSize / 2;
-			if (centerPoint + contentSize / 2 + gap > containerSize) return targetOffset + targetSize - contentSize;
-			if (centerPoint - contentSize / 2 - gap < 0) return gap;
-			return centerPoint - contentSize / 2;
-		case "end":
-			const result = targetOffset + targetSize - contentSize;
-			return result > 0 ? result : gap;
-		default: return centerPoint - contentSize / 2;
-	}
-}
-function formatOption(options) {
-	return options.map((option) => ["string", "number"].includes(typeof option) ? {
-		label: option,
-		value: option
-	} : option);
-}
-function animate(from, to, duration = 1e3, callback, easing = (t) => 1 - Math.pow(1 - t, 4)) {
-	const start = performance.now();
-	const diff = to - from;
-	let raf = requestAnimationFrame(loop);
-	function loop() {
-		raf = requestAnimationFrame(loop);
-		let percent = (performance.now() - start) / duration;
-		if (percent >= 1) {
-			percent = 1;
-			cancelAnimationFrame(raf);
-		}
-		const pass = diff * easing(percent);
-		callback?.(pass);
-	}
-}
-function formatNumber(value, options = {}) {
-	const { precision, thousand } = options;
-	const result = value.toFixed(precision);
-	if (!thousand) return result;
-	const points = result.split(".");
-	const integer = points[0].replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, `$&${thousand}`);
-	if (points.length === 1) return integer;
-	return `${integer}.${points[1]}`;
-}
-function renderNode(node, container = document.body) {
-	const div = document.createElement("div");
-	container.append(div);
-	const root = createRoot(div);
-	const sto = setTimeout(() => {
-		root?.render(node);
-	}, 0);
-	return () => {
-		div?.remove();
-		root?.unmount();
-		sto && clearTimeout(sto);
-	};
-}
-function getSuffixByUrl(url) {
-	return url.match(/\.([^\./\?]+)($|\?)/)?.[1];
-}
-function getFileType(suffix, type) {
-	switch (true) {
-		case [
-			"jpg",
-			"jpeg",
-			"png",
-			"webp",
-			"svg",
-			"avif",
-			"heif",
-			"heic",
-			"apng",
-			"bmp",
-			"ico"
-		].includes(suffix) || type?.startsWith("image/"): return "IMAGE";
-		case [
-			"mp4",
-			"avi",
-			"webm",
-			"ogv",
-			"mov",
-			"mkv",
-			"mpd",
-			"m3u8"
-		].includes(suffix) || type?.startsWith("video/"): return "VIDEO";
-		default: return "UNKNOWN";
-	}
-}
-function fullScreen(el) {
-	el.requestFullscreen?.();
-}
-function exitFullScreen() {
-	document.exitFullscreen?.();
-}
-function formatTime(time, options) {
-	const result = [];
-	const { zero = true, units = [
-		"",
-		":",
-		":"
-	] } = options || {};
-	const l = units.length;
-	let i = 0;
-	while (i < l) {
-		if (time <= 0 && i > 1) break;
-		const n = Math.round(time % 60);
-		time = Math.floor(time / 60);
-		result.unshift((zero && n < 10 ? `0${n}` : n) + units[i++]);
-	}
-	return result.join("");
-}
-function getNextSorter(prevSortBy, prevSortType, sortBy) {
-	const types = ["desc", "asc"];
-	if (prevSortBy === sortBy) {
-		const type = types[types.findIndex((t) => t === prevSortType) + 1] || "";
-		return [type === "" ? "" : sortBy, type];
-	}
-	return [sortBy, "desc"];
-}
-function formatBytes(bytes, decimals = 2) {
-	if (!+bytes) return "0 Bytes";
-	const k = 1024;
-	const dm = decimals < 0 ? 0 : decimals;
-	const sizes = [
-		"B",
-		"KB",
-		"MB",
-		"GB",
-		"TB",
-		"PB",
-		"EB",
-		"ZB",
-		"YB"
-	];
-	const i = Math.floor(Math.log(bytes) / Math.log(k));
-	return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
-}
-function clamp(value, min, max) {
-	return value < min ? min : value > max ? max : value;
-}
-const arrayMove = (array, fromIndex, toIndex) => {
-	if (toIndex >= array.length) {
-		let k = toIndex - array.length + 1;
-		while (k--) array.push(void 0);
-	}
-	array.splice(toIndex, 0, array.splice(fromIndex, 1)[0]);
-	return array;
-};
-//#endregion
-export { animate, arrayMove, clamp, exitFullScreen, formatBytes, formatNumber, formatOption, formatTime, fullScreen, getFileType, getNextSorter, getPointPosition, getPosition, getSuffixByUrl, renderNode };