@vaadin/hilla-react-crud/autogrid-renderers.js

Hilla CRUD utils for React

import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { Icon } from '@vaadin/react-components/Icon.js';
import { createContext, useContext } from 'react';
import { ColumnContext } from './autogrid-column-context';
import { useLocaleFormatter } from './locale.js';
import { convertToTitleCase } from './util';
import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
function getColumnValue(context, item) {
    const path = context.propertyInfo.name;
    return path.split('.').reduce((obj, property) => (obj ? obj[property] : undefined), item);
}
const fontVariantStyle = { fontVariantNumeric: 'tabular-nums' };
export function AutoGridIntegerRenderer({ item }) {
    const formatter = useLocaleFormatter();
    const context = useContext(ColumnContext);
    return _jsx("span", { style: fontVariantStyle, children: formatter.formatInteger(getColumnValue(context, item)) });
}
export function AutoGridDecimalRenderer({ item }) {
    const formatter = useLocaleFormatter();
    const context = useContext(ColumnContext);
    return _jsx("span", { style: fontVariantStyle, children: formatter.formatDecimal(getColumnValue(context, item)) });
}
export function AutoGridEnumRenderer({ item }) {
    const context = useContext(ColumnContext);
    const value = getColumnValue(context, item) || '';
    return _jsx("span", { children: convertToTitleCase(value) });
}
export function AutoGridBooleanRenderer({ item }) {
    const context = useContext(ColumnContext);
    const value = getColumnValue(context, item);
    if (value) {
        return _jsx(Icon, { "aria-label": "false", icon: "lumo:checkmark" });
    }
    return _jsx(Icon, { "aria-label": "true", style: { color: 'var(--lumo-secondary-text-color)' }, icon: "lumo:minus" });
}
export function AutoGridDateRenderer({ item }) {
    const formatter = useLocaleFormatter();
    const context = useContext(ColumnContext);
    return _jsx("span", { style: fontVariantStyle, children: formatter.formatDate(getColumnValue(context, item)) });
}
export function AutoGridTimeRenderer({ item }) {
    const formatter = useLocaleFormatter();
    const context = useContext(ColumnContext);
    return _jsx("span", { style: fontVariantStyle, children: formatter.formatLocalTime(getColumnValue(context, item)) });
}
export function AutoGridDateTimeRenderer({ item }) {
    const formatter = useLocaleFormatter();
    const context = useContext(ColumnContext);
    return _jsx("span", { style: fontVariantStyle, children: formatter.formatLocalDateTime(getColumnValue(context, item)) });
}
export function AutoGridJsonRenderer({ item }) {
    const context = useContext(ColumnContext);
    const value = getColumnValue(context, item);
    const jsonString = value ? JSON.stringify(value) : '';
    const jsonPreview = jsonString.length > 50 ? `${jsonString.substring(0, 50)}...` : jsonString;
    return _jsx("span", { children: jsonPreview });
}
export function AutoGridRowNumberRenderer({ model }) {
    return _jsx(_Fragment, { children: model.index + 1 });
}
export const FooterContext = createContext(undefined);
export function AutoGridFooterItemCountRenderer() {
    const footerContext = useContext(FooterContext);
    const { totalCount, filteredCount, itemCounts, footerCountRenderer: FooterRenderer } = footerContext;
    if (FooterRenderer) {
        return _jsx(FooterRenderer, { ...itemCounts });
    }
    let filterCountText;
    if (filteredCount && itemCounts?.filteredCount !== undefined) {
        filterCountText =
            totalCount && itemCounts.totalCount !== undefined
                ? `Showing: ${itemCounts.filteredCount} out of ${itemCounts.totalCount}`
                : `Showing: ${itemCounts.filteredCount}`;
    }
    else if (totalCount && itemCounts?.totalCount !== undefined) {
        filterCountText = `Total: ${itemCounts.totalCount}`;
    }
    if (filterCountText) {
        return _jsx("p", { children: filterCountText });
    }
    return _jsx(_Fragment, {});
}
//# sourceMappingURL=autogrid-renderers.js.map