mig-schema-table 3.0.19 → 3.0.21
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.
|
@@ -60,7 +60,8 @@ export default function ColumnFilterRow({ columnNames, getWidth, config, value,
|
|
|
60
60
|
}
|
|
61
61
|
}, [columnSearchHandler, getSelectComponent]);
|
|
62
62
|
const removeDropdown = React.useCallback((e) => {
|
|
63
|
-
|
|
63
|
+
var _a;
|
|
64
|
+
if (!columnFilterDropdown || ((_a = e.target.dataset) === null || _a === void 0 ? void 0 : _a.bsToggle) === "dropdown") {
|
|
64
65
|
return;
|
|
65
66
|
}
|
|
66
67
|
let columnFilterEl = null;
|
|
@@ -94,8 +95,8 @@ export default function ColumnFilterRow({ columnNames, getWidth, config, value,
|
|
|
94
95
|
if (propName === SELECT_ALL_COLUMN_NAME || !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.isFilterable)) {
|
|
95
96
|
return _jsx("div", { className: "schema-table__th" });
|
|
96
97
|
}
|
|
97
|
-
return (_jsx("ul", Object.assign({
|
|
98
|
-
? "show"
|
|
98
|
+
return (_jsx("ul", Object.assign({ className: `column-filter-dropdown ${columnFilterDropdown && columnFilterDropdown === propName
|
|
99
|
+
? "column-filter-dropdown--show"
|
|
99
100
|
: ""}`, style: {
|
|
100
101
|
position: "fixed",
|
|
101
102
|
marginTop: -10,
|
|
@@ -68,9 +68,9 @@ function Td({ checkedIndexes, columnIndex, data, getRowClassName, getRowSelected
|
|
|
68
68
|
case "integer":
|
|
69
69
|
tdDivProps.className += ` text-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "end"}`;
|
|
70
70
|
break;
|
|
71
|
-
|
|
72
|
-
if (
|
|
73
|
-
tdDivProps.className += ` text-${
|
|
71
|
+
default:
|
|
72
|
+
if (propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) {
|
|
73
|
+
tdDivProps.className += ` text-${propConfig.align}`;
|
|
74
74
|
}
|
|
75
75
|
}
|
|
76
76
|
return _jsx("div", Object.assign({}, tdDivProps, { children: row[propName] }));
|
|
@@ -2,20 +2,20 @@ import { oas31 } from "openapi3-ts";
|
|
|
2
2
|
import React, { CSSProperties, Dispatch, SetStateAction } from "react";
|
|
3
3
|
import { IColumnConfig } from "../../types";
|
|
4
4
|
interface IThProps {
|
|
5
|
-
|
|
5
|
+
columnFilterDropdown?: string;
|
|
6
|
+
isAllChecked?: boolean;
|
|
7
|
+
isColumnSearchable?: boolean;
|
|
6
8
|
isSortable: boolean;
|
|
7
9
|
name: string;
|
|
10
|
+
numberOfSelectedRows?: number;
|
|
11
|
+
onSelectAllIndexesHandler?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
12
|
+
propConfig?: IColumnConfig<any>;
|
|
8
13
|
schema: oas31.SchemaObject;
|
|
14
|
+
setColumnFilterDropdown?: Dispatch<SetStateAction<string | undefined>>;
|
|
9
15
|
setSortAsc: Dispatch<SetStateAction<boolean>>;
|
|
10
16
|
setSortColumn: Dispatch<SetStateAction<string>>;
|
|
11
17
|
sortAsc?: boolean;
|
|
12
18
|
style: CSSProperties;
|
|
13
|
-
onSelectAllIndexesHandler?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
14
|
-
isAllChecked?: boolean;
|
|
15
|
-
numberOfSelectedRows?: number;
|
|
16
|
-
columnFilterDropdown?: string;
|
|
17
|
-
setColumnFilterDropdown?: Dispatch<SetStateAction<string | undefined>>;
|
|
18
|
-
isColumnSearchable?: boolean;
|
|
19
19
|
}
|
|
20
|
-
declare const _default: ({
|
|
20
|
+
declare const _default: ({ columnFilterDropdown, isAllChecked, isColumnSearchable, isSortable, name, numberOfSelectedRows, onSelectAllIndexesHandler, propConfig, schema, setColumnFilterDropdown, setSortAsc, setSortColumn, sortAsc, style, }: IThProps) => import("react/jsx-runtime").JSX.Element;
|
|
21
21
|
export default _default;
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import React from "react";
|
|
3
3
|
import { uncamel } from "../../inc/string";
|
|
4
4
|
import { SELECT_ALL_COLUMN_NAME } from "../constants";
|
|
5
|
-
const Th = ({
|
|
5
|
+
const Th = ({ columnFilterDropdown, isAllChecked, isColumnSearchable, isSortable, name, numberOfSelectedRows, onSelectAllIndexesHandler, propConfig, schema, setColumnFilterDropdown, setSortAsc, setSortColumn, sortAsc, style, }) => {
|
|
6
6
|
const thDivProps = {
|
|
7
7
|
style,
|
|
8
8
|
className: `schema-table__th ${isSortable ? "schema-table__th--sortable" : "schema-table__th--unsortable"}`,
|
|
@@ -10,11 +10,11 @@ const Th = ({ config, isSortable, name, schema, setSortAsc, setSortColumn, sortA
|
|
|
10
10
|
const onSortButtonClick = React.useCallback(() => {
|
|
11
11
|
if (sortAsc === undefined) {
|
|
12
12
|
setSortColumn(name);
|
|
13
|
-
setSortAsc(!(
|
|
13
|
+
setSortAsc(!(propConfig === null || propConfig === void 0 ? void 0 : propConfig.defaultSortDesc));
|
|
14
14
|
return;
|
|
15
15
|
}
|
|
16
16
|
setSortAsc((sortAsc) => !sortAsc);
|
|
17
|
-
}, [
|
|
17
|
+
}, [propConfig === null || propConfig === void 0 ? void 0 : propConfig.defaultSortDesc, name, setSortAsc, setSortColumn, sortAsc]);
|
|
18
18
|
const onFilterButtonClick = React.useCallback(() => {
|
|
19
19
|
if (!setColumnFilterDropdown) {
|
|
20
20
|
return;
|
|
@@ -36,17 +36,17 @@ const Th = ({ config, isSortable, name, schema, setSortAsc, setSortColumn, sortA
|
|
|
36
36
|
}
|
|
37
37
|
switch (schema.type) {
|
|
38
38
|
case "boolean":
|
|
39
|
-
thDivProps.className += ` text-${(
|
|
39
|
+
thDivProps.className += ` text-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "center"} justify-content-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "center"}`;
|
|
40
40
|
break;
|
|
41
41
|
case "integer":
|
|
42
42
|
case "number":
|
|
43
|
-
thDivProps.className += ` text-${(
|
|
43
|
+
thDivProps.className += ` text-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "end"} justify-content-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "end"}`;
|
|
44
44
|
break;
|
|
45
|
-
|
|
46
|
-
if (
|
|
47
|
-
thDivProps.className += ` text-${
|
|
45
|
+
default:
|
|
46
|
+
if (propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) {
|
|
47
|
+
thDivProps.className += ` text-${propConfig.align}`;
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
|
-
return (_jsxs("div", Object.assign({}, thDivProps, { children: [isSortable ? (_jsxs("button", Object.assign({ className: "px-0", disabled: (
|
|
50
|
+
return (_jsxs("div", Object.assign({}, thDivProps, { children: [isSortable ? (_jsxs("button", Object.assign({ className: "px-0", disabled: (propConfig === null || propConfig === void 0 ? void 0 : propConfig.sortable) === false, onClick: onSortButtonClick }, { children: [(propConfig === null || propConfig === void 0 ? void 0 : propConfig.title) === undefined ? uncamel(name) : propConfig === null || propConfig === void 0 ? void 0 : propConfig.title, sortAsc === undefined ? null : sortAsc ? "▲" : "▼"] }))) : (_jsx("div", Object.assign({ style: { lineHeight: "44px" } }, { children: (propConfig === null || propConfig === void 0 ? void 0 : propConfig.title) === undefined ? uncamel(name) : propConfig === null || propConfig === void 0 ? void 0 : propConfig.title }))), (propConfig === null || propConfig === void 0 ? void 0 : propConfig.isFilterable) && isColumnSearchable ? (_jsx("button", Object.assign({ onClick: onFilterButtonClick, "data-bs-toggle": "dropdown" }, { children: _jsx("svg", Object.assign({ viewBox: "0 0 36 36", xmlns: "http://www.w3.org/2000/svg", height: 16, width: 16, style: { display: "block" }, "data-bs-toggle": "dropdown" }, { children: _jsx("polygon", { "data-bs-toggle": "dropdown", fill: "#231F20", points: "14,30 22,25 22,17 35.999,0 17.988,0 0,0 14,17 " }) })) }))) : null] })));
|
|
51
51
|
};
|
|
52
52
|
export default React.memo(Th);
|
|
@@ -256,7 +256,7 @@ export default function SchemaTable({ Heading = VariableSizeList, checkedIndexes
|
|
|
256
256
|
}, [checkedIndexes, filteredRenderData]);
|
|
257
257
|
const SchemaTableTh = React.useCallback(({ style, index }) => {
|
|
258
258
|
const propName = columnNames[index];
|
|
259
|
-
return (_jsx(Th, {
|
|
259
|
+
return (_jsx(Th, { columnFilterDropdown: columnFilterDropdown, isAllChecked: isAllRowsChecked, isColumnSearchable: isColumnSearchable, isSortable: !!isSortable, name: propName, numberOfSelectedRows: checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length, onSelectAllIndexesHandler: onSelectAllIndexesHandler, propConfig: config ? config[propName] : undefined, schema: properties[propName], setColumnFilterDropdown: setColumnFilterDropdown, setSortAsc: setSortAsc, setSortColumn: setSortColumn, sortAsc: sortColumn === propName ? sortAsc : undefined, style: style }));
|
|
260
260
|
}, [
|
|
261
261
|
columnNames,
|
|
262
262
|
config,
|
|
@@ -272,7 +272,7 @@ export default function SchemaTable({ Heading = VariableSizeList, checkedIndexes
|
|
|
272
272
|
]);
|
|
273
273
|
const SchemaTableTd = React.useCallback(({ columnIndex, rowIndex, style }) => {
|
|
274
274
|
const propName = columnNames[columnIndex];
|
|
275
|
-
return (_jsx(Td, { checkedIndexes: checkedIndexes, columnIndex: columnIndex, data: data, getRowClassName: getRowClassName, getRowSelected: getRowSelected, onCheckedIndexesChange: onCheckedIndexesChange, propConfig: config ? config[propName] : undefined, propName: propName, propSchema: properties[propName], rowHeight: rowHeight, rowIndex: rowIndex, sortedRenderData: sortedRenderData, style: style
|
|
275
|
+
return (_jsx(Td, { checkedIndexes: checkedIndexes, columnIndex: columnIndex, data: data, getRowClassName: getRowClassName, getRowSelected: getRowSelected, onCheckedIndexesChange: onCheckedIndexesChange, onRowClick: onRowClick, propConfig: config ? config[propName] : undefined, propName: propName, propSchema: properties[propName], rowHeight: rowHeight, rowIndex: rowIndex, sortedRenderData: sortedRenderData, style: style }));
|
|
276
276
|
}, [
|
|
277
277
|
checkedIndexes,
|
|
278
278
|
columnNames,
|
package/dist/index.css
CHANGED
|
@@ -27,6 +27,51 @@
|
|
|
27
27
|
.schema-table__column-filter .react-datepicker {
|
|
28
28
|
display: flex;
|
|
29
29
|
}
|
|
30
|
+
.schema-table__column-filter .column-filter-dropdown {
|
|
31
|
+
--bs-dropdown-zindex: 1000;
|
|
32
|
+
--bs-dropdown-min-width: 10rem;
|
|
33
|
+
--bs-dropdown-padding-x: 0;
|
|
34
|
+
--bs-dropdown-padding-y: 0.5rem;
|
|
35
|
+
--bs-dropdown-spacer: 0.125rem;
|
|
36
|
+
--bs-dropdown-font-size: 1rem;
|
|
37
|
+
--bs-dropdown-color: #212529;
|
|
38
|
+
--bs-dropdown-bg: #fff;
|
|
39
|
+
--bs-dropdown-border-color: rgba(0, 0, 0, 0.175);
|
|
40
|
+
--bs-dropdown-border-radius: 0.375rem;
|
|
41
|
+
--bs-dropdown-border-width: 1px;
|
|
42
|
+
--bs-dropdown-inner-border-radius: calc(0.375rem - 1px);
|
|
43
|
+
--bs-dropdown-divider-bg: rgba(0, 0, 0, 0.175);
|
|
44
|
+
--bs-dropdown-divider-margin-y: 0.5rem;
|
|
45
|
+
--bs-dropdown-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
|
46
|
+
--bs-dropdown-link-color: #212529;
|
|
47
|
+
--bs-dropdown-link-hover-color: #1e2125;
|
|
48
|
+
--bs-dropdown-link-hover-bg: #e9ecef;
|
|
49
|
+
--bs-dropdown-link-active-color: #fff;
|
|
50
|
+
--bs-dropdown-link-active-bg: #0d6efd;
|
|
51
|
+
--bs-dropdown-link-disabled-color: #adb5bd;
|
|
52
|
+
--bs-dropdown-item-padding-x: 1rem;
|
|
53
|
+
--bs-dropdown-item-padding-y: 0.25rem;
|
|
54
|
+
--bs-dropdown-header-color: #6c757d;
|
|
55
|
+
--bs-dropdown-header-padding-x: 1rem;
|
|
56
|
+
--bs-dropdown-header-padding-y: 0.5rem;
|
|
57
|
+
position: absolute;
|
|
58
|
+
z-index: var(--bs-dropdown-zindex);
|
|
59
|
+
display: none;
|
|
60
|
+
min-width: var(--bs-dropdown-min-width);
|
|
61
|
+
padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
|
|
62
|
+
margin: 0;
|
|
63
|
+
font-size: var(--bs-dropdown-font-size);
|
|
64
|
+
color: var(--bs-dropdown-color);
|
|
65
|
+
text-align: left;
|
|
66
|
+
list-style: none;
|
|
67
|
+
background-color: var(--bs-dropdown-bg);
|
|
68
|
+
background-clip: padding-box;
|
|
69
|
+
border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
|
|
70
|
+
border-radius: var(--bs-dropdown-border-radius);
|
|
71
|
+
}
|
|
72
|
+
.schema-table__column-filter .column-filter-dropdown--show {
|
|
73
|
+
display: block;
|
|
74
|
+
}
|
|
30
75
|
.schema-table__th {
|
|
31
76
|
background-color: #eee;
|
|
32
77
|
align-items: center;
|