dev: useLogBreakpoint
Massimo Melina committed
Jan 22, 2024 at 23:18 UTC
d4077b8a402d96b1e15ead32b5f2f2986b99278e
2 files changed
+12
-4
admin/src/MenuButton.ts
+2
-2
@@ -15,9 +15,9 @@ export default function MenuButton({ items, ...rest }: Props) {
15
h(Button, {
16
id,
17
'aria-controls': open ? menuId : undefined,
18
- 'aria-haspopup': 'true',
18
+ 'aria-haspopup': true,
19
'aria-expanded': open ? true : undefined,
20
- onClick: (event: MouseEvent<HTMLButtonElement>) => {
20
+ onClick(event: MouseEvent<HTMLButtonElement>) {
21
setAnchorEl(event.currentTarget)
22
},
23
...rest,
admin/src/mui.ts
+10
-2
@@ -26,6 +26,12 @@ export function useBreakpoint(breakpoint: Breakpoint) {
26
return useMediaQuery((theme: any) => theme.breakpoints.up(breakpoint), { noSsr:true }) // without noSsr, first execution always returns false
27
}
28
29
+// for debug purposes
30
+export function useLogBreakpoint() {
31
+ const breakpoints = ['xl', 'lg', 'md', 'sm', 'xs'] as const
32
+ console.log('BREAKPOINT', breakpoints[_.findIndex(breakpoints.map(x => useBreakpoint(x)), x => x)])
33
+}
34
+
35
interface IconProgressProps {
36
icon: SvgIconComponent,
37
progress: number,
@@ -150,7 +156,8 @@ interface BtnProps extends Omit<LoadingButtonProps,'disabled'|'title'|'onClick'>
156
tooltipProps?: TooltipProps
157
onClick?: (...args: Parameters<NonNullable<ButtonProps['onClick']>>) => Promisable<any>
158
}
153
-export function Btn({ icon, title, onClick, disabled, progress, link, tooltipProps, confirm, doneMessage, labelFrom, children, ...rest }: BtnProps) {
159
+
160
+export const Btn = forwardRef(({ icon, title, onClick, disabled, progress, link, tooltipProps, confirm, doneMessage, labelFrom, children, ...rest }: BtnProps, ref: any) => {
161
const [loading, setLoading] = useStateMounted(false)
162
if (typeof disabled === 'string') {
163
title = disabled
@@ -160,6 +167,7 @@ export function Btn({ icon, title, onClick, disabled, progress, link, tooltipPro
167
onClick = () => window.open(link)
168
const showLabel = useBreakpoint(labelFrom || 'xs')
169
let ret: ReturnType<FC> = h(LoadingButton, {
170
+ ref,
171
variant: 'contained',
172
startIcon: icon && h(icon),
173
loading: Boolean(loading || progress),
@@ -193,7 +201,7 @@ export function Btn({ icon, title, onClick, disabled, progress, link, tooltipPro
201
if (title)
202
ret = h(Tooltip, { title, ...tooltipProps, children: ret })
203
return ret
196
-}
204
+})
205
206
function execDoneMessage(msg: boolean | string | undefined) {
207
if (msg)