@madie/madie-design-system 1.2.82 → 1.2.84
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.
|
@@ -183,7 +183,11 @@ const MadieDialog = ({
|
|
|
183
183
|
e.preventDefault();
|
|
184
184
|
onSubmit(e);
|
|
185
185
|
}}
|
|
186
|
-
style={{
|
|
186
|
+
style={{
|
|
187
|
+
display: "flex",
|
|
188
|
+
flexDirection: "column",
|
|
189
|
+
height: "100%",
|
|
190
|
+
}}
|
|
187
191
|
>
|
|
188
192
|
<Box
|
|
189
193
|
id="draggable-dialog-title"
|
|
@@ -194,7 +198,7 @@ const MadieDialog = ({
|
|
|
194
198
|
alignItems: "center",
|
|
195
199
|
padding: "24px 32px",
|
|
196
200
|
cursor: "move",
|
|
197
|
-
...titleBoxSx
|
|
201
|
+
...titleBoxSx,
|
|
198
202
|
}}
|
|
199
203
|
>
|
|
200
204
|
<DialogTitle
|
|
@@ -249,7 +253,16 @@ const MadieDialog = ({
|
|
|
249
253
|
</div>
|
|
250
254
|
</Box>
|
|
251
255
|
<Divider sx={{ borderColor: "#8c8c8c" }} />
|
|
252
|
-
<DialogContent
|
|
256
|
+
<DialogContent
|
|
257
|
+
sx={{
|
|
258
|
+
flexGrow: 1,
|
|
259
|
+
maxHeight: "calc(100vh - 250px)",
|
|
260
|
+
overflowX: "auto",
|
|
261
|
+
overflowY: "auto",
|
|
262
|
+
padding: "32px",
|
|
263
|
+
...contentSx,
|
|
264
|
+
}}
|
|
265
|
+
>
|
|
253
266
|
{showRequiredFieldMessage && (
|
|
254
267
|
<Box
|
|
255
268
|
sx={{
|
|
@@ -323,7 +336,16 @@ const MadieDialog = ({
|
|
|
323
336
|
</div>
|
|
324
337
|
</Box>
|
|
325
338
|
<Divider sx={{ borderColor: "#8c8c8c" }} />
|
|
326
|
-
<DialogContent
|
|
339
|
+
<DialogContent
|
|
340
|
+
sx={{
|
|
341
|
+
flexGrow: 1,
|
|
342
|
+
maxHeight: "calc(100vh - 250px)",
|
|
343
|
+
overflowX: "auto",
|
|
344
|
+
overflowY: "auto",
|
|
345
|
+
padding: "32px",
|
|
346
|
+
...contentSx,
|
|
347
|
+
}}
|
|
348
|
+
>
|
|
327
349
|
{children}
|
|
328
350
|
</DialogContent>
|
|
329
351
|
{(cancelButtonProps || continueButtonProps) && (
|
|
@@ -5,6 +5,8 @@ import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
|
|
|
5
5
|
import InputLabel from "../InputLabel";
|
|
6
6
|
import { kebabCase } from "lodash";
|
|
7
7
|
import PropTypes from "prop-types";
|
|
8
|
+
import dayjs from "dayjs";
|
|
9
|
+
import { ReadOnlyTextField } from "../ReadOnlyTextField";
|
|
8
10
|
|
|
9
11
|
const timeFieldStyle = {
|
|
10
12
|
width: "170px",
|
|
@@ -39,14 +41,28 @@ const timeFieldStyle = {
|
|
|
39
41
|
};
|
|
40
42
|
|
|
41
43
|
const TimeField = ({
|
|
44
|
+
id,
|
|
42
45
|
label,
|
|
43
46
|
value,
|
|
44
47
|
handleTimeChange,
|
|
48
|
+
readOnly,
|
|
45
49
|
disabled,
|
|
46
50
|
required,
|
|
47
51
|
error,
|
|
48
52
|
...rest
|
|
49
53
|
}) => {
|
|
54
|
+
if (readOnly) {
|
|
55
|
+
return (
|
|
56
|
+
<ReadOnlyTextField
|
|
57
|
+
required={required}
|
|
58
|
+
label={label}
|
|
59
|
+
id={id}
|
|
60
|
+
size="small"
|
|
61
|
+
{...rest}
|
|
62
|
+
value={value ? dayjs.utc(value).format("HH:mm:ss a") : "-"}
|
|
63
|
+
/>
|
|
64
|
+
);
|
|
65
|
+
}
|
|
50
66
|
return (
|
|
51
67
|
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
|
52
68
|
<InputLabel
|
|
@@ -90,11 +106,13 @@ const TimeField = ({
|
|
|
90
106
|
};
|
|
91
107
|
|
|
92
108
|
TimeField.propTypes = {
|
|
109
|
+
id: PropTypes.string,
|
|
93
110
|
label: PropTypes.string.isRequired,
|
|
94
111
|
value: PropTypes.object,
|
|
95
112
|
handleTimeChange: PropTypes.func.isRequired,
|
|
96
113
|
disabled: PropTypes.bool,
|
|
97
114
|
required: PropTypes.bool,
|
|
115
|
+
readOnly: PropTypes.bool,
|
|
98
116
|
error: PropTypes.string,
|
|
99
117
|
};
|
|
100
118
|
|