Turn class component into function component

This commit is contained in:
Pierre HUBERT 2023-08-22 17:08:58 +02:00
parent 4d28696be8
commit 6630037ac0
2 changed files with 192 additions and 196 deletions

View File

@ -21,7 +21,7 @@ import { useFamily } from "../../widgets/BaseFamilyRoute";
import { MemberItem } from "../../widgets/MemberItem";
import { RouterLink } from "../../widgets/RouterLink";
import { BasicFamilyTree } from "../../widgets/BasicFamilyTree";
import ComlexFamilyTree from "../../widgets/complex_family_tree/ComplexFamilyTree";
import { ComplexFamilyTree } from "../../widgets/complex_family_tree/ComplexFamilyTree";
enum CurrTab {
BasicTree,
@ -122,7 +122,7 @@ export function FamilyMemberTreeRoute(): React.ReactElement {
{currTab === CurrTab.BasicTree ? (
<BasicFamilyTree tree={tree!} />
) : (
<ComlexFamilyTree />
<ComplexFamilyTree />
)}
</Paper>
</div>

View File

@ -2,14 +2,9 @@ import React from "react";
import f3 from "family-chart";
import "./family-chart.css";
import { jsPDF } from "jspdf";
import "svg2pdf.js";
export default class ComlexFamilyTree extends React.Component {
cont = React.createRef();
componentDidMount() {
if (!this.cont.current) return;
export function ComplexFamilyTree(): React.ReactElement {
const refCb = (container: HTMLDivElement) => {
if (!container) return;
const store = f3.createStore({
data: data(),
@ -44,9 +39,13 @@ export default class ComlexFamilyTree extends React.Component {
view.setCard(Card);
store.setOnUpdate((props) => view.update(props || {}));
store.update.tree({ initial: true });
};
function data() {
return [
return <div className="f3" id="FamilyChart" ref={refCb}></div>;
}
const data = () =>
structuredClone([
{
id: "0",
rels: {
@ -220,10 +219,13 @@ export default class ComlexFamilyTree extends React.Component {
children: ["0fa5c6bc-5b58-40f5-a07e-d787e26d8b56"],
},
},
];
}
]);
setTimeout(() => {
/*
import { jsPDF } from "jspdf";
import "svg2pdf.js";
setTimeout(() => {
const doc = new jsPDF({
orientation: "l",
format: [1000, 1000],
@ -233,12 +235,6 @@ export default class ComlexFamilyTree extends React.Component {
console.log(element);
doc.svg(element!.children[0], { height: 1000, width: 1000 }).then(() => {
// save the created pdf
doc.save("myPDF.pdf");
//doc.save("myPDF.pdf");
});
}, 6000);
}
render() {
return <div className="f3" id="FamilyChart" ref={this.cont as any}></div>;
}
}
}, 6000);*/