action-view/dist/index.cjs.js

action-view

'use strict';

var jsxRuntime = require('react/jsx-runtime');
var antd = require('antd');
var icons = require('@ant-design/icons');
var react = require('react');

const ActionButton = ({ config }) => {
    const { label, onClick, confirm, ...buttonProps } = config;
    const button = (jsxRuntime.jsx(antd.Button, { ...buttonProps, onClick: confirm ? undefined : onClick, style: { whiteSpace: "nowrap" }, children: !buttonProps.icon && label }));
    if (confirm) {
        return (jsxRuntime.jsx(antd.Popconfirm, { title: confirm.title, 
            // description={confirm.description}
            onConfirm: onClick, okText: confirm.okText ?? "Yes", cancelText: confirm.cancelText ?? "No", disabled: buttonProps.disabled, children: button }));
    }
    return button;
};

const ActionView = ({ actions, maxVisible = 3, direction = "horizontal", gap = 0, moreIcon = jsxRuntime.jsx(icons.MoreOutlined, {}), }) => {
    const visibleActions = actions.slice(0, maxVisible);
    const overflowActions = actions.slice(maxVisible);
    const layoutClass = direction === "vertical" ? `flex flex-col items-start` : `flex flex-row items-center flex-wrap`;
    const moreButton = moreIcon ?? jsxRuntime.jsx(antd.Button, { icon: jsxRuntime.jsx(icons.MoreOutlined, {}) });
    return (jsxRuntime.jsxs("div", { className: layoutClass, style: { gap }, children: [visibleActions.map((btnConfig, index) => (jsxRuntime.jsx(ActionButton, { config: btnConfig }, index))), overflowActions.length > 0 && (jsxRuntime.jsx(antd.Dropdown, { menu: {
                    items: overflowActions.map((action) => ({
                        key: action.label,
                        label: action.label,
                        danger: action.danger,
                        disabled: action.disabled,
                        onClick: action.onClick,
                    })),
                }, placement: "bottomRight", children: moreButton }))] }));
};

const createButtons = (clickActions) => clickActions.map((btn, index) => jsxRuntime.jsx(ActionButton, { config: btn }, index));

function useDrawerController() {
    const [drawerVisible, setDrawerVisible] = react.useState(false);
    const [editingItem, setEditingItem] = react.useState(undefined);
    const [mode, setMode] = react.useState(undefined);
    // Open drawer helper with optional data
    const openDrawer = react.useCallback((data) => {
        if (data !== undefined) {
            setEditingItem(data);
        }
        else {
            setEditingItem(undefined);
        }
        setDrawerVisible(true);
    }, []);
    // Close drawer and reset all states
    const closeDrawer = react.useCallback(() => {
        setDrawerVisible(false);
        setEditingItem(undefined);
        setMode(undefined);
    }, []);
    // Reset editing state but keep drawer open if needed
    const reset = react.useCallback(() => {
        setEditingItem(undefined);
        setMode(undefined);
    }, []);
    // Mode-specific openers
    const openAdd = react.useCallback(() => {
        setMode("add");
        setEditingItem(undefined);
        setDrawerVisible(true);
    }, []);
    const openEdit = react.useCallback((data) => {
        setMode("edit");
        openDrawer(data);
    }, [openDrawer]);
    const openClone = react.useCallback((data) => {
        setMode("clone");
        openDrawer(data);
        if (!("id" in data)) {
            console.error("Need contain 'id'", data);
            return;
        }
        const { id, ...restData } = data;
        console.log("clone item id", id);
        openDrawer(restData);
    }, [openDrawer]);
    const openView = react.useCallback((data) => {
        setMode("view");
        openDrawer(data);
    }, [openDrawer]);
    // Mode flags for easy conditional rendering
    const isAdd = mode === "add";
    const isEdit = mode === "edit";
    const isClone = mode === "clone";
    const isView = mode === "view";
    return {
        drawerVisible,
        editingItem,
        mode,
        isAdd,
        isEdit,
        isClone,
        isView,
        openDrawer,
        closeDrawer,
        reset,
        openAdd,
        openEdit,
        openClone,
        openView,
    };
}

exports.ActionView = ActionView;
exports.createButtons = createButtons;
exports.useDrawerController = useDrawerController;
//# sourceMappingURL=index.cjs.js.map