@ioca/react 1.4.76 → 1.4.77

package/lib/types/components/popup/popup.js

@@ -0,0 +1,423 @@
+import { useMouseUp, useResizeObserver } from "../../js/hooks.js";
+import { getPointPosition, getPosition } from "../../js/utils.js";
+import Content from "./content.js";
+import { debounce } from "/Users/iann/codes/ioca-react/node_modules/.pnpm/radash@12.1.1/node_modules/radash/dist/esm/index.mjs";
+import { Children, cloneElement, isValidElement, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import "./index.css";
+//#region packages/components/popup/popup.tsx
+function Popup(props) {
+	const { visible = false, content, trigger = "hover", gap = 12, offset = 8, position = "top", showDelay = 16, hideDelay = 12, touchable, arrow = true, align = "center", fitSize, disabled, style, className, children, onVisibleChange } = props;
+	const triggerRef = useRef(null);
+	const contentRef = useRef(null);
+	const timerRef = useRef(null);
+	const afterHideTimerRef = useRef(null);
+	const rafRef = useRef(null);
+	const [show, setShow] = useState(false);
+	const showRef = useRef(false);
+	showRef.current = show;
+	const latestRef = useRef({
+		disabled,
+		trigger,
+		touchable,
+		showDelay,
+		hideDelay,
+		position,
+		gap,
+		offset,
+		align,
+		fitSize,
+		onVisibleChange
+	});
+	latestRef.current = {
+		disabled,
+		trigger,
+		touchable,
+		showDelay,
+		hideDelay,
+		position,
+		gap,
+		offset,
+		align,
+		fitSize,
+		onVisibleChange
+	};
+	const phaseRef = useRef("");
+	const lastPosRef = useRef(null);
+	const lastArrowRef = useRef(null);
+	const arrowElRef = useRef(null);
+	const pointRef = useRef(null);
+	const clearTimer = () => {
+		if (!timerRef.current) return;
+		clearTimeout(timerRef.current);
+		timerRef.current = null;
+		phaseRef.current = "";
+	};
+	const clearAllTimers = () => {
+		clearTimer();
+		if (afterHideTimerRef.current) {
+			clearTimeout(afterHideTimerRef.current);
+			afterHideTimerRef.current = null;
+		}
+		if (rafRef.current !== null) {
+			cancelAnimationFrame(rafRef.current);
+			rafRef.current = null;
+		}
+	};
+	const setContentVisible = (visible) => {
+		const el = contentRef.current;
+		if (!el) return;
+		el.style.opacity = visible ? "1" : "0";
+		el.style.transform = visible ? "none" : "translate(0, 2px)";
+	};
+	const ensureBaseStyle = () => {
+		const el = contentRef.current;
+		if (!el) return;
+		const pos = "fixed";
+		if (el.style.position !== pos) el.style.position = pos;
+	};
+	const applyFitSize = () => {
+		const o = latestRef.current;
+		const triggerEl = triggerRef.current;
+		const contentEl = contentRef.current;
+		if (!triggerEl || !contentEl) return;
+		const vertical = ["top", "bottom"].includes(o.position);
+		const key = vertical ? "width" : "height";
+		if (!o.fitSize) {
+			contentEl.style[key] = "";
+			return;
+		}
+		const size = triggerEl[vertical ? "offsetWidth" : "offsetHeight"];
+		contentEl.style[key] = typeof size === "number" ? `${size}px` : "";
+	};
+	const applyArrow = (arrowX, arrowY, arrowPos) => {
+		const contentEl = contentRef.current;
+		if (!contentEl) return;
+		const arrowEl = arrowElRef.current ?? contentEl.querySelector(".i-popup-arrow");
+		arrowElRef.current = arrowEl;
+		if (!arrowEl) return;
+		let left = arrowX ?? 0;
+		let top = arrowY ?? 0;
+		let transform = "";
+		switch (arrowPos) {
+			case "left":
+				left += 2;
+				transform = `translate(-100%, -50%) rotate(180deg)`;
+				break;
+			case "right":
+				left -= 2;
+				transform = `translate(0, -50%)`;
+				break;
+			case "top":
+				top -= 2;
+				transform = `translate(-50%, -50%) rotate(-90deg)`;
+				break;
+			case "bottom":
+				top += 2;
+				transform = `translate(-50%, -50%) rotate(90deg)`;
+				break;
+			default: break;
+		}
+		const prev = lastArrowRef.current;
+		if (prev && prev.left === left && prev.top === top && prev.transform === transform) return;
+		lastArrowRef.current = {
+			left,
+			top,
+			transform
+		};
+		arrowEl.style.left = `${left}px`;
+		arrowEl.style.top = `${top}px`;
+		arrowEl.style.transform = transform;
+	};
+	const applyLeftTop = (left, top) => {
+		const contentEl = contentRef.current;
+		if (!contentEl) return;
+		const prev = lastPosRef.current;
+		if (prev && prev.left === left && prev.top === top) return;
+		lastPosRef.current = {
+			left,
+			top
+		};
+		contentEl.style.left = `${left}px`;
+		contentEl.style.top = `${top}px`;
+	};
+	const computeRelativePosition = () => {
+		const triggerEl = triggerRef.current;
+		const contentEl = contentRef.current;
+		if (!triggerEl || !contentEl) return;
+		const o = latestRef.current;
+		applyFitSize();
+		const [left, top, { arrowX, arrowY, arrowPos }] = getPosition(triggerEl, contentEl, {
+			position: o.position,
+			gap: o.gap,
+			offset: o.offset,
+			align: o.align,
+			refWindow: true
+		});
+		applyLeftTop(left, top);
+		applyArrow(arrowX, arrowY, arrowPos);
+	};
+	const computePointPosition = () => {
+		const contentEl = contentRef.current;
+		if (!contentEl) return;
+		const point = pointRef.current;
+		if (!point) return;
+		const [left, top] = getPointPosition(point, contentEl);
+		applyLeftTop(left, top);
+	};
+	const scheduleComputePosition = () => {
+		if (!showRef.current) return;
+		if (rafRef.current !== null) return;
+		rafRef.current = requestAnimationFrame(() => {
+			rafRef.current = null;
+			if (!showRef.current) return;
+			ensureBaseStyle();
+			if (latestRef.current.trigger === "contextmenu") {
+				computePointPosition();
+				return;
+			}
+			computeRelativePosition();
+		});
+	};
+	const handleShow = () => {
+		const opts = latestRef.current;
+		if (opts.disabled) return;
+		clearAllTimers();
+		if (showRef.current && (opts.trigger !== "hover" || opts.trigger === "hover" && !opts.touchable)) {
+			ensureBaseStyle();
+			computeRelativePosition();
+			setContentVisible(true);
+			return;
+		}
+		phaseRef.current = "showing";
+		if (!showRef.current) {
+			lastPosRef.current = null;
+			lastArrowRef.current = null;
+			arrowElRef.current = null;
+			setShow(true);
+		}
+		timerRef.current = setTimeout(() => {
+			if (phaseRef.current !== "showing") return;
+			rafRef.current = requestAnimationFrame(() => {
+				rafRef.current = null;
+				if (phaseRef.current !== "showing") return;
+				if (!contentRef.current) return;
+				ensureBaseStyle();
+				if (opts.trigger === "contextmenu") computePointPosition();
+				else computeRelativePosition();
+				setContentVisible(true);
+				opts.onVisibleChange?.(true);
+				clearTimer();
+				phaseRef.current = "";
+			});
+		}, opts.showDelay);
+	};
+	const handleHide = () => {
+		if (!showRef.current) return;
+		clearAllTimers();
+		phaseRef.current = "hiding";
+		timerRef.current = setTimeout(() => {
+			if (phaseRef.current !== "hiding") {
+				clearTimer();
+				return;
+			}
+			setContentVisible(false);
+			afterHideTimerRef.current = setTimeout(() => {
+				afterHideTimerRef.current = null;
+				setShow(false);
+				clearAllTimers();
+				latestRef.current.onVisibleChange?.(false);
+				phaseRef.current = "";
+			}, 160);
+		}, latestRef.current.hideDelay);
+	};
+	const handleToggle = (action) => {
+		if (action !== void 0) {
+			action ? handleShow() : handleHide();
+			return;
+		}
+		showRef.current ? handleHide() : handleShow();
+	};
+	const hideRef = useRef(handleHide);
+	const toggleRef = useRef(handleToggle);
+	hideRef.current = handleHide;
+	toggleRef.current = handleToggle;
+	const doHide = useMemo(() => () => hideRef.current(), []);
+	const doToggle = useMemo(() => (action) => toggleRef.current(action), []);
+	const eventMaps = useMemo(() => {
+		return {
+			click: { onClick: () => doToggle(true) },
+			hover: {
+				onMouseEnter: () => doToggle(true),
+				onMouseLeave: () => doToggle(false)
+			},
+			focus: {
+				onFocus: () => doToggle(true),
+				onBlur: () => doToggle(false)
+			},
+			contextmenu: { onContextMenu: (e) => {
+				e.preventDefault();
+				e.stopPropagation();
+				pointRef.current = {
+					pageX: e.pageX,
+					pageY: e.pageY
+				};
+				if (showRef.current) {
+					ensureBaseStyle();
+					computePointPosition();
+					return;
+				}
+				clearAllTimers();
+				phaseRef.current = "showing";
+				lastPosRef.current = null;
+				lastArrowRef.current = null;
+				arrowElRef.current = null;
+				setShow(true);
+				timerRef.current = setTimeout(() => {
+					if (phaseRef.current !== "showing") return;
+					if (!contentRef.current) return;
+					ensureBaseStyle();
+					computePointPosition();
+					setContentVisible(true);
+					clearTimer();
+					latestRef.current.onVisibleChange?.(true);
+					phaseRef.current = "";
+				}, latestRef.current.showDelay);
+			} },
+			none: {}
+		};
+	}, [doToggle]);
+	const contentTouch = useMemo(() => {
+		if (!touchable) return {};
+		const events = {};
+		if (trigger === "hover") {
+			events["onMouseEnter"] = () => {
+				clearTimer();
+			};
+			events["onMouseLeave"] = () => handleToggle(false);
+		}
+		return events;
+	}, [touchable, trigger]);
+	const { observe, unobserve, disconnect } = useResizeObserver();
+	useEffect(() => {
+		if (!observe) return;
+		const triggerEl = triggerRef.current;
+		const contentEl = contentRef.current;
+		if (triggerEl) observe(triggerEl, scheduleComputePosition);
+		if (contentEl) observe(contentEl, scheduleComputePosition);
+		return () => {
+			if (contentEl) unobserve(contentEl);
+			if (triggerEl) unobserve(triggerEl);
+			disconnect();
+		};
+	}, [
+		trigger,
+		observe,
+		unobserve,
+		disconnect,
+		show
+	]);
+	useLayoutEffect(() => {
+		if (!show) return;
+		ensureBaseStyle();
+		if (latestRef.current.trigger === "contextmenu") computePointPosition();
+		else computeRelativePosition();
+	}, [show]);
+	useLayoutEffect(() => {
+		doToggle(visible);
+	}, [visible]);
+	useEffect(() => {
+		return () => {
+			clearAllTimers();
+		};
+	}, []);
+	const mouseUpHandlerRef = useRef(() => {});
+	mouseUpHandlerRef.current = (e) => {
+		if (!showRef.current) return;
+		const triggerEl = triggerRef.current;
+		const contentEl = contentRef.current;
+		if (!triggerEl || !contentEl) return;
+		const tar = e.target;
+		if (triggerEl.contains(tar) || contentEl.contains(tar)) return;
+		doHide();
+	};
+	useMouseUp(useMemo(() => (e) => mouseUpHandlerRef.current(e), []));
+	useEffect(() => {
+		if (!show) return;
+		if (typeof window === "undefined") return;
+		const onScrollOrResize = debounce({ delay: 160 }, () => {
+			scheduleComputePosition();
+		});
+		window.addEventListener("scroll", onScrollOrResize, {
+			passive: true,
+			capture: true
+		});
+		return () => {
+			window.removeEventListener("scroll", onScrollOrResize, true);
+		};
+	}, [show]);
+	const mergeRefs = (...refs) => {
+		return (node) => {
+			for (const ref of refs) {
+				if (!ref) continue;
+				if (typeof ref === "function") ref(node);
+				else ref.current = node;
+			}
+		};
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [(() => {
+		const events = eventMaps[trigger];
+		const items = Children.toArray(children);
+		const canAttachRef = (el) => {
+			if (!isValidElement(el)) return false;
+			const t = el.type;
+			if (typeof t === "string") return true;
+			if (t?.prototype?.isReactComponent) return true;
+			if (t?.$$typeof === Symbol.for("react.forward_ref")) return true;
+			return false;
+		};
+		if (items.length !== 1) return /* @__PURE__ */ jsx("div", {
+			ref: triggerRef,
+			...events,
+			className: "i-popup-trigger",
+			style: { display: "inline-block" },
+			children
+		});
+		const only = items[0];
+		if (!isValidElement(only) || !canAttachRef(only)) return /* @__PURE__ */ jsx("div", {
+			ref: triggerRef,
+			...events,
+			className: "i-popup-trigger",
+			style: { display: "inline-block" },
+			children: only
+		});
+		const { className: childClassName, ...restProps } = only.props;
+		const nextProps = { ...restProps };
+		for (const evt of Object.keys(events)) {
+			const theirs = restProps[evt];
+			const ours = events[evt];
+			nextProps[evt] = typeof theirs === "function" ? (e) => {
+				ours(e);
+				theirs(e);
+			} : ours;
+		}
+		return cloneElement(only, {
+			ref: mergeRefs(only.ref, triggerRef),
+			className: childClassName,
+			...nextProps
+		});
+	})(), show && /* @__PURE__ */ jsx(Content, {
+		ref: contentRef,
+		arrow: arrow && trigger !== "contextmenu",
+		style: {
+			...style,
+			position: "fixed"
+		},
+		className,
+		...contentTouch,
+		trigger: triggerRef.current,
+		children: content
+	})] });
+}
+//#endregion
+export { Popup as default };

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

