Source: components/userComponents/monitoredArea/Annotation/zones/ShowZones.js

import React from 'react';
import ZoneCanvas from './ZoneCanvas';
import { API } from '../../../../../LocalConfiguration';
import ZonesMap from '../../../maps/ZonesMap';
import { withNamespaces } from 'react-i18next';
import { Tab, Tabs } from 'react-bootstrap';

/**
 * Show zones on map and canvas tabs
 * @extends Component
 * @hideconstructor
 */
class ShowZones extends React.Component {

  /**
   * @constructs
   * @param props
   */
  constructor(props) {
    super(props);
    this.state = {
      tabKey: '1'
    }
  }

  /**
   *
   * @param key
   */
  switchAndSaveTab(key) {
    this.setState({
      tabKey: key
    });
  }

  /**
   *
   * @returns {*}
   */
  render() {
    const { t } = this.props;
    return (
      /*<div className="tab">*/
      <div>

        <Tabs
          activeKey={this.state.tabKey}
          onSelect={key => this.switchAndSaveTab(key)}
          mountOnEnter={true}
          unmountOnExit={true}
        >
          <Tab eventKey="1" title={t('annotate.showMap')}>
            <ZonesMap
              interactive={false}
              zones={this.props.zones}
              showZoneNames={true}
              monitoredAreaID={this.props.monitoredAreaID}
            />
          </Tab>
          <Tab eventKey="2" title={t('annotate.showCameraView')}>
            <ZoneCanvas
              zones={this.props.zones}
              loadUrl={API + "/screenshot/" + this.props.monitoredAreaID}
              refreshUrl={API + "/screenshot/" + this.props.monitoredAreaID + "?refresh=true"}
              interactive={false}
            />
          </Tab>
        </Tabs>
        {/*<div className="tab-content tabs">*/}
        {/*  <div id="zonesMap" className="tab-pane fade in active">*/}
        {/*    */}
        {/*  </div>*/}
        {/*  <div id="zonesCanvas" className="tab-pane fade">*/}
        {/*    */}
        {/*  </div>*/}
        {/*</div>*/}

        {/*<ul className="nav nav-tabs-centered">*/}
        {/*  <li className="active"><a data-toggle="tab" href="#zonesMap">{t('annotate.showMap')}</a></li>*/}
        {/*  <li><a data-toggle="tab" href="#zonesCanvas">{t('annotate.showCameraView')}</a></li>*/}
        {/*</ul>*/}
      </div>
    );
  }
}

export default withNamespaces()(ShowZones);