fix expandable view

This commit is contained in:
Asad Umar 2022-01-30 03:35:47 +05:00 committed by Thomas Zarebczan
parent b2093e822a
commit e0f01a58d2
2 changed files with 21 additions and 3 deletions

View file

@ -8,7 +8,7 @@ import {
TabPanel as ReachTabPanel,
} from '@reach/tabs';
import classnames from 'classnames';
import { useOnResize } from '../../effects/use-on-resize';
import { useOnResize } from 'effects/use-on-resize';
// Tabs are a compound component
// The components are used individually, but they will still interact and share state

View file

@ -2,7 +2,7 @@
import React, { useRef, useState } from 'react';
import classnames from 'classnames';
import Button from 'component/button';
import { useRect } from '@reach/rect';
import { useOnResize } from 'effects/use-on-resize';
const COLLAPSED_HEIGHT = 120;
@ -12,9 +12,27 @@ type Props = {
export default function Expandable(props: Props) {
const [expanded, setExpanded] = useState(false);
const [rect, setRect] = useState();
const { children } = props;
const ref = useRef();
const rect = useRect(ref);
// Update the rect initially & when the window size changes.
useOnResize(() => {
if (ref.current) {
setRect(ref.current.getBoundingClientRect());
}
});
// Update the rect when children changes,
// not sure if this is needed but a situation could arise when the
// component re-renders with a different children prop,
// Can enable on a later date if needed.
// useLayoutEffect(() => {
// console.log('render, useLayoutEffect');
// if (ref.current) {
// setRect(ref.current.getBoundingClientRect());
// }
// }, [children]);
function handleClick() {
setExpanded(!expanded);