File "tab-line.tsx"
Full Path: /home/markqprx/iniasli.pro/client/ui/tabs/tab-line.tsx
File size: 1.17 KB
MIME-type: text/plain
Charset: utf-8
import React, {useContext, useState} from 'react';
import {useLayoutEffect} from '@react-aria/utils';
import clsx from 'clsx';
import {TabContext} from './tabs-context';
interface TabLineStyle {
width?: string;
transform?: string;
className?: string;
}
export function TabLine() {
const {tabsRef, selectedTab} = useContext(TabContext);
const [style, setStyle] = useState<TabLineStyle>({
width: undefined,
transform: undefined,
className: undefined,
});
useLayoutEffect(() => {
if (selectedTab != null && tabsRef.current) {
const el = tabsRef.current[selectedTab];
if (!el) return;
setStyle(prevState => {
return {
width: `${el.offsetWidth}px`,
transform: `translateX(${el.offsetLeft}px)`,
// disable initial transition for tabline
className: prevState.width === undefined ? '' : 'transition-all',
};
});
}
}, [setStyle, selectedTab, tabsRef]);
return (
<div
className={clsx(
'absolute bottom-0 left-0 h-2 bg-primary',
style.className
)}
role="presentation"
style={{width: style.width, transform: style.transform}}
/>
);
}