{"version":3,"file":"index-UQi7Vzrv.js","sources":["../../../app/javascript/src/explore/elements/CollapsibleContainer/index.jsx"],"sourcesContent":["import React, { useCallback, useRef, useState, useEffect, useMemo } from 'react';\nimport cls from 'classnames';\n\nimport animateHeight from 'src/animations/animateHeight';\nimport BreakpointsService, { breakpoints } from 'src/explore/services/breakpoints';\nimport styles from './index.module.sass';\n\nconst MoreBtn = ({ active, bgRGB, btnClass, text = 'Read More', handleClick }) => {\n  const handleKeyDown = ( event ) => {\n    if ( event.key === 'Enter' || event.key === ' ' ) {\n      handleClick();\n    }\n  };\n\n  return (\n    <button\n      type=\"button\"\n      className={cls( styles.btn, 'position-absolute border-0', btnClass, {\n        [styles.btnHide]: active,\n      })}\n      onKeyDown={handleKeyDown}\n      onClick={handleClick}\n      style={{\n        backgroundColor: bgRGB ? `rgba( ${bgRGB[0]}, ${bgRGB[1]}, ${bgRGB[2]} )` : false,\n      }}\n      tabIndex={0}\n    >\n      <span\n        className={styles.gradientEdge}\n        style={{\n          backgroundImage: bgRGB\n            ? `linear-gradient( 90deg, rgba( ${bgRGB[0]}, ${bgRGB[1]}, ${bgRGB[2]}, 0 ) 0%, rgba( ${bgRGB[0]}, ${bgRGB[1]}, ${bgRGB[2]}, 1 ) 90%, rgba( ${bgRGB[0]}, ${bgRGB[1]}, ${bgRGB[2]}, 1 ) 100% )`\n            : false,\n        }}\n      />\n      {text}\n    </button>\n  );\n};\n\nconst CollapsibleContainer = ({\n  bgRGB = undefined,\n  btnClass = undefined,\n  children,\n  className = '',\n  collapseHeight,\n  moreText = 'Read More',\n  onViewMore = undefined,\n}) => {\n  const [ active, setActive ] = useState( false );\n  const [ collapseTo, setCollapseTo ] = useState( null );\n  const [ open, setOpen ] = useState( false );\n  const [ overflow, setOverflow ] = useState( false );\n\n  const containerRef = useRef( null );\n  const contentRef = useRef( null );\n\n  // get breakpoints from smallest to largest\n  const breakpointWidths = useMemo(() => {\n    const widths = {};\n    Object.keys( breakpoints ).forEach(( size ) => {\n      widths[breakpoints[size]] = size;\n    });\n    return widths;\n  }, []);\n  // set collapse heights for all breakpoints, in pixels\n  const collapseHeightPx = useMemo(() => {\n    let lastHeight = null;\n    const heightPx = {};\n    Object.keys( breakpointWidths ).forEach(( size ) => {\n      // null = do not collapse\n      if ( collapseHeight[breakpointWidths[size]] === null ) {\n        lastHeight = null;\n      }\n      // if collapse height is set, use it + update lastHeight for reference at next breakpoint\n      else if ( collapseHeight[breakpointWidths[size]]) {\n        // convert to px if rem\n        lastHeight =\n          String( collapseHeight[breakpointWidths[size]]).indexOf( 'rem' ) > -1\n            ? parseFloat( collapseHeight[breakpointWidths[size]]) * 16\n            : collapseHeight[breakpointWidths[size]];\n      }\n      heightPx[breakpointWidths[size]] = lastHeight;\n    });\n    return heightPx;\n  }, [ breakpointWidths, collapseHeight ]);\n\n  useEffect(() => {\n    // determine collapse state\n    const content = contentRef;\n\n    const setCollapse = () => {\n      // collapse + content height\n      setCollapseTo( collapseHeightPx[BreakpointsService.getBreakpointSize()]);\n      const contentStyle = getComputedStyle( content.current );\n      const contentHeight =\n        content.current.offsetHeight +\n        parseInt( contentStyle.marginTop, 10 ) +\n        parseInt( contentStyle.marginBottom, 10 );\n\n      // collapse set + necessary\n      if ( collapseTo && collapseTo < contentHeight ) {\n        setOverflow( 'collapse' );\n      } else {\n        // do not collapse\n        setOverflow( false );\n      }\n    };\n    setCollapse();\n\n    window.addEventListener( 'resize', setCollapse );\n    return () => {\n      window.removeEventListener( 'resize', setCollapse );\n    };\n  }, [ children, collapseHeightPx, collapseTo ]);\n\n  // initialize setHeight with stable arguments\n  const setHeight = useCallback(\n    () =>\n      animateHeight({\n        container: containerRef.current,\n        content: contentRef.current,\n        duration: 400,\n      }),\n    []\n  );\n\n  const handleClick = () => {\n    setActive( true );\n    setHeight()({\n      open,\n      callback: () => {\n        setOpen( !open );\n      },\n      minHeight: collapseTo,\n    });\n\n    if ( onViewMore ) onViewMore();\n  };\n\n  // set initial collapse height if necessary\n  let containerClass = {};\n  if ( overflow === 'collapse' && !open ) {\n    containerClass = {\n      height: collapseTo,\n    };\n  }\n\n  return (\n    <div className=\"position-relative\">\n      <div\n        className={cls( 'position-relative overflow-hidden', className )}\n        style={containerClass}\n        ref={containerRef}\n      >\n        <div className=\"overflow-hidden\" ref={contentRef}>\n          {children}\n        </div>\n        <div\n          className={cls( styles.mask, { [styles.maskHide]: !overflow || active })}\n          style={{\n            top: collapseTo,\n            backgroundColor: bgRGB ? `rgba( ${bgRGB[0]}, ${bgRGB[1]}, ${bgRGB[2]} )` : false,\n          }}\n        />\n      </div>\n      {overflow === 'collapse' && (\n        <MoreBtn\n          active={active}\n          bgRGB={bgRGB}\n          btnClass={btnClass}\n          text={moreText}\n          handleClick={handleClick}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default CollapsibleContainer;\n"],"names":["MoreBtn","active","bgRGB","btnClass","text","handleClick","handleKeyDown","event","React","cls","styles","CollapsibleContainer","children","className","collapseHeight","moreText","onViewMore","setActive","useState","collapseTo","setCollapseTo","open","setOpen","overflow","setOverflow","containerRef","useRef","contentRef","breakpointWidths","useMemo","widths","breakpoints","size","collapseHeightPx","lastHeight","heightPx","useEffect","content","setCollapse","BreakpointsService","contentStyle","contentHeight","setHeight","useCallback","animateHeight","containerClass"],"mappings":"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"}