@ioca/react 1.4.79 → 1.4.81

package/lib/types/components/drawer/drawer.js

@@ -1,80 +0,0 @@
-import { useKeydown, useReactive } from "../../js/hooks.js";
-import helpericon_default from "../utils/helpericon/index.js";
-import classNames from "classnames";
-import { useEffect, useRef, useTransition } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { createPortal } from "react-dom";
-//#region packages/components/drawer/drawer.tsx
-function Drawer(props) {
-	const { visible, position = "left", header, footer, backdropClosable = true, hideCloseButton, keepDOM, className, disabledEsc, children, onVisibleChange, onClose, ...restProps } = props;
-	const toggable = useRef(true);
-	const state = useReactive({
-		show: visible,
-		active: visible
-	});
-	const [isPending, startTransition] = useTransition();
-	const handleHide = () => {
-		if (!toggable.current || isPending) return;
-		toggable.current = false;
-		startTransition(() => {
-			state.active = false;
-			setTimeout(() => {
-				if (!keepDOM) state.show = false;
-				onVisibleChange?.(false);
-				toggable.current = true;
-				onClose?.();
-			}, 240);
-		});
-	};
-	const handleShow = () => {
-		if (!toggable.current || isPending) return;
-		state.show = true;
-		onVisibleChange?.(true);
-		toggable.current = false;
-		startTransition(() => {
-			requestAnimationFrame(() => {
-				state.active = true;
-				toggable.current = true;
-			});
-		});
-	};
-	useEffect(() => {
-		visible ? handleShow() : handleHide();
-	}, [visible]);
-	const handleBackdropClick = () => {
-		backdropClosable && handleHide();
-	};
-	useKeydown((e) => {
-		if (e.code !== "Escape" || !visible) return;
-		handleHide();
-	}, { disabled: disabledEsc });
-	if (!state.show) return null;
-	return createPortal(/* @__PURE__ */ jsx("div", {
-		className: classNames("i-backdrop-drawer", className, { "i-active": state.active }),
-		onClick: handleBackdropClick,
-		...restProps,
-		children: /* @__PURE__ */ jsxs("div", {
-			className: classNames("i-drawer", `i-drawer-${position}`),
-			onClick: (e) => e.stopPropagation(),
-			children: [
-				header && /* @__PURE__ */ jsxs("header", {
-					className: "i-drawer-header",
-					children: [header, !hideCloseButton && /* @__PURE__ */ jsx(helpericon_default, {
-						className: "i-drawer-close",
-						onClick: handleHide
-					})]
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "i-drawer-content",
-					children
-				}),
-				footer && /* @__PURE__ */ jsx("div", {
-					className: "i-drawer-footer",
-					children: footer
-				})
-			]
-		})
-	}), document.body);
-}
-//#endregion
-export { Drawer as default };

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

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

package/lib/types/components/dropdown/dropdown.js

