File manager - Edit - /var/www/payraty/helpdesk/common/resources/client/ui/tabs/tab-line.tsx
Back
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}} /> ); }
| ver. 1.4 |
Github
|
.
| PHP 8.3.30 | Generation time: 0 |
proxy
|
phpinfo
|
Settings