@etsoo/materialui
Version:
TypeScript Material-UI Implementation
111 lines (110 loc) • 4.73 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataGridRenderers = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const shared_1 = require("@etsoo/shared");
const Check_1 = __importDefault(require("@mui/icons-material/Check"));
const Clear_1 = __importDefault(require("@mui/icons-material/Clear"));
const DateText_1 = require("./texts/DateText");
const react_1 = require("@etsoo/react");
const CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
/**
* Data grid renderers
*/
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 (0, jsx_runtime_1.jsx)(CircularProgress_1.default, { 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 === react_1.GridDataType.Unkwown)
return value;
else if (type === react_1.GridDataType.String)
return new String(value);
// For date time
// Conversion if necessary
if (type === react_1.GridDataType.Date || type === react_1.GridDataType.DateTime) {
const dateValue = value instanceof Date ? value : new Date(value);
const option = type === react_1.GridDataType.DateTime ? "ds" : "d";
const nearDays = renderProps?.nearDays;
if (nearDays != null) {
return ((0, jsx_runtime_1.jsx)(DateText_1.DateText, { value: dateValue, locale: renderProps?.culture, timeZone: renderProps?.timeZone, options: option, nearDays: nearDays }));
}
return shared_1.DateUtils.format(dateValue, renderProps?.culture, option, renderProps?.timeZone);
}
// For numbers
if (typeof value === "number") {
if (type === react_1.GridDataType.Money || type === react_1.GridDataType.IntMoney)
return shared_1.NumberUtils.formatMoney(value, renderProps?.currency, renderProps?.culture, type === react_1.GridDataType.IntMoney, renderProps?.numberFormatOptions);
else
return shared_1.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 (0, jsx_runtime_1.jsx)(Check_1.default, { fontSize: "small" });
else
return (0, jsx_runtime_1.jsx)(Clear_1.default, { 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 || (exports.DataGridRenderers = DataGridRenderers = {}));