Turn class component into function component
This commit is contained in:
parent
4d28696be8
commit
6630037ac0
@ -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>
|
||||||
|
@ -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>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
Loading…
Reference in New Issue
Block a user