bananas-commerce-admin 0.20.0 → 0.20.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/components/Table/TableHeading.js +42 -5
- package/dist/esm/components/Table/TableHeading.js.map +1 -1
- package/dist/esm/extensions/member/pages/member/list.js +10 -9
- package/dist/esm/extensions/member/pages/member/list.js.map +1 -1
- package/dist/types/components/Table/TableHeading.d.ts +2 -0
- package/package.json +1 -1
- package/src/components/Table/TableHeading.tsx +90 -6
- package/src/extensions/member/pages/member/list.tsx +36 -34
|
@@ -1,10 +1,47 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore";
|
|
3
|
+
import { Box, ButtonBase, Popover, Stack, TableCell, Typography, } from "@mui/material";
|
|
4
|
+
export const TableHeading = ({ children, typographyProps, popover, popoverLabel, ...props }) => {
|
|
5
|
+
const [anchorEl, setAnchorEl] = useState(null);
|
|
6
|
+
const headingText = (React.createElement(Typography, { ...typographyProps, sx: {
|
|
5
7
|
fontWeight: "600",
|
|
6
8
|
fontVariationSettings: { sm: '"wdth" 100', xs: '"wdth" 75' },
|
|
7
9
|
...typographyProps?.sx,
|
|
8
|
-
}, variant: "body2" }, children))
|
|
10
|
+
}, variant: "body2" }, children));
|
|
11
|
+
return (React.createElement(TableCell, { ...props }, popover != null ? (React.createElement(React.Fragment, null,
|
|
12
|
+
React.createElement(ButtonBase, { sx: {
|
|
13
|
+
position: "relative",
|
|
14
|
+
borderRadius: 1,
|
|
15
|
+
zIndex: 0,
|
|
16
|
+
"&::before": {
|
|
17
|
+
content: '""',
|
|
18
|
+
position: "absolute",
|
|
19
|
+
inset: "-2px -4px",
|
|
20
|
+
borderRadius: 1,
|
|
21
|
+
backgroundColor: "action.hover",
|
|
22
|
+
opacity: 0,
|
|
23
|
+
transition: (theme) => theme.transitions.create("opacity", {
|
|
24
|
+
duration: theme.transitions.duration.shortest,
|
|
25
|
+
}),
|
|
26
|
+
zIndex: -1,
|
|
27
|
+
pointerEvents: "none",
|
|
28
|
+
},
|
|
29
|
+
"&:hover::before, &:focus-visible::before": { opacity: 1 },
|
|
30
|
+
"&:hover .popover-label, &:focus-visible .popover-label": {
|
|
31
|
+
backgroundColor: "transparent",
|
|
32
|
+
},
|
|
33
|
+
}, onClick: (e) => setAnchorEl(e.currentTarget) },
|
|
34
|
+
React.createElement(Stack, { alignItems: "center", direction: "row", gap: 0.5 },
|
|
35
|
+
headingText,
|
|
36
|
+
React.createElement(UnfoldMoreIcon, { sx: { color: "text.secondary", width: 16, height: 16 } })),
|
|
37
|
+
popoverLabel != null ? (React.createElement(Typography, { className: "popover-label", color: "text.secondary", sx: {
|
|
38
|
+
ml: 0.25,
|
|
39
|
+
px: 0.5,
|
|
40
|
+
borderRadius: 1,
|
|
41
|
+
backgroundColor: "action.hover",
|
|
42
|
+
}, variant: "body2" }, popoverLabel)) : null),
|
|
43
|
+
React.createElement(Popover, { anchorEl: anchorEl, anchorOrigin: { horizontal: "center", vertical: "bottom" }, open: Boolean(anchorEl), transformOrigin: { horizontal: "center", vertical: "top" }, onClose: () => setAnchorEl(null) },
|
|
44
|
+
React.createElement(Box, { p: 2 }, popover)))) : (headingText)));
|
|
45
|
+
};
|
|
9
46
|
export default TableHeading;
|
|
10
47
|
//# sourceMappingURL=TableHeading.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHeading.js","sourceRoot":"","sources":["../../../../src/components/Table/TableHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"TableHeading.js","sourceRoot":"","sources":["../../../../src/components/Table/TableHeading.tsx"],"names":[],"mappings":"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"}
|
|
@@ -30,6 +30,7 @@ const MemberListPage = ({ data }) => {
|
|
|
30
30
|
const [customerTypeFilter, setCustomerTypeFilter] = React.useState(defaultCustomerType === CustomerType.PRIVATE || defaultCustomerType === CustomerType.COMPANY
|
|
31
31
|
? defaultCustomerType
|
|
32
32
|
: "ALL");
|
|
33
|
+
const customerTypeFilterCount = customerTypeFilter === "ALL" ? undefined : 1;
|
|
33
34
|
const navigateWithFilters = React.useCallback((searchInput, customerType) => {
|
|
34
35
|
const query = {};
|
|
35
36
|
if (searchInput !== "") {
|
|
@@ -52,15 +53,10 @@ const MemberListPage = ({ data }) => {
|
|
|
52
53
|
return (React.createElement(Page, null,
|
|
53
54
|
React.createElement(Header, null,
|
|
54
55
|
React.createElement(TitleBar, { title: t("Members") },
|
|
55
|
-
React.createElement(
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
React.createElement(ToggleButton, { size: "small", value: CustomerType.COMPANY }, t("Company"))),
|
|
60
|
-
React.createElement(SearchBar, { defaultValue: defaultSearch, placeholder: t("Search members…"), onChange: (input) => setSearchValue(input), onSubmit: (input) => {
|
|
61
|
-
setSearchValue(input);
|
|
62
|
-
navigateWithFilters(input, customerTypeFilter);
|
|
63
|
-
} })))),
|
|
56
|
+
React.createElement(SearchBar, { defaultValue: defaultSearch, placeholder: t("Search members…"), onChange: (input) => setSearchValue(input), onSubmit: (input) => {
|
|
57
|
+
setSearchValue(input);
|
|
58
|
+
navigateWithFilters(input, customerTypeFilter);
|
|
59
|
+
} }))),
|
|
64
60
|
React.createElement(ContentWrapperWithActionBar, null,
|
|
65
61
|
React.createElement(Content, { layout: "fullWidth" },
|
|
66
62
|
React.createElement(TableCard, null,
|
|
@@ -71,6 +67,10 @@ const MemberListPage = ({ data }) => {
|
|
|
71
67
|
React.createElement(TableHeading, null, t("Phone")),
|
|
72
68
|
React.createElement(TableHeading, null, t("Email")),
|
|
73
69
|
React.createElement(TableHeading, null, t("Site")),
|
|
70
|
+
React.createElement(TableHeading, { popover: React.createElement(ToggleButtonGroup, { exclusive: true, "aria-label": "Customer type filter", color: "primary", size: "small", value: customerTypeFilter, onChange: handleCustomerTypeChange },
|
|
71
|
+
React.createElement(ToggleButton, { size: "small", value: "ALL" }, t("All")),
|
|
72
|
+
React.createElement(ToggleButton, { size: "small", value: CustomerType.PRIVATE }, t("Private")),
|
|
73
|
+
React.createElement(ToggleButton, { size: "small", value: CustomerType.COMPANY }, t("Company"))), popoverLabel: customerTypeFilterCount }, t("Type")),
|
|
74
74
|
React.createElement(TableHeading, { width: 60 })),
|
|
75
75
|
React.createElement(TableBody, null, data?.results.map((member) => (React.createElement(NavigatingTableRow, { key: member.id, route: "member.member:detail", routeParams: { id: member.id } },
|
|
76
76
|
React.createElement(TableCell, null, member.number),
|
|
@@ -81,6 +81,7 @@ const MemberListPage = ({ data }) => {
|
|
|
81
81
|
React.createElement(TableCell, null, member.phone ?? "—"),
|
|
82
82
|
React.createElement(TableCell, null, member.email),
|
|
83
83
|
React.createElement(TableCell, null, member.site_code),
|
|
84
|
+
React.createElement(TableCell, null, member.customer_type),
|
|
84
85
|
React.createElement(TableCell, null, !member.is_valid_customer ? (React.createElement(WarningAmberOutlinedIcon, { color: "warning", fontSize: "small" })) : null)))))))),
|
|
85
86
|
hasPermission(user, "member.add_member") && (React.createElement(ActionBar, null,
|
|
86
87
|
React.createElement(Button, { color: "primary", variant: "contained", onClick: () => navigate("member.member:create") }, t("Create member")))))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../../../../src/extensions/member/pages/member/list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,wBAAwB,MAAM,0CAA0C,CAAC;AAChF,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAE/F,OAAO,SAAS,MAAM,kCAAkC,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AACnD,OAAO,SAAS,MAAM,kCAAkC,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,SAAS,MAAM,wCAAwC,CAAC;AAC/D,OAAO,YAAY,MAAM,2CAA2C,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAC3E,OAAO,SAAS,MAAM,kCAAkC,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,OAAO,EAAE,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AACtF,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAE3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,YAAY,EAAc,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAIhE,MAAM,cAAc,GAA2C,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC1E,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IACxB,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,CAAC;IACjC,MAAM,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,CAAC;IAC3B,MAAM,aAAa,GAAG,IAAI,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACtF,MAAM,mBAAmB,GAAG,IAAI,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IAC7F,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;IACpE,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAChE,mBAAmB,KAAK,YAAY,CAAC,OAAO,IAAI,mBAAmB,KAAK,YAAY,CAAC,OAAO;QAC1F,CAAC,CAAC,mBAAmB;QACrB,CAAC,CAAC,KAAK,CACV,CAAC;
|
|
1
|
+
{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../../../../src/extensions/member/pages/member/list.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,6 +2,8 @@ import React, { PropsWithChildren } from "react";
|
|
|
2
2
|
import { TableCellProps, TypographyProps } from "@mui/material";
|
|
3
3
|
export interface TableHeadingProps extends PropsWithChildren<TableCellProps> {
|
|
4
4
|
typographyProps?: TypographyProps;
|
|
5
|
+
popover?: React.ReactNode;
|
|
6
|
+
popoverLabel?: React.ReactNode;
|
|
5
7
|
}
|
|
6
8
|
export declare const TableHeading: React.FC<TableHeadingProps>;
|
|
7
9
|
export default TableHeading;
|
package/package.json
CHANGED
|
@@ -1,17 +1,33 @@
|
|
|
1
|
-
import React, { PropsWithChildren } from "react";
|
|
1
|
+
import React, { PropsWithChildren, useState } from "react";
|
|
2
2
|
|
|
3
|
-
import
|
|
3
|
+
import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore";
|
|
4
|
+
import {
|
|
5
|
+
Box,
|
|
6
|
+
ButtonBase,
|
|
7
|
+
Popover,
|
|
8
|
+
Stack,
|
|
9
|
+
TableCell,
|
|
10
|
+
TableCellProps,
|
|
11
|
+
Typography,
|
|
12
|
+
TypographyProps,
|
|
13
|
+
} from "@mui/material";
|
|
4
14
|
|
|
5
15
|
export interface TableHeadingProps extends PropsWithChildren<TableCellProps> {
|
|
6
16
|
typographyProps?: TypographyProps;
|
|
17
|
+
popover?: React.ReactNode;
|
|
18
|
+
popoverLabel?: React.ReactNode;
|
|
7
19
|
}
|
|
8
20
|
|
|
9
21
|
export const TableHeading: React.FC<TableHeadingProps> = ({
|
|
10
22
|
children,
|
|
11
23
|
typographyProps,
|
|
24
|
+
popover,
|
|
25
|
+
popoverLabel,
|
|
12
26
|
...props
|
|
13
|
-
}) =>
|
|
14
|
-
<
|
|
27
|
+
}) => {
|
|
28
|
+
const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
|
|
29
|
+
|
|
30
|
+
const headingText = (
|
|
15
31
|
<Typography
|
|
16
32
|
{...typographyProps}
|
|
17
33
|
sx={{
|
|
@@ -23,7 +39,75 @@ export const TableHeading: React.FC<TableHeadingProps> = ({
|
|
|
23
39
|
>
|
|
24
40
|
{children}
|
|
25
41
|
</Typography>
|
|
26
|
-
|
|
27
|
-
|
|
42
|
+
);
|
|
43
|
+
|
|
44
|
+
return (
|
|
45
|
+
<TableCell {...props}>
|
|
46
|
+
{popover != null ? (
|
|
47
|
+
<>
|
|
48
|
+
<ButtonBase
|
|
49
|
+
sx={{
|
|
50
|
+
position: "relative",
|
|
51
|
+
borderRadius: 1,
|
|
52
|
+
zIndex: 0,
|
|
53
|
+
"&::before": {
|
|
54
|
+
content: '""',
|
|
55
|
+
position: "absolute",
|
|
56
|
+
inset: "-2px -4px",
|
|
57
|
+
borderRadius: 1,
|
|
58
|
+
backgroundColor: "action.hover",
|
|
59
|
+
opacity: 0,
|
|
60
|
+
transition: (theme) =>
|
|
61
|
+
theme.transitions.create("opacity", {
|
|
62
|
+
duration: theme.transitions.duration.shortest,
|
|
63
|
+
}),
|
|
64
|
+
zIndex: -1,
|
|
65
|
+
pointerEvents: "none",
|
|
66
|
+
},
|
|
67
|
+
"&:hover::before, &:focus-visible::before": { opacity: 1 },
|
|
68
|
+
"&:hover .popover-label, &:focus-visible .popover-label": {
|
|
69
|
+
backgroundColor: "transparent",
|
|
70
|
+
},
|
|
71
|
+
}}
|
|
72
|
+
onClick={(e) => setAnchorEl(e.currentTarget)}
|
|
73
|
+
>
|
|
74
|
+
<Stack alignItems="center" direction="row" gap={0.5}>
|
|
75
|
+
{headingText}
|
|
76
|
+
<UnfoldMoreIcon sx={{ color: "text.secondary", width: 16, height: 16 }} />
|
|
77
|
+
</Stack>
|
|
78
|
+
|
|
79
|
+
{popoverLabel != null ? (
|
|
80
|
+
<Typography
|
|
81
|
+
className="popover-label"
|
|
82
|
+
color="text.secondary"
|
|
83
|
+
sx={{
|
|
84
|
+
ml: 0.25,
|
|
85
|
+
px: 0.5,
|
|
86
|
+
borderRadius: 1,
|
|
87
|
+
backgroundColor: "action.hover",
|
|
88
|
+
}}
|
|
89
|
+
variant="body2"
|
|
90
|
+
>
|
|
91
|
+
{popoverLabel}
|
|
92
|
+
</Typography>
|
|
93
|
+
) : null}
|
|
94
|
+
</ButtonBase>
|
|
95
|
+
|
|
96
|
+
<Popover
|
|
97
|
+
anchorEl={anchorEl}
|
|
98
|
+
anchorOrigin={{ horizontal: "center", vertical: "bottom" }}
|
|
99
|
+
open={Boolean(anchorEl)}
|
|
100
|
+
transformOrigin={{ horizontal: "center", vertical: "top" }}
|
|
101
|
+
onClose={() => setAnchorEl(null)}
|
|
102
|
+
>
|
|
103
|
+
<Box p={2}>{popover}</Box>
|
|
104
|
+
</Popover>
|
|
105
|
+
</>
|
|
106
|
+
) : (
|
|
107
|
+
headingText
|
|
108
|
+
)}
|
|
109
|
+
</TableCell>
|
|
110
|
+
);
|
|
111
|
+
};
|
|
28
112
|
|
|
29
113
|
export default TableHeading;
|
|
@@ -38,6 +38,7 @@ const MemberListPage: PageComponent<LimitOffset<MemberList>> = ({ data }) => {
|
|
|
38
38
|
? defaultCustomerType
|
|
39
39
|
: "ALL",
|
|
40
40
|
);
|
|
41
|
+
const customerTypeFilterCount = customerTypeFilter === "ALL" ? undefined : 1;
|
|
41
42
|
|
|
42
43
|
const navigateWithFilters = React.useCallback(
|
|
43
44
|
(searchInput: string, customerType: CustomerTypeFilter) => {
|
|
@@ -73,40 +74,15 @@ const MemberListPage: PageComponent<LimitOffset<MemberList>> = ({ data }) => {
|
|
|
73
74
|
<Page>
|
|
74
75
|
<Header>
|
|
75
76
|
<TitleBar title={t("Members")}>
|
|
76
|
-
<
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
color="primary"
|
|
86
|
-
size="small"
|
|
87
|
-
value={customerTypeFilter}
|
|
88
|
-
onChange={handleCustomerTypeChange}
|
|
89
|
-
>
|
|
90
|
-
<ToggleButton size="small" value="ALL">
|
|
91
|
-
{t("All")}
|
|
92
|
-
</ToggleButton>
|
|
93
|
-
<ToggleButton size="small" value={CustomerType.PRIVATE}>
|
|
94
|
-
{t("Private")}
|
|
95
|
-
</ToggleButton>
|
|
96
|
-
<ToggleButton size="small" value={CustomerType.COMPANY}>
|
|
97
|
-
{t("Company")}
|
|
98
|
-
</ToggleButton>
|
|
99
|
-
</ToggleButtonGroup>
|
|
100
|
-
<SearchBar
|
|
101
|
-
defaultValue={defaultSearch}
|
|
102
|
-
placeholder={t("Search members…")}
|
|
103
|
-
onChange={(input) => setSearchValue(input)}
|
|
104
|
-
onSubmit={(input) => {
|
|
105
|
-
setSearchValue(input);
|
|
106
|
-
navigateWithFilters(input, customerTypeFilter);
|
|
107
|
-
}}
|
|
108
|
-
/>
|
|
109
|
-
</Stack>
|
|
77
|
+
<SearchBar
|
|
78
|
+
defaultValue={defaultSearch}
|
|
79
|
+
placeholder={t("Search members…")}
|
|
80
|
+
onChange={(input) => setSearchValue(input)}
|
|
81
|
+
onSubmit={(input) => {
|
|
82
|
+
setSearchValue(input);
|
|
83
|
+
navigateWithFilters(input, customerTypeFilter);
|
|
84
|
+
}}
|
|
85
|
+
/>
|
|
110
86
|
</TitleBar>
|
|
111
87
|
</Header>
|
|
112
88
|
|
|
@@ -120,6 +96,31 @@ const MemberListPage: PageComponent<LimitOffset<MemberList>> = ({ data }) => {
|
|
|
120
96
|
<TableHeading>{t("Phone")}</TableHeading>
|
|
121
97
|
<TableHeading>{t("Email")}</TableHeading>
|
|
122
98
|
<TableHeading>{t("Site")}</TableHeading>
|
|
99
|
+
<TableHeading
|
|
100
|
+
popover={
|
|
101
|
+
<ToggleButtonGroup
|
|
102
|
+
exclusive
|
|
103
|
+
aria-label="Customer type filter"
|
|
104
|
+
color="primary"
|
|
105
|
+
size="small"
|
|
106
|
+
value={customerTypeFilter}
|
|
107
|
+
onChange={handleCustomerTypeChange}
|
|
108
|
+
>
|
|
109
|
+
<ToggleButton size="small" value="ALL">
|
|
110
|
+
{t("All")}
|
|
111
|
+
</ToggleButton>
|
|
112
|
+
<ToggleButton size="small" value={CustomerType.PRIVATE}>
|
|
113
|
+
{t("Private")}
|
|
114
|
+
</ToggleButton>
|
|
115
|
+
<ToggleButton size="small" value={CustomerType.COMPANY}>
|
|
116
|
+
{t("Company")}
|
|
117
|
+
</ToggleButton>
|
|
118
|
+
</ToggleButtonGroup>
|
|
119
|
+
}
|
|
120
|
+
popoverLabel={customerTypeFilterCount}
|
|
121
|
+
>
|
|
122
|
+
{t("Type")}
|
|
123
|
+
</TableHeading>
|
|
123
124
|
<TableHeading width={60} />
|
|
124
125
|
</TableHead>
|
|
125
126
|
|
|
@@ -140,6 +141,7 @@ const MemberListPage: PageComponent<LimitOffset<MemberList>> = ({ data }) => {
|
|
|
140
141
|
<TableCell>{member.phone ?? "—"}</TableCell>
|
|
141
142
|
<TableCell>{member.email}</TableCell>
|
|
142
143
|
<TableCell>{member.site_code}</TableCell>
|
|
144
|
+
<TableCell>{member.customer_type}</TableCell>
|
|
143
145
|
<TableCell>
|
|
144
146
|
{!member.is_valid_customer ? (
|
|
145
147
|
<WarningAmberOutlinedIcon color="warning" fontSize="small" />
|