mig-schema-table 3.0.47 → 3.0.48
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.
|
@@ -12,12 +12,13 @@ interface ITdProps<T> {
|
|
|
12
12
|
rowIndex: number;
|
|
13
13
|
onCheckedIndexesChange?: (dataIndex: number[]) => void;
|
|
14
14
|
onRowClick?: (rowData: T, dataIndex: number, event: React.MouseEvent) => void;
|
|
15
|
+
onRowDoubleClick?: (rowData: T, dataIndex: number, event: React.MouseEvent) => void;
|
|
15
16
|
propConfig?: IColumnConfig<any>;
|
|
16
17
|
propName: string;
|
|
17
18
|
propSchema: oas31.SchemaObject;
|
|
18
19
|
sortedRenderData?: IRenderData[];
|
|
19
20
|
style: React.CSSProperties;
|
|
20
21
|
}
|
|
21
|
-
declare function Td<T>({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowClassName, getRowSelected, onCheckedIndexesChange, onRowClick, propConfig, propName, propSchema, rowHeight, rowIndex, sortedRenderData, style, }: ITdProps<T>): import("react/jsx-runtime").JSX.Element | null;
|
|
22
|
+
declare function Td<T>({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowClassName, getRowSelected, onCheckedIndexesChange, onRowClick, onRowDoubleClick, propConfig, propName, propSchema, rowHeight, rowIndex, sortedRenderData, style, }: ITdProps<T>): import("react/jsx-runtime").JSX.Element | null;
|
|
22
23
|
declare const _default: typeof Td;
|
|
23
24
|
export default _default;
|
|
@@ -4,7 +4,7 @@ import { SELECT_ALL_COLUMN_NAME } from "../constants";
|
|
|
4
4
|
import { localeFormatInTimeZone, timeZone } from "../../inc/date";
|
|
5
5
|
import { DEFAULT_DATE_TIME_FORMAT } from "../../inc/constant";
|
|
6
6
|
import { t } from "../../inc/string";
|
|
7
|
-
function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowClassName, getRowSelected, onCheckedIndexesChange, onRowClick, propConfig, propName, propSchema, rowHeight, rowIndex, sortedRenderData, style, }) {
|
|
7
|
+
function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowClassName, getRowSelected, onCheckedIndexesChange, onRowClick, onRowDoubleClick, propConfig, propName, propSchema, rowHeight, rowIndex, sortedRenderData, style, }) {
|
|
8
8
|
const onTdClick = React.useCallback((e) => {
|
|
9
9
|
if (!sortedRenderData || !onRowClick) {
|
|
10
10
|
return;
|
|
@@ -16,6 +16,17 @@ function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowC
|
|
|
16
16
|
const row = sortedRenderData[parseInt(rowIndex, 10)];
|
|
17
17
|
onRowClick(data[row._index], row._index, e);
|
|
18
18
|
}, [data, onRowClick, sortedRenderData]);
|
|
19
|
+
const onTdDoubleClick = React.useCallback((e) => {
|
|
20
|
+
if (!sortedRenderData || !onRowDoubleClick) {
|
|
21
|
+
return;
|
|
22
|
+
}
|
|
23
|
+
const { rowIndex } = e.currentTarget.dataset;
|
|
24
|
+
if (!rowIndex) {
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
const row = sortedRenderData[parseInt(rowIndex, 10)];
|
|
28
|
+
onRowDoubleClick(data[row._index], row._index, e);
|
|
29
|
+
}, [data, onRowDoubleClick, sortedRenderData]);
|
|
19
30
|
const row = sortedRenderData ? sortedRenderData[rowIndex] : undefined;
|
|
20
31
|
const tdDivProps = React.useMemo(() => {
|
|
21
32
|
if (!row) {
|
|
@@ -28,7 +39,9 @@ function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowC
|
|
|
28
39
|
// @ts-ignore
|
|
29
40
|
const dateString = data[row._index][propName];
|
|
30
41
|
const date = dateString ? new Date(dateString) : undefined;
|
|
31
|
-
const alternativeTimeZone = timeZone.startsWith("Europe/")
|
|
42
|
+
const alternativeTimeZone = timeZone.startsWith("Europe/")
|
|
43
|
+
? "Asia/Jakarta"
|
|
44
|
+
: "Europe/Amsterdam";
|
|
32
45
|
if (date) {
|
|
33
46
|
title = `${localeFormatInTimeZone(date, alternativeTimeZone, DEFAULT_DATE_TIME_FORMAT)} (${t(alternativeTimeZone)})`;
|
|
34
47
|
}
|
|
@@ -39,6 +52,7 @@ function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowC
|
|
|
39
52
|
key: propName,
|
|
40
53
|
style: Object.assign(Object.assign({}, style), { lineHeight: `${rowHeight}px` }),
|
|
41
54
|
onClick: !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell) ? onTdClick : undefined,
|
|
55
|
+
onDoubleClick: onTdDoubleClick,
|
|
42
56
|
className: `schema-table__td schema-table__td--${rowIndex % 2 ? "odd" : "even"}${getRowSelected && getRowSelected(data[row._index], row._index)
|
|
43
57
|
? " schema-table__td--selected"
|
|
44
58
|
: ""} ${getRowClassName ? getRowClassName(data[row._index], row._index) : ""}`,
|
|
@@ -50,9 +64,11 @@ function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowC
|
|
|
50
64
|
getRowClassName,
|
|
51
65
|
getRowSelected,
|
|
52
66
|
onTdClick,
|
|
53
|
-
|
|
67
|
+
onTdDoubleClick,
|
|
68
|
+
propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell,
|
|
69
|
+
propConfig === null || propConfig === void 0 ? void 0 : propConfig.showTimezones,
|
|
54
70
|
propName,
|
|
55
|
-
propSchema,
|
|
71
|
+
propSchema.format,
|
|
56
72
|
row,
|
|
57
73
|
rowHeight,
|
|
58
74
|
rowIndex,
|
|
@@ -28,6 +28,7 @@ export interface ISchemaTableProps<T> {
|
|
|
28
28
|
isSortable?: boolean;
|
|
29
29
|
onCheckedIndexesChange?: (dataIndex: number[]) => void;
|
|
30
30
|
onRowClick?: (rowData: T, dataIndex: number, event: React.MouseEvent) => void;
|
|
31
|
+
onRowDoubleClick?: (rowData: T, dataIndex: number, event: React.MouseEvent) => void;
|
|
31
32
|
rowHeight?: number;
|
|
32
33
|
schema: oas31.SchemaObject;
|
|
33
34
|
searchPlaceholder?: string;
|
|
@@ -38,6 +39,6 @@ export type TColumnFilterValue = string | number | boolean | {
|
|
|
38
39
|
from?: Date;
|
|
39
40
|
to?: Date;
|
|
40
41
|
};
|
|
41
|
-
declare function SchemaTable<T>({ Heading, checkedIndexes, disabledCheckedIndexes, config, customElement, data, defaultSortAsc, defaultSortColumn, getRowClassName, getRowSelected, maxHeight, isSearchable, isColumnFilterable, isSortable, onCheckedIndexesChange, onRowClick, rowHeight, schema, searchPlaceholder, style, width, }: ISchemaTableProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
42
|
+
declare function SchemaTable<T>({ Heading, checkedIndexes, disabledCheckedIndexes, config, customElement, data, defaultSortAsc, defaultSortColumn, getRowClassName, getRowSelected, maxHeight, isSearchable, isColumnFilterable, isSortable, onCheckedIndexesChange, onRowClick, rowHeight, schema, searchPlaceholder, style, width, onRowDoubleClick, }: ISchemaTableProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
42
43
|
declare const _default: typeof SchemaTable;
|
|
43
44
|
export default _default;
|
|
@@ -9,7 +9,7 @@ import Td from "./Td";
|
|
|
9
9
|
import { DEFAULT_DATE_FORMAT, DEFAULT_DATE_TIME_FORMAT } from "../inc/constant";
|
|
10
10
|
import SchemaColumnFilterPopover from "./SchemaColumnFilterPopover";
|
|
11
11
|
const startOfTheWorldDate = new Date("1000-01-01 00:00:00Z");
|
|
12
|
-
function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheckedIndexes, config, customElement, data, defaultSortAsc = false, defaultSortColumn, getRowClassName, getRowSelected, maxHeight, isSearchable, isColumnFilterable, isSortable, onCheckedIndexesChange, onRowClick, rowHeight = 36, schema, searchPlaceholder, style, width, }) {
|
|
12
|
+
function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheckedIndexes, config, customElement, data, defaultSortAsc = false, defaultSortColumn, getRowClassName, getRowSelected, maxHeight, isSearchable, isColumnFilterable, isSortable, onCheckedIndexesChange, onRowClick, rowHeight = 36, schema, searchPlaceholder, style, width, onRowDoubleClick, }) {
|
|
13
13
|
const [sortColumn, setSortColumn] = React.useState(defaultSortColumn);
|
|
14
14
|
const [sortAsc, setSortAsc] = React.useState(defaultSortAsc);
|
|
15
15
|
const [searchQuery, setSearchQuery] = React.useState("");
|
|
@@ -375,18 +375,19 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
|
|
|
375
375
|
const propSchema = (propName === SELECT_ALL_COLUMN_NAME
|
|
376
376
|
? { type: "boolean" }
|
|
377
377
|
: properties[propName]);
|
|
378
|
-
return sourceData ? (_jsx(Td, { checkedIndexes: checkedIndexes, disabledCheckedIndexes: disabledCheckedIndexes, columnIndex: columnIndex, data: sourceData, getRowClassName: getRowClassName, getRowSelected: getRowSelected, onCheckedIndexesChange: onCheckedIndexesChange, onRowClick: onRowClick, propConfig: config ? config[propName] : undefined, propName: propName, propSchema: propSchema, rowHeight: rowHeight, rowIndex: rowIndex, sortedRenderData: sortedRenderData, style: style })) : null;
|
|
378
|
+
return sourceData ? (_jsx(Td, { checkedIndexes: checkedIndexes, disabledCheckedIndexes: disabledCheckedIndexes, columnIndex: columnIndex, data: sourceData, getRowClassName: getRowClassName, getRowSelected: getRowSelected, onCheckedIndexesChange: onCheckedIndexesChange, onRowClick: onRowClick, onRowDoubleClick: onRowDoubleClick, propConfig: config ? config[propName] : undefined, propName: propName, propSchema: propSchema, rowHeight: rowHeight, rowIndex: rowIndex, sortedRenderData: sortedRenderData, style: style })) : null;
|
|
379
379
|
}, [
|
|
380
|
-
checkedIndexes,
|
|
381
380
|
columnNames,
|
|
382
|
-
|
|
381
|
+
properties,
|
|
383
382
|
sourceData,
|
|
383
|
+
checkedIndexes,
|
|
384
384
|
disabledCheckedIndexes,
|
|
385
385
|
getRowClassName,
|
|
386
386
|
getRowSelected,
|
|
387
387
|
onCheckedIndexesChange,
|
|
388
388
|
onRowClick,
|
|
389
|
-
|
|
389
|
+
onRowDoubleClick,
|
|
390
|
+
config,
|
|
390
391
|
rowHeight,
|
|
391
392
|
sortedRenderData,
|
|
392
393
|
]);
|