lightweight/right-tree
1
0
Fork 0
Code Issues 17 Pull requests Projects Releases Packages Wiki Activity Actions

[#40] Rewrite SVG loader to fix conflict with react-router

Browse source
This commit is contained in:
Matthew Northcott 2023-02-03 14:37:34 +13:00
parent fe59b0c854
commit 108e3e0f67
15 changed files with 40 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/components/diagrams/coastal_dune_and_bank_system.jsx Normal file
View file

@ -0,0 +1,2 @@
import { ReactComponent } from '../../assets/img/habitatSVG/coastal_dune_and_bank_system.svg';
export default ReactComponent;

2
frontend/src/components/diagrams/hill_slopes.jsx Normal file
View file

@ -0,0 +1,2 @@
import { ReactComponent } from '../../assets/img/habitatSVG/hill_slopes.svg';
export default ReactComponent;

2
frontend/src/components/diagrams/hill_slopes_features.jsx Normal file
View file

@ -0,0 +1,2 @@
import { ReactComponent } from '../../assets/img/habitatSVG/hill_slopes_features.svg';
export default ReactComponent;

2
frontend/src/components/diagrams/mangroves_section.jsx Normal file
View file

@ -0,0 +1,2 @@
import { ReactComponent } from '../../assets/img/habitatSVG/mangroves_section.svg';
export default ReactComponent;

2
frontend/src/components/diagrams/maori_garden.jsx Normal file
View file

@ -0,0 +1,2 @@
import { ReactComponent } from '../../assets/img/habitatSVG/maori_garden.svg';
export default ReactComponent;

2
frontend/src/components/diagrams/open_wetland_lake.jsx Normal file
View file

@ -0,0 +1,2 @@
import { ReactComponent } from '../../assets/img/habitatSVG/open_wetland_lake.svg';
export default ReactComponent;

2
frontend/src/components/diagrams/riparian.jsx Normal file
View file

@ -0,0 +1,2 @@
import { ReactComponent } from '../../assets/img/habitatSVG/riparian.svg';
export default ReactComponent;

2
frontend/src/components/diagrams/rural_section.jsx Normal file
View file

@ -0,0 +1,2 @@
import { ReactComponent } from '../../assets/img/habitatSVG/rural_section.svg';
export default ReactComponent;

2
frontend/src/components/diagrams/salt_marsh.jsx Normal file
View file

@ -0,0 +1,2 @@
import { ReactComponent } from '../../assets/img/habitatSVG/salt_marsh.svg';
export default ReactComponent;

2
frontend/src/components/diagrams/sand_dunes.jsx Normal file
View file

@ -0,0 +1,2 @@
import { ReactComponent } from '../../assets/img/habitatSVG/sand_dunes.svg';
export default ReactComponent;

2
frontend/src/components/diagrams/stormwater_treatment.jsx Normal file
View file

@ -0,0 +1,2 @@
import { ReactComponent } from '../../assets/img/habitatSVG/stormwater_treatment.svg';
export default ReactComponent;

2
frontend/src/components/diagrams/transport_corridor_rail_section.jsx Normal file
View file

@ -0,0 +1,2 @@
import { ReactComponent } from '../../assets/img/habitatSVG/transport_corridor_rail_section.svg';
export default ReactComponent;

2
frontend/src/components/diagrams/transport_corridor_road_section.jsx Normal file
View file

@ -0,0 +1,2 @@
import { ReactComponent } from '../../assets/img/habitatSVG/transport_corridor_road_section.svg';
export default ReactComponent;

2
frontend/src/components/diagrams/urban_section.jsx Normal file
View file

@ -0,0 +1,2 @@
import { ReactComponent } from '../../assets/img/habitatSVG/urban_section.svg';
export default ReactComponent;

36
frontend/src/components/steps/HabitatSVG.jsx
View file

@ -1,27 +1,15 @@
import React from 'react';
import { lazy, Suspense } from 'react';
import { CircularProgress, Stack } from "@mui/material";
export const HabitatSVG = ({ name, ...rest }) => {
const ImportedIconRef = React.useRef(null);
const [loading, setLoading] = React.useState(false);
React.useEffect(() => {
setLoading(true);
const importIcon = async () => {
try {
ImportedIconRef.current = (await import(`!!@svgr/webpack?-svgo,+titleProp,+ref!../../assets/img/habitatSVG/${name}.svg`)).default;
} catch (err) {
throw err;
} finally {
setLoading(false);
}
};
importIcon();
}, [name]);
if (!loading && ImportedIconRef.current) {
const { current: ImportedIcon } = ImportedIconRef;
return <ImportedIcon {...rest} />;
}
return null;
const Diagram = lazy(() => import(`../diagrams/${name}`));
const loadingComponent = (
<Stack alignItems="center">
<CircularProgress />
</Stack>
);
return (
<Suspense fallback={loadingComponent}>
<Diagram {...rest} />
</Suspense>);
};