@wener/console/lib/components/FunctionButton.js

Base console UI toolkit

import React, { forwardRef, useState } from "react";
import { HiExclamationCircle } from "react-icons/hi2";
import { PiArrowsCounterClockwiseLight, PiArrowSquareOutLight, PiTrashSimpleLight, PiUserPlusLight } from "react-icons/pi";
import { Slot } from "@radix-ui/react-slot";
import { flexRender, useDebounce } from "@wener/reaction";
import { clsx } from "clsx";
import { Daisy } from "../daisy/index.js";
import { showErrorToast } from "../toast/index.js";
import { cn } from "../tw/index.js";
(function (FunctionButton) {
    FunctionButton.Refresh = ({ className, children, onClick, onRefresh = onClick, loading, error, size, ...props }) => {
        const _loading = useDebounce(loading, 250);
        const sz = Daisy.getSize(size);
        const btn = /*#__PURE__*/ React.createElement("button", {
            type: "button",
            className: cn("btn", !children && "btn-square", error && "join-item", sz?.btn, className),
            onClick: (e) => {
                if (loading) {
                    return;
                }
                onRefresh?.(e);
            },
            ...props
        }, !_loading && /*#__PURE__*/ React.createElement(PiArrowsCounterClockwiseLight, null), _loading && /*#__PURE__*/ React.createElement("div", {
            className: cn("loading loading-spinner", sz?.loading)
        }), children);
        if (error) {
            return /*#__PURE__*/ React.createElement("div", {
                className: cn("join")
            }, btn, /*#__PURE__*/ React.createElement("button", {
                type: "button",
                className: cn("btn btn-square btn-outline btn-warning", sz?.btn, className),
                onClick: () => {
                    showErrorToast(error);
                }
            }, /*#__PURE__*/ React.createElement(HiExclamationCircle, null)));
        }
        return /*#__PURE__*/ React.createElement(React.Fragment, null, btn);
    };
    FunctionButton.Submit = ({ children = /*#__PURE__*/ React.createElement(React.Fragment, null, "\u63D0\u4EA4"), loading, ...props }) => {
        const sz = Daisy.getSize(props.size);
        return /*#__PURE__*/ React.createElement(FunctionButton.Button, {
            type: "submit",
            ...props
        }, loading && /*#__PURE__*/ React.createElement("div", {
            className: cn("loading loading-spinner", sz?.loading)
        }), children);
    };
    FunctionButton.Popup = ({ onPopup, children, className, ...props }) => {
        return /*#__PURE__*/ React.createElement(FunctionButton.Button, {
            ...props,
            className: cn(!children && "btn-square", className),
            onClick: onPopup
        }, children ?? /*#__PURE__*/ React.createElement(PiArrowSquareOutLight, null));
    };
    FunctionButton.Delete = ({ onDelete, children, className, ...props }) => {
        /*
    <button
                        type={'button'}
                        className={'btn btn-square btn-error btn-sm'}
                        onClick={() => {
                          showResourceDeleteAlterDialog({
                            schema,
                            data: res,
                            onSubmit: refresh,
                          });
                        }}
                      >
                        <PiTrashSimpleLight />
                      </button>
     */ return /*#__PURE__*/ React.createElement(FunctionButton.Button, {
            ...props,
            icon: PiTrashSimpleLight,
            className: cn("btn-error", className),
            onAction: onDelete
        }, children);
    };
    FunctionButton.BindCustomer = /*#__PURE__*/ forwardRef(({ children, className, ...props }, ref) => {
        return /*#__PURE__*/ React.createElement(FunctionButton.Button, {
            icon: PiUserPlusLight,
            ...props
        });
    });
    FunctionButton.BindUser = ({ children, className, ...props }) => {
        return /*#__PURE__*/ React.createElement(FunctionButton.Button, {
            icon: PiUserPlusLight,
            ...props
        });
    };
    FunctionButton.Button = ({ size, children, asChild, className, onAction, onClick, icon, text, loading, ref, ...props }) => {
        const sz = Daisy.getSize(size);
        const [_loading, setLoading] = useState(false);
        loading ||= _loading;
        const Comp = asChild ? Slot : "button";
        if (!onClick && onAction) {
            onClick = (e) => {
                if (loading) {
                    return;
                }
                const p = onAction(e);
                if (p && p.then) {
                    setLoading(true);
                    p.then(() => {
                        setLoading(false);
                    }).catch((e) => {
                        setLoading(false);
                        // 不一定是直接处理error
                        // showErrorToast(e);
                    });
                }
            };
        }
        let square = false;
        if (!children) {
            let _icon;
            square = Boolean(icon && !text);
            if (loading) {
                _icon = /*#__PURE__*/ React.createElement("div", {
                    className: clsx("loading loading-spinner", sz?.loading)
                });
            }
            else {
                _icon = flexRender(icon, {
                    className: sz?.icon
                });
            }
            children = /*#__PURE__*/ React.createElement(React.Fragment, null, _icon, text);
        }
        return /*#__PURE__*/ React.createElement(Comp, {
            type: "button",
            className: cn("btn", sz?.btn, square && "btn-square", className),
            "data-loading": loading || null,
            ref: ref,
            ...props,
            onClick
        }, children);
    };
})(FunctionButton || (FunctionButton = {}));
export var FunctionButton;
//# sourceMappingURL=FunctionButton.js.map