From 7b08bdbf521e596ed9782e8e385df0ce6884a92e Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Sat, 30 Dec 2023 13:27:11 +0530 Subject: [PATCH 1/2] fix: Codeblocks does not wrap. Signed-off-by: Krishna Gupta --- .../BasePreRenderer.js => PreRenderer.js} | 36 ++++------ .../HTMLRenderers/PreRenderer/index.js | 68 ------------------- .../HTMLRenderers/PreRenderer/index.native.js | 14 ---- 3 files changed, 15 insertions(+), 103 deletions(-) rename src/components/HTMLEngineProvider/HTMLRenderers/{PreRenderer/BasePreRenderer.js => PreRenderer.js} (68%) delete mode 100644 src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js delete mode 100644 src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.native.js diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer.js similarity index 68% rename from src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js rename to src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer.js index 07954cc97a00..948dec6757f7 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer.js @@ -1,14 +1,14 @@ import PropTypes from 'prop-types'; -import React, {forwardRef} from 'react'; -import {ScrollView, View} from 'react-native'; +import React from 'react'; +import {View} from 'react-native'; import _ from 'underscore'; -import htmlRendererPropTypes from '@components/HTMLEngineProvider/HTMLRenderers/htmlRendererPropTypes'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import {ShowContextMenuContext, showContextMenuForReport} from '@components/ShowContextMenuContext'; import withLocalize from '@components/withLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ReportUtils from '@libs/ReportUtils'; import CONST from '@src/CONST'; +import htmlRendererPropTypes from './htmlRendererPropTypes'; const propTypes = { /** Press in handler for the code block */ @@ -31,20 +31,14 @@ const defaultProps = { onPressOut: undefined, }; -const BasePreRenderer = forwardRef((props, ref) => { +function PreRenderer(props) { const styles = useThemeStyles(); const TDefaultRenderer = props.TDefaultRenderer; const defaultRendererProps = _.omit(props, ['TDefaultRenderer', 'onPressIn', 'onPressOut', 'onLongPress']); const isLast = props.renderIndex === props.renderLength - 1; return ( - + {({anchor, report, action, checkIfContextMenuActive}) => ( { role={CONST.ROLE.PRESENTATION} accessibilityLabel={props.translate('accessibilityHints.prestyledText')} > - - {/* eslint-disable-next-line react/jsx-props-no-spreading */} - - + {/* */} + {/* eslint-disable-next-line react/jsx-props-no-spreading */} + + {/* */} )} - + ); -}); +} -BasePreRenderer.displayName = 'BasePreRenderer'; -BasePreRenderer.propTypes = propTypes; -BasePreRenderer.defaultProps = defaultProps; +PreRenderer.displayName = 'PreRenderer'; +PreRenderer.propTypes = propTypes; +PreRenderer.defaultProps = defaultProps; -export default withLocalize(BasePreRenderer); +export default withLocalize(PreRenderer); diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js deleted file mode 100644 index 3beb52e6ee81..000000000000 --- a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js +++ /dev/null @@ -1,68 +0,0 @@ -import React, {useCallback, useEffect, useRef} from 'react'; -import _ from 'underscore'; -import htmlRendererPropTypes from '@components/HTMLEngineProvider/HTMLRenderers/htmlRendererPropTypes'; -import ControlSelection from '@libs/ControlSelection'; -import * as DeviceCapabilities from '@libs/DeviceCapabilities'; -import BasePreRenderer from './BasePreRenderer'; - -const supportsPassive = DeviceCapabilities.hasPassiveEventListenerSupport(); - -const isScrollingVertically = (event) => - // Mark as vertical scrolling only when absolute value of deltaY is more than the double of absolute - // value of deltaX, so user can use trackpad scroll on the code block horizontally at a wide angle. - Math.abs(event.deltaY) > Math.abs(event.deltaX) * 2; - -const debouncedIsScrollingVertically = _.debounce(isScrollingVertically, 100, true); - -function PreRenderer(props) { - const scrollViewRef = useRef(); - - /** - * Checks if user is scrolling vertically based on deltaX and deltaY. We debounce this - * method in order to make sure it's called only for the first event. - * @param {WheelEvent} event Wheel event - * @returns {Boolean} true if user is scrolling vertically - */ - - /** - * Manually scrolls the code block if code block horizontal scrollable, then prevents the event from being passed up to the parent. - * @param {Object} event native event - */ - const scrollNode = useCallback((event) => { - const node = scrollViewRef.current.getScrollableNode(); - const horizontalOverflow = node.scrollWidth > node.offsetWidth; - if (event.currentTarget === node && horizontalOverflow && !debouncedIsScrollingVertically(event)) { - node.scrollLeft += event.deltaX; - } - }, []); - - useEffect(() => { - const eventListenerRefValue = scrollViewRef.current; - if (!eventListenerRefValue) { - return; - } - eventListenerRefValue.getScrollableNode().addEventListener('wheel', scrollNode, supportsPassive ? {passive: true} : false); - - return () => { - if (!eventListenerRefValue.getScrollableNode()) { - return; - } - eventListenerRefValue.getScrollableNode().removeEventListener('wheel', scrollNode); - }; - }, [scrollNode]); - - return ( - DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()} - onPressOut={ControlSelection.unblock} - /> - ); -} - -PreRenderer.propTypes = htmlRendererPropTypes; -PreRenderer.displayName = 'PreRenderer'; - -export default PreRenderer; diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.native.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.native.js deleted file mode 100644 index b84dd43dd82f..000000000000 --- a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.native.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import htmlRendererPropTypes from '@components/HTMLEngineProvider/HTMLRenderers/htmlRendererPropTypes'; -import withLocalize from '@components/withLocalize'; -import BasePreRenderer from './BasePreRenderer'; - -function PreRenderer(props) { - // eslint-disable-next-line react/jsx-props-no-spreading - return ; -} - -PreRenderer.propTypes = htmlRendererPropTypes; -PreRenderer.displayName = 'PreRenderer'; - -export default withLocalize(PreRenderer); From cf21461af15346944e8bf6d70f5682083fb5cef8 Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Wed, 3 Jan 2024 13:46:14 +0530 Subject: [PATCH 2/2] minor fix. Signed-off-by: Krishna Gupta --- .../HTMLEngineProvider/HTMLRenderers/PreRenderer.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer.js index 948dec6757f7..27eff02d63ea 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer.js @@ -48,10 +48,10 @@ function PreRenderer(props) { role={CONST.ROLE.PRESENTATION} accessibilityLabel={props.translate('accessibilityHints.prestyledText')} > - {/* */} - {/* eslint-disable-next-line react/jsx-props-no-spreading */} - - {/* */} + + {/* eslint-disable-next-line react/jsx-props-no-spreading */} + + )}