ux: form bar always/consistently in bottom position
Massimo Melina committed
Mar 14, 2022 at 15:26 UTC
239adc77917ca1826024e3ee980b36c0d29d1982
1 file changed
+16
-19
admin/src/Form.ts
+16
-19
@@ -52,23 +52,6 @@ export function Form({ fields, values, set, defaults, save, stickyBar, addToBar=
52
setPendingSubmit(false)
53
}, [pendingSubmit]) //eslint-disable-line
54
55
- const bar = save && h(Box, {
56
- display: 'flex',
57
- alignItems: 'center',
58
- sx: Object.assign({},
59
- stickyBar && { width: 'fit-content', zIndex: 2, backgroundColor: 'background.paper', position: 'sticky', top: 0 },
60
- barSx)
61
- },
62
- h(LoadingButton, {
63
- variant: 'contained',
64
- startIcon: h(Save),
65
- children: "Save",
66
- loading,
67
- ...save,
68
- }),
69
- ...addToBar,
70
- )
71
-
55
return h('form', {
56
ref: formRef,
57
onSubmit(ev) {
@@ -85,7 +68,6 @@ export function Form({ fields, values, set, defaults, save, stickyBar, addToBar=
68
gap: 3,
69
...rest
70
},
88
- stickyBar && bar,
71
h(Grid, { container:true, rowSpacing:3, columnSpacing:1 },
72
fields.map((row, idx) => {
73
if (!row)
@@ -113,7 +95,22 @@ export function Form({ fields, values, set, defaults, save, stickyBar, addToBar=
95
isValidElement(comp) ? comp : h(comp, rest) )
96
})
97
),
116
- !stickyBar && bar,
98
+ save && h(Box, {
99
+ display: 'flex',
100
+ alignItems: 'center',
101
+ sx: Object.assign({},
102
+ stickyBar && { width: 'fit-content', zIndex: 2, backgroundColor: 'background.paper', position: 'sticky', bottom: 0, p: 1, m: -1 },
103
+ barSx)
104
+ },
105
+ h(LoadingButton, {
106
+ variant: 'contained',
107
+ startIcon: h(Save),
108
+ children: "Save",
109
+ loading,
110
+ ...save,
111
+ }),
112
+ ...addToBar,
113
+ )
114
)
115
)
116
}