openreplay/frontend/app/components/Session/Player/SharedComponents/Tab.tsx
Delirium 960da9f037
Tracker 14.x.x changes (#2240)
* feat tracker: add document titles to tabs

* feat: titles for tabs

* feat tracker: send initial title, parse titles better

* feat ui: tab name styles

* feat tracker: update changelogs

* fix tracker: fix tests

* fix tracker: fix failing tests, add some coverage

* fix tracker: fix failing tests, add some coverage

* Heatmaps  (#2264)

* feat ui: start heatmaps ui and tracker update

* fix ui: drop clickmap from session

* fix ui: refactor heatmap painter

* fix ui: store click coords as int percent

* feat(backend): insert normalized x and y to PG

* feat(backend): insert normalized x and y to CH

* feat(connector): added missing import

* feat(backend): fixed different uint type issue

* fix tracker: use max scrollable size for doc

* fix gen files

* fix ui: fix random crash, remove demo data generator

* fix ui: rm some dead code

---------

Co-authored-by: Alexander <zavorotynskiy@pm.me>

* fix tracker: add heatmap changelog to tracker CHANGELOG.md

* fix tracker: fix peerjs version to 1.5.4 (was 1.5.1)

* fix document height calculation

* Crossdomain tracking (#2277)

* feat tracker: crossdomain tracking (start commit)

* catch crossdomain messages, add nodeid placeholder

* click scroll

* frame placeholder number -> dynamic

* click rewriter, fix scroll prop

* some docs

* some docs

* fix options merging

* CHANGELOG.md update

* checking that crossdomain will not fire automatically

* simplify func declaration

* update test data

* change clickmap document height calculation to scrollheight (which should be true height)

---------

Co-authored-by: Alexander <zavorotynskiy@pm.me>
2024-06-24 13:49:26 +02:00

54 lines
1.5 KiB
TypeScript

import { Tooltip } from 'antd';
import cn from 'classnames';
import React from 'react';
interface Props {
i: number;
tab: string;
currentTab: string;
changeTab?: (tab: string) => void;
isLive?: boolean;
isClosed?: boolean;
name?: string;
}
function Tab({ i, tab, currentTab, changeTab, isLive, isClosed, name }: Props) {
return (
<div
key={tab}
style={{
marginBottom: '-2px',
}}
onClick={() => changeTab?.(tab)}
className={cn(
'self-end py-1 px-4 text-sm',
changeTab && !isLive ? 'cursor-pointer' : 'cursor-default',
currentTab === tab
? 'border-gray-lighter border-t border-l border-r !border-b-white bg-white rounded-tl rounded-tr font-semibold'
: 'cursor-pointer border-gray-lighter !border-b !border-t-transparent !border-l-transparent !border-r-transparent',
)}
>
<Tooltip title={name && name.length > 20 ? name : ''}>
<div className={'flex items-center gap-2'}>
<div
className={
'bg-gray-light rounded-full min-w-5 min-h-5 w-5 h-5 flex items-center justify-center text-xs'
}
>
<div>{i + 1}</div>
</div>
<div
className={cn('whitespace-nowrap', isClosed ? 'line-through' : '')}
style={{
maxWidth: 114,
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>{name ? name : `Tab ${i + 1}`}</div>
</div>
</Tooltip>
</div>
);
}
export default Tab;