/** * The Details window: a card's full table, with the card's tabs again and a * search. It is the `&view=` (address.js), so Back and a shared link reopen * it. A breakdown row filters the page and closes the window; a visitor row * opens that visitor's panel. */ import { useState } from 'react'; import { __ } from '@wordpress/i18n'; import { useUi } from './ui-context'; import ReportTable from './table'; import { CrawlersTable, CRAWLER_NOTE, PURPOSE_TABS } from './crawlers'; import { VisitorsTable } from './visitors'; function Body( { open, card, meta, win, filters, metric, crawlerTab, onCrawlerTab, onView, onFilter, onOpenVisitor } ) { const { FilterTabs, SearchInput } = useUi(); const [ search, setSearch ] = useState( '' ); let tabs = null; let table = null; let note = ''; if ( 'dimension' === open.kind ) { const dims = card.dims.map( ( key ) => meta.dimensions.find( ( d ) => d.key === key ) ).filter( Boolean ); const dimension = dims.find( ( d ) => d.key === open.key ); tabs = dims.length > 1 && ( ( { value: d.key, label: d.label } ) ) } value={ open.key } onChange={ onView } /> ); table = ( ); } else if ( 'crawlers' === open.kind ) { tabs = ( ); table = ; note = CRAWLER_NOTE(); } else if ( 'visitors' === open.kind ) { table = ; if ( meta.cookieless ) { note = __( 'Without cookies, a visitor is recognised for one day. A visit on another day is a new row.', 'saddle-analytics' ); } } return (

{ tabs }

setSearch( e.target.value ) } aria-label={ __( 'Search rows', 'saddle-analytics' ) } />

{ table }

{ note &&

{ note }

}

); } export default function Details( props ) { const { Dialog } = useUi(); const { open, card, onClose } = props; const shown = [ 'dimension', 'crawlers', 'visitors' ].includes( open.kind ) && card; return ( ); }