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

Powerful 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';
import { shouldRenderStyledColumnOnRow } from '../../Utilities/Helpers/StyledColumns/StyledColumnHelper';
const OVERFLOW_CLASS = {
    Truncate: 'ab-Badge__wrapper--truncate',
    Wrap: 'ab-Badge__wrapper--wrap',
    Scroll: 'ab-Badge__wrapper--scroll',
};
const resolveBadgeRowJustify = (alignment) => {
    switch (alignment) {
        case 'Center':
            return 'center';
        case 'Right':
            return 'flex-end';
        case 'Left':
            return 'flex-start';
        default:
            return null;
    }
};
export const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
    const badgeStyle = styledColumn.BadgeStyle;
    const overflowMode = badgeStyle.OverflowMode ?? 'Truncate';
    const wrapperClassName = `ab-Badge__wrapper ${OVERFLOW_CLASS[overflowMode]}`;
    const spacing = typeof badgeStyle.Spacing === 'number' ? badgeStyle.Spacing : null;
    const rowJustify = resolveBadgeRowJustify(badgeStyle.Font?.Alignment);
    return class BadgetRenderer {
        eGui;
        unmountReactRoot;
        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 = wrapperClassName;
            if (spacing != null) {
                this.eGui.style.setProperty('--ab-cmp-badge__spacing', `${spacing}px`);
            }
            if (rowJustify) {
                this.eGui.style.setProperty('justify-content', rowJustify);
                this.eGui.style.setProperty('width', '100%');
            }
            if (!shouldRenderStyledColumnOnRow(styledColumn, params.node, adaptableApi)) {
                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 predicateDefHandlerContext = {
                    value: value,
                    rawValue: value,
                    oldValue: null,
                    displayValue: params.formatValue,
                    node: params.node,
                    column: abColumn,
                    ...adaptableApi.internalApi.buildBaseContext(),
                };
                const badge = api.styledColumnApi.internalApi.getApplicableBadge(badgeStyle, predicateDefHandlerContext);
                const formattedValue = badge?.IconProperties?.IconOnly
                    ? ''
                    : params.formatValue?.(value) ?? value ?? '';
                const isNullValue = formattedValue === '' || formattedValue === null || formattedValue === undefined;
                if (!isNullValue) {
                    const config = { value: formattedValue };
                    if (badge) {
                        config.badge = badge;
                    }
                    badgesConfig.push(config);
                }
            }
            this.renderBadges(badgesConfig, api, params);
        }
        renderSingularValues(params, adaptableApi) {
            let formattedValue = params.formatValue?.(params.value) ?? params.value ?? '';
            const predicateDefHandlerContext = {
                value: params.value,
                rawValue: 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 (isNullValue || !badge) {
                this.eGui.innerHTML = formattedValue;
                return;
            }
            if (badge.IconProperties?.IconOnly) {
                formattedValue = '';
            }
            this.renderBadges([
                {
                    badge,
                    value: formattedValue,
                },
            ], api, params);
        }
        renderBadges(config, api, params) {
            const adaptable = this.getAdaptableInstance(params);
            const badges = config.map(({ badge, value }, index) => {
                if (!badge) {
                    return React.createElement('span', {
                        key: index,
                        className: 'ab-Badge ab-Badge--normal ab-Badge__unstyled',
                        children: value,
                    });
                }
                return React.createElement(Badge, {
                    key: index,
                    pillStyle: badge.PillStyle,
                    children: value,
                    icon: badge.IconProperties?.Icon,
                    iconPosition: badge.IconProperties?.Position ?? 'start',
                    shape: badge.Shape,
                    density: badgeStyle.Density ?? 'Normal',
                    iconGap: badge.IconProperties?.Gap,
                });
            });
            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) {
            return false;
        }
    };
};