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

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

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

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

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

  const handleClick = () => {
    setCollapse(!isCollapse);
  };

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

  return (
    <Wrapper>
      <Label onClick={handleClick}>
        {label}
      </Label>
      { children ? (
        <ContentWrapper isCollapse={isCollapse}>
          <Content>
            {children}
          </Content>
        </ContentWrapper>
      ) : null}
    </Wrapper>
  );
};

Collapse.defaultProps = {
  label: '',
  children: '',
};

export default Collapse;