@ioca/react 1.4.76 → 1.4.77

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

@@ -1,8 +1,7 @@
-import { HTMLAttributes, ReactNode, FC } from 'react';
-import { IButton } from '../button/type.js';
-import useModal from './useModal.js';
-
-interface IModal extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+import { FC, HTMLAttributes, ReactNode } from 'react';
+import { IButton } from '../button/type';
+import { default as useModal } from './useModal';
+export interface IModal extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     visible?: boolean;
     title?: ReactNode;
     footer?: ReactNode;
@@ -24,8 +23,12 @@ interface IModal extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     onOk?: () => (void | boolean) | Promise<any>;
     onClose?: () => void;
 }
-interface CompositionModal extends FC<IModal> {
+export interface CompositionModal extends FC<IModal> {
     useModal: typeof useModal;
 }
-
-export type { CompositionModal, IModal };
+export interface IModalContent extends Pick<IModal, "title" | "footer" | "hideCloseButton" | "okButtonProps" | "cancelButtonProps" | "children" | "footerLeft" | "onOk" | "onClose"> {
+}
+export interface RefHookModal {
+    update: (props: IModal) => void;
+    close: () => void;
+}

package/lib/types/components/modal/useModal.d.ts

@@ -1,9 +1,6 @@
-import { IModal } from './type.js';
-
-declare function useModal(): {
+import { IModal } from './type';
+export default function useModal(): {
     open: (props: IModal) => void;
     update: (props: IModal) => void;
     close: () => void;
 };
-
-export { useModal as default };

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,83 @@
+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 "/Users/iann/codes/ioca-react/node_modules/.pnpm/@ricons+material@0.12.0/node_modules/@ricons/material/es/index.js";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import "./index.css";
+//#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/pagination/type.d.ts

@@ -1,6 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
-
-interface IPagination extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+export interface IPagination extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     page?: number;
     total?: number;
     sibling?: number;
@@ -14,5 +13,8 @@ interface IPagination extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     renderEllipsis?: () => ReactNode;
     onChange?: (page: number) => Promise<void> | void;
 }
-
-export type { IPagination };
+export interface IPageItem extends Pick<IPagination, "children" | "onChange"> {
+    active?: boolean;
+    disabled?: boolean;
+    page: number;
+}

package/lib/types/components/picker/colors/footer.d.ts

@@ -0,0 +1,6 @@
+export declare const ColorMethods: {
+    HEX: string;
+    RGB: string;
+    HSB: string;
+};
+export default function Footer(props: any): import("react/jsx-runtime").JSX.Element;

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

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

@@ -0,0 +1,2 @@
+declare const Handle: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default Handle;

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

@@ -0,0 +1,21 @@
+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 };

package/lib/types/components/picker/colors/index.d.ts

