@codezee/sixtify-brahma 0.2.124 → 0.2.125
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/package.json +1 -1
- package/packages/shared-components/dist/FormFields/SearchField/SearchField.d.ts.map +1 -1
- package/packages/shared-components/dist/FormFields/SearchField/SearchField.js +4 -1
- package/packages/shared-components/dist/FormFields/SearchField/StickySearchField.d.ts +11 -0
- package/packages/shared-components/dist/FormFields/SearchField/StickySearchField.d.ts.map +1 -0
- package/packages/shared-components/dist/FormFields/SearchField/StickySearchField.js +16 -0
- package/packages/shared-components/dist/FormFields/SearchField/index.d.ts +1 -0
- package/packages/shared-components/dist/FormFields/SearchField/index.d.ts.map +1 -1
- package/packages/shared-components/dist/FormFields/SearchField/index.js +1 -0
- package/packages/shared-components/dist/FormFields/TextField/TextField.d.ts +9 -3
- package/packages/shared-components/dist/FormFields/TextField/TextField.d.ts.map +1 -1
- package/packages/shared-components/dist/FormFields/TextField/TextField.js +22 -3
- package/packages/shared-components/dist/SmartGrid/Components/FacetedFilter/FacetedFilter.d.ts +1 -2
- package/packages/shared-components/dist/SmartGrid/Components/FacetedFilter/FacetedFilter.d.ts.map +1 -1
- package/packages/shared-components/dist/SmartGrid/Components/FacetedFilter/FacetedFilter.js +4 -9
- package/packages/shared-components/dist/SmartGrid/Components/FacetedFilter/VirtualCheckboxList.d.ts.map +1 -1
- package/packages/shared-components/dist/SmartGrid/Components/FacetedFilter/VirtualCheckboxList.js +6 -44
- package/packages/shared-components/dist/SmartGrid/Components/HeaderCell.d.ts +1 -2
- package/packages/shared-components/dist/SmartGrid/Components/HeaderCell.d.ts.map +1 -1
- package/packages/shared-components/dist/SmartGrid/Components/HeaderCell.js +2 -2
- package/packages/shared-components/dist/SmartGrid/Components/SearchFilterRow/GetRenderInputs.d.ts +1 -2
- package/packages/shared-components/dist/SmartGrid/Components/SearchFilterRow/GetRenderInputs.d.ts.map +1 -1
- package/packages/shared-components/dist/SmartGrid/Components/SearchFilterRow/GetRenderInputs.js +2 -2
- package/packages/shared-components/dist/SmartGrid/Components/SearchFilterRow/SearchFilterRow.d.ts +1 -2
- package/packages/shared-components/dist/SmartGrid/Components/SearchFilterRow/SearchFilterRow.d.ts.map +1 -1
- package/packages/shared-components/dist/SmartGrid/Components/SearchFilterRow/SearchFilterRow.js +2 -2
- package/packages/shared-components/dist/SmartGrid/SmartGrid.d.ts.map +1 -1
- package/packages/shared-components/dist/SmartGrid/SmartGrid.js +4 -17
- package/packages/shared-components/dist/SmartGrid/Components/FilterStatusPanel.d.ts +0 -8
- package/packages/shared-components/dist/SmartGrid/Components/FilterStatusPanel.d.ts.map +0 -1
- package/packages/shared-components/dist/SmartGrid/Components/FilterStatusPanel.js +0 -77
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/SearchField/SearchField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAGnD,wBAAgB,WAAW,CAAC,CAAC,SAAS,WAAW,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"SearchField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/SearchField/SearchField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAGnD,wBAAgB,WAAW,CAAC,CAAC,SAAS,WAAW,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,2CAiC1E"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { type PaperProps, type SxProps } from "@mui/material";
|
|
2
|
+
import type { FieldValues } from "react-hook-form";
|
|
3
|
+
import type { TextFieldProps } from "../TextField";
|
|
4
|
+
type StickySearchFieldProps<T extends FieldValues> = TextFieldProps<T> & {
|
|
5
|
+
top?: object | string;
|
|
6
|
+
paperSx?: PaperProps;
|
|
7
|
+
boxSx?: SxProps;
|
|
8
|
+
};
|
|
9
|
+
export declare const StickySearchField: <T extends FieldValues>({ top, paperSx, boxSx, ...props }: StickySearchFieldProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export {};
|
|
11
|
+
//# sourceMappingURL=StickySearchField.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StickySearchField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/SearchField/StickySearchField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,UAAU,EAAE,KAAK,OAAO,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAGnD,KAAK,sBAAsB,CAAC,CAAC,SAAS,WAAW,IAAI,cAAc,CAAC,CAAC,CAAC,GAAG;IACvE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,WAAW,EAAE,mCAKtD,sBAAsB,CAAC,CAAC,CAAC,4CAkB3B,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.StickySearchField = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const material_1 = require("@mui/material");
|
|
6
|
+
const PadBox_1 = require("../../PadBox");
|
|
7
|
+
const SearchField_1 = require("./SearchField");
|
|
8
|
+
const StickySearchField = ({ top = "0px", paperSx, boxSx, ...props }) => {
|
|
9
|
+
return ((0, jsx_runtime_1.jsx)(material_1.Paper, { variant: "outlined", sx: {
|
|
10
|
+
position: "sticky",
|
|
11
|
+
top,
|
|
12
|
+
zIndex: 100,
|
|
13
|
+
...paperSx,
|
|
14
|
+
}, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "5px" }, children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: "flex", justifyContent: "flex-end", ...boxSx }, children: (0, jsx_runtime_1.jsx)(SearchField_1.SearchField, { ...props }) }) }) }));
|
|
15
|
+
};
|
|
16
|
+
exports.StickySearchField = StickySearchField;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/FormFields/SearchField/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/FormFields/SearchField/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { type TextFieldProps as MuiTextFieldProps, type StackProps } from "@mui/material";
|
|
2
|
+
import type { ReactNode } from "react";
|
|
2
3
|
import { type ControllerRenderProps, type FieldError, type FieldValues, type UseControllerProps } from "react-hook-form";
|
|
3
|
-
export type AllowedCharacterType = "string" | "string-number" | "string-number-special";
|
|
4
|
+
export type AllowedCharacterType = "string" | "string-number" | "string-number-special" | "string-special" | "string-special-all" | "custom";
|
|
4
5
|
export type LetterCase = "uppercase" | "lowercase" | "mixed";
|
|
5
6
|
export type TextFieldProps<P extends FieldValues> = UseControllerProps<P> & Omit<MuiTextFieldProps, keyof ControllerRenderProps<P>> & {
|
|
6
7
|
label?: string;
|
|
@@ -8,7 +9,6 @@ export type TextFieldProps<P extends FieldValues> = UseControllerProps<P> & Omit
|
|
|
8
9
|
rows?: number;
|
|
9
10
|
isCapitalize?: boolean;
|
|
10
11
|
isTrimStartDisabled?: boolean;
|
|
11
|
-
characterType?: AllowedCharacterType;
|
|
12
12
|
letterCase?: LetterCase;
|
|
13
13
|
setError?: (name: keyof P, error: FieldError | {
|
|
14
14
|
type: string;
|
|
@@ -16,6 +16,12 @@ export type TextFieldProps<P extends FieldValues> = UseControllerProps<P> & Omit
|
|
|
16
16
|
}) => void;
|
|
17
17
|
containerProps?: StackProps;
|
|
18
18
|
styling?: "custom" | "default";
|
|
19
|
+
infoMessage?: ReactNode;
|
|
20
|
+
characterType?: AllowedCharacterType;
|
|
21
|
+
regexExpression?: {
|
|
22
|
+
message: string | null;
|
|
23
|
+
regex: RegExp;
|
|
24
|
+
};
|
|
19
25
|
};
|
|
20
|
-
export declare function TextField<P extends FieldValues>({ control, name, defaultValue, label, rules, type, required, disabled, loading, placeholder, isCapitalize, isTrimStartDisabled, rows, characterType, letterCase, setError, containerProps, styling, ...inputFieldProps }: TextFieldProps<P>): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
export declare function TextField<P extends FieldValues>({ control, name, defaultValue, label, rules, type, required, disabled, loading, placeholder, isCapitalize, isTrimStartDisabled, rows, characterType, letterCase, setError, containerProps, styling, infoMessage, regexExpression, ...inputFieldProps }: TextFieldProps<P>): import("react/jsx-runtime").JSX.Element;
|
|
21
27
|
//# sourceMappingURL=TextField.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,IAAI,iBAAiB,EACxC,KAAK,UAAU,EAChB,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,IAAI,iBAAiB,EACxC,KAAK,UAAU,EAChB,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAWzB,MAAM,MAAM,oBAAoB,GAC5B,QAAQ,GACR,eAAe,GACf,uBAAuB,GACvB,gBAAgB,GAChB,oBAAoB,GACpB,QAAQ,CAAC;AAEb,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,OAAO,CAAC;AAY7D,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACvE,IAAI,CAAC,iBAAiB,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,CACT,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;IACV,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,aAAa,CAAC,EAAE,oBAAoB,CAAC;IACrC,eAAe,CAAC,EAAE;QAChB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;CACH,CAAC;AAEJ,wBAAgB,SAAS,CAAC,CAAC,SAAS,WAAW,EAAE,EAC/C,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,KAAU,EACV,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAe,EACf,WAAgB,EAChB,YAAoB,EACpB,mBAA2B,EAC3B,IAAI,EACJ,aAAuC,EACvC,UAAoB,EACpB,QAAQ,EACR,cAAc,EACd,OAAkB,EAClB,WAAW,EACX,eAGC,EACD,GAAG,eAAe,EACnB,EAAE,cAAc,CAAC,CAAC,CAAC,2CA4InB"}
|
|
@@ -4,14 +4,22 @@ exports.TextField = TextField;
|
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const material_1 = require("@mui/material");
|
|
6
6
|
const react_hook_form_1 = require("react-hook-form");
|
|
7
|
+
const icons_material_1 = require("@mui/icons-material");
|
|
8
|
+
const Tooltip_1 = require("../../Tooltip");
|
|
7
9
|
const commonStyles_1 = require("../commonStyles");
|
|
8
10
|
const Skeleton_1 = require("./Skeleton");
|
|
9
11
|
const characterTypeMessages = {
|
|
10
12
|
string: "Only alphabetic characters are allowed.",
|
|
11
13
|
"string-number": "Only letters and numbers are allowed.",
|
|
12
14
|
"string-number-special": "Special characters are allowed.",
|
|
15
|
+
"string-special": "Only letters, accents, apostrophes, and hyphens are allowed.",
|
|
16
|
+
"string-special-all": "Only letters and Special characters are allowed",
|
|
17
|
+
custom: "Please enter a valid input",
|
|
13
18
|
};
|
|
14
|
-
function TextField({ control, name, defaultValue, label = "", rules, type, required, disabled, loading = false, placeholder = "", isCapitalize = false, isTrimStartDisabled = false, rows, characterType = "string-number-special", letterCase = "mixed", setError, containerProps, styling = "custom",
|
|
19
|
+
function TextField({ control, name, defaultValue, label = "", rules, type, required, disabled, loading = false, placeholder = "", isCapitalize = false, isTrimStartDisabled = false, rows, characterType = "string-number-special", letterCase = "mixed", setError, containerProps, styling = "custom", infoMessage, regexExpression = {
|
|
20
|
+
message: null,
|
|
21
|
+
regex: /^[\s\S]*$/,
|
|
22
|
+
}, ...inputFieldProps }) {
|
|
15
23
|
const { field: { value, onChange, ...restField }, fieldState: { error }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
|
|
16
24
|
const handleKeyDown = (event) => {
|
|
17
25
|
if (event.key === "-" && type === "number") {
|
|
@@ -26,6 +34,12 @@ function TextField({ control, name, defaultValue, label = "", rules, type, requi
|
|
|
26
34
|
return /^[A-Za-z0-9\s]*$/;
|
|
27
35
|
case "string-number-special":
|
|
28
36
|
return /^[\s\S]*$/;
|
|
37
|
+
case "string-special":
|
|
38
|
+
return /^[\p{L}’'\-\s]+$/u;
|
|
39
|
+
case "string-special-all":
|
|
40
|
+
return /^[^\d]+$/;
|
|
41
|
+
case "custom":
|
|
42
|
+
return regexExpression.regex;
|
|
29
43
|
default:
|
|
30
44
|
return /^[\s\S]*$/;
|
|
31
45
|
}
|
|
@@ -47,10 +61,16 @@ function TextField({ control, name, defaultValue, label = "", rules, type, requi
|
|
|
47
61
|
}
|
|
48
62
|
return result;
|
|
49
63
|
};
|
|
64
|
+
const { message } = regexExpression;
|
|
65
|
+
const errorMessage = !message
|
|
66
|
+
? characterTypeMessages[characterType]
|
|
67
|
+
: message;
|
|
50
68
|
if (loading) {
|
|
51
69
|
return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { label: label, rows: rows, styling: styling });
|
|
52
70
|
}
|
|
53
|
-
return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { ...containerProps, gap: "
|
|
71
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { ...containerProps, gap: "5px", children: [label && styling === "custom" && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label }), infoMessage && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: infoMessage, children: (0, jsx_runtime_1.jsx)(icons_material_1.InfoOutlined, { sx: {
|
|
72
|
+
fontSize: 13,
|
|
73
|
+
} }) }))] })), (0, jsx_runtime_1.jsx)(material_1.TextField, { disabled: disabled, required: required, fullWidth: true, onKeyDown: handleKeyDown, placeholder: styling === "default" ? placeholder : placeholder || label, type: type, label: styling === "default" ? label : undefined, sx: (0, commonStyles_1.getDefaultTextFieldSx)(styling), InputLabelProps: (0, commonStyles_1.getDefaultInputLabelProps)(styling), inputProps: {
|
|
54
74
|
min: 0,
|
|
55
75
|
}, error: Boolean(error), helperText: error?.message, onChange: (event) => {
|
|
56
76
|
let value = event.target.value || null;
|
|
@@ -62,7 +82,6 @@ function TextField({ control, name, defaultValue, label = "", rules, type, requi
|
|
|
62
82
|
}
|
|
63
83
|
const cleanedVal = value && cleanInput(value);
|
|
64
84
|
if (value !== cleanedVal) {
|
|
65
|
-
const errorMessage = characterTypeMessages[characterType];
|
|
66
85
|
if (setError) {
|
|
67
86
|
setError(name, { type: "manual", message: errorMessage });
|
|
68
87
|
return;
|
package/packages/shared-components/dist/SmartGrid/Components/FacetedFilter/FacetedFilter.d.ts
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import type { Header } from "@tanstack/react-table";
|
|
2
2
|
type FacetedFilterProps<T> = {
|
|
3
3
|
header: Header<T, unknown>;
|
|
4
|
-
resetAllFilters: boolean;
|
|
5
4
|
};
|
|
6
|
-
export declare const FacetedFilter: <T>({ header
|
|
5
|
+
export declare const FacetedFilter: <T>({ header }: FacetedFilterProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
7
6
|
export {};
|
|
8
7
|
//# sourceMappingURL=FacetedFilter.d.ts.map
|
package/packages/shared-components/dist/SmartGrid/Components/FacetedFilter/FacetedFilter.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FacetedFilter.d.ts","sourceRoot":"","sources":["../../../../src/SmartGrid/Components/FacetedFilter/FacetedFilter.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAUpD,KAAK,kBAAkB,CAAC,CAAC,IAAI;IAC3B,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"FacetedFilter.d.ts","sourceRoot":"","sources":["../../../../src/SmartGrid/Components/FacetedFilter/FacetedFilter.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAUpD,KAAK,kBAAkB,CAAC,CAAC,IAAI;IAC3B,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,CAAC,EAAG,YAAY,kBAAkB,CAAC,CAAC,CAAC,4CAoTlE,CAAC"}
|
|
@@ -9,7 +9,7 @@ const useGetDynamicOptionData_1 = require("./hooks/useGetDynamicOptionData");
|
|
|
9
9
|
const DebouncedInput_1 = require("../SearchFilterRow/DebouncedInput");
|
|
10
10
|
const VirtualCheckboxList_1 = require("./VirtualCheckboxList");
|
|
11
11
|
const Tooltip_1 = require("../../../Tooltip");
|
|
12
|
-
const FacetedFilter = ({ header
|
|
12
|
+
const FacetedFilter = ({ header }) => {
|
|
13
13
|
const theme = (0, material_1.useTheme)();
|
|
14
14
|
const { butterflyBlue, iron, mirage } = theme.palette.app.color;
|
|
15
15
|
const [isOpen, setIsOpen] = (0, react_1.useState)(false);
|
|
@@ -132,22 +132,17 @@ const FacetedFilter = ({ header, resetAllFilters, }) => {
|
|
|
132
132
|
setSearchValue("");
|
|
133
133
|
setIsOpen(false);
|
|
134
134
|
}, [header.column, isCombinedFilter]);
|
|
135
|
-
(0, react_1.useMemo)(() => {
|
|
136
|
-
if (resetAllFilters) {
|
|
137
|
-
handleReset();
|
|
138
|
-
}
|
|
139
|
-
}, [resetAllFilters]);
|
|
140
135
|
return ((0, jsx_runtime_1.jsxs)("div", { style: { position: "relative" }, children: [(0, jsx_runtime_1.jsxs)(material_1.IconButton, { ref: buttonRef, onClick: () => setIsOpen(!isOpen), sx: { padding: 0, position: "relative" }, children: [(0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: "Faceted Filter", children: (0, jsx_runtime_1.jsx)(icons_material_1.FilterListRounded, {}) }), activeFilterCount > 0 && ((0, jsx_runtime_1.jsx)("span", { style: {
|
|
141
136
|
backgroundColor: butterflyBlue[900],
|
|
142
|
-
border: `2px solid ${iron[600]}`,
|
|
143
137
|
borderRadius: "50%",
|
|
144
138
|
color: iron[600],
|
|
145
139
|
fontSize: "10px",
|
|
146
140
|
fontWeight: "bold",
|
|
147
141
|
height: "6px",
|
|
142
|
+
lineHeight: "6px",
|
|
148
143
|
position: "absolute",
|
|
149
144
|
right: 0,
|
|
150
|
-
top:
|
|
145
|
+
top: 3,
|
|
151
146
|
width: "6px",
|
|
152
147
|
} }))] }), isOpen && ((0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, { onClickAway: handleClickAway, children: (0, jsx_runtime_1.jsxs)("div", { ref: popoverRef, style: {
|
|
153
148
|
backgroundColor: iron[600],
|
|
@@ -155,7 +150,7 @@ const FacetedFilter = ({ header, resetAllFilters, }) => {
|
|
|
155
150
|
boxShadow: `0 0 20px ${mirage[50]}`,
|
|
156
151
|
display: "flex",
|
|
157
152
|
flexDirection: "column",
|
|
158
|
-
height: "
|
|
153
|
+
height: "251px",
|
|
159
154
|
left: 0,
|
|
160
155
|
padding: "8px",
|
|
161
156
|
position: "absolute",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VirtualCheckboxList.d.ts","sourceRoot":"","sources":["../../../../src/SmartGrid/Components/FacetedFilter/VirtualCheckboxList.tsx"],"names":[],"mappings":"AAGA,KAAK,wBAAwB,GAAG;IAC9B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,mBAAmB,0EACM,wBAAwB,
|
|
1
|
+
{"version":3,"file":"VirtualCheckboxList.d.ts","sourceRoot":"","sources":["../../../../src/SmartGrid/Components/FacetedFilter/VirtualCheckboxList.tsx"],"names":[],"mappings":"AAGA,KAAK,wBAAwB,GAAG;IAC9B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,mBAAmB,0EACM,wBAAwB,6CAmG7D,CAAC"}
|
package/packages/shared-components/dist/SmartGrid/Components/FacetedFilter/VirtualCheckboxList.js
CHANGED
|
@@ -6,14 +6,14 @@ const material_1 = require("@mui/material");
|
|
|
6
6
|
const react_1 = require("react");
|
|
7
7
|
exports.VirtualCheckboxList = (0, react_1.memo)(({ checkedMap, onToggle, options }) => {
|
|
8
8
|
const theme = (0, material_1.useTheme)();
|
|
9
|
-
const { butterflyBlue
|
|
9
|
+
const { butterflyBlue } = theme.palette.app.color;
|
|
10
10
|
const containerRef = (0, react_1.useRef)(null);
|
|
11
11
|
const [visibleRange, setVisibleRange] = (0, react_1.useState)({ end: 20, start: 0 });
|
|
12
|
-
const
|
|
13
|
-
const [dragMode, setDragMode] = (0, react_1.useState)(null);
|
|
14
|
-
const ITEM_HEIGHT = 25;
|
|
12
|
+
const ITEM_HEIGHT = 32;
|
|
15
13
|
const BUFFER = 5;
|
|
16
14
|
const CONTAINER_HEIGHT = 200;
|
|
15
|
+
// useCallback is used to stabilize the scroll handler reference,
|
|
16
|
+
// preventing unnecessary re-attachment when used in event listeners or memoized components.
|
|
17
17
|
const handleScroll = (0, react_1.useCallback)(() => {
|
|
18
18
|
if (!containerRef.current) {
|
|
19
19
|
return;
|
|
@@ -28,44 +28,12 @@ exports.VirtualCheckboxList = (0, react_1.memo)(({ checkedMap, onToggle, options
|
|
|
28
28
|
const visibleItems = (0, react_1.useMemo)(() => {
|
|
29
29
|
return options.slice(visibleRange.start, visibleRange.end);
|
|
30
30
|
}, [options, visibleRange.start, visibleRange.end]);
|
|
31
|
-
// useCallback is used to memoize the handler and prevent unnecessary re-creations
|
|
32
|
-
// when passed to event listeners inside the list items.
|
|
33
|
-
const handleMouseDown = (0, react_1.useCallback)((value) => {
|
|
34
|
-
setIsMouseDown(true);
|
|
35
|
-
const isAlreadyChecked = checkedMap[value];
|
|
36
|
-
setDragMode(isAlreadyChecked ? "unCheck" : "check");
|
|
37
|
-
onToggle(value);
|
|
38
|
-
}, [onToggle, checkedMap]);
|
|
39
|
-
// useCallback ensures stable reference when attached to multiple items’ mouse events,
|
|
40
|
-
// avoiding re-binding on every render and improving performance.
|
|
41
|
-
const handleMouseEnter = (0, react_1.useCallback)((value) => {
|
|
42
|
-
if (isMouseDown && dragMode) {
|
|
43
|
-
const isChecked = checkedMap[value];
|
|
44
|
-
if ((dragMode === "check" && !isChecked) ||
|
|
45
|
-
(dragMode === "unCheck" && isChecked)) {
|
|
46
|
-
onToggle(value);
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
}, [isMouseDown, dragMode, checkedMap, onToggle]);
|
|
50
|
-
// useCallback memoizes this function so the global mouseup listener
|
|
51
|
-
// remains stable across renders, preventing multiple event bindings.
|
|
52
|
-
const handleMouseUp = (0, react_1.useCallback)(() => {
|
|
53
|
-
setIsMouseDown(false);
|
|
54
|
-
setDragMode(null);
|
|
55
|
-
}, []);
|
|
56
|
-
// Stop drag globally when mouse released anywhere
|
|
57
|
-
(0, react_1.useMemo)(() => {
|
|
58
|
-
document.addEventListener("mouseup", handleMouseUp);
|
|
59
|
-
return () => document.removeEventListener("mouseup", handleMouseUp);
|
|
60
|
-
}, [handleMouseUp]);
|
|
61
31
|
return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, onScroll: handleScroll, style: {
|
|
62
32
|
display: "flex",
|
|
63
33
|
flexDirection: "column",
|
|
64
|
-
height: "300px",
|
|
65
34
|
maxHeight: `${CONTAINER_HEIGHT}px`,
|
|
66
35
|
overflowY: "auto",
|
|
67
36
|
position: "relative",
|
|
68
|
-
userSelect: "none",
|
|
69
37
|
}, children: (0, jsx_runtime_1.jsx)("div", { style: {
|
|
70
38
|
height: `${options.length * ITEM_HEIGHT}px`,
|
|
71
39
|
position: "relative",
|
|
@@ -75,20 +43,14 @@ exports.VirtualCheckboxList = (0, react_1.memo)(({ checkedMap, onToggle, options
|
|
|
75
43
|
width: "100%",
|
|
76
44
|
}, children: visibleItems.map((value) => {
|
|
77
45
|
const isChecked = checkedMap[value] || false;
|
|
78
|
-
return ((0, jsx_runtime_1.jsxs)(material_1.Typography, {
|
|
46
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.Typography, { onClick: () => onToggle(value), style: {
|
|
79
47
|
alignItems: "center",
|
|
80
|
-
backgroundColor: isChecked
|
|
81
|
-
? sapphireBlue[400]
|
|
82
|
-
: "transparent",
|
|
83
48
|
cursor: "pointer",
|
|
84
49
|
display: "flex",
|
|
85
50
|
fontSize: "12px",
|
|
86
51
|
gap: "4px",
|
|
87
52
|
height: `${ITEM_HEIGHT}px`,
|
|
88
|
-
}, children: [(0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: isChecked, onChange: (
|
|
89
|
-
e.stopPropagation();
|
|
90
|
-
onToggle(value);
|
|
91
|
-
}, onMouseDown: (e) => e.stopPropagation(), size: "small", style: {
|
|
53
|
+
}, children: [(0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: isChecked, onChange: () => onToggle(value), size: "small", style: {
|
|
92
54
|
color: isChecked ? butterflyBlue[900] : "",
|
|
93
55
|
padding: "4px",
|
|
94
56
|
} }), value] }, value));
|
|
@@ -3,8 +3,7 @@ type HeaderCellProps<T> = {
|
|
|
3
3
|
defaultGrouping?: (keyof T)[];
|
|
4
4
|
header: Header<T, unknown>;
|
|
5
5
|
loading: boolean;
|
|
6
|
-
resetAllFilters: boolean;
|
|
7
6
|
};
|
|
8
|
-
export declare const HeaderCell: <T>({ defaultGrouping, header, loading,
|
|
7
|
+
export declare const HeaderCell: <T>({ defaultGrouping, header, loading, }: HeaderCellProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
9
8
|
export {};
|
|
10
9
|
//# sourceMappingURL=HeaderCell.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderCell.d.ts","sourceRoot":"","sources":["../../../src/SmartGrid/Components/HeaderCell.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,MAAM,EAAc,MAAM,uBAAuB,CAAC;AAQhE,KAAK,eAAe,CAAC,CAAC,IAAI;IACxB,eAAe,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC;IAC9B,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"HeaderCell.d.ts","sourceRoot":"","sources":["../../../src/SmartGrid/Components/HeaderCell.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,MAAM,EAAc,MAAM,uBAAuB,CAAC;AAQhE,KAAK,eAAe,CAAC,CAAC,IAAI;IACxB,eAAe,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC;IAC9B,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,CAAC,EAAG,uCAI5B,eAAe,CAAC,CAAC,CAAC,4CAoIpB,CAAC"}
|
|
@@ -13,7 +13,7 @@ const FacetedFilter_1 = require("./FacetedFilter/FacetedFilter");
|
|
|
13
13
|
const useGetGroupedColumn_1 = require("../hooks/useGetGroupedColumn");
|
|
14
14
|
const useGetSortedColumn_1 = require("../hooks/useGetSortedColumn");
|
|
15
15
|
const Tooltip_1 = require("../../Tooltip");
|
|
16
|
-
const HeaderCell = ({ defaultGrouping, header, loading = false,
|
|
16
|
+
const HeaderCell = ({ defaultGrouping, header, loading = false, }) => {
|
|
17
17
|
const theme = (0, material_1.useTheme)();
|
|
18
18
|
const { butterflyBlue, iron, slate } = theme.palette.app.color;
|
|
19
19
|
const { isSortable, mutipleSortCounts, sortableIcon } = (0, useGetSortedColumn_1.useGetSortedColumn)({
|
|
@@ -54,7 +54,7 @@ const HeaderCell = ({ defaultGrouping, header, loading = false, resetAllFilters,
|
|
|
54
54
|
textOverflow: "ellipsis",
|
|
55
55
|
textWrap: "nowrap",
|
|
56
56
|
}, children: !header.isPlaceholder &&
|
|
57
|
-
(0, react_table_1.flexRender)(columnDef.header, header.getContext()) }) }), showFacetedFilter && !loading && (
|
|
57
|
+
(0, react_table_1.flexRender)(columnDef.header, header.getContext()) }) }), isSortable && mutipleSortCounts > 0 && mutipleSortCounts + 1, showFacetedFilter && !loading && (0, jsx_runtime_1.jsx)(FacetedFilter_1.FacetedFilter, { header: header }), isSortable && !loading && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: "Sorting", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { sx: { padding: 0 }, onClick: getToggleSortingHandler(), children: sortableIcon }) })), isGroupable && !defaultGrouping?.length && !loading && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: getToggleGroupingHandler(),
|
|
58
58
|
style: {
|
|
59
59
|
cursor: "pointer",
|
|
60
60
|
padding: 0,
|
package/packages/shared-components/dist/SmartGrid/Components/SearchFilterRow/GetRenderInputs.d.ts
CHANGED
|
@@ -3,8 +3,7 @@ type GetRenderInputsProps<T> = {
|
|
|
3
3
|
filterVariant?: "smartTextFilter" | "smartNumberFilter" | "smartDateFilter" | "smartSelectFilter";
|
|
4
4
|
header: Header<T, unknown>;
|
|
5
5
|
headerDyanmicWidth: number;
|
|
6
|
-
resetAllFilters: boolean;
|
|
7
6
|
};
|
|
8
|
-
export declare const GetRenderInputs: <T>({ filterVariant, header, headerDyanmicWidth,
|
|
7
|
+
export declare const GetRenderInputs: <T>({ filterVariant, header, headerDyanmicWidth, }: GetRenderInputsProps<T>) => import("react/jsx-runtime").JSX.Element | null;
|
|
9
8
|
export {};
|
|
10
9
|
//# sourceMappingURL=GetRenderInputs.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GetRenderInputs.d.ts","sourceRoot":"","sources":["../../../../src/SmartGrid/Components/SearchFilterRow/GetRenderInputs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAKpD,KAAK,oBAAoB,CAAC,CAAC,IAAI;IAC7B,aAAa,CAAC,EACV,iBAAiB,GACjB,mBAAmB,GACnB,iBAAiB,GACjB,mBAAmB,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IAC3B,kBAAkB,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"GetRenderInputs.d.ts","sourceRoot":"","sources":["../../../../src/SmartGrid/Components/SearchFilterRow/GetRenderInputs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAKpD,KAAK,oBAAoB,CAAC,CAAC,IAAI;IAC7B,aAAa,CAAC,EACV,iBAAiB,GACjB,mBAAmB,GACnB,iBAAiB,GACjB,mBAAmB,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IAC3B,kBAAkB,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,CAAC,EAAG,gDAIjC,oBAAoB,CAAC,CAAC,CAAC,mDAyGzB,CAAC"}
|
package/packages/shared-components/dist/SmartGrid/Components/SearchFilterRow/GetRenderInputs.js
CHANGED
|
@@ -4,7 +4,7 @@ exports.GetRenderInputs = void 0;
|
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const material_1 = require("@mui/material");
|
|
6
6
|
const DebouncedInput_1 = require("./DebouncedInput");
|
|
7
|
-
const GetRenderInputs = ({ filterVariant, header, headerDyanmicWidth,
|
|
7
|
+
const GetRenderInputs = ({ filterVariant, header, headerDyanmicWidth, }) => {
|
|
8
8
|
const { columnDef, getFilterValue, setFilterValue } = header.column;
|
|
9
9
|
const { facetedFilter, filterParams, filterVariant: hasFilterVariant, } = columnDef;
|
|
10
10
|
const isCombinedFilter = facetedFilter && hasFilterVariant;
|
|
@@ -26,7 +26,7 @@ const GetRenderInputs = ({ filterVariant, header, headerDyanmicWidth, resetAllFi
|
|
|
26
26
|
const setValue = (value) => isCombinedFilter
|
|
27
27
|
? updateCombinedFilter({ search: value })
|
|
28
28
|
: setFilterValue(value);
|
|
29
|
-
const renderDebouncedInput = (type) => ((0, jsx_runtime_1.jsx)(DebouncedInput_1.DebouncedInput, { onChange: (value) => setValue(
|
|
29
|
+
const renderDebouncedInput = (type) => ((0, jsx_runtime_1.jsx)(DebouncedInput_1.DebouncedInput, { onChange: (value) => setValue(value), type: type, value: getValue(), style: commonInputStyle }));
|
|
30
30
|
const renderSelectInput = () => {
|
|
31
31
|
const options = filterParams?.filterOptions ?? [];
|
|
32
32
|
const value = isCombinedFilter
|
package/packages/shared-components/dist/SmartGrid/Components/SearchFilterRow/SearchFilterRow.d.ts
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import type { Header } from "@tanstack/react-table";
|
|
2
2
|
type SearchFilterRowProps<T> = {
|
|
3
3
|
header: Header<T, unknown>;
|
|
4
|
-
resetAllFilters: boolean;
|
|
5
4
|
};
|
|
6
|
-
export declare const SearchFilterRow: <T>({ header
|
|
5
|
+
export declare const SearchFilterRow: <T>({ header }: SearchFilterRowProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
7
6
|
export {};
|
|
8
7
|
//# sourceMappingURL=SearchFilterRow.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchFilterRow.d.ts","sourceRoot":"","sources":["../../../../src/SmartGrid/Components/SearchFilterRow/SearchFilterRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAKpD,KAAK,oBAAoB,CAAC,CAAC,IAAI;IAC7B,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"SearchFilterRow.d.ts","sourceRoot":"","sources":["../../../../src/SmartGrid/Components/SearchFilterRow/SearchFilterRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAKpD,KAAK,oBAAoB,CAAC,CAAC,IAAI;IAC7B,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,CAAC,EAAG,YAAY,oBAAoB,CAAC,CAAC,CAAC,4CA+CtE,CAAC"}
|
package/packages/shared-components/dist/SmartGrid/Components/SearchFilterRow/SearchFilterRow.js
CHANGED
|
@@ -4,7 +4,7 @@ exports.SearchFilterRow = void 0;
|
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const material_1 = require("@mui/material");
|
|
6
6
|
const GetRenderInputs_1 = require("./GetRenderInputs");
|
|
7
|
-
const SearchFilterRow = ({ header
|
|
7
|
+
const SearchFilterRow = ({ header }) => {
|
|
8
8
|
const theme = (0, material_1.useTheme)();
|
|
9
9
|
const { iron, slate } = theme.palette.app.color;
|
|
10
10
|
const headerDyanmicWidth = header.column.getIsPinned()
|
|
@@ -29,6 +29,6 @@ const SearchFilterRow = ({ header, resetAllFilters, }) => {
|
|
|
29
29
|
textAlign: "left",
|
|
30
30
|
width: headerDyanmicWidth,
|
|
31
31
|
zIndex: header.column.getIsPinned() ? 3 : 0,
|
|
32
|
-
}, children: filterVariant ? ((0, jsx_runtime_1.jsx)(GetRenderInputs_1.GetRenderInputs, { filterVariant: filterVariant, header: header, headerDyanmicWidth: headerDyanmicWidth
|
|
32
|
+
}, children: filterVariant ? ((0, jsx_runtime_1.jsx)(GetRenderInputs_1.GetRenderInputs, { filterVariant: filterVariant, header: header, headerDyanmicWidth: headerDyanmicWidth })) : ("-") }));
|
|
33
33
|
};
|
|
34
34
|
exports.SearchFilterRow = SearchFilterRow;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SmartGrid.d.ts","sourceRoot":"","sources":["../../src/SmartGrid/SmartGrid.tsx"],"names":[],"mappings":"AAIA,OAAO,
|
|
1
|
+
{"version":3,"file":"SmartGrid.d.ts","sourceRoot":"","sources":["../../src/SmartGrid/SmartGrid.tsx"],"names":[],"mappings":"AAIA,OAAO,KAMN,MAAM,OAAO,CAAC;AAcf,OAAO,KAAK,EACV,cAAc,EAIf,MAAM,SAAS,CAAC;AA6BjB,KAAK,aAAa,GAAG,KAAK,CAAC,yBAAyB,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,GAC3E,CAAC,CAAC,WAAW,EAAE,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,KAAK,GAAG,CAAC,OAAO,CAAC,CAAC;AAErE,eAAO,MAAM,SAAS,EAuTjB,aAAa,CAAC"}
|
|
@@ -7,7 +7,6 @@ const react_virtual_1 = require("@tanstack/react-virtual");
|
|
|
7
7
|
const react_1 = require("react");
|
|
8
8
|
const CircularLoader_1 = require("./Components/CircularLoader");
|
|
9
9
|
const DataNotFound_1 = require("./Components/DataNotFound");
|
|
10
|
-
const FilterStatusPanel_1 = require("./Components/FilterStatusPanel");
|
|
11
10
|
const HeaderCell_1 = require("./Components/HeaderCell");
|
|
12
11
|
const SearchFilterRow_1 = require("./Components/SearchFilterRow/SearchFilterRow");
|
|
13
12
|
const TableFooterComponent_1 = require("./Components/TableFooterComponent/TableFooterComponent");
|
|
@@ -30,7 +29,6 @@ const calculateGroupSummary = (groupRow, globalSummary, dynamicSummaryConfig) =>
|
|
|
30
29
|
exports.SmartGrid = (0, react_1.forwardRef)(({ defaultGrouping = [], emptyMessage = "No data found", enableCellSelection = false, exportActions = [], exportData = false, height = "calc(100vh - 130px)", loading = false, rowHeight = 38, rowSelection = false, totalCount = 0, ...props }, ref) => {
|
|
31
30
|
const theme = (0, material_1.useTheme)();
|
|
32
31
|
const { butterflyBlue } = theme.palette.app.color;
|
|
33
|
-
const [resetAllFilters, setResetAllFilters] = (0, react_1.useState)(false);
|
|
34
32
|
const containerRef = (0, react_1.useRef)(null);
|
|
35
33
|
const headerRef = (0, react_1.useRef)(null);
|
|
36
34
|
const { columns: propsColumns, data, dynamicSummaryConfig, summary, } = props;
|
|
@@ -114,17 +112,6 @@ exports.SmartGrid = (0, react_1.forwardRef)(({ defaultGrouping = [], emptyMessag
|
|
|
114
112
|
return hasFilterVariant || (hasFacetedFilter && !isCombinedFilter);
|
|
115
113
|
}));
|
|
116
114
|
}, [columns]);
|
|
117
|
-
const clearAllFilters = () => {
|
|
118
|
-
table.setColumnFilters([]);
|
|
119
|
-
table.resetColumnFilters();
|
|
120
|
-
getHeaderGroups()
|
|
121
|
-
.flatMap((group) => group.headers)
|
|
122
|
-
.forEach((header) => header.column.setFilterValue(undefined));
|
|
123
|
-
setResetAllFilters(true);
|
|
124
|
-
setTimeout(() => {
|
|
125
|
-
setResetAllFilters(false);
|
|
126
|
-
}, 100);
|
|
127
|
-
};
|
|
128
115
|
return ((0, jsx_runtime_1.jsxs)(CellSelectionContext_1.CellSelectionProvider, { value: {
|
|
129
116
|
...cellSelection,
|
|
130
117
|
enabled: enableCellSelection,
|
|
@@ -164,11 +151,11 @@ exports.SmartGrid = (0, react_1.forwardRef)(({ defaultGrouping = [], emptyMessag
|
|
|
164
151
|
zIndex: 10,
|
|
165
152
|
}, children: getHeaderGroups().map((headerGroup) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("tr", { children: [headerGroup.headers
|
|
166
153
|
.filter((h) => h.column.getIsPinned() === "left")
|
|
167
|
-
.map((header) => ((0, jsx_runtime_1.jsx)(HeaderCell_1.HeaderCell, { header: header, loading: loading
|
|
154
|
+
.map((header) => ((0, jsx_runtime_1.jsx)(HeaderCell_1.HeaderCell, { header: header, loading: loading }, header.id))), headerGroup.headers
|
|
168
155
|
.filter((h) => !h.column.getIsPinned())
|
|
169
|
-
.map((header) => ((0, jsx_runtime_1.jsx)(HeaderCell_1.HeaderCell, { header: header, loading: loading
|
|
156
|
+
.map((header) => ((0, jsx_runtime_1.jsx)(HeaderCell_1.HeaderCell, { header: header, loading: loading }, header.id))), headerGroup.headers
|
|
170
157
|
.filter((h) => h.column.getIsPinned() === "right")
|
|
171
|
-
.map((header) => ((0, jsx_runtime_1.jsx)(HeaderCell_1.HeaderCell, { header: header, loading: loading
|
|
158
|
+
.map((header) => ((0, jsx_runtime_1.jsx)(HeaderCell_1.HeaderCell, { header: header, loading: loading }, header.id)))] }, headerGroup.id), enableSecondRowFilter && !loading && ((0, jsx_runtime_1.jsx)("tr", { children: headerGroup.headers.map((header) => ((0, jsx_runtime_1.jsx)(SearchFilterRow_1.SearchFilterRow, { header: header }, header.id))) }))] }, headerGroup.id))) }), (0, jsx_runtime_1.jsx)("tbody", { style: {
|
|
172
159
|
filter: loading ? "blur(2px)" : "none",
|
|
173
160
|
height: `${rowVirtualizer.getTotalSize()}px`,
|
|
174
161
|
position: "relative",
|
|
@@ -180,6 +167,6 @@ exports.SmartGrid = (0, react_1.forwardRef)(({ defaultGrouping = [], emptyMessag
|
|
|
180
167
|
}
|
|
181
168
|
const { groupId, isSummary, row, summaryData } = enhancedRow;
|
|
182
169
|
return ((0, jsx_runtime_1.jsx)(TableRowComponent_1.TableRowComponent, { columnWidths: columnWidths, row: row, index: virtualRow.index, virtualRow: virtualRow, rowHeight: rowHeight, rowSelection: rowSelection, isSummaryRow: isSummary, summaryData: summaryData, exportData: exportData, exportActions: exportActions }, `table-row-${virtualRow.index}-${isSummary ? "summary" : "normal"}-${groupId}`));
|
|
183
|
-
}) }), !loading && summary && ((0, jsx_runtime_1.jsx)(TableFooterComponent_1.TableFooterComponent, { table: table, summary: summary }))] }) }), rowSelection && getSelectedRowModel().rows.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { style: { fontSize: "14px" }, children: ["Selected Rows: ", getSelectedRowModel().rows.length] })),
|
|
170
|
+
}) }), !loading && summary && ((0, jsx_runtime_1.jsx)(TableFooterComponent_1.TableFooterComponent, { table: table, summary: summary }))] }) }), rowSelection && getSelectedRowModel().rows.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { style: { fontSize: "14px" }, children: ["Selected Rows: ", getSelectedRowModel().rows.length] })), loading && (0, jsx_runtime_1.jsx)(CircularLoader_1.CircularLoader, {}), !rows.length && !loading && (0, jsx_runtime_1.jsx)(DataNotFound_1.DataNotFound, { message: emptyMessage })] })] }));
|
|
184
171
|
});
|
|
185
172
|
exports.SmartGrid.displayName = "SmartGrid";
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import type { Table } from "@tanstack/react-table";
|
|
2
|
-
type FilterStatusPanelProps<T> = {
|
|
3
|
-
clearAllFilters: () => void;
|
|
4
|
-
table: Table<T>;
|
|
5
|
-
};
|
|
6
|
-
export declare const FilterStatusPanel: <T>({ clearAllFilters, table, }: FilterStatusPanelProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
-
export {};
|
|
8
|
-
//# sourceMappingURL=FilterStatusPanel.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FilterStatusPanel.d.ts","sourceRoot":"","sources":["../../../src/SmartGrid/Components/FilterStatusPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAKnD,KAAK,sBAAsB,CAAC,CAAC,IAAI;IAC/B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,CAAC,EAAG,6BAGnC,sBAAsB,CAAC,CAAC,CAAC,4CA2I3B,CAAC"}
|
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.FilterStatusPanel = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const icons_material_1 = require("@mui/icons-material");
|
|
6
|
-
const material_1 = require("@mui/material");
|
|
7
|
-
const react_1 = require("react");
|
|
8
|
-
const FilterStatusPanel = ({ clearAllFilters, table, }) => {
|
|
9
|
-
const theme = (0, material_1.useTheme)();
|
|
10
|
-
const { brown, butterflyBlue, iron, slate } = theme.palette.app.color;
|
|
11
|
-
const { getHeaderGroups } = table;
|
|
12
|
-
return ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
13
|
-
backgroundColor: slate[600],
|
|
14
|
-
borderTop: `1px solid ${iron[700]}`,
|
|
15
|
-
display: "flex",
|
|
16
|
-
overflow: "auto",
|
|
17
|
-
width: "100%",
|
|
18
|
-
}, children: (() => {
|
|
19
|
-
// Helper function to extract filter values from different filter types
|
|
20
|
-
const extractFilterValues = (filter) => {
|
|
21
|
-
if (!filter) {
|
|
22
|
-
return { facets: [], search: [] };
|
|
23
|
-
}
|
|
24
|
-
const { facets: filterFacets, search: filterSearch } = filter;
|
|
25
|
-
// Handle array filters
|
|
26
|
-
if (Array.isArray(filter)) {
|
|
27
|
-
return { facets: filter.map(String), search: [] };
|
|
28
|
-
}
|
|
29
|
-
// Handle primitive filters (string/number)
|
|
30
|
-
if (typeof filter === "string" || typeof filter === "number") {
|
|
31
|
-
return {
|
|
32
|
-
facets: filter !== "" ? [String(filter)] : [],
|
|
33
|
-
search: [],
|
|
34
|
-
};
|
|
35
|
-
}
|
|
36
|
-
// Handle object filters with facets and search
|
|
37
|
-
if (typeof filter === "object" && filter != null) {
|
|
38
|
-
const facets = Array.isArray(filterFacets) ? filterFacets : [];
|
|
39
|
-
const search = filterSearch != null && filterSearch !== ""
|
|
40
|
-
? [String(filterSearch)]
|
|
41
|
-
: [];
|
|
42
|
-
return { facets, search };
|
|
43
|
-
}
|
|
44
|
-
return { facets: [], search: [] };
|
|
45
|
-
};
|
|
46
|
-
// Build applied filters list
|
|
47
|
-
const appliedFilters = getHeaderGroups()
|
|
48
|
-
.flatMap((group) => group.headers)
|
|
49
|
-
.map((header) => {
|
|
50
|
-
const filter = header.column.getFilterValue();
|
|
51
|
-
const { facets, search } = extractFilterValues(filter);
|
|
52
|
-
const hasValues = facets.length > 0 || search.length > 0;
|
|
53
|
-
return hasValues ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, { flexDirection: "row", gap: "3px", children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "caption", fontWeight: 600, children: [header.column.columnDef.header, ":"] }), facets.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", sx: { color: butterflyBlue[900] }, children: facets.join(", ") })), facets.length > 0 && search.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", children: "," })), search.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", sx: { color: brown[900] }, children: search.join(", ") }))] }, header.id)) : null;
|
|
54
|
-
})
|
|
55
|
-
.filter(Boolean);
|
|
56
|
-
// Don't render if no filters applied
|
|
57
|
-
if (!appliedFilters.length) {
|
|
58
|
-
return null;
|
|
59
|
-
}
|
|
60
|
-
return ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
61
|
-
alignItems: "center",
|
|
62
|
-
display: "flex",
|
|
63
|
-
gap: "5px",
|
|
64
|
-
padding: "5px 0px",
|
|
65
|
-
}, children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { sx: { borderRight: `2px solid ${iron[700]}`, padding: "0px 5px" }, onClick: clearAllFilters, children: (0, jsx_runtime_1.jsx)(icons_material_1.HighlightOffRounded, { fontSize: "small" }) }), (0, jsx_runtime_1.jsx)("div", { style: {
|
|
66
|
-
alignItems: "center",
|
|
67
|
-
display: "flex",
|
|
68
|
-
gap: "3px",
|
|
69
|
-
overflow: "hidden",
|
|
70
|
-
textOverflow: "ellipsis",
|
|
71
|
-
whiteSpace: "nowrap",
|
|
72
|
-
}, children: appliedFilters.map((filter, index) => (
|
|
73
|
-
// eslint-disable-next-line sonarjs/no-array-index-key
|
|
74
|
-
(0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [index > 0 && (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", children: "," }), filter] }, index))) })] }));
|
|
75
|
-
})() }));
|
|
76
|
-
};
|
|
77
|
-
exports.FilterStatusPanel = FilterStatusPanel;
|