Skip to content

Commit e8ba097

Browse files
stackingcatsstackingcats
committed
refactor: dialogs
1 parent c3306d6 commit e8ba097

File tree

7 files changed

+153
-83
lines changed

7 files changed

+153
-83
lines changed

‎src/common/components/input/buttons/Button.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ type ButtonProps = Omit<ButtonBaseProps, "variant"> & {
77

88
const Button = (props: ButtonProps): ReactElement => {
99
const buttonBaseProps: ButtonBaseProps = {
10-
...props,
1110
variant: props.variant || "contained",
11+
...props,
1212
};
1313
return ButtonBase(buttonBaseProps);
1414
};

‎src/common/components/input/buttons/ButtonBase.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,12 @@ export type ButtonBaseProps = ButtonProps & {
1313
};
1414

1515
const ButtonBase = (props: ButtonBaseProps): ReactElement => {
16-
const { text, tooltipTitle, tooltipPlacement } = props;
16+
const { text, tooltipTitle, tooltipPlacement, ...buttonProps } = props;
1717

1818
const materialButtonProps: ButtonProps = {
19-
...props,
2019
disableElevation: true,
2120
children: text,
21+
...buttonProps,
2222
};
2323

2424
return (
@@ -28,7 +28,9 @@ const ButtonBase = (props: ButtonBaseProps): ReactElement => {
2828
title={getFormattedTooltipTitle(tooltipTitle)}
2929
placement={tooltipPlacement}
3030
>
31-
<MaterialButton {...materialButtonProps} />
31+
<span>
32+
<MaterialButton {...materialButtonProps} />
33+
</span>
3234
</Tooltip>
3335
) : (
3436
<MaterialButton {...materialButtonProps} />

‎src/common/components/input/buttons/TextButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ type TextButtonProps = Omit<ButtonBaseProps, "variant">;
55

66
const TextButton = (props: TextButtonProps): ReactElement => {
77
const buttonBaseProps: ButtonBaseProps = {
8-
...props,
98
variant: "text",
9+
...props,
1010
};
1111
return ButtonBase(buttonBaseProps);
1212
};

‎src/common/components/layout/dialog/AnchoredDialog.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React, { ReactElement } from "react";
2+
import Dialog, { DialogProps } from "./Dialog";
3+
4+
type AnchoredDialogProps = DialogProps & {
5+
containerId: string;
6+
};
7+
8+
const AnchoredDialog = (props: AnchoredDialogProps): ReactElement => {
9+
const { containerId, ...dialogProps } = props;
10+
return (
11+
<Dialog
12+
style={{ position: "absolute" }}
13+
BackdropProps={{ style: { position: "absolute" } }}
14+
container={() => document.getElementById(containerId)}
15+
{...dialogProps}
16+
/>
17+
);
18+
};
19+
20+
export default AnchoredDialog;

‎src/common/components/layout/dialog/Dialog.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import {
2+
Dialog as MaterialDialog,
3+
DialogProps as MaterialDialogProps,
4+
DialogTitle,
5+
Divider,
6+
Grid,
7+
Typography,
8+
} from "@material-ui/core";
9+
import CloseIcon from "@material-ui/icons/Close";
10+
import React, { ReactElement } from "react";
11+
import IconButton from "../../input/buttons/IconButton";
12+
13+
export type DialogProps = MaterialDialogProps & {
14+
content: ReactElement | ReactElement[];
15+
handleClose: () => void;
16+
headerVisible?: boolean;
17+
title?: string;
18+
closeIconVisible?: boolean;
19+
};
20+
21+
const Dialog = (props: DialogProps): ReactElement => {
22+
const {
23+
content,
24+
handleClose,
25+
headerVisible,
26+
title,
27+
closeIconVisible,
28+
...dialogProps
29+
} = props;
30+
31+
const materialDialogProps: MaterialDialogProps = {
32+
onClose: handleClose,
33+
...dialogProps,
34+
};
35+
36+
return (
37+
<MaterialDialog {...materialDialogProps}>
38+
{headerVisible && (
39+
<>
40+
<DialogTitle>
41+
<Grid
42+
container
43+
justify="space-between"
44+
alignItems="center"
45+
wrap="nowrap"
46+
>
47+
{closeIconVisible && (
48+
<Grid item container xs lg>
49+
<IconButton
50+
onClick={handleClose}
51+
icon={<CloseIcon />}
52+
tooltipTitle="Close"
53+
/>
54+
</Grid>
55+
)}
56+
<Grid item container justify="center" xs={10} lg={11}>
57+
<Typography variant="h4" component="h4">
58+
{title}
59+
</Typography>
60+
</Grid>
61+
</Grid>
62+
</DialogTitle>
63+
<Divider />
64+
</>
65+
)}
66+
{content}
67+
</MaterialDialog>
68+
);
69+
};
70+
71+
export default Dialog;

‎src/dashboard/overview/ServiceDetails.tsx‎

Lines changed: 12 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,6 @@
1-
import {
2-
createStyles,
3-
Dialog,
4-
DialogTitle,
5-
Divider,
6-
Grid,
7-
makeStyles,
8-
Theme,
9-
} from "@material-ui/core";
10-
import Typography from "@material-ui/core/Typography";
11-
import CloseIcon from "@material-ui/icons/Close";
1+
import { createStyles, makeStyles, Theme } from "@material-ui/core";
122
import React, { ReactElement } from "react";
13-
import IconButton from "../../common/components/input/buttons/IconButton";
3+
import Dialog from "../../common/components/layout/dialog/Dialog";
144
import { Status } from "../../models/Status";
155
import { drawerWidth } from "../Dashboard";
166
import ServiceDetailsContent from "./ServiceDetailsContent";
@@ -38,38 +28,22 @@ const ServiceDetails = (props: ServiceDetailsProps): ReactElement => {
3828
const { status, handleClose } = props;
3929
const classes = useStyles();
4030

31+
const title = `General ${status.service} info`;
32+
4133
return (
4234
<Dialog
4335
open
44-
onClose={handleClose}
36+
handleClose={handleClose}
4537
classes={{
4638
paper: classes.dialog,
4739
}}
48-
>
49-
<DialogTitle>
50-
<Grid
51-
container
52-
justify="space-between"
53-
alignItems="center"
54-
wrap="nowrap"
55-
>
56-
<Grid item container xs lg>
57-
<IconButton
58-
onClick={handleClose}
59-
icon={<CloseIcon />}
60-
tooltipTitle="Close"
61-
/>
62-
</Grid>
63-
<Grid item container justify="center" xs={10} lg={11}>
64-
<Typography variant="h4" component="h4">
65-
General {status.service} info
66-
</Typography>
67-
</Grid>
68-
</Grid>
69-
</DialogTitle>
70-
<Divider />
71-
<ServiceDetailsContent status={status} closeDetails={handleClose} />
72-
</Dialog>
40+
headerVisible
41+
closeIconVisible
42+
title={title}
43+
content={
44+
<ServiceDetailsContent status={status} closeDetails={handleClose} />
45+
}
46+
/>
7347
);
7448
};
7549

‎src/dashboard/trade/placeOrder/PriceWarning.tsx‎

Lines changed: 43 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import {
22
createStyles,
3-
Dialog,
43
DialogActions,
54
DialogContent,
65
Grid,
@@ -11,6 +10,7 @@ import {
1110
import WarningIcon from "@material-ui/icons/Warning";
1211
import React, { ReactElement } from "react";
1312
import Button from "../../../common/components/input/buttons/Button";
13+
import AnchoredDialog from "../../../common/components/layout/dialog/AnchoredDialog";
1414
import { darkTheme } from "../../../themes";
1515

1616
type PriceWarningProps = {
@@ -32,48 +32,51 @@ const PriceWarning = (props: PriceWarningProps): ReactElement => {
3232
const { priceOffset, containerId, handleClose, onConfirmed } = props;
3333
const classes = useStyles();
3434

35+
const content = (
36+
<>
37+
<DialogContent>
38+
<Grid
39+
item
40+
container
41+
spacing={1}
42+
justify="center"
43+
alignItems="flex-start"
44+
wrap="nowrap"
45+
>
46+
<Grid item className={classes.iconContainer}>
47+
<WarningIcon fontSize="small" />
48+
</Grid>
49+
<Grid item>
50+
<Typography variant="body2" align="center">
51+
Once executed, this order will move the market price by{" "}
52+
{priceOffset}%.
53+
</Typography>
54+
<Typography variant="body2" align="center">
55+
Are you sure you want to go ahead?
56+
</Typography>
57+
</Grid>
58+
</Grid>
59+
</DialogContent>
60+
<DialogActions>
61+
<Button text="Cancel" variant="outlined" onClick={handleClose} />
62+
<Button
63+
text="Place Order"
64+
variant="contained"
65+
color="primary"
66+
onClick={onConfirmed}
67+
/>
68+
</DialogActions>
69+
</>
70+
);
71+
3572
return (
3673
<ThemeProvider theme={darkTheme}>
37-
<Dialog
74+
<AnchoredDialog
3875
open
39-
onClose={handleClose}
40-
style={{ position: "absolute" }}
41-
BackdropProps={{ style: { position: "absolute" } }}
42-
container={() => document.getElementById(containerId)}
43-
>
44-
<DialogContent>
45-
<Grid
46-
item
47-
container
48-
spacing={1}
49-
justify="center"
50-
alignItems="flex-start"
51-
wrap="nowrap"
52-
>
53-
<Grid item className={classes.iconContainer}>
54-
<WarningIcon fontSize="small" />
55-
</Grid>
56-
<Grid item>
57-
<Typography variant="body2" align="center">
58-
Once executed, this order will move the market price by{" "}
59-
{priceOffset}%.
60-
</Typography>
61-
<Typography variant="body2" align="center">
62-
Are you sure you want to go ahead?
63-
</Typography>
64-
</Grid>
65-
</Grid>
66-
</DialogContent>
67-
<DialogActions>
68-
<Button text="Cancel" variant="outlined" onClick={handleClose} />
69-
<Button
70-
text="Place Order"
71-
variant="contained"
72-
color="primary"
73-
onClick={onConfirmed}
74-
/>
75-
</DialogActions>
76-
</Dialog>
76+
handleClose={handleClose}
77+
containerId={containerId}
78+
content={content}
79+
/>
7780
</ThemeProvider>
7881
);
7982
};

0 commit comments

Comments
 (0)