1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-26 13:48:33 +02:00

Make accordion expand dependent on text width

This commit is contained in:
andreas-unleash 2022-07-20 10:17:26 +03:00
parent 4c5eb20e09
commit ffc0c0a229
2 changed files with 64 additions and 15 deletions

View File

@ -12,6 +12,7 @@ import {
} from 'constants/operators';
import { useStyles } from '../ConstraintAccordion.styles';
import {useState} from "react";
interface IConstraintAccordionViewProps {
constraint: IConstraint;
onDelete?: () => void;
@ -26,27 +27,34 @@ export const ConstraintAccordionView = ({
onDelete,
}: IConstraintAccordionViewProps) => {
const { classes: styles } = useStyles();
const [expandable, setExpandable] = useState(true)
const [expanded, setExpanded] = useState(false);
const singleValue = oneOf(
[...semVerOperators, ...numOperators, ...dateOperators],
constraint.operator
);
const handleChange =
() => (event: React.SyntheticEvent, isExpanded: boolean) => {
setExpanded((!isExpanded && expandable));
};
return (
<Accordion
className={styles.accordion}
classes={{ root: styles.accordionRoot }}
expanded={expanded}
onChange={handleChange}
>
<AccordionSummary
className={styles.summary}
expandIcon={<ExpandMore titleAccess="Toggle" />}
>
<AccordionSummary className={styles.summary} expandIcon={null}>
<ConstraintAccordionViewHeader
compact={compact}
constraint={constraint}
onEdit={onEdit}
onDelete={onDelete}
singleValue={singleValue}
allowExpand={(shouldExpand) => setExpandable(shouldExpand)}
/>
</AccordionSummary>

View File

@ -5,11 +5,12 @@ import { IConstraint } from 'interfaces/strategy';
import { useStyles } from 'component/common/ConstraintAccordion/ConstraintAccordion.styles';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import React from 'react';
import React, { useEffect, useRef, useState } from 'react';
import { formatConstraintValue } from 'utils/formatConstraintValue';
import { useLocationSettings } from 'hooks/useLocationSettings';
import { ConstraintOperator } from 'component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator';
import classnames from 'classnames';
import ReactDOM from 'react-dom';
const StyledHeaderText = styled('span')(({ theme }) => ({
display: '-webkit-box',
@ -54,6 +55,7 @@ interface IConstraintAccordionViewHeaderProps {
onDelete?: () => void;
onEdit?: () => void;
singleValue: boolean;
allowExpand: (shouldExpand: boolean) => void;
}
export const ConstraintAccordionViewHeader = ({
@ -62,9 +64,14 @@ export const ConstraintAccordionViewHeader = ({
onEdit,
onDelete,
singleValue,
allowExpand
}: IConstraintAccordionViewHeaderProps) => {
const { classes: styles } = useStyles();
const { locationSettings } = useLocationSettings();
const [height, setHeight] = useState(0);
const [width, setWidth] = useState(0);
const [textWidth, setTextWidth] = useState(0);
const elementRef = useRef<HTMLElement>(null);
const onEditClick =
onEdit &&
@ -80,6 +87,35 @@ export const ConstraintAccordionViewHeader = ({
onDelete();
});
useEffect(() => {
if (elementRef && elementRef.current != null) {
console.log(elementRef.current.clientHeight);
console.log(elementRef.current.clientWidth);
setTextWidth(
Math.round(getTextWidth(elementRef.current.innerText) / 2) // 2 lines
);
setHeight(elementRef.current.clientHeight);
setWidth(elementRef.current.clientWidth);
allowExpand(textWidth > width)
}
}, []);
function getTextWidth(text: string | null) {
if (text != null) {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
if (context != null) {
context.font = getComputedStyle(document.body).font;
return context.measureText(text).width;
}
}
return 0;
}
const shouldBeExpandable = textWidth > width;
return (
<div className={styles.headerContainer}>
<ConstraintIcon />
@ -104,20 +140,25 @@ export const ConstraintAccordionViewHeader = ({
}
elseShow={
<div className={styles.headerValuesContainer}>
<StyledValuesSpan>
<StyledValuesSpan ref={elementRef}>
{constraint?.values
?.map(value => value)
.join(', ')}
</StyledValuesSpan>
<p
className={classnames(
styles.headerValuesExpand,
'valuesExpandLabel'
)}
>
Expand to view all ({constraint?.values?.length}
)
</p>
<ConditionallyRender
condition={shouldBeExpandable}
show={
<p
className={classnames(
styles.headerValuesExpand,
'valuesExpandLabel'
)}
>
Expand to view all (
{constraint?.values?.length})
</p>
}
/>
</div>
}
/>