admin: automatic hide number-field's clear-button when too small
Massimo Melina committed
Jan 23, 2025 at 18:56 UTC
85bac09c34a2801732b0363c7a9e572010d6f098
3 files changed
+9
-4
mui-grid-form/StringField.ts
+2
-1
@@ -15,7 +15,7 @@ export interface StringFieldProps extends FieldProps<string>, Partial<Omit<Stand
15
end?: ReactNode
16
wrap?: boolean
17
}
18
-export function StringField({ value, onChange, min, max, required, setApi, typing, start, end, onTyping, suggestions, wrap, ...props }: StringFieldProps) {
18
+export function StringField({ value, onChange, min, max, required, setApi, typing, start, end, onTyping, suggestions, wrap, fieldRef, ...props }: StringFieldProps) {
19
const normalized = value ?? ''
20
setApi?.({
21
getError() {
@@ -39,6 +39,7 @@ export function StringField({ value, onChange, min, max, required, setApi, typin
39
InputLabelProps: state || props.placeholder ? { shrink: true } : undefined,
40
...props,
41
...params,
42
+ ref: fieldRef,
43
sx: props.label ? props.sx : Object.assign({ '& .MuiInputBase-input': { pt: 1.5 } }, props.sx),
44
value: state,
45
onChange(ev) {
mui-grid-form/misc-fields.ts
+4
-1
@@ -9,6 +9,7 @@ import {
9
} from '@mui/material'
10
import { Cancel } from '@mui/icons-material'
11
import _ from 'lodash'
12
+import { useGetSize } from '@hfs/shared'
13
14
export function DisplayField({ value, empty='-', ...props }: any) {
15
if (!props.toField && empty !== undefined && value !== 0 && !value)
@@ -23,6 +24,7 @@ export function NumberField({ value, onChange, setApi, required, min=0, max, ste
24
: (value < min ? "too low" : value > max ? "too high" : false)
25
}
26
})
27
+ const size = useGetSize({ refProp: 'fieldRef' })
28
return h(StringField, {
29
type: 'number',
30
value: value == null ? '' : String(value),
@@ -35,7 +37,7 @@ export function NumberField({ value, onChange, setApi, required, min=0, max, ste
37
inputProps: { min, max, step, },
38
InputProps: _.merge({
39
sx: { '& input': { appearance: 'textfield' } },
38
- startAdornment: (clearable ?? props.placeholder) && (value || value === 0) && h(InputAdornment, {
40
+ startAdornment: (clearable ?? props.placeholder) && size.w! > 100 && (value || value === 0) && h(InputAdornment, {
41
position: 'start',
42
}, h(IconButton, {
43
size: 'small',
@@ -52,6 +54,7 @@ export function NumberField({ value, onChange, setApi, required, min=0, max, ste
54
}, unit),
55
}),
56
...props,
57
+ ...size.props,
58
})
59
}
60
shared/react.ts
+3
-2
@@ -121,7 +121,7 @@ export function useOnResize(cb: Callback<[number, number]>) {
121
}), [observer])
122
}
123
124
-export function useGetSize() {
124
+export function useGetSize({ refProp='ref' }={}) {
125
const [size, setSize] = useState<[number,number]>()
126
const ref = useRef<HTMLElement>()
127
const props = useOnResize(setSize)
@@ -132,7 +132,8 @@ export function useGetSize() {
132
ref,
133
props: {
134
...props,
135
- ref: propsRef
135
+ ...refProp !== 'ref' && { ref: undefined },
136
+ [refProp]: propsRef
137
}
138
}), [size, ref, propsRef])
139
}