better code
Massimo Melina committed
Feb 22, 2025 at 10:49 UTC
d47bc510ad8f5c11ab61b8f7814ccb67c2d1d388
3 files changed
+60
-61
admin/src/VerticalSwitch.ts
+46
-43
@@ -10,50 +10,53 @@ export function switchBtn(value: boolean | undefined, onChange: (v: boolean) =>
10
})
11
}
12
13
-export const VerticalSwitch = styled(Switch)(({ theme }) => ({
14
- height: 48, width: 26,
15
- padding: 5,
16
- '& .MuiSwitch-switchBase': {
17
- margin: 1,
18
- padding: 0,
19
- transform: 'translateY(22px)',
20
- '&.Mui-checked': {
21
- color: theme.palette.primary.contrastText,
22
- transform: 'translateY(2px)',
23
- '& .MuiSwitch-thumb:before': {
24
- backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
25
- theme.palette.primary.contrastText
26
- )}" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/></svg>')`,
13
+export const VerticalSwitch = styled(Switch)(({ theme, size }) => {
14
+ const small = size && size === 'small'
15
+ return ({
16
+ height: small ? 36 : 48, width: small ? 18 : 26,
17
+ padding: 5,
18
+ '& .MuiSwitch-switchBase': {
19
+ margin: 1,
20
+ padding: 0,
21
+ transform: `translateY(${small ? 16 : 22}px)`,
22
+ '&.Mui-checked': {
23
+ color: theme.palette.primary.contrastText,
24
+ transform: 'translateY(2px)',
25
+ '& .MuiSwitch-thumb:before': {
26
+ backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="${small ? 14 : 20}" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
27
+ theme.palette.primary.contrastText
28
+ )}" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/></svg>')`,
29
+ },
30
+ '& + .MuiSwitch-track': {
31
+ backgroundColor: theme.palette.grey[500],
32
+ },
33
},
28
- '& + .MuiSwitch-track': {
29
- backgroundColor: theme.palette.grey[500],
34
+ },
35
+ '& .Mui-checked .MuiSwitch-thumb': {
36
+ backgroundColor: theme.palette.primary.main,
37
+ boxShadow: '0px 2px 1px 1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)',
38
+ },
39
+ '& .MuiSwitch-thumb': {
40
+ width: small ? 16 : 24,
41
+ height: small ? 16 : 24,
42
+ backgroundColor: theme.palette.grey[700],
43
+ '&::before': {
44
+ content: "''",
45
+ position: 'absolute',
46
+ width: '85%',
47
+ height: '85%',
48
+ left: 0,
49
+ top: 0,
50
+ backgroundRepeat: 'no-repeat',
51
+ backgroundPosition: 'center',
52
+ backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="${small ? 14 : 20}" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
53
+ theme.palette.primary.contrastText
54
+ )}" d="M19,13H5V11H19V13Z"/></svg>')`,
55
},
56
},
32
- },
33
- '& .Mui-checked .MuiSwitch-thumb': {
34
- backgroundColor: theme.palette.primary.main,
35
- boxShadow: '0px 2px 1px 1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)',
36
- },
37
- '& .MuiSwitch-thumb': {
38
- width: 24,
39
- height: 24,
40
- backgroundColor: theme.palette.grey[700],
41
- '&::before': {
42
- content: "''",
43
- position: 'absolute',
44
- width: '85%',
45
- height: '85%',
46
- left: 0,
47
- top: 0,
48
- backgroundRepeat: 'no-repeat',
49
- backgroundPosition: 'center',
50
- backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
51
- theme.palette.primary.contrastText
52
- )}" d="M19,13H5V11H19V13Z"/></svg>')`,
57
+ '& .MuiSwitch-track': {
58
+ backgroundColor: theme.palette.grey[500],
59
+ borderRadius: 20 / 2,
60
},
54
- },
55
- '& .MuiSwitch-track': {
56
- backgroundColor: theme.palette.grey[500],
57
- borderRadius: 20 / 2,
58
- },
59
-}))
\ No newline at end of file
61
+ })
62
+})
\ No newline at end of file
mui-grid-form/index.ts
+13
-16
@@ -55,7 +55,7 @@ type Dict<T=any> = Record<string,T>
55
56
export interface FormProps<Values> extends Partial<BoxProps> {
57
fields: (FieldDescriptor | ReactElement | null | undefined | false)[]
58
- defaults?: (f:FieldDescriptor) => any
58
+ defaults?: (f:FieldDescriptor) => Partial<FieldDescriptor>
59
values: Values
60
set: (v: any, fieldK: keyof Values) => void
61
save: false | Partial<Parameters<typeof Button>[0]> | (()=>any)
@@ -123,14 +123,18 @@ export function Form<Values extends Dict>({
123
return null
124
if (isValidElement(row))
125
return h(Grid, { key: idx, xs: 12 }, row)
126
- const { k, fromField=_.identity, toField=_.identity, getError, error, ...field } = row
126
+ if (defaults)
127
+ row = { ...defaults?.(row), ...row }
128
+ const { k, fromField=_.identity, toField=_.identity, getError, error,
129
+ xs=12, sm, md, lg, xl, comp=StringField, before, after, parentProps,
130
+ ...field } = row
131
let errMsg = errors[k] || error || fieldExceptions[k]
132
if (errMsg === true)
133
errMsg = "Not valid"
134
if (k) {
135
const originalValue = row.hasOwnProperty('value') ? row.value : values?.[k]
132
- const whole = { ...row, ...field }
136
Object.assign(field, {
137
+ name: k,
138
value: toField(originalValue),
139
error: Boolean(errMsg || error) || undefined,
140
setApi(api) { apis[k] = api },
@@ -162,20 +166,13 @@ export function Form<Values extends Dict>({
166
)
167
if (field.label === undefined)
168
field.label = labelFromKey(k)
165
- _.defaults(field, defaults?.(whole))
166
- }
167
- {
168
- const { xs=12, sm, md, lg, xl, comp=StringField, before, after, parentProps,
169
- fromField, toField, // don't propagate
170
- ...rest } = field
171
- Object.assign(rest, { name: k })
172
- const n = (keyMet[k] = (keyMet[k] || 0) + 1)
173
- return h(Grid, { key: k ? k + n : idx, xs, sm, md, lg, xl, ...parentProps },
174
- before,
175
- isValidElement(comp) ? comp : h(comp, rest),
176
- after
177
- )
169
}
170
+ const n = (keyMet[k] = (keyMet[k] || 0) + 1)
171
+ return h(Grid, { key: k ? k + n : idx, xs, sm, md, lg, xl, ...parentProps },
172
+ before,
173
+ isValidElement(comp) ? comp : h(comp, field),
174
+ after
175
+ )
176
})
177
),
178
saveBtn && h(Box, {
src/roots.ts
+1
-2
@@ -35,8 +35,7 @@ export const rootsMiddleware: Koa.Middleware = (ctx, next) =>
35
disconnect(ctx, forceAddress.key())
36
return true // true will avoid calling next
37
}
38
- if (!root || root === '/') return // not transformation is required
39
- if (root === '' || root === '/') return
38
+ if (!root || root === '/') return // no transformation is required
39
changeUriParams(v => join(root, v))
40
if (!params)
41
ctx.path = join(root, ctx.path)