add support for icon in dialog box
This commit is contained in:
parent
50117f23e1
commit
b27eb536a1
18
src/components/DialogBox/DialogIcon.tsx
Normal file
18
src/components/DialogBox/DialogIcon.tsx
Normal file
|
@ -0,0 +1,18 @@
|
||||||
|
import { Box } from '@mui/material';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
export default function DialogIcon({ icon }: { icon: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
className="DialogIcon"
|
||||||
|
sx={{
|
||||||
|
svg: {
|
||||||
|
width: '48px',
|
||||||
|
height: '48px',
|
||||||
|
},
|
||||||
|
color: 'stroke.secondary',
|
||||||
|
}}>
|
||||||
|
{icon}
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
|
@ -5,6 +5,12 @@ const DialogBoxBase = styled(Dialog)(({ theme }) => ({
|
||||||
padding: theme.spacing(1, 1.5),
|
padding: theme.spacing(1, 1.5),
|
||||||
maxWidth: '346px',
|
maxWidth: '346px',
|
||||||
},
|
},
|
||||||
|
|
||||||
|
'& .DialogIcon': {
|
||||||
|
padding: theme.spacing(2),
|
||||||
|
paddingBottom: theme.spacing(1),
|
||||||
|
},
|
||||||
|
|
||||||
'& .MuiDialogTitle-root': {
|
'& .MuiDialogTitle-root': {
|
||||||
padding: theme.spacing(2),
|
padding: theme.spacing(2),
|
||||||
paddingBottom: theme.spacing(1),
|
paddingBottom: theme.spacing(1),
|
||||||
|
@ -12,6 +18,11 @@ const DialogBoxBase = styled(Dialog)(({ theme }) => ({
|
||||||
'& .MuiDialogContent-root': {
|
'& .MuiDialogContent-root': {
|
||||||
padding: theme.spacing(2),
|
padding: theme.spacing(2),
|
||||||
},
|
},
|
||||||
|
|
||||||
|
'.DialogIcon + .MuiDialogTitle-root': {
|
||||||
|
paddingTop: 0,
|
||||||
|
},
|
||||||
|
|
||||||
'.MuiDialogTitle-root + .MuiDialogContent-root': {
|
'.MuiDialogTitle-root + .MuiDialogContent-root': {
|
||||||
paddingTop: 0,
|
paddingTop: 0,
|
||||||
},
|
},
|
||||||
|
|
|
@ -13,6 +13,7 @@ import DialogTitleWithCloseButton, {
|
||||||
} from './TitleWithCloseButton';
|
} from './TitleWithCloseButton';
|
||||||
import DialogBoxBase from './base';
|
import DialogBoxBase from './base';
|
||||||
import { DialogBoxAttributes } from 'types/dialogBox';
|
import { DialogBoxAttributes } from 'types/dialogBox';
|
||||||
|
import DialogIcon from './DialogIcon';
|
||||||
|
|
||||||
type IProps = React.PropsWithChildren<
|
type IProps = React.PropsWithChildren<
|
||||||
Omit<DialogProps, 'onClose' | 'maxSize'> & {
|
Omit<DialogProps, 'onClose' | 'maxSize'> & {
|
||||||
|
@ -48,6 +49,7 @@ export default function DialogBox({
|
||||||
maxWidth={size}
|
maxWidth={size}
|
||||||
onClose={handleClose}
|
onClose={handleClose}
|
||||||
{...props}>
|
{...props}>
|
||||||
|
{attributes.icon && <DialogIcon icon={attributes.icon} />}
|
||||||
{attributes.title && (
|
{attributes.title && (
|
||||||
<DialogTitleWithCloseButton
|
<DialogTitleWithCloseButton
|
||||||
onClose={
|
onClose={
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import { ButtonProps } from '@mui/material';
|
import { ButtonProps } from '@mui/material';
|
||||||
|
|
||||||
export interface DialogBoxAttributes {
|
export interface DialogBoxAttributes {
|
||||||
|
icon?: React.ReactNode;
|
||||||
title?: string;
|
title?: string;
|
||||||
staticBackdrop?: boolean;
|
staticBackdrop?: boolean;
|
||||||
nonClosable?: boolean;
|
nonClosable?: boolean;
|
||||||
|
|
Loading…
Reference in a new issue