From 51d50ef69f612bc6a4083bf590c19004477d147a Mon Sep 17 00:00:00 2001 From: Orkun Karakus Date: Wed, 27 Apr 2022 00:32:27 +0300 Subject: [PATCH 01/21] Long lines in code blocks should not wrap #7497 is fixed --- .../HTMLRenderers/PreRenderer.js | 27 +++++++++++++++++++ .../HTMLEngineProvider/HTMLRenderers/index.js | 2 ++ .../index.js | 7 ++--- 3 files changed, 33 insertions(+), 3 deletions(-) create mode 100644 src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer.js diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer.js new file mode 100644 index 000000000000..d1b9138fa045 --- /dev/null +++ b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer.js @@ -0,0 +1,27 @@ +import React from 'react'; +import {ScrollView} from 'react-native-gesture-handler'; +import {View} from 'react-native'; +import _ from 'underscore'; +import withLocalize from '../../withLocalize'; +import htmlRendererPropTypes from './htmlRendererPropTypes'; + +const PreRenderer = (props) => { + const TDefaultRenderer = props.TDefaultRenderer; + const defaultRendererProps = _.omit(props, ['TDefaultRenderer']); + + return ( + + true}> + + + + ); +}; + +PreRenderer.propTypes = htmlRendererPropTypes; +PreRenderer.displayName = 'PreRenderer'; + +export default withLocalize(PreRenderer); diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/index.js b/src/components/HTMLEngineProvider/HTMLRenderers/index.js index 8186dd57841b..4b9d0fc85962 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/index.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/index.js @@ -2,6 +2,7 @@ import AnchorRenderer from './AnchorRenderer'; import CodeRenderer from './CodeRenderer'; import EditedRenderer from './EditedRenderer'; import ImageRenderer from './ImageRenderer'; +import PreRenderer from './PreRenderer'; /** * This collection defines our custom renderers. It is a mapping from HTML tag type to the corresponding component. @@ -14,4 +15,5 @@ export default { // Custom tag renderers edited: EditedRenderer, + pre: PreRenderer, }; diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.js index b29216f34c45..213120f605ce 100644 --- a/src/components/PressableWithSecondaryInteraction/index.js +++ b/src/components/PressableWithSecondaryInteraction/index.js @@ -1,6 +1,6 @@ import _ from 'underscore'; import React, {Component} from 'react'; -import {Pressable} from 'react-native'; +import {Platform, Pressable} from 'react-native'; import {LongPressGestureHandler, State} from 'react-native-gesture-handler'; import SelectionScraper from '../../libs/SelectionScraper'; import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes'; @@ -31,7 +31,8 @@ class PressableWithSecondaryInteraction extends Component { * @param {Object} e */ callSecondaryInteractionWithMappedEvent(e) { - if (e.nativeEvent.state !== State.ACTIVE) { + const isHoverableDevice = ((Platform.OS === 'web') || (Platform.OS === 'windows') || (Platform.OS === 'macos')); + if ((e.nativeEvent.state !== State.ACTIVE) || isHoverableDevice) { return; } @@ -73,7 +74,7 @@ class PressableWithSecondaryInteraction extends Component { onPressOut={this.props.onPressOut} onPress={this.props.onPress} ref={el => this.pressableRef = el} - // eslint-disable-next-line react/jsx-props-no-spreading + // eslint-disable-next-line react/jsx-props-no-spreading {...defaultPressableProps} > {this.props.children} From df73cb6b5686c3f1e73ad7ab214818ce51ab4168 Mon Sep 17 00:00:00 2001 From: Orkun Karakus Date: Wed, 27 Apr 2022 23:13:23 +0300 Subject: [PATCH 02/21] isHoverable native function created --- .../PressableWithSecondaryInteraction/index.js | 6 +++--- src/libs/isHoverable/ index.native.js | 9 +++++++++ src/libs/isHoverable/index.js | 10 ++++++++++ 3 files changed, 22 insertions(+), 3 deletions(-) create mode 100644 src/libs/isHoverable/ index.native.js create mode 100644 src/libs/isHoverable/index.js diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.js index 213120f605ce..b7296a8cbd4c 100644 --- a/src/components/PressableWithSecondaryInteraction/index.js +++ b/src/components/PressableWithSecondaryInteraction/index.js @@ -1,10 +1,11 @@ import _ from 'underscore'; import React, {Component} from 'react'; -import {Platform, Pressable} from 'react-native'; +import {Pressable} from 'react-native'; import {LongPressGestureHandler, State} from 'react-native-gesture-handler'; import SelectionScraper from '../../libs/SelectionScraper'; import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes'; import styles from '../../styles/styles'; +import isHoverable from '../../libs/isHoverable'; /** * This is a special Pressable that calls onSecondaryInteraction when LongPressed, or right-clicked. @@ -31,8 +32,7 @@ class PressableWithSecondaryInteraction extends Component { * @param {Object} e */ callSecondaryInteractionWithMappedEvent(e) { - const isHoverableDevice = ((Platform.OS === 'web') || (Platform.OS === 'windows') || (Platform.OS === 'macos')); - if ((e.nativeEvent.state !== State.ACTIVE) || isHoverableDevice) { + if ((e.nativeEvent.state !== State.ACTIVE) || isHoverable()) { return; } diff --git a/src/libs/isHoverable/ index.native.js b/src/libs/isHoverable/ index.native.js new file mode 100644 index 000000000000..c67851acd033 --- /dev/null +++ b/src/libs/isHoverable/ index.native.js @@ -0,0 +1,9 @@ +/** + * Allows us to identify whether the platform is hoverable. + * + * @returns {Boolean} + */ + +const isHoverable = () => false; + +export default isHoverable; diff --git a/src/libs/isHoverable/index.js b/src/libs/isHoverable/index.js new file mode 100644 index 000000000000..32fa0b75f9f0 --- /dev/null +++ b/src/libs/isHoverable/index.js @@ -0,0 +1,10 @@ +/** + * Allows us to identify whether the platform is hoverable. + * + * @returns {Boolean} + */ + +const isHoverable = () => true; + +export default isHoverable; + From 06ea7d43b27815603d7cdfb29c9b0687fa57f85e Mon Sep 17 00:00:00 2001 From: Orkun Karakus Date: Wed, 27 Apr 2022 23:17:24 +0300 Subject: [PATCH 03/21] isHoverable native function name changed to hasHoverSupport --- src/components/PressableWithSecondaryInteraction/index.js | 4 ++-- src/libs/{isHoverable => hasHoverSupport}/ index.native.js | 4 ++-- src/libs/{isHoverable => hasHoverSupport}/index.js | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) rename src/libs/{isHoverable => hasHoverSupport}/ index.native.js (57%) rename src/libs/{isHoverable => hasHoverSupport}/index.js (58%) diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.js index b7296a8cbd4c..6dd1495f9380 100644 --- a/src/components/PressableWithSecondaryInteraction/index.js +++ b/src/components/PressableWithSecondaryInteraction/index.js @@ -5,7 +5,7 @@ import {LongPressGestureHandler, State} from 'react-native-gesture-handler'; import SelectionScraper from '../../libs/SelectionScraper'; import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes'; import styles from '../../styles/styles'; -import isHoverable from '../../libs/isHoverable'; +import hasHoverSupport from '../../libs/hasHoverSupport'; /** * This is a special Pressable that calls onSecondaryInteraction when LongPressed, or right-clicked. @@ -32,7 +32,7 @@ class PressableWithSecondaryInteraction extends Component { * @param {Object} e */ callSecondaryInteractionWithMappedEvent(e) { - if ((e.nativeEvent.state !== State.ACTIVE) || isHoverable()) { + if ((e.nativeEvent.state !== State.ACTIVE) || hasHoverSupport()) { return; } diff --git a/src/libs/isHoverable/ index.native.js b/src/libs/hasHoverSupport/ index.native.js similarity index 57% rename from src/libs/isHoverable/ index.native.js rename to src/libs/hasHoverSupport/ index.native.js index c67851acd033..d77fcc17448a 100644 --- a/src/libs/isHoverable/ index.native.js +++ b/src/libs/hasHoverSupport/ index.native.js @@ -4,6 +4,6 @@ * @returns {Boolean} */ -const isHoverable = () => false; +const hasHoverSupport = () => false; -export default isHoverable; +export default hasHoverSupport; diff --git a/src/libs/isHoverable/index.js b/src/libs/hasHoverSupport/index.js similarity index 58% rename from src/libs/isHoverable/index.js rename to src/libs/hasHoverSupport/index.js index 32fa0b75f9f0..a2499f18644f 100644 --- a/src/libs/isHoverable/index.js +++ b/src/libs/hasHoverSupport/index.js @@ -4,7 +4,7 @@ * @returns {Boolean} */ -const isHoverable = () => true; +const hasHoverSupport = () => true; -export default isHoverable; +export default hasHoverSupport; From feab630fb5fa69868d842b5f31c3079b17276dfe Mon Sep 17 00:00:00 2001 From: Orkun Karakus Date: Wed, 27 Apr 2022 23:55:39 +0300 Subject: [PATCH 04/21] mWeb long press context menu does not showed issue fixed --- src/libs/hasHoverSupport/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/libs/hasHoverSupport/index.js b/src/libs/hasHoverSupport/index.js index a2499f18644f..5053c2b496f9 100644 --- a/src/libs/hasHoverSupport/index.js +++ b/src/libs/hasHoverSupport/index.js @@ -4,7 +4,9 @@ * @returns {Boolean} */ -const hasHoverSupport = () => true; +import * as Browser from '../Browser'; + +const hasHoverSupport = () => !Browser.isMobile(); export default hasHoverSupport; From 9320a72b6ec7a63153c68f4745b2f96262748dea Mon Sep 17 00:00:00 2001 From: Orkun Karakus Date: Mon, 2 May 2022 19:24:38 +0300 Subject: [PATCH 05/21] for fixed the scroll bar cuts off the content while hover the scroll bar issue --- src/styles/styles.js | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index 730a98495aee..02291dcfe88f 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -101,7 +101,7 @@ const webViewStyles = { pre: { ...baseCodeTagStyles, paddingTop: 4, - paddingBottom: 5, + paddingBottom: 17, paddingRight: 8, paddingLeft: 8, fontFamily: fontFamily.MONOSPACE, @@ -690,9 +690,9 @@ const styles = { textInputLabelTransformation: (translateY, translateX, scale) => ({ transform: [ - {translateY}, - {translateX}, - {scale}, + { translateY }, + { translateX }, + { scale }, ], }), @@ -785,13 +785,13 @@ const styles = { appearance: 'none', cursor: disabled ? 'not-allowed' : 'pointer', ...picker, - ...(focused && {borderColor: themeColors.borderFocus}), - ...(error && {borderColor: themeColors.badgeDangerBG}), + ...(focused && { borderColor: themeColors.borderFocus }), + ...(error && { borderColor: themeColors.badgeDangerBG }), }, inputNative: { ...picker, - ...(focused && {borderColor: themeColors.borderFocus}), - ...(error && {borderColor: themeColors.badgeDangerBG}), + ...(focused && { borderColor: themeColors.borderFocus }), + ...(error && { borderColor: themeColors.badgeDangerBG }), }, }), @@ -1781,7 +1781,7 @@ const styles = { ...spacing.p1, ...spacing.mv1, ...spacing.mh1, - ...{borderRadius: variables.componentBorderRadiusSmall}, + ...{ borderRadius: variables.componentBorderRadiusSmall }, }, reportDetailsTitleContainer: { @@ -1914,7 +1914,7 @@ const styles = { }, flipUpsideDown: { - transform: [{rotate: '180deg'}], + transform: [{ rotate: '180deg' }], }, navigationSceneContainer: { @@ -2139,7 +2139,7 @@ const styles = { }, growlNotificationTranslateY: y => ({ - transform: [{translateY: y}], + transform: [{ translateY: y }], }), growlNotificationBox: { @@ -2389,7 +2389,7 @@ const styles = { reportMarkerBadgeTransformation: translateY => ({ transform: [ - {translateY}, + { translateY }, ], }), @@ -2422,7 +2422,7 @@ const styles = { }, googleListView: { - transform: [{scale: 0}], + transform: [{ scale: 0 }], }, keyboardShortcutModalContainer: { From 44a7e7d7bbba37228a532ed2646b4608e9566372 Mon Sep 17 00:00:00 2001 From: Orkun Karakus Date: Mon, 2 May 2022 19:25:53 +0300 Subject: [PATCH 06/21] for fixed the scroll bar cuts off the content while hover the scroll bar issue --- src/styles/styles.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index 02291dcfe88f..8441ebf3abcc 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -690,9 +690,9 @@ const styles = { textInputLabelTransformation: (translateY, translateX, scale) => ({ transform: [ - { translateY }, - { translateX }, - { scale }, + {translateY}, + {translateX}, + {scale}, ], }), @@ -785,13 +785,13 @@ const styles = { appearance: 'none', cursor: disabled ? 'not-allowed' : 'pointer', ...picker, - ...(focused && { borderColor: themeColors.borderFocus }), - ...(error && { borderColor: themeColors.badgeDangerBG }), + ...(focused && {borderColor: themeColors.borderFocus}), + ...(error && {borderColor: themeColors.badgeDangerBG}), }, inputNative: { ...picker, - ...(focused && { borderColor: themeColors.borderFocus }), - ...(error && { borderColor: themeColors.badgeDangerBG }), + ...(focused && {borderColor: themeColors.borderFocus}), + ...(error && {borderColor: themeColors.badgeDangerBG}), }, }), @@ -1781,7 +1781,7 @@ const styles = { ...spacing.p1, ...spacing.mv1, ...spacing.mh1, - ...{ borderRadius: variables.componentBorderRadiusSmall }, + ...{borderRadius: variables.componentBorderRadiusSmall}, }, reportDetailsTitleContainer: { @@ -1914,7 +1914,7 @@ const styles = { }, flipUpsideDown: { - transform: [{ rotate: '180deg' }], + transform: [{rotate: '180deg'}], }, navigationSceneContainer: { @@ -2139,7 +2139,7 @@ const styles = { }, growlNotificationTranslateY: y => ({ - transform: [{ translateY: y }], + transform: [{translateY: y}], }), growlNotificationBox: { @@ -2389,7 +2389,7 @@ const styles = { reportMarkerBadgeTransformation: translateY => ({ transform: [ - { translateY }, + {translateY}, ], }), @@ -2422,7 +2422,7 @@ const styles = { }, googleListView: { - transform: [{ scale: 0 }], + transform: [{scale: 0}], }, keyboardShortcutModalContainer: { From f3ab1547fd06f891e1ca2c452b8c812d8fdfcb88 Mon Sep 17 00:00:00 2001 From: Orkun Karakus Date: Mon, 2 May 2022 19:55:40 +0300 Subject: [PATCH 07/21] refactoring styles --- src/styles/styles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index 8441ebf3abcc..690ea2621005 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -100,7 +100,7 @@ const webViewStyles = { pre: { ...baseCodeTagStyles, - paddingTop: 4, + paddingTop: 16, paddingBottom: 17, paddingRight: 8, paddingLeft: 8, From f0b316373ae0cbb6bd435c12ec03a5b7116ea72f Mon Sep 17 00:00:00 2001 From: Orkun Karakus Date: Mon, 2 May 2022 20:01:24 +0300 Subject: [PATCH 08/21] refactoring styles --- src/styles/styles.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index 690ea2621005..31d77d880a98 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -100,8 +100,8 @@ const webViewStyles = { pre: { ...baseCodeTagStyles, - paddingTop: 16, - paddingBottom: 17, + paddingTop: 12, + paddingBottom: 13, paddingRight: 8, paddingLeft: 8, fontFamily: fontFamily.MONOSPACE, From 6ad7c2b615a0c8687d987542ab5a46389b769c28 Mon Sep 17 00:00:00 2001 From: Orkun Karakus Date: Mon, 2 May 2022 22:43:49 +0300 Subject: [PATCH 09/21] refactoring styles --- src/styles/styles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index 31d77d880a98..71e3ed176962 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -101,7 +101,7 @@ const webViewStyles = { pre: { ...baseCodeTagStyles, paddingTop: 12, - paddingBottom: 13, + paddingBottom: 12, paddingRight: 8, paddingLeft: 8, fontFamily: fontFamily.MONOSPACE, From b08e73165ba41a00bdb1791a0d6a7a9382c1d99d Mon Sep 17 00:00:00 2001 From: Orkun Karakus Date: Tue, 3 May 2022 01:46:38 +0300 Subject: [PATCH 10/21] empty space in file name fixed --- src/libs/hasHoverSupport/{ index.native.js => index.native.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/libs/hasHoverSupport/{ index.native.js => index.native.js} (100%) diff --git a/src/libs/hasHoverSupport/ index.native.js b/src/libs/hasHoverSupport/index.native.js similarity index 100% rename from src/libs/hasHoverSupport/ index.native.js rename to src/libs/hasHoverSupport/index.native.js From 0adeded7ee07ceb0a21f5f4abb60755abd9b6ecf Mon Sep 17 00:00:00 2001 From: Orkun Karakus Date: Tue, 3 May 2022 15:18:23 +0300 Subject: [PATCH 11/21] two_finger_scrolling from inverted mouse scroll bug fixed --- .../HTMLRenderers/PreRenderer/index.js | 47 +++++++++++++++++++ .../index.native.js} | 4 +- 2 files changed, 49 insertions(+), 2 deletions(-) create mode 100644 src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js rename src/components/HTMLEngineProvider/HTMLRenderers/{PreRenderer.js => PreRenderer/index.native.js} (87%) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js new file mode 100644 index 000000000000..1e71766a0ed7 --- /dev/null +++ b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js @@ -0,0 +1,47 @@ +import React, {useEffect, useRef} from 'react'; +import {ScrollView} from 'react-native-gesture-handler'; +import {View} from 'react-native'; +import _ from 'underscore'; +import withLocalize from '../../../withLocalize'; +import htmlRendererPropTypes from '../htmlRendererPropTypes'; + +const PreRenderer = (props) => { + const TDefaultRenderer = props.TDefaultRenderer; + const defaultRendererProps = _.omit(props, ['TDefaultRenderer']); + const ref = useRef(); + + const wheelEvent = (event) => { + const node = ref.current.getScrollableNode(); + const checkOverflow = (node.scrollHeight / node.scrollWidth) !== (node.offsetHeight / node.offsetWidth); + + if ((event.currentTarget === node) && checkOverflow) { + node.scrollLeft += event.deltaX; + event.preventDefault(); + event.stopPropagation(); + } + }; + + useEffect(() => { + if (ref.current) { + ref.current.getScrollableNode() + .addEventListener('wheel', wheelEvent); + } + return () => ref.current.getScrollableNode().removeEventListener('wheel', wheelEvent); + }, []); + + return ( + + true}> + + + + ); +}; + +PreRenderer.propTypes = htmlRendererPropTypes; +PreRenderer.displayName = 'PreRenderer'; + +export default withLocalize(PreRenderer); diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.native.js similarity index 87% rename from src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer.js rename to src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.native.js index d1b9138fa045..a415b3eda419 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.native.js @@ -2,8 +2,8 @@ import React from 'react'; import {ScrollView} from 'react-native-gesture-handler'; import {View} from 'react-native'; import _ from 'underscore'; -import withLocalize from '../../withLocalize'; -import htmlRendererPropTypes from './htmlRendererPropTypes'; +import withLocalize from '../../../withLocalize'; +import htmlRendererPropTypes from '../htmlRendererPropTypes'; const PreRenderer = (props) => { const TDefaultRenderer = props.TDefaultRenderer; From 3772dba4dcfc6a96f212a911d9455d75caddc1b9 Mon Sep 17 00:00:00 2001 From: Orkun Karakus Date: Tue, 3 May 2022 16:26:37 +0300 Subject: [PATCH 12/21] hooks converted to class components --- .../PreRenderer/BasePreRenderer.js | 29 +++++++++ .../HTMLRenderers/PreRenderer/index.js | 63 ++++++++++--------- .../HTMLRenderers/PreRenderer/index.native.js | 34 +++++----- 3 files changed, 79 insertions(+), 47 deletions(-) create mode 100644 src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js new file mode 100644 index 000000000000..3e7d48abafa4 --- /dev/null +++ b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js @@ -0,0 +1,29 @@ +import React, {forwardRef} from 'react'; +import {ScrollView} from 'react-native-gesture-handler'; +import {View} from 'react-native'; +import _ from 'underscore'; +import htmlRendererPropTypes from '../htmlRendererPropTypes'; + +class BasePreRenderer extends React.Component { + render() { + const TDefaultRenderer = this.props.TDefaultRenderer; + const defaultRendererProps = _.omit(this.props, ['TDefaultRenderer']); + return ( + + true}> + + + + ); + } +} + +BasePreRenderer.propTypes = htmlRendererPropTypes; + +export default forwardRef((props, ref) => ( + // eslint-disable-next-line react/jsx-props-no-spreading + +)); diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js index 1e71766a0ed7..d2f21cdff36d 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js @@ -1,17 +1,29 @@ -import React, {useEffect, useRef} from 'react'; -import {ScrollView} from 'react-native-gesture-handler'; -import {View} from 'react-native'; -import _ from 'underscore'; +import React from 'react'; import withLocalize from '../../../withLocalize'; import htmlRendererPropTypes from '../htmlRendererPropTypes'; +import BasePreRenderer from './BasePreRenderer'; -const PreRenderer = (props) => { - const TDefaultRenderer = props.TDefaultRenderer; - const defaultRendererProps = _.omit(props, ['TDefaultRenderer']); - const ref = useRef(); +class PreRenderer extends React.Component { + constructor(props) { + super(props); - const wheelEvent = (event) => { - const node = ref.current.getScrollableNode(); + this.wheelEvent = this.wheelEvent.bind(this); + this.ref = React.createRef(null); + } + + componentDidMount() { + this.ref.current + .getScrollableNode() + .addEventListener('wheel', this.wheelEvent); + } + + componentWillUnmount() { + this.ref.getScrollableNode() + .removeEventListener('wheel', this.wheelEvent); + } + + wheelEvent(event) { + const node = this.ref.current.getScrollableNode(); const checkOverflow = (node.scrollHeight / node.scrollWidth) !== (node.offsetHeight / node.offsetWidth); if ((event.currentTarget === node) && checkOverflow) { @@ -19,27 +31,18 @@ const PreRenderer = (props) => { event.preventDefault(); event.stopPropagation(); } - }; + } - useEffect(() => { - if (ref.current) { - ref.current.getScrollableNode() - .addEventListener('wheel', wheelEvent); - } - return () => ref.current.getScrollableNode().removeEventListener('wheel', wheelEvent); - }, []); - - return ( - - true}> - - - - ); -}; + render() { + return ( + + ); + } +} PreRenderer.propTypes = htmlRendererPropTypes; PreRenderer.displayName = 'PreRenderer'; diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.native.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.native.js index a415b3eda419..6cca093f1aec 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.native.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.native.js @@ -1,25 +1,25 @@ import React from 'react'; -import {ScrollView} from 'react-native-gesture-handler'; -import {View} from 'react-native'; -import _ from 'underscore'; import withLocalize from '../../../withLocalize'; import htmlRendererPropTypes from '../htmlRendererPropTypes'; +import BasePreRenderer from './BasePreRenderer'; -const PreRenderer = (props) => { - const TDefaultRenderer = props.TDefaultRenderer; - const defaultRendererProps = _.omit(props, ['TDefaultRenderer']); +class PreRenderer extends React.Component { + constructor(props) { + super(props); - return ( - - true}> - - - - ); -}; + this.ref = React.createRef(null); + } + + render() { + return ( + + ); + } +} PreRenderer.propTypes = htmlRendererPropTypes; PreRenderer.displayName = 'PreRenderer'; From e670bc073b1b7500b5da59eb7ebaa0c5ba0112e1 Mon Sep 17 00:00:00 2001 From: Orkun Karakus Date: Tue, 3 May 2022 16:53:06 +0300 Subject: [PATCH 13/21] class component converted to functinal component --- .../HTMLRenderers/PreRenderer/index.native.js | 23 +++++-------------- 1 file changed, 6 insertions(+), 17 deletions(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.native.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.native.js index 6cca093f1aec..b176a288608a 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.native.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.native.js @@ -3,23 +3,12 @@ import withLocalize from '../../../withLocalize'; import htmlRendererPropTypes from '../htmlRendererPropTypes'; import BasePreRenderer from './BasePreRenderer'; -class PreRenderer extends React.Component { - constructor(props) { - super(props); - - this.ref = React.createRef(null); - } - - render() { - return ( - - ); - } -} +const PreRenderer = props => ( + +); PreRenderer.propTypes = htmlRendererPropTypes; PreRenderer.displayName = 'PreRenderer'; From b52d0e07cba06596a541ae0835f47489e4fb3aa0 Mon Sep 17 00:00:00 2001 From: Orkun Karakus Date: Tue, 3 May 2022 17:37:20 +0300 Subject: [PATCH 14/21] style refactoring --- .../HTMLRenderers/PreRenderer/BasePreRenderer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js index 3e7d48abafa4..dc3b5b9659be 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js @@ -12,7 +12,7 @@ class BasePreRenderer extends React.Component { true}> From 883eb793e7d022c0a4e0108c1663d5ce974fd12a Mon Sep 17 00:00:00 2001 From: Orkun Karakus Date: Tue, 3 May 2022 17:37:36 +0300 Subject: [PATCH 15/21] style refactoring --- .../HTMLRenderers/PreRenderer/BasePreRenderer.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js index dc3b5b9659be..33e25192850f 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js @@ -8,6 +8,7 @@ class BasePreRenderer extends React.Component { render() { const TDefaultRenderer = this.props.TDefaultRenderer; const defaultRendererProps = _.omit(this.props, ['TDefaultRenderer']); + return ( true}> From 2d885fabfffc1df60006eb6036ae37124417ca06 Mon Sep 17 00:00:00 2001 From: Orkun Karakus Date: Tue, 3 May 2022 17:42:56 +0300 Subject: [PATCH 16/21] style refactoring --- .../HTMLRenderers/PreRenderer/BasePreRenderer.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js index 33e25192850f..8a2ec3e3da1a 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js @@ -8,10 +8,14 @@ class BasePreRenderer extends React.Component { render() { const TDefaultRenderer = this.props.TDefaultRenderer; const defaultRendererProps = _.omit(this.props, ['TDefaultRenderer']); - return ( - - true}> + + true} + > Date: Tue, 3 May 2022 17:54:29 +0300 Subject: [PATCH 17/21] ref callback --- .../HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js index d2f21cdff36d..77c4ed22c08c 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js @@ -12,6 +12,9 @@ class PreRenderer extends React.Component { } componentDidMount() { + if (!this.ref.current) { + return; + } this.ref.current .getScrollableNode() .addEventListener('wheel', this.wheelEvent); @@ -38,7 +41,7 @@ class PreRenderer extends React.Component { this.ref.current = el} /> ); } From 5c137650a5296848b32b154bbf9f1ec3d62375f0 Mon Sep 17 00:00:00 2001 From: Orkun Karakus Date: Wed, 4 May 2022 01:58:00 +0300 Subject: [PATCH 18/21] class component return back to functional component --- .../PreRenderer/BasePreRenderer.js | 45 +++++++++---------- .../HTMLRenderers/PreRenderer/index.js | 12 ++--- 2 files changed, 27 insertions(+), 30 deletions(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js index 8a2ec3e3da1a..81806670fbc7 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js @@ -3,32 +3,29 @@ import {ScrollView} from 'react-native-gesture-handler'; import {View} from 'react-native'; import _ from 'underscore'; import htmlRendererPropTypes from '../htmlRendererPropTypes'; +import withLocalize from '../../../withLocalize'; -class BasePreRenderer extends React.Component { - render() { - const TDefaultRenderer = this.props.TDefaultRenderer; - const defaultRendererProps = _.omit(this.props, ['TDefaultRenderer']); - return ( - { + const TDefaultRenderer = props.TDefaultRenderer; + const defaultRendererProps = _.omit(props, ['TDefaultRenderer']); + + return ( + + true} > - true} - > - - - - ); - } -} + + + + ); +}); BasePreRenderer.propTypes = htmlRendererPropTypes; -export default forwardRef((props, ref) => ( - // eslint-disable-next-line react/jsx-props-no-spreading - -)); +export default withLocalize(BasePreRenderer); diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js index 77c4ed22c08c..875c7847597d 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js @@ -7,7 +7,7 @@ class PreRenderer extends React.Component { constructor(props) { super(props); - this.wheelEvent = this.wheelEvent.bind(this); + this.scrollNode = this.scrollNode.bind(this); this.ref = React.createRef(null); } @@ -17,19 +17,19 @@ class PreRenderer extends React.Component { } this.ref.current .getScrollableNode() - .addEventListener('wheel', this.wheelEvent); + .addEventListener('wheel', this.scrollNode); } componentWillUnmount() { this.ref.getScrollableNode() - .removeEventListener('wheel', this.wheelEvent); + .removeEventListener('wheel', this.scrollNode); } - wheelEvent(event) { + scrollNode(event) { const node = this.ref.current.getScrollableNode(); - const checkOverflow = (node.scrollHeight / node.scrollWidth) !== (node.offsetHeight / node.offsetWidth); + const horizontalOverflow = node.scrollWidth > node.offsetWidth; - if ((event.currentTarget === node) && checkOverflow) { + if ((event.currentTarget === node) && horizontalOverflow) { node.scrollLeft += event.deltaX; event.preventDefault(); event.stopPropagation(); From 32de90290aafd89e7c215de288b7676c958374c9 Mon Sep 17 00:00:00 2001 From: Orkun Karakus Date: Wed, 4 May 2022 12:23:48 +0300 Subject: [PATCH 19/21] refactoring --- .../HTMLRenderers/PreRenderer/BasePreRenderer.js | 1 + .../HTMLRenderers/PreRenderer/index.js | 9 ++++----- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js index 81806670fbc7..279d44be0189 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js @@ -26,6 +26,7 @@ const BasePreRenderer = forwardRef((props, ref) => { ); }); +BasePreRenderer.displayName = 'BasePreRenderer'; BasePreRenderer.propTypes = htmlRendererPropTypes; export default withLocalize(BasePreRenderer); diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js index 875c7847597d..28cfcf73c7d2 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js @@ -8,14 +8,13 @@ class PreRenderer extends React.Component { super(props); this.scrollNode = this.scrollNode.bind(this); - this.ref = React.createRef(null); } componentDidMount() { - if (!this.ref.current) { + if (!this.ref) { return; } - this.ref.current + this.ref .getScrollableNode() .addEventListener('wheel', this.scrollNode); } @@ -26,7 +25,7 @@ class PreRenderer extends React.Component { } scrollNode(event) { - const node = this.ref.current.getScrollableNode(); + const node = this.ref.getScrollableNode(); const horizontalOverflow = node.scrollWidth > node.offsetWidth; if ((event.currentTarget === node) && horizontalOverflow) { @@ -41,7 +40,7 @@ class PreRenderer extends React.Component { this.ref.current = el} + ref={el => this.ref = el} /> ); } From afecb5d5b4410572f8285555853df2ab609575bb Mon Sep 17 00:00:00 2001 From: Orkun Karakus Date: Sat, 7 May 2022 12:41:20 +0300 Subject: [PATCH 20/21] style refactoring --- .../HTMLRenderers/PreRenderer/BasePreRenderer.js | 4 +--- .../HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js | 7 +++++-- .../HTMLRenderers/PreRenderer/index.native.js | 4 +--- 3 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js index 279d44be0189..6530ceab2519 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js @@ -14,9 +14,7 @@ const BasePreRenderer = forwardRef((props, ref) => { ref={ref} horizontal > - true} - > + true}> node.offsetWidth; diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.native.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.native.js index b176a288608a..0ae9457f1df0 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.native.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.native.js @@ -4,10 +4,8 @@ import htmlRendererPropTypes from '../htmlRendererPropTypes'; import BasePreRenderer from './BasePreRenderer'; const PreRenderer = props => ( - + ); PreRenderer.propTypes = htmlRendererPropTypes; From 9f2ce1aeb95884d68ea5250867f8910dbb65d8dc Mon Sep 17 00:00:00 2001 From: Orkun Karakus Date: Mon, 9 May 2022 21:04:46 +0300 Subject: [PATCH 21/21] refactor styles --- .../HTMLRenderers/PreRenderer/BasePreRenderer.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js index 6530ceab2519..5edafb4dc04d 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js @@ -15,10 +15,8 @@ const BasePreRenderer = forwardRef((props, ref) => { horizontal > true}> - + {/* eslint-disable-next-line react/jsx-props-no-spreading */} + );