action-view/dist/index.esm.js

action-view

import { jsx, jsxs } from 'react/jsx-runtime';
import { Button, Popconfirm, Dropdown } from 'antd';
import { MoreOutlined } from '@ant-design/icons';
import { useState, useCallback } from 'react';

const ActionButton = ({ config }) => {
    const { label, onClick, confirm, ...buttonProps } = config;
    const button = (jsx(Button, { ...buttonProps, onClick: confirm ? undefined : onClick, style: { whiteSpace: "nowrap" }, children: !buttonProps.icon && label }));
    if (confirm) {
        return (jsx(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 = jsx(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 ?? jsx(Button, { icon: jsx(MoreOutlined, {}) });
    return (jsxs("div", { className: layoutClass, style: { gap }, children: [visibleActions.map((btnConfig, index) => (jsx(ActionButton, { config: btnConfig }, index))), overflowActions.length > 0 && (jsx(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) => jsx(ActionButton, { config: btn }, index));

function useDrawerController() {
    const [drawerVisible, setDrawerVisible] = useState(false);
    const [editingItem, setEditingItem] = useState(undefined);
    const [mode, setMode] = useState(undefined);
    // Open drawer helper with optional data
    const openDrawer = useCallback((data) => {
        if (data !== undefined) {
            setEditingItem(data);
        }
        else {
            setEditingItem(undefined);
        }
        setDrawerVisible(true);
    }, []);
    // Close drawer and reset all states
    const closeDrawer = useCallback(() => {
        setDrawerVisible(false);
        setEditingItem(undefined);
        setMode(undefined);
    }, []);
    // Reset editing state but keep drawer open if needed
    const reset = useCallback(() => {
        setEditingItem(undefined);
        setMode(undefined);
    }, []);
    // Mode-specific openers
    const openAdd = useCallback(() => {
        setMode("add");
        setEditingItem(undefined);
        setDrawerVisible(true);
    }, []);
    const openEdit = useCallback((data) => {
        setMode("edit");
        openDrawer(data);
    }, [openDrawer]);
    const openClone = 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 = 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,
    };
}

export { ActionView, createButtons, useDrawerController };
//# sourceMappingURL=index.esm.js.map