30 lines
769 B
TypeScript
30 lines
769 B
TypeScript
|
import { CSSProperties } from 'react';
|
||
|
|
import { ScreenSize, useScreenSizeContext } from './useScreenSize';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Returns responsive modal box styles. On mobile the modal expands to fill the
|
||
|
|
* full viewport (no border radius, no max-width cap) so it doesn't float as a
|
||
|
|
* small centered card on a phone screen.
|
||
|
|
*/
|
||
|
|
export function useModalStyle(desktopMaxWidth: number): CSSProperties {
|
||
|
|
const screenSize = useScreenSizeContext();
|
||
|
|
const isMobile = screenSize === ScreenSize.Mobile;
|
||
|
|
|
||
|
|
if (isMobile) {
|
||
|
|
return {
|
||
|
|
width: '100%',
|
||
|
|
height: '100%',
|
||
|
|
maxWidth: '100%',
|
||
|
|
maxHeight: '100%',
|
||
|
|
borderRadius: 0,
|
||
|
|
overflow: 'hidden auto',
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
width: '100%',
|
||
|
|
maxWidth: desktopMaxWidth,
|
||
|
|
overflow: 'hidden',
|
||
|
|
};
|
||
|
|
}
|