pdf-reader-web/components/ExpansionPanel/index.tsx

import React, { useState, useEffect } from 'react';

import {
  Container, Label, ContentWrapper, Content,
} from './styled';

type Props = {
  label: React.ReactNode;
  children?: React.ReactNode;
  isActive?: boolean;
  showBottomBorder?: boolean;
};

const Collapse: React.FunctionComponent<Props> = ({
  label = '',
  children = '',
  isActive = false,
  showBottomBorder = false,
}: Props) => {
  const [isCollapse, setCollapse] = useState(true);

  useEffect(() => {
    setCollapse(!isActive);
  }, [isActive]);

  return (
    <Container showBottomBorder={isActive && showBottomBorder}>
      <Label>
        {label}
      </Label>
      { children ? (
        <ContentWrapper isCollapse={isCollapse}>
          <Content>
            {children}
          </Content>
        </ContentWrapper>
      ) : null}
    </Container>
  );
};

export default Collapse;