@ioca/react 1.4.76 → 1.4.77

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

@@ -0,0 +1,30 @@
+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.d.ts

@@ -1,10 +1,7 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import RadioItem from './item.js';
-import { IRadio } from './type.js';
-
-declare function Radio(props: IRadio): react_jsx_runtime.JSX.Element;
+import { default as RadioItem } from './item';
+import { IRadio } from './type';
+declare function Radio(props: IRadio): import("react/jsx-runtime").JSX.Element;
 declare namespace Radio {
     var Item: typeof RadioItem;
 }
-
-export { Radio as default };
+export default Radio;

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

@@ -0,0 +1,60 @@
+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";
+import "../../css/input.css";
+import "./index.css";
+//#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 };

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

@@ -1,13 +1,12 @@
-import { InputHTMLAttributes, ReactNode, ChangeEvent } from 'react';
-import { TOption, TStatus } from '../../type/index.js';
-
+import { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';
+import { TOption, TStatus } from '../../type';
 type TRenderRadioItem = (checked: boolean, value: any) => ReactNode;
-interface IRadioItem extends Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "onChange"> {
+export interface IRadioItem extends Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "onChange"> {
     type?: "default" | "button" | "custom";
     children?: ReactNode | TRenderRadioItem;
     onChange?: (value: any, e: ChangeEvent) => void;
 }
-interface IRadio extends IRadioItem {
+export interface IRadio extends IRadioItem {
     label?: ReactNode;
     options: TOption[] | (number | string)[];
     optionInline?: boolean;
@@ -16,5 +15,4 @@ interface IRadio extends IRadioItem {
     message?: string;
     renderItem?: TRenderRadioItem;
 }
-
-export type { IRadio, IRadioItem };
+export {};

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

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

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

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

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

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

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

@@ -0,0 +1,78 @@
+import { useMouseMove, useMouseUp, useReactive } from "../../js/hooks.js";
+import classNames from "classnames";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./index.css";
+//#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/resizable/type.d.ts

@@ -1,6 +1,5 @@
-import { ReactNode, CSSProperties } from 'react';
-
-interface IResizable {
+import { CSSProperties, ReactNode } from 'react';
+export interface IResizable {
     other?: ReactNode;
     children?: ReactNode;
     style?: CSSProperties;
@@ -15,5 +14,3 @@ interface IResizable {
     onResize?: (size: string | number) => void;
     onResizeComplete?: (size: string | number) => void;
 }
-
-export type { IResizable };

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

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

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

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

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

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

@@ -0,0 +1,113 @@
+import { useReactive } from "../../js/hooks.js";
+import classNames from "classnames";
+import { Children, useLayoutEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./index.css";
+//#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/river/type.d.ts

@@ -1,8 +1,5 @@
 import { HTMLAttributes } from 'react';
-
-interface IRiver extends HTMLAttributes<HTMLDivElement> {
+export interface IRiver extends HTMLAttributes<HTMLDivElement> {
     speed?: number;
     pauseOnHover?: boolean;
 }
-
-export type { IRiver };

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

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

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

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

@@ -0,0 +1,5 @@
+import { TOption } from '../../type';
+import { ISelectOptions } from './type';
+export declare const Options: (props: ISelectOptions) => import("react/jsx-runtime").JSX.Element;
+export declare const activeOptions: (options?: TOption[], value?: any[], max?: number) => TOption[];
+export declare const displayValue: (config: any) => any;

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

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

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

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

@@ -0,0 +1,153 @@
+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 "/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 "../../css/input.css";
+import "./index.css";
+//#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 };