@megha-ui/react 1.2.169 → 1.2.171
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/components/block/index.js +3 -5
- package/dist/components/button/index.js +3 -5
- package/dist/components/button/types/borderStyle.js +1 -2
- package/dist/components/button/types/cursorType.js +1 -2
- package/dist/components/card/index.js +7 -9
- package/dist/components/checkbox/index.js +7 -9
- package/dist/components/date-input/index.js +6 -8
- package/dist/components/dropdown/index.js +42 -47
- package/dist/components/grid/hooks/useBulkSelect.js +6 -10
- package/dist/components/grid/hooks/usePagination.js +6 -10
- package/dist/components/grid/hooks/useResizeObserver.js +3 -5
- package/dist/components/grid/hooks/useSearch.js +3 -7
- package/dist/components/grid/hooks/useSort.js +4 -8
- package/dist/components/grid/hooks/useVisibleData.js +6 -10
- package/dist/components/grid/index.js +149 -188
- package/dist/components/grid/types/grid.d.ts +1 -0
- package/dist/components/grid/types/grid.js +1 -2
- package/dist/components/grid/utils/SummariseDetails.js +12 -17
- package/dist/components/grid/utils/calculatedropdown.js +4 -6
- package/dist/components/grid/utils/globalSearchChips.js +11 -16
- package/dist/components/grid/utils/gridFilterDropdown.js +22 -27
- package/dist/components/grid/utils/gridHeader.js +78 -118
- package/dist/components/grid/utils/gridHeaderDropdown.js +4 -6
- package/dist/components/grid/utils/gridRow.js +29 -34
- package/dist/components/grid/utils/groupedGridDetails.js +17 -22
- package/dist/components/grid/utils/groupedRow.js +12 -17
- package/dist/components/grid/utils/pagination.js +7 -11
- package/dist/components/grid/utils/paginationUtils.js +1 -5
- package/dist/components/grid/utils/regexUtils.js +2 -7
- package/dist/components/grid/utils/shimmer.js +4 -6
- package/dist/components/grid/utils/textFilterDropdown.js +8 -13
- package/dist/components/loader/index.js +6 -41
- package/dist/components/modal/index.js +11 -13
- package/dist/components/tabs/index.js +19 -26
- package/dist/components/text/index.js +3 -5
- package/dist/components/text/textType.js +1 -2
- package/dist/components/text-input/index.js +10 -12
- package/dist/components/textarea/index.js +3 -5
- package/dist/components/texteditor/index.js +25 -27
- package/dist/components/toggle/index.js +4 -6
- package/dist/index.js +16 -41
- package/dist/services/commonService.js +3 -7
- package/package.json +1 -1
|
@@ -1,52 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
-
var ownKeys = function(o) {
|
|
20
|
-
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
-
var ar = [];
|
|
22
|
-
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
-
return ar;
|
|
24
|
-
};
|
|
25
|
-
return ownKeys(o);
|
|
26
|
-
};
|
|
27
|
-
return function (mod) {
|
|
28
|
-
if (mod && mod.__esModule) return mod;
|
|
29
|
-
var result = {};
|
|
30
|
-
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
-
__setModuleDefault(result, mod);
|
|
32
|
-
return result;
|
|
33
|
-
};
|
|
34
|
-
})();
|
|
35
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
36
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
37
|
-
};
|
|
38
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
|
-
exports.getColumnData = void 0;
|
|
40
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
41
|
-
const react_1 = __importStar(require("react"));
|
|
42
|
-
const gridHeaderDropdown_1 = __importDefault(require("./gridHeaderDropdown"));
|
|
43
|
-
const md_1 = require("react-icons/md");
|
|
44
|
-
const gridFilterDropdown_1 = __importDefault(require("./gridFilterDropdown"));
|
|
45
|
-
const textFilterDropdown_1 = __importDefault(require("./textFilterDropdown"));
|
|
46
|
-
const date_input_1 = __importDefault(require("../../date-input"));
|
|
47
|
-
const text_input_1 = __importDefault(require("../../text-input"));
|
|
48
|
-
const checkbox_1 = __importDefault(require("../../checkbox"));
|
|
49
|
-
const getColumnData = (columnKey, gridData, type) => {
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
|
3
|
+
import GridHeaderDropdown from "./gridHeaderDropdown";
|
|
4
|
+
import { MdFilterList } from "react-icons/md";
|
|
5
|
+
import GridFilterDropdown from "./gridFilterDropdown";
|
|
6
|
+
import TextFilterDropdown from "./textFilterDropdown";
|
|
7
|
+
import DateInput from "../../date-input";
|
|
8
|
+
import TextInput from "../../text-input";
|
|
9
|
+
import Checkbox from "../../checkbox";
|
|
10
|
+
export const getColumnData = (columnKey, gridData, type) => {
|
|
50
11
|
const returnedValue = [
|
|
51
12
|
...new Set(gridData
|
|
52
13
|
.filter((item) => item[columnKey] && typeof item[columnKey].value !== "undefined")
|
|
@@ -80,12 +41,11 @@ const getColumnData = (columnKey, gridData, type) => {
|
|
|
80
41
|
return 0;
|
|
81
42
|
});
|
|
82
43
|
};
|
|
83
|
-
exports.getColumnData = getColumnData;
|
|
84
44
|
const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resizable = false, defaultSearchOperation, sortQueries, onSort, bulkSelect, allRowsSelected, someRowsSelected, toggleSelectAll, cellStyle, widthMode, rowHeight, headerRef, showMenu, headerBackground, headerTopBorder, headerBottomBorder, groupBy, setGroupBy, updateGridColumns, setGridColumns, headerDropdownIndex, widthUnits, textFilterLabel = "Text Filter", gridData, checkboxWrapper, onFilter, setUniqueSearch, uniqueSearch, hugColumnWidths, menuVisible, setMenuVisible, dropdownVisible, setDropdownVisible, actionsKey = "actions", columnSearchOutside, locale, formatOptions, }) => {
|
|
85
|
-
const [menuPosition, setMenuPosition] =
|
|
86
|
-
const [searchOpsPosition, setSearchOpsPosition] =
|
|
87
|
-
const [headerColumns, setHeaderColumns] =
|
|
88
|
-
const [resizeIndex, setResizeIndex] =
|
|
45
|
+
const [menuPosition, setMenuPosition] = useState(null);
|
|
46
|
+
const [searchOpsPosition, setSearchOpsPosition] = useState(null);
|
|
47
|
+
const [headerColumns, setHeaderColumns] = useState([]);
|
|
48
|
+
const [resizeIndex, setResizeIndex] = useState(-1);
|
|
89
49
|
const handleMenuClick = (e, columnKey) => {
|
|
90
50
|
e.stopPropagation();
|
|
91
51
|
const rect = e.currentTarget.getBoundingClientRect();
|
|
@@ -94,7 +54,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
94
54
|
setMenuPosition({ top, left });
|
|
95
55
|
setMenuVisible((prev) => prev === columnKey ? "" : columnKey);
|
|
96
56
|
};
|
|
97
|
-
|
|
57
|
+
useEffect(() => {
|
|
98
58
|
const closeMenu = (e) => {
|
|
99
59
|
const target = e.target;
|
|
100
60
|
if (target.closest(".filter-icon")) {
|
|
@@ -110,7 +70,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
110
70
|
document.removeEventListener("click", closeMenu);
|
|
111
71
|
};
|
|
112
72
|
}, []);
|
|
113
|
-
|
|
73
|
+
useEffect(() => {
|
|
114
74
|
setHeaderColumns(columns);
|
|
115
75
|
}, [columns]);
|
|
116
76
|
const toggleDropdown = (columnKey) => {
|
|
@@ -213,18 +173,18 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
213
173
|
"blank",
|
|
214
174
|
"notBlank",
|
|
215
175
|
];
|
|
216
|
-
const isFilterActive =
|
|
176
|
+
const isFilterActive = useCallback((columnKey) => {
|
|
217
177
|
const query = searchQueries[columnKey];
|
|
218
178
|
return (query && (query.text !== "" || query.type !== defaultSearchOperation));
|
|
219
179
|
}, [searchQueries]);
|
|
220
|
-
const activeFilters =
|
|
180
|
+
const activeFilters = useMemo(() => {
|
|
221
181
|
return headerColumns.reduce((acc, column) => {
|
|
222
182
|
acc[column.key] = isFilterActive(column.key);
|
|
223
183
|
return acc;
|
|
224
184
|
}, {});
|
|
225
185
|
}, [headerColumns, isFilterActive]);
|
|
226
|
-
const [isResizing, setIsResizing] =
|
|
227
|
-
const [startX, setStartX] =
|
|
186
|
+
const [isResizing, setIsResizing] = useState(false);
|
|
187
|
+
const [startX, setStartX] = useState(0); // Cursor position when resizing starts
|
|
228
188
|
const handleMouseDown = (e, colIndex) => {
|
|
229
189
|
if (!resizable)
|
|
230
190
|
return;
|
|
@@ -258,7 +218,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
258
218
|
setIsResizing(false);
|
|
259
219
|
setResizeIndex(-1);
|
|
260
220
|
};
|
|
261
|
-
return ((
|
|
221
|
+
return (_jsxs("div", { ref: headerRef, style: {
|
|
262
222
|
height: rowHeight,
|
|
263
223
|
alignItems: "stretch",
|
|
264
224
|
fontSize: "inherit",
|
|
@@ -270,12 +230,12 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
270
230
|
position: "sticky",
|
|
271
231
|
top: 0,
|
|
272
232
|
zIndex: 1,
|
|
273
|
-
}, id: "header", children: [bulkSelect && ((
|
|
233
|
+
}, id: "header", children: [bulkSelect && (_jsx("div", { style: Object.assign(Object.assign({}, cellStyle), { textTransform: "uppercase", padding: "0.5rem", textAlign: "left", whiteSpace: "nowrap", textOverflow: "ellipsis" }), children: _jsx(Checkbox, { selected: allRowsSelected, onChange: () => toggleSelectAll(), noLabel: true, wrapperClass: checkboxWrapper }) })), groupBy
|
|
274
234
|
.split(",")
|
|
275
235
|
.filter((item) => item)
|
|
276
236
|
.map((_groupBy) => {
|
|
277
237
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62;
|
|
278
|
-
return ((
|
|
238
|
+
return (_jsx(_Fragment, { children: headerColumns.find((column) => column.key === _groupBy) && (_jsxs("div", { className: `${sortable &&
|
|
279
239
|
((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.sortable)
|
|
280
240
|
? "sortable"
|
|
281
241
|
: ""} ${((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.showMenu)
|
|
@@ -286,7 +246,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
286
246
|
? `calc(${(_e = headerColumns.find((column) => column.key === _groupBy)) === null || _e === void 0 ? void 0 : _e.width} + 25px)`
|
|
287
247
|
: (hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${(_f = headerColumns.find((column) => column.key === _groupBy)) === null || _f === void 0 ? void 0 : _f.key}`])
|
|
288
248
|
? `calc(${hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${(_g = headerColumns.find((column) => column.key === _groupBy)) === null || _g === void 0 ? void 0 : _g.key}`]} + 25px)`
|
|
289
|
-
: "fit-content", wordBreak: widthMode === "auto" ? "break-all" : "unset", backgroundColor: "var(--row-header-bg)", borderTop: headerTopBorder, borderBottom: headerBottomBorder, flex: widthMode === "auto" ? 1 : undefined, flexGrow: widthMode === "auto" ? 1 : 0, flexShrink: widthMode === "auto" ? 1 : 0 }), onMouseMove: (e) => handleMouseMove(e), onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, children: [(
|
|
249
|
+
: "fit-content", wordBreak: widthMode === "auto" ? "break-all" : "unset", backgroundColor: "var(--row-header-bg)", borderTop: headerTopBorder, borderBottom: headerBottomBorder, flex: widthMode === "auto" ? 1 : undefined, flexGrow: widthMode === "auto" ? 1 : 0, flexShrink: widthMode === "auto" ? 1 : 0 }), onMouseMove: (e) => handleMouseMove(e), onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, children: [_jsxs("div", { style: {
|
|
290
250
|
display: "flex",
|
|
291
251
|
alignItems: "center",
|
|
292
252
|
padding: "0 0.3rem",
|
|
@@ -299,17 +259,17 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
299
259
|
return ((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.sortable) &&
|
|
300
260
|
onSort(headerColumns.find((column) => column.key === _groupBy) ||
|
|
301
261
|
null);
|
|
302
|
-
}, children: [(
|
|
262
|
+
}, children: [_jsxs("div", { style: {
|
|
303
263
|
display: "flex",
|
|
304
264
|
alignItems: "center",
|
|
305
|
-
}, children: [(
|
|
306
|
-
((_k = headerColumns.find((column) => column.key === _groupBy)) === null || _k === void 0 ? void 0 : _k.sortable) && ((
|
|
265
|
+
}, children: [_jsx("span", { children: (_j = headerColumns.find((column) => column.key === _groupBy)) === null || _j === void 0 ? void 0 : _j.label }), sortable &&
|
|
266
|
+
((_k = headerColumns.find((column) => column.key === _groupBy)) === null || _k === void 0 ? void 0 : _k.sortable) && (_jsx("span", { style: {
|
|
307
267
|
visibility: Object.keys(sortQueries).includes(((_l = headerColumns.find((column) => column.key === _groupBy)) === null || _l === void 0 ? void 0 : _l.key) || "")
|
|
308
268
|
? "visible"
|
|
309
269
|
: "hidden",
|
|
310
270
|
}, children: sortQueries[((_m = headerColumns.find((column) => column.key === _groupBy)) === null || _m === void 0 ? void 0 : _m.key) || ""] === "asc"
|
|
311
271
|
? " ↑"
|
|
312
|
-
: " ↓" }))] }), (
|
|
272
|
+
: " ↓" }))] }), _jsx("div", { style: { display: "flex", alignItems: "center" }, children: ((_o = headerColumns.find((column) => column.key === _groupBy)) === null || _o === void 0 ? void 0 : _o.filter) && (_jsxs("div", { style: {
|
|
313
273
|
alignItems: "center",
|
|
314
274
|
marginLeft: 6,
|
|
315
275
|
position: "relative",
|
|
@@ -319,21 +279,21 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
319
279
|
e.preventDefault();
|
|
320
280
|
e.stopPropagation();
|
|
321
281
|
handleFilterIconClick(e, ((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "");
|
|
322
|
-
}, children: [activeFilters[((_p = headerColumns.find((column) => column.key === _groupBy)) === null || _p === void 0 ? void 0 : _p.key) || ""] && ((
|
|
282
|
+
}, children: [activeFilters[((_p = headerColumns.find((column) => column.key === _groupBy)) === null || _p === void 0 ? void 0 : _p.key) || ""] && (_jsx("span", { style: {
|
|
323
283
|
backgroundColor: "#2377ba",
|
|
324
284
|
width: "0.5rem",
|
|
325
285
|
height: "0.5rem",
|
|
326
286
|
position: "absolute",
|
|
327
287
|
right: 0,
|
|
328
288
|
display: "inline-block",
|
|
329
|
-
} })), (
|
|
289
|
+
} })), _jsx(MdFilterList, { size: 18, style: {
|
|
330
290
|
color: activeFilters[((_q = headerColumns.find((column) => column.key === _groupBy)) === null || _q === void 0 ? void 0 : _q.key) || ""]
|
|
331
291
|
? "#2377ba"
|
|
332
292
|
: "#000",
|
|
333
293
|
} }), dropdownVisible ===
|
|
334
294
|
((_r = headerColumns.find((column) => column.key === _groupBy)) === null || _r === void 0 ? void 0 : _r.key) &&
|
|
335
|
-
(((_s = headerColumns.find((column) => column.key === _groupBy)) === null || _s === void 0 ? void 0 : _s.uniqueDrop) ? ((
|
|
336
|
-
((_w = headerColumns.find((column) => column.key === _groupBy)) === null || _w === void 0 ? void 0 : _w.search) && ((
|
|
295
|
+
(((_s = headerColumns.find((column) => column.key === _groupBy)) === null || _s === void 0 ? void 0 : _s.uniqueDrop) ? (_jsx(GridFilterDropdown, { locale: locale, formatOptions: formatOptions, columnType: (_u = (_t = headerColumns.find((column) => column.key === _groupBy)) === null || _t === void 0 ? void 0 : _t.dataType) !== null && _u !== void 0 ? _u : "string", columnIndex: -1, searchable: ((_v = headerColumns.find((column) => column.key === _groupBy)) === null || _v === void 0 ? void 0 : _v.search) || false, headerDropdownIndex: headerDropdownIndex, searchInput: (search &&
|
|
296
|
+
((_w = headerColumns.find((column) => column.key === _groupBy)) === null || _w === void 0 ? void 0 : _w.search) && (_jsx("div", { style: {
|
|
337
297
|
marginTop: "0.5rem",
|
|
338
298
|
padding: "0.5rem",
|
|
339
299
|
width: "100%",
|
|
@@ -345,7 +305,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
345
305
|
((_y = headerColumns.find((column) => column.key === _groupBy)) === null || _y === void 0 ? void 0 : _y.search)
|
|
346
306
|
? "default"
|
|
347
307
|
: "not-allowed",
|
|
348
|
-
}, children: (
|
|
308
|
+
}, children: _jsx(TextInput, { onChange: (e) => {
|
|
349
309
|
var _a, _b, _c;
|
|
350
310
|
let searchType = ((_b = searchQueries[((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || ""]) === null || _b === void 0 ? void 0 : _b.type) ||
|
|
351
311
|
defaultSearchOperation ||
|
|
@@ -362,14 +322,14 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
362
322
|
? "var(--background)"
|
|
363
323
|
: "var(--disabled-bg)",
|
|
364
324
|
}, value: ((_1 = searchQueries[((_0 = headerColumns.find((column) => column.key === _groupBy)) === null || _0 === void 0 ? void 0 : _0.key) || ""]) === null || _1 === void 0 ? void 0 : _1.text) || "", disabled: !((_2 = headerColumns.find((column) => column.key === _groupBy)) === null || _2 === void 0 ? void 0 : _2.search), height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "#fff" }) }))) ||
|
|
365
|
-
null, sortingOps: (
|
|
325
|
+
null, sortingOps: _jsx(GridHeaderDropdown, { options: menuOptions.filter((item) => item.label !== "Group by"), onClose: () => setDropdownVisible(null), column: headerColumns.find((column) => column.key === _groupBy) }), searchOptions: searchOptions.filter((item) => {
|
|
366
326
|
var _a, _b;
|
|
367
327
|
return ((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.dataType) === "number"
|
|
368
328
|
? numberTypeSearch.includes(item.value)
|
|
369
329
|
: ((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.dataType) === "date"
|
|
370
330
|
? dateTypeSearch.includes(item.value)
|
|
371
331
|
: textTypeSearch.includes(item.value);
|
|
372
|
-
}), position: searchOpsPosition || { top: 0, left: 0 }, columnKey: ((_3 = headerColumns.find((column) => column.key === _groupBy)) === null || _3 === void 0 ? void 0 : _3.key) || "", columnData:
|
|
332
|
+
}), position: searchOpsPosition || { top: 0, left: 0 }, columnKey: ((_3 = headerColumns.find((column) => column.key === _groupBy)) === null || _3 === void 0 ? void 0 : _3.key) || "", columnData: getColumnData(((_4 = headerColumns.find((column) => column.key === _groupBy)) === null || _4 === void 0 ? void 0 : _4.key) || "", gridData, (_6 = (_5 = headerColumns.find((column) => column.key === _groupBy)) === null || _5 === void 0 ? void 0 : _5.dataType) !== null && _6 !== void 0 ? _6 : "string"), searchElement: _jsx("div", { id: "search-input", children: ((_7 = headerColumns.find((column) => column.key === _groupBy)) === null || _7 === void 0 ? void 0 : _7.dataType) === "date" ? (((_9 = searchQueries[((_8 = headerColumns.find((column) => column.key === _groupBy)) === null || _8 === void 0 ? void 0 : _8.key) || ""]) === null || _9 === void 0 ? void 0 : _9.type) === "between" ? (_jsxs(_Fragment, { children: [_jsx(DateInput, { value: (_11 = searchQueries[((_10 = headerColumns.find((column) => column.key === _groupBy)) === null || _10 === void 0 ? void 0 : _10.key) || ""]) === null || _11 === void 0 ? void 0 : _11.text.split("to")[0], placeholder: `From date`, onChange: (value) => {
|
|
373
333
|
var _a, _b, _c, _d, _e;
|
|
374
334
|
return onSearch(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "", (_c = searchQueries[((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.key) || ""]) === null || _c === void 0 ? void 0 : _c.text.split("to").map((item, index) => {
|
|
375
335
|
if (index === 0) {
|
|
@@ -379,7 +339,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
379
339
|
}).join("to"), ((_e = searchQueries[((_d = headerColumns.find((column) => column.key === _groupBy)) === null || _d === void 0 ? void 0 : _d.key) || ""]) === null || _e === void 0 ? void 0 : _e.type) ||
|
|
380
340
|
defaultSearchOperation ||
|
|
381
341
|
"contains");
|
|
382
|
-
} }), (
|
|
342
|
+
} }), _jsx(DateInput, { value: (_13 = searchQueries[((_12 = headerColumns.find((column) => column.key === _groupBy)) === null || _12 === void 0 ? void 0 : _12.key) || ""]) === null || _13 === void 0 ? void 0 : _13.text.split("to")[1], placeholder: `To date`, onChange: (value) => {
|
|
383
343
|
var _a, _b, _c, _d, _e;
|
|
384
344
|
return onSearch(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "", (_c = searchQueries[((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.key) || ""]) === null || _c === void 0 ? void 0 : _c.text.split("to").map((item, index) => {
|
|
385
345
|
if (index === 1) {
|
|
@@ -389,12 +349,12 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
389
349
|
}).join("to"), ((_e = searchQueries[((_d = headerColumns.find((column) => column.key === _groupBy)) === null || _d === void 0 ? void 0 : _d.key) || ""]) === null || _e === void 0 ? void 0 : _e.type) ||
|
|
390
350
|
defaultSearchOperation ||
|
|
391
351
|
"contains");
|
|
392
|
-
} })] })) : ((
|
|
352
|
+
} })] })) : (_jsx(DateInput, { value: (_15 = searchQueries[((_14 = headerColumns.find((column) => column.key === _groupBy)) === null || _14 === void 0 ? void 0 : _14.key) || ""]) === null || _15 === void 0 ? void 0 : _15.text.split("to")[0], placeholder: `asd Filter ${(_16 = headerColumns.find((column) => column.key === _groupBy)) === null || _16 === void 0 ? void 0 : _16.label}`, onChange: (value) => {
|
|
393
353
|
var _a, _b, _c;
|
|
394
354
|
return onSearch(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "", value, ((_c = searchQueries[((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.key) || ""]) === null || _c === void 0 ? void 0 : _c.type) ||
|
|
395
355
|
defaultSearchOperation ||
|
|
396
356
|
"contains");
|
|
397
|
-
} }))) : ((
|
|
357
|
+
} }))) : (_jsx(TextInput, { placeholder: `Filter ${(_17 = headerColumns.find((column) => column.key === _groupBy)) === null || _17 === void 0 ? void 0 : _17.label}`, onKeyDown: (e) => {
|
|
398
358
|
var _a;
|
|
399
359
|
if (e.key === "Enter") {
|
|
400
360
|
toggleDropdown(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "");
|
|
@@ -410,14 +370,14 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
410
370
|
: "hidden",
|
|
411
371
|
}, height: 32, width: "100%", className: "w-full", backgroundColor: "#fff" })) }), onFilter: onFilter, setUniqueSearch: setUniqueSearch, uniqueSearch: uniqueSearch, textFilterLabel: textFilterLabel, activeSearchType: ((_22 = searchQueries[((_21 = headerColumns.find((column) => column.key === _groupBy)) === null || _21 === void 0 ? void 0 : _21.key) || ""]) === null || _22 === void 0 ? void 0 : _22.type) ||
|
|
412
372
|
defaultSearchOperation ||
|
|
413
|
-
"contains", checkboxWrapper: checkboxWrapper })) : ((
|
|
373
|
+
"contains", checkboxWrapper: checkboxWrapper })) : (_jsx(TextFilterDropdown, { columnIndex: -1, combined: false, headerDropdownIndex: headerDropdownIndex, sortingOps: _jsx(GridHeaderDropdown, { options: menuOptions.filter((item) => item.label !== "Group by"), onClose: () => setDropdownVisible(null), column: headerColumns.find((column) => column.key === _groupBy) }), searchOptions: searchOptions.filter((item) => {
|
|
414
374
|
var _a, _b;
|
|
415
375
|
return ((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.dataType) === "number"
|
|
416
376
|
? numberTypeSearch.includes(item.value)
|
|
417
377
|
: ((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.dataType) === "date"
|
|
418
378
|
? dateTypeSearch.includes(item.value)
|
|
419
379
|
: textTypeSearch.includes(item.value);
|
|
420
|
-
}), position: searchOpsPosition || { top: 0, left: 0 }, columnKey: ((_23 = headerColumns.find((column) => column.key === _groupBy)) === null || _23 === void 0 ? void 0 : _23.key) || "", searchable: ((_24 = headerColumns.find((column) => column.key === _groupBy)) === null || _24 === void 0 ? void 0 : _24.search) || false, searchElement: (
|
|
380
|
+
}), position: searchOpsPosition || { top: 0, left: 0 }, columnKey: ((_23 = headerColumns.find((column) => column.key === _groupBy)) === null || _23 === void 0 ? void 0 : _23.key) || "", searchable: ((_24 = headerColumns.find((column) => column.key === _groupBy)) === null || _24 === void 0 ? void 0 : _24.search) || false, searchElement: _jsx("div", { id: "search-input", children: ((_25 = headerColumns.find((column) => column.key === _groupBy)) === null || _25 === void 0 ? void 0 : _25.dataType) === "date" ? (((_27 = searchQueries[((_26 = headerColumns.find((column) => column.key === _groupBy)) === null || _26 === void 0 ? void 0 : _26.key) || ""]) === null || _27 === void 0 ? void 0 : _27.type) === "between" ? (_jsxs(_Fragment, { children: [_jsx(DateInput, { value: (_29 = searchQueries[((_28 = headerColumns.find((column) => column.key === _groupBy)) === null || _28 === void 0 ? void 0 : _28.key) || ""]) === null || _29 === void 0 ? void 0 : _29.text.split("to")[0], placeholder: `From date`, onChange: (value) => {
|
|
421
381
|
var _a, _b, _c, _d, _e;
|
|
422
382
|
return onSearch(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "", (_c = searchQueries[((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.key) || ""]) === null || _c === void 0 ? void 0 : _c.text.split("to").map((item, index) => {
|
|
423
383
|
if (index === 0) {
|
|
@@ -427,7 +387,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
427
387
|
}).join("to"), ((_e = searchQueries[((_d = headerColumns.find((column) => column.key === _groupBy)) === null || _d === void 0 ? void 0 : _d.key) || ""]) === null || _e === void 0 ? void 0 : _e.type) ||
|
|
428
388
|
defaultSearchOperation ||
|
|
429
389
|
"contains");
|
|
430
|
-
} }), (
|
|
390
|
+
} }), _jsx("div", { style: { marginTop: "0.5rem" }, children: _jsx(DateInput, { value: (_31 = searchQueries[((_30 = headerColumns.find((column) => column.key === _groupBy)) === null || _30 === void 0 ? void 0 : _30.key) || ""]) === null || _31 === void 0 ? void 0 : _31.text.split("to")[1], placeholder: `To date`, onChange: (value) => {
|
|
431
391
|
var _a, _b, _c, _d, _e;
|
|
432
392
|
return onSearch(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "", (_c = searchQueries[((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.key) || ""]) === null || _c === void 0 ? void 0 : _c.text.split("to").map((item, index) => {
|
|
433
393
|
if (index === 1) {
|
|
@@ -444,7 +404,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
444
404
|
"notBlank",
|
|
445
405
|
].includes(((_33 = searchQueries[((_32 = headerColumns.find((column) => column.key === _groupBy)) === null || _32 === void 0 ? void 0 : _32.key) || ""]) === null || _33 === void 0 ? void 0 : _33.type) ||
|
|
446
406
|
defaultSearchOperation ||
|
|
447
|
-
"contains") ? ((
|
|
407
|
+
"contains") ? (_jsx(TextInput, { placeholder: `Filter ${(_34 = headerColumns.find((column) => column.key === _groupBy)) === null || _34 === void 0 ? void 0 : _34.label}`, onKeyDown: (e) => {
|
|
448
408
|
var _a;
|
|
449
409
|
if (e.key === "Enter") {
|
|
450
410
|
toggleDropdown(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "");
|
|
@@ -458,12 +418,12 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
458
418
|
visibility: ((_37 = headerColumns.find((column) => column.key === _groupBy)) === null || _37 === void 0 ? void 0 : _37.search)
|
|
459
419
|
? "visible"
|
|
460
420
|
: "hidden",
|
|
461
|
-
}, height: 32, width: "100%", className: "w-full", backgroundColor: "#fff" })) : ((
|
|
421
|
+
}, height: 32, width: "100%", className: "w-full", backgroundColor: "#fff" })) : (_jsx(DateInput, { value: (_39 = searchQueries[((_38 = headerColumns.find((column) => column.key === _groupBy)) === null || _38 === void 0 ? void 0 : _38.key) || ""]) === null || _39 === void 0 ? void 0 : _39.text.split("to")[0], placeholder: `asd Filter ${(_40 = headerColumns.find((column) => column.key === _groupBy)) === null || _40 === void 0 ? void 0 : _40.label}`, onChange: (value) => {
|
|
462
422
|
var _a, _b, _c;
|
|
463
423
|
return onSearch(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "", value, ((_c = searchQueries[((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.key) || ""]) === null || _c === void 0 ? void 0 : _c.type) ||
|
|
464
424
|
defaultSearchOperation ||
|
|
465
425
|
"contains");
|
|
466
|
-
} }))) : ((
|
|
426
|
+
} }))) : (_jsx(TextInput, { placeholder: `Filter ${(_41 = headerColumns.find((column) => column.key === _groupBy)) === null || _41 === void 0 ? void 0 : _41.label}`, onKeyDown: (e) => {
|
|
467
427
|
var _a;
|
|
468
428
|
if (e.key === "Enter") {
|
|
469
429
|
toggleDropdown(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "");
|
|
@@ -480,7 +440,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
480
440
|
}, height: 32, width: "100%", className: "w-full", backgroundColor: "#fff" })) }), activeSearchType: ((_46 = searchQueries[((_45 = headerColumns.find((column) => column.key === _groupBy)) === null || _45 === void 0 ? void 0 : _45.key) || ""]) === null || _46 === void 0 ? void 0 : _46.type) ||
|
|
481
441
|
defaultSearchOperation ||
|
|
482
442
|
"contains", searchInput: (search &&
|
|
483
|
-
((_47 = headerColumns.find((column) => column.key === _groupBy)) === null || _47 === void 0 ? void 0 : _47.search) && ((
|
|
443
|
+
((_47 = headerColumns.find((column) => column.key === _groupBy)) === null || _47 === void 0 ? void 0 : _47.search) && (_jsx("div", { style: {
|
|
484
444
|
marginTop: "0.5rem",
|
|
485
445
|
padding: "0.5rem",
|
|
486
446
|
width: "100%",
|
|
@@ -492,7 +452,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
492
452
|
((_49 = headerColumns.find((column) => column.key === _groupBy)) === null || _49 === void 0 ? void 0 : _49.search)
|
|
493
453
|
? "default"
|
|
494
454
|
: "not-allowed",
|
|
495
|
-
}, children: (
|
|
455
|
+
}, children: _jsx(TextInput, { onChange: (e) => {
|
|
496
456
|
var _a, _b, _c;
|
|
497
457
|
let searchType = ((_b = searchQueries[((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || ""]) === null || _b === void 0 ? void 0 : _b.type) ||
|
|
498
458
|
defaultSearchOperation ||
|
|
@@ -509,7 +469,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
509
469
|
? "var(--background)"
|
|
510
470
|
: "var(--disabled-bg)",
|
|
511
471
|
}, value: ((_52 = searchQueries[((_51 = headerColumns.find((column) => column.key === _groupBy)) === null || _51 === void 0 ? void 0 : _51.key) || ""]) === null || _52 === void 0 ? void 0 : _52.text) || "", disabled: !((_53 = headerColumns.find((column) => column.key === _groupBy)) === null || _53 === void 0 ? void 0 : _53.search), height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "#fff" }) }))) ||
|
|
512
|
-
null })))] })) })] }), search && columnSearchOutside && ((
|
|
472
|
+
null })))] })) })] }), search && columnSearchOutside && (_jsx("div", { style: {
|
|
513
473
|
marginTop: "0.5rem",
|
|
514
474
|
width: (hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${(_54 = headerColumns.find((column) => column.key === _groupBy)) === null || _54 === void 0 ? void 0 : _54.key}`]) ||
|
|
515
475
|
widthMode === "auto" ||
|
|
@@ -524,7 +484,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
524
484
|
((_57 = headerColumns.find((column) => column.key === _groupBy)) === null || _57 === void 0 ? void 0 : _57.search)
|
|
525
485
|
? "default"
|
|
526
486
|
: "not-allowed",
|
|
527
|
-
}, children: (
|
|
487
|
+
}, children: _jsx(TextInput, { onKeyDown: (e) => {
|
|
528
488
|
var _a;
|
|
529
489
|
if (e.key === "Enter") {
|
|
530
490
|
toggleDropdown(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "");
|
|
@@ -551,14 +511,14 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
551
511
|
.map((column, colIndex) => {
|
|
552
512
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
|
|
553
513
|
if (!column.hidden) {
|
|
554
|
-
const columnData =
|
|
555
|
-
return ((
|
|
514
|
+
const columnData = getColumnData(column.key, gridData, (_a = column.dataType) !== null && _a !== void 0 ? _a : "string");
|
|
515
|
+
return (_jsx("div", { className: `${sortable && column.sortable ? "sortable" : ""} ${column.showMenu ? "menu-true" : "menu-false"} column index-${column.key}`, style: Object.assign(Object.assign({}, cellStyle), { position: "relative", padding: "0.5rem", textAlign: "left", whiteSpace: "nowrap", textOverflow: "ellipsis", width: widthMode === "auto"
|
|
556
516
|
? "auto"
|
|
557
517
|
: column.width
|
|
558
518
|
? column.width
|
|
559
519
|
: (hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${column.key}`])
|
|
560
520
|
? hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${column.key}`]
|
|
561
|
-
: "fit-content", wordBreak: widthMode === "auto" ? "break-all" : "unset", backgroundColor: "var(--row-header-bg)", borderTop: headerTopBorder, borderBottom: headerBottomBorder, flex: widthMode === "auto" ? 1 : undefined, flexGrow: widthMode === "auto" ? 1 : 0, flexShrink: widthMode === "auto" ? 1 : 0 }), onMouseMove: (e) => handleMouseMove(e), onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, children: !actionsKey.split(",").includes(column.key) && ((
|
|
521
|
+
: "fit-content", wordBreak: widthMode === "auto" ? "break-all" : "unset", backgroundColor: "var(--row-header-bg)", borderTop: headerTopBorder, borderBottom: headerBottomBorder, flex: widthMode === "auto" ? 1 : undefined, flexGrow: widthMode === "auto" ? 1 : 0, flexShrink: widthMode === "auto" ? 1 : 0 }), onMouseMove: (e) => handleMouseMove(e), onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, children: !actionsKey.split(",").includes(column.key) && (_jsxs(_Fragment, { children: [resizable && (_jsx("div", { style: {
|
|
562
522
|
position: "absolute",
|
|
563
523
|
width: "1px",
|
|
564
524
|
height: "100%",
|
|
@@ -566,24 +526,24 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
566
526
|
cursor: "ew-resize", // Horizontal resize cursor
|
|
567
527
|
top: 0,
|
|
568
528
|
right: 0,
|
|
569
|
-
}, className: "drag-icon", onMouseDown: (e) => handleMouseDown(e, colIndex) })), (
|
|
529
|
+
}, className: "drag-icon", onMouseDown: (e) => handleMouseDown(e, colIndex) })), _jsxs("div", { style: {
|
|
570
530
|
display: "flex",
|
|
571
531
|
alignItems: "center",
|
|
572
532
|
padding: "0 0.25rem",
|
|
573
533
|
justifyContent: "space-between",
|
|
574
534
|
cursor: column.sortable ? "pointer" : "",
|
|
575
|
-
}, onClick: () => column.sortable && onSort(column), children: [(
|
|
535
|
+
}, onClick: () => column.sortable && onSort(column), children: [_jsxs("div", { style: {
|
|
576
536
|
display: "flex",
|
|
577
537
|
alignItems: "center",
|
|
578
|
-
}, children: [(
|
|
538
|
+
}, children: [_jsx("span", { children: column.label }), sortable && column.sortable && (_jsx("span", { style: {
|
|
579
539
|
visibility: Object.keys(sortQueries).includes(column.key)
|
|
580
540
|
? "visible"
|
|
581
541
|
: "hidden",
|
|
582
|
-
}, children: sortQueries[column.key] === "asc" ? " ↑" : " ↓" }))] }), (
|
|
542
|
+
}, children: sortQueries[column.key] === "asc" ? " ↑" : " ↓" }))] }), _jsx("div", { style: {
|
|
583
543
|
display: "flex",
|
|
584
544
|
alignItems: "center",
|
|
585
545
|
position: "relative",
|
|
586
|
-
}, children: column.filter && ((
|
|
546
|
+
}, children: column.filter && (_jsxs("div", { style: {
|
|
587
547
|
alignItems: "center",
|
|
588
548
|
marginLeft: 6,
|
|
589
549
|
position: "relative",
|
|
@@ -592,25 +552,25 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
592
552
|
e.preventDefault();
|
|
593
553
|
e.stopPropagation();
|
|
594
554
|
handleFilterIconClick(e, column.key);
|
|
595
|
-
}, className: "filter-icon", children: [activeFilters[column.key] && ((
|
|
555
|
+
}, className: "filter-icon", children: [activeFilters[column.key] && (_jsx("span", { style: {
|
|
596
556
|
backgroundColor: "#2377ba",
|
|
597
557
|
width: "0.5rem",
|
|
598
558
|
height: "0.5rem",
|
|
599
559
|
position: "absolute",
|
|
600
560
|
right: 0,
|
|
601
561
|
display: "inline-block",
|
|
602
|
-
} })), (
|
|
562
|
+
} })), _jsx(MdFilterList, { size: 18, style: {
|
|
603
563
|
color: activeFilters[column.key]
|
|
604
564
|
? "#2377ba"
|
|
605
565
|
: "#000",
|
|
606
566
|
} }), dropdownVisible === column.key &&
|
|
607
|
-
(column.uniqueDrop ? ((
|
|
567
|
+
(column.uniqueDrop ? (_jsx(GridFilterDropdown, { locale: locale, formatOptions: formatOptions, columnType: (_b = column.dataType) !== null && _b !== void 0 ? _b : "string", columnIndex: colIndex, searchable: (column === null || column === void 0 ? void 0 : column.search) || false, headerDropdownIndex: headerDropdownIndex, searchOptions: searchOptions.filter((item) => column.dataType === "number" ||
|
|
608
568
|
column.dataType === "currency"
|
|
609
569
|
? numberTypeSearch.includes(item.value)
|
|
610
570
|
: column.dataType === "date"
|
|
611
571
|
? dateTypeSearch.includes(item.value)
|
|
612
|
-
: textTypeSearch.includes(item.value)), position: searchOpsPosition || { top: 0, left: 0 }, columnKey: column.key, columnData: columnData, sortingOps: (
|
|
613
|
-
"between" ? ((
|
|
572
|
+
: textTypeSearch.includes(item.value)), position: searchOpsPosition || { top: 0, left: 0 }, columnKey: column.key, columnData: columnData, sortingOps: _jsx(GridHeaderDropdown, { options: menuOptions, onClose: () => setDropdownVisible(null), column: column }), searchElement: _jsx("div", { id: "search-input", children: column.dataType === "date" ? (((_c = searchQueries[column.key]) === null || _c === void 0 ? void 0 : _c.type) ===
|
|
573
|
+
"between" ? (_jsxs(_Fragment, { children: [_jsx(DateInput, { value: (_d = searchQueries[column.key]) === null || _d === void 0 ? void 0 : _d.text.split("to")[0], placeholder: `From date`, onChange: (value) => {
|
|
614
574
|
var _a, _b;
|
|
615
575
|
return onSearch(column.key, (_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.text.split("to").map((item, index) => {
|
|
616
576
|
if (index === 0) {
|
|
@@ -620,7 +580,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
620
580
|
}).join("to"), ((_b = searchQueries[column.key]) === null || _b === void 0 ? void 0 : _b.type) ||
|
|
621
581
|
defaultSearchOperation ||
|
|
622
582
|
"contains");
|
|
623
|
-
} }), (
|
|
583
|
+
} }), _jsx(DateInput, { value: (_e = searchQueries[column.key]) === null || _e === void 0 ? void 0 : _e.text.split("to")[1], placeholder: `To date`, onChange: (value) => {
|
|
624
584
|
var _a, _b;
|
|
625
585
|
return onSearch(column.key, (_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.text.split("to").map((item, index) => {
|
|
626
586
|
if (index === 1) {
|
|
@@ -630,12 +590,12 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
630
590
|
}).join("to"), ((_b = searchQueries[column.key]) === null || _b === void 0 ? void 0 : _b.type) ||
|
|
631
591
|
defaultSearchOperation ||
|
|
632
592
|
"contains");
|
|
633
|
-
} })] })) : ((
|
|
593
|
+
} })] })) : (_jsx(DateInput, { value: (_f = searchQueries[column.key]) === null || _f === void 0 ? void 0 : _f.text.split("to")[0], placeholder: `asd Filter ${column.label}`, onChange: (value) => {
|
|
634
594
|
var _a;
|
|
635
595
|
return onSearch(column.key, value, ((_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.type) ||
|
|
636
596
|
defaultSearchOperation ||
|
|
637
597
|
"contains");
|
|
638
|
-
} }))) : ((
|
|
598
|
+
} }))) : (_jsx(TextInput, { placeholder: `Filter ${column.label}`, onKeyDown: (e) => {
|
|
639
599
|
if (e.key === "Enter") {
|
|
640
600
|
toggleDropdown(column.key);
|
|
641
601
|
}
|
|
@@ -652,7 +612,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
652
612
|
}, height: 32, width: "100%", className: "w-full", backgroundColor: "#fff" })) }), onFilter: onFilter, setUniqueSearch: setUniqueSearch, uniqueSearch: uniqueSearch, textFilterLabel: textFilterLabel, activeSearchType: ((_h = searchQueries[column.key]) === null || _h === void 0 ? void 0 : _h.type) ||
|
|
653
613
|
defaultSearchOperation ||
|
|
654
614
|
"contains", checkboxWrapper: checkboxWrapper, searchInput: search &&
|
|
655
|
-
column.search && ((
|
|
615
|
+
column.search && (_jsx("div", { style: {
|
|
656
616
|
marginTop: "0.5rem",
|
|
657
617
|
padding: "0.5rem",
|
|
658
618
|
width: "100%",
|
|
@@ -662,7 +622,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
662
622
|
cursor: search && column.search
|
|
663
623
|
? "default"
|
|
664
624
|
: "not-allowed",
|
|
665
|
-
}, children: (
|
|
625
|
+
}, children: _jsx(TextInput, { onChange: (e) => {
|
|
666
626
|
var _a;
|
|
667
627
|
let searchType = ((_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.type) ||
|
|
668
628
|
defaultSearchOperation ||
|
|
@@ -679,13 +639,13 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
679
639
|
? "var(--background)"
|
|
680
640
|
: "var(--disabled-bg)",
|
|
681
641
|
}, placeholder: "Search", value: ((_j = searchQueries[column.key]) === null || _j === void 0 ? void 0 : _j.text) ||
|
|
682
|
-
"", disabled: !column.search, height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "#fff" }) })) })) : ((
|
|
642
|
+
"", disabled: !column.search, height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "#fff" }) })) })) : (_jsx(TextFilterDropdown, { combined: false, columnIndex: colIndex, searchable: (column === null || column === void 0 ? void 0 : column.search) || false, sortingOps: _jsx(GridHeaderDropdown, { options: menuOptions, onClose: () => setDropdownVisible(null), column: column }), headerDropdownIndex: headerDropdownIndex, searchOptions: searchOptions.filter((item) => column.dataType === "number" ||
|
|
683
643
|
column.dataType === "currency"
|
|
684
644
|
? numberTypeSearch.includes(item.value)
|
|
685
645
|
: column.dataType === "date"
|
|
686
646
|
? dateTypeSearch.includes(item.value)
|
|
687
|
-
: textTypeSearch.includes(item.value)), position: searchOpsPosition || { top: 0, left: 0 }, columnKey: column.key, searchElement: (
|
|
688
|
-
"between" ? ((
|
|
647
|
+
: textTypeSearch.includes(item.value)), position: searchOpsPosition || { top: 0, left: 0 }, columnKey: column.key, searchElement: _jsx("div", { id: "search-input", children: column.dataType === "date" ? (((_k = searchQueries[column.key]) === null || _k === void 0 ? void 0 : _k.type) ===
|
|
648
|
+
"between" ? (_jsxs(_Fragment, { children: [_jsx(DateInput, { value: (_l = searchQueries[column.key]) === null || _l === void 0 ? void 0 : _l.text.split("to")[0], placeholder: `From date`, onChange: (value) => {
|
|
689
649
|
var _a, _b;
|
|
690
650
|
return onSearch(column.key, (_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.text.split("to").map((item, index) => {
|
|
691
651
|
if (index === 0) {
|
|
@@ -695,7 +655,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
695
655
|
}).join("to"), ((_b = searchQueries[column.key]) === null || _b === void 0 ? void 0 : _b.type) ||
|
|
696
656
|
defaultSearchOperation ||
|
|
697
657
|
"contains");
|
|
698
|
-
} }), (
|
|
658
|
+
} }), _jsx("div", { style: { marginTop: "0.5rem" }, children: _jsx(DateInput, { value: (_m = searchQueries[column.key]) === null || _m === void 0 ? void 0 : _m.text.split("to")[1], placeholder: `To date`, onChange: (value) => {
|
|
699
659
|
var _a, _b;
|
|
700
660
|
return onSearch(column.key, (_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.text.split("to").map((item, index) => {
|
|
701
661
|
if (index === 1) {
|
|
@@ -712,7 +672,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
712
672
|
"notBlank",
|
|
713
673
|
].includes(((_o = searchQueries[column.key]) === null || _o === void 0 ? void 0 : _o.type) ||
|
|
714
674
|
defaultSearchOperation ||
|
|
715
|
-
"contains") ? ((
|
|
675
|
+
"contains") ? (_jsx(TextInput, { placeholder: `Filter ${column.label}`, onKeyDown: (e) => {
|
|
716
676
|
if (e.key === "Enter") {
|
|
717
677
|
toggleDropdown(column.key);
|
|
718
678
|
}
|
|
@@ -726,12 +686,12 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
726
686
|
visibility: column.search
|
|
727
687
|
? "visible"
|
|
728
688
|
: "hidden",
|
|
729
|
-
}, height: 32, width: "100%", className: "w-full", backgroundColor: "#fff" })) : ((
|
|
689
|
+
}, height: 32, width: "100%", className: "w-full", backgroundColor: "#fff" })) : (_jsx(DateInput, { value: (_q = searchQueries[column.key]) === null || _q === void 0 ? void 0 : _q.text.split("to")[0], placeholder: `asd Filter ${column.label}`, onChange: (value) => {
|
|
730
690
|
var _a;
|
|
731
691
|
return onSearch(column.key, value, ((_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.type) ||
|
|
732
692
|
defaultSearchOperation ||
|
|
733
693
|
"contains");
|
|
734
|
-
} }))) : ((
|
|
694
|
+
} }))) : (_jsx(TextInput, { placeholder: `Filter ${column.label}`, onKeyDown: (e) => {
|
|
735
695
|
if (e.key === "Enter") {
|
|
736
696
|
toggleDropdown(column.key);
|
|
737
697
|
}
|
|
@@ -747,7 +707,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
747
707
|
: "hidden",
|
|
748
708
|
}, height: 32, width: "100%", className: "w-full", backgroundColor: "#fff" })) }), activeSearchType: ((_s = searchQueries[column.key]) === null || _s === void 0 ? void 0 : _s.type) ||
|
|
749
709
|
defaultSearchOperation ||
|
|
750
|
-
"contains", searchInput: (search && column.search && ((
|
|
710
|
+
"contains", searchInput: (search && column.search && (_jsx("div", { style: {
|
|
751
711
|
padding: "0.5rem",
|
|
752
712
|
width: "100%",
|
|
753
713
|
pointerEvents: search && column.search
|
|
@@ -756,7 +716,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
756
716
|
cursor: search && column.search
|
|
757
717
|
? "default"
|
|
758
718
|
: "not-allowed",
|
|
759
|
-
}, children: (
|
|
719
|
+
}, children: _jsx(TextInput, { onChange: (e) => {
|
|
760
720
|
var _a;
|
|
761
721
|
let searchType = ((_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.type) ||
|
|
762
722
|
defaultSearchOperation ||
|
|
@@ -774,7 +734,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
774
734
|
: "var(--disabled-bg)",
|
|
775
735
|
}, value: ((_t = searchQueries[column.key]) === null || _t === void 0 ? void 0 : _t.text) ||
|
|
776
736
|
"", disabled: !column.search, height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "#fff" }) }))) ||
|
|
777
|
-
null })))] })) })] }), search && columnSearchOutside && ((
|
|
737
|
+
null })))] })) })] }), search && columnSearchOutside && (_jsx("div", { style: {
|
|
778
738
|
marginTop: "0.5rem",
|
|
779
739
|
width: (hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${column.key}`]) ||
|
|
780
740
|
widthMode === "auto" ||
|
|
@@ -783,7 +743,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
783
743
|
: "100px",
|
|
784
744
|
pointerEvents: search && column.search ? "auto" : "none",
|
|
785
745
|
cursor: search && column.search ? "default" : "not-allowed",
|
|
786
|
-
}, children: (
|
|
746
|
+
}, children: _jsx(TextInput, { onChange: (e) => {
|
|
787
747
|
var _a;
|
|
788
748
|
let searchType = ((_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.type) ||
|
|
789
749
|
defaultSearchOperation ||
|
|
@@ -804,4 +764,4 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
804
764
|
return null;
|
|
805
765
|
})] }));
|
|
806
766
|
};
|
|
807
|
-
|
|
767
|
+
export default React.memo(GridHeader);
|