@ioca/react 1.4.76 → 1.4.77

package/lib/types/components/utils/helpericon/helpericon.js

@@ -0,0 +1,21 @@
+import icon_default from "../../icon/index.js";
+import classNames from "classnames";
+import { uid } from "/Users/iann/codes/ioca-react/node_modules/.pnpm/radash@12.1.1/node_modules/radash/dist/esm/index.mjs";
+import { createElement } from "react";
+import { CloseRound } 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 } from "react/jsx-runtime";
+import "./index.css";
+//#region packages/components/utils/helpericon/helpericon.tsx
+const Helpericon = (props) => {
+	const { as = "a", active, className, icon = /* @__PURE__ */ jsx(CloseRound, {}), ...restProps } = props;
+	if (!active) return /* @__PURE__ */ jsx(Fragment$1, {});
+	return createElement(as, {
+		className: classNames("i-helpericon", className),
+		...restProps
+	}, [createElement(icon_default, {
+		key: uid(3),
+		icon
+	})]);
+};
+//#endregion
+export { Helpericon as default };

package/lib/types/components/utils/helpericon/index.d.ts

@@ -0,0 +1,2 @@
+import { default as Helpericon } from './helpericon';
+export default Helpericon;

package/lib/types/components/utils/helpericon/index.js

@@ -0,0 +1,5 @@
+import Helpericon from "./helpericon.js";
+//#region packages/components/utils/helpericon/index.tsx
+var helpericon_default = Helpericon;
+//#endregion
+export { helpericon_default as default };

package/lib/types/components/utils/helpericon/type.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties, MouseEvent, ReactNode } from 'react';
+export interface IHelperIcon {
+    as?: string;
+    active?: boolean;
+    loading?: boolean;
+    icon?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    onClick?: (e: MouseEvent) => void;
+    onMouseUp?: (e: MouseEvent) => void;
+}

package/lib/types/components/video/index.d.ts

@@ -1,5 +1,2 @@
-import Video from './video.js';
-
-
-
-export { Video as default };
+import { default as Video } from './video';
+export default Video;

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

@@ -0,0 +1,5 @@
+import Video from "./video.js";
+//#region packages/components/video/index.tsx
+var video_default = Video;
+//#endregion
+export { video_default as default };

package/lib/types/components/video/type.d.ts

@@ -1,7 +1,6 @@
 import { HTMLAttributes, RefObject } from 'react';
