beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

refactor and update message dialog

Browse source
This commit is contained in:
Abhinav 2022-05-03 17:45:27 +05:30
parent 97fc210ae7
commit f32ebd6f97
5 changed files with 143 additions and 135 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Collections/AllCollections.tsx
View file

@ -17,7 +17,6 @@ import CollectionCard from './CollectionCard';
import Divider from '@mui/material/Divider';
import CollectionSort from 'components/pages/gallery/CollectionSort';
import { CollectionType, COLLECTION_SORT_BY } from 'constants/collection';
import { DialogTitleWithCloseButton } from 'components/MessageDialog';
import { sortCollectionSummaries } from 'services/collectionService';
import {
Transition,
@ -25,6 +24,7 @@ import {
} from 'components/Collections/FloatingDrawer';
import { useLocalState } from 'hooks/useLocalState';
import { LS_KEYS } from 'utils/storage/localStorage';
import DialogTitleWithCloseButton from 'components/MessageDialog/TitleWithCloseButton';
const LeftSlideTransition = Transition('up');

2
src/components/Collections/CollectionNamer.tsx
View file

@ -4,7 +4,7 @@ import constants from 'utils/strings/constants';
import SubmitButton from 'components/SubmitButton';
import { Formik } from 'formik';
import * as Yup from 'yup';
import { DialogTitleWithCloseButton } from 'components/MessageDialog';
import DialogTitleWithCloseButton from 'components/MessageDialog/TitleWithCloseButton';
export interface CollectionNamerAttributes {
callback: (name) => void;

133
src/components/MessageDialog.tsx
View file

@ -1,133 +0,0 @@
import DialogTitle from '@mui/material/DialogTitle';
import IconButton from '@mui/material/IconButton';
import React from 'react';
import constants from 'utils/strings/constants';
import CloseIcon from '@mui/icons-material/Close';
import {
Breakpoint,
Button,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
Divider,
} from '@mui/material';
export type ButtonColors =
| 'inherit'
| 'secondary'
| 'primary'
| 'success'
| 'error'
| 'info'
| 'warning'
| 'danger';
export interface MessageAttributes {
title?: string;
staticBackdrop?: boolean;
nonClosable?: boolean;
content?: any;
close?: { text?: string; variant?: ButtonColors; action?: () => void };
proceed?: {
text: string;
action: () => void;
variant: ButtonColors;
disabled?: boolean;
};
}
export type SetDialogMessage = React.Dispatch<
React.SetStateAction<MessageAttributes>
>;
type Props = React.PropsWithChildren<{
show: boolean;
onHide: () => void;
attributes: MessageAttributes;
size?: Breakpoint;
}>;
export const DialogTitleWithCloseButton = (props) => {
const { children, onClose, ...other } = props;
return (
<DialogTitle sx={{ m: 0, p: 2 }} {...other}>
{children}
{onClose ? (
<IconButton
aria-label="close"
onClick={onClose}
sx={{
position: 'absolute',
right: 8,
top: 8,
color: (theme) => theme.palette.grey[400],
}}>
<CloseIcon />
</IconButton>
) : null}
</DialogTitle>
);
};
export default function MessageDialog({
attributes,
children,
...props
}: Props) {
if (!attributes) {
return <></>;
}
return (
<Dialog open={props.show} maxWidth={props.size} onClose={props.onHide}>
{attributes.title && (
<>
<DialogTitleWithCloseButton
onClose={
attributes.nonClosable ? () => null : props.onHide
}>
{attributes.title}
</DialogTitleWithCloseButton>
<Divider />
</>
)}
{(children || attributes?.content) && (
<DialogContent>
{children || (
<DialogContentText>
{attributes.content}
</DialogContentText>
)}
</DialogContent>
)}
{(attributes.close || attributes.proceed) && (
<DialogActions sx={{ m: '10px 10px' }}>
{attributes.close && (
<Button
variant="outlined"
color={attributes.close?.variant ?? 'secondary'}
onClick={() => {
attributes.close.action &&
attributes.close?.action();
props.onHide();
}}>
{attributes.close?.text ?? constants.OK}
</Button>
)}
{attributes.proceed && (
<Button
variant="outlined"
color={attributes.proceed?.variant ?? 'primary'}
onClick={() => {
attributes.proceed.action();
props.onHide();
}}
disabled={attributes.proceed.disabled}>
{attributes.proceed.text}
</Button>
)}
</DialogActions>
)}
</Dialog>
);
}

28
src/components/MessageDialog/TitleWithCloseButton.tsx Normal file
View file

@ -0,0 +1,28 @@
import React from 'react';
import { DialogTitle, IconButton } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
const DialogTitleWithCloseButton = (props) => {
const { children, onClose, ...other } = props;
return (
<DialogTitle sx={{ m: 0, p: 2 }} {...other}>
{children}
{onClose ? (
<IconButton
aria-label="close"
onClick={onClose}
sx={{
position: 'absolute',
right: 8,
top: 8,
color: (theme) => theme.palette.grey[400],
}}>
<CloseIcon />
</IconButton>
) : null}
</DialogTitle>
);
};
export default DialogTitleWithCloseButton;

113
src/components/MessageDialog/index.tsx Normal file
View file

@ -0,0 +1,113 @@
import React from 'react';
import constants from 'utils/strings/constants';
import {
Breakpoint,
Button,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
} from '@mui/material';
export type ButtonColors =
| 'inherit'
| 'secondary'
| 'primary'
| 'success'
| 'error'
| 'info'
| 'warning'
| 'danger';
export interface MessageAttributes {
title?: string;
staticBackdrop?: boolean;
nonClosable?: boolean;
content?: any;
close?: { text?: string; variant?: ButtonColors; action?: () => void };
proceed?: {
text: string;
action: () => void;
variant: ButtonColors;
disabled?: boolean;
};
}
export type SetDialogMessage = React.Dispatch<
React.SetStateAction<MessageAttributes>
>;
type Props = React.PropsWithChildren<{
show: boolean;
onHide: () => void;
attributes: MessageAttributes;
size?: Breakpoint;
}>;
export default function MessageDialog({
attributes,
children,
...props
}: Props) {
if (!attributes) {
return <></>;
}
return (
<Dialog
open={props.show}
maxWidth={props.size}
PaperProps={{ sx: { py: 4, px: 3 } }}
onClose={!attributes.nonClosable && props.onHide}>
{attributes.title && (
<DialogTitle
sx={{
p: 0,
pb: 2,
fontSize: (theme) => theme.typography.h5,
}}>
{attributes.title}
</DialogTitle>
)}
{(children || attributes?.content) && (
<DialogContent sx={{ p: 0, pb: 8 }}>
{children || (
<DialogContentText>
{attributes.content}
</DialogContentText>
)}
</DialogContent>
)}
{(attributes.close || attributes.proceed) && (
<DialogActions sx={{ p: 0 }}>
<>
{attributes.close && (
<Button
variant="contained"
color={attributes.close?.variant ?? 'secondary'}
onClick={() => {
attributes.close.action &&
attributes.close?.action();
props.onHide();
}}>
{attributes.close?.text ?? constants.OK}
</Button>
)}
{attributes.proceed && (
<Button
variant="contained"
color={attributes.proceed?.variant ?? 'primary'}
onClick={() => {
attributes.proceed.action();
props.onHide();
}}
disabled={attributes.proceed.disabled}>
{attributes.proceed.text}
</Button>
)}
</>
</DialogActions>
)}
</Dialog>
);
}