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:
13
src/hooks/useGridSpans.ts
Normal file
13
src/hooks/useGridSpans.ts
Normal 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
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user