-import { IProgress } from '../progress/type.js';
-
-interface IVideo extends HTMLAttributes<HTMLVideoElement> {
+import { IProgress } from '../progress/type';
+export interface IVideo extends HTMLAttributes<HTMLVideoElement> {
     ref?: RefObject<RefVideo | null>;
     src?: string;
     hideControls?: boolean;
@@ -16,12 +15,10 @@ interface IVideo extends HTMLAttributes<HTMLVideoElement> {
     volumeProgressProps?: IProgress;
     onFullScreenChange?: (fullscreen: boolean) => void;
 }
-interface RefVideo {
+export interface RefVideo {
     play: () => void;
     pause: () => void;
     stop: () => void;
     fullscreen: (full?: boolean) => void;
     getVideo: () => HTMLVideoElement | null;
 }
-
-export type { IVideo, RefVideo };

package/lib/types/components/video/video.d.ts

@@ -1,6 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { IVideo } from './type.js';
-
-declare const Video: (props: IVideo) => react_jsx_runtime.JSX.Element;
-
-export { Video as default };
+import { IVideo } from './type';
+declare const Video: (props: IVideo) => import("react/jsx-runtime").JSX.Element;
+export default Video;

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

@@ -0,0 +1,234 @@
+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 "/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";
+import "./index.css";
+//#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.d.ts

@@ -1,41 +1,40 @@
-export { default as Affix } from './components/affix/affix.js';
-export { default as Badge } from './components/badge/badge.js';
-export { default as Button } from './components/button/button.js';
-export { default as Card } from './components/card/card.js';
-export { default as Checkbox } from './components/checkbox/checkbox.js';
-export { default as Collapse } from './components/collapse/collapse.js';
-export { default as Datagrid } from './components/datagrid/datagrid.js';
-export { default as Description } from './components/description/description.js';
-export { default as Drawer } from './components/drawer/drawer.js';
-export { default as Dropdown } from './components/dropdown/dropdown.js';
-export { default as Editor } from './components/editor/editor.js';
-export { default as Flex } from './components/flex/flex.js';
-export { default as Form } from './components/form/form.js';
-export { default as Icon } from './components/icon/icon.js';
-export { default as Image } from './components/image/image.js';
-export { default as Input } from './components/input/input.js';
-export { default as List } from './components/list/list.js';
-export { default as Loading } from './components/loading/loading.js';
-export { default as Message } from './components/message/message.js';
-export { default as Modal } from './components/modal/modal.js';
-export { default as Pagination } from './components/pagination/pagination.js';
-export { default as ColorPicker } from './components/picker/colors/index.js';
-export { default as TimePicker } from './components/picker/time/index.js';
-export { default as DatePicker } from './components/picker/dates/index.js';
-export { default as Popconfirm } from './components/popconfirm/popconfirm.js';
-export { default as Popup } from './components/popup/popup.js';
-export { default as Progress } from './components/progress/progress.js';
-export { default as Radio } from './components/radio/radio.js';
-export { default as Resizable } from './components/resizable/resizable.js';
-export { default as River } from './components/river/river.js';
-export { default as Select } from './components/select/select.js';
-export { default as Step } from './components/step/step.js';
-export { default as Swiper } from './components/swiper/swiper.js';
-export { default as Tabs } from './components/tabs/tabs.js';
-export { default as Tag } from './components/tag/tag.js';
-export { default as Text } from './components/text/text.js';
-export { default as Tree } from './components/tree/tree.js';
-export { default as Upload } from './components/upload/upload.js';
-export { default as Video } from './components/video/video.js';
-export { default as usePreview } from './js/usePreview/index.js';
-export { default as useTheme } from './js/useTheme/index.js';
+import { default as Affix } from './components/affix';
+import { default as Badge } from './components/badge';
+import { default as Button } from './components/button';
+import { default as Card } from './components/card';
+import { default as Checkbox } from './components/checkbox';
+import { default as Collapse } from './components/collapse';
+import { default as Datagrid } from './components/datagrid';
+import { default as Description } from './components/description';
+import { default as Drawer } from './components/drawer';
+import { default as Dropdown } from './components/dropdown';
+import { default as Editor } from './components/editor';
+import { default as Flex } from './components/flex';
+import { default as Form } from './components/form';
+import { default as Icon } from './components/icon';
+import { default as Image } from './components/image';
+import { default as Input } from './components/input';
+import { default as List } from './components/list';
+import { default as Loading } from './components/loading';
+import { default as Message } from './components/message';
+import { default as Modal } from './components/modal';
+import { default as Pagination } from './components/pagination';
+import { ColorPicker, DatePicker, TimePicker } from './components/picker';
+import { default as Popconfirm } from './components/popconfirm';
+import { default as Popup } from './components/popup';
+import { default as Progress } from './components/progress';
+import { default as Radio } from './components/radio';
+import { default as Resizable } from './components/resizable';
+import { default as River } from './components/river';
+import { default as Select } from './components/select';
+import { default as Step } from './components/step';
+import { default as Swiper } from './components/swiper';
+import { default as Tabs } from './components/tabs';
+import { default as Tag } from './components/tag';
+import { default as Text } from './components/text';
+import { default as Tree } from './components/tree';
+import { default as Upload } from './components/upload';
+import { default as Video } from './components/video';
+import { default as usePreview } from './js/usePreview';
+import { default as useTheme } from './js/useTheme';
+export { Affix, Badge, Button, Card, Checkbox, Collapse, ColorPicker, Datagrid, DatePicker, Description, Drawer, Dropdown, Editor, Flex, Form, Icon, Image, Input, List, Loading, Message, Modal, Pagination, Popconfirm, Popup, Progress, Radio, Resizable, River, Select, Step, Swiper, Tabs, Tag, Text, TimePicker, Tree, Upload, usePreview, useTheme, Video, };

package/lib/types/index.js

@@ -0,0 +1,43 @@
+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";
+import "./css/index.scss";
+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.d.ts

@@ -0,0 +1,36 @@
+import { DependencyList } from 'react';
+type TMouseEvent = (e: MouseEvent) => void;
+type TKeyboardEvent = (e: KeyboardEvent) => void;
+type TEventOption = {
+    disabled?: boolean;
+};
+export declare function useMouseMove(listener: TMouseEvent, options?: TEventOption): void;
+export declare function useMouseUp(listener: TMouseEvent, options?: TEventOption): void;
+export declare function useKeydown(listener: TKeyboardEvent, options?: TEventOption): void;
+export declare function useCreation<T>(factory: () => T, deps: DependencyList): T;
+export declare function useReactive<T extends object>(initialState: T): T;
+type TSetState<T> = (value: T | undefined | ((prev: T | undefined) => T)) => void;
+type TLocalStorageOptions<T> = {
+    defaultValue?: T | (() => T);
+    listenStorageChange?: boolean;
+};
+export declare function useLocalStorageState<T>(key: string, options?: TLocalStorageOptions<T>): [T | undefined, TSetState<T>];
+type TResponsiveConfig = Record<string, number>;
+export declare function configResponsive(config: TResponsiveConfig): void;
+export declare function useResponsive(): Record<string, boolean>;
+type TSize = {
+    width: number;
+    height: number;
+};
+export declare function useSize(target: any): TSize | undefined;
+export declare function useIntersectionObserver(configs?: IntersectionObserverInit): {
+    observe: any;
+    unobserve: any;
+    disconnect: any;
+};
+export declare function useResizeObserver(): {
+    observe: any;
+    unobserve: any;
+    disconnect: any;
+};
+export {};