@etsoo/materialui
Version:
TypeScript Material-UI Implementation
105 lines (104 loc) • 4.21 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { DateUtils, NumberUtils } from "@etsoo/shared";
import CheckIcon from "@mui/icons-material/Check";
import ClearIcon from "@mui/icons-material/Clear";
import { DateText } from "./texts/DateText";
import { GridDataType } from "@etsoo/react";
import CircularProgress from "@mui/material/CircularProgress";
/**
* Data grid renderers
*/
export var DataGridRenderers;
(function (DataGridRenderers) {
/**
* Default cell renderer
* @param param Props
* @returns Component
*/
function defaultCellRenderer({ cellProps, data, field, formattedValue, columnIndex, type, renderProps }) {
// Is loading
if (data == null) {
// First column, show loading indicator
if (columnIndex === 0)
return _jsx(CircularProgress, { size: 15 });
// Others return undefined
return undefined;
}
// No formatted value and data field
if (formattedValue == null && field == null)
return undefined;
// Cell value
const value = formattedValue ?? data[field];
if (value == null)
return undefined;
// For unknow and string type, keep the simple format
if (type === GridDataType.Unkwown)
return value;
else if (type === GridDataType.String)
return new String(value);
// For date time
// Conversion if necessary
if (type === GridDataType.Date || type === GridDataType.DateTime) {
const dateValue = value instanceof Date ? value : new Date(value);
const option = type === GridDataType.DateTime ? "ds" : "d";
const nearDays = renderProps?.nearDays;
if (nearDays != null) {
return (_jsx(DateText, { value: dateValue, locale: renderProps?.culture, timeZone: renderProps?.timeZone, options: option, nearDays: nearDays }));
}
return DateUtils.format(dateValue, renderProps?.culture, option, renderProps?.timeZone);
}
// For numbers
if (typeof value === "number") {
if (type === GridDataType.Money || type === GridDataType.IntMoney)
return NumberUtils.formatMoney(value, renderProps?.currency, renderProps?.culture, type === GridDataType.IntMoney, renderProps?.numberFormatOptions);
else
return NumberUtils.format(value, renderProps?.culture, renderProps?.numberFormatOptions);
}
// For boolean
if (typeof value === "boolean") {
// Add style
if ("align" in cellProps) {
cellProps.sx = {
paddingTop: "12px!important",
paddingBottom: "6px!important"
};
}
else {
cellProps.sx = {
paddingTop: "16px!important",
paddingBottom: "8px!important"
};
}
if (value)
return _jsx(CheckIcon, { fontSize: "small" });
else
return _jsx(ClearIcon, { fontSize: "small", color: "warning" });
}
// To string
return new String(value);
}
DataGridRenderers.defaultCellRenderer = defaultCellRenderer;
/**
* Default footer item renderer
* @param rows Rows
* @param props Renderer props
* @param location Renderer location (column index)
* @returns Component
*/
function defaultFooterItemRenderer(_rows, { index, states, checkable }, location = 0) {
const { selectedItems, loadedItems, hasNextPage } = states;
if (index === location) {
if (checkable) {
return [
selectedItems.length,
loadedItems.toLocaleString() + (hasNextPage ? "+" : "")
].join(" / ");
}
else {
return loadedItems.toLocaleString() + (hasNextPage ? "+" : "");
}
}
return undefined;
}
DataGridRenderers.defaultFooterItemRenderer = defaultFooterItemRenderer;
})(DataGridRenderers || (DataGridRenderers = {}));