mig-schema-table 3.0.81 → 3.0.82
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.
|
@@ -4,7 +4,7 @@ import { TColumnFilterValue } from "../../index";
|
|
|
4
4
|
export interface IFilterMenuComponentProps {
|
|
5
5
|
columnFilterValue: TColumnFilterValue;
|
|
6
6
|
onChange: (newValue: TColumnFilterValue | undefined, persistState: boolean) => void;
|
|
7
|
-
onInputKeyDown: (e: React.KeyboardEvent) => void;
|
|
7
|
+
onInputKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
|
|
8
8
|
propIsRequired: boolean;
|
|
9
9
|
propName: string;
|
|
10
10
|
propSchema?: oas31.SchemaObject;
|
|
@@ -13,7 +13,7 @@ type TThMenuProps = IThMenuConfig & {
|
|
|
13
13
|
isFilterable: boolean;
|
|
14
14
|
onChange: (newValue: TColumnFilterValue | undefined, persistState: boolean) => void;
|
|
15
15
|
onClose: (e: MouseEvent | React.MouseEvent) => void;
|
|
16
|
-
onInputKeyDown: (e: React.KeyboardEvent) => void;
|
|
16
|
+
onInputKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
|
|
17
17
|
propIsRequired: boolean;
|
|
18
18
|
propSchema: oas31.SchemaObject;
|
|
19
19
|
setSortAsc: Dispatch<SetStateAction<boolean>>;
|
|
@@ -35,6 +35,7 @@ export interface ISchemaTableProps<T> {
|
|
|
35
35
|
onCheckedIndexesChange?: (dataIndex: number[]) => void;
|
|
36
36
|
onRowClick?: (rowData: T, dataIndex: number, event: React.MouseEvent) => void;
|
|
37
37
|
onRowDoubleClick?: (rowData: T, dataIndex: number, event: React.MouseEvent) => void;
|
|
38
|
+
onSearchEnter?: () => void;
|
|
38
39
|
rowHeight?: number;
|
|
39
40
|
schema: oas31.SchemaObject;
|
|
40
41
|
searchPlaceholder?: string;
|
|
@@ -49,6 +50,6 @@ export interface IDateColumnFilterValue {
|
|
|
49
50
|
filterEmpty?: true;
|
|
50
51
|
}
|
|
51
52
|
export type TColumnFilterValue = string | number | boolean | IDateColumnFilterValue;
|
|
52
|
-
declare function SchemaTable<T>({ Heading, checkedIndexes, config, customElement, data, defaultColumnFilters, defaultSortAsc, defaultSortColumn, disabledCheckedIndexes, enableAutoFocus, getRowClassName, getRowSelected, isColumnFilterable, isExportable, isSearchable, isSortable, maxHeight, onCheckedIndexesChange, onRowClick, onRowDoubleClick, rowHeight, schema, searchPlaceholder, style, translate, useFilterStateHash, width, }: ISchemaTableProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
53
|
+
declare function SchemaTable<T>({ Heading, checkedIndexes, config, customElement, data, defaultColumnFilters, defaultSortAsc, defaultSortColumn, disabledCheckedIndexes, enableAutoFocus, getRowClassName, getRowSelected, isColumnFilterable, isExportable, isSearchable, isSortable, maxHeight, onCheckedIndexesChange, onRowClick, onRowDoubleClick, onSearchEnter, rowHeight, schema, searchPlaceholder, style, translate, useFilterStateHash, width, }: ISchemaTableProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
53
54
|
declare const _default: typeof SchemaTable;
|
|
54
55
|
export default _default;
|
|
@@ -46,7 +46,7 @@ function getIsColumnSortable(isTableSortable, propSchema, propConfig) {
|
|
|
46
46
|
return !!(isTableSortable &&
|
|
47
47
|
(propSchema || (propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderData) || (propConfig === null || propConfig === void 0 ? void 0 : propConfig.sort)));
|
|
48
48
|
}
|
|
49
|
-
function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, customElement, data, defaultColumnFilters = {}, defaultSortAsc = false, defaultSortColumn, disabledCheckedIndexes, enableAutoFocus, getRowClassName, getRowSelected, isColumnFilterable = true, isExportable = true, isSearchable = true, isSortable = true, maxHeight, onCheckedIndexesChange, onRowClick, onRowDoubleClick, rowHeight = 36, schema, searchPlaceholder, style, translate = defaultTranslate, useFilterStateHash, width, }) {
|
|
49
|
+
function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, customElement, data, defaultColumnFilters = {}, defaultSortAsc = false, defaultSortColumn, disabledCheckedIndexes, enableAutoFocus, getRowClassName, getRowSelected, isColumnFilterable = true, isExportable = true, isSearchable = true, isSortable = true, maxHeight, onCheckedIndexesChange, onRowClick, onRowDoubleClick, onSearchEnter, rowHeight = 36, schema, searchPlaceholder, style, translate = defaultTranslate, useFilterStateHash, width, }) {
|
|
50
50
|
const [sortColumn, setSortColumn] = React.useState(defaultSortColumn);
|
|
51
51
|
const [sortAsc, setSortAsc] = React.useState(defaultSortAsc);
|
|
52
52
|
const [thMenuConfig, setThMenuConfig] = React.useState();
|
|
@@ -164,10 +164,9 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
|
|
|
164
164
|
// @ts-ignore
|
|
165
165
|
case "string":
|
|
166
166
|
if (schema.format === "date" && rawValue) {
|
|
167
|
-
prev[propName] =
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
: localeFormat(new Date(rawValue), (propConfig === null || propConfig === void 0 ? void 0 : propConfig.dateFormat) || DEFAULT_DATE_FORMAT);
|
|
167
|
+
prev[propName] = ["2999-12-31", "1970-01-01"].includes(rawValue)
|
|
168
|
+
? "-"
|
|
169
|
+
: localeFormat(new Date(rawValue), (propConfig === null || propConfig === void 0 ? void 0 : propConfig.dateFormat) || DEFAULT_DATE_FORMAT);
|
|
171
170
|
return prev;
|
|
172
171
|
}
|
|
173
172
|
if (schema.format === "date-time" && rawValue) {
|
|
@@ -470,8 +469,12 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
|
|
|
470
469
|
if (isDirty) {
|
|
471
470
|
refreshData();
|
|
472
471
|
}
|
|
472
|
+
if (onSearchEnter &&
|
|
473
|
+
e.currentTarget.className === "schema-table__search") {
|
|
474
|
+
onSearchEnter();
|
|
475
|
+
}
|
|
473
476
|
}
|
|
474
|
-
}, [isDirty, refreshData]);
|
|
477
|
+
}, [isDirty, onSearchEnter, refreshData]);
|
|
475
478
|
const getRowHeight = React.useCallback(() => rowHeight, [rowHeight]);
|
|
476
479
|
const rowWidth = dynamicWidthColumnCount ? width : fixedWidthColumnsWidth;
|
|
477
480
|
const rowCount = React.useMemo(() => (sortedRenderData ? sortedRenderData.length : 0), [sortedRenderData]);
|
|
@@ -567,7 +570,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
|
|
|
567
570
|
type: "text/csv;charset=utf-8",
|
|
568
571
|
}), "export.csv");
|
|
569
572
|
}, [sortedRenderData]);
|
|
570
|
-
return (_jsxs("div", Object.assign({ className: `schema-table${onRowClick ? " schema-table--clickable-rows" : ""}`, style: Object.assign(Object.assign({}, style), { width: rowWidth }), role: "table" }, { children: [_jsxs("div", Object.assign({ className: "schema-table__action-container" }, { children: [_jsx("div", Object.assign({ style: { flex: 1 } }, { children: isSearchable ? (_jsx("input", { type: "text", placeholder: searchPlaceholder || "Search...", value: searchQuery, onChange: onSearchChange, onKeyDown: onInputKeyDown, autoFocus: searchInputAutoFocus, onBlur: onSearchBlur })) : null })), customElement, isExportable ? (_jsx("button", Object.assign({ onClick: onExportDataClick, style: { marginLeft: 8 }, disabled: !(sortedRenderData === null || sortedRenderData === void 0 ? void 0 : sortedRenderData.length) }, { children: "Export data" }))) : null, isSearchable || isColumnFilterable ? (_jsx("button", Object.assign({ onClick: onClearFiltersButtonClick, style: { marginLeft: 8 }, disabled: Object.keys(columnFilterMap).length + searchQuery.length === 0 }, { children: "Clear filters" }))) : null] })), _jsx(Heading, Object.assign({ height: 50, itemCount: columnCount, itemSize: getColumnWidth, layout: "horizontal", width: rowWidth, sortAsc: sortAsc, setSortAsc: onSetSortAsc, setSortColumn: onSetSortColumn, sortColumn: sortColumn, sortedRenderData: sortedRenderData, className: "schema-table__th-row" }, { children: ConfiguredTh }), `thead_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}`), sourceData && !isDirty ? (_jsx(VariableSizeGrid, Object.assign({ className: "schema-table__tbody", height: tableBodyHeight, width: rowWidth, columnWidth: getColumnWidth, rowHeight: getRowHeight, columnCount: columnCount, rowCount: rowCount }, { children: SchemaTableTd }), `tbody_${tableBodyHeight}_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}_${columnCount}`)) : (_jsx("div", Object.assign({ style: {
|
|
573
|
+
return (_jsxs("div", Object.assign({ className: `schema-table${onRowClick ? " schema-table--clickable-rows" : ""}`, style: Object.assign(Object.assign({}, style), { width: rowWidth }), role: "table" }, { children: [_jsxs("div", Object.assign({ className: "schema-table__action-container" }, { children: [_jsx("div", Object.assign({ style: { flex: 1 } }, { children: isSearchable ? (_jsx("input", { className: "schema-table__search", type: "text", placeholder: searchPlaceholder || "Search...", value: searchQuery, onChange: onSearchChange, onKeyDown: onInputKeyDown, autoFocus: searchInputAutoFocus, onBlur: onSearchBlur })) : null })), customElement, isExportable ? (_jsx("button", Object.assign({ onClick: onExportDataClick, style: { marginLeft: 8 }, disabled: !(sortedRenderData === null || sortedRenderData === void 0 ? void 0 : sortedRenderData.length) }, { children: "Export data" }))) : null, isSearchable || isColumnFilterable ? (_jsx("button", Object.assign({ onClick: onClearFiltersButtonClick, style: { marginLeft: 8 }, disabled: Object.keys(columnFilterMap).length + searchQuery.length === 0 }, { children: "Clear filters" }))) : null] })), _jsx(Heading, Object.assign({ height: 50, itemCount: columnCount, itemSize: getColumnWidth, layout: "horizontal", width: rowWidth, sortAsc: sortAsc, setSortAsc: onSetSortAsc, setSortColumn: onSetSortColumn, sortColumn: sortColumn, sortedRenderData: sortedRenderData, className: "schema-table__th-row" }, { children: ConfiguredTh }), `thead_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}`), sourceData && !isDirty ? (_jsx(VariableSizeGrid, Object.assign({ className: "schema-table__tbody", height: tableBodyHeight, width: rowWidth, columnWidth: getColumnWidth, rowHeight: getRowHeight, columnCount: columnCount, rowCount: rowCount }, { children: SchemaTableTd }), `tbody_${tableBodyHeight}_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}_${columnCount}`)) : (_jsx("div", Object.assign({ style: {
|
|
571
574
|
width: rowWidth,
|
|
572
575
|
height: Math.max(50, tableBodyHeight),
|
|
573
576
|
border: "1px solid #BBB",
|
package/dist/index.css
CHANGED
|
@@ -49,13 +49,6 @@
|
|
|
49
49
|
.schema-table__td--selected {
|
|
50
50
|
background-color: var(--bs-gray-300, #dee2e6);
|
|
51
51
|
}
|
|
52
|
-
.schema-table__search {
|
|
53
|
-
margin: 1rem;
|
|
54
|
-
padding-right: 1rem;
|
|
55
|
-
}
|
|
56
|
-
.schema-table__search input {
|
|
57
|
-
width: 100%;
|
|
58
|
-
}
|
|
59
52
|
.schema-table--clickable-rows .schema-table__td {
|
|
60
53
|
cursor: pointer;
|
|
61
54
|
}
|