@tap-payments/os-micro-frontend-shared 0.0.258-test.2 → 0.0.258-test.3
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/LICENSE +21 -21
- package/README.md +12 -12
- package/build/components/AccountDropdown/style.d.ts +3 -1
- package/build/components/AppServices/style.d.ts +3 -1
- package/build/components/DockButton/style.d.ts +3 -1
- package/build/components/FileUpload/style.d.ts +6 -2
- package/build/components/FileUploader/style.d.ts +3 -1
- package/build/components/Icon/type.d.ts +2 -1
- package/build/components/Menu/Menu.d.ts +1 -1
- package/build/components/Menu/Menu.js +14 -2
- package/build/components/MultiSelectWithSearch/style.d.ts +9 -3
- package/build/components/NestedDropdown/styles.d.ts +3 -1
- package/build/components/RFH/Inputs/SelectWithAccordion/style.d.ts +9 -3
- package/build/components/RangeCalender/RangeCalender.d.ts +1 -1
- package/build/components/RangeCalender/components/Timezone/Timezone.js +1 -1
- package/build/components/SelectDropdown/style.d.ts +3 -1
- package/build/components/SelectWithSearch/style.d.ts +9 -3
- package/build/components/StatusChip/style.d.ts +1 -0
- package/build/components/StatusChip/style.js +12 -6
- package/build/components/StatusChip/type.d.ts +1 -0
- package/build/components/StatusGroupChips/style.d.ts +1 -0
- package/build/components/StatusLabel/style.d.ts +3 -1
- package/build/components/TableCells/CustomCells/style.js +1 -1
- package/build/components/TableHeader/style.d.ts +3 -1
- package/build/components/Text/Text.d.ts +3 -4
- package/build/components/Timepicker/style.d.ts +6 -2
- package/build/components/VirtualTable/SheetView/SheetViewTableHeader.d.ts +5 -1
- package/build/components/VirtualTable/SheetView/SheetViewTableHeader.js +41 -14
- package/build/components/VirtualTable/SheetView/SheetViewVirtualTable.js +16 -5
- package/build/components/VirtualTable/SheetView/style.d.ts +1 -3
- package/build/components/VirtualTable/SheetView/style.js +1 -1
- package/build/components/VirtualTable/components/ColumnFilter/ColumnFilter.d.ts +8 -2
- package/build/components/VirtualTable/components/ColumnFilter/ColumnFilter.js +36 -24
- package/build/components/VirtualTable/components/TableFooter/style.d.ts +6 -2
- package/build/components/VirtualTable/components/TableHeader.js +38 -13
- package/build/components/VirtualTable/components/TableRow.js +3 -3
- package/build/components/VirtualTable/style.d.ts +1 -0
- package/build/components/VirtualTable/style.js +6 -1
- package/build/components/VirtualTable/utils/{getBorderStyle.d.ts → getSelectionStyles.d.ts} +6 -3
- package/build/components/VirtualTable/utils/{getBorderStyle.js → getSelectionStyles.js} +6 -6
- package/build/components/Widget/style.d.ts +3 -1
- package/build/components/WindowAppIcon/style.d.ts +3 -1
- package/build/constants/index.d.ts +1 -0
- package/build/constants/index.js +1 -0
- package/build/constants/payment.d.ts +5 -0
- package/build/constants/payment.js +38 -0
- package/build/constants/table/cell/chargeTableCellWidth.d.ts +2 -2
- package/build/constants/table/cell/chargeTableCellWidth.js +2 -2
- package/build/types/analytics.d.ts +2 -1
- package/build/types/analytics.js +1 -0
- package/package.json +10 -19
|
@@ -9,6 +9,7 @@ export declare const StyledStatusChip: import("@emotion/styled").StyledComponent
|
|
|
9
9
|
disabled?: boolean | undefined;
|
|
10
10
|
padding?: string | undefined;
|
|
11
11
|
unknownText?: string | undefined;
|
|
12
|
+
maxWidth?: string | undefined;
|
|
12
13
|
} & import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
13
14
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
14
15
|
}, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
export declare const Wrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
3
3
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
4
4
|
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
5
|
-
export declare const TextStyled: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<
|
|
5
|
+
export declare const TextStyled: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
|
|
6
|
+
ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
|
|
7
|
+
}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "textAlign" | "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
|
|
6
8
|
component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
7
9
|
} & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
@@ -63,7 +63,7 @@ export const CountBadge = styled('span')(({ theme }) => ({
|
|
|
63
63
|
fontSize: '9.782px',
|
|
64
64
|
fontWeight: 600,
|
|
65
65
|
}));
|
|
66
|
-
export const IdButtonContainer = styled('div')((
|
|
66
|
+
export const IdButtonContainer = styled('div')(() => ({
|
|
67
67
|
display: 'flex',
|
|
68
68
|
width: '24px',
|
|
69
69
|
height: '24px',
|
|
@@ -5,7 +5,9 @@ export declare const TitleContainer: import("@emotion/styled").StyledComponent<i
|
|
|
5
5
|
export declare const TableHeaderContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
6
6
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
7
7
|
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
8
|
-
export declare const TableHeaderTitle: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<
|
|
8
|
+
export declare const TableHeaderTitle: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
|
|
9
|
+
ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
|
|
10
|
+
}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "textAlign" | "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
|
|
9
11
|
component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
10
12
|
} & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
11
13
|
export declare const TableHeaderRow: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
import { type TypographyProps } from '@mui/material/Typography';
|
|
3
|
-
|
|
4
|
-
declare function Text<C extends ElementType = 'span'>(props: TextProps<C>): import("react/jsx-runtime").JSX.Element;
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { type TypographyProps as TextProps } from '@mui/material/Typography';
|
|
3
|
+
declare function Text(props: TextProps): import("react/jsx-runtime").JSX.Element;
|
|
5
4
|
declare const _default: import("react").MemoExoticComponent<typeof Text>;
|
|
6
5
|
export default _default;
|
|
@@ -2,7 +2,9 @@
|
|
|
2
2
|
export declare const Wrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
3
3
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
4
4
|
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
5
|
-
export declare const Button: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<
|
|
5
|
+
export declare const Button: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
|
|
6
|
+
ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
|
|
7
|
+
}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "textAlign" | "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
|
|
6
8
|
component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
7
9
|
} & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
|
|
8
10
|
open: boolean;
|
|
@@ -10,7 +12,9 @@ export declare const Button: import("@emotion/styled").StyledComponent<import("@
|
|
|
10
12
|
export declare const Arrow: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
11
13
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
12
14
|
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
13
|
-
export declare const Period: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<
|
|
15
|
+
export declare const Period: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
|
|
16
|
+
ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
|
|
17
|
+
}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "textAlign" | "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
|
|
14
18
|
component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
15
19
|
} & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
|
|
16
20
|
selected: boolean;
|
|
@@ -13,7 +13,11 @@ interface SheetViewTableHeaderProps {
|
|
|
13
13
|
lastColumnId?: string | null;
|
|
14
14
|
selectedColumn?: string | null;
|
|
15
15
|
onColumnClick?: (columnId: string, event: React.MouseEvent) => void;
|
|
16
|
+
openFilterColumnId?: string | null;
|
|
17
|
+
filterAnchorEl?: HTMLElement | null;
|
|
18
|
+
onFilterOpen?: (columnId: string, anchorEl: HTMLElement) => void;
|
|
19
|
+
onFilterClose?: () => void;
|
|
16
20
|
}
|
|
17
|
-
declare function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, }: SheetViewTableHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
declare function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, openFilterColumnId: externalOpenFilterColumnId, filterAnchorEl: externalFilterAnchorEl, onFilterOpen: externalOnFilterOpen, onFilterClose: externalOnFilterClose, }: SheetViewTableHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
18
22
|
declare const _default: import("react").MemoExoticComponent<typeof SheetViewTableHeader>;
|
|
19
23
|
export default _default;
|
|
@@ -6,22 +6,44 @@ import { columnIcon, pinIcon, sortAzIcon, sortZaIcon, unpinIcon } from '../../..
|
|
|
6
6
|
import ColumnFilter from '../components/ColumnFilter';
|
|
7
7
|
import { StyledCell } from '../style';
|
|
8
8
|
import { ActionIcon, ColumnIcon, PinIconContainer, StyledHeader, StyledMUITableRow, HeaderText } from './style';
|
|
9
|
-
function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns = [], onColumnPin, isPinnable = false, lastColumnId, selectedColumn = null, onColumnClick, }) {
|
|
10
|
-
const [
|
|
11
|
-
const
|
|
9
|
+
function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns = [], onColumnPin, isPinnable = false, lastColumnId, selectedColumn = null, onColumnClick, openFilterColumnId: externalOpenFilterColumnId, filterAnchorEl: externalFilterAnchorEl, onFilterOpen: externalOnFilterOpen, onFilterClose: externalOnFilterClose, }) {
|
|
10
|
+
const [sortAnchorEl, setSortAnchorEl] = useState(null);
|
|
11
|
+
const sortOpen = Boolean(sortAnchorEl);
|
|
12
|
+
const [internalOpenFilterColumnId, setInternalOpenFilterColumnId] = useState(null);
|
|
13
|
+
const [internalFilterAnchorEl, setInternalFilterAnchorEl] = useState(null);
|
|
14
|
+
const openFilterColumnId = externalOpenFilterColumnId !== undefined ? externalOpenFilterColumnId : internalOpenFilterColumnId;
|
|
15
|
+
const filterAnchorEl = externalFilterAnchorEl !== undefined ? externalFilterAnchorEl : internalFilterAnchorEl;
|
|
12
16
|
const theme = useTheme();
|
|
13
|
-
const
|
|
14
|
-
|
|
17
|
+
const handleSortClick = (event) => {
|
|
18
|
+
setSortAnchorEl(event.currentTarget);
|
|
15
19
|
};
|
|
16
|
-
const
|
|
17
|
-
|
|
20
|
+
const handleSortClose = () => {
|
|
21
|
+
setSortAnchorEl(null);
|
|
22
|
+
};
|
|
23
|
+
const handleFilterOpen = (columnId) => (event) => {
|
|
24
|
+
if (externalOnFilterOpen) {
|
|
25
|
+
externalOnFilterOpen(columnId, event.currentTarget);
|
|
26
|
+
}
|
|
27
|
+
else {
|
|
28
|
+
setInternalOpenFilterColumnId(columnId);
|
|
29
|
+
setInternalFilterAnchorEl(event.currentTarget);
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
const handleFilterClose = () => {
|
|
33
|
+
if (externalOnFilterClose) {
|
|
34
|
+
externalOnFilterClose();
|
|
35
|
+
}
|
|
36
|
+
else {
|
|
37
|
+
setInternalOpenFilterColumnId(null);
|
|
38
|
+
setInternalFilterAnchorEl(null);
|
|
39
|
+
}
|
|
18
40
|
};
|
|
19
41
|
const handleSortingOption = (columnId, order) => {
|
|
20
42
|
if (columnId) {
|
|
21
43
|
onColumnSort === null || onColumnSort === void 0 ? void 0 : onColumnSort({
|
|
22
44
|
[columnId]: order,
|
|
23
45
|
});
|
|
24
|
-
|
|
46
|
+
handleSortClose();
|
|
25
47
|
}
|
|
26
48
|
};
|
|
27
49
|
const handlePinClick = (columnId) => {
|
|
@@ -45,27 +67,32 @@ function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort
|
|
|
45
67
|
const isPinned = pinnedColumns.includes(id);
|
|
46
68
|
const isDefaultPinned = !!column.isDefaultPinned;
|
|
47
69
|
const isSelected = selectedColumn === id;
|
|
48
|
-
return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, "data-column-pinned": isPinned, isFirst: isFirst, isLast: isLast, isSheetView: true, onClick: (event) => onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event), sx: Object.assign({ display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: column.width, textAlign: align, overflow: 'unset', cursor: 'pointer', boxSizing: 'border-box', border: isSelected ? '
|
|
70
|
+
return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, "data-column-pinned": isPinned, isFirst: isFirst, isLast: isLast, isSheetView: true, onClick: (event) => onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event), sx: Object.assign({ display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: column.width, textAlign: align, overflow: 'unset', cursor: 'pointer', boxSizing: 'border-box', border: isSelected ? '2px solid #1F88D0' : '1px solid #F2F2F2', backgroundColor: isSelected ? '#F2F2F2' : '#FCFCFC', height: isSelected ? '100%' : 'auto', minHeight: isSelected ? '28px' : 'auto' }, headerStyle) }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "SheetViewTableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && _jsx(HeaderText, Object.assign({ "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell_header_text" }, { children: header })) }))), filter && (_jsx(ColumnFilter, Object.assign({}, filter, { externalAnchorEl: openFilterColumnId === id ? filterAnchorEl : null, externalOpen: openFilterColumnId === id, onExternalOpen: handleFilterOpen(id), onExternalClose: handleFilterClose }))), sortable && (_jsx(ColumnIcon, { onClick: sortable
|
|
71
|
+
? (event) => {
|
|
72
|
+
event.stopPropagation();
|
|
73
|
+
handleSortClick(event);
|
|
74
|
+
}
|
|
75
|
+
: undefined, src: columnIcon, alt: "column-icon", "data-id": id })), isPinnable && pinnable && !isDefaultPinned && !isLast && (_jsx(PinIconContainer, Object.assign({ onClick: (event) => {
|
|
49
76
|
event.stopPropagation();
|
|
50
77
|
handlePinClick(id);
|
|
51
78
|
}, title: isPinned ? 'Unpin column' : 'Pin column' }, { children: _jsx("img", { src: isPinned ? unpinIcon : pinIcon, alt: "pin-icon" }) })))] }), `${id}-${colIndex}`));
|
|
52
|
-
}) })), _jsx(Dropdown, { open:
|
|
79
|
+
}) })), _jsx(Dropdown, { open: sortOpen, onClose: handleSortClose, anchorEl: sortAnchorEl, menuItems: [
|
|
53
80
|
{
|
|
54
81
|
label: 'Sort A-Z',
|
|
55
82
|
name: 'asc',
|
|
56
83
|
icon: _jsx(ActionIcon, { src: sortAzIcon, alt: "sort-icon" }),
|
|
57
|
-
selected: (columnsSorting === null || columnsSorting === void 0 ? void 0 : columnsSorting[(
|
|
84
|
+
selected: (columnsSorting === null || columnsSorting === void 0 ? void 0 : columnsSorting[(sortAnchorEl === null || sortAnchorEl === void 0 ? void 0 : sortAnchorEl.dataset.id) || '']) === 'asc',
|
|
58
85
|
onClick: () => {
|
|
59
|
-
handleSortingOption(
|
|
86
|
+
handleSortingOption(sortAnchorEl === null || sortAnchorEl === void 0 ? void 0 : sortAnchorEl.dataset.id, 'asc');
|
|
60
87
|
},
|
|
61
88
|
},
|
|
62
89
|
{
|
|
63
90
|
label: 'Sort Z-A',
|
|
64
91
|
name: 'desc',
|
|
65
92
|
icon: _jsx(ActionIcon, { src: sortZaIcon, alt: "sort-icon" }),
|
|
66
|
-
selected: (columnsSorting === null || columnsSorting === void 0 ? void 0 : columnsSorting[(
|
|
93
|
+
selected: (columnsSorting === null || columnsSorting === void 0 ? void 0 : columnsSorting[(sortAnchorEl === null || sortAnchorEl === void 0 ? void 0 : sortAnchorEl.dataset.id) || '']) === 'desc',
|
|
67
94
|
onClick: () => {
|
|
68
|
-
handleSortingOption(
|
|
95
|
+
handleSortingOption(sortAnchorEl === null || sortAnchorEl === void 0 ? void 0 : sortAnchorEl.dataset.id, 'desc');
|
|
69
96
|
},
|
|
70
97
|
},
|
|
71
98
|
] })] })));
|
|
@@ -50,20 +50,31 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
|
|
|
50
50
|
const { pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef, handleScroll } = useSynchronizedScroll();
|
|
51
51
|
const [selectedCell, setSelectedCell] = useState(null);
|
|
52
52
|
const [selectedColumn, setSelectedColumn] = useState(null);
|
|
53
|
+
const [openFilterColumnId, setOpenFilterColumnId] = useState(null);
|
|
54
|
+
const [filterAnchorEl, setFilterAnchorEl] = useState(null);
|
|
53
55
|
const handleCellClick = useCallback((rowIndex, columnId, event) => {
|
|
54
56
|
event.stopPropagation();
|
|
55
57
|
const cellKey = `${rowIndex}-${columnId}`;
|
|
56
58
|
setSelectedCell((prev) => (prev === cellKey ? null : cellKey));
|
|
57
59
|
setSelectedColumn(null);
|
|
58
60
|
}, []);
|
|
61
|
+
const handleFilterOpen = useCallback((columnId, anchorEl) => {
|
|
62
|
+
setOpenFilterColumnId(columnId);
|
|
63
|
+
setFilterAnchorEl(anchorEl);
|
|
64
|
+
}, []);
|
|
65
|
+
const handleFilterClose = useCallback(() => {
|
|
66
|
+
setOpenFilterColumnId(null);
|
|
67
|
+
setFilterAnchorEl(null);
|
|
68
|
+
}, []);
|
|
59
69
|
const handleColumnClick = useCallback((columnId, event) => {
|
|
60
70
|
event.stopPropagation();
|
|
61
|
-
|
|
62
|
-
|
|
71
|
+
const column = orderedColumns.find((col) => col.id === columnId);
|
|
72
|
+
if (column === null || column === void 0 ? void 0 : column.filter) {
|
|
73
|
+
handleFilterOpen(columnId, event.currentTarget);
|
|
63
74
|
}
|
|
64
75
|
setSelectedColumn((prev) => (prev === columnId ? null : columnId));
|
|
65
76
|
setSelectedCell(null);
|
|
66
|
-
}, []);
|
|
77
|
+
}, [orderedColumns, handleFilterOpen]);
|
|
67
78
|
const onPointerDown = (e) => {
|
|
68
79
|
dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
|
|
69
80
|
};
|
|
@@ -131,13 +142,13 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
|
|
|
131
142
|
const containerKey = position === 'start' ? 'pinnedStart' : 'pinnedEnd';
|
|
132
143
|
if (columnsData.length === 0)
|
|
133
144
|
return null;
|
|
134
|
-
return (_jsx(Wrapper, { children: _jsxs(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: [showHeader && (_jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_PinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: columnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: pinnedColumnsList, onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
|
|
145
|
+
return (_jsx(Wrapper, { children: _jsxs(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: [showHeader && (_jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_PinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: columnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: pinnedColumnsList, onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick, openFilterColumnId: openFilterColumnId, filterAnchorEl: filterAnchorEl, onFilterOpen: handleFilterOpen, onFilterClose: handleFilterClose })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
|
|
135
146
|
width: '100%',
|
|
136
147
|
minWidth: 'fit-content',
|
|
137
148
|
overflowX: 'hidden',
|
|
138
149
|
} }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_PinnedStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(columnsData, containerKey, true, columnsWidth) })) }))] })) }));
|
|
139
150
|
};
|
|
140
|
-
return (_jsxs(_Fragment, { children: [_jsxs(TableContainer, { children: [showNoDataView ? (_jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: _jsx(TableWrapper, Object.assign({ isSheetView: true, "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: tableBodyStyles }, { children: _jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }) })) }))) : (_jsxs(SheetViewVirtualTableWrapper, { children: [renderPinnedColumn('start', pinnedStartColumnsData, pinnedStartColumnsWidth, pinnedStartColumns), _jsx(MainTableWrapper, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0 }, { children: _jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView, scrollable: true }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_UnpinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [...pinnedStartColumns, ...pinnedEndColumns], onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
|
|
151
|
+
return (_jsxs(_Fragment, { children: [_jsxs(TableContainer, { children: [showNoDataView ? (_jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: _jsx(TableWrapper, Object.assign({ isSheetView: true, "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: tableBodyStyles }, { children: _jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }) })) }))) : (_jsxs(SheetViewVirtualTableWrapper, { children: [renderPinnedColumn('start', pinnedStartColumnsData, pinnedStartColumnsWidth, pinnedStartColumns), _jsx(MainTableWrapper, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0 }, { children: _jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView, scrollable: true }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_UnpinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [...pinnedStartColumns, ...pinnedEndColumns], onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick, openFilterColumnId: openFilterColumnId, filterAnchorEl: filterAnchorEl, onFilterOpen: handleFilterOpen, onFilterClose: handleFilterClose }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
|
|
141
152
|
width: '100%',
|
|
142
153
|
minWidth: 'fit-content',
|
|
143
154
|
} }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_ScrollableStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(unpinnedColumnsData, 'scrollable', false) })) }))] })) })) })), renderPinnedColumn('end', pinnedEndColumnsData, pinnedEndColumnsWidth, [...pinnedStartColumns, ...pinnedEndColumns])] })), !showNoDataView && areTotalRowsNotFillingHeight && !isFetchingNextPage && (_jsx(TableLastItem, { height: (itemsCount + 1) * TABLE_ROW_HEIGHT, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, "data-testid": "SheetViewVirtualTable_TableLastItem" }))] }), _jsx(TableFooter, Object.assign({ "data-testid": "SheetViewVirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
|
|
@@ -2,9 +2,7 @@
|
|
|
2
2
|
export declare const ActionIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
3
3
|
export declare const ColumnIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
4
4
|
export declare const HeaderText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
5
|
-
export declare const PinIconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme
|
|
6
|
-
isPinned: boolean;
|
|
7
|
-
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
5
|
+
export declare const PinIconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
8
6
|
interface StyledHeaderProps {
|
|
9
7
|
showBackDrop: boolean;
|
|
10
8
|
}
|
|
@@ -18,7 +18,7 @@ export const HeaderText = styled('span')(({ theme }) => ({
|
|
|
18
18
|
fontSize: '12px',
|
|
19
19
|
fontWeight: 600,
|
|
20
20
|
}));
|
|
21
|
-
export const PinIconContainer = styled('div')((
|
|
21
|
+
export const PinIconContainer = styled('div')(() => ({
|
|
22
22
|
width: '16px',
|
|
23
23
|
height: 'auto',
|
|
24
24
|
cursor: 'pointer',
|
|
@@ -1,5 +1,11 @@
|
|
|
1
|
-
|
|
1
|
+
import { MouseEvent } from 'react';
|
|
2
2
|
import { IColumnFilter } from '../../../../types/index.js';
|
|
3
|
-
|
|
3
|
+
type ColumnFilterProps = IColumnFilter & {
|
|
4
|
+
externalAnchorEl?: HTMLElement | null;
|
|
5
|
+
externalOpen?: boolean;
|
|
6
|
+
onExternalOpen?: (event: MouseEvent<HTMLElement>) => void;
|
|
7
|
+
onExternalClose?: () => void;
|
|
8
|
+
};
|
|
9
|
+
declare function ColumnFilter(props: ColumnFilterProps): import("react/jsx-runtime").JSX.Element;
|
|
4
10
|
declare const _default: import("react").MemoExoticComponent<typeof ColumnFilter>;
|
|
5
11
|
export default _default;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { memo, useMemo, useState } from 'react';
|
|
2
|
+
import { memo, useMemo, useState, useCallback } from 'react';
|
|
3
3
|
import Box from '@mui/material/Box';
|
|
4
4
|
import ClickAwayListener from '@mui/material/ClickAwayListener';
|
|
5
5
|
import Popper from '@mui/material/Popper';
|
|
@@ -8,50 +8,62 @@ import Inputs from './Inputs';
|
|
|
8
8
|
import List from './List';
|
|
9
9
|
import { FilterWrapper } from './style';
|
|
10
10
|
import CustomBackdrop from '../../../CustomBackdrop';
|
|
11
|
-
function ColumnFilter(
|
|
12
|
-
const
|
|
11
|
+
function ColumnFilter(props) {
|
|
12
|
+
const { externalAnchorEl, externalOpen, onExternalOpen, onExternalClose } = props;
|
|
13
|
+
const [internalAnchorEl, setInternalAnchorEl] = useState(null);
|
|
14
|
+
const anchorEl = externalAnchorEl !== undefined ? externalAnchorEl : internalAnchorEl;
|
|
15
|
+
const open = externalOpen !== undefined ? externalOpen : Boolean(internalAnchorEl);
|
|
13
16
|
const openDropdown = (event) => {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
17
|
+
if (onExternalOpen) {
|
|
18
|
+
onExternalOpen(event);
|
|
19
|
+
}
|
|
20
|
+
else {
|
|
21
|
+
setInternalAnchorEl(event.currentTarget);
|
|
22
|
+
}
|
|
18
23
|
};
|
|
19
|
-
const
|
|
24
|
+
const onCloseDropdown = useCallback(() => {
|
|
25
|
+
if (onExternalClose) {
|
|
26
|
+
onExternalClose();
|
|
27
|
+
}
|
|
28
|
+
else {
|
|
29
|
+
setInternalAnchorEl(null);
|
|
30
|
+
}
|
|
31
|
+
}, [onExternalClose]);
|
|
32
|
+
const filterData = useMemo(() => { var _a; return ((_a = props === null || props === void 0 ? void 0 : props.options) === null || _a === void 0 ? void 0 : _a.reduce((acc, { apiKey }) => { var _a; return (Object.assign(Object.assign({}, acc), { [apiKey]: (_a = props === null || props === void 0 ? void 0 : props.data) === null || _a === void 0 ? void 0 : _a[apiKey] })); }, {})) || {}; }, [props]);
|
|
20
33
|
const listFilterData = useMemo(() => {
|
|
21
34
|
var _a;
|
|
22
|
-
const listFilter =
|
|
35
|
+
const listFilter = props;
|
|
23
36
|
const rawData = (_a = listFilter === null || listFilter === void 0 ? void 0 : listFilter.data) === null || _a === void 0 ? void 0 : _a[listFilter.apiKey];
|
|
24
37
|
return Array.isArray(rawData) ? rawData : [];
|
|
25
|
-
}, [
|
|
38
|
+
}, [props]);
|
|
26
39
|
const showClearIcon = useMemo(() => Object.values(filterData || {}).some((value) => {
|
|
27
40
|
if (typeof value === 'string' || Array.isArray(value))
|
|
28
41
|
return value.length > 0;
|
|
29
42
|
return Boolean(value);
|
|
30
43
|
}) || listFilterData.length > 0, [filterData, listFilterData]);
|
|
31
|
-
const open = Boolean(anchorEl);
|
|
32
44
|
const filterApiKeys = useMemo(() => {
|
|
33
45
|
var _a;
|
|
34
|
-
if (
|
|
35
|
-
return [
|
|
46
|
+
if (props.type === 'list') {
|
|
47
|
+
return [props.apiKey];
|
|
36
48
|
}
|
|
37
|
-
return (_a = ((
|
|
38
|
-
}, [
|
|
49
|
+
return (_a = ((props === null || props === void 0 ? void 0 : props.options) || [])) === null || _a === void 0 ? void 0 : _a.map(({ apiKey }) => apiKey);
|
|
50
|
+
}, [props]);
|
|
39
51
|
const renderFilter = useMemo(() => {
|
|
40
|
-
if (
|
|
41
|
-
return _jsx(List, { onCloseDropdown: onCloseDropdown, filter:
|
|
42
|
-
if (
|
|
43
|
-
return _jsx(Inputs, { onCloseDropdown: onCloseDropdown, filter:
|
|
44
|
-
if (
|
|
52
|
+
if (props.type === 'list')
|
|
53
|
+
return _jsx(List, { onCloseDropdown: onCloseDropdown, filter: props });
|
|
54
|
+
if (props.type === 'inputs')
|
|
55
|
+
return _jsx(Inputs, { onCloseDropdown: onCloseDropdown, filter: props });
|
|
56
|
+
if (props.type === 'custom') {
|
|
45
57
|
const componentSharedProps = {
|
|
46
58
|
anchorEl,
|
|
47
|
-
setAnchorEl,
|
|
59
|
+
setAnchorEl: externalAnchorEl !== undefined ? undefined : setInternalAnchorEl,
|
|
48
60
|
};
|
|
49
|
-
return
|
|
61
|
+
return props.render(componentSharedProps);
|
|
50
62
|
}
|
|
51
63
|
return null;
|
|
52
|
-
}, [
|
|
64
|
+
}, [props, anchorEl, externalAnchorEl, setInternalAnchorEl, onCloseDropdown]);
|
|
53
65
|
return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onCloseDropdown }, { children: _jsxs(Box, Object.assign({ component: "section", "data-testid": "ColumnFilter", sx: { position: 'relative', display: 'flex', alignItems: 'center' } }, { children: [showClearIcon ? (_jsxs(FilterWrapper, { children: [_jsx(Box, { component: "img", "data-testid": "ColumnFilter_whiteFilterIcon", src: whiteFilterIcon, alt: "filter-icon", sx: { marginInlineEnd: '2px', height: 6 }, onClick: openDropdown }), _jsx(Box, { component: "img", "data-testid": "ColumnFilter_closeIcon", src: closeIcon, alt: "close-icon", onClick: () => {
|
|
54
|
-
|
|
66
|
+
props.onClear(filterApiKeys);
|
|
55
67
|
} })] })) : (_jsx(Box, { component: "img", "data-testid": "ColumnFilter_columnIcon", src: columnIcon, alt: "column-icon", sx: { cursor: 'pointer', marginTop: '2px' }, onClick: openDropdown })), open && _jsx(CustomBackdrop, { onClick: onCloseDropdown }), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start", sx: {
|
|
56
68
|
zIndex: 9999,
|
|
57
69
|
} }, { children: renderFilter }))] })) })));
|
|
@@ -13,10 +13,14 @@ export declare const EngravingLine: import("@emotion/styled").StyledComponent<im
|
|
|
13
13
|
export declare const Label: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
14
14
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
15
15
|
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
16
|
-
export declare const Title: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<
|
|
16
|
+
export declare const Title: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
|
|
17
|
+
ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
|
|
18
|
+
}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "textAlign" | "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
|
|
17
19
|
component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
18
20
|
} & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
19
|
-
export declare const ValueWrapper: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<
|
|
21
|
+
export declare const ValueWrapper: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
|
|
22
|
+
ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
|
|
23
|
+
}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "textAlign" | "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
|
|
20
24
|
component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
21
25
|
} & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
22
26
|
export declare const Value: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|