@evoke-platform/ui-components 1.4.0-testing.0 → 1.4.0-testing.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/published/components/custom/Menubar/Menubar.d.ts +2 -3
- package/dist/published/components/custom/Menubar/Menubar.js +15 -12
- package/dist/published/index.d.ts +1 -0
- package/dist/published/index.js +1 -0
- package/dist/published/theme/hooks.d.ts +31 -0
- package/dist/published/theme/hooks.js +35 -0
- package/dist/published/theme/index.d.ts +3 -0
- package/dist/published/theme/index.js +3 -0
- package/package.json +1 -1
@@ -1,10 +1,9 @@
|
|
1
|
-
import {
|
2
|
-
import React from 'react';
|
1
|
+
import React, { ReactNode } from 'react';
|
3
2
|
export type MenuBarProps = {
|
4
3
|
showNotifications: boolean;
|
5
4
|
logo: string;
|
6
5
|
logoAltText?: string;
|
7
|
-
navItems?:
|
6
|
+
navItems?: ReactNode;
|
8
7
|
envName?: string;
|
9
8
|
};
|
10
9
|
export default function MenuBar(props: MenuBarProps): React.JSX.Element;
|
@@ -1,18 +1,21 @@
|
|
1
1
|
import { AppBar, Box, CardMedia, Toolbar, Typography } from '@mui/material';
|
2
2
|
import React from 'react';
|
3
|
-
import UIThemeProvider from '../../../theme';
|
4
|
-
const classes = {
|
5
|
-
title: {
|
6
|
-
flexGrow: 1,
|
7
|
-
height: 70,
|
8
|
-
},
|
9
|
-
logo: {
|
10
|
-
paddingRight: '16px',
|
11
|
-
height: '70px',
|
12
|
-
width: 'inherit',
|
13
|
-
},
|
14
|
-
};
|
3
|
+
import UIThemeProvider, { useResponsive } from '../../../theme';
|
15
4
|
export default function MenuBar(props) {
|
5
|
+
const { isXs: isMobileView } = useResponsive();
|
6
|
+
const classes = {
|
7
|
+
title: {
|
8
|
+
height: 70,
|
9
|
+
flexGrow: 1,
|
10
|
+
},
|
11
|
+
logo: {
|
12
|
+
paddingRight: '16px',
|
13
|
+
height: '70px',
|
14
|
+
maxWidth: isMobileView ? '220px' : null,
|
15
|
+
objectFit: 'contain',
|
16
|
+
width: 'auto',
|
17
|
+
},
|
18
|
+
};
|
16
19
|
return (React.createElement(UIThemeProvider, null,
|
17
20
|
React.createElement(AppBar, { color: "inherit", position: "fixed", elevation: 0, sx: { zIndex: (theme) => theme.zIndex.drawer + 1, borderBottom: '1px solid #919EAB3D' } },
|
18
21
|
React.createElement(Toolbar, { sx: { justifyContent: 'space-between' } },
|
@@ -6,6 +6,7 @@ export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField
|
|
6
6
|
export type { FormRef } from './components/custom';
|
7
7
|
export { NumericFormat } from './components/custom/FormField/InputFieldComponent';
|
8
8
|
export { Box, Container, Grid, Stack } from './components/layout';
|
9
|
+
export * from './theme';
|
9
10
|
export * as EVOKE_TYPES from './types';
|
10
11
|
export * from './util';
|
11
12
|
export type { AutocompleteRenderGroupParams, ButtonBaseActions, ButtonBaseClasses, FormControlProps, FormHelperTextProps, GridSize, MenuItemClasses, TextFieldProps, Theme, } from '@mui/material';
|
package/dist/published/index.js
CHANGED
@@ -5,5 +5,6 @@ export * from './components/core';
|
|
5
5
|
export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, HistoryLog, MenuBar, MultiSelect, RepeatableField, RichTextViewer, UserAvatar, } from './components/custom';
|
6
6
|
export { NumericFormat } from './components/custom/FormField/InputFieldComponent';
|
7
7
|
export { Box, Container, Grid, Stack } from './components/layout';
|
8
|
+
export * from './theme';
|
8
9
|
export * as EVOKE_TYPES from './types';
|
9
10
|
export * from './util';
|
@@ -0,0 +1,31 @@
|
|
1
|
+
import { Breakpoint } from '@mui/material/styles';
|
2
|
+
/**
|
3
|
+
* Custom hook for responsive design breakpoints using size terminology.
|
4
|
+
* Breakpoints based on MUI default theme:
|
5
|
+
* - xs: 0px to 599px
|
6
|
+
* - sm: 600px to 899px
|
7
|
+
* - md: 900px to 1199px
|
8
|
+
* - lg: 1200px to 1535px
|
9
|
+
* - xl: 1536px and up
|
10
|
+
* @returns Object with boolean flags for different breakpoints
|
11
|
+
*/
|
12
|
+
export declare function useResponsive(): {
|
13
|
+
/** Extra small screens (0px to 599px) */
|
14
|
+
isXs: boolean;
|
15
|
+
/** Small screens (600px to 899px) */
|
16
|
+
isSm: boolean;
|
17
|
+
/** Medium screens (900px to 1199px) */
|
18
|
+
isMd: boolean;
|
19
|
+
/** Large screens (1200px to 1535px) */
|
20
|
+
isLg: boolean;
|
21
|
+
/** Extra large screens (1536px and up) */
|
22
|
+
isXl: boolean;
|
23
|
+
/** Returns true if viewport width is smaller than the specified breakpoint */
|
24
|
+
smallerThan: (breakpoint: Breakpoint) => boolean;
|
25
|
+
/** Returns true if viewport width is larger than the specified breakpoint */
|
26
|
+
largerThan: (breakpoint: Breakpoint) => boolean;
|
27
|
+
/** Returns true if viewport width is exactly within the specified breakpoint range */
|
28
|
+
exactly: (breakpoint: Breakpoint) => boolean;
|
29
|
+
/** Returns true if viewport width is between the specified breakpoints */
|
30
|
+
between: (start: Breakpoint, end: Breakpoint) => boolean;
|
31
|
+
};
|
@@ -0,0 +1,35 @@
|
|
1
|
+
import { useTheme } from '@mui/material';
|
2
|
+
import useMediaQuery from '@mui/material/useMediaQuery';
|
3
|
+
/**
|
4
|
+
* Custom hook for responsive design breakpoints using size terminology.
|
5
|
+
* Breakpoints based on MUI default theme:
|
6
|
+
* - xs: 0px to 599px
|
7
|
+
* - sm: 600px to 899px
|
8
|
+
* - md: 900px to 1199px
|
9
|
+
* - lg: 1200px to 1535px
|
10
|
+
* - xl: 1536px and up
|
11
|
+
* @returns Object with boolean flags for different breakpoints
|
12
|
+
*/
|
13
|
+
export function useResponsive() {
|
14
|
+
const theme = useTheme();
|
15
|
+
return {
|
16
|
+
/** Extra small screens (0px to 599px) */
|
17
|
+
isXs: useMediaQuery(theme.breakpoints.only('xs')),
|
18
|
+
/** Small screens (600px to 899px) */
|
19
|
+
isSm: useMediaQuery(theme.breakpoints.only('sm')),
|
20
|
+
/** Medium screens (900px to 1199px) */
|
21
|
+
isMd: useMediaQuery(theme.breakpoints.only('md')),
|
22
|
+
/** Large screens (1200px to 1535px) */
|
23
|
+
isLg: useMediaQuery(theme.breakpoints.only('lg')),
|
24
|
+
/** Extra large screens (1536px and up) */
|
25
|
+
isXl: useMediaQuery(theme.breakpoints.only('xl')),
|
26
|
+
/** Returns true if viewport width is smaller than the specified breakpoint */
|
27
|
+
smallerThan: (breakpoint) => useMediaQuery(theme.breakpoints.down(breakpoint)),
|
28
|
+
/** Returns true if viewport width is larger than the specified breakpoint */
|
29
|
+
largerThan: (breakpoint) => useMediaQuery(theme.breakpoints.up(breakpoint)),
|
30
|
+
/** Returns true if viewport width is exactly within the specified breakpoint range */
|
31
|
+
exactly: (breakpoint) => useMediaQuery(theme.breakpoints.only(breakpoint)),
|
32
|
+
/** Returns true if viewport width is between the specified breakpoints */
|
33
|
+
between: (start, end) => useMediaQuery(theme.breakpoints.between(start, end)),
|
34
|
+
};
|
35
|
+
}
|