123456789101112131415161718192021222324252627282930313233343536 |
- 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.FC<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;
|