diff --git a/src/components/CopySelectionHelper.js b/src/components/CopySelectionHelper.js deleted file mode 100644 index 119910bb4c73..000000000000 --- a/src/components/CopySelectionHelper.js +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react'; -import ExpensiMark from 'expensify-common/lib/ExpensiMark'; -import CONST from '../CONST'; -import KeyboardShortcut from '../libs/KeyboardShortcut'; -import Clipboard from '../libs/Clipboard'; -import SelectionScraper from '../libs/SelectionScraper'; - -class CopySelectionHelper extends React.Component { - componentDidMount() { - const copyShortcutConfig = CONST.KEYBOARD_SHORTCUTS.COPY; - this.unsubscribeCopyShortcut = KeyboardShortcut.subscribe( - copyShortcutConfig.shortcutKey, - this.copySelectionToClipboard, - copyShortcutConfig.descriptionKey, - copyShortcutConfig.modifiers, - false, - ); - } - - componentWillUnmount() { - if (!this.unsubscribeCopyShortcut) { - return; - } - - this.unsubscribeCopyShortcut(); - } - - copySelectionToClipboard() { - const selection = SelectionScraper.getCurrentSelection(); - if (!selection) { - return; - } - const parser = new ExpensiMark(); - if (!Clipboard.canSetHtml()) { - Clipboard.setString(parser.htmlToMarkdown(selection)); - return; - } - Clipboard.setHtml(selection, parser.htmlToText(selection)); - } - - render() { - return null; - } -} - -export default CopySelectionHelper; diff --git a/src/hooks/useCopySelectionHelper.js b/src/hooks/useCopySelectionHelper.js new file mode 100644 index 000000000000..42871981e29c --- /dev/null +++ b/src/hooks/useCopySelectionHelper.js @@ -0,0 +1,34 @@ +import {useEffect} from 'react'; +import ExpensiMark from 'expensify-common/lib/ExpensiMark'; +import CONST from '../CONST'; +import KeyboardShortcut from '../libs/KeyboardShortcut'; +import Clipboard from '../libs/Clipboard'; +import SelectionScraper from '../libs/SelectionScraper'; + +function copySelectionToClipboard() { + const selection = SelectionScraper.getCurrentSelection(); + if (!selection) { + return; + } + const parser = new ExpensiMark(); + if (!Clipboard.canSetHtml()) { + Clipboard.setString(parser.htmlToMarkdown(selection)); + return; + } + Clipboard.setHtml(selection, parser.htmlToText(selection)); +} + +export default function useCopySelectionHelper() { + useEffect(() => { + const copyShortcutConfig = CONST.KEYBOARD_SHORTCUTS.COPY; + const unsubscribeCopyShortcut = KeyboardShortcut.subscribe( + copyShortcutConfig.shortcutKey, + copySelectionToClipboard, + copyShortcutConfig.descriptionKey, + copyShortcutConfig.modifiers, + false, + ); + + return unsubscribeCopyShortcut; + }, []); +} diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js index 9c2099b55e75..817174398896 100755 --- a/src/pages/home/report/ReportActionsView.js +++ b/src/pages/home/report/ReportActionsView.js @@ -10,6 +10,7 @@ import Timing from '../../../libs/actions/Timing'; import CONST from '../../../CONST'; import compose from '../../../libs/compose'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; +import useCopySelectionHelper from '../../../hooks/useCopySelectionHelper'; import useReportScrollManager from '../../../hooks/useReportScrollManager'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; import Performance from '../../../libs/Performance'; @@ -17,7 +18,6 @@ import {withNetwork} from '../../../components/OnyxProvider'; import FloatingMessageCounter from './FloatingMessageCounter'; import networkPropTypes from '../../../components/networkPropTypes'; import ReportActionsList from './ReportActionsList'; -import CopySelectionHelper from '../../../components/CopySelectionHelper'; import * as ReportActionsUtils from '../../../libs/ReportActionsUtils'; import * as ReportUtils from '../../../libs/ReportUtils'; import reportPropTypes from '../../reportPropTypes'; @@ -61,6 +61,8 @@ const defaultProps = { function ReportActionsView(props) { const context = useContext(ReportScreenContext); + useCopySelectionHelper(); + const reportScrollManager = useReportScrollManager(); const didLayout = useRef(false); @@ -340,7 +342,6 @@ function ReportActionsView(props) { ref={context.reactionListRef} report={props.report} /> - ); }