Skip to content
Snippets Groups Projects
Commit d43185db authored by Matthias Konitzny's avatar Matthias Konitzny :fire:
Browse files

Improved behavior of stacked collapsibles.

parent b824833b
No related branches found
No related tags found
1 merge request!3Master into new editor
.collapsible-content { .collapsible-content {
overflow: hidden; overflow: hidden;
transition: height 0.2s ease-in-out;
border-bottom: 1px solid #dee2e6 !important; border-bottom: 1px solid #dee2e6 !important;
} }
.collapsible-transition-height {
transition: height 0.2s ease-in-out;
}
.collapsible-content-padding > ul { .collapsible-content-padding > ul {
margin: 0 0 0 2em; margin: 0 0 0 2em;
} }
...@@ -12,19 +15,6 @@ ...@@ -12,19 +15,6 @@
padding: 10px 0 10px 10px; padding: 10px 0 10px 10px;
} }
.collapsible-rotate-center {
-moz-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
font-size: 4em;
transition: all 0.2s linear;
}
.collapsible-rotate-center.down {
transform: rotate(-90deg);
}
.collapsible-rotate-center.up {
transform: rotate(90deg);
}
.collapsible-button { .collapsible-button {
position: relative; position: relative;
display: flex; display: flex;
......
...@@ -6,14 +6,16 @@ interface CollapsibleProps { ...@@ -6,14 +6,16 @@ interface CollapsibleProps {
header: string | React.ReactNode; header: string | React.ReactNode;
children?: React.ReactNode | React.ReactNode[]; children?: React.ReactNode | React.ReactNode[];
color?: string; color?: string;
heightTransition?: boolean;
} }
// Implementation details at https://medium.com/edonec/build-a-react-collapsible-component-from-scratch-using-react-hooks-typescript-73dfd02c9208 // Implementation details partially from https://medium.com/edonec/build-a-react-collapsible-component-from-scratch-using-react-hooks-typescript-73dfd02c9208
function Collapsible({ function Collapsible({
open, open,
header, header,
children, children,
color = "gray", color = "gray",
heightTransition = true,
}: CollapsibleProps) { }: CollapsibleProps) {
const [isOpen, setIsOpen] = useState(open); const [isOpen, setIsOpen] = useState(open);
const [height, setHeight] = useState<number | undefined>( const [height, setHeight] = useState<number | undefined>(
...@@ -59,7 +61,7 @@ function Collapsible({ ...@@ -59,7 +61,7 @@ function Collapsible({
{header} {header}
</button> </button>
</div> </div>
<div className={"collapsible-content"} style={{ height }}> <div className={`collapsible-content ${heightTransition ? "collapsible-transition-height" : ""}`} style={{ height }}>
<div ref={ref}> <div ref={ref}>
<div className={"collapsible-content-padding"}> <div className={"collapsible-content-padding"}>
{children} {children}
......
...@@ -25,7 +25,7 @@ function Neighbors({ neighbors, nodeClickedCallback }: NeighborsProps) { ...@@ -25,7 +25,7 @@ function Neighbors({ neighbors, nodeClickedCallback }: NeighborsProps) {
<FancyScrollbar> <FancyScrollbar>
<Collapsible header={"Verwandte Inhalte"}> <Collapsible header={"Verwandte Inhalte"}>
{classes.map((cls) => ( {classes.map((cls) => (
<Collapsible header={cls} key={cls}> <Collapsible header={cls} key={cls} heightTransition={false}>
<ul> <ul>
{categories.get(cls).map((node) => ( {categories.get(cls).map((node) => (
<li key={node.name}>{node.name}</li> <li key={node.name}>{node.name}</li>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment