mirror of
https://github.com/Unleash/unleash.git
synced 2025-09-01 13:47:27 +02:00
more deletion
This commit is contained in:
parent
c45d558352
commit
cca1c07852
@ -1,141 +0,0 @@
|
|||||||
import { useState, type VFC } from 'react';
|
|
||||||
import { Link } from 'react-router-dom';
|
|
||||||
import DonutLarge from '@mui/icons-material/DonutLarge';
|
|
||||||
import type { ISegment } from 'interfaces/segment';
|
|
||||||
import {
|
|
||||||
Accordion,
|
|
||||||
AccordionDetails,
|
|
||||||
AccordionSummary,
|
|
||||||
Button,
|
|
||||||
styled,
|
|
||||||
Typography,
|
|
||||||
} from '@mui/material';
|
|
||||||
import { ConstraintAccordionList } from 'component/common/LegacyConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList';
|
|
||||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
|
||||||
|
|
||||||
interface ISegmentItemProps {
|
|
||||||
segment: Partial<ISegment>;
|
|
||||||
isExpanded?: boolean;
|
|
||||||
disabled?: boolean | null;
|
|
||||||
constraintList?: JSX.Element;
|
|
||||||
headerContent?: JSX.Element;
|
|
||||||
}
|
|
||||||
|
|
||||||
const StyledAccordion = styled(Accordion, {
|
|
||||||
shouldForwardProp: (prop) => prop !== 'isDisabled',
|
|
||||||
})<{ isDisabled: boolean | null }>(({ theme, isDisabled }) => ({
|
|
||||||
border: `1px solid ${theme.palette.divider}`,
|
|
||||||
'&.segment-accordion': {
|
|
||||||
borderRadius: theme.shape.borderRadiusMedium,
|
|
||||||
},
|
|
||||||
boxShadow: 'none',
|
|
||||||
margin: 0,
|
|
||||||
transition: 'all 0.1s ease',
|
|
||||||
'&:before': {
|
|
||||||
opacity: '0 !important',
|
|
||||||
},
|
|
||||||
'&.Mui-expanded': { backgroundColor: theme.palette.neutral.light },
|
|
||||||
backgroundColor: isDisabled
|
|
||||||
? theme.palette.envAccordion.disabled
|
|
||||||
: theme.palette.background.paper,
|
|
||||||
}));
|
|
||||||
|
|
||||||
const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
|
|
||||||
margin: theme.spacing(0, 0.5),
|
|
||||||
fontSize: theme.typography.body2.fontSize,
|
|
||||||
'.MuiAccordionSummary-content': {
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
const StyledLink = styled(Link)(({ theme }) => ({
|
|
||||||
textDecoration: 'none',
|
|
||||||
marginLeft: theme.spacing(1),
|
|
||||||
'&:hover': {
|
|
||||||
textDecoration: 'underline',
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
const StyledText = styled('span', {
|
|
||||||
shouldForwardProp: (prop) => prop !== 'disabled',
|
|
||||||
})<{ disabled: boolean | null }>(({ theme, disabled }) => ({
|
|
||||||
color: disabled ? theme.palette.text.secondary : 'inherit',
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const SegmentItem: VFC<ISegmentItemProps> = ({
|
|
||||||
segment,
|
|
||||||
isExpanded,
|
|
||||||
headerContent,
|
|
||||||
constraintList,
|
|
||||||
disabled = false,
|
|
||||||
}) => {
|
|
||||||
const [isOpen, setIsOpen] = useState(isExpanded || false);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<StyledAccordion
|
|
||||||
className='segment-accordion'
|
|
||||||
isDisabled={disabled}
|
|
||||||
expanded={isOpen}
|
|
||||||
>
|
|
||||||
<StyledAccordionSummary id={`segment-accordion-${segment.id}`}>
|
|
||||||
<DonutLarge
|
|
||||||
sx={(theme) => ({
|
|
||||||
mr: 1,
|
|
||||||
color: disabled
|
|
||||||
? theme.palette.neutral.border
|
|
||||||
: theme.palette.secondary.main,
|
|
||||||
})}
|
|
||||||
/>
|
|
||||||
<StyledText disabled={disabled}>Segment:</StyledText>
|
|
||||||
<StyledLink to={`/segments/edit/${segment.id}`}>
|
|
||||||
{segment.name}
|
|
||||||
</StyledLink>
|
|
||||||
<ConditionallyRender
|
|
||||||
condition={Boolean(headerContent)}
|
|
||||||
show={headerContent}
|
|
||||||
/>
|
|
||||||
<ConditionallyRender
|
|
||||||
condition={!isExpanded}
|
|
||||||
show={
|
|
||||||
<Button
|
|
||||||
size='small'
|
|
||||||
variant='outlined'
|
|
||||||
onClick={() => setIsOpen((value) => !value)}
|
|
||||||
sx={{
|
|
||||||
my: 0,
|
|
||||||
ml: 'auto',
|
|
||||||
fontSize: (theme) =>
|
|
||||||
theme.typography.body2.fontSize,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{isOpen ? 'Close preview' : 'Preview'}
|
|
||||||
</Button>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</StyledAccordionSummary>
|
|
||||||
<AccordionDetails sx={{ pt: 0 }}>
|
|
||||||
<ConditionallyRender
|
|
||||||
condition={Boolean(constraintList)}
|
|
||||||
show={constraintList}
|
|
||||||
elseShow={
|
|
||||||
<ConditionallyRender
|
|
||||||
condition={(segment?.constraints?.length || 0) > 0}
|
|
||||||
show={
|
|
||||||
<ConstraintAccordionList
|
|
||||||
constraints={segment!.constraints!}
|
|
||||||
showLabel={false}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
elseShow={
|
|
||||||
<Typography>
|
|
||||||
This segment has no constraints.
|
|
||||||
</Typography>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</AccordionDetails>
|
|
||||||
</StyledAccordion>
|
|
||||||
);
|
|
||||||
};
|
|
Loading…
Reference in New Issue
Block a user