grep-components 1.15.0-grepf-1694.1 → 1.15.0-grepf-1792.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/AppBar/index.d.ts +0 -11
- package/dist/components/AppBarNew/AppBar.d.ts +14 -0
- package/dist/components/AppBarNew/MainAppStyles.d.ts +31 -0
- package/dist/components/AppBarNew/MobileAppBar.d.ts +9 -0
- package/dist/components/AppBarNew/stories/NewAppBarStory.stories.d.ts +15 -0
- package/dist/components/AppBarNew/types.d.ts +30 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +337 -28
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,14 +1,3 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
export declare const useToolbarStyles: (params: void, styleOverrides?: {
|
|
3
|
-
props: {
|
|
4
|
-
classes?: Record<string, string> | undefined;
|
|
5
|
-
} & Record<string, unknown>;
|
|
6
|
-
ownerState?: Record<string, unknown> | undefined;
|
|
7
|
-
} | undefined) => {
|
|
8
|
-
classes: Record<"toolbar", string>;
|
|
9
|
-
theme: import("@mui/material").Theme;
|
|
10
|
-
css: import("tss-react").Css;
|
|
11
|
-
cx: import("tss-react").Cx;
|
|
12
|
-
};
|
|
13
2
|
declare const _default: React.ComponentType<{}>;
|
|
14
3
|
export default _default;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { IAuthorizedPage, UserMenuItem, v0colors } from './types';
|
|
3
|
+
declare type AppBarProps = {
|
|
4
|
+
isProd: boolean;
|
|
5
|
+
username: string;
|
|
6
|
+
currentPath: string;
|
|
7
|
+
appTitle: string;
|
|
8
|
+
userMenuItems: UserMenuItem[];
|
|
9
|
+
menuItems: IAuthorizedPage[];
|
|
10
|
+
userRole?: string;
|
|
11
|
+
colors: v0colors;
|
|
12
|
+
};
|
|
13
|
+
declare const AppBar: React.FunctionComponent<AppBarProps>;
|
|
14
|
+
export default AppBar;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { v0colors } from './types';
|
|
3
|
+
export declare const dimensions: {
|
|
4
|
+
breadcrumbsFontSize: number;
|
|
5
|
+
contentWidth: number;
|
|
6
|
+
footerHeight: number;
|
|
7
|
+
inputBoxHeight: number;
|
|
8
|
+
toolbarHeight: number;
|
|
9
|
+
toolbarHeightMobile: number;
|
|
10
|
+
toolbarWidth: number;
|
|
11
|
+
toolbarMenuWidth: number;
|
|
12
|
+
toolbarMenuHeight: number;
|
|
13
|
+
};
|
|
14
|
+
export declare const ToolbarTitle: import("@emotion/styled").StyledComponent<import("react-router-dom").NavLinkProps<unknown> & import("react").RefAttributes<HTMLAnchorElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
15
|
+
export declare const EnvironmentTitle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
16
|
+
export declare const Toolbar: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
|
|
17
|
+
colors: v0colors;
|
|
18
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
19
|
+
export declare const ToolbarFixer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
|
|
20
|
+
colors: v0colors;
|
|
21
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
22
|
+
export declare const ToolbarInner: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
23
|
+
export declare const ToolbarLeft: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
24
|
+
export declare const ToolbarRight: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
25
|
+
export declare const UserContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
26
|
+
export declare const AccountName: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
27
|
+
export declare const ToolbarMenu: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
28
|
+
export declare const MobileToolbarMenu: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
29
|
+
export declare const ToolbarMenuInner: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
30
|
+
export declare const ToolbarMenuItem: import("@emotion/styled").StyledComponent<import("react-router-dom").NavLinkProps<unknown> & import("react").RefAttributes<HTMLAnchorElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
31
|
+
export declare const MobileToolbarMenuItem: import("@emotion/styled").StyledComponent<import("react-router-dom").NavLinkProps<unknown> & import("react").RefAttributes<HTMLAnchorElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { IAuthorizedPage, UserMenuItem, v0colors } from './types';
|
|
3
|
+
declare type Props = {
|
|
4
|
+
userMenuItems: UserMenuItem[];
|
|
5
|
+
menuItems: IAuthorizedPage[];
|
|
6
|
+
colors: v0colors;
|
|
7
|
+
};
|
|
8
|
+
declare const MobileAppBar: React.FunctionComponent<Props>;
|
|
9
|
+
export default MobileAppBar;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export declare const v0colors: {
|
|
2
|
+
primary: string;
|
|
3
|
+
secondary: string;
|
|
4
|
+
body: string;
|
|
5
|
+
headerBackgroundColor: string;
|
|
6
|
+
borderColor: string;
|
|
7
|
+
primaryFade: string;
|
|
8
|
+
greyText: string;
|
|
9
|
+
placeholderText: string;
|
|
10
|
+
textColor: string;
|
|
11
|
+
textColorFade: string;
|
|
12
|
+
textColorMoreFade: string;
|
|
13
|
+
white: string;
|
|
14
|
+
lightGrey: string;
|
|
15
|
+
};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
export declare type UserMenuItem = {
|
|
2
|
+
id: string;
|
|
3
|
+
label: string;
|
|
4
|
+
action: () => void;
|
|
5
|
+
};
|
|
6
|
+
export interface IAuthorizedPage {
|
|
7
|
+
name: string;
|
|
8
|
+
translatedTextRef?: string;
|
|
9
|
+
accessTextRef?: string;
|
|
10
|
+
redirectUrl?: string;
|
|
11
|
+
path: string;
|
|
12
|
+
exact?: boolean;
|
|
13
|
+
link?: boolean;
|
|
14
|
+
accessLink?: boolean;
|
|
15
|
+
}
|
|
16
|
+
export declare type v0colors = {
|
|
17
|
+
body: string;
|
|
18
|
+
headerBackgroundColor: string;
|
|
19
|
+
borderColor: string;
|
|
20
|
+
primaryFade: string;
|
|
21
|
+
greyText: string;
|
|
22
|
+
placeholderText: string;
|
|
23
|
+
textColor: string;
|
|
24
|
+
textColorFade: string;
|
|
25
|
+
textColorMoreFade: string;
|
|
26
|
+
white: string;
|
|
27
|
+
lightGrey: string;
|
|
28
|
+
primary: string;
|
|
29
|
+
secondary: string;
|
|
30
|
+
};
|
package/dist/index.d.ts
CHANGED
|
@@ -28,6 +28,7 @@ export { default as Sidebar } from './components/Sidebar';
|
|
|
28
28
|
export { default as ServiceMessage } from './components/ServiceMessage';
|
|
29
29
|
export { default as SortableTable } from './components/SortableTable';
|
|
30
30
|
export { default as GrepEditor } from './components/GrepEditor';
|
|
31
|
+
export { default as NewAppBar } from './components/AppBarNew/AppBar';
|
|
31
32
|
export { ParseableDate } from './utils/dateHelper';
|
|
32
33
|
export { Utils };
|
|
33
34
|
export * from './components';
|
package/dist/index.js
CHANGED
|
@@ -5,15 +5,15 @@ import isBetweenPlugin from 'dayjs/plugin/isBetween';
|
|
|
5
5
|
import { red, pink, purple, deepPurple, indigo, blue, lightBlue, cyan, teal, green, lightGreen, lime, yellow, amber, orange, deepOrange, brown, grey, blueGrey } from '@mui/material/colors';
|
|
6
6
|
import * as React from 'react';
|
|
7
7
|
import React__default, { useContext, forwardRef, createElement, createContext, Fragment, useRef, useLayoutEffect, useState, useCallback as useCallback$1, useEffect, useMemo as useMemo$1 } from 'react';
|
|
8
|
-
import { Toolbar, useScrollTrigger, Slide, Button, Box, Typography, IconButton, Menu, MenuItem, Tabs, Tab, Collapse, MenuList, Tooltip, Container, List, ListItem, ListItemText, ListItemIcon, Divider, styled, TableCell, TableRow, TableSortLabel, TableHead, TablePagination, TableContainer, Table, TableBody, TableFooter, CircularProgress, Link, TextField, FormControl, InputLabel, Select, OutlinedInput, Input, Checkbox, FormHelperText, Grid, ToggleButtonGroup, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions } from '@mui/material';
|
|
9
|
-
import AppBar$
|
|
8
|
+
import { Toolbar as Toolbar$1, useScrollTrigger, Slide, Button, Box, Typography, IconButton, Menu, MenuItem, Tabs, Tab, Collapse, MenuList, Tooltip, Container, List, ListItem, ListItemText, ListItemIcon, Divider, styled, TableCell, TableRow, TableSortLabel, TableHead, TablePagination, TableContainer, Table, TableBody, TableFooter, CircularProgress, Link, TextField, FormControl, InputLabel, Select, OutlinedInput, Input, Checkbox, FormHelperText, Grid, ToggleButtonGroup, AppBar as AppBar$3, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions } from '@mui/material';
|
|
9
|
+
import AppBar$2 from '@mui/material/AppBar';
|
|
10
10
|
import { useTheme as useTheme$1 } from '@mui/material/styles';
|
|
11
11
|
import AccountCircle from '@mui/icons-material/AccountCircle';
|
|
12
12
|
import ArrowDropdown from '@mui/icons-material/ArrowDropDown';
|
|
13
|
-
import { useHistory, Prompt } from 'react-router-dom';
|
|
13
|
+
import { useHistory, NavLink, Prompt } from 'react-router-dom';
|
|
14
14
|
import MenuIcon from '@mui/icons-material/Menu';
|
|
15
15
|
import IconExpand from '@mui/icons-material/ExpandMore';
|
|
16
|
-
import { ArrowForward, Info, ExpandMore, ExpandLess } from '@mui/icons-material';
|
|
16
|
+
import { ArrowForward, Info, ExpandMore, ExpandLess, Menu as Menu$1 } from '@mui/icons-material';
|
|
17
17
|
import ListItemIcon$1 from '@mui/material/ListItemIcon';
|
|
18
18
|
import MoreVert from '@mui/icons-material/MoreVert';
|
|
19
19
|
import { useDispatch, connect, Provider as Provider$1, useSelector } from 'react-redux';
|
|
@@ -40,6 +40,10 @@ export { ContentState } from 'draft-js';
|
|
|
40
40
|
import ToggleButton from '@mui/material/ToggleButton';
|
|
41
41
|
import FormatBold from '@mui/icons-material/FormatBold';
|
|
42
42
|
import FormatItalic from '@mui/icons-material/FormatItalic';
|
|
43
|
+
import Divider$1 from '@mui/material/Divider';
|
|
44
|
+
import Menu$2 from '@mui/material/Menu';
|
|
45
|
+
import MenuItem$1 from '@mui/material/MenuItem';
|
|
46
|
+
import Button$1 from '@mui/material/Button';
|
|
43
47
|
import Link$1 from '@mui/material/Link';
|
|
44
48
|
|
|
45
49
|
dayjs.extend(isBetweenPlugin);
|
|
@@ -4058,7 +4062,7 @@ var makeStyles = (_a = tssReact.createMakeAndWithStyles({
|
|
|
4058
4062
|
//"useTheme": useTheme as (()=> MyTheme)
|
|
4059
4063
|
}), _a.makeStyles), withStyles = _a.withStyles;
|
|
4060
4064
|
|
|
4061
|
-
var StyledAppBar = withStyles(AppBar$
|
|
4065
|
+
var StyledAppBar = withStyles(AppBar$2, {
|
|
4062
4066
|
root: {
|
|
4063
4067
|
backgroundColor: 'transparant',
|
|
4064
4068
|
},
|
|
@@ -4068,21 +4072,6 @@ var StyledAppBar = withStyles(AppBar$1, {
|
|
|
4068
4072
|
},
|
|
4069
4073
|
});
|
|
4070
4074
|
|
|
4071
|
-
var useToolbarStyles = makeStyles()(function (_a) {
|
|
4072
|
-
var _b;
|
|
4073
|
-
var breakpoints = _a.breakpoints;
|
|
4074
|
-
return ({
|
|
4075
|
-
toolbar: (_b = {},
|
|
4076
|
-
_b[breakpoints.down('lg')] = {
|
|
4077
|
-
height: '40px',
|
|
4078
|
-
minHeight: '40px',
|
|
4079
|
-
},
|
|
4080
|
-
_b[breakpoints.up('lg')] = {
|
|
4081
|
-
height: '80px',
|
|
4082
|
-
},
|
|
4083
|
-
_b),
|
|
4084
|
-
});
|
|
4085
|
-
});
|
|
4086
4075
|
var HideOnScroll = function (_a) {
|
|
4087
4076
|
var children = _a.children;
|
|
4088
4077
|
// Note that you normally won't need to set the window ref as useScrollTrigger
|
|
@@ -4092,13 +4081,11 @@ var HideOnScroll = function (_a) {
|
|
|
4092
4081
|
var trigger = useScrollTrigger();
|
|
4093
4082
|
return (React.createElement(Slide, { appear: false, direction: "down", in: !trigger }, children));
|
|
4094
4083
|
};
|
|
4095
|
-
var AppBar = function (props) {
|
|
4096
|
-
|
|
4097
|
-
|
|
4098
|
-
|
|
4099
|
-
|
|
4100
|
-
React.createElement(Toolbar, { className: classes.toolbar }, props.children)))));
|
|
4101
|
-
};
|
|
4084
|
+
var AppBar$1 = function (props) { return (React.createElement(React.Fragment, null,
|
|
4085
|
+
React.createElement(HideOnScroll, __assign({}, props),
|
|
4086
|
+
React.createElement(StyledAppBar, { color: "inherit", elevation: 0 },
|
|
4087
|
+
React.createElement(Toolbar$1, null, props.children))),
|
|
4088
|
+
React.createElement(Toolbar$1, null))); };
|
|
4102
4089
|
|
|
4103
4090
|
var useStyles$i = makeStyles()(function (_a) {
|
|
4104
4091
|
var palette = _a.palette;
|
|
@@ -21749,6 +21736,328 @@ var GrepEditor = function (_a) {
|
|
|
21749
21736
|
React__default.createElement(EditorComponent, __assign({}, props))));
|
|
21750
21737
|
};
|
|
21751
21738
|
|
|
21739
|
+
var dimensions = {
|
|
21740
|
+
breadcrumbsFontSize: 16,
|
|
21741
|
+
contentWidth: 1028,
|
|
21742
|
+
footerHeight: 50,
|
|
21743
|
+
inputBoxHeight: 61,
|
|
21744
|
+
toolbarHeight: 80,
|
|
21745
|
+
toolbarHeightMobile: 40,
|
|
21746
|
+
toolbarWidth: 1260,
|
|
21747
|
+
toolbarMenuWidth: 1028,
|
|
21748
|
+
toolbarMenuHeight: 50,
|
|
21749
|
+
};
|
|
21750
|
+
var ToolbarTitle = styled(NavLink)(function () { return ({
|
|
21751
|
+
display: 'flex',
|
|
21752
|
+
fontSize: '24px',
|
|
21753
|
+
color: '#303030',
|
|
21754
|
+
fontFamily: 'Montserrat medium',
|
|
21755
|
+
textDecoration: 'none',
|
|
21756
|
+
':hover': {
|
|
21757
|
+
textDecoration: 'none',
|
|
21758
|
+
},
|
|
21759
|
+
}); });
|
|
21760
|
+
var EnvironmentTitle = styled('div')(function () { return ({
|
|
21761
|
+
color: 'rgba(0, 0, 0, 0.33)',
|
|
21762
|
+
marginLeft: '17px',
|
|
21763
|
+
}); });
|
|
21764
|
+
var Toolbar = styled('div')(function (_a) {
|
|
21765
|
+
var colors = _a.colors;
|
|
21766
|
+
return ({
|
|
21767
|
+
display: 'flex',
|
|
21768
|
+
flexDirection: 'column',
|
|
21769
|
+
backgroundColor: colors.headerBackgroundColor,
|
|
21770
|
+
height: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
|
|
21771
|
+
minHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
|
|
21772
|
+
maxHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
|
|
21773
|
+
});
|
|
21774
|
+
});
|
|
21775
|
+
var ToolbarFixer = styled('div')(function (_a) {
|
|
21776
|
+
var colors = _a.colors;
|
|
21777
|
+
return ({
|
|
21778
|
+
display: 'flex',
|
|
21779
|
+
flexDirection: 'column',
|
|
21780
|
+
backgroundColor: colors.headerBackgroundColor,
|
|
21781
|
+
height: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
|
|
21782
|
+
minHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
|
|
21783
|
+
maxHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
|
|
21784
|
+
position: 'fixed',
|
|
21785
|
+
top: 0,
|
|
21786
|
+
left: 0,
|
|
21787
|
+
right: 0,
|
|
21788
|
+
zIndex: 101,
|
|
21789
|
+
});
|
|
21790
|
+
});
|
|
21791
|
+
var ToolbarInner = styled('div')(function (_a) {
|
|
21792
|
+
var _b;
|
|
21793
|
+
var theme = _a.theme;
|
|
21794
|
+
return (_b = {
|
|
21795
|
+
alignItems: 'center',
|
|
21796
|
+
display: 'flex',
|
|
21797
|
+
margin: '0 auto',
|
|
21798
|
+
width: '100%',
|
|
21799
|
+
padding: 0
|
|
21800
|
+
},
|
|
21801
|
+
_b[theme.breakpoints.down('sm')] = {
|
|
21802
|
+
height: "".concat(dimensions.toolbarHeightMobile, "px"),
|
|
21803
|
+
minHeight: "".concat(dimensions.toolbarHeightMobile, "px"),
|
|
21804
|
+
},
|
|
21805
|
+
_b[theme.breakpoints.up('sm')] = {
|
|
21806
|
+
padding: 0,
|
|
21807
|
+
height: "".concat(dimensions.toolbarHeight, "px"),
|
|
21808
|
+
minHeight: "".concat(dimensions.toolbarHeight, "px"),
|
|
21809
|
+
},
|
|
21810
|
+
_b);
|
|
21811
|
+
});
|
|
21812
|
+
var ToolbarLeft = styled('div')(function () { return ({
|
|
21813
|
+
alignItems: 'center',
|
|
21814
|
+
display: 'flex',
|
|
21815
|
+
marginLeft: '40px',
|
|
21816
|
+
}); });
|
|
21817
|
+
var ToolbarRight = styled('div')(function (_a) {
|
|
21818
|
+
var _b;
|
|
21819
|
+
var theme = _a.theme;
|
|
21820
|
+
return (_b = {
|
|
21821
|
+
alignItems: 'center',
|
|
21822
|
+
display: 'flex',
|
|
21823
|
+
marginLeft: 'auto',
|
|
21824
|
+
marginRight: '40px'
|
|
21825
|
+
},
|
|
21826
|
+
_b[theme.breakpoints.down('sm')] = {
|
|
21827
|
+
display: 'none',
|
|
21828
|
+
},
|
|
21829
|
+
_b[theme.breakpoints.up('sm')] = {
|
|
21830
|
+
display: 'flex',
|
|
21831
|
+
},
|
|
21832
|
+
_b);
|
|
21833
|
+
});
|
|
21834
|
+
var UserContainer = styled('div')(function () { return ({
|
|
21835
|
+
display: 'flex',
|
|
21836
|
+
flexDirection: 'column',
|
|
21837
|
+
margin: '0 17px',
|
|
21838
|
+
textAlign: 'left',
|
|
21839
|
+
textTransform: 'none',
|
|
21840
|
+
fontWeight: '400',
|
|
21841
|
+
color: 'rgba(0, 0, 0, 0.87)',
|
|
21842
|
+
}); });
|
|
21843
|
+
var AccountName = styled('span')(function () { return ({
|
|
21844
|
+
fontSize: '18px',
|
|
21845
|
+
lineHeight: '25px',
|
|
21846
|
+
}); });
|
|
21847
|
+
var ToolbarMenu = styled('div')(function (_a) {
|
|
21848
|
+
var _b;
|
|
21849
|
+
var theme = _a.theme;
|
|
21850
|
+
return _b = {
|
|
21851
|
+
backgroundColor: theme.palette.primary.main,
|
|
21852
|
+
height: "".concat(dimensions.toolbarMenuHeight, "px"),
|
|
21853
|
+
maxHeight: "".concat(dimensions.toolbarMenuHeight, "px"),
|
|
21854
|
+
minHeight: "".concat(dimensions.toolbarMenuHeight, "px"),
|
|
21855
|
+
width: '100%',
|
|
21856
|
+
display: 'flex',
|
|
21857
|
+
alignItems: 'center',
|
|
21858
|
+
fontFamily: 'MontSerrat, Helvetica Neue, Helvetica, Arial, sans-serif',
|
|
21859
|
+
boxShadow: '0 3px 5px 0 rgba(0, 0, 0, 0.3)'
|
|
21860
|
+
},
|
|
21861
|
+
_b[theme.breakpoints.down('sm')] = {
|
|
21862
|
+
display: 'none',
|
|
21863
|
+
},
|
|
21864
|
+
_b[theme.breakpoints.up('sm')] = {
|
|
21865
|
+
display: 'flex',
|
|
21866
|
+
},
|
|
21867
|
+
_b;
|
|
21868
|
+
});
|
|
21869
|
+
var MobileToolbarMenu = styled('div')(function (_a) {
|
|
21870
|
+
var _b;
|
|
21871
|
+
var theme = _a.theme;
|
|
21872
|
+
return (_b = {
|
|
21873
|
+
backgroundColor: theme.palette.primary.main,
|
|
21874
|
+
height: "".concat(dimensions.toolbarMenuHeight, "px"),
|
|
21875
|
+
maxHeight: "".concat(dimensions.toolbarMenuHeight, "px"),
|
|
21876
|
+
minHeight: "".concat(dimensions.toolbarMenuHeight, "px"),
|
|
21877
|
+
width: '100%',
|
|
21878
|
+
flexGrow: 1,
|
|
21879
|
+
alignItems: 'center',
|
|
21880
|
+
fontFamily: 'MontSerrat, Helvetica Neue, Helvetica, Arial, sans-serif',
|
|
21881
|
+
boxShadow: '0 3px 5px 0 rgba(0, 0, 0, 0.3)'
|
|
21882
|
+
},
|
|
21883
|
+
_b[theme.breakpoints.down('sm')] = {
|
|
21884
|
+
display: 'flex',
|
|
21885
|
+
},
|
|
21886
|
+
_b[theme.breakpoints.up('sm')] = {
|
|
21887
|
+
display: 'none',
|
|
21888
|
+
},
|
|
21889
|
+
_b);
|
|
21890
|
+
});
|
|
21891
|
+
var ToolbarMenuInner = styled('div')(function (_a) {
|
|
21892
|
+
var _b;
|
|
21893
|
+
var theme = _a.theme;
|
|
21894
|
+
return (_b = {
|
|
21895
|
+
display: 'flex',
|
|
21896
|
+
height: 'fit-content',
|
|
21897
|
+
maxWidth: "".concat(dimensions.toolbarMenuWidth, "px"),
|
|
21898
|
+
margin: '0 auto',
|
|
21899
|
+
width: '100%'
|
|
21900
|
+
},
|
|
21901
|
+
_b[theme.breakpoints.down('md')] = {
|
|
21902
|
+
padding: '0 24px',
|
|
21903
|
+
},
|
|
21904
|
+
_b[theme.breakpoints.up('md')] = {
|
|
21905
|
+
padding: 0,
|
|
21906
|
+
},
|
|
21907
|
+
_b);
|
|
21908
|
+
});
|
|
21909
|
+
var menuItemHoverGreen = '#B9E1CC';
|
|
21910
|
+
var ToolbarMenuItem = styled(NavLink)(function (_a) {
|
|
21911
|
+
var theme = _a.theme;
|
|
21912
|
+
return ({
|
|
21913
|
+
alignItems: 'center',
|
|
21914
|
+
borderRight: '1px solid #696868',
|
|
21915
|
+
color: theme.palette.background.default,
|
|
21916
|
+
cursor: 'pointer',
|
|
21917
|
+
display: 'flex',
|
|
21918
|
+
fontSize: '1.1rem',
|
|
21919
|
+
padding: '0 17px',
|
|
21920
|
+
height: '100%',
|
|
21921
|
+
textTransform: 'capitalize',
|
|
21922
|
+
userSelect: 'none',
|
|
21923
|
+
position: 'relative',
|
|
21924
|
+
textDecoration: 'none',
|
|
21925
|
+
':first-child': {
|
|
21926
|
+
paddingLeft: 0,
|
|
21927
|
+
':after': {
|
|
21928
|
+
marginLeft: '-24px',
|
|
21929
|
+
},
|
|
21930
|
+
},
|
|
21931
|
+
':last-child': {
|
|
21932
|
+
borderRight: 'none',
|
|
21933
|
+
},
|
|
21934
|
+
':after': {
|
|
21935
|
+
position: 'absolute',
|
|
21936
|
+
bottom: 0,
|
|
21937
|
+
left: '50%',
|
|
21938
|
+
width: '32px',
|
|
21939
|
+
marginLeft: '-16px',
|
|
21940
|
+
borderBottom: "2px solid ".concat(theme.palette.secondary.main),
|
|
21941
|
+
opacity: 0,
|
|
21942
|
+
content: '""',
|
|
21943
|
+
transition: 'all 0.3s ease',
|
|
21944
|
+
pointerEvents: 'none',
|
|
21945
|
+
},
|
|
21946
|
+
':focus': {
|
|
21947
|
+
outline: 'none',
|
|
21948
|
+
},
|
|
21949
|
+
':hover': {
|
|
21950
|
+
textDecoration: 'none',
|
|
21951
|
+
color: menuItemHoverGreen,
|
|
21952
|
+
},
|
|
21953
|
+
'.active:after, :hover:after, focus:after': {
|
|
21954
|
+
bottom: '-4px',
|
|
21955
|
+
opacity: '1',
|
|
21956
|
+
},
|
|
21957
|
+
});
|
|
21958
|
+
});
|
|
21959
|
+
var MobileToolbarMenuItem = styled(NavLink)(function () { return ({
|
|
21960
|
+
alignItems: 'center',
|
|
21961
|
+
color: 'black',
|
|
21962
|
+
cursor: 'pointer',
|
|
21963
|
+
display: 'flex',
|
|
21964
|
+
height: '100%',
|
|
21965
|
+
textTransform: 'capitalize',
|
|
21966
|
+
userSelect: 'none',
|
|
21967
|
+
position: 'relative',
|
|
21968
|
+
textDecoration: 'none',
|
|
21969
|
+
}); });
|
|
21970
|
+
|
|
21971
|
+
var MobileAppBar = function (_a) {
|
|
21972
|
+
var userMenuItems = _a.userMenuItems, menuItems = _a.menuItems;
|
|
21973
|
+
var _b = __read(React.useState(null), 2), anchorElNav = _b[0], setAnchorElNav = _b[1];
|
|
21974
|
+
var openNav = Boolean(anchorElNav);
|
|
21975
|
+
var handleClickNav = function (event) {
|
|
21976
|
+
setAnchorElNav(event.currentTarget);
|
|
21977
|
+
};
|
|
21978
|
+
var handleCloseNav = function () {
|
|
21979
|
+
setAnchorElNav(null);
|
|
21980
|
+
};
|
|
21981
|
+
var _c = __read(React.useState(null), 2), anchorElMenu = _c[0], setAnchorElMenu = _c[1];
|
|
21982
|
+
var openMenu = Boolean(anchorElMenu);
|
|
21983
|
+
var handleClickMenu = function (event) {
|
|
21984
|
+
setAnchorElMenu(event.currentTarget);
|
|
21985
|
+
};
|
|
21986
|
+
var handleCloseMenu = function () {
|
|
21987
|
+
setAnchorElMenu(null);
|
|
21988
|
+
};
|
|
21989
|
+
return (React.createElement(MobileToolbarMenu, { style: { flexGrow: 1 } },
|
|
21990
|
+
React.createElement(AppBar$3, { position: "static" },
|
|
21991
|
+
React.createElement(Toolbar$1, { style: { minHeight: '50px' } },
|
|
21992
|
+
React.createElement(IconButton, { size: "medium", edge: "start", color: "inherit", "aria-label": "menu", style: { marginRight: 2 }, onClick: handleClickNav },
|
|
21993
|
+
React.createElement(Menu$1, { sx: { color: 'white' } })),
|
|
21994
|
+
React.createElement(Menu, { id: "basic-menu", anchorEl: anchorElNav, open: openNav, onClose: handleCloseNav, MenuListProps: {
|
|
21995
|
+
'aria-labelledby': 'basic-button',
|
|
21996
|
+
} }, menuItems.map(function (page) { return (React.createElement(MobileToolbarMenuItem, { key: page.name, to: page.redirectUrl || '' },
|
|
21997
|
+
React.createElement(MenuItem, { sx: {
|
|
21998
|
+
width: '100%',
|
|
21999
|
+
}, key: page.name }, page.translatedTextRef))); })),
|
|
22000
|
+
React.createElement(IconButton, { size: "medium", edge: "end", color: "inherit", "aria-label": "menu", style: { marginLeft: 'auto' }, onClick: handleClickMenu },
|
|
22001
|
+
React.createElement(MoreVert, { sx: { color: 'white' } })),
|
|
22002
|
+
React.createElement(Menu, { id: "basic-menu", anchorEl: anchorElMenu, open: openMenu, onClose: handleCloseMenu, MenuListProps: {
|
|
22003
|
+
'aria-labelledby': 'basic-button',
|
|
22004
|
+
} }, userMenuItems.map(function (i, index) { return (React.createElement(React.Fragment, null,
|
|
22005
|
+
React.createElement(MenuItem, { key: i.id, onClick: function () {
|
|
22006
|
+
handleCloseMenu();
|
|
22007
|
+
i.action();
|
|
22008
|
+
} }, i.label),
|
|
22009
|
+
userMenuItems.length > index + 1 && React.createElement(Divider, null))); }))))));
|
|
22010
|
+
};
|
|
22011
|
+
|
|
22012
|
+
var AppBar = function (_a) {
|
|
22013
|
+
var username = _a.username, currentPath = _a.currentPath, isProd = _a.isProd, appTitle = _a.appTitle, userMenuItems = _a.userMenuItems, menuItems = _a.menuItems, userRole = _a.userRole, colors = _a.colors;
|
|
22014
|
+
var _b = __read(React.useState(null), 2), userMenuAnchor = _b[0], setUserMenuAnchor = _b[1];
|
|
22015
|
+
var _handleIconButtonClick = function (event) {
|
|
22016
|
+
event.preventDefault();
|
|
22017
|
+
setUserMenuAnchor(event.currentTarget);
|
|
22018
|
+
};
|
|
22019
|
+
var _handleCloseUserMenu = function () {
|
|
22020
|
+
setUserMenuAnchor(null);
|
|
22021
|
+
};
|
|
22022
|
+
var _renderToolbarMenuItem = function (page) {
|
|
22023
|
+
var isActive = (page === null || page === void 0 ? void 0 : page.exact)
|
|
22024
|
+
? currentPath === page.redirectUrl
|
|
22025
|
+
: currentPath.includes(page.redirectUrl || '');
|
|
22026
|
+
return (React.createElement(ToolbarMenuItem, { className: isActive ? 'active' : '', to: page.redirectUrl || '', key: page.name, tabIndex: 0 }, page === null || page === void 0 ? void 0 : page.translatedTextRef));
|
|
22027
|
+
};
|
|
22028
|
+
return (React.createElement(Toolbar, { colors: colors },
|
|
22029
|
+
React.createElement(ToolbarFixer, { colors: colors },
|
|
22030
|
+
React.createElement(ToolbarInner, null,
|
|
22031
|
+
React.createElement(ToolbarLeft, null,
|
|
22032
|
+
React.createElement(ToolbarTitle, { to: '/' },
|
|
22033
|
+
appTitle,
|
|
22034
|
+
!isProd && (React.createElement(EnvironmentTitle, null, process.env.REACT_APP_HOST)))),
|
|
22035
|
+
React.createElement(ToolbarRight, null,
|
|
22036
|
+
React.createElement(Button$1, { onClick: _handleIconButtonClick },
|
|
22037
|
+
React.createElement(AccountCircle, { color: "primary", fontSize: "large" }),
|
|
22038
|
+
React.createElement(UserContainer, null,
|
|
22039
|
+
React.createElement(AccountName, null, username),
|
|
22040
|
+
userRole && (React.createElement(Box, { sx: { fontSize: '14px', lineHeight: '20px' } }, userRole))),
|
|
22041
|
+
React.createElement(ArrowDropdown, { color: "primary" })),
|
|
22042
|
+
React.createElement(Menu$2, { open: Boolean(userMenuAnchor), anchorEl: userMenuAnchor, onClose: _handleCloseUserMenu, anchorOrigin: {
|
|
22043
|
+
vertical: 'bottom',
|
|
22044
|
+
horizontal: 'center',
|
|
22045
|
+
}, transformOrigin: {
|
|
22046
|
+
vertical: 'top',
|
|
22047
|
+
horizontal: 'center',
|
|
22048
|
+
} }, userMenuItems.map(function (i, index) {
|
|
22049
|
+
return (React.createElement(React.Fragment, null,
|
|
22050
|
+
React.createElement(MenuItem$1, { key: i.id, onClick: function () {
|
|
22051
|
+
setUserMenuAnchor(null);
|
|
22052
|
+
i.action();
|
|
22053
|
+
} }, i.label),
|
|
22054
|
+
userMenuItems.length > index + 1 && React.createElement(Divider$1, null)));
|
|
22055
|
+
})))),
|
|
22056
|
+
React.createElement(ToolbarMenu, null,
|
|
22057
|
+
React.createElement(ToolbarMenuInner, null, menuItems.map(function (page) { return _renderToolbarMenuItem(page); }))),
|
|
22058
|
+
React.createElement(MobileAppBar, { menuItems: menuItems, userMenuItems: userMenuItems, colors: colors }))));
|
|
22059
|
+
};
|
|
22060
|
+
|
|
21752
22061
|
var NavGuard = function (_a) {
|
|
21753
22062
|
var when = _a.when, title = _a.title, txt = _a.txt, txtSave = _a.txtSave, txtCancel = _a.txtCancel, txtDiscard = _a.txtDiscard, onSave = _a.onSave, onCancel = _a.onCancel, onDiscard = _a.onDiscard;
|
|
21754
22063
|
var _b = __read(React.useState(false), 2), open = _b[0], setOpen = _b[1];
|
|
@@ -22644,5 +22953,5 @@ var GrepTableOfContent = function (_a) {
|
|
|
22644
22953
|
};
|
|
22645
22954
|
GrepTableOfContent.displayName = 'Grep.ToC';
|
|
22646
22955
|
|
|
22647
|
-
export { AppBar, AppBarNavList, AppBarProfile, BodyLayout, CircularLoading, Colors, ConfirmationServiceProvider, ContainedLinkList, DatePicker, DropdownMenu, EditorContext, Footer, GDPR, GrepCrumbs, DatePicker as GrepDatePicker, GrepDateRange, GrepDialogServiceProvider, GrepEditor, GrepInput, GrepSelect, GrepTable, GrepTableCard, GrepTableOfContent, GrepTableRow, GreyCover, InfoContainer, LinkList, LoadingOverlay, MainLayout, NavGuard, OverflowTooltip, ProfileInfo, SearchBar, ServiceMessage, Sidebar, SortableTable, UpdateStyle, index as Utils, convert2html, convert2txt, convertToRgba, createState, filterElements as filterContentElements, hex2rgb, hex2rgba, makeStyles, parseContent, parseContentState, useConfirmation, useContentElements, useDate, useDebounce, useGrepDialog, useStyles$d as useStyles,
|
|
22956
|
+
export { AppBar$1 as AppBar, AppBarNavList, AppBarProfile, BodyLayout, CircularLoading, Colors, ConfirmationServiceProvider, ContainedLinkList, DatePicker, DropdownMenu, EditorContext, Footer, GDPR, GrepCrumbs, DatePicker as GrepDatePicker, GrepDateRange, GrepDialogServiceProvider, GrepEditor, GrepInput, GrepSelect, GrepTable, GrepTableCard, GrepTableOfContent, GrepTableRow, GreyCover, InfoContainer, LinkList, LoadingOverlay, MainLayout, NavGuard, AppBar as NewAppBar, OverflowTooltip, ProfileInfo, SearchBar, ServiceMessage, Sidebar, SortableTable, UpdateStyle, index as Utils, convert2html, convert2txt, convertToRgba, createState, filterElements as filterContentElements, hex2rgb, hex2rgba, makeStyles, parseContent, parseContentState, useConfirmation, useContentElements, useDate, useDebounce, useGrepDialog, useStyles$d as useStyles, withStyles };
|
|
22648
22957
|
//# sourceMappingURL=index.js.map
|