@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
197 lines (196 loc) • 8.74 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { NewDropdownButton } from '../../components/DropdownButton';
import * as React from 'react';
import { IconComponent } from '../../components/Icon';
import { ADAPTABLE_BUTTON_SURFACE_DEFAULTS, AdaptableButtonView, } from '../../View/Components/AdaptableButton';
import { useRerender } from '../../components/utils/useRerender';
import { renderWithAdaptableContext } from '../../View/renderWithAdaptableContext';
import { LAYOUT_SELECT } from '../../Redux/ActionsReducers/LayoutRedux';
import { ACCESS_LEVEL_FULL } from '../../Utilities/Constants/GeneralConstants';
function getActionColumnButtonProps(button, index, adaptableApi, context, rerender) {
if (button.hidden?.(button, context)) {
return null;
}
const buttonLabel = adaptableApi.internalApi.getLabelForButton(button, context);
const buttonTooltip = adaptableApi.internalApi.getTooltipForButton(button, context);
const identifier = button.label ?? button.icon?.name ?? button.tooltip ?? `${index + 1}`;
return {
button,
buttonLabel,
buttonTooltip,
identifier,
};
}
const ActionButtons = (props) => {
const { buttons, adaptableApi, context, rerender } = props;
return (_jsx(_Fragment, { children: buttons.map((button, index) => {
const buttonProps = getActionColumnButtonProps(button, index, adaptableApi, context, rerender);
if (!buttonProps) {
return null;
}
const { button: actionButton, identifier } = buttonProps;
return (_jsx(AdaptableButtonView, { button: actionButton, context: context, api: adaptableApi, defaults: ADAPTABLE_BUTTON_SURFACE_DEFAULTS.actionColumn, iconSize: { height: 15, width: 15 }, "data-name": `action-button-${identifier}`, className: adaptableApi.internalApi.getStyleForButton(actionButton, context)?.className, onAfterClick: rerender }, actionButton.Uuid));
}) }));
};
const ActionColumnDropdown = (props) => {
const { buttons, adaptableApi, context, settings, rerender } = props;
const dropdownLabel = settings.dropdownLabel ?? 'Actions';
const items = buttons
.map((button, index) => {
const buttonProps = getActionColumnButtonProps(button, index, adaptableApi, context, rerender);
if (!buttonProps) {
return null;
}
const { button: actionButton, buttonLabel, buttonTooltip } = buttonProps;
const disabled = Boolean(actionButton.disabled?.(actionButton, context));
const menuIcon = adaptableApi.internalApi.getIconForButton(actionButton, context, {
height: 15,
width: 15,
});
return {
label: buttonLabel || buttonTooltip,
icon: menuIcon ? _jsx(IconComponent, { icon: menuIcon }) : undefined,
disabled,
onClick: () => {
actionButton.onClick?.(actionButton, context);
setTimeout(() => rerender(), 16);
},
};
})
.filter((item) => item != null);
if (!items.length) {
return null;
}
return (_jsx(NewDropdownButton, { "data-name": "action-column-dropdown", variant: "outlined", tone: "neutral", items: items, accessLevel: ACCESS_LEVEL_FULL, children: dropdownLabel }));
};
const ActionColumnCellContent = (props) => {
const { buttons, actionColumn, adaptableApi, context, rerender } = props;
const settings = actionColumn.actionColumnSettings ?? {};
if (settings.displayMode === 'dropdown') {
return (_jsx(ActionColumnDropdown, { buttons: buttons, adaptableApi: adaptableApi, context: context, settings: settings, rerender: rerender }));
}
return (_jsx(ActionButtons, { buttons: buttons, adaptableApi: adaptableApi, context: context, rerender: rerender }));
};
function shouldRenderActionColumnForRow(actionColumn, adaptableApi, node) {
const isGroupedRow = adaptableApi.gridApi.isGroupRowNode(node);
const isSummaryRow = adaptableApi.gridApi.isSummaryNode(node);
const isGrandTotalRowNode = adaptableApi.gridApi.isGrandTotalRowNode(node);
if (isGrandTotalRowNode) {
return !actionColumn.rowScope?.ExcludeTotalRows;
}
if (isGroupedRow) {
return !actionColumn.rowScope?.ExcludeGroupRows;
}
if (isSummaryRow) {
return !actionColumn.rowScope?.ExcludeSummaryRows;
}
return !actionColumn.rowScope?.ExcludeDataRows;
}
export const ReactActionColumnRenderer = (props) => {
const rerender = useRerender();
const adaptable = props.context.__adaptable;
if (!adaptable) {
console.warn('Adaptable not found in context of ActionColumnRenderer');
return null;
}
const { actionButtons, actionColumn } = adaptable.api.actionColumnApi.internalApi.getActionColumnsAndButtons(props.colDef);
if (!actionColumn || !actionButtons.length) {
return null;
}
if (!shouldRenderActionColumnForRow(actionColumn, adaptable.api, props.node)) {
return null;
}
const unsubscribe = adaptable.api.eventApi.on('AdaptableStateChanged', (eventInfo) => {
if (eventInfo.actionName === LAYOUT_SELECT) {
if (eventInfo.oldState.Layout.CurrentLayout !== eventInfo.newState.Layout.CurrentLayout) {
rerender();
}
}
});
React.useEffect(() => {
return () => {
unsubscribe();
};
}, []);
const pkValue = adaptable.getPrimaryKeyValueFromRowNode(props.node, props.api);
const buttonContext = {
actionColumn,
primaryKeyValue: pkValue,
rowNode: props.node,
...adaptable.api.internalApi.buildBaseContext(),
data: props.data,
};
return (_jsx("div", { className: "ab-ActionColumn", children: _jsx(ActionColumnCellContent, { buttons: actionButtons, actionColumn: actionColumn, adaptableApi: adaptable.api, context: buttonContext, rerender: rerender }) }));
};
export class ActionColumnRenderer {
eGui;
eventListener;
unmountReactRoot;
layoutSwitchUnsubscribe;
actionButtons;
actionColumn;
init(params) {
const adaptable = params.context.__adaptable;
if (!adaptable) {
console.warn('Adaptable not found in context of ActionColumnRenderer');
return null;
}
const { actionButtons, actionColumn } = adaptable.api.actionColumnApi.internalApi.getActionColumnsAndButtons(params.colDef);
if (!actionColumn || !actionButtons.length) {
return;
}
this.actionButtons = actionButtons;
this.actionColumn = actionColumn;
this.eGui = document.createElement('div');
this.eGui.className = 'ab-ActionColumn';
if (!shouldRenderActionColumnForRow(actionColumn, adaptable.api, params.node)) {
this.eGui.innerHTML = '';
return;
}
const pkValue = adaptable.getPrimaryKeyValueFromRowNode(params.node, params.api);
const buttonContext = {
actionColumn,
primaryKeyValue: pkValue,
rowNode: params.node,
...adaptable.api.internalApi.buildBaseContext(),
data: params.data,
};
const eGui = this.eGui;
const doRender = () => {
this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(ActionColumnCellContent({
buttons: this.actionButtons,
actionColumn: this.actionColumn,
context: buttonContext,
rerender: doRender,
adaptableApi: adaptable.api,
}), adaptable), eGui);
};
this.render = doRender;
this.layoutSwitchUnsubscribe = adaptable.api.eventApi.on('AdaptableStateChanged', (eventInfo) => {
if (eventInfo.actionName === LAYOUT_SELECT) {
if (eventInfo.oldState.Layout.CurrentLayout !== eventInfo.newState.Layout.CurrentLayout) {
const { actionButtons: freshActionButtons, actionColumn: freshActionColumn } = adaptable.api.actionColumnApi.internalApi.getActionColumnsAndButtons(params.colDef);
this.actionButtons = freshActionButtons;
this.actionColumn = freshActionColumn;
doRender();
}
}
});
doRender();
}
render() { }
getGui() {
return this.eGui;
}
refresh(params) {
this.render();
return true;
}
destroy() {
this.layoutSwitchUnsubscribe?.();
this.unmountReactRoot?.();
if (this.eGui) {
this.eGui.removeEventListener('click', this.eventListener);
}
}
}