@ioca/react 1.4.76 → 1.4.77

package/lib/types/components/tabs/tabs.js

@@ -0,0 +1,269 @@
+import { useIntersectionObserver, useSize } from "../../js/hooks.js";
+import button_default from "../button/index.js";
+import icon_default from "../icon/index.js";
+import helpericon_default from "../utils/helpericon/index.js";
+import popup_default from "../popup/index.js";
+import Item from "./item.js";
+import classNames from "classnames";
+import { Children, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { MoreHorizRound } 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/tabs/tabs.tsx
+const Tabs = ((props) => {
+	const { ref, active, tabs: items, type = "default", prepend, append, children, className, vertical, toggable, navsJustify = "start", bar = true, hideMore, barClass, renderMore = () => /* @__PURE__ */ jsx(button_default, {
+		flat: true,
+		square: true,
+		size: "small",
+		children: /* @__PURE__ */ jsx(icon_default, { icon: /* @__PURE__ */ jsx(MoreHorizRound, {}) })
+	}), onTabChange, ...rest } = props;
+	const navRefs = useRef([]);
+	const barRef = useRef(null);
+	const navsRef = useRef(null);
+	const contentsRef = useRef(/* @__PURE__ */ new Map());
+	const [activeKey, setActiveKey] = useState(active);
+	const [prevActiveKey, setPrevActiveKey] = useState(void 0);
+	const [barStyle, setBarStyle] = useState({});
+	const [cachedTabs, setCachedTabs] = useState([]);
+	const [overflow, setOverflow] = useState(false);
+	const [moreTabs, setMoreTabs] = useState([]);
+	const [tabs, setTabs] = useState([]);
+	const { observe, unobserve } = useIntersectionObserver();
+	const size = useSize(navsRef);
+	useEffect(() => {
+		contentsRef.current.clear();
+		if (!items) {
+			if (!children) {
+				setTabs([]);
+				return;
+			}
+			setTabs(Children.map(children, (node, i) => {
+				const { key, props: nodeProps } = node;
+				const { title, children: tabChildren, content, keepDOM, closable } = nodeProps;
+				const tabKey = String(key ?? i);
+				contentsRef.current.set(tabKey, tabChildren ?? content);
+				return {
+					key: tabKey,
+					title,
+					keepDOM,
+					closable
+				};
+			}) ?? []);
+			return;
+		}
+		setTabs(items.map((item, i) => {
+			if (["string", "number"].includes(typeof item)) return {
+				key: String(item),
+				title: item
+			};
+			const key = String(item.key ?? i);
+			contentsRef.current.set(key, item.content);
+			const { content, ...rest } = item;
+			return {
+				...rest,
+				key
+			};
+		}));
+	}, [children, items]);
+	const add = (tab) => {
+		const tkey = String(tab.key ?? tabs.length);
+		const i = tabs.findIndex((t) => t.key === tkey);
+		if (i > -1) {
+			open(tabs[i].key ?? `${i}`);
+			return;
+		}
+		contentsRef.current.set(tkey, tab.content);
+		const { content, ...rest } = tab;
+		setTabs((ts) => [...ts, {
+			...rest,
+			key: tkey
+		}]);
+		open(tkey);
+	};
+	const close = (key) => {
+		const i = tabs.findIndex((t) => t.key === key);
+		if (i < 0) return;
+		contentsRef.current.delete(key);
+		const nextTabs = [...tabs];
+		nextTabs.splice(i, 1);
+		setTabs(nextTabs);
+		if (activeKey !== key) return;
+		const next = nextTabs[i] || nextTabs[i - 1];
+		open(prevActiveKey ?? next?.key ?? "");
+	};
+	const open = (key) => {
+		if (key === activeKey) {
+			if (!toggable) return;
+			onTabChange?.(void 0, key);
+			setActiveKey(void 0);
+			setBarStyle({
+				height: 0,
+				width: 0
+			});
+			return;
+		}
+		setPrevActiveKey(activeKey);
+		onTabChange?.(key, activeKey);
+		setActiveKey(key);
+	};
+	useEffect(() => {
+		if (!size || hideMore || !observe) return;
+		const { scrollHeight, scrollWidth } = navsRef.current;
+		const { width, height } = size;
+		const nextOverflow = scrollHeight > height || scrollWidth > width;
+		setOverflow(nextOverflow);
+		if (!nextOverflow) return;
+		navRefs.current.map((nav, i) => {
+			if (!nav) return;
+			observe(nav, (tar, visible) => {
+				setTabs((ts) => {
+					if (!ts[i]) return ts;
+					const nextTabs = ts.map((t, idx) => idx === i ? {
+						...t,
+						intersecting: visible
+					} : t);
+					setMoreTabs(nextTabs.filter((tab) => !tab.intersecting));
+					return nextTabs;
+				});
+			});
+		});
+	}, [
+		size,
+		hideMore,
+		tabs.length,
+		observe
+	]);
+	useEffect(() => {
+		if (!bar || type === "pane" || activeKey === void 0) return;
+		const index = tabs.findIndex((tab) => tab.key === activeKey);
+		setTimeout(() => {
+			const nav = navRefs.current[index];
+			if (!nav) return;
+			if (tabs[index]?.keepDOM && activeKey) setCachedTabs((keys) => {
+				if (keys.includes(activeKey)) return keys;
+				return [activeKey, ...keys];
+			});
+			const { offsetHeight, offsetLeft, offsetTop, offsetWidth } = nav;
+			const isLine = type === "line";
+			setBarStyle({
+				height: !vertical && isLine ? ".25em" : offsetHeight,
+				width: vertical && isLine ? ".25em" : offsetWidth,
+				transform: `translate(${offsetLeft}px, ${offsetTop}px)`
+			});
+		}, 16);
+	}, [
+		activeKey,
+		bar,
+		size,
+		tabs,
+		type,
+		vertical
+	]);
+	useEffect(() => {
+		if (active === void 0 || activeKey === active) return;
+		open(active);
+	}, [active]);
+	useEffect(() => {
+		if (hideMore || !unobserve) return;
+		return () => {
+			navRefs.current?.map(unobserve);
+		};
+	}, [
+		tabs.length,
+		hideMore,
+		unobserve
+	]);
+	useEffect(() => {
+		if (!navsRef.current || vertical) return;
+		const handleMouseWheel = (e) => {
+			e.stopPropagation();
+			e.preventDefault();
+			if (vertical) return;
+			navsRef.current?.scrollBy({ left: e.deltaY + e.deltaX });
+		};
+		navsRef.current.addEventListener("wheel", handleMouseWheel, { passive: false });
+		return () => {
+			if (!navsRef.current) return;
+			navsRef.current.removeEventListener("wheel", handleMouseWheel);
+		};
+	}, [navsRef.current]);
+	useImperativeHandle(ref, () => ({
+		open,
+		close,
+		add,
+		navs: navsRef
+	}));
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames("i-tabs", {
+			flex: vertical,
+			[`i-tabs-${type}`]: type !== "default"
+		}, className),
+		...rest,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: classNames("i-tab-navs-container", { "i-tab-navs-vertical": vertical }),
+			children: [
+				prepend,
+				/* @__PURE__ */ jsxs("div", {
+					ref: navsRef,
+					className: classNames("i-tab-navs", `justify-${navsJustify}`),
+					children: [tabs.map((tab, i) => {
+						const { title, key = `${i}`, closable } = tab;
+						return /* @__PURE__ */ jsxs("a", {
+							ref: (ref) => navRefs.current[i] = ref,
+							className: classNames("i-tab-nav", { "i-tab-active": activeKey === key }),
+							onClick: () => open(key),
+							children: [title, closable && /* @__PURE__ */ jsx(helpericon_default, {
+								as: "i",
+								active: true,
+								className: "i-tab-nav-close",
+								onClick: (e) => {
+									e.stopPropagation();
+									close(key);
+								}
+							})]
+						}, key);
+					}), bar && /* @__PURE__ */ jsx("span", {
+						ref: barRef,
+						className: classNames("i-tab-navs-bar", barClass),
+						style: barStyle
+					})]
+				}),
+				!hideMore && overflow && moreTabs.length > 0 && /* @__PURE__ */ jsx(popup_default, {
+					arrow: false,
+					position: vertical ? "right" : "bottom",
+					align: "end",
+					touchable: true,
+					hideDelay: 500,
+					content: /* @__PURE__ */ jsx("div", {
+						className: "i-tabs-morelist pd-4",
+						children: moreTabs.map((tab, i) => {
+							const { key = `${i}`, title } = tab;
+							const isActive = activeKey === key;
+							return /* @__PURE__ */ jsx("a", {
+								className: classNames("i-tab-nav", { "i-tab-active": isActive }),
+								onClick: () => open(key),
+								children: title
+							}, key);
+						})
+					}),
+					children: renderMore(moreTabs)
+				}),
+				append
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "i-tab-contents",
+			children: tabs.map((tab, i) => {
+				const key = tab.key ?? `${i}`;
+				const content = contentsRef.current.get(key);
+				const isActive = activeKey === key;
+				return (isActive || key !== void 0 && cachedTabs.includes(key)) && /* @__PURE__ */ jsx("div", {
+					className: classNames("i-tab-content", { "i-tab-active": isActive }),
+					children: content
+				}, key);
+			})
+		})]
+	});
+});
+Tabs.Item = Item;
+//#endregion
+export { Tabs as default };

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

