table-reuse/dist/components/ActionView.js

Common, reusable React UI components

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button, Dropdown } from "antd";
import { MoreOutlined } from "@ant-design/icons";
import { ActionButton } from "./ActionButton";
export 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 }))] }));
};
//# sourceMappingURL=ActionView.js.map