fix(striker-ui): allow retain/discard tab content
This commit is contained in:
parent
5e5c767670
commit
a1ba570eee
@ -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;
|
||||
|
7
striker-ui/types/TabContent.d.ts
vendored
7
striker-ui/types/TabContent.d.ts
vendored
@ -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
Block a user