Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-04-01 01:18:10 +02:00
Code Issues Projects Releases Wiki Activity

Make accordion expand dependent on text width

Browse Source
This commit is contained in:
andreas-unleash 2022-07-20 13:01:25 +03:00
parent ffc0c0a229
commit e33ed6b8e7
2 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
View File

@ -35,26 +35,30 @@ export const ConstraintAccordionView = ({
constraint.operator constraint.operator
); );
const handleChange = const handleClick = () => {
() => (event: React.SyntheticEvent, isExpanded: boolean) => { console.log('click')
setExpanded((!isExpanded && expandable)); if (expandable) {
}; setExpanded(!expanded);
}
};
return ( return (
<Accordion <Accordion
className={styles.accordion} className={styles.accordion}
classes={{ root: styles.accordionRoot }} classes={{ root: styles.accordionRoot }}
expanded={expanded} expanded={expanded}
onChange={handleChange}
> >
<AccordionSummary className={styles.summary} expandIcon={null}> <AccordionSummary className={styles.summary} expandIcon={null} onClick={handleClick}>
<ConstraintAccordionViewHeader <ConstraintAccordionViewHeader
compact={compact} compact={compact}
constraint={constraint} constraint={constraint}
onEdit={onEdit} onEdit={onEdit}
onDelete={onDelete} onDelete={onDelete}
singleValue={singleValue} singleValue={singleValue}
allowExpand={(shouldExpand) => setExpandable(shouldExpand)} allowExpand={(shouldExpand) => {
console.log(shouldExpand)
setExpandable(shouldExpand)
}}
/> />
</AccordionSummary> </AccordionSummary>

4
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
View File

@ -89,13 +89,13 @@ export const ConstraintAccordionViewHeader = ({
useEffect(() => { useEffect(() => {
if (elementRef && elementRef.current != null) { if (elementRef && elementRef.current != null) {
console.log(elementRef.current.clientHeight);
console.log(elementRef.current.clientWidth);
setTextWidth( setTextWidth(
Math.round(getTextWidth(elementRef.current.innerText) / 2) // 2 lines Math.round(getTextWidth(elementRef.current.innerText) / 2) // 2 lines
); );
setHeight(elementRef.current.clientHeight); setHeight(elementRef.current.clientHeight);
setWidth(elementRef.current.clientWidth); setWidth(elementRef.current.clientWidth);
console.log(textWidth)
console.log(width)
allowExpand(textWidth > width) allowExpand(textWidth > width)
} }
}, []); }, []);