43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import React, { useState } from 'react'
|
|
import EventsBlock from '../Session_/EventsBlock';
|
|
import PageInsightsPanel from '../Session_/PageInsightsPanel/PageInsightsPanel'
|
|
import { Controls as PlayerControls } from 'Player';
|
|
import { Tabs } from 'UI';
|
|
import { connectPlayer } from 'Player';
|
|
|
|
const EVENTS = 'Events';
|
|
const HEATMAPS = 'Heatmaps';
|
|
|
|
const TABS = [ EVENTS, HEATMAPS ].map(tab => ({ text: tab, key: tab }));
|
|
|
|
|
|
const EventsBlockConnected = connectPlayer(state => ({
|
|
currentTimeEventIndex: state.eventListNow.length > 0 ? state.eventListNow.length - 1 : 0,
|
|
playing: state.playing,
|
|
}))(EventsBlock)
|
|
|
|
export default function RightBlock() {
|
|
const [activeTab, setActiveTab] = useState(EVENTS)
|
|
|
|
const renderActiveTab = (tab) => {
|
|
switch(tab) {
|
|
case EVENTS:
|
|
return <EventsBlockConnected player={PlayerControls}/>
|
|
case HEATMAPS:
|
|
return <PageInsightsPanel />
|
|
}
|
|
}
|
|
return (
|
|
<div style={{ width: '270px', height: 'calc(100vh- 50px)'}} className="flex flex-col">
|
|
<Tabs
|
|
tabs={ TABS }
|
|
active={ activeTab }
|
|
onClick={ (tab) => setActiveTab(tab) }
|
|
border={ true }
|
|
/>
|
|
{
|
|
renderActiveTab(activeTab)
|
|
}
|
|
</div>
|
|
)
|
|
}
|