@ioca/react 1.4.76 → 1.4.77

package/lib/types/components/datagrid/sorter.js

@@ -0,0 +1,24 @@
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/components/datagrid/sorter.tsx
+const Arrow = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 24 24",
+	...props,
+	children: /* @__PURE__ */ jsx("g", {
+		fill: "none",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M9 17.898c0 1.074 1.265 1.648 2.073.941l6.31-5.522a1.75 1.75 0 0 0 0-2.634l-6.31-5.522C10.265 4.454 9 5.028 9 6.102v11.796z",
+			fill: "currentColor"
+		})
+	})
+});
+function Sorter(props) {
+	const { type } = props;
+	return /* @__PURE__ */ jsxs("a", {
+		className: classNames("i-datagrid-sorter", { [`i-datagrid-sorter-${type}`]: type }),
+		children: [/* @__PURE__ */ jsx(Arrow, { className: "i-datagrid-sorter-caret" }), /* @__PURE__ */ jsx(Arrow, { className: "i-datagrid-sorter-caret" })]
+	});
+}
+//#endregion
+export { Sorter as default };

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

@@ -1,7 +1,10 @@
-import { ReactNode, CSSProperties, MouseEvent } from 'react';
-
-type IData = Record<string, any>;
-interface IColumn {
+import { CSSProperties, MouseEvent, ReactNode } from 'react';
+export type IData = Record<string, any>;
+type TSort = {
+    sortBy: string;
+    sortType: string;
+};
+export interface IColumn {
     id: string;
     title?: ReactNode;
     sorter?: boolean;
@@ -13,7 +16,7 @@ interface IColumn {
     render?: (value?: any, data?: IData, row?: number, col?: number) => ReactNode;
     renderHeader?: (column?: IColumn, col?: number) => ReactNode;
 }
-interface IDatagrid {
+export interface IDatagrid {
     data: IData[];
     columns?: IColumn[];
     border?: boolean;
@@ -36,5 +39,23 @@ interface IDatagrid {
     onScroll?: (e: MouseEvent) => void;
     onResize?: (column?: IColumn, width?: number) => void;
 }
-
-export type { IColumn, IData, IDatagrid };
+export interface IRow extends Pick<IDatagrid, "cellEllipsis" | "onCellClick" | "onCellDoubleClick" | "onRowClick" | "onHeaderClick"> {
+    data: IData;
+    columns: IColumn[];
+    row: number;
+}
+export interface ICell extends Pick<IDatagrid, "cellEllipsis" | "onCellClick" | "onCellDoubleClick"> {
+    column: IColumn;
+    data: IData;
+    row: number;
+    col: number;
+}
+export interface IHeader extends Omit<IRow, "data" | "row">, TSort {
+    resizable?: boolean;
+    onWidthChange: (i: number, width: number) => void;
+}
+export type TDatagridState = {
+    rows: IData[];
+    widths: (number | string)[];
+} & TSort;
+export {};

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

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

package/lib/types/components/description/description.js

@@ -0,0 +1,40 @@
+import classNames from "classnames";
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./index.css";
+//#region packages/components/description/description.tsx
+const Description = (props) => {
+	const { data, colon, columns = 1, gap = ".5em", align, labelWidth, labelAlign, vertical, equally, style, className } = props;
+	return /* @__PURE__ */ jsx("div", {
+		className: classNames("i-description", className),
+		style: {
+			["--description-label-width"]: labelWidth,
+			gridTemplateColumns: `repeat(${columns}, ${equally ? "1fr" : "auto"})`,
+			gap,
+			textAlign: align,
+			...style
+		},
+		children: data.map((item, i) => {
+			const { label, value, style, hidden, rowSpan = 1, colSpan = 1 } = item;
+			if (hidden) return /* @__PURE__ */ jsx(Fragment, {}, i);
+			return /* @__PURE__ */ jsxs("div", {
+				className: classNames("i-description-item", { "i-description-item-vertical": vertical }),
+				style: {
+					gridColumn: `span ${colSpan}`,
+					gridRow: `span ${rowSpan}`,
+					...style
+				},
+				children: [label && /* @__PURE__ */ jsxs("div", {
+					className: "i-description-label",
+					style: { textAlign: labelAlign },
+					children: [label, colon]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "i-description-value",
+					children: value
+				})]
+			}, i);
+		})
+	});
+};
+//#endregion
+export { Description as default };

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

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

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

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

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

@@ -1,5 +1,4 @@
-import { ReactNode, CSSProperties } from 'react';
-
+import { CSSProperties, ReactNode } from 'react';
 type IData = {
     label: ReactNode;
     value: ReactNode;
@@ -8,7 +7,7 @@ type IData = {
     hidden?: boolean;
     style?: CSSProperties;
 };
-interface IDescription {
+export interface IDescription {
     data: IData[];
     align?: string;
     colon?: ReactNode;
@@ -21,5 +20,4 @@ interface IDescription {
     style?: CSSProperties;
     className?: string;
 }
-
-export type { IDescription };
+export {};

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

@@ -1,5 +1,3 @@
-import { IDrawer } from './type.js';
-
+import { IDrawer } from './type';
 declare function Drawer(props: IDrawer): any;
-
-export { Drawer as default };
+export default Drawer;

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

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

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

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

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

@@ -1,6 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
-
-interface IDrawer extends HTMLAttributes<HTMLDivElement> {
+export interface IDrawer extends HTMLAttributes<HTMLDivElement> {
     visible?: boolean;
     position?: "top" | "left" | "right" | "bottom";
     header?: ReactNode;
@@ -12,5 +11,3 @@ interface IDrawer extends HTMLAttributes<HTMLDivElement> {
     onVisibleChange?: (visible: boolean) => void;
     onClose?: () => void;
 }
-
-export type { IDrawer };

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

@@ -1,10 +1,6 @@
-import { IDropdown, IDropItem } from './type.js';
-import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
+import { IDropdown } from './type';
 declare const Dropdown: {
-    (props: IDropdown): string | number | bigint | boolean | react_jsx_runtime.JSX.Element | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode>>;
-    Item: (props: IDropItem) => react_jsx_runtime.JSX.Element;
+    (props: IDropdown): string | number | bigint | boolean | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode>> | import("react/jsx-runtime").JSX.Element;
+    Item: (props: import('./type').IDropItem) => import("react/jsx-runtime").JSX.Element;
 };
-
-export { Dropdown as default };
+export default Dropdown;

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

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

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

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

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

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

@@ -0,0 +1,33 @@
+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/dropdown/type.d.ts

@@ -1,14 +1,11 @@
 import { ReactNode } from 'react';
-import { IListItem } from '../list/type.js';
-import { IPopup } from '../popup/type.js';
-
-interface IDropdown extends Omit<IPopup, "content"> {
+import { IListItem } from '../list/type';
+import { IPopup } from '../popup/type';
+export interface IDropdown extends Omit<IPopup, "content"> {
     width?: string | number;
     content?: ReactNode | ((close: () => void) => ReactNode);
 }
-interface IDropItem extends IListItem {
+export interface IDropItem extends IListItem {
     more?: ReactNode;
     moreProps?: IDropdown;
 }
-
-export type { IDropItem, IDropdown };

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

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

@@ -0,0 +1,83 @@
+import button_default from "../button/index.js";
+import icon_default from "../icon/index.js";
+import { ClearAllRound, FormatBoldRound, FormatItalicRound, FormatUnderlinedRound, RedoRound, StrikethroughSRound, UndoRound } from "/Users/iann/codes/ioca-react/node_modules/.pnpm/@ricons+material@0.12.0/node_modules/@ricons/material/es/index.js";
+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.d.ts

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

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

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

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

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

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

@@ -1,6 +1,5 @@
-import { HTMLAttributes, RefObject, FormEvent } from 'react';
-
-interface IEditor extends Omit<HTMLAttributes<HTMLDivElement>, "onInput"> {
+import { FormEvent, HTMLAttributes, RefObject } from 'react';
+export interface IEditor extends Omit<HTMLAttributes<HTMLDivElement>, "onInput"> {
     ref?: RefObject<RefEditor | null>;
     placeholder?: string;
     width?: string | number;
@@ -11,10 +10,8 @@ interface IEditor extends Omit<HTMLAttributes<HTMLDivElement>, "onInput"> {
     border?: boolean;
     onInput?: (html: string, e: FormEvent<HTMLDivElement>) => void;
 }
-interface RefEditor {
+export interface RefEditor {
     input: HTMLDivElement | null;
     getSafeValue: () => string;
     setValue: (html: string) => void;
 }
-
-export type { IEditor, RefEditor };

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

@@ -1,5 +1,3 @@
-import { IFlex } from './type.js';
-
+import { IFlex } from './type';
 declare const Flex: React.FC<IFlex>;
-
-export { Flex as default };
+export default Flex;