@@ -1,7 +1,6 @@
-import { ReactNode, CSSProperties } from 'react';
-import { TPosition } from '../../type/index.js';
-
-interface IPopup {
+import { CSSProperties, ReactNode } from 'react';
+import { TPosition } from '../../type';
+export interface IPopup {
     visible?: boolean;
     content?: ReactNode;
     trigger?: "hover" | "click" | "focus" | "none" | "contextmenu";
@@ -20,5 +19,7 @@ interface IPopup {
     className?: string;
     onVisibleChange?: (visible: boolean) => void;
 }
-
-export type { IPopup };
+export interface IPopupContent extends Pick<IPopup, "arrow" | "className" | "style" | "children"> {
+    trigger?: HTMLElement;
+    arrowProps?: Record<string, any>;
+}

package/lib/types/components/progress/circle.d.ts

@@ -0,0 +1,2 @@
+import { IProgress } from './type';
+export default function Circle(props: Pick<IProgress, "value" | "circleSize" | "lineWidth">): import("react/jsx-runtime").JSX.Element;

package/lib/types/components/progress/circle.js

@@ -0,0 +1,42 @@
+import text_default from "../text/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/components/progress/circle.tsx
+function Circle(props) {
+	const { value, circleSize = 40, lineWidth = 8 } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "i-progress-circle",
+		children: [/* @__PURE__ */ jsxs("svg", {
+			width: circleSize,
+			height: circleSize,
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx: circleSize / 2,
+				cy: circleSize / 2,
+				r: circleSize / 2 - lineWidth / 2,
+				fill: "none",
+				stroke: "var(--background-opacity-2)",
+				strokeWidth: lineWidth
+			}), /* @__PURE__ */ jsx("circle", {
+				cx: circleSize / 2,
+				cy: circleSize / 2,
+				r: circleSize / 2 - lineWidth / 2,
+				fill: "none",
+				stroke: "var(--color-main)",
+				strokeWidth: lineWidth,
+				strokeDasharray: 100,
+				pathLength: 100,
+				className: "i-progress-circle-path",
+				strokeLinecap: "round",
+				style: { strokeDashoffset: `calc(100 - ${value})` }
+			})]
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "i-progress-circle-value",
+			children: [/* @__PURE__ */ jsx("span", { children: value }), /* @__PURE__ */ jsx(text_default, {
+				size: ".81em",
+				className: "color-7",
+				children: "%"
+			})]
+		})]
+	});
+}
+//#endregion
+export { Circle as default };

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

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

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

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

