Fix redrawing when changing window size
This commit is contained in:
parent
a73b035932
commit
8453a7ccfe
@ -1,7 +1,7 @@
|
||||
|
||||
import React from 'react';
|
||||
import Container from 'react-bootstrap/Container';
|
||||
import useSize from '../../hooks/Size';
|
||||
import useInWidthRange from '../../hooks/InWidthRange';
|
||||
import { JobListProps } from './types';
|
||||
import JobsAccordion from './JobsAccordion';
|
||||
import JobsCards, { JobsCardsPlaceholder } from './JobsCards';
|
||||
@ -10,16 +10,11 @@ export type Props = {
|
||||
heading: string,
|
||||
} & JobListProps
|
||||
|
||||
const defaultProps = {
|
||||
entriesPerRow: 2,
|
||||
currentHeading: 'Currently',
|
||||
}
|
||||
|
||||
export default function JobHistory(props: Props) {
|
||||
const {SizeWrapper, size} = useSize()
|
||||
|
||||
const jobsList = size.width === 0 ? <JobsCardsPlaceholder /> : (
|
||||
size.width < 600 ? <JobsAccordion {...props} /> : <JobsCards {...props} />)
|
||||
const {SizeWrapper, inRange} = useInWidthRange(600)
|
||||
|
||||
const jobsList = inRange === undefined ? <JobsCardsPlaceholder /> : (
|
||||
inRange ? <JobsAccordion {...props} /> : <JobsCards {...props} />)
|
||||
|
||||
return (
|
||||
<Container>
|
||||
|
28
src/app/hooks/InWidthRange.tsx
Normal file
28
src/app/hooks/InWidthRange.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
import React, { ForwardedRef, ReactNode, forwardRef, useEffect, useLayoutEffect, useRef, useState } from "react";
|
||||
|
||||
export default function useInWidthRange(threshold: number) {
|
||||
const areaRef = useRef<HTMLDivElement>(null)
|
||||
const [inRange, setInRange] = useState<boolean | undefined>(undefined)
|
||||
|
||||
function SizeWrapper(props: {children: ReactNode }) {
|
||||
return (
|
||||
<div ref={areaRef}>{props.children}</div>
|
||||
)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
function updateState() {
|
||||
if (areaRef.current) {
|
||||
const width = areaRef.current.offsetWidth
|
||||
setInRange(width <= threshold)
|
||||
}
|
||||
}
|
||||
updateState()
|
||||
addEventListener("resize", updateState);
|
||||
return () => {
|
||||
removeEventListener("resize", updateState)
|
||||
};
|
||||
}, [areaRef, threshold, setInRange])
|
||||
|
||||
return {SizeWrapper, inRange}
|
||||
}
|
@ -1,30 +0,0 @@
|
||||
import React, { ForwardedRef, ReactNode, forwardRef, useEffect, useLayoutEffect, useRef, useState } from "react";
|
||||
|
||||
export default function useSize() {
|
||||
const areaRef = useRef<HTMLDivElement>(null)
|
||||
const [size, setSize] = useState({ width: 0, height: 0 })
|
||||
|
||||
function SizeWrapper(props: {children: ReactNode }) {
|
||||
return (
|
||||
<div ref={areaRef}>{props.children}</div>
|
||||
)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
function updateSize() {
|
||||
if (areaRef.current) {
|
||||
setSize({
|
||||
width: areaRef.current.offsetWidth,
|
||||
height: areaRef.current.offsetHeight
|
||||
})
|
||||
}
|
||||
}
|
||||
updateSize()
|
||||
addEventListener("resize", updateSize);
|
||||
return () => {
|
||||
removeEventListener("resize", updateSize)
|
||||
};
|
||||
}, [areaRef, setSize])
|
||||
|
||||
return {SizeWrapper, size}
|
||||
}
|
Loading…
Reference in New Issue
Block a user