Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | 1x 6x 6x 6x 1x 3x 1x 2x 2x 2x 2x 2x | import React from 'react'; import './Lect.css'; export const ENDING_PUNCTUATION = ['.', '!', '?']; export const getSpacer = text => (ENDING_PUNCTUATION.includes(text?.slice(-1)) ? ' ' : ' '); export const getHasModalInformation = lect => !!lect.explanation || !!lect.translation; export const getClassName = (shouldHighlight, hasModalInformation) => [ 'Lect', shouldHighlight ? 'highlighted' : 'unHighlighted', hasModalInformation ? 'clickable' : '', ].join(' '); const Lect = ({ lect, shouldHighlight, showModal }) => { if (!lect) { return null; } const hasModalInformation = getHasModalInformation(lect); const className = getClassName(shouldHighlight, hasModalInformation); const spacer = getSpacer(lect.text); const handleClick = hasModalInformation && /* istanbul ignore next */ (() => showModal(lect)); return ( <span className={ className } onClick={ handleClick } aria-hidden='true' > { `${lect.text}${spacer}` } </span> ); }; export default Lect; |