Dialog redesign (#996)
This commit is contained in:
commit
6de23f25a0
126
src/components/DialogBoxV2/index.tsx
Normal file
126
src/components/DialogBoxV2/index.tsx
Normal file
|
@ -0,0 +1,126 @@
|
|||
import React from 'react';
|
||||
import {
|
||||
Box,
|
||||
Breakpoint,
|
||||
Button,
|
||||
Dialog,
|
||||
DialogProps,
|
||||
Stack,
|
||||
Typography,
|
||||
} from '@mui/material';
|
||||
import { t } from 'i18next';
|
||||
import { dialogCloseHandler } from 'components/DialogBox/TitleWithCloseButton';
|
||||
import { DialogBoxAttributesV2 } from 'types/dialogBox';
|
||||
|
||||
type IProps = React.PropsWithChildren<
|
||||
Omit<DialogProps, 'onClose' | 'maxSize'> & {
|
||||
onClose: () => void;
|
||||
attributes: DialogBoxAttributesV2;
|
||||
size?: Breakpoint;
|
||||
titleCloseButton?: boolean;
|
||||
}
|
||||
>;
|
||||
|
||||
export default function DialogBoxV2({
|
||||
attributes,
|
||||
children,
|
||||
open,
|
||||
onClose,
|
||||
...props
|
||||
}: IProps) {
|
||||
if (!attributes) {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
const handleClose = dialogCloseHandler({
|
||||
staticBackdrop: attributes.staticBackdrop,
|
||||
nonClosable: attributes.nonClosable,
|
||||
onClose: onClose,
|
||||
});
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
{...props}
|
||||
PaperProps={{
|
||||
sx: {
|
||||
padding: '8px 12px',
|
||||
maxWidth: '360px',
|
||||
},
|
||||
}}>
|
||||
<Stack spacing={'36px'} p={'16px'}>
|
||||
<Stack spacing={'19px'}>
|
||||
{attributes.icon && (
|
||||
<Box
|
||||
sx={{
|
||||
'& > svg': {
|
||||
fontSize: '32px',
|
||||
},
|
||||
}}>
|
||||
{attributes.icon}
|
||||
</Box>
|
||||
)}
|
||||
{attributes.title && (
|
||||
<Typography variant="h4" fontWeight={'bold'}>
|
||||
{attributes.title}
|
||||
</Typography>
|
||||
)}
|
||||
{children ||
|
||||
(attributes?.content && (
|
||||
<Typography color="text.secondary">
|
||||
{attributes.content}
|
||||
</Typography>
|
||||
))}
|
||||
</Stack>
|
||||
<Stack
|
||||
spacing={'8px'}
|
||||
direction={
|
||||
attributes.buttonDirection === 'row'
|
||||
? 'row-reverse'
|
||||
: 'column'
|
||||
}
|
||||
flex={1}>
|
||||
{attributes.proceed && (
|
||||
<Button
|
||||
size="large"
|
||||
color={attributes.proceed?.variant}
|
||||
onClick={() => {
|
||||
attributes.proceed.action();
|
||||
onClose();
|
||||
}}
|
||||
disabled={attributes.proceed.disabled}>
|
||||
{attributes.proceed.text}
|
||||
</Button>
|
||||
)}
|
||||
{attributes.close && (
|
||||
<Button
|
||||
size="large"
|
||||
color={attributes.close?.variant ?? 'secondary'}
|
||||
onClick={() => {
|
||||
attributes.close.action &&
|
||||
attributes.close?.action();
|
||||
onClose();
|
||||
}}>
|
||||
{attributes.close?.text ?? t('OK')}
|
||||
</Button>
|
||||
)}
|
||||
{attributes.buttons &&
|
||||
attributes.buttons.map((b) => (
|
||||
<Button
|
||||
size="large"
|
||||
key={b.text}
|
||||
color={b.variant}
|
||||
onClick={() => {
|
||||
b.action();
|
||||
onClose();
|
||||
}}
|
||||
disabled={b.disabled}>
|
||||
{b.text}
|
||||
</Button>
|
||||
))}
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
|
@ -25,7 +25,11 @@ import { styled, ThemeProvider } from '@mui/material/styles';
|
|||
import darkThemeOptions from 'themes/darkThemeOptions';
|
||||
import lightThemeOptions from 'themes/lightThemeOptions';
|
||||
import { CssBaseline, useMediaQuery } from '@mui/material';
|
||||
import { SetDialogBoxAttributes, DialogBoxAttributes } from 'types/dialogBox';
|
||||
import {
|
||||
SetDialogBoxAttributes,
|
||||
DialogBoxAttributes,
|
||||
DialogBoxAttributesV2,
|
||||
} from 'types/dialogBox';
|
||||
import {
|
||||
getFamilyPortalRedirectURL,
|
||||
getRoadmapRedirectURL,
|
||||
|
@ -57,6 +61,7 @@ import { setupI18n } from 'i18n';
|
|||
import createEmotionCache from 'themes/createEmotionCache';
|
||||
import { CacheProvider, EmotionCache } from '@emotion/react';
|
||||
import { AppProps } from 'next/app';
|
||||
import DialogBoxV2 from 'components/DialogBoxV2';
|
||||
|
||||
export const MessageContainer = styled('div')`
|
||||
background-color: #111;
|
||||
|
@ -95,6 +100,7 @@ type AppContextType = {
|
|||
theme: THEME_COLOR;
|
||||
setTheme: SetTheme;
|
||||
somethingWentWrong: () => void;
|
||||
setDialogBoxAttributesV2: (attributes: DialogBoxAttributesV2) => void;
|
||||
};
|
||||
|
||||
export enum FLASH_MESSAGE_TYPE {
|
||||
|
@ -144,7 +150,11 @@ export default function App(props) {
|
|||
const isLoadingBarRunning = useRef(false);
|
||||
const loadingBar = useRef(null);
|
||||
const [dialogMessage, setDialogMessage] = useState<DialogBoxAttributes>();
|
||||
const [dialogBoxAttributeV2, setDialogBoxAttributesV2] =
|
||||
useState<DialogBoxAttributesV2>();
|
||||
useState<DialogBoxAttributes>(null);
|
||||
const [messageDialogView, setMessageDialogView] = useState(false);
|
||||
const [dialogBoxV2View, setDialogBoxV2View] = useState(false);
|
||||
const [isFolderSyncRunning, setIsFolderSyncRunning] = useState(false);
|
||||
const [watchFolderView, setWatchFolderView] = useState(false);
|
||||
const [watchFolderFiles, setWatchFolderFiles] = useState<FileList>(null);
|
||||
|
@ -294,6 +304,10 @@ export default function App(props) {
|
|||
setMessageDialogView(true);
|
||||
}, [dialogMessage]);
|
||||
|
||||
useEffect(() => {
|
||||
setDialogBoxV2View(true);
|
||||
}, [dialogBoxV2View]);
|
||||
|
||||
useEffect(() => {
|
||||
setNotificationView(true);
|
||||
}, [notificationAttributes]);
|
||||
|
@ -327,6 +341,7 @@ export default function App(props) {
|
|||
};
|
||||
|
||||
const closeMessageDialog = () => setMessageDialogView(false);
|
||||
const closeDialogBoxV2 = () => setDialogBoxV2View(false);
|
||||
|
||||
const somethingWentWrong = () =>
|
||||
setDialogMessage({
|
||||
|
@ -385,6 +400,12 @@ export default function App(props) {
|
|||
onClose={closeMessageDialog}
|
||||
attributes={dialogMessage}
|
||||
/>
|
||||
<DialogBoxV2
|
||||
sx={{ zIndex: 1600 }}
|
||||
open={dialogBoxV2View}
|
||||
onClose={closeDialogBoxV2}
|
||||
attributes={dialogBoxAttributeV2}
|
||||
/>
|
||||
<Notification
|
||||
open={notificationView}
|
||||
onClose={closeNotification}
|
||||
|
@ -416,6 +437,7 @@ export default function App(props) {
|
|||
theme,
|
||||
setTheme,
|
||||
somethingWentWrong,
|
||||
setDialogBoxAttributesV2,
|
||||
}}>
|
||||
{loading || !isI18nReady ? (
|
||||
<VerticallyCentered>
|
||||
|
|
|
@ -180,7 +180,7 @@ const darkThemeOptions = createTheme({
|
|||
},
|
||||
styleOverrides: {
|
||||
root: {
|
||||
padding: '12px 16px',
|
||||
padding: '14px 16px',
|
||||
borderRadius: '4px',
|
||||
},
|
||||
startIcon: {
|
||||
|
|
|
@ -14,7 +14,7 @@ export interface DialogBoxAttributes {
|
|||
proceed?: {
|
||||
text: string;
|
||||
action: () => void;
|
||||
variant: ButtonProps['color'];
|
||||
variant?: ButtonProps['color'];
|
||||
disabled?: boolean;
|
||||
};
|
||||
secondary?: {
|
||||
|
@ -28,3 +28,39 @@ export interface DialogBoxAttributes {
|
|||
export type SetDialogBoxAttributes = React.Dispatch<
|
||||
React.SetStateAction<DialogBoxAttributes>
|
||||
>;
|
||||
|
||||
export interface DialogBoxAttributesV2 {
|
||||
icon?: React.ReactNode;
|
||||
title?: string;
|
||||
staticBackdrop?: boolean;
|
||||
nonClosable?: boolean;
|
||||
content?: any;
|
||||
close?: {
|
||||
text?: string;
|
||||
variant?: ButtonProps['color'];
|
||||
action?: () => void;
|
||||
};
|
||||
proceed?: {
|
||||
text: string;
|
||||
action: () => void;
|
||||
variant?: ButtonProps['color'];
|
||||
disabled?: boolean;
|
||||
};
|
||||
secondary?: {
|
||||
text: string;
|
||||
action: () => void;
|
||||
variant?: ButtonProps['color'];
|
||||
disabled?: boolean;
|
||||
};
|
||||
buttons?: {
|
||||
text: string;
|
||||
action: () => void;
|
||||
variant: ButtonProps['color'];
|
||||
disabled?: boolean;
|
||||
}[];
|
||||
buttonDirection?: 'row' | 'column';
|
||||
}
|
||||
|
||||
export type SetDialogBoxAttributesV2 = React.Dispatch<
|
||||
React.SetStateAction<DialogBoxAttributesV2>
|
||||
>;
|
||||
|
|
Loading…
Reference in a new issue