drf-react-by-schema
Version:
Components and Tools for building a React App having Django Rest Framework (DRF) as server
97 lines (96 loc) • 3.32 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.quantityOnlyOperators = void 0;
exports.resizeColumns = resizeColumns;
const x_data_grid_1 = require("@mui/x-data-grid");
const InputInterval_1 = require("./InputInterval");
/**
* Get the largest width in a column, looking at all rows
* @param colIndex the column index
* @returns width of the biggest row inside a column
*/
function maxOfCol(colIndex) {
const invisibleContainer = document.createElement('div');
invisibleContainer.style.visibility = 'hidden';
invisibleContainer.style.zIndex = '-9999999999';
invisibleContainer.style.position = 'absolute';
invisibleContainer.style.fontSize = '14px';
invisibleContainer.style.top = '0';
invisibleContainer.style.left = '0';
document.body.append(invisibleContainer);
const widths = [];
document.querySelectorAll(`[aria-colindex='${colIndex}']`).forEach((cell) => {
const invisibleCell = document.createElement('div');
invisibleCell.innerHTML = cell.innerHTML;
invisibleCell.style.width = 'max-content';
invisibleCell.style.maxWidth = 'none';
invisibleCell.style.minWidth = 'none';
invisibleContainer.append(invisibleCell);
widths.push(Math.ceil(invisibleCell.clientWidth));
});
let max = Math.max(...widths);
if (max !== 0 && max < 50) {
max = 50;
}
invisibleContainer.remove();
return max;
}
/**
*
* @param columns
* @param resizeType
* @param apiRef
* @returns columns resized to the chosen resizeType
*/
function resizeColumns(columns, resizeType) {
const cols = [...columns];
cols.forEach((col, index) => {
if (resizeType === 'fitScreen') {
delete col.width;
col.minWidth = 80;
if (col.isIndexField) {
col.flex = 1;
}
}
else if (resizeType === 'maxContent') {
const maxColWidth = maxOfCol(index);
delete col.flex;
delete col.minWidth;
col.width = maxColWidth + 22;
}
else {
col.width = 0;
}
});
return cols;
}
const quantityOnlyOperators = ({ type }) => {
const builtInFilters = type === 'date' ? (0, x_data_grid_1.getGridDateOperators)() : (0, x_data_grid_1.getGridNumericOperators)();
let InputComponent = InputInterval_1.InputNumberInterval;
if (type === 'date') {
InputComponent = InputInterval_1.InputDateInterval;
}
if (type === 'float') {
InputComponent = InputInterval_1.InputFloatInterval;
}
return [
...builtInFilters,
{
label: 'entre',
value: 'entre',
getApplyFilterFn: (filterItem) => {
if (!Array.isArray(filterItem.value) || filterItem.value.length !== 2) {
return null;
}
if (filterItem.value[0] === null || filterItem.value[1] === null) {
return null;
}
return ({ value }) => {
return value !== null && filterItem.value[0] <= value && value <= filterItem.value[1];
};
},
InputComponent,
},
];
};
exports.quantityOnlyOperators = quantityOnlyOperators;