@@ -1,6 +1,2 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { IColorPicker } from '../type.js';
-
-declare function ColorPicker(props: IColorPicker): react_jsx_runtime.JSX.Element;
-
-export { ColorPicker as default };
+import { IColorPicker } from '../type';
+export default function ColorPicker(props: IColorPicker): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,78 @@
+import popup_default from "../../popup/index.js";
+import Footer, { ColorMethods } from "./footer.js";
+import Handle from "./handle.js";
+import { useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import ColorsPanel from "@rc-component/color-picker";
+import "./index.css";
+//#region packages/components/picker/colors/index.tsx
+function ColorPicker(props) {
+	const { value, type = "HEX", disabledAlpha, children, usePanel, handle = "both", placeholder = "Colors", popupProps, onChange } = props;
+	const [colorType, setColorType] = useState(type);
+	const [colorValue, setColorValue] = useState(value);
+	const [syncValue, setSyncValue] = useState(value);
+	const [visible, setVisible] = useState(popupProps?.visible);
+	const handleChange = (target) => {
+		setSyncValue(target);
+	};
+	const handleComplete = (target) => {
+		const method = ColorMethods[colorType];
+		if (target.a !== 1) target.a = parseFloat(target.a.toFixed(3));
+		setColorValue(target[method]?.());
+	};
+	const handleVisibleChange = (v) => {
+		setVisible(v);
+		popupProps?.onVisibleChange?.(v);
+	};
+	const handleTypeChange = (t) => {
+		const method = ColorMethods[t];
+		setColorType(t);
+		setColorValue(syncValue?.[method]?.());
+	};
+	const handleValueChange = (v) => {
+		setColorValue(v);
+		setSyncValue(v);
+	};
+	const handleOk = () => {
+		onChange?.(colorValue);
+		setVisible(false);
+	};
+	useEffect(() => {
+		setSyncValue(value);
+		setColorValue(value);
+	}, [value]);
+	useEffect(() => {
+		if (popupProps?.visible !== void 0) setVisible(popupProps.visible);
+	}, [popupProps?.visible]);
+	if (usePanel) return /* @__PURE__ */ jsx(ColorsPanel, { ...props });
+	return /* @__PURE__ */ jsx(popup_default, {
+		trigger: "click",
+		touchable: true,
+		position: "bottom",
+		...popupProps,
+		visible,
+		content: /* @__PURE__ */ jsx(ColorsPanel, {
+			value: syncValue,
+			disabledAlpha,
+			panelRender: (panel) => {
+				return /* @__PURE__ */ jsxs(Fragment$1, { children: [panel, /* @__PURE__ */ jsx(Footer, {
+					value: colorValue,
+					type: colorType,
+					onTypeChange: handleTypeChange,
+					onChange: handleValueChange,
+					onOk: handleOk
+				})] });
+			},
+			onChange: handleChange,
+			onChangeComplete: handleComplete
+		}),
+		onVisibleChange: handleVisibleChange,
+		children: children ?? /* @__PURE__ */ jsx(Handle, {
+			color: value,
+			handle,
+			placeholder
+		})
+	});
+}
+//#endregion
+export { ColorPicker as default };

package/lib/types/components/picker/dates/dates.d.ts

@@ -0,0 +1,5 @@
+import { IBaseDates } from '../type';
+declare const Dates: (props: IBaseDates & {
+    month: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Dates;

package/lib/types/components/picker/dates/dates.js

@@ -0,0 +1,63 @@
+import classNames from "classnames";
+import { useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import dayjs from "dayjs";
+//#region packages/components/picker/dates/dates.tsx
+const Dates = (props) => {
+	const { value, month, weeks = [
+		"一",
+		"二",
+		"三",
+		"四",
+		"五",
+		"六",
+		"日"
+	], renderDate = (date) => date.date(), disabledDate, onDateClick } = props;
+	const today = dayjs();
+	const dates = useMemo(() => {
+		const dates = [];
+		const lastDateOfLastMonth = month.add(-1, "month").endOf("month");
+		let { $W, $D } = lastDateOfLastMonth;
+		if ($W !== 0) {
+			const lastMonthDates = Array.from({ length: $W }).map((whatever, i) => lastDateOfLastMonth.add(i + 1 - $W, "day"));
+			dates.push(...lastMonthDates);
+		}
+		const lastDate = month.endOf("month");
+		$D = lastDate.$D;
+		$W = lastDate.$W;
+		dates.push(...Array.from({ length: $D }).map((whatever, i) => lastDate.add(i + 1 - $D, "day")));
+		if ($W !== 0) dates.push(...Array.from({ length: 7 - $W }).map((whatever, i) => lastDate.add(i + 1, "day")));
+		return dates;
+	}, [month]);
+	const handleDateClick = (date) => {
+		if (disabledDate?.(date)) return;
+		onDateClick?.(date);
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		className: "i-datepicker-weeks",
+		children: weeks.map((week, i) => /* @__PURE__ */ jsx("span", {
+			className: "i-datepicker-week",
+			children: week
+		}, i))
+	}), /* @__PURE__ */ jsx("div", {
+		className: "i-datepicker-dates",
+		children: dates.map((date, i) => {
+			const active = date.isSame(value, "day");
+			const isSameMonth = date.isSame(month, "month");
+			const isToday = date.isSame(today, "day");
+			const disabled = disabledDate?.(date);
+			return /* @__PURE__ */ jsx("div", {
+				className: classNames("i-datepicker-item", {
+					"i-datepicker-active": active,
+					"i-datepicker-same-month": isSameMonth,
+					"i-datepicker-today": isToday,
+					"i-datepicker-disabled": disabled
+				}),
+				onClick: () => handleDateClick(date),
+				children: renderDate(date)
+			}, i);
+		})
+	})] });
+};
+//#endregion
+export { Dates as default };

