61 lines
1.8 KiB
JavaScript
61 lines
1.8 KiB
JavaScript
import { useLayoutEffect, useRef } from "react";
|
|
import { useState } from "react";
|
|
import { createRef } from "react";
|
|
import Tag from "../Tag.jsx";
|
|
import styles from "../../styles/pdf_gen/tagContainer.module.scss";
|
|
export default function TagContainer({ tags }) {
|
|
|
|
const ref = useRef(createRef());
|
|
const [invisible, setInvisible] = useState([]);
|
|
useLayoutEffect(() => {
|
|
if (ref.current.clientWidth < ref.current.scrollWidth) {
|
|
|
|
var element = ref.current;
|
|
var invi = [];
|
|
for (var i = 0; i < element.childElementCount; i++) {
|
|
if (
|
|
element.children[i].offsetTop + element.children[i].offsetHeight >
|
|
element.offsetTop + element.offsetHeight ||
|
|
element.children[i].offsetLeft + element.children[i].offsetWidth >
|
|
element.offsetLeft + element.offsetWidth
|
|
) {
|
|
invi.push(element.children[i]);
|
|
|
|
element.children[i].style.display = "none";
|
|
}
|
|
}
|
|
|
|
setInvisible([...invi]);
|
|
}
|
|
}, [ref]);
|
|
return (
|
|
<>
|
|
<div ref={ref} className={styles.main}>
|
|
{tags.map((t, i) => {
|
|
//console.log('reff to pass', elementsRef.current[i])
|
|
return (
|
|
<div
|
|
/* ref={elementsRef.current[i]} */ style={{ margin: "0 2%" }}
|
|
data-name={t.name}
|
|
key={i}
|
|
>
|
|
<Tag tag={t} />
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
{
|
|
<div
|
|
style={{ opacity: invisible.length === 0 ? 0 : 1, flexGrow: ".5" }}
|
|
title={invisible.map((i) => {
|
|
return i.attributes["data-name"].value;
|
|
}).join(', ')}
|
|
className="pointer"
|
|
>
|
|
<Tag tag={{ color: "grey", name: `+${invisible.length}` }} />
|
|
</div>
|
|
}
|
|
</>
|
|
);
|
|
}
|