@ioca/react 1.4.80 → 1.4.81

package/lib/types/components/resizable/resizable.js

@@ -1,77 +0,0 @@
-import { useMouseMove, useMouseUp, useReactive } from "../../js/hooks.js";
-import classNames from "classnames";
-import { useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/components/resizable/resizable.tsx
-const Resizable = (props) => {
-	const { other, children, vertical, height, size = "auto", minSize = 0, maxSize = "100%", style, line, className, asPercent, onResize, onResizeComplete } = props;
-	const state = useReactive({
-		size,
-		resizing: false,
-		start: 0,
-		total: 0
-	});
-	const ref = useRef(null);
-	const handleMouseDown = () => {
-		const rect = ref.current?.getBoundingClientRect();
-		if (!rect) return;
-		state.resizing = true;
-		if (vertical) {
-			state.total = rect.height;
-			state.start = rect.top;
-			return;
-		}
-		state.total = rect.width;
-		state.start = rect.left;
-	};
-	const handleMouseMove = (e) => {
-		if (!state.resizing) return;
-		e.preventDefault();
-		if (e.touches) e = e.touches[0];
-		const offset = e[vertical ? "pageY" : "pageX"] - state.start;
-		state.size = asPercent ? `${offset / state.total * 100}%` : offset;
-		onResize?.(state.size);
-	};
-	const handleMouseUp = () => {
-		if (!state.resizing) return;
-		state.resizing = false;
-		onResizeComplete?.(state.size);
-	};
-	useMouseUp(handleMouseUp);
-	useMouseMove(handleMouseMove);
-	return /* @__PURE__ */ jsxs("div", {
-		ref,
-		className: classNames("i-resizable", className, { [`i-resizable-vertical`]: vertical }),
-		style: {
-			...style,
-			height
-		},
-		children: [
-			/* @__PURE__ */ jsx("div", {
-				className: "i-resizable-a",
-				style: {
-					[vertical ? "height" : "width"]: state.size,
-					[vertical ? "minHeight" : "minWidth"]: minSize,
-					[vertical ? "maxHeight" : "maxWidth"]: maxSize
-				},
-				children: other
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: classNames("i-resizable-line", { [`i-resizable-resizing`]: state.resizing }),
-				onMouseDown: handleMouseDown,
-				onTouchStart: handleMouseDown,
-				onContextMenu: (e) => e.preventDefault(),
-				children: /* @__PURE__ */ jsx("div", {
-					className: "i-resizable-line-node",
-					children: line
-				})
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "i-resizable-b",
-				children
-			})
-		]
-	});
-};
-//#endregion
-export { Resizable as default };

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

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

package/lib/types/components/river/river.js

@@ -1,112 +0,0 @@
-import { useReactive } from "../../js/hooks.js";
-import classNames from "classnames";
-import { Children, useLayoutEffect, useMemo, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/components/river/river.tsx
-const River = (props) => {
-	const { children, className, speed = 1, pauseOnHover, ...restProps } = props;
-	const trackRef = useRef(null);
-	const state = useReactive({
-		initialized: false,
-		offset: 0,
-		queue: [],
-		paddingLeft: 0,
-		pause: false
-	});
-	const rafRef = useRef(null);
-	const sizeRef = useRef([]);
-	const [items, length] = useMemo(() => {
-		const nodes = Children.toArray(children);
-		return [nodes, nodes.length];
-	}, [children]);
-	const animate = () => {
-		if (!trackRef.current) return;
-		let next = state.offset - speed;
-		const d = Math.abs(next);
-		const [head, ...restQueue] = state.queue;
-		const size = sizeRef.current.at(head % length) ?? 0;
-		if (d > size) {
-			const tail = state.queue.at(-1);
-			state.queue = [...restQueue, tail + 1];
-			next += size;
-		}
-		state.offset = next;
-		if (!state.pause) rafRef.current = requestAnimationFrame(animate);
-	};
-	const cancelRaf = () => {
-		if (!rafRef.current) return;
-		cancelAnimationFrame(rafRef.current);
-		rafRef.current = null;
-	};
-	const handleMouseOver = () => {
-		if (!pauseOnHover) return;
-		state.pause = true;
-		cancelRaf();
-	};
-	const handleMouseLeave = () => {
-		if (!pauseOnHover) return;
-		state.pause = false;
-		rafRef.current = requestAnimationFrame(animate);
-	};
-	useLayoutEffect(() => {
-		if (!trackRef.current) return;
-		const parentWidth = trackRef.current.offsetParent.offsetWidth;
-		const nodes = Array.from(trackRef.current.childNodes);
-		const length = nodes.length;
-		if (length < 2) return;
-		let contentWidth = trackRef.current.scrollWidth;
-		let count = 0;
-		const tails = [];
-		const sizes = nodes.map((node) => {
-			return node.offsetWidth;
-		});
-		sizeRef.current = sizes;
-		while (contentWidth < parentWidth) {
-			const w = sizes.at(count % length) ?? 0;
-			tails.push(length + count);
-			contentWidth += w;
-			count += 1;
-		}
-		state.offset = -1 * sizes.at(-1);
-		state.queue = [
-			-1,
-			...sizes.map((_, i) => i),
-			...tails
-		];
-		animate();
-		state.initialized = true;
-		return () => {
-			state.queue = [];
-			state.initialized = false;
-			state.offset = 0;
-			cancelRaf();
-		};
-	}, [children]);
-	return /* @__PURE__ */ jsx("div", {
-		...restProps,
-		className: classNames("i-river", { "i-river-initialized": state.initialized }, className),
-		children: /* @__PURE__ */ jsxs("div", {
-			ref: trackRef,
-			className: "i-river-track",
-			style: {
-				transform: `translate3d(${state.offset}px, 0, 0)`,
-				paddingLeft: state.paddingLeft
-			},
-			onMouseOver: handleMouseOver,
-			onMouseLeave: handleMouseLeave,
-			children: [!state.initialized && Children.map(children, (item, i) => {
-				return /* @__PURE__ */ jsx("div", {
-					className: "i-river-item",
-					children: item
-				}, i);
-			}), state.initialized && state.queue.map((index) => {
-				return /* @__PURE__ */ jsx("div", {
-					className: "i-river-item",
-					children: items.at(index % items.length)
-				}, index);
-			})]
-		})
-	});
-};
-//#endregion
-export { River as default };

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

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

package/lib/types/components/select/options.js

@@ -1,71 +0,0 @@
-import icon_default from "../icon/index.js";
-import Empty from "../utils/empty/index.js";
-import list_default from "../list/index.js";
-import tag_default from "../tag/index.js";
-import classNames from "classnames";
-import { CheckRound, SearchRound } from "@ricons/material";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/components/select/options.tsx
-const Options = (props) => {
-	const { value: val, options, filter, filterPlaceholder, multiple, empty = /* @__PURE__ */ jsx(Empty, {}), onSelect, onFilter } = props;
-	return /* @__PURE__ */ jsxs("div", {
-		className: classNames("i-select-options", { "i-select-options-multiple": multiple }),
-		children: [
-			filter && multiple && /* @__PURE__ */ jsxs("div", {
-				className: "i-select-filter",
-				children: [/* @__PURE__ */ jsx(icon_default, {
-					icon: /* @__PURE__ */ jsx(SearchRound, {}),
-					className: "color-8 ml-8 my-auto",
-					size: "1.2em"
-				}), /* @__PURE__ */ jsx("input", {
-					type: "text",
-					className: "i-input",
-					placeholder: filterPlaceholder,
-					onChange: onFilter
-				})]
-			}),
-			options.length === 0 && empty,
-			options.map((option, i) => {
-				const { label, value, disabled } = option;
-				const isActive = multiple ? val?.includes(value) : val === value;
-				return /* @__PURE__ */ jsxs(list_default.Item, {
-					active: isActive,
-					type: "option",
-					onClick: () => onSelect?.(value, option),
-					disabled,
-					children: [multiple && /* @__PURE__ */ jsx(icon_default, {
-						icon: /* @__PURE__ */ jsx(CheckRound, {}),
-						className: "i-select-option-check",
-						size: "1em"
-					}), label]
-				}, value || i);
-			})
-		]
-	});
-};
-const activeOptions = (options = [], value = [], max = 3) => {
-	const total = options.flatMap((opt) => value.includes(opt.value) ? [opt] : []);
-	if (max >= total.length) return total;
-	const rest = total.length - max;
-	const after = total.slice(0, max);
-	after.push(rest);
-	return after;
-};
-const displayValue = (config) => {
-	const { options, value, maxDisplay, multiple, onSelect } = config;
-	if (multiple) return activeOptions(options, value, maxDisplay).map((opt, i) => {
-		if (typeof opt === "number") return /* @__PURE__ */ jsxs(tag_default, { children: ["+", opt] }, i);
-		const { label, value } = opt;
-		return /* @__PURE__ */ jsx(tag_default, {
-			hoverShowClose: true,
-			onClose: (e) => {
-				e?.stopPropagation();
-				onSelect?.(value, opt);
-			},
-			children: label
-		}, value);
-	});
-	return options.find((opt) => opt.value === value)?.label;
-};
-//#endregion
-export { Options, displayValue };

package/lib/types/components/select/select.js

@@ -1,151 +0,0 @@
-import { formatOption } from "../../js/utils.js";
-import helpericon_default from "../utils/helpericon/index.js";
-import popup_default from "../popup/index.js";
-import { Options, displayValue } from "./options.js";
-import classNames from "classnames";
-import { debounce } from "/Users/iann/codes/ioca-react/node_modules/.pnpm/radash@12.1.1/node_modules/radash/dist/esm/index.mjs";
-import { useEffect, useMemo, useState } from "react";
-import { UnfoldMoreRound } from "@ricons/material";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/components/select/select.tsx
-const Select = (props) => {
-	const { ref, type = "text", name, label, value = "", placeholder, options = [], multiple, prepend, append, labelInline, style, className, message, status = "normal", hideClear, hideArrow, maxDisplay, border, filter, tip, filterPlaceholder = "...", popupProps, onSelect, onChange, ...restProps } = props;
-	const [filterValue, setFilterValue] = useState("");
-	const [selectedValue, setSelectedValue] = useState(value);
-	const [active, setActive] = useState(false);
-	const formattedOptions = useMemo(() => formatOption(options), [options]);
-	const filterOptions = useMemo(() => {
-		const fv = filterValue;
-		if (!fv || !filter) return formattedOptions;
-		const filterFn = typeof filter === "function" ? filter : (opt) => opt.value.includes(fv) || opt.label.includes(fv);
-		return formattedOptions.filter(filterFn);
-	}, [
-		formattedOptions,
-		filter,
-		filterValue
-	]);
-	const changeValue = (v) => {
-		setSelectedValue(v);
-		onChange?.(v);
-	};
-	const displayLabel = useMemo(() => {
-		if (multiple) return "";
-		const option = formattedOptions.find((opt) => opt.value === selectedValue);
-		return option ? option.label : selectedValue;
-	}, [selectedValue, formattedOptions]);
-	const handleSelect = (value, option) => {
-		onSelect?.(value, option);
-		if (multiple) {
-			const values = [...selectedValue];
-			const i = values.findIndex((v) => v === value);
-			i > -1 ? values.splice(i, 1) : values.push(value);
-			changeValue(values);
-			return;
-		}
-		setActive(false);
-		changeValue(value);
-	};
-	const handleVisibleChange = (visible) => {
-		setActive(visible);
-		if (!filter) return;
-		setFilterValue("");
-	};
-	const handleHelperClick = (e) => {
-		e.stopPropagation();
-		setActive(true);
-		if (!active) return;
-		changeValue(multiple ? [] : "");
-	};
-	const handleFilterChange = debounce({ delay: 400 }, (e) => {
-		const v = e.target.value;
-		setFilterValue(v);
-	});
-	const handleInputChange = (e) => {
-		setFilterValue(e.target.value);
-	};
-	useEffect(() => {
-		setSelectedValue(value);
-	}, [value]);
-	const hasValue = multiple ? selectedValue.length > 0 : !!selectedValue;
-	const clearable = !hideClear && active && hasValue;
-	const text = message ?? tip;
-	return /* @__PURE__ */ jsxs("label", {
-		className: classNames("i-input-label", className, { "i-input-inline": labelInline }),
-		style,
-		children: [
-			label && /* @__PURE__ */ jsx("span", {
-				className: "i-input-label-text",
-				children: label
-			}),
-			/* @__PURE__ */ jsx(popup_default, {
-				position: "bottom",
-				arrow: false,
-				fitSize: true,
-				offset: 0,
-				...popupProps,
-				visible: active,
-				trigger: "none",
-				onVisibleChange: handleVisibleChange,
-				content: /* @__PURE__ */ jsx(Options, {
-					options: filterOptions,
-					value: selectedValue,
-					multiple,
-					filter: !!filter,
-					filterPlaceholder,
-					onSelect: handleSelect,
-					onFilter: handleFilterChange
-				}),
-				children: /* @__PURE__ */ jsxs("div", {
-					className: classNames("i-input-item", {
-						[`i-input-${status}`]: status !== "normal",
-						"i-input-borderless": !border,
-						"i-input-focus": active
-					}),
-					onClick: () => setActive(true),
-					children: [
-						prepend,
-						/* @__PURE__ */ jsx("input", {
-							ref,
-							type: "hidden",
-							value: selectedValue,
-							...restProps
-						}),
-						multiple ? hasValue ? /* @__PURE__ */ jsx("div", {
-							className: classNames("i-input i-select", { "i-select-multiple": multiple }),
-							children: displayValue({
-								options: formattedOptions,
-								value: selectedValue,
-								multiple,
-								maxDisplay,
-								onSelect: handleSelect
-							})
-						}) : /* @__PURE__ */ jsx("input", {
-							className: "i-input i-select",
-							placeholder,
-							readOnly: true
-						}) : null,
-						!multiple && /* @__PURE__ */ jsx("input", {
-							value: active ? filterValue : displayLabel,
-							className: "i-input i-select",
-							placeholder: displayLabel || placeholder,
-							onChange: handleInputChange,
-							readOnly: !filter
-						}),
-						/* @__PURE__ */ jsx(helpericon_default, {
-							active: !hideArrow,
-							icon: clearable ? void 0 : /* @__PURE__ */ jsx(UnfoldMoreRound, {}),
-							onClick: handleHelperClick
-						}),
-						append
-					]
-				})
-			}),
-			text && /* @__PURE__ */ jsx("span", {
-				className: "i-input-message",
-				children: text
-			})
-		]
-	});
-};
-//#endregion
-export { Select as default };

package/lib/types/components/step/divider.js

@@ -1,7 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-//#region packages/components/step/divider.tsx
-function Divider() {
-	return /* @__PURE__ */ jsx("i", { className: "i-step-divider" });
-}
-//#endregion
-export { Divider as default };

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

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

package/lib/types/components/step/item.js

@@ -1,56 +0,0 @@
-import Divider from "./divider.js";
-import classNames from "classnames";
-import { CheckRound } from "@ricons/material";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region packages/components/step/item.tsx
-const STATUS = [
-	"finished",
-	"active",
-	"pending"
-];
-function defaultRenderIcon(i, status) {
-	return /* @__PURE__ */ jsx("span", {
-		className: "i-step-item-index",
-		children: status === "finished" ? /* @__PURE__ */ jsx(CheckRound, { style: {
-			width: "1em",
-			height: "1.5em"
-		} }) : i + 1
-	});
-}
-function Item(props) {
-	const { index = 0, active = 0, renderIcon = defaultRenderIcon, title, vertical, line = /* @__PURE__ */ jsx(Divider, {}), asList, style, className, children, onClick } = props;
-	const status = STATUS[index === active ? 1 : index < active ? 0 : 2];
-	const handleClick = () => {
-		onClick?.(index);
-	};
-	return /* @__PURE__ */ jsx("div", {
-		style,
-		className: classNames("i-step-item", { [`i-step-item-${status}`]: !asList }, className),
-		onClick: handleClick,
-		children: vertical ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
-			className: "i-step-item-left",
-			children: [renderIcon?.(index, status), line]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "i-step-item-right",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "i-step-item-title",
-				children: title
-			}), children && /* @__PURE__ */ jsx("div", {
-				className: "i-step-item-content",
-				children
-			})]
-		})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
-			className: "i-step-item-title",
-			children: [
-				renderIcon?.(index, status),
-				/* @__PURE__ */ jsx("span", { children: title }),
-				line
-			]
-		}), children && /* @__PURE__ */ jsx("div", {
-			className: "i-step-item-content",
-			children
-		})] })
-	});
-}
-//#endregion
-export { Item as default };

