fix expandable view
This commit is contained in:
parent
b2093e822a
commit
e0f01a58d2
2 changed files with 21 additions and 3 deletions
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in a new issue