mig-schema-table 3.0.20 → 3.0.22
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,
|
|
@@ -47,6 +47,6 @@ const Th = ({ columnFilterDropdown, isAllChecked, isColumnSearchable, isSortable
|
|
|
47
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: (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" } }, { 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] })));
|
|
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);
|
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;
|