123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960 |
- import React, {Profiler} from "react";
- import Leaflet from "./../maps/Leaflet";
- import {measureTime} from "./../helpers/measureTime";
- import {CustomInput, Input} from "reactstrap";
- import {mapTestState} from "./../config/variables"
- import {
- createRandomMarkers,
- calcMarkerPosition,
- changeSwitch,
- setNoOfMarkers
- } from "./../helpers/randomMarkers";
- import {
- componentDidMount,
- componentDidUpdate,
- componentWillUnmount
- } from "./../helpers/testLifecycle"
- export default class Leaflets extends React.Component{
- constructor(props) {
- super(props)
- this.state = mapTestState
- this.measurementsDiv = React.createRef()
- this.markerInfoDiv = React.createRef()
- this.createRandomMarkers = createRandomMarkers.bind(this)
- this.calcMarkerPosition = calcMarkerPosition.bind(this)
- this.changeSwitch = changeSwitch.bind(this)
- this.setNoOfMarkers = setNoOfMarkers.bind(this)
- this.componentDidMount = componentDidMount.bind(this)
- this.componentDidUpdate = componentDidUpdate.bind(this)
- this.componentWillUnmount = componentWillUnmount.bind(this)
- }
- render(){
- return (
- <div className="mapTestContainer">
- <div className="mapTime">
- <CustomInput type="switch" onChange={this.changeSwitch} id="moveSwitch" name="moveSwitch" label="Move markers" />
- <div ref={this.markerInfoDiv}>
- <span>{this.state.currStep} steps</span>
- </div>
- <span>Number of Markers: {this.state.noOfMarkers}</span><br/>
- <Input type="text" onChange={this.setNoOfMarkers} value={this.state.noOfMarkers}/>
- <div ref={this.measurementsDiv}>
- </div>
- </div>
- <div className="mapTest">
- <Profiler id="leaflet" onRender={measureTime(this, this.state.noOfMarkers)}>
- <Leaflet markers={this.state.markers}/>
- </Profiler>
- </div>
- </div>
- );
- }
- }
|