1647815d24
* Revert "[Bug] Mock data section is missing (#5517)" This reverts commitbe48f2f5* Revert "[Feature #4542] : simple nav unify api/datasource (#4987)" This reverts commit8d8b9ed2
65 lines
1.5 KiB
TypeScript
65 lines
1.5 KiB
TypeScript
import React from "react";
|
|
import styled from "constants/DefaultTheme";
|
|
import { Colors } from "constants/Colors";
|
|
import { Collapse, Icon } from "@blueprintjs/core";
|
|
|
|
const CollapseWrapper = styled.div`
|
|
position: relative;
|
|
border-top: 1px solid #ffffff2e;
|
|
padding: 12px;
|
|
.collapse-title {
|
|
color: ${Colors.CADET_BLUE};
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.icon {
|
|
transition: transform 0.3s;
|
|
cursor: pointer;
|
|
&.collapse {
|
|
transform: rotate(-90deg);
|
|
}
|
|
}
|
|
}
|
|
.inner-content {
|
|
margin-top: 12px;
|
|
}
|
|
`;
|
|
|
|
function CollapseComponent(props: {
|
|
children?: React.ReactNode;
|
|
title?: string;
|
|
isOpen?: boolean;
|
|
}) {
|
|
const [open, toggleOpen] = React.useState(true);
|
|
const handleIsOpen = () => {
|
|
toggleOpen(!open);
|
|
};
|
|
if (!props.title) {
|
|
return <div>{props.children ? props.children : null}</div>;
|
|
}
|
|
return (
|
|
<CollapseWrapper>
|
|
<div className="collapse-title">
|
|
{props.title}
|
|
<Icon
|
|
className={`icon ${!open ? "collapse" : ""}`}
|
|
icon="chevron-down"
|
|
iconSize={16}
|
|
onClick={handleIsOpen}
|
|
/>
|
|
</div>
|
|
<Collapse isOpen={open} keepChildrenMounted>
|
|
<div className="inner-content">
|
|
{props.children ? props.children : null}
|
|
</div>
|
|
</Collapse>
|
|
</CollapseWrapper>
|
|
);
|
|
}
|
|
|
|
export default CollapseComponent;
|