mirror of
https://github.com/Unleash/unleash.git
synced 2025-08-23 13:46:45 +02:00
Jaanus Sellin
GitHub
parent
77d72ce5a1
commit
a2e39a05c4
@ -1,67 +0,0 @@
|
||||
import { ConstraintIcon } from 'component/common/LegacyConstraintAccordion/ConstraintIcon';
|
||||
import type { IConstraint } from 'interfaces/strategy';
|
||||
import { ConstraintAccordionViewHeaderInfo } from './ConstraintAccordionViewHeaderInfo';
|
||||
import { ConstraintAccordionHeaderActions } from '../../ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions';
|
||||
import { styled } from '@mui/system';
|
||||
import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
|
||||
|
||||
interface IConstraintAccordionViewHeaderProps {
|
||||
constraint: IConstraint;
|
||||
onDelete?: () => void;
|
||||
onEdit?: () => void;
|
||||
singleValue: boolean;
|
||||
expanded: boolean;
|
||||
allowExpand: (shouldExpand: boolean) => void;
|
||||
compact?: boolean;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const StyledContainer = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
position: 'relative',
|
||||
},
|
||||
}));
|
||||
|
||||
/**
|
||||
* @deprecated use NewConstraintAccordion components
|
||||
*/
|
||||
export const ConstraintAccordionViewHeader = ({
|
||||
constraint,
|
||||
onEdit,
|
||||
onDelete,
|
||||
singleValue,
|
||||
allowExpand,
|
||||
expanded,
|
||||
compact,
|
||||
disabled,
|
||||
}: IConstraintAccordionViewHeaderProps) => {
|
||||
const { context } = useUnleashContext();
|
||||
const { contextName } = constraint;
|
||||
|
||||
const disableEdit = !context
|
||||
.map((contextDefinition) => contextDefinition.name)
|
||||
.includes(contextName);
|
||||
|
||||
return (
|
||||
<StyledContainer>
|
||||
<ConstraintIcon compact={compact} disabled={disabled} />
|
||||
<ConstraintAccordionViewHeaderInfo
|
||||
constraint={constraint}
|
||||
singleValue={singleValue}
|
||||
allowExpand={allowExpand}
|
||||
expanded={expanded}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<ConstraintAccordionHeaderActions
|
||||
onEdit={onEdit}
|
||||
onDelete={onDelete}
|
||||
disableEdit={disableEdit}
|
||||
/>
|
||||
</StyledContainer>
|
||||
);
|
||||
};
|
||||
@ -1,107 +0,0 @@
|
||||
import { styled, Tooltip } from '@mui/material';
|
||||
import { ConstraintViewHeaderOperator } from './ConstraintViewHeaderOperator';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
import { ConstraintAccordionViewHeaderSingleValue } from './ConstraintAccordionViewHeaderSingleValue';
|
||||
import { ConstraintAccordionViewHeaderMultipleValues } from './ConstraintAccordionViewHeaderMultipleValues';
|
||||
import type { IConstraint } from 'interfaces/strategy';
|
||||
|
||||
const StyledHeaderText = styled('span')(({ theme }) => ({
|
||||
display: '-webkit-box',
|
||||
WebkitLineClamp: 3,
|
||||
WebkitBoxOrient: 'vertical',
|
||||
overflow: 'hidden',
|
||||
maxWidth: '100px',
|
||||
minWidth: '100px',
|
||||
marginRight: '10px',
|
||||
marginTop: 'auto',
|
||||
marginBottom: 'auto',
|
||||
wordBreak: 'break-word',
|
||||
fontSize: theme.fontSizes.smallBody,
|
||||
[theme.breakpoints.down(710)]: {
|
||||
textAlign: 'center',
|
||||
padding: theme.spacing(1, 0),
|
||||
marginRight: 'inherit',
|
||||
maxWidth: 'inherit',
|
||||
},
|
||||
}));
|
||||
|
||||
const StyledHeaderWrapper = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
justifyContent: 'space-between',
|
||||
borderRadius: theme.spacing(1),
|
||||
}));
|
||||
|
||||
const StyledHeaderMetaInfo = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'stretch',
|
||||
marginLeft: theme.spacing(1),
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
marginLeft: 0,
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
},
|
||||
}));
|
||||
|
||||
interface ConstraintAccordionViewHeaderMetaInfoProps {
|
||||
constraint: IConstraint;
|
||||
singleValue: boolean;
|
||||
expanded: boolean;
|
||||
allowExpand: (shouldExpand: boolean) => void;
|
||||
disabled?: boolean;
|
||||
maxLength?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* @deprecated use NewConstraintAccordion components
|
||||
*/
|
||||
export const ConstraintAccordionViewHeaderInfo = ({
|
||||
constraint,
|
||||
singleValue,
|
||||
allowExpand,
|
||||
expanded,
|
||||
disabled = false,
|
||||
maxLength = 112, //The max number of characters in the values text for NOT allowing expansion
|
||||
}: ConstraintAccordionViewHeaderMetaInfoProps) => {
|
||||
return (
|
||||
<StyledHeaderWrapper>
|
||||
<StyledHeaderMetaInfo>
|
||||
<Tooltip title={constraint.contextName} arrow>
|
||||
<StyledHeaderText
|
||||
sx={(theme) => ({
|
||||
color: disabled
|
||||
? theme.palette.text.secondary
|
||||
: 'inherit',
|
||||
})}
|
||||
>
|
||||
{constraint.contextName}
|
||||
</StyledHeaderText>
|
||||
</Tooltip>
|
||||
<ConstraintViewHeaderOperator
|
||||
constraint={constraint}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<ConditionallyRender
|
||||
condition={singleValue}
|
||||
show={
|
||||
<ConstraintAccordionViewHeaderSingleValue
|
||||
constraint={constraint}
|
||||
allowExpand={allowExpand}
|
||||
disabled={disabled}
|
||||
/>
|
||||
}
|
||||
elseShow={
|
||||
<ConstraintAccordionViewHeaderMultipleValues
|
||||
constraint={constraint}
|
||||
expanded={expanded}
|
||||
allowExpand={allowExpand}
|
||||
maxLength={maxLength}
|
||||
disabled={disabled}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</StyledHeaderMetaInfo>
|
||||
</StyledHeaderWrapper>
|
||||
);
|
||||
};
|
||||
@ -1,104 +0,0 @@
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
import { styled } from '@mui/material';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import type { IConstraint } from 'interfaces/strategy';
|
||||
|
||||
const StyledValuesSpan = styled('span')(({ theme }) => ({
|
||||
display: '-webkit-box',
|
||||
WebkitLineClamp: 2,
|
||||
WebkitBoxOrient: 'vertical',
|
||||
overflow: 'hidden',
|
||||
wordBreak: 'break-word',
|
||||
fontSize: theme.fontSizes.smallBody,
|
||||
margin: 'auto 0',
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
margin: theme.spacing(1, 0),
|
||||
textAlign: 'center',
|
||||
},
|
||||
}));
|
||||
|
||||
interface ConstraintSingleValueProps {
|
||||
constraint: IConstraint;
|
||||
expanded: boolean;
|
||||
maxLength: number;
|
||||
allowExpand: (shouldExpand: boolean) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const StyledHeaderValuesContainerWrapper = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'stretch',
|
||||
margin: 'auto 0',
|
||||
}));
|
||||
|
||||
const StyledHeaderValuesContainer = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
justifyContent: 'stretch',
|
||||
margin: 'auto 0',
|
||||
flexDirection: 'column',
|
||||
marginLeft: theme.spacing(1),
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
marginLeft: 0,
|
||||
},
|
||||
}));
|
||||
|
||||
const StyledHeaderValuesExpand = styled('p')(({ theme }) => ({
|
||||
fontSize: theme.fontSizes.smallBody,
|
||||
marginTop: theme.spacing(0.5),
|
||||
color: theme.palette.links,
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
textAlign: 'center',
|
||||
},
|
||||
}));
|
||||
|
||||
/**
|
||||
* @deprecated use NewConstraintAccordion components
|
||||
*/
|
||||
export const ConstraintAccordionViewHeaderMultipleValues = ({
|
||||
constraint,
|
||||
expanded,
|
||||
allowExpand,
|
||||
maxLength,
|
||||
disabled = false,
|
||||
}: ConstraintSingleValueProps) => {
|
||||
const [expandable, setExpandable] = useState(false);
|
||||
|
||||
const text = useMemo(() => {
|
||||
return constraint?.values?.map((value) => value).join(', ');
|
||||
}, [constraint]);
|
||||
|
||||
useEffect(() => {
|
||||
if (text) {
|
||||
allowExpand((text?.length ?? 0) > maxLength);
|
||||
setExpandable((text?.length ?? 0) > maxLength);
|
||||
}
|
||||
}, [text, maxLength, allowExpand, setExpandable]);
|
||||
|
||||
return (
|
||||
<StyledHeaderValuesContainerWrapper>
|
||||
<StyledHeaderValuesContainer>
|
||||
<StyledValuesSpan
|
||||
sx={(theme) => ({
|
||||
color: disabled
|
||||
? theme.palette.text.secondary
|
||||
: 'inherit',
|
||||
})}
|
||||
>
|
||||
{text}
|
||||
</StyledValuesSpan>
|
||||
<ConditionallyRender
|
||||
condition={expandable}
|
||||
show={
|
||||
<StyledHeaderValuesExpand
|
||||
className={'valuesExpandLabel'}
|
||||
>
|
||||
{!expanded
|
||||
? `View all (${constraint?.values?.length})`
|
||||
: 'View less'}
|
||||
</StyledHeaderValuesExpand>
|
||||
}
|
||||
/>
|
||||
</StyledHeaderValuesContainer>
|
||||
</StyledHeaderValuesContainerWrapper>
|
||||
);
|
||||
};
|
||||
@ -1,51 +0,0 @@
|
||||
import { useEffect } from 'react';
|
||||
import { Chip, styled } from '@mui/material';
|
||||
import { formatConstraintValue } from 'utils/formatConstraintValue';
|
||||
import type { IConstraint } from 'interfaces/strategy';
|
||||
import { useLocationSettings } from 'hooks/useLocationSettings';
|
||||
|
||||
const StyledSingleValueChip = styled(Chip)(({ theme }) => ({
|
||||
margin: 'auto 0',
|
||||
marginLeft: theme.spacing(1),
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
margin: theme.spacing(1, 0),
|
||||
},
|
||||
}));
|
||||
|
||||
interface ConstraintSingleValueProps {
|
||||
constraint: IConstraint;
|
||||
allowExpand: (shouldExpand: boolean) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const StyledHeaderValuesContainerWrapper = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'stretch',
|
||||
margin: 'auto 0',
|
||||
}));
|
||||
|
||||
/**
|
||||
* @deprecated use NewConstraintAccordion components
|
||||
*/
|
||||
export const ConstraintAccordionViewHeaderSingleValue = ({
|
||||
constraint,
|
||||
allowExpand,
|
||||
disabled = false,
|
||||
}: ConstraintSingleValueProps) => {
|
||||
const { locationSettings } = useLocationSettings();
|
||||
|
||||
useEffect(() => {
|
||||
allowExpand(false);
|
||||
}, [allowExpand]);
|
||||
|
||||
return (
|
||||
<StyledHeaderValuesContainerWrapper>
|
||||
<StyledSingleValueChip
|
||||
sx={(theme) => ({
|
||||
color: disabled ? theme.palette.text.secondary : 'inherit',
|
||||
})}
|
||||
label={formatConstraintValue(constraint, locationSettings)}
|
||||
/>
|
||||
</StyledHeaderValuesContainerWrapper>
|
||||
);
|
||||
};
|
||||
@ -1,75 +0,0 @@
|
||||
import type { IConstraint } from 'interfaces/strategy';
|
||||
import { ConditionallyRender } from '../../../ConditionallyRender/ConditionallyRender';
|
||||
import { Tooltip, Box, styled } from '@mui/material';
|
||||
import { stringOperators } from 'constants/operators';
|
||||
import { ReactComponent as NegatedOnIcon } from 'assets/icons/not_operator_selected.svg';
|
||||
import { ConstraintOperator } from '../../ConstraintOperator/ConstraintOperator';
|
||||
import { StyledIconWrapper } from './StyledIconWrapper';
|
||||
import { ReactComponent as CaseSensitive } from 'assets/icons/24_Text format.svg';
|
||||
import { oneOf } from 'utils/oneOf';
|
||||
import { useTheme } from '@mui/material';
|
||||
|
||||
interface ConstraintViewHeaderOperatorProps {
|
||||
constraint: IConstraint;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const StyledHeaderValuesContainerWrapper = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'stretch',
|
||||
margin: 'auto 0',
|
||||
}));
|
||||
|
||||
const StyledHeaderConstraintContainer = styled('div')(({ theme }) => ({
|
||||
minWidth: '152px',
|
||||
position: 'relative',
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
paddingRight: 0,
|
||||
},
|
||||
}));
|
||||
|
||||
/**
|
||||
* @deprecated use NewConstraintAccordion components
|
||||
*/
|
||||
export const ConstraintViewHeaderOperator = ({
|
||||
constraint,
|
||||
disabled = false,
|
||||
}: ConstraintViewHeaderOperatorProps) => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<StyledHeaderValuesContainerWrapper>
|
||||
<ConditionallyRender
|
||||
condition={Boolean(constraint.inverted)}
|
||||
show={
|
||||
<Tooltip title={'Operator is negated'} arrow>
|
||||
<Box sx={{ display: 'flex' }}>
|
||||
<StyledIconWrapper isPrefix>
|
||||
<NegatedOnIcon />
|
||||
</StyledIconWrapper>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
}
|
||||
/>
|
||||
<StyledHeaderConstraintContainer>
|
||||
<ConstraintOperator
|
||||
constraint={constraint}
|
||||
hasPrefix={Boolean(constraint.inverted)}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</StyledHeaderConstraintContainer>
|
||||
<ConditionallyRender
|
||||
condition={
|
||||
!constraint.caseInsensitive &&
|
||||
oneOf(stringOperators, constraint.operator)
|
||||
}
|
||||
show={
|
||||
<Tooltip title='Case sensitive is active' arrow>
|
||||
<StyledIconWrapper>
|
||||
<CaseSensitive />
|
||||
</StyledIconWrapper>
|
||||
</Tooltip>
|
||||
}
|
||||
/>
|
||||
</StyledHeaderValuesContainerWrapper>
|
||||
);
|
||||
};
|
||||
@ -1,40 +0,0 @@
|
||||
import { forwardRef, type ReactNode } from 'react';
|
||||
import { styled } from '@mui/material';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
|
||||
export const StyledIconWrapperBase = styled('div')<{
|
||||
prefix?: boolean;
|
||||
}>(({ theme }) => ({
|
||||
backgroundColor: theme.palette.background.elevation2,
|
||||
width: 24,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
alignSelf: 'stretch',
|
||||
color: theme.palette.primary.main,
|
||||
marginLeft: theme.spacing(1),
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
}));
|
||||
|
||||
const StyledPrefixIconWrapper = styled(StyledIconWrapperBase)(({ theme }) => ({
|
||||
width: 'auto',
|
||||
paddingLeft: theme.spacing(1),
|
||||
paddingRight: theme.spacing(1),
|
||||
marginLeft: 0,
|
||||
borderTopRightRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
}));
|
||||
|
||||
/**
|
||||
* @deprecated use NewConstraintAccordion components
|
||||
*/
|
||||
export const StyledIconWrapper = forwardRef<
|
||||
HTMLDivElement,
|
||||
{ isPrefix?: boolean; children?: ReactNode }
|
||||
>(({ isPrefix, ...props }, ref) => (
|
||||
<ConditionallyRender
|
||||
condition={Boolean(isPrefix)}
|
||||
show={() => <StyledPrefixIconWrapper ref={ref} {...props} />}
|
||||
elseShow={() => <StyledIconWrapperBase ref={ref} {...props} />}
|
||||
/>
|
||||
));
|
||||
Loading…
Reference in New Issue
Block a user