mig-schema-table 3.0.74 → 3.0.76
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.
- package/dist/SchemaTable/Td/index.js +12 -5
- package/dist/SchemaTable/{SchemaTableTh → Th}/index.d.ts +2 -2
- package/dist/SchemaTable/{SchemaTableTh → Th}/index.js +8 -7
- package/dist/SchemaTable/{SchemaTableThMenu → ThMenu}/FilterMenuComponent/index.js +17 -10
- package/dist/SchemaTable/{SchemaTableThMenu → ThMenu}/index.d.ts +3 -3
- package/dist/SchemaTable/{SchemaTableThMenu → ThMenu}/index.js +4 -4
- package/dist/SchemaTable/index.js +15 -15
- package/dist/index.css +15 -15
- package/dist/types.d.ts +1 -1
- package/package.json +2 -2
- /package/dist/SchemaTable/{SchemaTableThMenu → ThMenu}/FilterMenuComponent/index.d.ts +0 -0
|
@@ -48,6 +48,17 @@ function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowC
|
|
|
48
48
|
: DEFAULT_DATE_TIME_FORMAT)} (${t(alternativeTimeZone)})`;
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
|
+
const classNames = [
|
|
52
|
+
"schema-table__td",
|
|
53
|
+
`schema-table__td--${rowIndex % 2 ? "odd" : "even"}`,
|
|
54
|
+
`schema-table__td--prop-${propName}`,
|
|
55
|
+
];
|
|
56
|
+
if (getRowSelected && getRowSelected(data[row._index], row._index)) {
|
|
57
|
+
classNames.push("schema-table__td--selected");
|
|
58
|
+
}
|
|
59
|
+
if (getRowClassName) {
|
|
60
|
+
classNames.push(getRowClassName(data[row._index], row._index, sortedRenderData));
|
|
61
|
+
}
|
|
51
62
|
return {
|
|
52
63
|
"data-row-index": rowIndex,
|
|
53
64
|
"data-column-index": columnIndex,
|
|
@@ -55,11 +66,7 @@ function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowC
|
|
|
55
66
|
style: Object.assign(Object.assign({}, style), { lineHeight: `${rowHeight}px` }),
|
|
56
67
|
onClick: onTdClick,
|
|
57
68
|
onDoubleClick: onTdDoubleClick,
|
|
58
|
-
className:
|
|
59
|
-
? " schema-table__td--selected"
|
|
60
|
-
: ""} ${getRowClassName
|
|
61
|
-
? getRowClassName(data[row._index], row._index, sortedRenderData)
|
|
62
|
-
: ""}`,
|
|
69
|
+
className: classNames.join(" "),
|
|
63
70
|
title,
|
|
64
71
|
};
|
|
65
72
|
}, [
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { oas31 } from "openapi3-ts";
|
|
2
2
|
import React, { CSSProperties, Dispatch, SetStateAction } from "react";
|
|
3
3
|
import { IColumnConfig } from "../../types";
|
|
4
|
-
import {
|
|
4
|
+
import { IThMenuConfig } from "../ThMenu";
|
|
5
5
|
export declare enum EColumnFilterStatus {
|
|
6
6
|
UNAVAILABLE = "UNAVAILABLE",
|
|
7
7
|
AVAILABLE = "AVAILABLE",
|
|
@@ -17,7 +17,7 @@ interface IThProps {
|
|
|
17
17
|
propIsRequired: boolean;
|
|
18
18
|
propName: string;
|
|
19
19
|
schema?: oas31.SchemaObject;
|
|
20
|
-
setMenuConfig: Dispatch<SetStateAction<
|
|
20
|
+
setMenuConfig: Dispatch<SetStateAction<IThMenuConfig | undefined>>;
|
|
21
21
|
setSortAsc: Dispatch<SetStateAction<boolean>>;
|
|
22
22
|
setSortColumn: Dispatch<SetStateAction<string>>;
|
|
23
23
|
sortAsc?: boolean;
|
|
@@ -9,14 +9,15 @@ export var EColumnFilterStatus;
|
|
|
9
9
|
EColumnFilterStatus["AVAILABLE"] = "AVAILABLE";
|
|
10
10
|
EColumnFilterStatus["ACTIVE"] = "ACTIVE";
|
|
11
11
|
})(EColumnFilterStatus || (EColumnFilterStatus = {}));
|
|
12
|
-
const
|
|
12
|
+
const Th = ({ columnFilterStatus, isAllChecked, isSortable, numberOfSelectedRows, onSelectAllIndexesHandler, propConfig, propIsRequired, propName, schema, setMenuConfig, setSortAsc, setSortColumn, sortAsc, style, }) => {
|
|
13
13
|
const classNames = [
|
|
14
|
-
`schema-
|
|
15
|
-
`schema-
|
|
14
|
+
`schema-table__th`,
|
|
15
|
+
`schema-table__th--filter-${columnFilterStatus}`,
|
|
16
|
+
`schema-table__th--prop-${propName}`,
|
|
16
17
|
];
|
|
17
|
-
classNames.push(isSortable ? "schema-
|
|
18
|
+
classNames.push(isSortable ? "schema-table__th--sortable" : "schema-table__th--unsortable");
|
|
18
19
|
if (sortAsc !== undefined) {
|
|
19
|
-
classNames.push("schema-
|
|
20
|
+
classNames.push("schema-table__th--sorted");
|
|
20
21
|
}
|
|
21
22
|
const onLabelClick = React.useCallback(() => {
|
|
22
23
|
if (!isSortable) {
|
|
@@ -83,6 +84,6 @@ const SchemaTableTh = ({ columnFilterStatus, isAllChecked, isSortable, numberOfS
|
|
|
83
84
|
classNames.push(`text-${propConfig.align}`);
|
|
84
85
|
}
|
|
85
86
|
}
|
|
86
|
-
return (_jsxs("div", Object.assign({ style: style, className: classNames.join(" ") }, { children: [_jsxs("div", Object.assign({ className: "schema-
|
|
87
|
+
return (_jsxs("div", Object.assign({ style: style, className: classNames.join(" ") }, { children: [_jsxs("div", Object.assign({ className: "schema-table__th__label-body", style: { lineHeight: "44px" }, onClick: onLabelClick }, { children: [_jsx("span", Object.assign({ className: "schema-table__th__label-body-text" }, { children: labelBody })), sortAsc === undefined ? null : (_jsx("span", Object.assign({ className: "schema-table__th__sort-icon" }, { children: sortAsc ? "↓" : "↑" })))] })), isSortable || columnFilterStatus !== EColumnFilterStatus.UNAVAILABLE ? (_jsx("button", Object.assign({ className: "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] })));
|
|
87
88
|
};
|
|
88
|
-
export default React.memo(
|
|
89
|
+
export default React.memo(Th);
|
|
@@ -19,9 +19,10 @@ import { endOfDay } from "date-fns";
|
|
|
19
19
|
const FilterMenuComponent = ({ columnFilterValue, onChange, onInputKeyDown, propConfig, propIsRequired, propName, propSchema, }) => {
|
|
20
20
|
const { type, format, minimum, maximum } = propSchema || {};
|
|
21
21
|
const value = columnFilterValue;
|
|
22
|
+
const isDateTime = format === "date-time";
|
|
22
23
|
switch (type) {
|
|
23
24
|
case "integer":
|
|
24
|
-
return (_jsx("ol", Object.assign({ className: "schema-table-menu schema-
|
|
25
|
+
return (_jsx("ol", Object.assign({ className: "schema-table-menu schema-table__th-menu__filter-menu-component" }, { children: _jsx("li", { children: _jsx("input", { autoFocus: true, className: "form-control", type: "number", value: (value || ""), "data-prop-name": propName, onChange: (e) => {
|
|
25
26
|
onChange(e.currentTarget.value === ""
|
|
26
27
|
? undefined
|
|
27
28
|
: parseInt(e.currentTarget.value), false);
|
|
@@ -35,7 +36,7 @@ const FilterMenuComponent = ({ columnFilterValue, onChange, onInputKeyDown, prop
|
|
|
35
36
|
if (value === undefined) {
|
|
36
37
|
selectValue = "";
|
|
37
38
|
}
|
|
38
|
-
return (_jsx("ol", Object.assign({ className: "schema-table-menu schema-
|
|
39
|
+
return (_jsx("ol", Object.assign({ className: "schema-table-menu schema-table__th-menu__filter-menu-component" }, { children: _jsx("li", { children: _jsxs("select", Object.assign({ autoFocus: true, className: "form-select", value: selectValue, "data-prop-name": propName, onChange: (e) => {
|
|
39
40
|
switch (e.currentTarget.value) {
|
|
40
41
|
case "✓":
|
|
41
42
|
onChange(true, true);
|
|
@@ -50,7 +51,7 @@ const FilterMenuComponent = ({ columnFilterValue, onChange, onInputKeyDown, prop
|
|
|
50
51
|
// @ts-ignore
|
|
51
52
|
case "string":
|
|
52
53
|
if (propSchema === null || propSchema === void 0 ? void 0 : propSchema.enum) {
|
|
53
|
-
return (_jsx("ol", Object.assign({ className: "schema-table-menu schema-
|
|
54
|
+
return (_jsx("ol", Object.assign({ className: "schema-table-menu schema-table__th-menu__filter-menu-component" }, { children: _jsx("li", { children: _jsxs("select", Object.assign({ autoFocus: true, className: "form-select", value: value, "data-prop-name": propName, onChange: (e) => {
|
|
54
55
|
onChange(e.currentTarget.value || undefined, true);
|
|
55
56
|
} }, { children: [_jsx("option", Object.assign({ value: "" }, { children: "All" }), "all"), propSchema.enum.map((name) => {
|
|
56
57
|
const rowName = !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.translation)
|
|
@@ -59,14 +60,16 @@ const FilterMenuComponent = ({ columnFilterValue, onChange, onInputKeyDown, prop
|
|
|
59
60
|
return (_jsx("option", Object.assign({ value: rowName }, { children: rowName }), `column-filter-select-${rowName}`));
|
|
60
61
|
})] })) }) })));
|
|
61
62
|
}
|
|
62
|
-
if (
|
|
63
|
-
const dateFormat =
|
|
63
|
+
if (isDateTime || format === "date") {
|
|
64
|
+
const dateFormat = isDateTime
|
|
65
|
+
? DEFAULT_DATE_TIME_FORMAT
|
|
66
|
+
: DEFAULT_DATE_FORMAT;
|
|
64
67
|
const dateRangeValue = (columnFilterValue || {
|
|
65
68
|
from: undefined,
|
|
66
69
|
to: undefined,
|
|
67
70
|
filterEmpty: undefined,
|
|
68
71
|
});
|
|
69
|
-
return (_jsxs("ol", Object.assign({ className: "schema-table-menu schema-
|
|
72
|
+
return (_jsxs("ol", Object.assign({ className: "schema-table-menu schema-table__th-menu__filter-menu-component" }, { children: [propIsRequired ? null : (_jsxs("li", Object.assign({ style: { padding: 8 } }, { children: [_jsxs("label", Object.assign({ className: "d-flex" }, { children: [_jsx("input", { type: "checkbox", className: "m-0 me-1", checked: !!dateRangeValue.filterEmpty, onChange: () => {
|
|
70
73
|
const { filterEmpty } = dateRangeValue, newDateRangeValue = __rest(dateRangeValue, ["filterEmpty"]);
|
|
71
74
|
if (!filterEmpty) {
|
|
72
75
|
newDateRangeValue.filterEmpty = true;
|
|
@@ -83,21 +86,25 @@ const FilterMenuComponent = ({ columnFilterValue, onChange, onInputKeyDown, prop
|
|
|
83
86
|
return;
|
|
84
87
|
}
|
|
85
88
|
onChange(Object.assign(Object.assign({}, columnFilterValue), { from: date || undefined }), true);
|
|
86
|
-
}, placeholderText: dateFormat, isClearable: true, selectsStart: true, showTimeSelect:
|
|
89
|
+
}, placeholderText: dateFormat, isClearable: true, selectsStart: true, showTimeSelect: isDateTime, showTimeInput: isDateTime, timeIntervals: 15, shouldCloseOnSelect: !isDateTime })] })), _jsxs("li", Object.assign({ style: { padding: 8 } }, { children: [_jsx("label", Object.assign({ style: { width: 120, paddingLeft: 4 } }, { children: "End date-time" })), _jsx(DatePicker, { id: "filter-date", dateFormat: dateFormat, "data-prop-name": propName, locale: nl, selectsEnd: true, selected: dateRangeValue.to, onChange: (date) => {
|
|
87
90
|
if (!date && !dateRangeValue.from) {
|
|
88
91
|
onChange(undefined, true);
|
|
89
92
|
return;
|
|
90
93
|
}
|
|
91
|
-
const to = date
|
|
94
|
+
const to = date
|
|
95
|
+
? isDateTime
|
|
96
|
+
? date
|
|
97
|
+
: endOfDay(date)
|
|
98
|
+
: undefined;
|
|
92
99
|
if (dateRangeValue.from && to && to < dateRangeValue.from) {
|
|
93
100
|
return;
|
|
94
101
|
}
|
|
95
102
|
onChange(Object.assign(Object.assign({}, columnFilterValue), { to }), true);
|
|
96
|
-
}, placeholderText: dateFormat, isClearable: true, startDate: dateRangeValue.from, endDate: dateRangeValue.to,
|
|
103
|
+
}, placeholderText: dateFormat, isClearable: true, startDate: dateRangeValue.from, endDate: dateRangeValue.to, showTimeInput: isDateTime, showTimeSelect: isDateTime, timeIntervals: 15, shouldCloseOnSelect: !isDateTime })] }))] })));
|
|
97
104
|
}
|
|
98
105
|
// falls through
|
|
99
106
|
default:
|
|
100
|
-
return (_jsx("ol", Object.assign({ className: "schema-table-menu schema-
|
|
107
|
+
return (_jsx("ol", Object.assign({ className: "schema-table-menu schema-table__th-menu__filter-menu-component" }, { children: _jsx("li", { children: _jsx("input", { autoFocus: true, type: "text", className: "form-control", placeholder: `Search ${propName}`, "aria-label": `Search ${propName}`, value: (value || ""), "data-prop-name": propName, onChange: (e) => {
|
|
101
108
|
onChange(e.currentTarget.value || undefined, false);
|
|
102
109
|
}, onKeyDown: onInputKeyDown, onBlur: (e) => {
|
|
103
110
|
onChange(e.currentTarget.value || undefined, true);
|
|
@@ -2,13 +2,13 @@ import React, { Dispatch, SetStateAction } from "react";
|
|
|
2
2
|
import { oas31 } from "openapi3-ts";
|
|
3
3
|
import { TColumnFilterValue } from "../index";
|
|
4
4
|
import { IColumnConfig } from "../../types";
|
|
5
|
-
export interface
|
|
5
|
+
export interface IThMenuConfig {
|
|
6
6
|
referenceElement: HTMLElement;
|
|
7
7
|
propName: string;
|
|
8
8
|
propConfig?: IColumnConfig<any>;
|
|
9
9
|
propIsRequired: boolean;
|
|
10
10
|
}
|
|
11
|
-
type
|
|
11
|
+
type TThMenuProps = IThMenuConfig & {
|
|
12
12
|
isSortable: boolean;
|
|
13
13
|
isFilterable: boolean;
|
|
14
14
|
onChange: (newValue: TColumnFilterValue | undefined, persistState: boolean) => void;
|
|
@@ -20,5 +20,5 @@ type TSchemaTableThMenuProps = ISchemaTableThMenuConfig & {
|
|
|
20
20
|
setSortColumn: Dispatch<SetStateAction<string>>;
|
|
21
21
|
value: TColumnFilterValue;
|
|
22
22
|
};
|
|
23
|
-
declare const _default: React.MemoExoticComponent<({ isSortable, isFilterable, onChange, onClose, onInputKeyDown, propConfig, propIsRequired, propName, propSchema, referenceElement, setSortAsc, setSortColumn, value, }:
|
|
23
|
+
declare const _default: React.MemoExoticComponent<({ isSortable, isFilterable, onChange, onClose, onInputKeyDown, propConfig, propIsRequired, propName, propSchema, referenceElement, setSortAsc, setSortColumn, value, }: TThMenuProps) => import("react/jsx-runtime").JSX.Element | null>;
|
|
24
24
|
export default _default;
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
2
2
|
import React from "react";
|
|
3
3
|
import FilterMenuComponent from "./FilterMenuComponent";
|
|
4
4
|
import { usePopper } from "react-popper";
|
|
5
|
-
const
|
|
5
|
+
const ThMenu = ({ isSortable, isFilterable, onChange, onClose, onInputKeyDown, propConfig, propIsRequired, propName, propSchema, referenceElement, setSortAsc, setSortColumn, value, }) => {
|
|
6
6
|
const [menu, setMenu] = React.useState(null);
|
|
7
7
|
const [subMenu, setSubMenu] = React.useState(null);
|
|
8
8
|
const [subMenuReferenceElement, setSubMenuReferenceElement] = React.useState(null);
|
|
@@ -49,8 +49,8 @@ const SchemaTableThMenu = ({ isSortable, isFilterable, onChange, onClose, onInpu
|
|
|
49
49
|
if (!isSortable && !isFilterable) {
|
|
50
50
|
return null;
|
|
51
51
|
}
|
|
52
|
-
return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: "schema-
|
|
52
|
+
return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: "schema-table__th-menu", ref: setMenu, style: menuPopper.styles.popper }, menuPopper.attributes.popper, { children: _jsxs("ol", Object.assign({ className: "schema-table-menu" }, { children: [isSortable ? (_jsxs("li", Object.assign({ onClick: onSortAscendingClick, style: { padding: 8 } }, { children: [_jsx("span", Object.assign({ className: "schema-table__th-menu__icon" }, { children: "\u2193" })), " Sort ascending"] }))) : null, isSortable ? (_jsxs("li", Object.assign({ onClick: onSortDescendingClick, style: { padding: 8 } }, { children: [_jsx("span", Object.assign({ className: "schema-table__th-menu__icon" }, { children: "\u2191" })), " Sort descending"] }))) : null, isFilterable ? (_jsxs("li", Object.assign({ style: { padding: 8 }, onMouseOver: (e) => {
|
|
53
53
|
setSubMenuReferenceElement(e.currentTarget);
|
|
54
|
-
} }, { children: [_jsx("span", Object.assign({ className: "schema-
|
|
54
|
+
} }, { children: [_jsx("span", Object.assign({ className: "schema-table__th-menu__icon" }, { children: _jsx("input", { type: "checkbox", id: "schema-table__th-menu__filters", checked: value !== undefined, disabled: value === undefined, onChange: onFilterCheckboxChange }) })), _jsx("label", Object.assign({ htmlFor: "schema-table__th-menu__filters" }, { children: "Filters" })), _jsx("div", Object.assign({ className: "schema-table__th-menu__sub-menu-indicator" }, { children: ">" }))] }))) : null] })) })), subMenuReferenceElement ? (_jsx("div", Object.assign({ className: "schema-table__th-menu__sub-menu", ref: setSubMenu, style: subMenuPopper.styles.popper }, subMenuPopper.attributes.popper, { children: _jsx(FilterMenu, { columnFilterValue: value, onChange: onChange, onInputKeyDown: onInputKeyDown, propConfig: propConfig, propIsRequired: propIsRequired, propName: propName, propSchema: propSchema }) }))) : null] }));
|
|
55
55
|
};
|
|
56
|
-
export default React.memo(
|
|
56
|
+
export default React.memo(ThMenu);
|
|
@@ -18,8 +18,8 @@ import { SELECT_ALL_COLUMN_NAME, SELECT_ALL_COLUMN_WIDTH } from "./constants";
|
|
|
18
18
|
import Td from "./Td";
|
|
19
19
|
import { DEFAULT_DATE_FORMAT, DEFAULT_DATE_TIME_FORMAT } from "../inc/constant";
|
|
20
20
|
import { parseLocationHash, serializeLocationHash } from "../inc/data";
|
|
21
|
-
import
|
|
22
|
-
import
|
|
21
|
+
import Th, { EColumnFilterStatus } from "./Th";
|
|
22
|
+
import ThMenu from "./ThMenu";
|
|
23
23
|
import { saveAs } from "file-saver";
|
|
24
24
|
import { unparse } from "papaparse";
|
|
25
25
|
const startOfTheWorldDate = new Date("1000-01-01 00:00:00Z");
|
|
@@ -45,7 +45,7 @@ function getIsColumnSortable(isTableSortable, propSchema, propConfig) {
|
|
|
45
45
|
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, useFilterStateHash, width, }) {
|
|
46
46
|
const [sortColumn, setSortColumn] = React.useState(defaultSortColumn);
|
|
47
47
|
const [sortAsc, setSortAsc] = React.useState(defaultSortAsc);
|
|
48
|
-
const [
|
|
48
|
+
const [thMenuConfig, setThMenuConfig] = React.useState();
|
|
49
49
|
const isDataFunction = data instanceof Function;
|
|
50
50
|
const [sourceData, setSourceData] = React.useState(isDataFunction ? undefined : data);
|
|
51
51
|
const [locationHash, setLocationHash] = React.useState(parseLocationHash(window.location.hash));
|
|
@@ -391,7 +391,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
|
|
|
391
391
|
}
|
|
392
392
|
setSortAsc(x);
|
|
393
393
|
}, [isDataFunction]);
|
|
394
|
-
const
|
|
394
|
+
const ConfiguredTh = React.useCallback(({ style, index }) => {
|
|
395
395
|
const propName = columnNames[index];
|
|
396
396
|
const propSchema = (propName === SELECT_ALL_COLUMN_NAME
|
|
397
397
|
? { type: "boolean" }
|
|
@@ -405,9 +405,9 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
|
|
|
405
405
|
if (columnFilterMap[propName] !== undefined) {
|
|
406
406
|
columnFilterStatus = EColumnFilterStatus.ACTIVE;
|
|
407
407
|
}
|
|
408
|
-
return (_jsx(
|
|
408
|
+
return (_jsx(Th, { columnFilterStatus: columnFilterStatus,
|
|
409
409
|
// disableColumnFilter={disableColumnFilter}
|
|
410
|
-
isAllChecked: isAllRowsChecked, isSortable: getIsColumnSortable(!!isSortable, propSchema, propConfig), numberOfSelectedRows: checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length, onSelectAllIndexesHandler: onSelectAllIndexesHandler, propConfig: propConfig, propIsRequired: required.includes(propName), propName: propName, schema: propSchema, setMenuConfig:
|
|
410
|
+
isAllChecked: isAllRowsChecked, isSortable: getIsColumnSortable(!!isSortable, propSchema, propConfig), numberOfSelectedRows: checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length, onSelectAllIndexesHandler: onSelectAllIndexesHandler, propConfig: propConfig, propIsRequired: required.includes(propName), propName: propName, schema: propSchema, setMenuConfig: setThMenuConfig, setSortAsc: onSetSortAsc, setSortColumn: onSetSortColumn, sortAsc: sortColumn === propName ? sortAsc : undefined, style: style }));
|
|
411
411
|
}, [
|
|
412
412
|
checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length,
|
|
413
413
|
columnFilterMap,
|
|
@@ -458,7 +458,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
|
|
|
458
458
|
}, []);
|
|
459
459
|
const onInputKeyDown = React.useCallback((e) => {
|
|
460
460
|
if (e.key === "Enter") {
|
|
461
|
-
|
|
461
|
+
setThMenuConfig(undefined);
|
|
462
462
|
if (isDirty) {
|
|
463
463
|
refreshData();
|
|
464
464
|
}
|
|
@@ -475,7 +475,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
|
|
|
475
475
|
: rowsHeight;
|
|
476
476
|
}, [maxHeight, isSearchable, rowCount, rowHeight]);
|
|
477
477
|
const onPopoverClose = React.useCallback((e) => {
|
|
478
|
-
|
|
478
|
+
setThMenuConfig(undefined);
|
|
479
479
|
e.preventDefault();
|
|
480
480
|
e.stopPropagation();
|
|
481
481
|
}, []);
|
|
@@ -499,27 +499,27 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
|
|
|
499
499
|
setSearchQuery(locationHash.searchQuery || "");
|
|
500
500
|
}, [locationHash, useFilterStateHash]);
|
|
501
501
|
const onSchemaColumnFilterChange = React.useCallback((newColumnFilterValue, persistState) => {
|
|
502
|
-
if (!
|
|
502
|
+
if (!thMenuConfig) {
|
|
503
503
|
return;
|
|
504
504
|
}
|
|
505
505
|
if (isDataFunction) {
|
|
506
506
|
setIsDirty(true);
|
|
507
507
|
}
|
|
508
508
|
if (useFilterStateHash && persistState) {
|
|
509
|
-
window.location.hash = serializeLocationHash(Object.assign(Object.assign({}, locationHash), { columnFilterMap: Object.assign(Object.assign({}, columnFilterMap), { [
|
|
509
|
+
window.location.hash = serializeLocationHash(Object.assign(Object.assign({}, locationHash), { columnFilterMap: Object.assign(Object.assign({}, columnFilterMap), { [thMenuConfig.propName]: newColumnFilterValue }) }));
|
|
510
510
|
return;
|
|
511
511
|
}
|
|
512
512
|
if (newColumnFilterValue === undefined) {
|
|
513
|
-
disableColumnFilter(
|
|
513
|
+
disableColumnFilter(thMenuConfig.propName);
|
|
514
514
|
return;
|
|
515
515
|
}
|
|
516
|
-
setColumnFilterMap((columnFilterMap) => (Object.assign(Object.assign({}, columnFilterMap), { [
|
|
516
|
+
setColumnFilterMap((columnFilterMap) => (Object.assign(Object.assign({}, columnFilterMap), { [thMenuConfig.propName]: newColumnFilterValue })));
|
|
517
517
|
}, [
|
|
518
518
|
columnFilterMap,
|
|
519
519
|
disableColumnFilter,
|
|
520
520
|
isDataFunction,
|
|
521
521
|
locationHash,
|
|
522
|
-
|
|
522
|
+
thMenuConfig,
|
|
523
523
|
useFilterStateHash,
|
|
524
524
|
]);
|
|
525
525
|
const searchInputAutoFocus = React.useMemo(() => {
|
|
@@ -559,7 +559,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
|
|
|
559
559
|
type: "text/csv;charset=utf-8",
|
|
560
560
|
}), "export.csv");
|
|
561
561
|
}, [sortedRenderData]);
|
|
562
|
-
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:
|
|
562
|
+
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: {
|
|
563
563
|
width: rowWidth,
|
|
564
564
|
height: Math.max(50, tableBodyHeight),
|
|
565
565
|
border: "1px solid #BBB",
|
|
@@ -568,6 +568,6 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
|
|
|
568
568
|
backgroundColor: "#CCC",
|
|
569
569
|
alignItems: "center",
|
|
570
570
|
justifyContent: "center",
|
|
571
|
-
} }, { children: isDirty ? (_jsx("button", Object.assign({ onClick: refreshData, className: "btn border" }, { children: "Refresh data" }))) : (_jsx("div", { children: "\u231B Loading..." })) }))),
|
|
571
|
+
} }, { children: isDirty ? (_jsx("button", Object.assign({ onClick: refreshData, className: "btn border" }, { children: "Refresh data" }))) : (_jsx("div", { children: "\u231B Loading..." })) }))), thMenuConfig ? (_jsx(ThMenu, { isFilterable: !!isColumnFilterable, 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, value: columnFilterMap[thMenuConfig.propName] })) : null] })));
|
|
572
572
|
}
|
|
573
573
|
export default React.memo(SchemaTable);
|
package/dist/index.css
CHANGED
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
padding-bottom: 1rem;
|
|
66
66
|
}
|
|
67
67
|
|
|
68
|
-
.schema-
|
|
68
|
+
.schema-table__th {
|
|
69
69
|
background-color: #fcfcfc;
|
|
70
70
|
border-right: 1px solid #ddd;
|
|
71
71
|
border-top: 1px solid #ddd;
|
|
@@ -77,28 +77,28 @@
|
|
|
77
77
|
padding-right: 8px;
|
|
78
78
|
user-select: none;
|
|
79
79
|
}
|
|
80
|
-
.schema-
|
|
80
|
+
.schema-table__th:first-child {
|
|
81
81
|
border-left: 1px solid #ddd;
|
|
82
82
|
}
|
|
83
|
-
.schema-
|
|
83
|
+
.schema-table__th div {
|
|
84
84
|
overflow: hidden;
|
|
85
85
|
white-space: nowrap;
|
|
86
86
|
text-overflow: ellipsis;
|
|
87
87
|
}
|
|
88
|
-
.schema-
|
|
88
|
+
.schema-table__th--sorted {
|
|
89
89
|
background-color: #eff6fb;
|
|
90
90
|
}
|
|
91
|
-
.schema-
|
|
91
|
+
.schema-table__th--filter-ACTIVE .schema-table__th__label-body-text {
|
|
92
92
|
text-decoration: underline;
|
|
93
93
|
font-style: italic;
|
|
94
94
|
}
|
|
95
|
-
.schema-
|
|
95
|
+
.schema-table__th__label-body {
|
|
96
96
|
display: flex;
|
|
97
97
|
flex: 1;
|
|
98
98
|
font-size: 14px;
|
|
99
99
|
align-items: center;
|
|
100
100
|
}
|
|
101
|
-
.schema-
|
|
101
|
+
.schema-table__th__trigger-el {
|
|
102
102
|
display: none;
|
|
103
103
|
position: absolute;
|
|
104
104
|
border: 1px solid #ddd;
|
|
@@ -113,37 +113,37 @@
|
|
|
113
113
|
text-align: center;
|
|
114
114
|
padding: 5px 0 0 !important;
|
|
115
115
|
}
|
|
116
|
-
.schema-
|
|
116
|
+
.schema-table__th__sort-icon {
|
|
117
117
|
font-size: 24px;
|
|
118
118
|
width: 32px;
|
|
119
119
|
display: block;
|
|
120
120
|
text-align: center;
|
|
121
121
|
}
|
|
122
|
-
.schema-
|
|
122
|
+
.schema-table__th:hover {
|
|
123
123
|
background-color: #eff6fb;
|
|
124
124
|
}
|
|
125
|
-
.schema-
|
|
125
|
+
.schema-table__th:hover .schema-table__th__trigger-el {
|
|
126
126
|
display: block !important;
|
|
127
127
|
}
|
|
128
128
|
|
|
129
|
-
.schema-
|
|
129
|
+
.schema-table__th-menu {
|
|
130
130
|
background-color: white;
|
|
131
131
|
}
|
|
132
|
-
.schema-
|
|
132
|
+
.schema-table__th-menu label {
|
|
133
133
|
flex: 1;
|
|
134
134
|
}
|
|
135
|
-
.schema-
|
|
135
|
+
.schema-table__th-menu .schema-table__th-menu__sub-menu-indicator {
|
|
136
136
|
padding-left: 8px;
|
|
137
137
|
margin-left: 8px;
|
|
138
138
|
}
|
|
139
|
-
.schema-
|
|
139
|
+
.schema-table__th-menu__icon {
|
|
140
140
|
display: block;
|
|
141
141
|
width: 24px;
|
|
142
142
|
overflow: hidden;
|
|
143
143
|
text-align: center;
|
|
144
144
|
}
|
|
145
145
|
|
|
146
|
-
.schema-
|
|
146
|
+
.schema-table__th-menu__sub-menu {
|
|
147
147
|
background-color: white;
|
|
148
148
|
border: 1px solid #ddd;
|
|
149
149
|
}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { TColumnFilterValue } from "./SchemaTable";
|
|
3
|
-
import { IFilterMenuComponentProps } from "./SchemaTable/
|
|
3
|
+
import { IFilterMenuComponentProps } from "./SchemaTable/ThMenu/FilterMenuComponent";
|
|
4
4
|
export interface IColumnConfig<T> {
|
|
5
5
|
FilterMenu?: (props: IFilterMenuComponentProps) => React.ReactElement | null;
|
|
6
6
|
align?: "start" | "center" | "end";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mig-schema-table",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.76",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist/"
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"openapi3-ts": "^4.1.2",
|
|
23
23
|
"papaparse": "^5.4.1",
|
|
24
24
|
"react": "^18.2.0",
|
|
25
|
-
"react-datepicker": "^
|
|
25
|
+
"react-datepicker": "^6.2.0",
|
|
26
26
|
"react-dom": "^18.2.0",
|
|
27
27
|
"react-popper": "^2.3.0",
|
|
28
28
|
"react-scripts": "5.0.1",
|
|
File without changes
|