diff --git a/src/components/ReadMore.js b/src/components/ReadMore.js index b62f59ed2d..0157af1d89 100644 --- a/src/components/ReadMore.js +++ b/src/components/ReadMore.js @@ -1,93 +1,83 @@ -import get from 'lodash/get'; -import { Component } from 'react'; -import { a, div, hh, span } from 'react-hyperscript-helpers'; +import React from 'react'; +import { useEffect, useState } from 'react'; import ReactTooltip from 'react-tooltip'; +export const ReadMore = ({ + inline = false, + content = [{''}], + moreContent = [{''}], + className = '', + style = {}, + readStyle = {}, + charLimit = 100, + hideUnderLimit = false, + readMoreText = 'Read More', + readLessText = 'Read Less', +}) => { + const [expanded, setExpanded] = useState(false); -export const ReadMore = hh(class ReadMore extends Component { - constructor(props) { - super(props); - this.state = { - expanded: false, - inline: get(this.props, 'inline', false), - content: get(this.props, 'content', [span({}, [''])]), - moreContent: get(this.props, 'moreContent', [span({}, [''])]), - className: get(this.props, 'className', ''), - style: get(this.props, 'style', {}), - readStyle: get(this.props, 'readStyle', {}), - charLimit: get(this.props, 'charLimit', 100), - hideUnderLimit: get(this.props, 'hideUnderLimit', false), - readMoreText: get(this.props, 'readMoreText', 'Read More'), - readLessText: get(this.props, 'readLessText', 'Read Less') - }; - } - - componentDidMount() { + useEffect(() => { ReactTooltip.rebuild(); - } - - getContent = () => { - return this.state.inline ? this.getInlineContent() : this.getFormattedContent(); - }; + }); - getUnderLimit = () => { - return !this.state.content || this.state.content.length <= this.state.charLimit; - }; + const getUnderLimit = () => { + return !content || content.length <= charLimit; + } - getInlineContent = () => { - const content = this.state.expanded - ? this.state.content - : this.state.content.slice(0, this.state.charLimit) + (this.state.hideUnderLimit - ? this.getUnderLimit() ? '' : ' ...' + const getInlineContent = () => { + const content = expanded + ? content + : content.slice(0, charLimit) + (hideUnderLimit + ? getUnderLimit() ? '' : ' ...' : ' ...'); - return span({ - className: this.state.className, - style: this.state.style, - }, content); - }; + return ( + + {content} + + ); + } - getFormattedContent = () => { - return this.state.expanded ? [...this.state.content, ...this.state.moreContent] : this.state.content; - }; + const getFormattedContent = () => { + return expanded ? [...content, ...moreContent] : content; + } - readMore = () => { - this.setState(prev => { - prev.expanded = true; - return prev; - }); - }; + const getContent = () => { + return inline ? getInlineContent() : getFormattedContent(); + } - readLess = () => { - this.setState(prev => { - prev.expanded = false; - return prev; - }); - }; + const readMore = () => { + setExpanded(true); + } - getReadLink = (fun, text, classes) => { - const {linkElements, linkElementsStyle} = this.state.inline ? - {linkElements: [text], linkElementsStyle: {}} : - { + const readLess = () => { + setExpanded(false); + } + + const getReadLink = (fun, text, classes) => { + const { linkElements, linkElementsStyle } = inline + ? { linkElements: [text], linkElementsStyle: {} } + : { linkElements: [ text, - span({ - className: classes, - style: {padding: '0 1rem'}, - 'aria-hidden': 'true', - })], linkElementsStyle: this.state.readStyle, + , + ], + linkElementsStyle: readStyle, }; - return a({ onClick: () => fun(), style: linkElementsStyle}, linkElements); + return ( + fun()} style={linkElementsStyle}> + {linkElements} + + ); }; - render() { - const readLink = this.state.expanded ? - this.getReadLink(this.readLess, this.state.readLessText, 'glyphicon glyphicon-chevron-up') : - this.getReadLink(this.readMore, this.state.readMoreText, 'glyphicon glyphicon-chevron-down'); - return div({}, this.state.hideUnderLimit && this.getUnderLimit() ? [ - this.getContent() - ]: [ - this.getContent(), - readLink - ]); - } -}); + const readLink = expanded ? + getReadLink(readLess, readLessText, 'glyphicon glyphicon-chevron-up') : + getReadLink(readMore, readMoreText, 'glyphicon glyphicon-chevron-down'); + + return ( +