@ioca/react 1.4.80 → 1.5.1

package/lib/types/components/video/video.js

@@ -1,233 +0,0 @@
-import { useReactive } from "../../js/hooks.js";
-import button_default from "../button/index.js";
-import icon_default from "../icon/index.js";
-import { exitFullScreen, fullScreen } from "../../js/utils.js";
-import text_default from "../text/index.js";
-import progress_default from "../progress/index.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, useImperativeHandle, useRef } from "react";
-import { FullscreenExitRound, FullscreenRound, PauseRound, PlayArrowRound, StopRound, VolumeDownRound, VolumeOffRound } from "@ricons/material";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/components/video/video.tsx
-const Video = (props) => {
-	const { ref, style, hideControls, autoplay, muted, volume = 50, height, width, useOriginControls, timeProgressProps = { barClass: "bg-blue" }, volumeProgressProps = { barClass: "bg-blue" }, className, onFullScreenChange, ...restProps } = props;
-	const state = useReactive({
-		playing: autoplay,
-		volume: muted ? 0 : volume,
-		volumeCache: 0,
-		muted,
-		current: 0,
-		duration: 0,
-		isFullscreen: false,
-		controlHidden: true,
-		draggingProgress: false
-	});
-	const videoRef = useRef(null);
-	const hiddenTO = useRef(null);
-	const timeUpdateListener = (e) => {
-		const tar = e.target;
-		if (tar.paused || state.draggingProgress) return;
-		Object.assign(state, { current: tar.currentTime });
-	};
-	const playChangeListener = (e) => {
-		state.playing = !e.target.paused;
-	};
-	const fsChangeListener = () => {
-		if (typeof document === "undefined") return;
-		const tar = videoRef.current?.parentElement;
-		if (!tar) return;
-		state.isFullscreen = document.fullscreenElement === tar;
-	};
-	const volumeChangeListener = (e) => {
-		const tar = e.target;
-		Object.assign(state, {
-			volume: tar.volume * 100,
-			muted: tar.volume === 0
-		});
-	};
-	const handlePlay = () => {
-		const v = videoRef.current;
-		if (!v) return;
-		v.paused ? v.play() : v.pause();
-	};
-	const handleReady = (e) => {
-		const tar = e.target;
-		Object.assign(state, {
-			duration: tar.duration,
-			current: tar.currentTime
-		});
-		tar.volume = state.volume / 100;
-	};
-	const handleMuted = () => {
-		const v = videoRef.current;
-		if (!v) return;
-		if (v.volume > 0) {
-			state.volumeCache = v.volume;
-			v.volume = 0;
-			return;
-		}
-		v.volume = state.volumeCache === 0 ? .5 : state.volumeCache;
-	};
-	const handleStop = () => {
-		const v = videoRef.current;
-		if (!v) return;
-		v.currentTime = 0;
-		v.pause();
-	};
-	const handleFullscreen = () => {
-		const tar = videoRef.current?.parentElement;
-		if (!tar) return;
-		state.isFullscreen ? exitFullScreen() : fullScreen(tar);
-		onFullScreenChange?.(!state.isFullscreen);
-	};
-	const handleUpdateTime = (t) => {
-		const v = videoRef.current;
-		if (!v) return;
-		v.currentTime = state.duration * t / 100;
-	};
-	const handleUpdateVolume = (t) => {
-		const v = videoRef.current;
-		if (!v) return;
-		v.volume = t / 100;
-	};
-	const showControls = !hideControls && !useOriginControls;
-	const clearHiddenTO = () => {
-		if (!hiddenTO.current) return;
-		clearTimeout(hiddenTO.current);
-		hiddenTO.current = null;
-	};
-	const setHiddenFalse = () => {
-		if (!showControls || !state.controlHidden) return;
-		state.controlHidden = false;
-		clearHiddenTO();
-		hiddenTO.current = setTimeout(() => {
-			state.controlHidden = true;
-		}, 1e3);
-	};
-	const handleDraggingProgress = (dragging) => {
-		state.draggingProgress = dragging;
-	};
-	const handleMouseMove = throttle({ interval: 900 }, setHiddenFalse);
-	useImperativeHandle(ref, () => ({
-		play: () => {
-			const v = videoRef.current;
-			if (!v) return;
-			v.play();
-		},
-		pause: () => {
-			const v = videoRef.current;
-			if (!v) return;
-			v.pause();
-		},
-		stop: handleStop,
-		fullscreen: handleFullscreen,
-		getVideo: () => videoRef.current
-	}));
-	useEffect(() => {
-		if (typeof document === "undefined") return;
-		const v = videoRef.current;
-		if (!v) return;
-		v.addEventListener("timeupdate", timeUpdateListener);
-		v.addEventListener("play", playChangeListener);
-		v.addEventListener("pause", playChangeListener);
-		v.addEventListener("volumechange", volumeChangeListener);
-		document.addEventListener("fullscreenchange", fsChangeListener);
-		return () => {
-			clearHiddenTO();
-			v.removeEventListener("timeupdate", timeUpdateListener);
-			v.removeEventListener("play", playChangeListener);
-			v.removeEventListener("pause", playChangeListener);
-			v.removeEventListener("volumechange", volumeChangeListener);
-			document.removeEventListener("fullscreenchange", fsChangeListener);
-		};
-	}, []);
-	const currentValue = state.current / state.duration * 100;
-	return /* @__PURE__ */ jsxs("div", {
-		className: classNames("i-video", className),
-		style: {
-			height,
-			width,
-			...style
-		},
-		onClick: handlePlay,
-		onDoubleClick: () => handleFullscreen(),
-		onMouseMove: handleMouseMove,
-		children: [/* @__PURE__ */ jsx("video", {
-			ref: videoRef,
-			onCanPlay: handleReady,
-			...restProps,
-			controls: useOriginControls
-		}), showControls && /* @__PURE__ */ jsxs("div", {
-			className: classNames("i-video-controls", { "i-video-controls-hidden": state.controlHidden }),
-			onClick: (e) => e.stopPropagation(),
-			children: [
-				/* @__PURE__ */ jsx(button_default.Toggle, {
-					className: "i-video-btn",
-					flat: true,
-					square: true,
-					after: /* @__PURE__ */ jsx(icon_default, { icon: /* @__PURE__ */ jsx(PauseRound, {}) }),
-					active: state.playing,
-					onClick: handlePlay,
-					children: /* @__PURE__ */ jsx(icon_default, { icon: /* @__PURE__ */ jsx(PlayArrowRound, {}) })
-				}),
-				/* @__PURE__ */ jsx(button_default, {
-					className: "i-video-btn",
-					flat: true,
-					square: true,
-					onClick: handleStop,
-					children: /* @__PURE__ */ jsx(icon_default, { icon: /* @__PURE__ */ jsx(StopRound, {}) })
-				}),
-				/* @__PURE__ */ jsxs("span", {
-					className: "i-video-times font-sm",
-					children: [
-						/* @__PURE__ */ jsx(text_default.Time, { seconds: state.current }),
-						" /",
-						/* @__PURE__ */ jsx(text_default.Time, { seconds: state.duration })
-					]
-				}),
-				/* @__PURE__ */ jsx(progress_default, {
-					...timeProgressProps,
-					value: currentValue,
-					onChange: handleUpdateTime,
-					onDraggingChange: handleDraggingProgress
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "i-video-control-volume",
-					children: [/* @__PURE__ */ jsx(button_default.Toggle, {
-						className: "i-video-btn",
-						flat: true,
-						square: true,
-						active: state.volume <= 0,
-						after: /* @__PURE__ */ jsx(icon_default, {
-							icon: /* @__PURE__ */ jsx(VolumeOffRound, {}),
-							style: { padding: ".125em" }
-						}),
-						onClick: handleMuted,
-						children: /* @__PURE__ */ jsx(icon_default, { icon: /* @__PURE__ */ jsx(VolumeDownRound, {}) })
-					}), /* @__PURE__ */ jsx("div", {
-						className: "i-video-volume",
-						children: /* @__PURE__ */ jsx(progress_default, {
-							style: { height: 100 },
-							vertical: true,
-							...volumeProgressProps,
-							value: state.volume,
-							onChange: handleUpdateVolume
-						})
-					})]
-				}),
-				/* @__PURE__ */ jsx(button_default.Toggle, {
-					className: "i-video-btn",
-					flat: true,
-					square: true,
-					after: /* @__PURE__ */ jsx(icon_default, { icon: /* @__PURE__ */ jsx(FullscreenExitRound, {}) }),
-					active: state.isFullscreen,
-					onClick: () => handleFullscreen(),
-					children: /* @__PURE__ */ jsx(icon_default, { icon: /* @__PURE__ */ jsx(FullscreenRound, {}) })
-				})
-			]
-		})]
-	});
-};
-//#endregion
-export { Video as default };

