{"version":3,"file":"react-readMoreMaxLines.ih9djtr9.js","sources":["../../../wwwdev/esm/components/react-readmore/react-readMoreMaxLines.tsx"],"sourcesContent":["import React, { type HTMLAttributes, useState, useEffect, useRef } from 'react';\r\nimport styled, { css, type RuleSet } from 'styled-components';\r\nimport { breakpoint, sizes, fonts } from 'variables';\r\nimport memoizeOne from 'memoize-one';\r\nimport ResizeObserver from 'resize-observer-polyfill';\r\n\r\ninterface IReadMore extends HTMLAttributes<HTMLDivElement> {\r\n    lines: {\r\n        xs?: number;\r\n        sm?: number;\r\n        md?: number;\r\n        lg?: number;\r\n        xl?: number;\r\n        xxl?: number;\r\n        xxxl?: number;\r\n    };\r\n    readMore?: string;\r\n    readLess?: string;\r\n    lineHeight?: number;\r\n    fontSize?: number;\r\n}\r\n\r\nconst ReadMore = styled.div<IReadMore & { expanded: boolean; lineHeight: number }>`\r\n    line-height: ${({ lineHeight }) => `${lineHeight}em`};\r\n    overflow: hidden;\r\n\r\n    ${({ lines, expanded, lineHeight }): RuleSet =>\r\n        Object.entries(lines).map(\r\n            ([breakpointKey, numberOfLines]): RuleSet => css`\r\n                ${breakpoint.up(sizes[breakpointKey])} {\r\n                    max-height: ${!expanded && numberOfLines ? `${numberOfLines * lineHeight}em` : 'none'};\r\n                }\r\n            `\r\n        )}\r\n\r\n    p {\r\n        margin-bottom: ${({ lineHeight }) => `${lineHeight}em`};\r\n\r\n        &:last-child {\r\n            margin-bottom: 0;\r\n        }\r\n    }\r\n`;\r\n\r\nconst ButtonWrapper = styled.div<{ lineHeight: number }>`\r\n    display: flex;\r\n    align-items: flex-end;\r\n    height: ${({ lineHeight }) => `${lineHeight}em`};\r\n`;\r\n\r\nconst Button = styled('button')<IReadMore>`\r\n    background: none;\r\n    border: 0;\r\n    margin: 0;\r\n    padding: 0;\r\n    text-decoration: underline;\r\n    font-weight: bold;\r\n\r\n    ${({ lines }): RuleSet =>\r\n        Object.entries(lines).map(\r\n            ([breakpointKey, numberOfLines]): RuleSet => css`\r\n                ${breakpoint.up(sizes[breakpointKey])} {\r\n                    display: ${numberOfLines ? 'block' : 'none'};\r\n                }\r\n            `\r\n        )}\r\n`;\r\n\r\nconst convertSizesToLinesPerBreakpoint = memoizeOne((lines): any =>\r\n    Object.keys(sizes)\r\n        .filter((key): boolean => !Number.isNaN(Number(sizes[key])))\r\n        .reduce((acc, currentBreakpointKey, index): any => {\r\n            const valuesInAcc = Object.values(acc);\r\n            const lastValue = valuesInAcc.length ? valuesInAcc[index - 1] : undefined;\r\n            const lastValueThatIsNotUndefined = lastValue !== undefined ? lastValue : 0;\r\n            const currentValue = !Number.isNaN(lines[currentBreakpointKey])\r\n                ? lines[currentBreakpointKey]\r\n                : lastValueThatIsNotUndefined;\r\n\r\n            acc[currentBreakpointKey] = currentValue;\r\n\r\n            return acc;\r\n        }, {})\r\n);\r\n\r\nexport function ReactReadMoreMaxLines(props: IReadMore): JSX.Element {\r\n    const { lines, readMore, readLess, lineHeight = 20, fontSize = 13, children, ...restProps } = props;\r\n    const calculatedLineHeight = lineHeight / fontSize;\r\n    const [expanded, setExpanded] = useState(false);\r\n    const [showButton, setShowButton] = useState(false);\r\n    const readMoreRef = useRef<HTMLDivElement>(null);\r\n    const resizeObserver = useRef(\r\n        new ResizeObserver((entries): void => {\r\n            entries.forEach((entry): void => {\r\n                const { target } = entry;\r\n                const { scrollHeight } = target;\r\n                const linesPerBreakpoint = convertSizesToLinesPerBreakpoint(lines);\r\n                const currentBreakpoint = breakpoint.getNameFromWidth(window.innerWidth);\r\n                const numberOfLines = linesPerBreakpoint[currentBreakpoint];\r\n                const maxHeight = numberOfLines ? numberOfLines * lineHeight : 0;\r\n                const overflow = scrollHeight > maxHeight;\r\n\r\n                if (maxHeight && overflow) {\r\n                    setShowButton(true);\r\n                } else {\r\n                    setShowButton(false);\r\n                }\r\n            });\r\n        })\r\n    );\r\n\r\n    useEffect(() => {\r\n        const readMoreNode = readMoreRef.current;\r\n\r\n        if (readMoreNode) {\r\n            resizeObserver.current.observe(readMoreNode);\r\n        }\r\n\r\n        return (): void => {\r\n            if (readMoreNode) {\r\n                resizeObserver.current.unobserve(readMoreNode);\r\n            }\r\n        };\r\n    });\r\n\r\n    function handleClick(): void {\r\n        setExpanded(!expanded);\r\n    }\r\n\r\n    return (\r\n        <>\r\n            <ReadMore\r\n                ref={readMoreRef}\r\n                lines={lines}\r\n                expanded={expanded}\r\n                lineHeight={calculatedLineHeight}\r\n                {...restProps}\r\n            >\r\n                {children}\r\n            </ReadMore>\r\n            {showButton && (\r\n                <ButtonWrapper lineHeight={calculatedLineHeight}>\r\n                    <Button type=\"button\" lines={lines} onClick={handleClick}>\r\n                        {!expanded ? readMore : readLess}\r\n                    </Button>\r\n                </ButtonWrapper>\r\n            )}\r\n        </>\r\n    );\r\n}\r\n\r\nexport default ReactReadMoreMaxLines;\r\n"],"names":["ReadMore","styled","div","withConfig","displayName","componentId","lineHeight","lines","expanded","Object","entries","map","breakpointKey","numberOfLines","css","breakpoint","up","sizes","ButtonWrapper","Button","convertSizesToLinesPerBreakpoint","memoizeOne","keys","filter","key","Number","isNaN","reduce","acc","currentBreakpointKey","index","valuesInAcc","values","lastValue","length","undefined","lastValueThatIsNotUndefined","currentValue","ReactReadMoreMaxLines","props","readMore","readLess","fontSize","children","restProps","calculatedLineHeight","setExpanded","useState","showButton","setShowButton","readMoreRef","useRef","resizeObserver","ResizeObserver","forEach","entry","target","scrollHeight","linesPerBreakpoint","currentBreakpoint","getNameFromWidth","window","innerWidth","maxHeight","overflow","useEffect","readMoreNode","current","observe","unobserve","handleClick","jsxs","Fragment","jsx"],"mappings":"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"}