@adaptabletools/adaptable/src/agGrid/cellRenderers/BadgeRenderer.js

Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements

import { Badge } from '../../View/Components/Badge';
import { renderWithAdaptableContext } from '../../View/renderWithAdaptableContext';
import * as React from 'react';
export const getBadgeRendererForColumn = (badgeStyle, abColumn, api) => {
    return class BadgetRenderer {
        getAdaptableInstance(params) {
            const adaptable = params.context.__adaptable;
            return adaptable;
        }
        init(params) {
            const adaptable = this.getAdaptableInstance(params);
            const adaptableApi = adaptable.api;
            this.eGui = document.createElement('div');
            this.eGui.className = 'ab-Badge__wrapper';
            const isGroupedRow = params.node.group;
            const isSummaryRow = adaptableApi.gridApi.isSummaryNode(params.node);
            let shouldRender = true;
            if (isGroupedRow) {
                if (badgeStyle.RowScope?.ExcludeGroupRows) {
                    shouldRender = false;
                }
            }
            else if (isSummaryRow) {
                if (badgeStyle.RowScope?.ExcludeSummaryRows) {
                    shouldRender = false;
                }
            }
            else {
                if (badgeStyle.RowScope?.ExcludeDataRows) {
                    shouldRender = false;
                }
            }
            if (!shouldRender) {
                const formattedValue = params.formatValue?.(params.value) ?? params.value ?? '';
                this.eGui.innerHTML = formattedValue;
                return;
            }
            const arrayTypes = ['numberArray', 'textArray'];
            if (arrayTypes.includes(abColumn.dataType)) {
                this.renderArrayValues(params, adaptableApi);
            }
            else {
                this.renderSingularValues(params, adaptableApi);
            }
        }
        renderArrayValues(params, adaptableApi) {
            let badgesConfig = [];
            if (!Array.isArray(params.value) || params.value.length === 0) {
                const formattedValue = params.formatValue?.(params.value) ?? params.value ?? '';
                this.eGui.innerHTML = formattedValue;
                return;
            }
            for (const value of params.value) {
                const formattedValue = params.formatValue?.(value) ?? value ?? '';
                const predicateDefHandlerContext = {
                    value: value,
                    oldValue: null,
                    displayValue: params.formatValue,
                    node: params.node,
                    column: abColumn,
                    ...adaptableApi.internalApi.buildBaseContext(),
                };
                const badge = api.styledColumnApi.internalApi.getApplicableBadge(badgeStyle, predicateDefHandlerContext);
                const isNullValue = formattedValue === '' || formattedValue === null || formattedValue === undefined;
                if (!isNullValue && badge) {
                    badgesConfig.push({
                        badge: { ...badge },
                        value: formattedValue,
                    });
                }
            }
            this.renderBadges(badgesConfig, api, params);
        }
        renderSingularValues(params, adaptableApi) {
            const formattedValue = params.formatValue?.(params.value) ?? params.value ?? '';
            const predicateDefHandlerContext = {
                value: params.value,
                oldValue: null,
                displayValue: params.formatValue,
                node: params.node,
                column: abColumn,
                ...adaptableApi.internalApi.buildBaseContext(),
            };
            const badge = api.styledColumnApi.internalApi.getApplicableBadge(badgeStyle, predicateDefHandlerContext);
            const isNullValue = formattedValue === '' || formattedValue === null || formattedValue === undefined;
            if (
            // empty values
            isNullValue ||
                // no badge
                !badge) {
                this.eGui.innerHTML = formattedValue;
                return;
            }
            this.renderBadges([
                {
                    badge,
                    value: formattedValue,
                },
            ], api, params);
        }
        renderBadges(config, api, params) {
            const adaptable = this.getAdaptableInstance(params);
            const badges = config.map(({ badge, value }, index) => {
                return React.createElement(Badge, {
                    key: index,
                    adaptableStyle: badge.Style,
                    children: value,
                    icon: badge.Icon,
                    iconPosition: badge.IconPosition ?? 'start',
                    gap: 5,
                });
            });
            this.unmountReactRoot = api.internalApi
                .getAdaptableInstance()
                .renderReactRoot(renderWithAdaptableContext(React.createElement(React.Fragment, { children: badges }), adaptable), this.eGui);
        }
        getGui() {
            return this.eGui;
        }
        destroy() {
            this.unmountReactRoot?.();
        }
        refresh(params) {
            // by returning FALSE we force a re-render every time the cell value changes
            return false;
        }
    };
};