mig-schema-table 3.0.124 → 4.0.2
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 &&
|
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 = any> {
|
|
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;
|