@megha-ui/react 1.3.72 → 1.3.75
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.
|
@@ -9,6 +9,7 @@ import TextInput from "../../text-input";
|
|
|
9
9
|
import Checkbox from "../../checkbox";
|
|
10
10
|
import Dropdown from "../../dropdown";
|
|
11
11
|
import { Tooltip } from "react-tooltip";
|
|
12
|
+
import { formatValue } from "../../../services/commonService";
|
|
12
13
|
export const getColumnData = (columnKey, gridData, type, combinedColumns) => {
|
|
13
14
|
const returnedValue = [
|
|
14
15
|
...new Set(gridData
|
|
@@ -130,6 +131,30 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
130
131
|
setSearchOpsPosition({ top, left });
|
|
131
132
|
toggleDropdown(columnKey);
|
|
132
133
|
};
|
|
134
|
+
const handleSelect = (value, columnKey, columnData) => {
|
|
135
|
+
var _a;
|
|
136
|
+
let _uniqueSeach = {};
|
|
137
|
+
if (value === "all") {
|
|
138
|
+
if (((_a = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[columnKey]) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
|
|
139
|
+
uniqueSearch[columnKey].every((item) => columnData.includes(item))) {
|
|
140
|
+
_uniqueSeach = Object.assign(Object.assign({}, uniqueSearch), { [columnKey]: [] });
|
|
141
|
+
}
|
|
142
|
+
else {
|
|
143
|
+
_uniqueSeach = Object.assign(Object.assign({}, uniqueSearch), { [columnKey]: columnData });
|
|
144
|
+
}
|
|
145
|
+
setUniqueSearch(_uniqueSeach);
|
|
146
|
+
}
|
|
147
|
+
else {
|
|
148
|
+
const newValueArray = uniqueSearch[columnKey] && uniqueSearch[columnKey].includes(value)
|
|
149
|
+
? uniqueSearch[columnKey].filter((item) => item !== value)
|
|
150
|
+
: uniqueSearch[columnKey]
|
|
151
|
+
? [...uniqueSearch[columnKey], value]
|
|
152
|
+
: columnData.filter((item) => item !== value);
|
|
153
|
+
_uniqueSeach = Object.assign(Object.assign({}, uniqueSearch), { [columnKey]: newValueArray });
|
|
154
|
+
setUniqueSearch(_uniqueSeach);
|
|
155
|
+
}
|
|
156
|
+
onFilter(_uniqueSeach, columnKey);
|
|
157
|
+
};
|
|
133
158
|
const menuOptions = [{ label: "Group by", groupBy: setGroupBy }];
|
|
134
159
|
const searchOptions = [
|
|
135
160
|
{ label: "Contains", value: "contains", action: handleSearchOptionSelect },
|
|
@@ -214,6 +239,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
214
239
|
}, [headerColumns, isFilterActive]);
|
|
215
240
|
const [isResizing, setIsResizing] = useState(false);
|
|
216
241
|
const [startX, setStartX] = useState(0); // Cursor position when resizing starts
|
|
242
|
+
const [activeSearchColumn, setActiveSearchColumn] = useState(null);
|
|
217
243
|
const handleMouseDown = (e, colIndex) => {
|
|
218
244
|
if (!resizable)
|
|
219
245
|
return;
|
|
@@ -253,7 +279,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
253
279
|
width: "100%",
|
|
254
280
|
height: "100%",
|
|
255
281
|
}, children: _jsx(Checkbox, { selected: allRowsSelected, onChange: () => toggleSelectAll(), noLabel: true, wrapperClass: checkboxWrapper }) }) })), groupByKeys.map((_groupBy) => {
|
|
256
|
-
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;
|
|
282
|
+
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, _63, _64, _65, _66, _67, _68, _69, _70, _71, _72, _73, _74, _75, _76, _77, _78, _79, _80, _81, _82, _83, _84;
|
|
257
283
|
return (_jsx(_Fragment, { children: headerColumns.find((column) => column.key === _groupBy) && (_jsxs("div", { className: `${sortable &&
|
|
258
284
|
((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.sortable)
|
|
259
285
|
? "sortable"
|
|
@@ -482,72 +508,114 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
482
508
|
? "var(--background)"
|
|
483
509
|
: "var(--disabled-bg)",
|
|
484
510
|
}, value: ((_48 = searchQueries[((_47 = headerColumns.find((column) => column.key === _groupBy)) === null || _47 === void 0 ? void 0 : _47.key) || ""]) === null || _48 === void 0 ? void 0 : _48.text) || "", disabled: !((_49 = headerColumns.find((column) => column.key === _groupBy)) === null || _49 === void 0 ? void 0 : _49.search), height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "#fff" }) }))) ||
|
|
485
|
-
null })))] })) })] }), search && columnSearchOutside && (_jsx("div", { style: {
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
511
|
+
null })))] })) })] }), search && columnSearchOutside && (_jsxs("div", { style: { position: "relative" }, children: [_jsx("div", { style: {
|
|
512
|
+
marginTop: "0.5rem",
|
|
513
|
+
pointerEvents: search &&
|
|
514
|
+
((_50 = headerColumns.find((column) => column.key === _groupBy)) === null || _50 === void 0 ? void 0 : _50.search)
|
|
515
|
+
? "auto"
|
|
516
|
+
: "none",
|
|
517
|
+
cursor: search &&
|
|
518
|
+
((_51 = headerColumns.find((column) => column.key === _groupBy)) === null || _51 === void 0 ? void 0 : _51.search)
|
|
519
|
+
? "default"
|
|
520
|
+
: "not-allowed",
|
|
521
|
+
}, children: _jsxs("div", { style: {
|
|
522
|
+
display: "flex",
|
|
523
|
+
alignItems: "center",
|
|
524
|
+
}, children: [_jsx(TextInput, { onBlur: () => setActiveSearchColumn(null), onChange: (e) => {
|
|
525
|
+
var _a, _b, _c, _d;
|
|
526
|
+
setActiveSearchColumn(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "");
|
|
527
|
+
let searchType = ((_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) ||
|
|
528
|
+
defaultSearchOperation ||
|
|
529
|
+
"contains";
|
|
530
|
+
if (e.target.value.includes("to")) {
|
|
531
|
+
searchType = "between";
|
|
532
|
+
}
|
|
533
|
+
else if (searchType === "between") {
|
|
534
|
+
searchType = "contains";
|
|
535
|
+
}
|
|
536
|
+
onSearch(((_d = headerColumns.find((column) => column.key === _groupBy)) === null || _d === void 0 ? void 0 : _d.key) || "", e.target.value, searchType);
|
|
537
|
+
}, placeholder: "Search", extraWrapperStyle: {
|
|
538
|
+
background: ((_52 = headerColumns.find((column) => column.key === _groupBy)) === null || _52 === void 0 ? void 0 : _52.search)
|
|
539
|
+
? "var(--background)"
|
|
540
|
+
: "var(--disabled-bg)",
|
|
541
|
+
}, value: ((_54 = searchQueries[((_53 = headerColumns.find((column) => column.key === _groupBy)) === null || _53 === void 0 ? void 0 : _53.key) || ""]) === null || _54 === void 0 ? void 0 : _54.text) || "", disabled: !((_55 = headerColumns.find((column) => column.key === _groupBy)) === null || _55 === void 0 ? void 0 : _55.search), height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "#fff" }), _jsx(Dropdown, { options: searchOptions.filter((item) => {
|
|
542
|
+
var _a, _b, _c;
|
|
543
|
+
return ((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.dataType) === "number" ||
|
|
544
|
+
((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.dataType) === "currency"
|
|
545
|
+
? numberTypeSearch.includes(item.value)
|
|
546
|
+
: ((_c = headerColumns.find((column) => column.key === _groupBy)) === null || _c === void 0 ? void 0 : _c.dataType) === "date"
|
|
547
|
+
? dateTypeSearch.includes(item.value)
|
|
548
|
+
: textTypeSearch.includes(item.value);
|
|
549
|
+
}), selectedValues: [
|
|
550
|
+
((_58 = searchQueries[(_57 = (_56 = headerColumns.find((column) => column.key === _groupBy)) === null || _56 === void 0 ? void 0 : _56.key) !== null && _57 !== void 0 ? _57 : ""]) === null || _58 === void 0 ? void 0 : _58.type) ||
|
|
551
|
+
defaultSearchOperation ||
|
|
552
|
+
"contains",
|
|
553
|
+
], selectedDisplay: (_60 = (_59 = searchOptions
|
|
554
|
+
.filter((item) => {
|
|
555
|
+
var _a, _b, _c;
|
|
556
|
+
return ((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.dataType) === "number" ||
|
|
557
|
+
((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.dataType) === "currency"
|
|
558
|
+
? numberTypeSearch.includes(item.value)
|
|
559
|
+
: ((_c = headerColumns.find((column) => column.key === _groupBy)) === null || _c === void 0 ? void 0 : _c.dataType) === "date"
|
|
560
|
+
? dateTypeSearch.includes(item.value)
|
|
561
|
+
: textTypeSearch.includes(item.value);
|
|
562
|
+
})
|
|
563
|
+
.find((item) => {
|
|
564
|
+
var _a, _b, _c;
|
|
565
|
+
return item.value ===
|
|
566
|
+
((_c = searchQueries[(_b = (_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) !== null && _b !== void 0 ? _b : ""]) === null || _c === void 0 ? void 0 : _c.type) ||
|
|
567
|
+
defaultSearchOperation ||
|
|
568
|
+
"contains";
|
|
569
|
+
})) === null || _59 === void 0 ? void 0 : _59.label) !== null && _60 !== void 0 ? _60 : "", withValue: true, onChange: (selected) => {
|
|
570
|
+
var _a, _b, _c;
|
|
571
|
+
const value = ((_a = selected[0]) === null || _a === void 0 ? void 0 : _a.toString()) || "";
|
|
572
|
+
handleSearchOptionSelect((_c = (_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.key) !== null && _c !== void 0 ? _c : "", value);
|
|
573
|
+
}, searchEnabled: false, className: "flex-1", isIcon: true })] }) }), getColumnData(((_61 = headerColumns.find((column) => column.key === _groupBy)) === null || _61 === void 0 ? void 0 : _61.key) || "", gridData, (_63 = (_62 = headerColumns.find((column) => column.key === _groupBy)) === null || _62 === void 0 ? void 0 : _62.dataType) !== null && _63 !== void 0 ? _63 : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []).length > 0 &&
|
|
574
|
+
(((_65 = searchQueries[((_64 = headerColumns.find((column) => column.key === _groupBy)) === null || _64 === void 0 ? void 0 : _64.key) || ""]) === null || _65 === void 0 ? void 0 : _65.text) ||
|
|
575
|
+
"") && (_jsx("div", { style: {
|
|
576
|
+
position: "absolute",
|
|
577
|
+
top: "calc(100% + 0.25rem)",
|
|
578
|
+
left: 0,
|
|
579
|
+
background: "var(--card-bg)",
|
|
580
|
+
width: "100%",
|
|
581
|
+
maxHeight: 300,
|
|
582
|
+
overflow: "auto",
|
|
583
|
+
padding: "0.5rem 0.75rem",
|
|
584
|
+
}, children: getColumnData(((_66 = headerColumns.find((column) => column.key === _groupBy)) === null || _66 === void 0 ? void 0 : _66.key) || "", gridData, (_68 = (_67 = headerColumns.find((column) => column.key === _groupBy)) === null || _67 === void 0 ? void 0 : _67.dataType) !== null && _68 !== void 0 ? _68 : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []).length > 0 && (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
|
|
585
|
+
cursor: "pointer",
|
|
586
|
+
display: "flex",
|
|
587
|
+
alignItems: "center",
|
|
588
|
+
}, onClick: () => {
|
|
589
|
+
var _a, _b, _c, _d;
|
|
590
|
+
return handleSelect("all", ((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "", getColumnData(((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.key) || "", gridData, (_d = (_c = headerColumns.find((column) => column.key === _groupBy)) === null || _c === void 0 ? void 0 : _c.dataType) !== null && _d !== void 0 ? _d : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []));
|
|
591
|
+
}, children: [_jsx(Checkbox, { id: CSS.escape(((_69 = headerColumns.find((column) => column.key === _groupBy)) === null || _69 === void 0 ? void 0 : _69.key) || ""), selected: typeof (uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[((_70 = headerColumns.find((column) => column.key === _groupBy)) === null || _70 === void 0 ? void 0 : _70.key) || ""]) !== "undefined"
|
|
592
|
+
? ((_72 = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[((_71 = headerColumns.find((column) => column.key === _groupBy)) === null || _71 === void 0 ? void 0 : _71.key) || ""]) === null || _72 === void 0 ? void 0 : _72.length) > 0 &&
|
|
593
|
+
getColumnData(((_73 = headerColumns.find((column) => column.key === _groupBy)) === null || _73 === void 0 ? void 0 : _73.key) || "", gridData, (_75 = (_74 = headerColumns.find((column) => column.key === _groupBy)) === null || _74 === void 0 ? void 0 : _74.dataType) !== null && _75 !== void 0 ? _75 : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []).every((item) => {
|
|
594
|
+
var _a;
|
|
595
|
+
return uniqueSearch[((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || ""].includes(item);
|
|
596
|
+
})
|
|
597
|
+
: true, indeterminate: ((_77 = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[((_76 = headerColumns.find((column) => column.key === _groupBy)) === null || _76 === void 0 ? void 0 : _76.key) || ""]) === null || _77 === void 0 ? void 0 : _77.length) > 0 &&
|
|
598
|
+
getColumnData(((_78 = headerColumns.find((column) => column.key === _groupBy)) === null || _78 === void 0 ? void 0 : _78.key) || "", gridData, (_80 = (_79 = headerColumns.find((column) => column.key === _groupBy)) === null || _79 === void 0 ? void 0 : _79.dataType) !== null && _80 !== void 0 ? _80 : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []).some((item) => {
|
|
599
|
+
var _a;
|
|
600
|
+
return uniqueSearch[((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || ""].includes(item);
|
|
601
|
+
}), onChange: () => { }, style: { pointerEvents: "none" }, noLabel: true, wrapperClass: checkboxWrapper }), _jsx("span", { style: { marginLeft: "0.5rem" }, children: "All" })] }), getColumnData(((_81 = headerColumns.find((column) => column.key === _groupBy)) === null || _81 === void 0 ? void 0 : _81.key) || "", gridData, (_83 = (_82 = headerColumns.find((column) => column.key === _groupBy)) === null || _82 === void 0 ? void 0 : _82.dataType) !== null && _83 !== void 0 ? _83 : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []).map((item) => {
|
|
602
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
603
|
+
return (_jsxs("div", { style: {
|
|
604
|
+
cursor: "pointer",
|
|
605
|
+
display: "flex",
|
|
606
|
+
alignItems: "center",
|
|
607
|
+
}, onClick: () => {
|
|
608
|
+
var _a, _b, _c, _d;
|
|
609
|
+
return handleSelect(item.toString(), ((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "", getColumnData(((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.key) || "", gridData, (_d = (_c = headerColumns.find((column) => column.key === _groupBy)) === null || _c === void 0 ? void 0 : _c.dataType) !== null && _d !== void 0 ? _d : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []));
|
|
610
|
+
}, children: [_jsx(Checkbox, { id: CSS.escape(`${((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || ""}-${item}`), selected: typeof (uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.key) || ""]) !== "undefined"
|
|
611
|
+
? (uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[((_c = headerColumns.find((column) => column.key === _groupBy)) === null || _c === void 0 ? void 0 : _c.key) || ""].length) > 0 &&
|
|
612
|
+
((_e = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[((_d = headerColumns.find((column) => column.key === _groupBy)) === null || _d === void 0 ? void 0 : _d.key) || ""]) === null || _e === void 0 ? void 0 : _e.includes(item))
|
|
613
|
+
: true, onChange: () => { }, style: { pointerEvents: "none" }, noLabel: true, wrapperClass: checkboxWrapper }), _jsx("span", { style: { marginLeft: "0.5rem" }, children: formatValue(item, (_g = (_f = headerColumns.find((column) => column.key === _groupBy)) === null || _f === void 0 ? void 0 : _f.dataType) !== null && _g !== void 0 ? _g : "", locale, formatOptions) })] }, item));
|
|
614
|
+
})] })) }))] }))] }, (_84 = headerColumns.find((column) => column.key === _groupBy)) === null || _84 === void 0 ? void 0 : _84.key)) }));
|
|
547
615
|
}), headerColumns
|
|
548
616
|
.filter((column) => !groupByKeys.includes(column.key))
|
|
549
617
|
.map((column, colIndex) => {
|
|
550
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
|
618
|
+
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;
|
|
551
619
|
if (!column.hidden) {
|
|
552
620
|
const columnData = getColumnData(column.key, gridData, (_a = column.dataType) !== null && _a !== void 0 ? _a : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []);
|
|
553
621
|
return (_jsx("div", { className: `${sortable && column.sortable ? "sortable" : ""} ${column.showMenu ? "menu-true" : "menu-false"} column index-${column.key}`, style: Object.assign(Object.assign({}, cellStyle), { padding: "0.5rem", textAlign: "left", whiteSpace: "nowrap", textOverflow: "ellipsis", 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, position: "sticky", top: 0, zIndex: 1 }), onMouseMove: (e) => handleMouseMove(e), onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, children: !actionsKey.split(",").includes(column.key) && (_jsxs(_Fragment, { children: [resizable && (_jsx("div", { style: {
|
|
@@ -768,56 +836,89 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
768
836
|
: "var(--disabled-bg)",
|
|
769
837
|
}, value: ((_t = searchQueries[column.key]) === null || _t === void 0 ? void 0 : _t.text) ||
|
|
770
838
|
"", disabled: !column.search, height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "var(--background)" }) }))) ||
|
|
771
|
-
null })))] })) })] }), search && columnSearchOutside && (_jsx("div", { style: {
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
:
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
839
|
+
null })))] })) })] }), search && columnSearchOutside && (_jsxs("div", { style: { position: "relative" }, children: [_jsx("div", { style: {
|
|
840
|
+
marginTop: "0.5rem",
|
|
841
|
+
pointerEvents: search && column.search ? "auto" : "none",
|
|
842
|
+
cursor: search && column.search
|
|
843
|
+
? "default"
|
|
844
|
+
: "not-allowed",
|
|
845
|
+
}, children: _jsxs("div", { style: {
|
|
846
|
+
display: "flex",
|
|
847
|
+
alignItems: "center",
|
|
848
|
+
}, children: [_jsx(TextInput, { onChange: (e) => {
|
|
849
|
+
var _a;
|
|
850
|
+
setActiveSearchColumn(column.key);
|
|
851
|
+
let searchType = ((_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.type) ||
|
|
852
|
+
defaultSearchOperation ||
|
|
853
|
+
"contains";
|
|
854
|
+
if (e.target.value.includes("to")) {
|
|
855
|
+
searchType = "between";
|
|
856
|
+
}
|
|
857
|
+
else if (searchType === "between") {
|
|
858
|
+
searchType = "contains";
|
|
859
|
+
}
|
|
860
|
+
onSearch(column.key, e.target.value, searchType);
|
|
861
|
+
}, onBlur: () => setActiveSearchColumn(null), placeholder: "Search", extraWrapperStyle: {
|
|
862
|
+
background: column.search
|
|
863
|
+
? "var(--background)"
|
|
864
|
+
: "var(--disabled-bg)",
|
|
865
|
+
}, value: ((_u = searchQueries[column.key]) === null || _u === void 0 ? void 0 : _u.text) || "", disabled: !column.search, height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "#fff" }), _jsx(Dropdown, { options: searchOptions.filter((item) => column.dataType === "number" ||
|
|
866
|
+
column.dataType === "currency"
|
|
867
|
+
? numberTypeSearch.includes(item.value)
|
|
868
|
+
: column.dataType === "date"
|
|
869
|
+
? dateTypeSearch.includes(item.value)
|
|
870
|
+
: textTypeSearch.includes(item.value)), selectedValues: [
|
|
871
|
+
((_v = searchQueries[column.key]) === null || _v === void 0 ? void 0 : _v.type) ||
|
|
872
|
+
defaultSearchOperation ||
|
|
873
|
+
"contains",
|
|
874
|
+
], onChange: (selected) => {
|
|
875
|
+
var _a;
|
|
876
|
+
const value = ((_a = selected[0]) === null || _a === void 0 ? void 0 : _a.toString()) || "";
|
|
877
|
+
handleSearchOptionSelect(column.key, value);
|
|
878
|
+
}, selectedDisplay: (_x = (_w = searchOptions
|
|
879
|
+
.filter((item) => (column === null || column === void 0 ? void 0 : column.dataType) === "number" ||
|
|
880
|
+
(column === null || column === void 0 ? void 0 : column.dataType) === "currency"
|
|
881
|
+
? numberTypeSearch.includes(item.value)
|
|
882
|
+
: (column === null || column === void 0 ? void 0 : column.dataType) === "date"
|
|
883
|
+
? dateTypeSearch.includes(item.value)
|
|
884
|
+
: textTypeSearch.includes(item.value))
|
|
885
|
+
.find((item) => {
|
|
886
|
+
var _a, _b;
|
|
887
|
+
return item.value ===
|
|
888
|
+
((_b = searchQueries[(_a = column === null || column === void 0 ? void 0 : column.key) !== null && _a !== void 0 ? _a : ""]) === null || _b === void 0 ? void 0 : _b.type) ||
|
|
889
|
+
defaultSearchOperation ||
|
|
890
|
+
"contains";
|
|
891
|
+
})) === null || _w === void 0 ? void 0 : _w.label) !== null && _x !== void 0 ? _x : "", withValue: true, searchEnabled: false, className: "flex-1", isIcon: true })] }) }), columnData.length > 0 &&
|
|
892
|
+
activeSearchColumn === ((column === null || column === void 0 ? void 0 : column.key) || "") && (_jsxs("div", { style: {
|
|
893
|
+
position: "absolute",
|
|
894
|
+
top: "calc(100% + 0.25rem)",
|
|
895
|
+
left: 0,
|
|
896
|
+
background: "var(--card-bg)",
|
|
897
|
+
width: "100%",
|
|
898
|
+
maxHeight: 300,
|
|
899
|
+
overflow: "auto",
|
|
900
|
+
padding: "0.5rem 0.75rem",
|
|
901
|
+
}, children: [_jsxs("div", { style: {
|
|
902
|
+
cursor: "pointer",
|
|
903
|
+
display: "flex",
|
|
904
|
+
alignItems: "center",
|
|
905
|
+
}, onClick: () => handleSelect("all", (column === null || column === void 0 ? void 0 : column.key) || "", columnData), children: [_jsx(Checkbox, { id: CSS.escape((column === null || column === void 0 ? void 0 : column.key) || ""), selected: typeof (uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[(column === null || column === void 0 ? void 0 : column.key) || ""]) !==
|
|
906
|
+
"undefined"
|
|
907
|
+
? ((_y = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[(column === null || column === void 0 ? void 0 : column.key) || ""]) === null || _y === void 0 ? void 0 : _y.length) > 0 &&
|
|
908
|
+
columnData.every((item) => uniqueSearch[(column === null || column === void 0 ? void 0 : column.key) || ""].includes(item))
|
|
909
|
+
: true, indeterminate: ((_z = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[(column === null || column === void 0 ? void 0 : column.key) || ""]) === null || _z === void 0 ? void 0 : _z.length) >
|
|
910
|
+
0 &&
|
|
911
|
+
columnData.some((item) => uniqueSearch[(column === null || column === void 0 ? void 0 : column.key) || ""].includes(item)), onChange: () => { }, style: { pointerEvents: "none" }, noLabel: true, wrapperClass: checkboxWrapper }), _jsx("span", { style: { marginLeft: "0.5rem" }, children: "All" })] }), columnData.map((item) => {
|
|
815
912
|
var _a, _b;
|
|
816
|
-
return
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
913
|
+
return (_jsxs("div", { style: {
|
|
914
|
+
cursor: "pointer",
|
|
915
|
+
display: "flex",
|
|
916
|
+
alignItems: "center",
|
|
917
|
+
}, onClick: () => handleSelect(item.toString(), (column === null || column === void 0 ? void 0 : column.key) || "", columnData), children: [_jsx(Checkbox, { id: CSS.escape(`${(column === null || column === void 0 ? void 0 : column.key) || ""}-${item}`), selected: typeof (uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[(column === null || column === void 0 ? void 0 : column.key) || ""]) !== "undefined"
|
|
918
|
+
? (uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[(column === null || column === void 0 ? void 0 : column.key) || ""].length) > 0 &&
|
|
919
|
+
((_a = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[(column === null || column === void 0 ? void 0 : column.key) || ""]) === null || _a === void 0 ? void 0 : _a.includes(item))
|
|
920
|
+
: true, onChange: () => { }, style: { pointerEvents: "none" }, noLabel: true, wrapperClass: checkboxWrapper }), _jsx("span", { style: { marginLeft: "0.5rem" }, children: formatValue(item, (_b = column === null || column === void 0 ? void 0 : column.dataType) !== null && _b !== void 0 ? _b : "", locale, formatOptions) })] }, item));
|
|
921
|
+
})] }))] }))] })) }, column.key));
|
|
821
922
|
}
|
|
822
923
|
return null;
|
|
823
924
|
})] }));
|
package/package.json
CHANGED