package/lib/types/components/progress/line.d.ts

@@ -0,0 +1,9 @@
+import { MouseEvent, RefObject } from 'react';
+import { IProgress } from './type';
+declare const Line: (props: Pick<IProgress, "value" | "vertical" | "lineWidth" | "barClass" | "renderCursor"> & {
+    ref: RefObject<HTMLDivElement | null>;
+    dragging: boolean;
+    onMouseDown: (e: MouseEvent) => void;
+    onTouchStart: (e: any) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Line;

package/lib/types/components/progress/line.js

@@ -0,0 +1,23 @@
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+//#region packages/components/progress/line.tsx
+const Line = (props) => {
+	const { ref, value, lineWidth, vertical, barClass, dragging, renderCursor, onMouseDown, onTouchStart } = props;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: classNames("i-progress", { "i-progress-vertical": vertical }),
+		style: { [vertical ? "width" : "height"]: lineWidth },
+		onMouseDown,
+		onTouchStart,
+		children: /* @__PURE__ */ jsx("div", {
+			className: classNames("i-progress-bar", barClass, { "no-transition": dragging }),
+			style: { [vertical ? "height" : "width"]: `${value}%` },
+			children: renderCursor && /* @__PURE__ */ jsx("a", {
+				className: "i-progress-cursor",
+				children: renderCursor(value ?? 0)
+			})
+		})
+	});
+};
+//#endregion
+export { Line as default };

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

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

