2022-08-05 12:03:49 +02:00
|
|
|
import { DragEventHandler, FC, ReactNode } from 'react';
|
|
|
|
import { DragIndicator } from '@mui/icons-material';
|
2023-01-03 09:24:55 +01:00
|
|
|
import { styled, IconButton, Box, SxProps, Theme } from '@mui/material';
|
2022-08-05 12:03:49 +02:00
|
|
|
import classNames from 'classnames';
|
|
|
|
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';
|
|
|
|
import { useStyles } from './StrategyItemContainer.styles';
|
2022-11-16 15:35:39 +01:00
|
|
|
import { PlaygroundStrategySchema } from 'component/playground/Playground/interfaces/playground.model';
|
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',
|
|
|
|
},
|
|
|
|
}));
|
|
|
|
|
|
|
|
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 { classes: styles } = useStyles();
|
|
|
|
const Icon = getFeatureStrategyIcon(strategy.name);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Box sx={{ position: 'relative' }}>
|
|
|
|
<ConditionallyRender
|
|
|
|
condition={orderNumber !== undefined}
|
|
|
|
show={<StyledIndexLabel>{orderNumber}</StyledIndexLabel>}
|
|
|
|
/>
|
2023-01-03 09:24:55 +01:00
|
|
|
<Box className={styles.container} style={{ ...style }}>
|
2022-08-05 12:03:49 +02:00
|
|
|
<div
|
|
|
|
className={classNames(styles.header, {
|
|
|
|
[styles.headerDraggable]: Boolean(onDragStart),
|
|
|
|
})}
|
|
|
|
>
|
|
|
|
<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>
|
|
|
|
)}
|
|
|
|
/>
|
|
|
|
<Icon className={styles.icon} />
|
|
|
|
<StringTruncator
|
|
|
|
maxWidth="150"
|
|
|
|
maxLength={15}
|
|
|
|
text={formatStrategyName(strategy.name)}
|
|
|
|
/>
|
|
|
|
<div className={styles.actions}>{actions}</div>
|
|
|
|
</div>
|
|
|
|
<div className={styles.body}>{children}</div>
|
2022-08-08 09:50:49 +02:00
|
|
|
</Box>
|
2022-08-05 12:03:49 +02:00
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
};
|