mig-schema-table 3.0.123 → 4.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -27,6 +27,7 @@ function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowC
|
|
|
27
27
|
onRowDoubleClick(data[row._index], row._index, e);
|
|
28
28
|
}, [data, onRowDoubleClick, sortedRenderData]);
|
|
29
29
|
const row = sortedRenderData ? sortedRenderData[rowIndex] : undefined;
|
|
30
|
+
const { showTimezones, TdBody } = propConfig || {};
|
|
30
31
|
const tdDivProps = React.useMemo(() => {
|
|
31
32
|
if (!row || !sortedRenderData) {
|
|
32
33
|
return undefined;
|
|
@@ -34,7 +35,7 @@ function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowC
|
|
|
34
35
|
let title = propName === SELECT_ALL_COLUMN_NAME ? null : row[propName];
|
|
35
36
|
if ((propSchema === null || propSchema === void 0 ? void 0 : propSchema.format) &&
|
|
36
37
|
propSchema.format === "date-time" &&
|
|
37
|
-
|
|
38
|
+
showTimezones !== false) {
|
|
38
39
|
// @ts-ignore
|
|
39
40
|
const dateString = data[row._index][propName];
|
|
40
41
|
const date = dateString ? new Date(dateString) : undefined;
|
|
@@ -73,7 +74,7 @@ function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowC
|
|
|
73
74
|
getRowSelected,
|
|
74
75
|
onTdClick,
|
|
75
76
|
onTdDoubleClick,
|
|
76
|
-
|
|
77
|
+
showTimezones,
|
|
77
78
|
propName,
|
|
78
79
|
propSchema === null || propSchema === void 0 ? void 0 : propSchema.format,
|
|
79
80
|
row,
|
|
@@ -85,8 +86,8 @@ function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowC
|
|
|
85
86
|
if (!row || !tdDivProps) {
|
|
86
87
|
return null;
|
|
87
88
|
}
|
|
88
|
-
if (
|
|
89
|
-
return (_jsx("div", Object.assign({}, tdDivProps, { children:
|
|
89
|
+
if (TdBody) {
|
|
90
|
+
return (_jsx("div", Object.assign({}, tdDivProps, { children: _jsx(TdBody, { dataIndex: row._index, rowData: data[row._index], rowIndex: rowIndex }) })));
|
|
90
91
|
}
|
|
91
92
|
if (propName === SELECT_ALL_COLUMN_NAME) {
|
|
92
93
|
const onChecked = () => {
|
|
@@ -97,9 +98,6 @@ function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowC
|
|
|
97
98
|
};
|
|
98
99
|
return (_jsx("div", Object.assign({}, tdDivProps, { children: _jsx("div", Object.assign({ style: { textAlign: "center" } }, { children: _jsx("input", { "data-key": "row-checkbox", type: "checkbox", onChange: onChecked, checked: checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.includes(row._index), disabled: disabledCheckedIndexes === null || disabledCheckedIndexes === void 0 ? void 0 : disabledCheckedIndexes.includes(row._index) }) })) })));
|
|
99
100
|
}
|
|
100
|
-
if (!propSchema && !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderData) && !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell)) {
|
|
101
|
-
return null;
|
|
102
|
-
}
|
|
103
101
|
const propValue = row[propName];
|
|
104
102
|
switch (propSchema === null || propSchema === void 0 ? void 0 : propSchema.type) {
|
|
105
103
|
case "boolean":
|
|
@@ -16,7 +16,9 @@ const Th = ({ columnFilterStatus, isAllChecked, isSortable, numberOfSelectedRows
|
|
|
16
16
|
`mig-schema-table__th--filter-${columnFilterStatus}`,
|
|
17
17
|
`mig-schema-table__th--prop-${propName}`,
|
|
18
18
|
];
|
|
19
|
-
classNames.push(isSortable
|
|
19
|
+
classNames.push(isSortable
|
|
20
|
+
? "mig-schema-table__th--sortable"
|
|
21
|
+
: "mig-schema-table__th--unsortable");
|
|
20
22
|
if (sortAsc !== undefined) {
|
|
21
23
|
classNames.push("mig-schema-table__th--sorted");
|
|
22
24
|
}
|
|
@@ -26,19 +28,21 @@ const Th = ({ columnFilterStatus, isAllChecked, isSortable, numberOfSelectedRows
|
|
|
26
28
|
if (isDropTarget) {
|
|
27
29
|
classNames.push(`mig-schema-table__th--drop-target`);
|
|
28
30
|
}
|
|
31
|
+
const { format } = schema || {};
|
|
32
|
+
const { align, defaultSortDesc, renderData, showTimezones, TdBody, title } = propConfig || {};
|
|
29
33
|
const onLabelClick = React.useCallback(() => {
|
|
30
34
|
if (!isSortable) {
|
|
31
35
|
return;
|
|
32
36
|
}
|
|
33
37
|
if (sortAsc === undefined) {
|
|
34
38
|
setSortColumn(propName);
|
|
35
|
-
setSortAsc(!
|
|
39
|
+
setSortAsc(!defaultSortDesc);
|
|
36
40
|
return;
|
|
37
41
|
}
|
|
38
42
|
setSortAsc((sortAsc) => !sortAsc);
|
|
39
43
|
}, [
|
|
40
44
|
isSortable,
|
|
41
|
-
|
|
45
|
+
defaultSortDesc,
|
|
42
46
|
propName,
|
|
43
47
|
setSortAsc,
|
|
44
48
|
setSortColumn,
|
|
@@ -59,22 +63,14 @@ const Th = ({ columnFilterStatus, isAllChecked, isSortable, numberOfSelectedRows
|
|
|
59
63
|
});
|
|
60
64
|
}, [propConfig, propIsRequired, propName, setMenuConfig]);
|
|
61
65
|
const labelBody = React.useMemo(() => {
|
|
62
|
-
if (
|
|
63
|
-
return
|
|
66
|
+
if (title !== undefined) {
|
|
67
|
+
return title;
|
|
64
68
|
}
|
|
65
|
-
if (
|
|
66
|
-
schema.format === "date-time" &&
|
|
67
|
-
(propConfig === null || propConfig === void 0 ? void 0 : propConfig.showTimezones) !== false) {
|
|
69
|
+
if (format === "date-time" && showTimezones !== false) {
|
|
68
70
|
return `${translate(propName)} (${translate(timeZone)})`;
|
|
69
71
|
}
|
|
70
72
|
return translate(propName);
|
|
71
|
-
}, [
|
|
72
|
-
propConfig === null || propConfig === void 0 ? void 0 : propConfig.showTimezones,
|
|
73
|
-
propConfig === null || propConfig === void 0 ? void 0 : propConfig.title,
|
|
74
|
-
propName,
|
|
75
|
-
schema === null || schema === void 0 ? void 0 : schema.format,
|
|
76
|
-
translate,
|
|
77
|
-
]);
|
|
73
|
+
}, [title, format, showTimezones, translate, propName]);
|
|
78
74
|
const onDragStart = React.useCallback((e) => {
|
|
79
75
|
if (!onColumnPositionChange) {
|
|
80
76
|
return;
|
|
@@ -119,23 +115,19 @@ const Th = ({ columnFilterStatus, isAllChecked, isSortable, numberOfSelectedRows
|
|
|
119
115
|
textAlign: "center",
|
|
120
116
|
}, title: `${numberOfSelectedRows || 0} selected` }, { children: _jsx("input", { type: "checkbox", name: "selectAll", checked: isAllChecked, onChange: onSelectAllIndexesHandler }) })) })));
|
|
121
117
|
}
|
|
122
|
-
const title = typeof labelBody === "string" ? labelBody : undefined;
|
|
123
|
-
if (!schema && !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderData) && !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell)) {
|
|
124
|
-
return _jsx("div", { style: style, className: classNames.join(" "), title: title });
|
|
125
|
-
}
|
|
126
118
|
switch (schema === null || schema === void 0 ? void 0 : schema.type) {
|
|
127
119
|
case "boolean":
|
|
128
|
-
classNames.push(`text-${
|
|
120
|
+
classNames.push(`text-${align || "center"}`, `justify-content-${align || "center"}`);
|
|
129
121
|
break;
|
|
130
122
|
case "integer":
|
|
131
123
|
case "number":
|
|
132
|
-
classNames.push(`text-${
|
|
124
|
+
classNames.push(`text-${align || "end"}`, `justify-content-${align || "end"}`);
|
|
133
125
|
break;
|
|
134
126
|
default:
|
|
135
|
-
if (
|
|
136
|
-
classNames.push(`text-${
|
|
127
|
+
if (align) {
|
|
128
|
+
classNames.push(`text-${align}`);
|
|
137
129
|
}
|
|
138
130
|
}
|
|
139
|
-
return (_jsxs("div", Object.assign({
|
|
131
|
+
return (_jsxs("div", Object.assign({ className: classNames.join(" "), style: style, title: typeof labelBody === "string" ? labelBody : undefined, draggable: true, onDragStart: onDragStart, onDragEnd: onDragEnd, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop }, { children: [_jsxs("div", Object.assign({ className: "mig-schema-table__th__label-body", style: { lineHeight: "44px" }, onClick: onLabelClick }, { children: [_jsx("span", Object.assign({ className: "mig-schema-table__th__label-body-text" }, { children: labelBody })), sortAsc === undefined ? null : (_jsx("span", Object.assign({ className: "mig-schema-table__th__sort-icon" }, { children: sortAsc ? "↓" : "↑" })))] })), isSortable || columnFilterStatus !== EColumnFilterStatus.UNAVAILABLE ? (_jsx("button", Object.assign({ className: "mig-schema-table__th__trigger-el", onClick: onTriggerClick }, { children: _jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#404040", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, { children: _jsx("polyline", { points: "6 9 12 15 18 9" }) })) }))) : null] })));
|
|
140
132
|
};
|
|
141
133
|
export default React.memo(Th);
|
|
@@ -32,18 +32,16 @@ const currencyFormatter = new Intl.NumberFormat("nl-NL", {
|
|
|
32
32
|
currency: "EUR",
|
|
33
33
|
});
|
|
34
34
|
function getSortByValue(propSchema, propConfig) {
|
|
35
|
-
|
|
36
|
-
if (
|
|
37
|
-
return
|
|
35
|
+
const { TdBody, sortByValue } = propConfig || {};
|
|
36
|
+
if (sortByValue !== undefined) {
|
|
37
|
+
return sortByValue;
|
|
38
38
|
}
|
|
39
39
|
if (!propSchema) {
|
|
40
40
|
return false;
|
|
41
41
|
}
|
|
42
|
-
const
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
propSchema.type === "integer" ||
|
|
46
|
-
!!(propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell));
|
|
42
|
+
const { format, type } = propSchema;
|
|
43
|
+
const isDate = format === null || format === void 0 ? void 0 : format.startsWith("date");
|
|
44
|
+
return isDate || type === "boolean" || type === "integer" || !!TdBody;
|
|
47
45
|
}
|
|
48
46
|
function getIsColumnSortable(isTableSortable, propSchema, propConfig) {
|
|
49
47
|
return !!(isTableSortable &&
|
|
@@ -51,6 +49,7 @@ function getIsColumnSortable(isTableSortable, propSchema, propConfig) {
|
|
|
51
49
|
(propSchema || (propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderData) || (propConfig === null || propConfig === void 0 ? void 0 : propConfig.sort)));
|
|
52
50
|
}
|
|
53
51
|
function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, customElement, data, defaultColumnFilters, defaultSortAsc = false, defaultSortColumn, disabledCheckedIndexes, enableAutoFocus = true, enableRowCounter = true, getRowClassName, getRowSelected, isColumnFilterable = true, isExportable = true, isResizable = true, isSearchable = true, isSortable = true, maxHeight, onCheckedIndexesChange, onRowClick, onRowDoubleClick, onSearchEnter, rowHeight = 36, schema, searchPlaceholder, settingsStorageKey, style, translate = defaultTranslate, useFilterStateHash, width, tableRef, }) {
|
|
52
|
+
var _a;
|
|
54
53
|
const [columnNames, setColumnNames] = React.useState();
|
|
55
54
|
const [resizeColumnIndex, setResizeColumnIndex] = React.useState(-1);
|
|
56
55
|
const [sortColumn, setSortColumn] = React.useState(defaultSortColumn);
|
|
@@ -710,6 +709,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
|
|
|
710
709
|
backgroundColor: "#CCC",
|
|
711
710
|
alignItems: "center",
|
|
712
711
|
justifyContent: "center",
|
|
713
|
-
} }, { children: isDirty ? (_jsx("button", Object.assign({ onClick: refreshData, className: "btn border" }, { children: "Refresh data" }))) : (_jsx("div", { children: "\u231B Loading..." })) }))), isResizable ? (_jsx(ColumnResizers, { columnWidths: columnWidths, onColumnWidthsChange: onColumnWidthsChange, resizeColumnIndex: resizeColumnIndex, setResizeColumnIndex: setResizeColumnIndex, tableBodyHeight: tableBodyHeight })) : null] }))) : null, createPortal(thMenuConfig ? (_jsx(ThMenu, { isFilterable:
|
|
712
|
+
} }, { children: isDirty ? (_jsx("button", Object.assign({ onClick: refreshData, className: "btn border" }, { children: "Refresh data" }))) : (_jsx("div", { children: "\u231B Loading..." })) }))), isResizable ? (_jsx(ColumnResizers, { columnWidths: columnWidths, onColumnWidthsChange: onColumnWidthsChange, resizeColumnIndex: resizeColumnIndex, setResizeColumnIndex: setResizeColumnIndex, tableBodyHeight: tableBodyHeight })) : null] }))) : null, createPortal(thMenuConfig ? (_jsx(ThMenu, { isFilterable: isColumnFilterable &&
|
|
713
|
+
((_a = thMenuConfig.propConfig) === null || _a === void 0 ? void 0 : _a.isFilterable) !== false, isSortable: getIsColumnSortable(!!isSortable, schema.properties[thMenuConfig.propName], thMenuConfig.propConfig), onChange: onSchemaColumnFilterChange, onClose: onPopoverClose, onInputKeyDown: onInputKeyDown, propConfig: thMenuConfig.propConfig, propIsRequired: thMenuConfig.propIsRequired, propName: thMenuConfig.propName, propSchema: schema.properties[thMenuConfig.propName], referenceElement: thMenuConfig.referenceElement, setSortAsc: setSortAsc, setSortColumn: setSortColumn, translate: translate, value: columnFilterMap[thMenuConfig.propName] })) : null, document.body)] })));
|
|
714
714
|
}
|
|
715
715
|
export default React.memo(SchemaTable);
|
package/dist/types.d.ts
CHANGED
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { TColumnFilterValue } from "./SchemaTable";
|
|
3
3
|
import { IFilterMenuComponentProps } from "./SchemaTable/ThMenu/FilterMenuComponent";
|
|
4
|
+
export interface ITdBodyProps<T = unknown> {
|
|
5
|
+
rowData: T;
|
|
6
|
+
dataIndex: number;
|
|
7
|
+
rowIndex: number;
|
|
8
|
+
}
|
|
4
9
|
export interface IColumnConfig<T> {
|
|
5
10
|
FilterMenu?: React.ComponentType<IFilterMenuComponentProps>;
|
|
6
11
|
align?: "start" | "center" | "end";
|
|
@@ -11,7 +16,7 @@ export interface IColumnConfig<T> {
|
|
|
11
16
|
hoverTitle?: string;
|
|
12
17
|
isFilterable?: boolean;
|
|
13
18
|
order?: number;
|
|
14
|
-
|
|
19
|
+
TdBody?: React.ComponentType<ITdBodyProps>;
|
|
15
20
|
renderData?: (rowData: T, dataIndex: number) => string;
|
|
16
21
|
showTimezones?: false;
|
|
17
22
|
sort?: (a: T, b: T, sortAsc: boolean) => number;
|