package/lib/types/components/picker/dates/index.d.ts

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

package/lib/types/components/picker/dates/index.js

@@ -0,0 +1,92 @@
+import icon_default from "../../icon/index.js";
+import popup_default from "../../popup/index.js";
+import input_default from "../../input/index.js";
+import Panel from "./panel.js";
+import classNames from "classnames";
+import { useEffect, useMemo, useState } from "react";
+import { CalendarMonthTwotone } from "/Users/iann/codes/ioca-react/node_modules/.pnpm/@ricons+material@0.12.0/node_modules/@ricons/material/es/index.js";
+import { jsx } from "react/jsx-runtime";
+import dayjs from "dayjs";
+import customParseFormat from "/Users/iann/codes/ioca-react/node_modules/.pnpm/dayjs@1.11.20/node_modules/dayjs/plugin/customParseFormat.js";
+import "./index.css";
+//#region packages/components/picker/dates/index.tsx
+dayjs.extend(customParseFormat);
+const FORMATTYPES = [
+	"YYYY-MM-DD",
+	"YYYY-M-D",
+	"YYYY/MM/DD",
+	"YYYY/M/D"
+];
+const FORMAT = "YYYY-MM-DD";
+const Datepicker = (props) => {
+	const { name, value, weeks, format = FORMAT, placeholder = props.format ?? FORMAT, className, renderDate, renderMonth, renderYear, popupProps, disabledDate, onDateClick, onChange, onBlur, ...restProps } = props;
+	const [inputValue, setInputValue] = useState(value);
+	const [active, setActive] = useState(false);
+	const dayJsValue = useMemo(() => {
+		if (!inputValue) return null;
+		const date = dayjs(inputValue, format, true);
+		if (date.isValid()) return date;
+		return null;
+	}, [inputValue, format]);
+	const handleDateClick = (date) => {
+		handleChange(date.format(format));
+	};
+	const handleChange = (v) => {
+		setInputValue(v);
+		onChange?.(v);
+	};
+	const handleSetDate = () => {
+		if (!inputValue) return;
+		const date = dayjs(inputValue, FORMATTYPES, true);
+		if (date.isValid()) {
+			handleChange(date.format(format));
+			return;
+		}
+		handleChange("");
+	};
+	const handleBlur = (e) => {
+		onBlur?.(e);
+		handleSetDate();
+	};
+	const handleVisibleChange = (v) => {
+		popupProps?.onVisibleChange?.(v);
+		setActive(v);
+	};
+	useEffect(() => {
+		setInputValue(value);
+	}, [value]);
+	return /* @__PURE__ */ jsx(popup_default, {
+		visible: active,
+		trigger: "click",
+		position: "bottom",
+		arrow: false,
+		align: "start",
+		onVisibleChange: handleVisibleChange,
+		content: /* @__PURE__ */ jsx(Panel, {
+			value: dayJsValue,
+			weeks,
+			renderDate,
+			renderMonth,
+			renderYear,
+			disabledDate,
+			onDateClick: handleDateClick
+		}),
+		...popupProps,
+		children: /* @__PURE__ */ jsx(input_default, {
+			value: inputValue,
+			append: /* @__PURE__ */ jsx(icon_default, {
+				icon: /* @__PURE__ */ jsx(CalendarMonthTwotone, {}),
+				className: "i-datepicker-icon",
+				size: "1em"
+			}),
+			placeholder,
+			onChange: handleChange,
+			onBlur: handleBlur,
+			onEnter: handleSetDate,
+			className: classNames("i-datepicker-label", className),
+			...restProps
+		})
+	});
+};
+//#endregion
+export { Datepicker as default };

package/lib/types/components/picker/dates/panel.d.ts

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