11774677434

Committed 11 Nov 2024 08:16AM CUT coverage: 89.083%. Remained the same

Build # 11774677434

Build Type

Pull #1305

github

Committed by

web-flow

Commit Message

Merge 8d745996e into ef88a3194

Pull Request Pull Request #1305: chore(deps): update eslint

Run Details

1387 of 1773 branches covered (78.23%)

Branch coverage included in aggregate %.

3411 of 3613 relevant lines covered (94.41%)

60.62 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

57.14

/src/components/ExpandableText/ExpandableText.tsx

import * as React from 'react';
import ExpandIcon from '@material-design-icons/svg/round/expand_more.svg';
import { bem } from '../../utils';
import styles from './ExpandableText.scss';
import { Button } from '../Buttons';

export interface Props extends React.HTMLAttributes<HTMLDivElement> {
    /** The content of the block */
    children: React.ReactNode;
    /** The maximum number of lines to be shown when displaying the text in collapsed mode  */
    threshold?: number;
    /** Label for the button when the element is collapsed */
    showMoreButtonLabel: string;
    /** Label for the button when the element is expanded */
    showLessButtonLabel: string;
}

const { block, elem } = bem('ExpandableText', styles);

export const ExpandableText = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
    const { children, threshold = 5, showMoreButtonLabel, showLessButtonLabel, ...rest } = props;
    const contentRef = React.createRef<HTMLDivElement>();
    const [isExpandable, setIsExpandable] = React.useState(false);
    const [isCollapsed, setIsCollapsed] = React.useState(true);

    const collapsedHeight = `calc(var(--line-height-normal) * ${threshold})`;

    // After first render determine if the text is longer or not then the maximum allowed
    React.useLayoutEffect(() => {
        if (!isExpandable && contentRef.current) {
            contentRef.current.style.maxHeight = collapsedHeight;

            if (contentRef.current.scrollHeight > contentRef.current.clientHeight) {
                setIsExpandable(true);
                contentRef.current.style.height = collapsedHeight;
                contentRef.current.style.maxHeight = 'initial';
            }
        }
    }, []); // eslint-disable-line react-hooks/exhaustive-deps

    const handleToggleClick = () => {
        if (!contentRef.current) {
            return;
        }

        if (isCollapsed) {
            const sectionHeight = contentRef.current.scrollHeight;
            contentRef.current.style.height = `${sectionHeight}px`;
        } else {
            contentRef.current.style.height = collapsedHeight;
        }

        setIsCollapsed((prevIsCollapsed) => !prevIsCollapsed);
    };

    return (
        <div ref={ref} {...rest} {...block(props)}>
            <div ref={contentRef} {...elem('content')}>
                {children}
            </div>
            {isExpandable && (
                <Button variant="ghost" size="small" onClick={handleToggleClick}>
                    {isCollapsed ? showMoreButtonLabel : showLessButtonLabel}
                    <ExpandIcon {...elem('buttonArrow', { isCollapsed })} />
                </Button>
            )}
        </div>
    );
});

ExpandableText.displayName = 'ExpandableText';

1	import * as React from 'react';	2✔
2	import ExpandIcon from '@material-design-icons/svg/round/expand_more.svg';	2✔
3	import { bem } from '../../utils';	2✔
4	import styles from './ExpandableText.scss';	2✔
5	import { Button } from '../Buttons';	2✔
6
7	export interface Props extends React.HTMLAttributes<HTMLDivElement> {
8	/** The content of the block */
9	children: React.ReactNode;
10	/** The maximum number of lines to be shown when displaying the text in collapsed mode */
11	threshold?: number;
12	/** Label for the button when the element is collapsed */
13	showMoreButtonLabel: string;
14	/** Label for the button when the element is expanded */
15	showLessButtonLabel: string;
16	}
17
18	const { block, elem } = bem('ExpandableText', styles);	2✔
19
20	export const ExpandableText = React.forwardRef<HTMLDivElement, Props>((props, ref) => {	2✔
21	const { children, threshold = 5, showMoreButtonLabel, showLessButtonLabel, ...rest } = props;	4!
22	const contentRef = React.createRef<HTMLDivElement>();	1✔
23	const [isExpandable, setIsExpandable] = React.useState(false);	1✔
24	const [isCollapsed, setIsCollapsed] = React.useState(true);	1✔
25
26	const collapsedHeight = `calc(var(--line-height-normal) * ${threshold})`;	1✔
27
28	// After first render determine if the text is longer or not then the maximum allowed
29	React.useLayoutEffect(() => {	1✔
30	if (!isExpandable && contentRef.current) {	1✔
31	contentRef.current.style.maxHeight = collapsedHeight;	1✔
32
33	if (contentRef.current.scrollHeight > contentRef.current.clientHeight) {	1!
34	setIsExpandable(true);	×
35	contentRef.current.style.height = collapsedHeight;	×
36	contentRef.current.style.maxHeight = 'initial';	×
37	}
38	}
39	}, []); // eslint-disable-line react-hooks/exhaustive-deps
40
41	const handleToggleClick = () => {	1✔
42	if (!contentRef.current) {	×
43	return;	×
44	}
45
46	if (isCollapsed) {	×
47	const sectionHeight = contentRef.current.scrollHeight;	×
48	contentRef.current.style.height = `${sectionHeight}px`;	×
49	} else {
50	contentRef.current.style.height = collapsedHeight;	×
51	}
52
53	setIsCollapsed((prevIsCollapsed) => !prevIsCollapsed);	×
54	};
55
56	return (	1✔
57	<div ref={ref} {...rest} {...block(props)}>
58	<div ref={contentRef} {...elem('content')}>
59	{children}
60	</div>
61	{isExpandable && (	1!
62	<Button variant="ghost" size="small" onClick={handleToggleClick}>
63	{isCollapsed ? showMoreButtonLabel : showLessButtonLabel}	×
64	<ExpandIcon {...elem('buttonArrow', { isCollapsed })} />
65	</Button>
66	)}
67	</div>
68	);
69	});
70
71	ExpandableText.displayName = 'ExpandableText';	2✔

textkernel / oneui / 11774677434

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous