components+hooks: refactor window measurement

We relocated window measurment logic into a hook, useGridSpans(), which
tells us the appropriate number of columns for the IconGrid. This is
useful for rendering an InfoPanel in the right place! In future we
should look into a custom implementation using ResizeObserver and
polyfills, and that may be extensible for other use-cases.
This commit is contained in:
rektdeckard
2020-09-24 19:24:00 -04:00
parent 628667c719
commit 22f066c6a9
4 changed files with 17 additions and 8 deletions

13
src/hooks/useGridSpans.ts Normal file
View File

@@ -0,0 +1,13 @@
import { useWindowSize } from "react-use";
const GRID_PADDING = 32; // .grid-container { padding }
const TOOLBAR_WIDTH = 17; // IS THIS BROWSER-SPECIFIC?
const MAX_GRID_WIDTH = 1120; // .grid { max-width }
const ITEM_WIDTH = 168; // .grid-item { width; height; margin }
export default (): number => {
const { width } = useWindowSize();
return Math.floor(
Math.min(width - GRID_PADDING - TOOLBAR_WIDTH, MAX_GRID_WIDTH) / ITEM_WIDTH
);
};