pierre/GeneIT
1
0
Fork 0
Code Issues Pull Requests 7 Packages Projects Releases Wiki Activity

Turn class component into function component

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx
View File

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

38
geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx
View File

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