@ioca/react 1.4.80 → 1.5.1

package/lib/types/components/message/message.js

@@ -1,193 +0,0 @@
-import { useReactive } from "../../js/hooks.js";
-import classNames from "classnames";
-import { uid } from "/Users/iann/codes/ioca-react/node_modules/.pnpm/radash@12.1.1/node_modules/radash/dist/esm/index.mjs";
-import { isValidElement, useEffect, useRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { createRoot } from "/Users/iann/codes/ioca-react/node_modules/.pnpm/react-dom@19.2.4_react@19.2.4/node_modules/react-dom/client.js";
-//#region packages/components/message/message.tsx
-const AlignMap = {
-	left: "flex-start",
-	center: "center",
-	right: "flex-end"
-};
-const GlobalConfig = {
-	align: "center",
-	offset: "12px",
-	gap: 12
-};
-const ItemDefaultConfig = {
-	duration: 3e3,
-	closable: true,
-	active: false
-};
-const handler = {
-	oneInstance: null,
-	callout(item) {},
-	close() {}
-};
-const queue = {
-	left: [],
-	center: [],
-	right: []
-};
-const heights = {
-	left: [],
-	center: [],
-	right: []
-};
-const MessageItem = function({ ref, active, content, top, className, style, onClick }) {
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		className: classNames("i-message", className, { "i-message-active": active }),
-		style: {
-			...style,
-			top
-		},
-		onClick,
-		children: content
-	});
-};
-function Messages() {
-	const ref = useRef(null);
-	const state = useReactive({
-		items: {
-			left: [],
-			center: [],
-			right: []
-		},
-		tops: {
-			left: [],
-			center: [],
-			right: []
-		}
-	});
-	const offsetTop = {
-		left: 0,
-		center: 0,
-		right: 0
-	};
-	useEffect(() => {
-		Object.assign(handler, {
-			callout: function(item) {
-				const { align = "center", unshift, onShow } = item;
-				const size = queue[align][unshift ? "unshift" : "push"](item);
-				state.items[align] = [...queue[align]];
-				item.close = this.close.bind(item);
-				setTimeout(() => {
-					const h = ref.current?.offsetHeight || 0;
-					queue[align][unshift ? 0 : size - 1].active = true;
-					state.items[align] = [...queue[align]];
-					heights[align][unshift ? "unshift" : "push"](h);
-					state.tops[align] = [...heights[align]];
-					onShow?.();
-				}, 12);
-				if (item.duration !== 0) item.timer = setTimeout(() => {
-					this.close.call(item);
-				}, item.duration);
-			},
-			close: function() {
-				const item = this;
-				const { align = "center", onHide } = item;
-				const index = queue[align].findIndex((i) => i.id === item.id);
-				if (index < 0) return;
-				queue[align][index].active = false;
-				state.items[align] = [...queue[align]];
-				item.timer = setTimeout(() => {
-					const index = queue[align].findIndex((i) => i.id === item.id);
-					queue[align].splice(index, 1);
-					heights[align].splice(index, 1);
-					state.tops[align] = [...heights[align]];
-					state.items[align] = [...queue[align]];
-					item.timer && clearTimeout(item.timer);
-					onHide?.();
-				}, 240);
-			}
-		});
-	}, []);
-	const renderItems = (item, i) => {
-		if (!item) return /* @__PURE__ */ jsx(Fragment$1, {});
-		const { id, active, content, align = "center", className } = item;
-		offsetTop[align] += state.tops[align][i - 1] || 0;
-		return /* @__PURE__ */ jsx(MessageItem, {
-			ref,
-			active,
-			content,
-			top: GlobalConfig.gap * i + offsetTop[align],
-			className,
-			style: { alignSelf: AlignMap[align] },
-			onClick: handler.close.bind(item)
-		}, id);
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: "i-messages",
-		children: [
-			state.items.left.map(renderItems),
-			state.items.center.map(renderItems),
-			state.items.right.map(renderItems)
-		]
-	});
-}
-function message(config) {
-	if (["string", "number"].includes(typeof config) || isValidElement(config)) config = { content: config };
-	config = Object.assign({ id: uid(7) }, ItemDefaultConfig, config);
-	handler.callout(config);
-	return {
-		instance: config,
-		close: handler.close.bind(config)
-	};
-}
-function createContainer() {
-	if (typeof document === "undefined") return null;
-	const container = document.createElement("div");
-	container.dataset.id = "messages";
-	document.body.append(container);
-	return container;
-}
-message.error = (content) => {
-	return message({
-		content,
-		className: "bg-error"
-	});
-};
-message.success = (content) => {
-	return message({
-		content,
-		className: "bg-success"
-	});
-};
-message.warning = (content) => {
-	return message({
-		content,
-		className: "bg-warning"
-	});
-};
-message.info = (content) => {
-	return message({
-		content,
-		className: "bg-blue"
-	});
-};
-message.one = (config) => {
-	const o = handler.oneInstance;
-	if (o) if (o.active && o.duration !== 0) {
-		clearTimeout(o.timer);
-		o.timer = setTimeout(() => {
-			o.close?.();
-		}, o.duration);
-	} else handler.callout(o);
-	else {
-		const { instance } = message(config);
-		handler.oneInstance = instance;
-	}
-};
-let container = null;
-let root = null;
-if (typeof window !== "undefined") {
-	container = createContainer();
-	if (container) {
-		root = createRoot(container);
-		root.render(/* @__PURE__ */ jsx(Messages, {}));
-	}
-}
-//#endregion
-export { message as default };

