@lobehub/ui/es/dashboard/TableIconActions/TableIconActions.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

"use client";
import FlexBasic_default from "../../Flex/FlexBasic.mjs";
import ActionIcon from "../../base-ui/ActionIcon/ActionIcon.mjs";
import { jsx } from "react/jsx-runtime";
//#region src/dashboard/TableIconActions/TableIconActions.tsx
/** `ActionIcon` `size="small"` is 24px. */
const ACTION_ICON_SIZE = 24;
const ACTION_ICON_GAP = 4;
/** Table cell horizontal padding, so the icons are not clipped by the column. */
const ACTION_CELL_PADDING = 32;
/** Column width for a row of `count` small filled action icons. */
const tableActionColumnWidth = (count) => count * ACTION_ICON_SIZE + Math.max(0, count - 1) * ACTION_ICON_GAP + ACTION_CELL_PADDING;
/** Right-aligned row of icon actions for a table's last column. */
const TableIconActions = ({ children }) => /* @__PURE__ */ jsx(FlexBasic_default, {
	horizontal: true,
	align: "center",
	gap: ACTION_ICON_GAP,
	justify: "flex-end",
	width: "100%",
	children
});
TableIconActions.displayName = "TableIconActions";
/** One row action: a small filled icon button whose label is its name and tooltip. */
const TableIconAction = ({ danger, disabled, icon, label, loading, onClick }) => /* @__PURE__ */ jsx(ActionIcon, {
	"aria-label": label,
	danger,
	disabled,
	icon,
	loading,
	size: "small",
	title: label,
	variant: "filled",
	onClick
});
TableIconAction.displayName = "TableIconAction";
//#endregion
export { TableIconAction, TableIconActions as default, tableActionColumnWidth };

//# sourceMappingURL=TableIconActions.mjs.map