@etsoo/materialui 1.1.25 → 1.1.26

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.
Files changed (4) hide show
  1. package/lib/pages/EditPage.d.ts +7 -3
  2. package/lib/pages/EditPage.js +11 -10
  3. package/package.json +1 -1
  4. package/src/pages/EditPage.tsx +93 -95
package/lib/pages/EditPage.d.ts CHANGED
@@ -1,9 +1,9 @@
1
- import { FormEventHandler } from 'react';
2
- import { CommonPageProps } from './CommonPageProps';
1
+ import React, { FormEventHandler } from "react";
2
+ import { CommonPageProps } from "./CommonPageProps";
3
3
  /**
4
4
  * Add / Edit page props
5
5
  */
6
- export interface EditPageProps extends Omit<CommonPageProps, 'onSubmit'> {
6
+ export interface EditPageProps extends Omit<CommonPageProps, "onSubmit"> {
7
7
  /**
8
8
  * Is editing
9
9
  */
@@ -25,6 +25,10 @@ export interface EditPageProps extends Omit<CommonPageProps, 'onSubmit'> {
25
25
  * @default true
26
26
  */
27
27
  supportBack?: boolean;
28
+ /**
29
+ * Top part
30
+ */
31
+ topPart?: React.ReactNode;
28
32
  }
29
33
  /**
30
34
  * Add / Edit page
package/lib/pages/EditPage.js CHANGED
@@ -1,25 +1,26 @@
1
- import { Button, Grid } from '@mui/material';
2
- import React from 'react';
3
- import { MUGlobal } from '../MUGlobal';
4
- import { CommonPage, CommonPageScrollContainer } from './CommonPage';
5
- import SaveIcon from '@mui/icons-material/Save';
6
- import DeleteIcon from '@mui/icons-material/Delete';
7
- import { BackButton } from '../BackButton';
8
- import { Labels } from '../app/Labels';
1
+ import { Button, Grid } from "@mui/material";
2
+ import React from "react";
3
+ import { MUGlobal } from "../MUGlobal";
4
+ import { CommonPage, CommonPageScrollContainer } from "./CommonPage";
5
+ import SaveIcon from "@mui/icons-material/Save";
6
+ import DeleteIcon from "@mui/icons-material/Delete";
7
+ import { BackButton } from "../BackButton";
8
+ import { Labels } from "../app/Labels";
9
9
  /**
10
10
  * Add / Edit page
11
11
  * @param props Props
12
12
  */
13
13
  export function EditPage(props) {
14
14
  // Destruct
15
- const { children, isEditing, onDelete, onSubmit, paddings = MUGlobal.pagePaddings, scrollContainer = CommonPageScrollContainer, supportBack = true, submitDisabled = false, ...rest } = props;
15
+ const { children, isEditing, onDelete, onSubmit, paddings = MUGlobal.pagePaddings, scrollContainer = CommonPageScrollContainer, supportBack = true, submitDisabled = false, topPart, ...rest } = props;
16
16
  // Labels
17
17
  const labels = Labels.CommonPage;
18
18
  return (React.createElement(CommonPage, { paddings: paddings, scrollContainer: scrollContainer, ...rest },
19
+ topPart,
19
20
  React.createElement("form", { onSubmit: onSubmit },
20
21
  React.createElement(Grid, { container: true, justifyContent: "left", spacing: paddings, paddingTop: 1 }, children),
21
22
  React.createElement(Grid, { container: true, position: "sticky", display: "flex", gap: paddings, sx: {
22
- top: 'auto',
23
+ top: "auto",
23
24
  bottom: (theme) => MUGlobal.updateWithTheme(paddings, theme.spacing),
24
25
  paddingTop: paddings
25
26
  } },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.1.25",
3
+ "version": "1.1.26",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
package/src/pages/EditPage.tsx CHANGED
@@ -1,42 +1,47 @@
1
- import { Button, Grid } from '@mui/material';
2
- import React, { FormEventHandler } from 'react';
3
- import { MUGlobal } from '../MUGlobal';
4
- import { CommonPage, CommonPageScrollContainer } from './CommonPage';
5
- import { CommonPageProps } from './CommonPageProps';
6
- import SaveIcon from '@mui/icons-material/Save';
7
- import DeleteIcon from '@mui/icons-material/Delete';
8
- import { BackButton } from '../BackButton';
9
- import { Labels } from '../app/Labels';
1
+ import { Button, Grid } from "@mui/material";
2
+ import React, { FormEventHandler } from "react";
3
+ import { MUGlobal } from "../MUGlobal";
4
+ import { CommonPage, CommonPageScrollContainer } from "./CommonPage";
5
+ import { CommonPageProps } from "./CommonPageProps";
6
+ import SaveIcon from "@mui/icons-material/Save";
7
+ import DeleteIcon from "@mui/icons-material/Delete";
8
+ import { BackButton } from "../BackButton";
9
+ import { Labels } from "../app/Labels";
10
10
 
11
11
  /**
12
12
  * Add / Edit page props
13
13
  */
14
- export interface EditPageProps extends Omit<CommonPageProps, 'onSubmit'> {
15
- /**
16
- * Is editing
17
- */
18
- isEditing?: boolean;
14
+ export interface EditPageProps extends Omit<CommonPageProps, "onSubmit"> {
15
+ /**
16
+ * Is editing
17
+ */
18
+ isEditing?: boolean;
19
19
 
20
- /**
21
- * On form submit
22
- */
23
- onSubmit?: FormEventHandler<HTMLFormElement>;
20
+ /**
21
+ * On form submit
22
+ */
23
+ onSubmit?: FormEventHandler<HTMLFormElement>;
24
24
 
25
- /**
26
- * On delete callback
27
- */
28
- onDelete?: () => Promise<void> | void;
25
+ /**
26
+ * On delete callback
27
+ */
28
+ onDelete?: () => Promise<void> | void;
29
29
 
30
- /**
31
- * Submit button disabled or not
32
- */
33
- submitDisabled?: boolean;
30
+ /**
31
+ * Submit button disabled or not
32
+ */
33
+ submitDisabled?: boolean;
34
34
 
35
- /**
36
- * Support back click
37
- * @default true
38
- */
39
- supportBack?: boolean;
35
+ /**
36
+ * Support back click
37
+ * @default true
38
+ */
39
+ supportBack?: boolean;
40
+
41
+ /**
42
+ * Top part
43
+ */
44
+ topPart?: React.ReactNode;
40
45
  }
41
46
 
42
47
  /**
@@ -44,71 +49,64 @@ export interface EditPageProps extends Omit<CommonPageProps, 'onSubmit'> {
44
49
  * @param props Props
45
50
  */
46
51
  export function EditPage(props: EditPageProps) {
47
- // Destruct
48
- const {
49
- children,
50
- isEditing,
51
- onDelete,
52
- onSubmit,
53
- paddings = MUGlobal.pagePaddings,
54
- scrollContainer = CommonPageScrollContainer,
55
- supportBack = true,
56
- submitDisabled = false,
57
- ...rest
58
- } = props;
52
+ // Destruct
53
+ const {
54
+ children,
55
+ isEditing,
56
+ onDelete,
57
+ onSubmit,
58
+ paddings = MUGlobal.pagePaddings,
59
+ scrollContainer = CommonPageScrollContainer,
60
+ supportBack = true,
61
+ submitDisabled = false,
62
+ topPart,
63
+ ...rest
64
+ } = props;
59
65
 
60
- // Labels
61
- const labels = Labels.CommonPage;
66
+ // Labels
67
+ const labels = Labels.CommonPage;
62
68
 
63
- return (
64
- <CommonPage
65
- paddings={paddings}
66
- scrollContainer={scrollContainer}
67
- {...rest}
69
+ return (
70
+ <CommonPage paddings={paddings} scrollContainer={scrollContainer} {...rest}>
71
+ {topPart}
72
+ <form onSubmit={onSubmit}>
73
+ <Grid container justifyContent="left" spacing={paddings} paddingTop={1}>
74
+ {children}
75
+ </Grid>
76
+ <Grid
77
+ container
78
+ position="sticky"
79
+ display="flex"
80
+ gap={paddings}
81
+ sx={{
82
+ top: "auto",
83
+ bottom: (theme) =>
84
+ MUGlobal.updateWithTheme(paddings, theme.spacing),
85
+ paddingTop: paddings
86
+ }}
68
87
  >
69
- <form onSubmit={onSubmit}>
70
- <Grid
71
- container
72
- justifyContent="left"
73
- spacing={paddings}
74
- paddingTop={1}
75
- >
76
- {children}
77
- </Grid>
78
- <Grid
79
- container
80
- position="sticky"
81
- display="flex"
82
- gap={paddings}
83
- sx={{
84
- top: 'auto',
85
- bottom: (theme) =>
86
- MUGlobal.updateWithTheme(paddings, theme.spacing),
87
- paddingTop: paddings
88
- }}
89
- >
90
- {isEditing && onDelete && (
91
- <Button
92
- color="primary"
93
- variant="outlined"
94
- onClick={() => onDelete()}
95
- startIcon={<DeleteIcon color="warning" />}
96
- >
97
- {labels.delete}
98
- </Button>
99
- )}
100
- <Button
101
- variant="contained"
102
- type="submit"
103
- startIcon={<SaveIcon />}
104
- sx={{ flexGrow: 1 }}
105
- disabled={submitDisabled}
106
- >
107
- {labels.save}
108
- </Button>
109
- {supportBack && <BackButton title={labels.back} />}
110
- </Grid>
111
- </form>
112
- </CommonPage>
113
- );
88
+ {isEditing && onDelete && (
89
+ <Button
90
+ color="primary"
91
+ variant="outlined"
92
+ onClick={() => onDelete()}
93
+ startIcon={<DeleteIcon color="warning" />}
94
+ >
95
+ {labels.delete}
96
+ </Button>
97
+ )}
98
+ <Button
99
+ variant="contained"
100
+ type="submit"
101
+ startIcon={<SaveIcon />}
102
+ sx={{ flexGrow: 1 }}
103
+ disabled={submitDisabled}
104
+ >
105
+ {labels.save}
106
+ </Button>
107
+ {supportBack && <BackButton title={labels.back} />}
108
+ </Grid>
109
+ </form>
110
+ </CommonPage>
111
+ );
114
112
  }