@gravity-ui/uikit
Version:
Gravity UI base styling and components
118 lines (117 loc) • 6.3 kB
JavaScript
'use client';
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.actionsColumnId = void 0;
exports.enhanceSystemColumn = enhanceSystemColumn;
exports.withTableActions = withTableActions;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const icons_1 = require("@gravity-ui/icons");
const memoize_1 = tslib_1.__importDefault(require("lodash/memoize.js"));
const hooks_1 = require("../../../../hooks/index.js");
const private_1 = require("../../../../hooks/private/index.js");
const Button_1 = require("../../../Button/index.js");
const Icon_1 = require("../../../Icon/index.js");
const Menu_1 = require("../../../Menu/index.js");
const Popup_1 = require("../../../Popup/index.js");
const cn_1 = require("../../../utils/cn.js");
const getComponentName_1 = require("../../../utils/getComponentName.js");
const i18n_1 = tslib_1.__importDefault(require("../../i18n/index.js"));
require("./withTableActions.css");
exports.actionsColumnId = '_actions';
function enhanceSystemColumn(columns, enhancer) {
const existedColumn = columns.find(({ id }) => id === exports.actionsColumnId);
const systemColumn = existedColumn || {
id: exports.actionsColumnId,
name: '',
sticky: 'end',
width: 28, // button width
placeholder: '',
};
enhancer(systemColumn);
return existedColumn ? columns : [...columns, systemColumn];
}
const isActionGroup = (config) => {
return Array.isArray(config.items);
};
const b = (0, cn_1.block)('table');
const actionsCn = b('actions');
const actionsButtonCn = b('actions-button');
const bPopup = (0, cn_1.block)('table-action-popup');
const menuCn = bPopup('menu');
const menuItemCn = bPopup('menu-item');
const DEFAULT_PLACEMENT = ['bottom-end', 'top-end'];
const DefaultRowActions = ({ index, item, getRowActions, getRowDescriptor, rowActionsSize, isRowDisabled, tableQa, }) => {
const [isPopupOpen, , closePopup, togglePopup] = (0, private_1.useBoolean)(false);
const anchorRef = React.useRef(null);
const rowId = (0, hooks_1.useUniqId)();
if (getRowActions === undefined) {
return null;
}
const renderPopupMenuItem = (action, index) => {
if (isActionGroup(action)) {
return ((0, jsx_runtime_1.jsx)(Menu_1.Menu.Group, { label: action.title, children: action.items.map(renderPopupMenuItem) }, index));
}
const { text, icon, handler, href, ...restProps } = action;
return ((0, jsx_runtime_1.jsx)(Menu_1.Menu.Item, { onClick: (event) => {
event.stopPropagation();
handler(item, index, event);
closePopup();
}, href: typeof href === 'function' ? href(item, index) : href, iconStart: icon, className: menuItemCn, ...restProps, children: text }, index));
};
const disabled = getRowDescriptor?.(item, index)?.disabled || isRowDisabled?.(item, index);
const actions = getRowActions(item, index);
if (actions.length === 0) {
return null;
}
return ((0, jsx_runtime_1.jsxs)("div", { className: actionsCn, children: [(0, jsx_runtime_1.jsx)(Popup_1.Popup, { open: isPopupOpen, anchorRef: anchorRef, placement: DEFAULT_PLACEMENT, onOutsideClick: closePopup, id: rowId, qa: tableQa && `${tableQa}-actions-popup`, children: (0, jsx_runtime_1.jsx)(Menu_1.Menu, { className: menuCn, size: rowActionsSize, children: actions.map(renderPopupMenuItem) }) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { view: "flat-secondary", className: actionsButtonCn, onClick: togglePopup, size: rowActionsSize, ref: anchorRef, disabled: disabled, qa: tableQa && `${tableQa}-actions-trigger-${index}`, "aria-label": (0, i18n_1.default)('label-actions'), "aria-expanded": isPopupOpen, "aria-controls": rowId, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { data: icons_1.Ellipsis }) })] }));
};
function withTableActions(TableComponent) {
const componentName = (0, getComponentName_1.getComponentName)(TableComponent);
const displayName = `withTableActions(${componentName})`;
return class extends React.Component {
static displayName = displayName;
state = {
popupOpen: false,
popupData: null,
};
render() {
const { renderRowActions, // eslint-disable-line @typescript-eslint/no-unused-vars
getRowActions, // eslint-disable-line @typescript-eslint/no-unused-vars
columns, onRowClick, ...restTableProps } = this.props;
return ((0, jsx_runtime_1.jsx)(TableComponent, { ...restTableProps, columns: this.enhanceColumns(columns), onRowClick: this.enhanceOnRowClick(onRowClick) }));
}
renderBodyCell = (item, index) => {
const { getRowActions, rowActionsSize, renderRowActions, isRowDisabled, getRowDescriptor, qa, } = this.props;
if (renderRowActions) {
return renderRowActions({ item, index });
}
return ((0, jsx_runtime_1.jsx)(DefaultRowActions, { index: index, item: item, getRowActions: getRowActions, rowActionsSize: rowActionsSize, getRowDescriptor: getRowDescriptor, isRowDisabled: isRowDisabled, tableQa: qa }));
};
// eslint-disable-next-line @typescript-eslint/member-ordering
enhanceColumns = (0, memoize_1.default)((columns) => enhanceSystemColumn(columns, (systemColumn) => {
systemColumn.template = this.renderBodyCell;
}));
// eslint-disable-next-line @typescript-eslint/member-ordering
enhanceOnRowClick = (0, memoize_1.default)((onRowClick) => {
if (!onRowClick) {
return onRowClick;
}
return (item, index, event) => {
if (
// @ts-expect-error
event.nativeEvent.target.closest(`.${menuCn}`)) {
return undefined;
}
if (
// @ts-expect-error
event.nativeEvent.target.matches(`.${actionsButtonCn}, .${actionsButtonCn} *`)) {
return undefined;
}
return onRowClick(item, index, event);
};
});
};
}
//# sourceMappingURL=withTableActions.js.map