Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | import React, { CSSProperties, ReactNode, useMemo } from 'react';
import { Box, TooltipProps, useTheme } from '@mui/material';
export type PlacementWrapperProps = {
placedObject: ReactNode;
children: ReactNode;
objectPlacement: TooltipProps['placement'];
};
/**
* A component that allows simple management of the location of an object around some children
*
* Example:
* ```
* <PlacementWrapper objectPlacement={'right-end'} placedObject={<Button icon={'iconComment'} onClick={onClick} />}>
* <Box>Stuff and Things</Box>
* </PlacementWrapper>
* ```
*/
const PlacementWrapper = ({ placedObject, children, objectPlacement }: PlacementWrapperProps) => {
const theme = useTheme();
const outsideDirection = useMemo((): CSSProperties['flexDirection'] => {
if (!objectPlacement) {
return 'column';
}
if (objectPlacement.startsWith('top')) {
return 'column';
} else if (objectPlacement.startsWith('bottom')) {
return 'column-reverse';
} else if (objectPlacement.startsWith('left')) {
return 'row';
} else {
return 'row-reverse';
}
}, [objectPlacement]);
const insideAlignment = useMemo((): CSSProperties['alignContent'] => {
if (!objectPlacement) {
return 'center';
}
if (objectPlacement.endsWith('start')) {
return 'flex-start';
} else if (objectPlacement.endsWith('end')) {
return 'flex-end';
} else {
return 'center';
}
}, [objectPlacement]);
return (
<Box display={'flex'} flexDirection={outsideDirection} flexGrow={1} marginBottom={theme.spacing(2)}>
<Box alignSelf={insideAlignment} margin={theme.spacing(1)}>
{placedObject}
</Box>
{children}
</Box>
);
};
export default PlacementWrapper;
|