@@ -1,7 +1,7 @@
-import { ForwardRefExoticComponent, RefObject, ReactNode, Ref, CSSProperties } from 'react';
-import Item from './item.js';
-
-interface ITabItem {
+import { CSSProperties, ForwardRefExoticComponent, ReactNode, Ref, RefObject } from 'react';
+import { default as TabItem } from './item';
+export type TTabKey = string;
+export interface ITabItem {
     key?: string;
     props?: any;
     title?: ReactNode;
@@ -11,7 +11,7 @@ interface ITabItem {
     intersecting?: boolean;
     children?: ReactNode;
 }
-interface ITabs {
+export interface ITabs {
     ref?: RefObject<RefTabs | null>;
     active?: string;
     tabs?: ITabItem[] | string[];
@@ -30,14 +30,12 @@ interface ITabs {
     renderMore?: (moreTabs: ITabItem[]) => ReactNode;
     onTabChange?: (to?: string, from?: string) => void;
 }
-interface RefTabs {
+export interface RefTabs {
     open: (key: string) => void;
     close: (key: string) => void;
     add: (tab: ITabItem, position?: number) => void;
     navs: Ref<HTMLDivElement>;
 }
-interface CompositionTabs extends ForwardRefExoticComponent<ITabs> {
-    Item: typeof Item;
+export interface CompositionTabs extends ForwardRefExoticComponent<ITabs> {
+    Item: typeof TabItem;
 }
-
-export type { CompositionTabs, ITabItem, ITabs, RefTabs };

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

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

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

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

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

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

package/lib/types/components/tag/tag.js

@@ -0,0 +1,29 @@
+import helpericon_default from "../utils/helpericon/index.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./index.css";
+//#region packages/components/tag/tag.tsx
+const Tag = (props) => {
+	const { dot, dotClass, outline, round, size = "normal", hoverShowClose, className, children, onClose, onClick, ...restProps } = props;
+	return /* @__PURE__ */ jsxs("span", {
+		className: classNames("i-tag", {
+			"i-tag-outline": outline,
+			"i-tag-clickable": onClick,
+			[`i-tag-${size}`]: size !== "normal",
+			round
+		}, className),
+		onClick,
+		...restProps,
+		children: [
+			dot && /* @__PURE__ */ jsx("span", { className: classNames("i-tag-dot", dotClass) }),
+			children,
+			onClose && /* @__PURE__ */ jsx(helpericon_default, {
+				active: true,
+				className: classNames("i-tag-close", { "i-tag-hover-close": hoverShowClose }),
+				onClick: onClose
+			})
+		]
+	});
+};
+//#endregion
+export { Tag as default };

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

@@ -1,6 +1,5 @@
 import { HTMLAttributes, MouseEvent } from 'react';
-
-interface ITag extends HTMLAttributes<HTMLSpanElement> {
+export interface ITag extends HTMLAttributes<HTMLSpanElement> {
     dot?: boolean;
     dotClass?: string;
     outline?: boolean;
@@ -10,5 +9,3 @@ interface ITag extends HTMLAttributes<HTMLSpanElement> {
     onClick?: (e: MouseEvent) => void;
     onClose?: (e: MouseEvent) => void;
 }
-
-export type { ITag };

package/lib/types/components/text/highlight.d.ts

@@ -1,6 +1,2 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ITextHighLight } from './type.js';
-
-declare function HighLight(props: ITextHighLight): react_jsx_runtime.JSX.Element;
-
-export { HighLight as default };
+import { ITextHighLight } from './type';
+export default function HighLight(props: ITextHighLight): import("react/jsx-runtime").JSX.Element;

package/lib/types/components/text/highlight.js

@@ -0,0 +1,32 @@
+import Text from "./text.js";
+import { Fragment, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { findAll } from "/Users/iann/codes/ioca-react/node_modules/.pnpm/highlight-words-core@1.2.3/node_modules/highlight-words-core/dist/index.js";
+//#region packages/components/text/highlight.tsx
+function HighLight(props) {
+	const { keyword, text, escape, caseSensitive, renderWord = (word) => /* @__PURE__ */ jsx("mark", { children: word }), ...restProps } = props;
+	const content = useMemo(() => {
+		const source = text;
+		return findAll({
+			searchWords: typeof keyword === "string" ? [keyword] : keyword,
+			textToHighlight: text,
+			caseSensitive,
+			autoEscape: escape
+		}).map((chunk, i) => {
+			const { end, highlight, start } = chunk;
+			const word = source.slice(start, end);
+			return highlight ? /* @__PURE__ */ jsx(Fragment, { children: renderWord(word) }, i) : word;
+		});
+	}, [
+		keyword,
+		text,
+		escape,
+		caseSensitive
+	]);
+	return /* @__PURE__ */ jsx(Text, {
+		...restProps,
+		children: content
+	});
+}
+//#endregion
+export { HighLight as default };

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

@@ -1,5 +1,2 @@
-import _default from './text.js';
-
-
-
-export { _default as default };
+import { default as Text } from './text';
+export default Text;

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

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

package/lib/types/components/text/number.d.ts

@@ -1,6 +1,2 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ITextNumber } from './type.js';
-
-declare function Number(props: ITextNumber): react_jsx_runtime.JSX.Element;
-
-export { Number as default };
+import { ITextNumber } from './type';
+export default function Number(props: ITextNumber): import("react/jsx-runtime").JSX.Element;

package/lib/types/components/text/number.js

@@ -0,0 +1,29 @@
+import { animate, formatNumber } from "../../js/utils.js";
+import Text from "./text.js";
+import { useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/components/text/number.tsx
+function Number(props) {
+	const { count, to, decimal, thousand = ",", duration = 2400, easing, ...restProps } = props;
+	const [n, setN] = useState(count);
+	const number = useMemo(() => {
+		if (n === void 0) return;
+		const z = n.toFixed(decimal);
+		if (!thousand) return z;
+		return formatNumber(n, {
+			precision: decimal,
+			thousand
+		});
+	}, [n, thousand]);
+	useEffect(() => {
+		if (count === void 0 || to === void 0) return;
+		animate(count, to, duration, (v) => setN(count + v), easing);
+	}, [to]);
+	useEffect(() => setN(count), [count]);
+	return /* @__PURE__ */ jsx(Text, {
+		...restProps,
+		children: number
+	});
+}
+//#endregion
+export { Number as default };

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

@@ -1,5 +1,3 @@
-import { CompositionText } from './type.js';
-
+import { CompositionText } from './type';
 declare const _default: CompositionText;
-
-export { _default as default };
+export default _default;

package/lib/types/components/text/text.js

@@ -0,0 +1,36 @@
+import HighLight from "./highlight.js";
+import Number from "./number.js";
+import Number$1 from "./time.js";
+import classNames from "classnames";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import "./index.css";
+//#region packages/components/text/text.tsx
+const Text = (props) => {
+	const { as: Tag = "span", size, weight, decoration, gradient, wave, style, className, children } = props;
+	return /* @__PURE__ */ jsx(Tag, {
+		style: {
+			fontSize: size,
+			fontWeight: weight,
+			textDecoration: decoration,
+			...useMemo(() => {
+				if (!gradient || !Array.isArray(gradient)) return {};
+				return {
+					backgroundImage: `-webkit-linear-gradient(${gradient.join(",")})`,
+					backgroundClip: "text"
+				};
+			}, [gradient]),
+			...style
+		},
+		className: classNames(className, {
+			"i-text-gradient": gradient,
+			"i-text-gradient-wave": wave
+		}),
+		children
+	});
+};
+Text.Number = Number;
+Text.Time = Number$1;
+Text.HighLight = HighLight;
+//#endregion
+export { Text as default };

package/lib/types/components/text/time.d.ts

@@ -1,6 +1,2 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ITextTime } from './type.js';
-
-declare function Number(props: ITextTime): react_jsx_runtime.JSX.Element;
-
-export { Number as default };
+import { ITextTime } from './type';
+export default function Number(props: ITextTime): import("react/jsx-runtime").JSX.Element;

package/lib/types/components/text/time.js

@@ -0,0 +1,21 @@
+import { formatTime } from "../../js/utils.js";
+import Text from "./text.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/components/text/time.tsx
+function Number(props) {
+	const { seconds, zero, units, ...restProps } = props;
+	const text = useMemo(() => {
+		if (seconds === void 0) return "";
+		return formatTime(seconds, {
+			zero,
+			units
+		});
+	}, [seconds]);
+	return /* @__PURE__ */ jsx(Text, {
+		...restProps,
+		children: text
+	});
+}
+//#endregion
+export { Number as default };

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

@@ -1,9 +1,8 @@
-import { FC, JSX, CSSProperties, ReactNode } from 'react';
-import HighLight from './highlight.js';
-import Number from './number.js';
-import Number$1 from './time.js';
-
-interface IText {
+import { CSSProperties, FC, JSX, ReactNode } from 'react';
+import { default as HighLight } from './highlight';
+import { default as Number } from './number';
+import { default as Time } from './time';
+export interface IText {
     as?: keyof JSX.IntrinsicElements;
     size?: string | number;
     decoration?: string;
@@ -14,7 +13,7 @@ interface IText {
     className?: string;
     children?: ReactNode;
 }
-interface ITextNumber extends IText {
+export interface ITextNumber extends IText {
     count?: number;
     to?: number;
     decimal?: number;
@@ -22,22 +21,20 @@ interface ITextNumber extends IText {
     duration?: number;
     easing?: (x: number) => number;
 }
-interface ITextTime extends IText {
+export interface ITextTime extends IText {
     seconds?: number;
     zero?: boolean;
     units?: string[];
 }
-interface ITextHighLight extends IText {
+export interface ITextHighLight extends IText {
     keyword: string | string[];
     text: string;
     caseSensitive?: boolean;
     escape?: boolean;
     renderWord?: (word: string) => ReactNode;
 }
-interface CompositionText extends FC<IText> {
+export interface CompositionText extends FC<IText> {
     Number: typeof Number;
-    Time: typeof Number$1;
+    Time: typeof Time;
     HighLight: typeof HighLight;
 }
-
-export type { CompositionText, IText, ITextHighLight, ITextNumber, ITextTime };

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

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

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

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

package/lib/types/components/tree/item.d.ts

@@ -0,0 +1,11 @@
+import { ITree, PropsTreeItem } from './type';
+interface ITreeList extends Omit<ITree, "nodeProps"> {
+    nodeProps: {
+        key: string;
+        title: string;
+        children: string;
+    };
+}
+export declare function TreeList(props: ITreeList): import("react/jsx-runtime").JSX.Element;
+export declare const TreeItem: (props: PropsTreeItem) => import("react/jsx-runtime").JSX.Element;
+export {};