Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Long lines in code blocks should not wrap issue (#7497) is fixed #8790

Merged
merged 21 commits into from
May 9, 2022
Merged

Long lines in code blocks should not wrap issue (#7497) is fixed #8790

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
51d50ef
Long lines in code blocks should not wrap #7497 is fixed
orkunkarakus Apr 26, 2022
df73cb6
isHoverable native function created
orkunkarakus Apr 27, 2022
06ea7d4
isHoverable native function name changed to hasHoverSupport
orkunkarakus Apr 27, 2022
feab630
mWeb long press context menu does not showed issue fixed
orkunkarakus Apr 27, 2022
9320a72
for fixed the scroll bar cuts off the content while hover the scroll …
orkunkarakus May 2, 2022
44a7e7d
for fixed the scroll bar cuts off the content while hover the scroll …
orkunkarakus May 2, 2022
f3ab154
refactoring styles
orkunkarakus May 2, 2022
f0b3163
refactoring styles
orkunkarakus May 2, 2022
6ad7c2b
refactoring styles
orkunkarakus May 2, 2022
b08e731
empty space in file name fixed
orkunkarakus May 2, 2022
0adeded
two_finger_scrolling from inverted mouse scroll bug fixed
orkunkarakus May 3, 2022
3772dba
hooks converted to class components
orkunkarakus May 3, 2022
e670bc0
class component converted to functinal component
orkunkarakus May 3, 2022
b52d0e0
style refactoring
orkunkarakus May 3, 2022
883eb79
style refactoring
orkunkarakus May 3, 2022
2d885fa
style refactoring
orkunkarakus May 3, 2022
1ac6aef
ref callback
orkunkarakus May 3, 2022
5c13765
class component return back to functional component
orkunkarakus May 3, 2022
32de902
refactoring
orkunkarakus May 4, 2022
afecb5d
style refactoring
orkunkarakus May 7, 2022
9f2ce1a
refactor styles
orkunkarakus May 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<ScrollView horizontal>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not able to scroll via touchpad two-finger scrolling.

Copy link
Contributor Author

@orkunkarakus orkunkarakus May 2, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not able to scroll via touchpad two-finger scrolling.

@parasharrajat The reason for this issue is inverted scroll on InvertedFlatList component.

In InvertedFlatList this function is creating error. Because here making scroll manually and force to stop other scrolling operations with preventDefault()

  invertedWheelEvent(e) {
        this.list.getScrollableNode().scrollTop -= e.deltaY;
        e.preventDefault();
    }

I did some work on this issue but the only solution is remove the manual scroll operation from InvertedFlatList component.

Disabled the inverted scroll

Ekran.Kaydi.2022-05-03.01.53.53.mov

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would not call that the only solution. Please take some time and try to come up with some approaches and we can decide the best.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would not call that the only solution. Please take some time and try to come up with some approaches and we can decide the best.

@parasharrajat Okay, I'll spend more time, but it is absolutely necessary to remove preventDefault from that function.
Now i am working on how we can proceed for inverted scroll without preventDefault

Copy link
Contributor Author

@orkunkarakus orkunkarakus May 3, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@parasharrajat I did some research and realized that a similar issue has been encountered on the platform before.
Issue Link
When I look at the solution of this problem, if it is in the edit box, it override the parent wheel listener in the list. When I saw that this is an approved solution, I developed a solution similar to this and if our code block is have a scrollable length then i removing the parent listener when trying to scroll this code block.

Changes

Native and web codes are separated. Nothing has been changed in native, a listener has been added to the code block on the web side.

PR Ready.

Simulation Videos

native app

expensify-native.mp4

web

expensify-web.mp4

desktop

expensify-desktop.mov

<View onStartShouldSetResponder={() => true}>
<TDefaultRenderer
// eslint-disable-next-line react/jsx-props-no-spreading
{...defaultRendererProps}
/>
</View>
</ScrollView>
);
};

PreRenderer.propTypes = htmlRendererPropTypes;
PreRenderer.displayName = 'PreRenderer';

export default withLocalize(PreRenderer);
2 changes: 2 additions & 0 deletions src/components/HTMLEngineProvider/HTMLRenderers/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -14,4 +15,5 @@ export default {

// Custom tag renderers
edited: EditedRenderer,
pre: PreRenderer,
};
5 changes: 3 additions & 2 deletions src/components/PressableWithSecondaryInteraction/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +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 hasHoverSupport from '../../libs/hasHoverSupport';

/**
* This is a special Pressable that calls onSecondaryInteraction when LongPressed, or right-clicked.
Expand All @@ -31,7 +32,7 @@ class PressableWithSecondaryInteraction extends Component {
* @param {Object} e
*/
callSecondaryInteractionWithMappedEvent(e) {
if (e.nativeEvent.state !== State.ACTIVE) {
if ((e.nativeEvent.state !== State.ACTIVE) || hasHoverSupport()) {
return;
}

Expand Down Expand Up @@ -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}
Expand Down
9 changes: 9 additions & 0 deletions src/libs/hasHoverSupport/ index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
/**
* Allows us to identify whether the platform is hoverable.
*
* @returns {Boolean}
*/

const hasHoverSupport = () => false;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove space from the file name.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This issue fixed


export default hasHoverSupport;
12 changes: 12 additions & 0 deletions src/libs/hasHoverSupport/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
/**
* Allows us to identify whether the platform is hoverable.
*
* @returns {Boolean}
*/

import * as Browser from '../Browser';

const hasHoverSupport = () => !Browser.isMobile();

export default hasHoverSupport;