mig-schema-table 3.0.104 → 3.0.106
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.
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { oas31 } from "openapi3-ts";
|
|
3
|
+
import { VariableSizeGrid } from "react-window";
|
|
3
4
|
import { IColumnConfig, IRenderData } from "../types";
|
|
4
5
|
import { ENumberColumnFilterOperation } from "../inc/constant";
|
|
5
6
|
export interface IGetDataProps {
|
|
@@ -46,6 +47,7 @@ export interface ISchemaTableProps<T> {
|
|
|
46
47
|
translate?: (key: string, ...args: Array<string | number>) => string;
|
|
47
48
|
useFilterStateHash?: boolean;
|
|
48
49
|
width: number;
|
|
50
|
+
tableRef?: React.RefObject<VariableSizeGrid>;
|
|
49
51
|
}
|
|
50
52
|
export interface IDateColumnFilterValue {
|
|
51
53
|
from?: Date;
|
|
@@ -59,6 +61,6 @@ export interface INumberColumnFilterValue {
|
|
|
59
61
|
filterEmpty?: true;
|
|
60
62
|
}
|
|
61
63
|
export type TColumnFilterValue = string | boolean | number | IDateColumnFilterValue | INumberColumnFilterValue;
|
|
62
|
-
declare function SchemaTable<T>({ Heading, checkedIndexes, config, customElement, data, defaultColumnFilters, defaultSortAsc, defaultSortColumn, disabledCheckedIndexes, enableAutoFocus, enableRowCounter, getRowClassName, getRowSelected, isColumnFilterable, isExportable, isResizable, isSearchable, isSortable, maxHeight, onCheckedIndexesChange, onRowClick, onRowDoubleClick, onSearchEnter, rowHeight, schema, searchPlaceholder, style, translate, useFilterStateHash, width, }: ISchemaTableProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
64
|
+
declare function SchemaTable<T>({ Heading, checkedIndexes, config, customElement, data, defaultColumnFilters, defaultSortAsc, defaultSortColumn, disabledCheckedIndexes, enableAutoFocus, enableRowCounter, getRowClassName, getRowSelected, isColumnFilterable, isExportable, isResizable, isSearchable, isSortable, maxHeight, onCheckedIndexesChange, onRowClick, onRowDoubleClick, onSearchEnter, rowHeight, schema, searchPlaceholder, style, translate, useFilterStateHash, width, tableRef, }: ISchemaTableProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
63
65
|
declare const _default: typeof SchemaTable;
|
|
64
66
|
export default _default;
|
|
@@ -49,7 +49,7 @@ function getIsColumnSortable(isTableSortable, propSchema, propConfig) {
|
|
|
49
49
|
(propConfig === null || propConfig === void 0 ? void 0 : propConfig.isSortable) !== false &&
|
|
50
50
|
(propSchema || (propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderData) || (propConfig === null || propConfig === void 0 ? void 0 : propConfig.sort)));
|
|
51
51
|
}
|
|
52
|
-
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, style, translate = defaultTranslate, useFilterStateHash, width, }) {
|
|
52
|
+
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, style, translate = defaultTranslate, useFilterStateHash, width, tableRef, }) {
|
|
53
53
|
const [sortColumn, setSortColumn] = React.useState(defaultSortColumn);
|
|
54
54
|
const [sortAsc, setSortAsc] = React.useState(defaultSortAsc);
|
|
55
55
|
const [thMenuConfig, setThMenuConfig] = React.useState();
|
|
@@ -572,7 +572,10 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
|
|
|
572
572
|
]);
|
|
573
573
|
const onClearFiltersButtonClick = React.useCallback(() => {
|
|
574
574
|
if (useFilterStateHash) {
|
|
575
|
-
window.location.hash =
|
|
575
|
+
window.location.hash = serializeLocationHash({
|
|
576
|
+
columnFilterMap: {},
|
|
577
|
+
searchQuery: "",
|
|
578
|
+
});
|
|
576
579
|
return;
|
|
577
580
|
}
|
|
578
581
|
setColumnFilterMap({});
|
|
@@ -602,7 +605,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
|
|
|
602
605
|
type: "text/csv;charset=utf-8",
|
|
603
606
|
}), "export.csv");
|
|
604
607
|
}, [sortedRenderData]);
|
|
605
|
-
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", { children: isSearchable ? (_jsx("input", { className: "schema-table__search", type: "text", placeholder: searchPlaceholder || "Search...", value: searchQuery, onChange: onSearchChange, onKeyDown: onInputKeyDown, autoFocus: enableAutoFocus, onBlur: onSearchBlur })) : null }), customElement || (_jsx("div", { className: "schema-table__custom_element_placeholder" })), enableRowCounter ? (_jsx("span", Object.assign({ className: "schema-table__row_counter" }, { children: translate("showingFilteredCountOfTotalCount", (sortedRenderData === null || sortedRenderData === void 0 ? void 0 : sortedRenderData.length) || 0, data.length) }))) : null, isExportable ? (_jsx("button", Object.assign({ onClick: onExportDataClick, style: { marginLeft: 8 }, disabled: !(sortedRenderData === null || sortedRenderData === void 0 ? void 0 : sortedRenderData.length) }, { children: translate("exportData") }))) : null, isSearchable || isColumnFilterable ? (_jsx("button", Object.assign({ onClick: onClearFiltersButtonClick, style: { marginLeft: 8 }, disabled: Object.keys(columnFilterMap).length + searchQuery.length === 0 }, { children: translate("clearFilters") }))) : null] })), columnWidths ? (_jsxs("div", Object.assign({ className: "schema-table__column_resize_container" }, { children: [_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}_${columnWidths.join(" ")}`), 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}_${columnWidths.join(" ")}`)) : (_jsx("div", Object.assign({ style: {
|
|
608
|
+
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", { children: isSearchable ? (_jsx("input", { className: "schema-table__search", type: "text", placeholder: searchPlaceholder || "Search...", value: searchQuery, onChange: onSearchChange, onKeyDown: onInputKeyDown, autoFocus: enableAutoFocus, onBlur: onSearchBlur })) : null }), customElement || (_jsx("div", { className: "schema-table__custom_element_placeholder" })), enableRowCounter ? (_jsx("span", Object.assign({ className: "schema-table__row_counter" }, { children: translate("showingFilteredCountOfTotalCount", (sortedRenderData === null || sortedRenderData === void 0 ? void 0 : sortedRenderData.length) || 0, data.length) }))) : null, isExportable ? (_jsx("button", Object.assign({ onClick: onExportDataClick, style: { marginLeft: 8 }, disabled: !(sortedRenderData === null || sortedRenderData === void 0 ? void 0 : sortedRenderData.length) }, { children: translate("exportData") }))) : null, isSearchable || isColumnFilterable ? (_jsx("button", Object.assign({ onClick: onClearFiltersButtonClick, style: { marginLeft: 8 }, disabled: Object.keys(columnFilterMap).length + searchQuery.length === 0 }, { children: translate("clearFilters") }))) : null] })), columnWidths ? (_jsxs("div", Object.assign({ className: "schema-table__column_resize_container" }, { children: [_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}_${columnWidths.join(" ")}`), sourceData && !isDirty ? (_jsx(VariableSizeGrid, Object.assign({ className: "schema-table__tbody", height: tableBodyHeight, width: rowWidth, columnWidth: getColumnWidth, rowHeight: getRowHeight, columnCount: columnCount, rowCount: rowCount, ref: tableRef }, { children: SchemaTableTd }), `tbody_${tableBodyHeight}_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}_${columnCount}_${columnWidths.join(" ")}`)) : (_jsx("div", Object.assign({ style: {
|
|
606
609
|
width: rowWidth,
|
|
607
610
|
height: Math.max(50, tableBodyHeight),
|
|
608
611
|
border: "1px solid #BBB",
|