package/lib/types/components/progress/progress.js

@@ -0,0 +1,98 @@
+import { useMouseMove, useMouseUp, useReactive } from "../../js/hooks.js";
+import Circle from "./circle.js";
+import Line from "./line.js";
+import classNames from "classnames";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "../../css/input.css";
+import "./index.css";
+//#region packages/components/progress/progress.tsx
+const Progress = (props) => {
+	const { value = 0, lineWidth = 8, circleSize = 40, precision = 0, style, draggable = true, type = "line", barClass, vertical, label, labelInline, className, renderCursor, onChange, onDraggingChange } = props;
+	const ref = useRef(null);
+	const state = useReactive({
+		value,
+		dragging: false,
+		size: 0,
+		start: 0
+	});
+	const pageXY = vertical ? "pageY" : "pageX";
+	const rectTL = vertical ? "top" : "left";
+	const rectWH = vertical ? "height" : "width";
+	const getFixedValue = () => {
+		let value = +state.value.toFixed(precision);
+		value = Math.min(100, value);
+		value = Math.max(0, value);
+		return value;
+	};
+	const handleMouseDown = (e) => {
+		if (!ref.current || !draggable) return;
+		if (e.touches) e = e.touches[0];
+		const rect = ref.current.getBoundingClientRect();
+		const value = (e[pageXY] - rect[rectTL]) * 100 / rect[rectWH];
+		Object.assign(state, {
+			value: vertical ? 100 - value : value,
+			size: rect[rectWH],
+			start: rect[rectTL],
+			dragging: true
+		});
+		onDraggingChange?.(true);
+	};
+	const handleMouseMove = (e) => {
+		if (!state.dragging || !draggable) return;
+		e.preventDefault();
+		if (e.touches) e = e.touches[0];
+		const { start, size } = state;
+		const offset = e[pageXY] - start;
+		if (offset < 0 || offset > size) return;
+		const value = (e[pageXY] - start) * 100 / size;
+		state.value = vertical ? 100 - value : value;
+	};
+	const handleMouseUp = () => {
+		if (!state.dragging || !draggable) return;
+		onChange?.(getFixedValue());
+		state.dragging = false;
+		onDraggingChange?.(false);
+	};
+	useMouseMove(handleMouseMove);
+	useMouseUp(handleMouseUp);
+	useEffect(() => {
+		if (value > 100) {
+			state.value = 100;
+			return;
+		}
+		if (value < 0) {
+			state.value = 0;
+			return;
+		}
+		state.value = value;
+	}, [value]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames("i-input-label", className, { "i-input-inline": labelInline }),
+		style,
+		children: [
+			label && /* @__PURE__ */ jsx("span", {
+				className: "i-input-label-text",
+				children: label
+			}),
+			type === "line" && /* @__PURE__ */ jsx(Line, {
+				ref,
+				vertical,
+				lineWidth,
+				barClass,
+				dragging: state.dragging,
+				value: state.value,
+				renderCursor,
+				onMouseDown: handleMouseDown,
+				onTouchStart: handleMouseDown
+			}),
+			type === "circle" && /* @__PURE__ */ jsx(Circle, {
+				value: state.value,
+				circleSize,
+				lineWidth
+			})
+		]
+	});
+};
+//#endregion
+export { Progress as default };

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

@@ -1,7 +1,6 @@
 import { CSSProperties, ReactNode } from 'react';
-import { BaseInput } from '../../type/index.js';
-
-interface IProgress extends Omit<BaseInput, "value" | "hideClear" | "onChange"> {
+import { BaseInput } from '../../type';
+export interface IProgress extends Omit<BaseInput, "value" | "hideClear" | "onChange"> {
     name?: string;
     value?: number;
     precision?: number;
@@ -19,5 +18,3 @@ interface IProgress extends Omit<BaseInput, "value" | "hideClear" | "onChange">
     onDraggingChange?: (dragging: boolean) => void;
     onChange?: (value: number) => void;
 }
-
-export type { IProgress };

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

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

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

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

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

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