package/lib/types/components/modal/content.js

@@ -1,54 +0,0 @@
-import button_default from "../button/index.js";
-import helpericon_default from "../utils/helpericon/index.js";
-import { useMemo } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-//#region packages/components/modal/content.tsx
-function Content(props) {
-	const { title, footer, hideCloseButton, footerLeft, okButtonProps, cancelButtonProps, children, onOk, onClose } = props;
-	const showHeader = title || !hideCloseButton;
-	const handleOk = async () => {
-		if (await onOk?.() === false) return;
-		onClose?.();
-	};
-	const renderFooter = useMemo(() => {
-		if (footer || footer === null) return footer;
-		const propsOk = Object.assign({
-			children: "确定",
-			onClick: handleOk
-		}, okButtonProps);
-		const propsCancel = Object.assign({
-			secondary: true,
-			children: "关闭",
-			onClick: onClose
-		}, cancelButtonProps);
-		return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			footerLeft,
-			/* @__PURE__ */ jsx(button_default, { ...propsOk }),
-			/* @__PURE__ */ jsx(button_default, { ...propsCancel })
-		] });
-	}, [
-		footer,
-		okButtonProps,
-		cancelButtonProps
-	]);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		showHeader && /* @__PURE__ */ jsxs("header", {
-			className: "i-modal-header",
-			children: [title && /* @__PURE__ */ jsx("b", { children: title }), /* @__PURE__ */ jsx(helpericon_default, {
-				active: !hideCloseButton,
-				className: "i-modal-close",
-				onClick: onClose
-			})]
-		}),
-		/* @__PURE__ */ jsx("div", {
-			className: "i-modal-content",
-			children
-		}),
-		/* @__PURE__ */ jsx("footer", {
-			className: "i-modal-footer",
-			children: renderFooter
-		})
-	] });
-}
-//#endregion
-export { Content as default };

package/lib/types/components/modal/context.js

@@ -1,5 +0,0 @@
-import { createContext } from "react";
-//#region packages/components/modal/context.ts
-const ModalContext = createContext(false);
-//#endregion
-export { ModalContext as default };

package/lib/types/components/modal/hookModal.js

@@ -1,25 +0,0 @@
-import { useReactive } from "../../js/hooks.js";
-import Modal from "./modal.js";
-import { useImperativeHandle } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region packages/components/modal/hookModal.tsx
-const HookModal = (props) => {
-	const { ref, ...restProps } = props;
-	const state = useReactive({});
-	const mergedProps = Object.assign({}, restProps, state);
-	useImperativeHandle(ref, () => ({
-		update: (config = {}) => {
-			Object.assign(state, config);
-		},
-		close: () => {
-			state.visible = false;
-			if (mergedProps.closable) return;
-			Promise.resolve().then(() => {
-				state.visible = true;
-			});
-		}
-	}));
-	return /* @__PURE__ */ jsx(Modal, { ...mergedProps });
-};
-//#endregion
-export { HookModal as default };

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

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

