table-reuse/dist/index.esm.js

Common, reusable React UI components

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 button = (jsx(Button, { danger: config.danger, icon: config.icon, disabled: config.disabled, onClick: config.confirm ? undefined : config.onClick, style: { whiteSpace: "nowrap" }, type: config.type, children: !config.icon && config.label }));
    if (config.confirm) {
        return (jsx(Popconfirm, { title: config.confirm.title, description: config.confirm.description, onConfirm: config.onClick, okText: config.confirm.okText || "Yes", cancelText: config.confirm.cancelText || "No", disabled: config.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 openDrawer = useCallback((data) => {
        if (data !== undefined) {
            setEditingItem(data);
        }
        setDrawerVisible(true);
    }, []);
    const closeDrawer = useCallback(() => {
        setDrawerVisible(false);
    }, []);
    const clearEditingItem = useCallback(() => {
        setEditingItem(undefined);
    }, []);
    const onAdd = useCallback(() => {
        clearEditingItem();
        openDrawer();
    }, [clearEditingItem, openDrawer]);
    const onEdit = useCallback((record) => {
        openDrawer(record);
    }, [openDrawer]);
    return {
        drawerVisible,
        editingItem,
        openDrawer,
        closeDrawer,
        clearEditingItem,
        onAdd,
        onEdit,
    };
}

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