es-grid-template
Version:
es-grid-template
306 lines (287 loc) • 9.78 kB
JavaScript
import React, { Fragment } from 'react';
import ControlCheckbox from "../components/ControlCheckbox";
import { checkDecimalSeparator, checkThousandSeparator, countUnselectedChildren, excludeItems, getAllChildren, getFormat, isColor, isEmpty, sortByType, toggleRowAndChildren } from "./utils";
import { numericFormatter } from 'react-numeric-component';
import dayjs from 'dayjs';
import moment from 'moment';
export const renderValueCell = (column, value, record, rowIndex, colIndex, format, editAble) => {
switch (column?.type) {
case 'number':
const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
const cellFormat = getFormat(colFormat, format);
const thousandSeparator = cellFormat?.thousandSeparator;
const decimalSeparator = cellFormat?.decimalSeparator;
const dec = cellFormat?.decimalScale;
// const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString()) : '0'
const tmpval = typeof value === 'string' ? Number(value) : value;
const numericFormatProps = {
thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
allowNegative: cellFormat?.allowNegative ?? true,
prefix: cellFormat?.prefix,
suffix: cellFormat?.suffix,
decimalScale: dec,
fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
};
// if ( typeof value === "string") {
// const ttt = removeNumericFormat(value, undefined, numericFormatProps )
//
// }
const contentNumber = !isEmpty(value) ? dec || dec === 0 ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString() : '0';
// const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? tmpval.toString() : tmpval.toString()) : '0'
return !isEmpty(contentNumber) ? numericFormatter(contentNumber, numericFormatProps) : '';
case 'date':
return value ? dayjs(value).format(format?.dateFormat ?? 'DD/MM/YYYY') : '';
case 'time':
return value ? value : '';
case 'year':
const year = value ? moment(value).format('yyyy') : '';
return /*#__PURE__*/React.createElement(Fragment, null, year);
case 'datetime':
return value ? moment(value).format(format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm') : '';
case 'boolean':
return value ? 'true' : 'false';
case 'color':
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
className: 'w-100 h-100',
style: {
backgroundColor: isColor(value) ? value : '#fff',
border: '1px solid #f0f0f0',
height: '100%',
minHeight: 20
}
}));
case 'checkbox':
return /*#__PURE__*/React.createElement(ControlCheckbox, {
column: column,
record: record,
rowIndex: rowIndex,
colIndex: colIndex,
checked: !!value,
checkValue: value,
editAble: editAble
});
case 'file':
const nameFile = typeof value === 'object' && !Array.isArray(value) ? value.name : Array.isArray(value) ? value.map(it => typeof it === 'object' ? it.name : it).filter(Boolean).join(", ") : '';
return value ? nameFile : '';
default:
if (Array.isArray(value)) {
return value.join(', ');
}
return value;
}
};
export function convertToTanStackColumns({
t,
columns,
// expanded,
// setExpanded,
// expandable,
format,
editAble
}) {
// const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0
return sortByType(columns).map(col => {
const {
headerText,
headerTemplate,
field,
width,
allowResizing,
minWidth,
template,
allowSortering,
allowFiltering
} = col;
const {
children,
...restProps
} = col;
const newCol = {
header: () => {
if (headerTemplate) {
if (typeof headerTemplate === 'function') {
return headerTemplate(col);
} else {
return headerTemplate;
}
} else {
return t ? t(headerText) : headerText;
// return field
}
},
cell: props => {
const {
getValue,
cell
} = props;
const cellValue = props.renderValue() ?? null;
const record = cell.row.original;
const colIndex = cell.column.getIndex();
const rowIndex = cell.row.index;
if (template) {
if (typeof template === 'function') {
return template({
field: field ?? '',
index: cell.row.index,
rowData: cell.row.original,
value: getValue()
});
} else {
return template;
}
} else {
return /*#__PURE__*/React.createElement(Fragment, null, renderValueCell(col, cellValue, record, rowIndex, colIndex, format, editAble));
}
},
enableResizing: allowResizing !== false,
// enableHiding: false,
// enableResizing: true,
id: field,
size: width,
accessorKey: field,
sortDescFirst: false,
minSize: minWidth,
// maxSize: maxWidth,
enableSorting: allowSortering !== false,
// enableSorting: false,
// enableColumnFilter: allowFiltering !== false && !nonActionColumn.includes(field)
enableColumnFilter: allowFiltering !== false
};
if (children) {
newCol.size = undefined;
// @ts-ignore
newCol.columns = convertToTanStackColumns({
columns: children,
editAble,
format,
t
});
}
const meta = {
...restProps
};
if (Object.keys(meta).length > 0) {
newCol.meta = meta;
}
return newCol;
});
}
export const toggleRowSelection = props => {
const {
selectionSettings,
cell,
isSelectionChange,
e,
setIsSelectionChange
} = props;
const {
row
} = cell;
const {
rowsData
} = isSelectionChange ?? {};
const prevSelected = rowsData && rowsData.length > 0 ? [...rowsData] : [];
if (selectionSettings?.checkStrictly || selectionSettings?.type === 'single') {
row.getToggleSelectedHandler()(e);
if (row.getIsSelected()) {
// đã chọn
// xóa row ra list selected
const newRowsSelected = prevSelected.filter(it => it.id !== row.id);
setIsSelectionChange({
isChange: true,
type: 'rowSelected',
rowData: row.original,
rowsData: newRowsSelected ?? []
});
} else {
// chưa selected
const checkedRows = [...prevSelected, row];
setIsSelectionChange({
isChange: true,
type: 'rowSelected',
rowData: row.original,
rowsData: selectionSettings?.type === 'single' ? [row] : checkedRows
});
}
return;
}
if (row.subRows && row.subRows.length > 0) {
// click vào row cha
const allChild = getAllChildren(row);
toggleRowAndChildren(row, !row.getIsSelected());
if (row.getIsSelected()) {
// đã chọn
// const aaa = isSelectionChange?.rowsData.filter((it) => it.id !== row.id)
const newRowsSelected = excludeItems(prevSelected, [...allChild, row]);
setIsSelectionChange({
isChange: true,
type: 'rowSelected',
rowData: row.original,
rowsData: newRowsSelected ?? []
});
} else {
// chưa selected
let checkedRows = [];
if (row.subRows && row.subRows.length > 0) {
checkedRows = [...prevSelected, row, ...allChild];
} else {
checkedRows = [...prevSelected, row];
}
setIsSelectionChange({
isChange: true,
type: 'rowSelected',
rowData: row.original,
rowsData: checkedRows
});
}
} else {
// click vào row không có cha
row.getToggleSelectedHandler()(e);
if (row.getIsSelected()) {
// đã chọn
const rowParent = row.getParentRow();
// const rowParent1 = row.getParentRows()
let newCheckedRows = [];
if (rowParent) {}
if (rowParent && countUnselectedChildren(row) === 1) {
newCheckedRows = prevSelected.filter(it => it.id !== row.id && it.id !== rowParent.id);
} else {
// xóa row ra list selected
// const newRowsSelected = prevSelected.filter((it) => it.id !== row.id)
newCheckedRows = prevSelected.filter(it => it.id !== row.id);
}
setIsSelectionChange({
isChange: true,
type: 'rowSelected',
rowData: row.original,
rowsData: newCheckedRows ?? []
});
} else {
// chưa selected
let checkedRows = [];
const rowParent = row.getParentRow();
// nếu có cha và cha chưa được chọn và tất cả con đã chọn => thêm row cha vào
if (rowParent && !rowParent.getIsSelected() && countUnselectedChildren(row) === 1) {
rowParent.toggleSelected(!rowParent.getIsSelected());
checkedRows = [...prevSelected, row, rowParent];
} else {
// chỉ thêm vào row hiện tại
const isInclude = prevSelected.findIndex(it => it.id === cell.row.id);
if (isInclude > -1) {
// cập nhật data row hiện tại
prevSelected[isInclude] = row;
checkedRows = [...prevSelected];
} else {
checkedRows = [...prevSelected, row];
}
}
setIsSelectionChange({
isChange: true,
type: 'rowSelected',
rowData: row.original,
rowsData: checkedRows
});
}
}
};