parent
f8d395299c
commit
4376fdbc10
2 changed files with 22 additions and 9 deletions
@ -1,21 +1,29 @@ |
||||
import { Box } from '@mui/material'; |
||||
import { ReactElement, useMemo } from 'react'; |
||||
import { ReactElement, ReactNode, useMemo } from 'react'; |
||||
|
||||
const TabContent = <T,>({ |
||||
changingTabId, |
||||
children, |
||||
retain = false, |
||||
tabId, |
||||
}: TabContentProps<T>): ReactElement => { |
||||
const isTabIdMatch = useMemo( |
||||
() => changingTabId === tabId, |
||||
[changingTabId, tabId], |
||||
); |
||||
const displayValue = useMemo( |
||||
() => (isTabIdMatch ? 'initial' : 'none'), |
||||
[isTabIdMatch], |
||||
const result = useMemo<ReactNode>( |
||||
() => |
||||
retain ? ( |
||||
<Box sx={{ display: isTabIdMatch ? 'initial' : 'none' }}> |
||||
{children} |
||||
</Box> |
||||
) : ( |
||||
isTabIdMatch && children |
||||
), |
||||
[children, isTabIdMatch, retain], |
||||
); |
||||
|
||||
return <Box sx={{ display: displayValue }}>{children}</Box>; |
||||
return <>{result}</>; |
||||
}; |
||||
|
||||
export default TabContent; |
||||
|
@ -1,4 +1,9 @@ |
||||
type TabContentProps<T> = import('react').PropsWithChildren<{ |
||||
type TabContentOptionalProps = { |
||||
retain?: boolean; |
||||
}; |
||||
|
||||
type TabContentProps<T> = TabContentOptionalProps & |
||||
import('react').PropsWithChildren<{ |
||||
changingTabId: T; |
||||
tabId: T; |
||||
}>; |
||||
|
Loading…
Reference in new issue