package/lib/types/components/modal/modal.js

@@ -1,113 +0,0 @@
-import { useKeydown } from "../../js/hooks.js";
-import Content from "./content.js";
-import ModalContext from "./context.js";
-import useModal from "./useModal.js";
-import classNames from "classnames";
-import { useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { createPortal } from "react-dom";
-//#region packages/components/modal/modal.tsx
-function Modal(props) {
-	const { visible, title, footer, okButtonProps, cancelButtonProps, closable = true, hideBackdrop, backdropClosable = true, hideCloseButton, disableEsc, width, height, customized, fixed, hideShadow, children, style, className, keepDOM, footerLeft, onClick, onVisibleChange, onClose, onOk, ...restProps } = props;
-	const [show, setShow] = useState(visible);
-	const [active, setActive] = useState(false);
-	const [bounced, setBounced] = useState(false);
-	const [mounted, setMounted] = useState(false);
-	const toggable = useRef(true);
-	const handleShow = async () => {
-		if (!toggable.current) return;
-		(!keepDOM || !show) && setShow(true);
-		toggable.current = false;
-		const timer = setTimeout(() => {
-			setActive(true);
-			onVisibleChange?.(true);
-			toggable.current = true;
-		}, 64);
-		return () => clearTimeout(timer);
-	};
-	const handleHide = () => {
-		if (!toggable.current) return;
-		toggable.current = false;
-		if (!closable) {
-			setBounced(true);
-			const timer = setTimeout(() => {
-				setBounced(false);
-				toggable.current = true;
-			}, 400);
-			return () => clearTimeout(timer);
-		}
-		setActive(false);
-		const timer = setTimeout(() => {
-			!keepDOM && setShow(false);
-			toggable.current = true;
-			onVisibleChange?.(false);
-			onClose?.();
-		}, 240);
-		return () => clearTimeout(timer);
-	};
-	const handleBackdropClick = () => {
-		backdropClosable && handleHide();
-	};
-	useKeydown((e) => {
-		if (e.code !== "Escape" || !visible) return;
-		handleHide();
-	}, { disabled: disableEsc });
-	useEffect(() => {
-		visible ? handleShow() : handleHide();
-	}, [visible]);
-	useEffect(() => {
-		setMounted(true);
-	}, []);
-	const handleClick = () => {
-		if (typeof document === "undefined") return;
-		document.documentElement.click();
-	};
-	if (!show || !mounted) return null;
-	return createPortal(/* @__PURE__ */ jsx("div", {
-		className: classNames("i-modal-container", {
-			"i-modal-backdrop": !hideBackdrop,
-			"i-modal-customized": customized,
-			"i-modal-active": active,
-			fixed
-		}, className),
-		style,
-		onClick: handleBackdropClick,
-		"aria-modal": "true",
-		inert: !active,
-		children: /* @__PURE__ */ jsx("div", {
-			className: classNames("i-modal", {
-				bounced,
-				shadow: !hideShadow
-			}),
-			style: {
-				width,
-				height
-			},
-			onClick: (e) => {
-				e.stopPropagation();
-				handleClick();
-				onClick?.(e);
-			},
-			role: "dialog",
-			"aria-labelledby": title ? "modal-title" : void 0,
-			...restProps,
-			children: /* @__PURE__ */ jsxs(ModalContext.Provider, {
-				value: true,
-				children: [customized && children, !customized && /* @__PURE__ */ jsx(Content, {
-					title,
-					hideCloseButton,
-					footer,
-					okButtonProps,
-					cancelButtonProps,
-					children,
-					footerLeft,
-					onOk,
-					onClose: handleHide
-				})]
-			})
-		})
-	}), document?.body ?? null);
-}
-Modal.useModal = useModal;
-//#endregion
-export { Modal as default };

package/lib/types/components/modal/useModal.js

@@ -1,36 +0,0 @@
-import { renderNode } from "../../js/utils.js";
-import HookModal from "./hookModal.js";
-import { useRef } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region packages/components/modal/useModal.tsx
-function useModal() {
-	const ref = useRef(null);
-	const handleOpen = (props) => {
-		const unMount = renderNode(/* @__PURE__ */ jsx(HookModal, {
-			ref,
-			visible: true,
-			...props,
-			onClose: () => {
-				props.onClose?.();
-				unMount?.();
-			}
-		}));
-	};
-	const handleUpdate = (props) => {
-		if (!ref.current) return;
-		const { update } = ref.current;
-		update(props);
-	};
-	const handleClose = () => {
-		if (!ref.current) return;
-		const { close } = ref.current;
-		close();
-	};
-	return {
-		open: handleOpen,
-		update: handleUpdate,
-		close: handleClose
-	};
-}
-//#endregion
-export { useModal as default };

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

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

package/lib/types/components/pagination/page.js

@@ -1,27 +0,0 @@
-import loading_default from "../loading/index.js";
-import classNames from "classnames";
-import { useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/components/pagination/page.tsx
-const Page = (props) => {
-	const { page, active, disabled, children, onChange } = props;
-	const [loading, setLoading] = useState(false);
-	const handleClick = async () => {
-		if (active || loading || disabled) return;
-		setLoading(true);
-		await onChange?.(page);
-		setLoading(false);
-	};
-	return /* @__PURE__ */ jsxs("a", {
-		className: classNames("i-page", {
-			"i-page-active": active,
-			"i-page-loading": loading,
-			"i-page-disabled": disabled
-		}),
-		"data-page": page,
-		onClick: handleClick,
-		children: [loading && /* @__PURE__ */ jsx(loading_default, { absolute: true }), children]
-	});
-};
-//#endregion
-export { Page as default };

package/lib/types/components/pagination/pagination.js

@@ -1,82 +0,0 @@
-import icon_default from "../icon/index.js";
-import Page from "./page.js";
-import classNames from "classnames";
-import { useEffect, useMemo, useState } from "react";
-import { KeyboardArrowLeftRound, KeyboardArrowRightRound, MoreHorizRound } from "@ricons/material";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-//#region packages/components/pagination/pagination.tsx
-const Pagination = (props) => {
-	const { page: defaultPage = 1, size = 10, total = 0, sibling = 2, prev = /* @__PURE__ */ jsx(icon_default, { icon: /* @__PURE__ */ jsx(KeyboardArrowLeftRound, {}) }), next = /* @__PURE__ */ jsx(icon_default, { icon: /* @__PURE__ */ jsx(KeyboardArrowRightRound, {}) }), simple, jumper, className, renderEllipsis = () => /* @__PURE__ */ jsx(icon_default, {
-		icon: /* @__PURE__ */ jsx(MoreHorizRound, {}),
-		className: "color-7"
-	}), renderPage = (i) => i, onChange, ...restProps } = props;
-	const [page, setPage] = useState(defaultPage);
-	const [loading, setLoading] = useState(false);
-	const totalPage = useMemo(() => Math.ceil(total / size), [size, total]);
-	const [start, end, loop] = useMemo(() => {
-		const start = Math.max(1, page - sibling);
-		const end = Math.min(totalPage, page + sibling);
-		return [
-			start,
-			end,
-			Array.from({ length: end - start + 1 }).map((n, i) => start + i)
-		];
-	}, [
-		page,
-		totalPage,
-		sibling
-	]);
-	const handlePageChange = async (p) => {
-		if (!onChange || loading) return;
-		setLoading(true);
-		return new Promise(async (resolve) => {
-			if (p === void 0) return;
-			await onChange(p);
-			setPage(p);
-			setLoading(false);
-			resolve();
-		});
-	};
-	useEffect(() => setPage(defaultPage), [defaultPage]);
-	if (totalPage <= page && page === 1) return /* @__PURE__ */ jsx(Fragment$1, {});
-	return /* @__PURE__ */ jsxs("div", {
-		className: classNames("i-pagination", className),
-		...restProps,
-		children: [
-			prev && /* @__PURE__ */ jsx(Page, {
-				page: page - 1 || 1,
-				disabled: page === 1,
-				onChange: handlePageChange,
-				children: prev
-			}),
-			start > 1 && /* @__PURE__ */ jsx(Page, {
-				page: 1,
-				onChange: handlePageChange,
-				children: renderPage(1)
-			}),
-			start > 2 && renderEllipsis(),
-			loop.map((p) => {
-				return /* @__PURE__ */ jsx(Page, {
-					page: p,
-					active: p === page,
-					onChange: handlePageChange,
-					children: renderPage(p)
-				}, p);
-			}),
-			end < totalPage - 1 && renderEllipsis(),
-			end < totalPage && /* @__PURE__ */ jsx(Page, {
-				page: totalPage,
-				onChange: handlePageChange,
-				children: renderPage(totalPage)
-			}),
-			next && /* @__PURE__ */ jsx(Page, {
-				page: page + 1,
-				disabled: page === totalPage,
-				onChange: handlePageChange,
-				children: next
-			})
-		]
-	});
-};
-//#endregion
-export { Pagination as default };

package/lib/types/components/picker/colors/footer.js

@@ -1,60 +0,0 @@
-import button_default from "../../button/index.js";
-import icon_default from "../../icon/index.js";
-import input_default from "../../input/index.js";
-import select_default from "../../select/index.js";
-import { useEffect, useState } from "react";
-import { CheckRound } from "@ricons/material";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/components/picker/colors/footer.tsx
-const ColorMethods = {
-	HEX: "toHexString",
-	RGB: "toRgbString",
-	HSB: "toHsbString"
-};
-function Footer(props) {
-	const { value, type, onTypeChange, onChange, onOk } = props;
-	const [inputValue, setInputValue] = useState(value);
-	const [colorType, setColorType] = useState(type);
-	const handleChange = (v) => {
-		setInputValue(v);
-		onChange(v);
-	};
-	const handleTypeChange = (t) => {
-		setColorType(t);
-		onTypeChange(t);
-	};
-	useEffect(() => {
-		setInputValue(value);
-		setColorType(type);
-	}, [value, type]);
-	return /* @__PURE__ */ jsxs("div", {
-		className: "i-colorpicker-footer",
-		children: [
-			/* @__PURE__ */ jsx(select_default, {
-				readOnly: true,
-				hideClear: true,
-				hideArrow: true,
-				style: { width: "5.6em" },
-				options: [
-					"RGB",
-					"HEX",
-					"HSB"
-				],
-				value: colorType,
-				onChange: handleTypeChange
-			}),
-			/* @__PURE__ */ jsx(input_default, {
-				placeholder: "color",
-				value: inputValue,
-				onChange: handleChange
-			}),
-			/* @__PURE__ */ jsx(button_default, {
-				square: true,
-				onClick: onOk,
-				children: /* @__PURE__ */ jsx(icon_default, { icon: /* @__PURE__ */ jsx(CheckRound, {}) })
-			})
-		]
-	});
-}
-//#endregion
-export { ColorMethods, Footer as default };

package/lib/types/components/picker/colors/handle.js

@@ -1,21 +0,0 @@
-import classNames from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/components/picker/colors/handle.tsx
-const Handle = (props) => {
-	const { ref, color, handle, placeholder, className, ...restProps } = props;
-	return /* @__PURE__ */ jsxs("div", {
-		ref,
-		className: classNames("i-colorpicker-handle", className),
-		...restProps,
-		children: [handle !== "text" && /* @__PURE__ */ jsx("i", {
-			className: "i-colorpicker-square",
-			style: { background: color }
-		}), handle !== "square" && /* @__PURE__ */ jsx("span", {
-			className: "i-colorpicker-text",
-			style: { color },
-			children: color ?? placeholder
-		})]
-	});
-};
-//#endregion
-export { Handle as default };