IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2025-01-24 23:36:48 -06:00
Code Issues Packages Projects Releases Wiki Activity

Reposition the select dropdown when the browser is resized. #5206

Browse Source
This commit is contained in:
Aditya Toshniwal 2022-10-20 16:21:59 +05:30 committed by GitHub
parent e17c50d304
commit dd25bb0fff
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/pgadmin/static/js/components/FormComponents.jsx
View File

@ -42,6 +42,7 @@ import QueryThresholds from './QueryThresholds';
import SelectThemes from './SelectThemes';
import { showFileManager } from '../helpers/showFileManager';
import { withColorPicker } from '../helpers/withColorPicker';
import { useWindowSize } from '../custom_hooks';
const useStyles = makeStyles((theme) => ({
@ -843,6 +844,7 @@ export const InputSelect = forwardRef(({
const [[finalOptions, isLoading], setFinalOptions] = useState([[], true]);
const theme = useTheme();
useWindowSize();
/* React will always take options let as changed parameter. So,
We cannot run the below effect with options dependency as it will keep on

15
web/pgadmin/static/js/custom_hooks.js
View File

@ -1,4 +1,4 @@
import {useRef, useEffect, useState, useCallback} from 'react';
import {useRef, useEffect, useState, useCallback, useLayoutEffect} from 'react';
import moment from 'moment';
/* React hook for setInterval */
@ -181,3 +181,16 @@ export function useKeyboardShortcuts(shortcuts, eleRef) {
shortcutsRef.current = shortcuts;
}, [shortcuts]);
}
export function useWindowSize() {
const [size, setSize] = useState([999999, 999999]);
useLayoutEffect(() => {
function updateSize() {
setSize([window.innerWidth, window.innerHeight]);
}
window.addEventListener('resize', updateSize);
updateSize();
return () => window.removeEventListener('resize', updateSize);
}, []);
return size;
}