@@ -1,35 +0,0 @@
-import list_default from "../list/index.js";
-import popup_default from "../popup/index.js";
-import Item from "./item.js";
-import { useEffect, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region packages/components/dropdown/dropdown.tsx
-const Dropdown = (props) => {
-	const { visible, width, content, children, ...restProps } = props;
-	const [active, setActive] = useState(visible);
-	if (!content) return children;
-	const handleVisibleChange = (v) => {
-		setActive(v);
-		if (props.onVisibleChange) props.onVisibleChange(v);
-	};
-	useEffect(() => {
-		setActive(visible);
-	}, [visible]);
-	return /* @__PURE__ */ jsx(popup_default, {
-		trigger: "click",
-		position: "bottom",
-		content: /* @__PURE__ */ jsx(list_default, {
-			className: "i-dropdown-content",
-			style: { minWidth: width },
-			children: typeof content === "function" ? content(() => setActive(false)) : content
-		}),
-		...restProps,
-		touchable: true,
-		visible: active,
-		onVisibleChange: handleVisibleChange,
-		children
-	});
-};
-Dropdown.Item = Item;
-//#endregion
-export { Dropdown as default };

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

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

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

@@ -1,3 +0,0 @@
-import { IDropItem } from './type';
-declare const Item: (props: IDropItem) => import("react/jsx-runtime").JSX.Element;
-export default Item;

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

@@ -1,33 +0,0 @@
-import list_default from "../list/index.js";
-import popup_default from "../popup/index.js";
-import { jsx } from "react/jsx-runtime";
-//#region packages/components/dropdown/item.tsx
-const { Item: ListItem } = list_default;
-const Item = (props) => {
-	const { more, moreProps, onClick, ...restProps } = props;
-	const Li = /* @__PURE__ */ jsx(ListItem, {
-		onClick: (e) => {
-			e.stopPropagation();
-			onClick?.(e);
-		},
-		...restProps
-	});
-	if (!more) return Li;
-	return /* @__PURE__ */ jsx(popup_default, {
-		position: "right",
-		touchable: true,
-		arrow: false,
-		align: "start",
-		offset: 10,
-		hideDelay: 240,
-		...moreProps,
-		content: /* @__PURE__ */ jsx(list_default, {
-			className: "i-dropdown-content",
-			onClick: (e) => e.stopPropagation(),
-			children: more
-		}),
-		children: Li
-	});
-};
-//#endregion
-export { Item as default };

package/lib/types/components/editor/controls.d.ts

@@ -1,5 +0,0 @@
-export declare const exec: (a: any, b?: any, c?: any) => boolean;
-export declare const xssOptions: {
-    onIgnoreTagAttr: (tag: any, name: any, value: any) => string;
-};
-export default function getControls(fns: any, options: any): any;

package/lib/types/components/editor/controls.js

@@ -1,83 +0,0 @@
-import button_default from "../button/index.js";
-import icon_default from "../icon/index.js";
-import { ClearAllRound, FormatBoldRound, FormatItalicRound, FormatUnderlinedRound, RedoRound, StrikethroughSRound, UndoRound } from "@ricons/material";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import xss from "xss";
-//#region packages/components/editor/controls.tsx
-const { escapeAttrValue } = xss;
-const exec = (a, b, c) => {
-	if (typeof document === "undefined") return;
-	return document.execCommand(a, b, c);
-};
-const xssOptions = { onIgnoreTagAttr: function(tag, name, value) {
-	if (["data-", "style"].includes(name.substr(0, 5))) return name + "=\"" + escapeAttrValue(value) + "\"";
-} };
-const fnMap = {
-	bold: {
-		icon: /* @__PURE__ */ jsx(FormatBoldRound, {}),
-		onClick: () => exec("bold"),
-		tip: "粗体"
-	},
-	italic: {
-		icon: /* @__PURE__ */ jsx(FormatItalicRound, {}),
-		onClick: () => exec("italic"),
-		tip: "斜体"
-	},
-	underline: {
-		icon: /* @__PURE__ */ jsx(FormatUnderlinedRound, {}),
-		onClick: () => exec("underline"),
-		tip: "下划线"
-	},
-	strike: {
-		icon: /* @__PURE__ */ jsx(StrikethroughSRound, {}),
-		onClick: () => exec("strikeThrough"),
-		tip: "删除线"
-	},
-	redo: {
-		icon: /* @__PURE__ */ jsx(RedoRound, {}),
-		onClick: () => exec("redo"),
-		tip: "重做"
-	},
-	undo: {
-		icon: /* @__PURE__ */ jsx(UndoRound, {}),
-		onClick: () => exec("undo"),
-		tip: "撤销"
-	},
-	clear: {
-		icon: /* @__PURE__ */ jsx(ClearAllRound, {}),
-		onClick: () => exec("removeFormat"),
-		tip: "清除格式"
-	}
-};
-const aliasMap = {
-	simple: [
-		"undo",
-		"redo",
-		"bold",
-		"italic",
-		"underline",
-		"strike",
-		"clear"
-	],
-	all: Object.keys(fnMap)
-};
-function getControls(fns, options) {
-	const { controlBtnProps } = options;
-	return (typeof fns === "string" ? aliasMap[fns] : fns).map((k) => {
-		if (fnMap[k]) {
-			const { icon, render, tip, onClick } = fnMap[k];
-			if (render) return render(options);
-			return /* @__PURE__ */ jsxs(button_default, {
-				...controlBtnProps,
-				onClick,
-				children: [/* @__PURE__ */ jsx(icon_default, { icon }), tip && /* @__PURE__ */ jsx("span", {
-					className: "i-editor-control-tip",
-					children: tip
-				})]
-			}, k);
-		}
-		return /* @__PURE__ */ jsx(Fragment, {}, k);
-	});
-}
-//#endregion
-export { getControls as default, exec, xssOptions };

package/lib/types/components/editor/editor.js

@@ -1,86 +0,0 @@
-import getControls, { exec, xssOptions } from "./controls.js";
-import classNames from "classnames";
-import { useImperativeHandle, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import xss from "xss";
-//#region packages/components/editor/editor.tsx
-const Editor = (props) => {
-	const { ref, width, height = "10em", placeholder, autosize, border = true, richPaste, controls = "simple", className, style, onInput, onPaste, onKeyDown, ...restProps } = props;
-	const editorRef = useRef(null);
-	const controlBtnProps = {
-		square: true,
-		flat: true,
-		size: "small"
-	};
-	const handlePaste = async (e) => {
-		onPaste?.(e);
-		if (richPaste) return;
-		e.preventDefault();
-		exec("insertText", false, e.clipboardData.getData("text/plain"));
-	};
-	const handleKeyDown = (e) => {
-		onKeyDown?.(e);
-		switch (e.key) {
-			case "Tab":
-				e.preventDefault();
-				exec("insertHTML", false, "	");
-				break;
-			case "Enter":
-				e.preventDefault();
-				exec("insertLineBreak");
-				if (!editorRef.current) return;
-				editorRef.current.scrollBy({
-					top: 20,
-					left: -1e3
-				});
-				if (!autosize) return;
-				editorRef.current.style.height = `${editorRef.current.scrollHeight}px`;
-				break;
-			default: break;
-		}
-	};
-	useImperativeHandle(ref, () => {
-		return {
-			input: editorRef.current,
-			setValue(html) {
-				if (!editorRef.current) return;
-				const safeHtml = xss(html, xssOptions);
-				editorRef.current.innerHTML = safeHtml;
-			},
-			getSafeValue() {
-				return xss(editorRef.current?.innerHTML ?? "", xssOptions);
-			}
-		};
-	});
-	const handleInput = (e) => {
-		let html = editorRef.current?.innerHTML ?? "";
-		if (["<br>", "\n"].includes(html) && editorRef.current) {
-			html = "";
-			editorRef.current.innerHTML = html;
-		}
-		onInput?.(html, e);
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: classNames("i-editor", className, { "i-editor-borderless": !border }),
-		style: {
-			...style,
-			[autosize ? "minHeight" : "height"]: height,
-			width
-		},
-		children: [controls !== "none" && /* @__PURE__ */ jsx("div", {
-			className: "i-editor-controls",
-			children: getControls(controls, { controlBtnProps })
-		}), /* @__PURE__ */ jsx("div", {
-			ref: editorRef,
-			className: "i-editor-content",
-			"data-placeholder": placeholder,
-			contentEditable: true,
-			onPaste: handlePaste,
-			onInput: handleInput,
-			onKeyDown: handleKeyDown,
-			...restProps
-		})]
-	});
-};
-//#endregion
-export { Editor as default };

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

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

package/lib/types/components/flex/flex.js

@@ -1,27 +0,0 @@
-import classNames from "classnames";
-import { useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region packages/components/flex/flex.tsx
-const Flex = (props) => {
-	const { as: Component = "div", align, justify, direction, wrap, gap, columns, className, style, ...restProps } = props;
-	const gridColumns = useMemo(() => {
-		if (!columns) return;
-		if (typeof columns === "number") return `repeat(${columns}, 1fr)`;
-		return columns;
-	}, [columns]);
-	return /* @__PURE__ */ jsx(Component, {
-		...restProps,
-		style: {
-			alignItems: align,
-			justifyContent: justify,
-			gap,
-			flexDirection: direction,
-			flexWrap: wrap === true ? "wrap" : wrap,
-			gridTemplateColumns: gridColumns,
-			...style
-		},
-		className: classNames(className, { [columns ? "grid" : "flex"]: true })
-	});
-};
-//#endregion
-export { Flex as default };

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

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

package/lib/types/components/form/context.d.ts

@@ -1,3 +0,0 @@
-import { IFormInstance } from './useForm';
-declare const Context: import('react').Context<IFormInstance>;
-export default Context;

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

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

package/lib/types/components/form/field.js

@@ -1,67 +0,0 @@
-import Context from "./context.js";
-import { Children, cloneElement, isValidElement, useContext, useEffect, useMemo, useState } from "react";
-import PubSub from "/Users/iann/codes/ioca-react/node_modules/.pnpm/pubsub-js@1.9.5/node_modules/pubsub-js/src/pubsub.js";
-//#region packages/components/form/field.tsx
-function Field(props) {
-	const { name, required, children } = props;
-	const [fieldValue, setFieldValue] = useState(void 0);
-	const [fieldStatus, setFieldStatus] = useState("normal");
-	const [fieldMessage, setFieldMessage] = useState(void 0);
-	const form = useContext(Context);
-	const { id } = form;
-	const handleChange = (v) => {
-		if (!name) return;
-		form.set(name, v);
-		PubSub.publish(`${id}:change`, {
-			name,
-			value: v
-		});
-	};
-	const hijackChildren = useMemo(() => {
-		return Children.map(children, (node) => {
-			if (!isValidElement(node)) return null;
-			const { onChange } = node.props;
-			return cloneElement(node, {
-				value: fieldValue,
-				status: fieldStatus,
-				message: fieldMessage,
-				required,
-				onChange: (...args) => {
-					handleChange(args[0]);
-					onChange?.(...args);
-					setFieldStatus("normal");
-					setFieldMessage(void 0);
-				}
-			});
-		});
-	}, [
-		children,
-		fieldValue,
-		fieldStatus,
-		fieldMessage,
-		required
-	]);
-	useEffect(() => {
-		if (!name) return;
-		PubSub.subscribe(`${id}:set:${name}`, (evt, v) => {
-			setFieldValue(v);
-		});
-		PubSub.subscribe(`${id}:invalid:${name}`, (evt, v) => {
-			if (v?.value !== void 0) setFieldValue(v.value);
-			if (v?.status) setFieldStatus(v.status);
-			if ("message" in (v ?? {})) setFieldMessage(v.message);
-		});
-		Promise.resolve().then(() => {
-			form.set(name, form.cacheData[name] ?? void 0);
-		});
-		return () => {
-			PubSub.unsubscribe(`${id}:set:${name}`);
-			PubSub.unsubscribe(`${id}:invalid:${name}`);
-			form.delete(name);
-		};
-	}, [name, children]);
-	if (!name) return children;
-	return hijackChildren;
-}
-//#endregion
-export { Field as default };

package/lib/types/components/form/form.js

@@ -1,59 +0,0 @@
-import Context from "./context.js";
-import Field from "./field.js";
-import useForm from "./useForm.js";
-import useConfig from "./useConfig.js";
-import classNames from "classnames";
-import { useEffect, useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
-import PubSub from "/Users/iann/codes/ioca-react/node_modules/.pnpm/pubsub-js@1.9.5/node_modules/pubsub-js/src/pubsub.js";
-//#region packages/components/form/form.tsx
-const Form = (props) => {
-	const { form = {}, rules, initialValues, style, className, width, columns, itemMaxWidth, gap = "1em", labelInline, labelWidth, labelRight, children, onKeyDown, onEnter, onChange, ...restProps } = props;
-	const handleKeyDown = (e) => {
-		onKeyDown?.(e);
-		if (e.keyCode !== 13) return;
-		onEnter?.(e, form.data, form);
-	};
-	const gridColumns = useMemo(() => {
-		if (!columns && !itemMaxWidth) return;
-		if (itemMaxWidth) return `repeat(auto-fill, minmax(${itemMaxWidth}, 1fr))`;
-		if (typeof columns === "number") return `minmax(0, 1fr) `.repeat(columns);
-		return columns;
-	}, [columns]);
-	useEffect(() => {
-		Object.assign(form, {
-			data: { ...initialValues },
-			rules
-		});
-	}, [form]);
-	useEffect(() => {
-		PubSub.subscribe(`${form.id}:change`, (evt, v) => {
-			onChange?.(v.name, v.value);
-		});
-		return () => {
-			PubSub.unsubscribe(`${form.id}:change`);
-		};
-	}, []);
-	return /* @__PURE__ */ jsx(Context, {
-		value: form,
-		children: /* @__PURE__ */ jsx("form", {
-			style: {
-				...style,
-				width,
-				gap,
-				gridTemplateColumns: gridColumns,
-				"--label-width": labelWidth,
-				"--label-align": labelRight ? "right" : void 0
-			},
-			className: classNames("i-form", className, { "i-form-inline": labelInline }),
-			onKeyDown: handleKeyDown,
-			...restProps,
-			children
-		})
-	});
-};
-Form.useForm = useForm;
-Form.Field = Field;
-Form.useConfig = useConfig;
-//#endregion
-export { Form as default };

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

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

package/lib/types/components/form/useConfig.js

@@ -1,42 +0,0 @@
-import Field from "./field.js";
-import useForm from "./useForm.js";
-import Form from "./form.js";
-import { Fragment, useMemo, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region packages/components/form/useConfig.tsx
-function useConfig(configs, formProps) {
-	const form = useForm();
-	const { onChange } = formProps ?? {};
-	const [values, setValues] = useState({});
-	const handleChange = (name, value) => {
-		setValues(() => ({ ...form.get() }));
-		onChange?.(name, value);
-	};
-	return {
-		form,
-		node: useMemo(() => {
-			return /* @__PURE__ */ jsx(Form, {
-				...formProps,
-				onChange: handleChange,
-				form,
-				children: configs.map((config) => {
-					const { name, label, required, component: El, componentProps = {}, colspan = 1, render, shouldUpdate, shouldRender } = config;
-					const { className, style } = componentProps;
-					if (shouldRender && !shouldRender(values, form)) return /* @__PURE__ */ jsx(Fragment, {}, name);
-					return /* @__PURE__ */ jsx(Field, {
-						name,
-						required,
-						children: render?.(config, values) ?? /* @__PURE__ */ jsx(El, {
-							label,
-							required,
-							...componentProps,
-							className: `${className ?? ""} ${colspan !== 1 ? `colspan-${colspan}` : ""}`
-						})
-					}, name);
-				})
-			});
-		}, [configs, values])
-	};
-}
-//#endregion
-export { useConfig as default };