@ioca/react 1.4.79 → 1.4.81

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

@@ -1,422 +0,0 @@
-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";
-//#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/progress/circle.d.ts

@@ -1,2 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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.js

@@ -1,5 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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.js

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

@@ -1,5 +0,0 @@
-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.js

@@ -1,30 +0,0 @@
-import classNames from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/components/radio/item.tsx
-function RadioItem(props) {
-	const { type = "default", name, value, checked, disabled, children, onChange } = props;
-	const isChildrenFn = typeof children === "function";
-	const handleChange = (e) => {
-		onChange?.(value, e);
-	};
-	return /* @__PURE__ */ jsxs("label", {
-		className: classNames("i-radio-item", {
-			disabled,
-			"i-radio-item-custom": isChildrenFn
-		}),
-		children: [/* @__PURE__ */ jsx("input", {
-			type: "radio",
-			name,
-			checked,
-			className: classNames("i-radio-input", `i-radio-${type}`),
-			disabled,
-			hidden: isChildrenFn,
-			onChange: handleChange
-		}), isChildrenFn ? children(!!checked, value) : /* @__PURE__ */ jsx("span", {
-			className: "i-radio-text",
-			children
-		})]
-	});
-}
-//#endregion
-export { RadioItem as default };

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

@@ -1,58 +0,0 @@
-import { formatOption } from "../../js/utils.js";
-import RadioItem from "./item.js";
-import classNames from "classnames";
-import { useEffect, useMemo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/components/radio/radio.tsx
-function Radio(props) {
-	const { label, name, options, value, type = "default", status = "normal", message, optionInline = true, labelInline, disabled, required, className, renderItem, onChange } = props;
-	const [selectedValue, setSelectedValue] = useState(value);
-	const formattedOptions = useMemo(() => formatOption(options), [options]);
-	const handleChange = (value, e) => {
-		setSelectedValue(value);
-		onChange?.(value, e);
-	};
-	useEffect(() => {
-		setSelectedValue(value);
-	}, [value]);
-	return /* @__PURE__ */ jsxs("div", {
-		className: classNames("i-radio i-input-label", {
-			[`i-radio-${status}`]: status !== "normal",
-			"i-input-inline": labelInline
-		}, className),
-		children: [label && /* @__PURE__ */ jsxs("span", {
-			className: "i-input-label-text",
-			children: [
-				required && /* @__PURE__ */ jsx("span", {
-					className: "error",
-					children: "*"
-				}),
-				label,
-				message && /* @__PURE__ */ jsx("p", {
-					className: "i-radio-message",
-					children: message
-				})
-			]
-		}), /* @__PURE__ */ jsx("div", {
-			className: classNames("i-radio-options", {
-				"i-options-block": !optionInline,
-				"i-radio-options-button": type === "button"
-			}),
-			children: formattedOptions.map((option) => {
-				const checked = selectedValue === option.value;
-				return /* @__PURE__ */ jsx(RadioItem, {
-					name,
-					value: option.value,
-					checked,
-					type,
-					disabled: disabled || option.disabled,
-					onChange: handleChange,
-					children: renderItem ?? option.label
-				}, option.value);
-			})
-		})]
-	});
-}
-Radio.Item = RadioItem;
-//#endregion
-export { Radio as default };