package/lib/types/index.js

@@ -1,42 +0,0 @@
-import loading_default from "./components/loading/index.js";
-import button_default from "./components/button/index.js";
-import icon_default from "./components/icon/index.js";
-import affix_default from "./components/affix/index.js";
-import badge_default from "./components/badge/index.js";
-import card_default from "./components/card/index.js";
-import checkbox_default from "./components/checkbox/index.js";
-import collapse_default from "./components/collapse/index.js";
-import datagrid_default from "./components/datagrid/index.js";
-import description_default from "./components/description/index.js";
-import drawer_default from "./components/drawer/index.js";
-import list_default from "./components/list/index.js";
-import popup_default from "./components/popup/index.js";
-import dropdown_default from "./components/dropdown/index.js";
-import editor_default from "./components/editor/index.js";
-import flex_default from "./components/flex/index.js";
-import form_default from "./components/form/index.js";
-import text_default from "./components/text/index.js";
-import progress_default from "./components/progress/index.js";
-import video_default from "./components/video/index.js";
-import usePreview from "./js/usePreview/index.js";
-import image_default from "./components/image/index.js";
-import input_default from "./components/input/index.js";
-import message_default from "./components/message/index.js";
-import modal_default from "./components/modal/index.js";
-import pagination_default from "./components/pagination/index.js";
-import tag_default from "./components/tag/index.js";
-import select_default from "./components/select/index.js";
-import ColorPicker from "./components/picker/colors/index.js";
-import Datepicker from "./components/picker/dates/index.js";
-import TimePicker from "./components/picker/time/index.js";
-import popconfirm_default from "./components/popconfirm/index.js";
-import radio_default from "./components/radio/index.js";
-import resizable_default from "./components/resizable/index.js";
-import river_default from "./components/river/index.js";
-import step_default from "./components/step/index.js";
-import swiper_default from "./components/swiper/index.js";
-import tabs_default from "./components/tabs/index.js";
-import tree_default from "./components/tree/index.js";
-import upload_default from "./components/upload/index.js";
-import useTheme from "./js/useTheme/index.js";
-export { affix_default as Affix, badge_default as Badge, button_default as Button, card_default as Card, checkbox_default as Checkbox, collapse_default as Collapse, ColorPicker, datagrid_default as Datagrid, Datepicker as DatePicker, description_default as Description, drawer_default as Drawer, dropdown_default as Dropdown, editor_default as Editor, flex_default as Flex, form_default as Form, icon_default as Icon, image_default as Image, input_default as Input, list_default as List, loading_default as Loading, message_default as Message, modal_default as Modal, pagination_default as Pagination, popconfirm_default as Popconfirm, popup_default as Popup, progress_default as Progress, radio_default as Radio, resizable_default as Resizable, river_default as River, select_default as Select, step_default as Step, swiper_default as Swiper, tabs_default as Tabs, tag_default as Tag, text_default as Text, TimePicker, tree_default as Tree, upload_default as Upload, video_default as Video, usePreview, useTheme };

package/lib/types/js/hooks.js

@@ -1,249 +0,0 @@
-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 };