package/lib/types/components/step/step.js

@@ -1,38 +0,0 @@
-import Item from "./item.js";
-import classNames from "classnames";
-import { Children, useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region packages/components/step/step.tsx
-const Step = (props) => {
-	const { active = 0, vertical, renderIcon, line, style, asList, className, children, onClick } = props;
-	const steps = useMemo(() => {
-		const nodes = [];
-		let index = 0;
-		Children.map(children, (el) => {
-			if (!el || el.type !== Item) return;
-			const { props: elProps } = el;
-			nodes.push({
-				...el,
-				props: {
-					renderIcon,
-					line,
-					onClick,
-					...elProps,
-					vertical,
-					active,
-					asList,
-					index: index++
-				}
-			});
-		});
-		return nodes;
-	}, [active, children]);
-	return /* @__PURE__ */ jsx("div", {
-		className: classNames("i-step", { "i-step-vertical": vertical }, className),
-		style,
-		children: steps
-	});
-};
-Step.Item = Item;
-//#endregion
-export { Step as default };

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

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

package/lib/types/components/swiper/item.js

@@ -1,35 +0,0 @@
-import classNames from "classnames";
-import { useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region packages/components/swiper/item.tsx
-function Item(props) {
-	const { index = 0, itemIndex = 0, active, type, transition, gap = 0, itemHeight, vertical, style, className, children, onItemClick } = props;
-	const selfStyle = useMemo(() => {
-		if (type === "normal") return {
-			[vertical ? "paddingBlock" : "paddingInline"]: gap / 2,
-			height: itemHeight
-		};
-		return {
-			transform: `translate(-${index * 100}%, 0)`,
-			transition
-		};
-	}, [
-		index,
-		gap,
-		itemHeight,
-		vertical,
-		type
-	]);
-	return /* @__PURE__ */ jsx("div", {
-		style: {
-			...style,
-			...selfStyle
-		},
-		className: classNames("i-swiper-item", className, { "i-swiper-active": active }),
-		"data-index": itemIndex,
-		onClick: (e) => onItemClick?.(itemIndex, e),
-		children
-	});
-}
-//#endregion
-export { Item as default };