index.tsx 808 B

123456789101112131415161718192021222324252627282930313233343536
  1. import React, { useState, useEffect } from 'react';
  2. import { Container, Label, ContentWrapper, Content } from './styled';
  3. type Props = {
  4. label: React.ReactNode;
  5. children?: React.ReactNode;
  6. isActive?: boolean;
  7. showBottomBorder?: boolean;
  8. };
  9. const Collapse: React.FC<Props> = ({
  10. label = '',
  11. children = '',
  12. isActive = false,
  13. showBottomBorder = false,
  14. }: Props) => {
  15. const [isCollapse, setCollapse] = useState(true);
  16. useEffect(() => {
  17. setCollapse(!isActive);
  18. }, [isActive]);
  19. return (
  20. <Container showBottomBorder={isActive && showBottomBorder}>
  21. <Label>{label}</Label>
  22. {children ? (
  23. <ContentWrapper isCollapse={isCollapse}>
  24. <Content>{children}</Content>
  25. </ContentWrapper>
  26. ) : null}
  27. </Container>
  28. );
  29. };
  30. export default Collapse;