@rockshin/tao-ui 0.0.1 → 0.0.2

package/dist/components/modal/confirm-dialog.d.ts

@@ -0,0 +1,37 @@
+import { type ReactNode } from 'react';
+import { type SemanticClassNames, type SemanticStyles } from '../../utils/semantic';
+import { type ButtonProps } from '../button/button';
+import { type ModalSemanticPart } from './modal';
+export type ConfirmType = 'info' | 'success' | 'error' | 'warning' | 'confirm';
+/** Config accepted by `Modal.confirm/info/...` and `modal.confirm/...` from `useModal`. */
+export interface ModalFuncProps {
+    title?: ReactNode;
+    content?: ReactNode;
+    /** Custom status icon. Pass `null` to hide the icon. */
+    icon?: ReactNode | null;
+    type?: ConfirmType;
+    okText?: ReactNode;
+    cancelText?: ReactNode;
+    /** Show the Cancel button. Defaults to `true` only for `confirm` type. */
+    okCancel?: boolean;
+    okButtonProps?: ButtonProps;
+    cancelButtonProps?: ButtonProps;
+    /** Return a Promise to keep the OK button in loading state until it settles. */
+    onOk?: () => unknown;
+    onCancel?: () => unknown;
+    afterClose?: () => void;
+    centered?: boolean;
+    width?: number | string;
+    maskClosable?: boolean;
+    closable?: boolean;
+    keyboard?: boolean;
+    className?: string;
+    classNames?: SemanticClassNames<ModalSemanticPart>;
+    styles?: SemanticStyles<ModalSemanticPart>;
+}
+export interface ConfirmDialogProps extends ModalFuncProps {
+    open: boolean;
+    /** Requests close (container flips `open` to false). */
+    close: () => void;
+}
+export declare function ConfirmDialog({ open, close, type, icon, title, content, okText, cancelText, okCancel, okButtonProps, cancelButtonProps, onOk, onCancel, afterClose, centered, width, maskClosable, closable, keyboard, className, classNames, styles, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/modal/confirm-dialog.js

@@ -0,0 +1,193 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+import { cx } from "../../utils/semantic.js";
+import { Button } from "../button/button.js";
+import { Modal } from "./modal.js";
+function isPromise(v) {
+    return !!v && 'function' == typeof v.then;
+}
+function ConfirmDialog({ open, close, type = 'confirm', icon, title, content, okText, cancelText, okCancel, okButtonProps, cancelButtonProps, onOk, onCancel, afterClose, centered = true, width = 416, maskClosable = false, closable = false, keyboard = true, className, classNames, styles }) {
+    const [loading, setLoading] = useState(false);
+    const showCancel = okCancel ?? 'confirm' === type;
+    const runAndClose = async (handler, withLoading)=>{
+        const result = handler?.();
+        if (isPromise(result)) {
+            if (withLoading) setLoading(true);
+            try {
+                await result;
+                close();
+            } catch  {} finally{
+                if (withLoading) setLoading(false);
+            }
+        } else close();
+    };
+    const handleOk = ()=>runAndClose(onOk, true);
+    const handleCancel = ()=>runAndClose(onCancel, false);
+    const iconNode = null === icon ? null : icon ?? /*#__PURE__*/ jsx(StatusIcon, {
+        type: type
+    });
+    const mergedClassNames = className ? {
+        ...classNames,
+        root: cx(classNames?.root, className)
+    } : classNames;
+    return /*#__PURE__*/ jsx(Modal, {
+        open: open,
+        title: null,
+        onClose: handleCancel,
+        afterClose: afterClose,
+        width: width,
+        centered: centered,
+        closable: closable,
+        maskClosable: maskClosable,
+        keyboard: keyboard,
+        classNames: mergedClassNames,
+        styles: styles,
+        footer: /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                showCancel && /*#__PURE__*/ jsx(Button, {
+                    variant: "secondary",
+                    onClick: handleCancel,
+                    ...cancelButtonProps,
+                    children: cancelText ?? 'Cancel'
+                }),
+                /*#__PURE__*/ jsx(Button, {
+                    variant: "primary",
+                    loading: loading,
+                    onClick: handleOk,
+                    ...okButtonProps,
+                    children: okText ?? 'OK'
+                })
+            ]
+        }),
+        children: /*#__PURE__*/ jsxs("div", {
+            "data-tao-modal-confirm-body": "",
+            children: [
+                null != iconNode && /*#__PURE__*/ jsx("span", {
+                    "data-tao-modal-confirm-icon": "",
+                    "data-tao-status": type,
+                    children: iconNode
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    "data-tao-modal-confirm-main": "",
+                    children: [
+                        null != title && /*#__PURE__*/ jsx("div", {
+                            "data-tao-modal-confirm-title": "",
+                            children: title
+                        }),
+                        null != content && /*#__PURE__*/ jsx("div", {
+                            "data-tao-modal-confirm-content": "",
+                            children: content
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+function StatusIcon(t0) {
+    const $ = c(5);
+    const { type } = t0;
+    let t1;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t1 = {
+            width: 22,
+            height: 22,
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": true
+        };
+        $[0] = t1;
+    } else t1 = $[0];
+    const common = t1;
+    switch(type){
+        case "success":
+            {
+                let t2;
+                if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+                    t2 = /*#__PURE__*/ jsxs("svg", {
+                        ...common,
+                        children: [
+                            /*#__PURE__*/ jsx("circle", {
+                                cx: "12",
+                                cy: "12",
+                                r: "9"
+                            }),
+                            /*#__PURE__*/ jsx("path", {
+                                d: "m8.5 12 2.5 2.5 4.5-5"
+                            })
+                        ]
+                    });
+                    $[1] = t2;
+                } else t2 = $[1];
+                return t2;
+            }
+        case "error":
+            {
+                let t2;
+                if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+                    t2 = /*#__PURE__*/ jsxs("svg", {
+                        ...common,
+                        children: [
+                            /*#__PURE__*/ jsx("circle", {
+                                cx: "12",
+                                cy: "12",
+                                r: "9"
+                            }),
+                            /*#__PURE__*/ jsx("path", {
+                                d: "M15 9 9 15M9 9l6 6"
+                            })
+                        ]
+                    });
+                    $[2] = t2;
+                } else t2 = $[2];
+                return t2;
+            }
+        case "warning":
+        case "confirm":
+            {
+                let t2;
+                if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+                    t2 = /*#__PURE__*/ jsxs("svg", {
+                        ...common,
+                        children: [
+                            /*#__PURE__*/ jsx("path", {
+                                d: "M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"
+                            }),
+                            /*#__PURE__*/ jsx("path", {
+                                d: "M12 9v4M12 17h.01"
+                            })
+                        ]
+                    });
+                    $[3] = t2;
+                } else t2 = $[3];
+                return t2;
+            }
+        default:
+            {
+                let t2;
+                if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+                    t2 = /*#__PURE__*/ jsxs("svg", {
+                        ...common,
+                        children: [
+                            /*#__PURE__*/ jsx("circle", {
+                                cx: "12",
+                                cy: "12",
+                                r: "9"
+                            }),
+                            /*#__PURE__*/ jsx("path", {
+                                d: "M12 16v-4M12 8h.01"
+                            })
+                        ]
+                    });
+                    $[4] = t2;
+                } else t2 = $[4];
+                return t2;
+            }
+    }
+}
+export { ConfirmDialog };

package/dist/components/modal/confirm.d.ts

@@ -0,0 +1,13 @@
+import { type ModalFuncProps } from './confirm-dialog';
+export interface ModalFuncReturn {
+    destroy: () => void;
+    update: (configUpdate: Partial<ModalFuncProps> | ((prev: ModalFuncProps) => ModalFuncProps)) => void;
+}
+/** Registry of close handlers so `Modal.destroyAll()` can tear every instance down. */
+export declare const destroyFns: Array<() => void>;
+export default function confirm(config: ModalFuncProps): ModalFuncReturn;
+export declare const withConfirm: (props: ModalFuncProps) => ModalFuncProps;
+export declare const withInfo: (props: ModalFuncProps) => ModalFuncProps;
+export declare const withSuccess: (props: ModalFuncProps) => ModalFuncProps;
+export declare const withError: (props: ModalFuncProps) => ModalFuncProps;
+export declare const withWarn: (props: ModalFuncProps) => ModalFuncProps;

package/dist/components/modal/confirm.js

@@ -0,0 +1,56 @@
+import { jsx } from "react/jsx-runtime";
+import { createRoot } from "react-dom/client";
+import { ConfirmDialog } from "./confirm-dialog.js";
+const destroyFns = [];
+function confirm_confirm(config) {
+    const container = document.createElement('div');
+    const root = createRoot(container);
+    let currentConfig = config;
+    let open = true;
+    function destroy() {
+        root.unmount();
+        const idx = destroyFns.indexOf(destroy);
+        if (-1 !== idx) destroyFns.splice(idx, 1);
+    }
+    function afterClose() {
+        currentConfig.afterClose?.();
+        destroy();
+    }
+    function close() {
+        open = false;
+        render();
+    }
+    function render() {
+        root.render(/*#__PURE__*/ jsx(ConfirmDialog, {
+            ...currentConfig,
+            open: open,
+            close: close,
+            afterClose: afterClose
+        }));
+    }
+    function update(configUpdate) {
+        currentConfig = 'function' == typeof configUpdate ? configUpdate(currentConfig) : {
+            ...currentConfig,
+            ...configUpdate
+        };
+        render();
+    }
+    render();
+    destroyFns.push(destroy);
+    return {
+        destroy: close,
+        update
+    };
+}
+const withType = (type, okCancel)=>(props)=>({
+            okCancel,
+            ...props,
+            type
+        });
+const withConfirm = withType('confirm', true);
+const withInfo = withType('info', false);
+const withSuccess = withType('success', false);
+const withError = withType('error', false);
+const withWarn = withType('warning', false);
+export default confirm_confirm;
+export { destroyFns, withConfirm, withError, withInfo, withSuccess, withWarn };

package/dist/components/modal/index.d.ts

@@ -0,0 +1,21 @@
+import { type ModalFuncReturn } from './confirm';
+import type { ModalFuncProps } from './confirm-dialog';
+import { Modal as InternalModal } from './modal';
+import { useModal } from './use-modal';
+type ConfirmFn = (config: ModalFuncProps) => ModalFuncReturn;
+type ModalType = typeof InternalModal & {
+    confirm: ConfirmFn;
+    info: ConfirmFn;
+    success: ConfirmFn;
+    error: ConfirmFn;
+    warning: ConfirmFn;
+    warn: ConfirmFn;
+    useModal: typeof useModal;
+    destroyAll: () => void;
+};
+declare const Modal: ModalType;
+export type { ModalFuncReturn } from './confirm';
+export type { ConfirmType, ModalFuncProps } from './confirm-dialog';
+export type { ModalFooterRender, ModalProps, ModalSemanticPart } from './modal';
+export type { ModalHookApi } from './use-modal';
+export { Modal };

package/dist/components/modal/index.js

@@ -0,0 +1,18 @@
+import confirm_0, { destroyFns, withConfirm, withError, withInfo, withSuccess, withWarn } from "./confirm.js";
+import { Modal } from "./modal.js";
+import { useModal } from "./use-modal.js";
+const modal_Modal = Modal;
+modal_Modal.confirm = (config)=>confirm_0(withConfirm(config));
+modal_Modal.info = (config)=>confirm_0(withInfo(config));
+modal_Modal.success = (config)=>confirm_0(withSuccess(config));
+modal_Modal.error = (config)=>confirm_0(withError(config));
+modal_Modal.warning = (config)=>confirm_0(withWarn(config));
+modal_Modal.warn = modal_Modal.warning;
+modal_Modal.useModal = useModal;
+modal_Modal.destroyAll = ()=>{
+    while(destroyFns.length){
+        const close = destroyFns.pop();
+        close?.();
+    }
+};
+export { modal_Modal as Modal };