table-reuse/dist/index.cjs.js

Common, reusable React UI components

'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 button = (jsxRuntime.jsx(antd.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 (jsxRuntime.jsx(antd.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 = 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 openDrawer = react.useCallback((data) => {
        if (data !== undefined) {
            setEditingItem(data);
        }
        setDrawerVisible(true);
    }, []);
    const closeDrawer = react.useCallback(() => {
        setDrawerVisible(false);
    }, []);
    const clearEditingItem = react.useCallback(() => {
        setEditingItem(undefined);
    }, []);
    const onAdd = react.useCallback(() => {
        clearEditingItem();
        openDrawer();
    }, [clearEditingItem, openDrawer]);
    const onEdit = react.useCallback((record) => {
        openDrawer(record);
    }, [openDrawer]);
    return {
        drawerVisible,
        editingItem,
        openDrawer,
        closeDrawer,
        clearEditingItem,
        onAdd,
        onEdit,
    };
}

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