2022-08-05 12:03:49 +02:00
|
|
|
import { DragEventHandler, FC, ReactNode } from 'react';
|
|
|
|
import { DragIndicator } from '@mui/icons-material';
|
2023-01-05 11:57:53 +01:00
|
|
|
import { styled, IconButton, Box } from '@mui/material';
|
2022-08-05 12:03:49 +02:00
|
|
|
import { IFeatureStrategy } from 'interfaces/strategy';
|
|
|
|
import {
|
|
|
|
getFeatureStrategyIcon,
|
|
|
|
formatStrategyName,
|
|
|
|
} from 'utils/strategyNames';
|
|
|
|
import StringTruncator from 'component/common/StringTruncator/StringTruncator';
|
|
|
|
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
2023-01-05 11:57:53 +01:00
|
|
|
import { PlaygroundStrategySchema } from 'openapi';
|
2022-08-05 12:03:49 +02:00
|
|
|
|
|
|
|
interface IStrategyItemContainerProps {
|
2022-11-16 15:35:39 +01:00
|
|
|
strategy: IFeatureStrategy | PlaygroundStrategySchema;
|
2022-08-05 12:03:49 +02:00
|
|
|
onDragStart?: DragEventHandler<HTMLButtonElement>;
|
|
|
|
onDragEnd?: DragEventHandler<HTMLButtonElement>;
|
|
|
|
actions?: ReactNode;
|
|
|
|
orderNumber?: number;
|
2022-08-08 09:50:49 +02:00
|
|
|
className?: string;
|
2023-01-03 09:24:55 +01:00
|
|
|
style?: React.CSSProperties;
|
2022-08-05 12:03:49 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
const DragIcon = styled(IconButton)(({ theme }) => ({
|
|
|
|
padding: 0,
|
|
|
|
cursor: 'inherit',
|
|
|
|
transition: 'color 0.2s ease-in-out',
|
|
|
|
}));
|
|
|
|
|
|
|
|
const StyledIndexLabel = styled('div')(({ theme }) => ({
|
|
|
|
fontSize: theme.typography.fontSize,
|
|
|
|
color: theme.palette.text.secondary,
|
|
|
|
position: 'absolute',
|
|
|
|
display: 'none',
|
|
|
|
right: 'calc(100% + 6px)',
|
|
|
|
top: theme.spacing(2.5),
|
|
|
|
[theme.breakpoints.up('md')]: {
|
|
|
|
display: 'block',
|
|
|
|
},
|
|
|
|
}));
|
|
|
|
|
2023-01-11 17:44:21 +01:00
|
|
|
const StyledContainer = styled(Box)(({ theme }) => ({
|
|
|
|
borderRadius: theme.shape.borderRadiusMedium,
|
|
|
|
border: `1px solid ${theme.palette.divider}`,
|
|
|
|
'& + &': {
|
|
|
|
marginTop: theme.spacing(2),
|
|
|
|
},
|
|
|
|
background: theme.palette.background.paper,
|
|
|
|
}));
|
|
|
|
|
|
|
|
const StyledHeader = styled('div', {
|
|
|
|
shouldForwardProp: prop => prop !== 'draggable',
|
|
|
|
})(({ theme, draggable }) => ({
|
|
|
|
padding: theme.spacing(0.5, 2),
|
|
|
|
display: 'flex',
|
|
|
|
gap: theme.spacing(1),
|
|
|
|
alignItems: 'center',
|
|
|
|
borderBottom: `1px solid ${theme.palette.divider}`,
|
|
|
|
fontWeight: theme.typography.fontWeightMedium,
|
|
|
|
paddingLeft: draggable ? theme.spacing(1) : theme.spacing(2),
|
|
|
|
}));
|
|
|
|
|
2022-08-05 12:03:49 +02:00
|
|
|
export const StrategyItemContainer: FC<IStrategyItemContainerProps> = ({
|
|
|
|
strategy,
|
|
|
|
onDragStart,
|
|
|
|
onDragEnd,
|
|
|
|
actions,
|
|
|
|
children,
|
|
|
|
orderNumber,
|
2023-01-03 09:24:55 +01:00
|
|
|
style = {},
|
2022-08-05 12:03:49 +02:00
|
|
|
}) => {
|
|
|
|
const Icon = getFeatureStrategyIcon(strategy.name);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Box sx={{ position: 'relative' }}>
|
|
|
|
<ConditionallyRender
|
|
|
|
condition={orderNumber !== undefined}
|
|
|
|
show={<StyledIndexLabel>{orderNumber}</StyledIndexLabel>}
|
|
|
|
/>
|
2023-01-11 17:44:21 +01:00
|
|
|
<StyledContainer style={style}>
|
|
|
|
<StyledHeader draggable={Boolean(onDragStart)}>
|
2022-08-05 12:03:49 +02:00
|
|
|
<ConditionallyRender
|
|
|
|
condition={Boolean(onDragStart)}
|
|
|
|
show={() => (
|
|
|
|
<DragIcon
|
|
|
|
draggable
|
|
|
|
disableRipple
|
|
|
|
size="small"
|
|
|
|
onDragStart={onDragStart}
|
|
|
|
onDragEnd={onDragEnd}
|
|
|
|
sx={{ cursor: 'move' }}
|
|
|
|
>
|
|
|
|
<DragIndicator
|
|
|
|
titleAccess="Drag to reorder"
|
|
|
|
cursor="grab"
|
|
|
|
sx={{ color: 'neutral.main' }}
|
|
|
|
/>
|
|
|
|
</DragIcon>
|
|
|
|
)}
|
|
|
|
/>
|
2023-01-11 17:44:21 +01:00
|
|
|
<Icon
|
|
|
|
sx={{
|
2023-03-06 11:58:36 +01:00
|
|
|
fill: theme => theme.palette.action.disabled,
|
2023-01-11 17:44:21 +01:00
|
|
|
}}
|
|
|
|
/>
|
2022-08-05 12:03:49 +02:00
|
|
|
<StringTruncator
|
|
|
|
maxWidth="150"
|
|
|
|
maxLength={15}
|
|
|
|
text={formatStrategyName(strategy.name)}
|
|
|
|
/>
|
2023-01-11 17:44:21 +01:00
|
|
|
<Box
|
|
|
|
sx={{
|
|
|
|
marginLeft: 'auto',
|
|
|
|
display: 'flex',
|
|
|
|
minHeight: theme => theme.spacing(6),
|
|
|
|
alignItems: 'center',
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{actions}
|
|
|
|
</Box>
|
|
|
|
</StyledHeader>
|
|
|
|
<Box
|
|
|
|
sx={{
|
|
|
|
p: 2,
|
|
|
|
justifyItems: 'center',
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</Box>
|
|
|
|
</StyledContainer>
|
2022-08-05 12:03:49 +02:00
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
};
|