wuba / react-native-echarts

📈 React Native ECharts Library: An awesome charting library for React Native, built upon Apache ECharts and leveraging react-native-svg and react-native-skia. Offers significantly better performance compared to WebView-based solutions.
https://wuba.github.io/react-native-echarts/
Apache License 2.0
682 stars 24 forks source link

How to cancel Tooltip TouchEvent when chart in scrollview #144

Open NguyenHoangMinhkkkk opened 5 months ago

NguyenHoangMinhkkkk commented 5 months ago

When i put <TouchableOpacity /> inside <Scrollview />, the press event can be cancelled when the gesture scroll-out. But with the <Chart /> inside <Scrollview />, tooltip {trigger: "item"} event in <Chart /> will trigger immediately and show tooltip on press-in, cannot be cancelled

how to cancel tooltip triggered when user gesture scroll out the chart view ?

https://github.com/wuba/react-native-echarts/assets/30792140/aeddc8c9-bcf7-41d8-9281-ae9701894a2a

zhiqingchen commented 5 months ago

@SilentMelody Can the Click trigger logic be optimized?

NguyenHoangMinhkkkk commented 5 months ago

@SilentMelody Can the Click trigger logic be optimized?

Thanks for reply, i'm temporary using Scrollview onMomentumScrollBegin, onMomentumScrollEnd and a boolean Ref to prevent triggered event while scrollview is scrolling.

zhiqingchen commented 5 months ago

The click can be triggered at the end of the gesture, depending on the position (e.g. if it moves more than x pixels).

https://github.com/wuba/react-native-echarts/blob/main/src/components/PanResponderHandler.tsx#L97

https://github.com/wuba/react-native-echarts/blob/main/src/components/RNGestureHandler.tsx#L64

NguyenHoangMinhkkkk commented 1 month ago

hi there. in this example, should i use of react-native-gesture-handler instead of default of RN? or someother way for optimize that behavior ?

NguyenHoangMinhkkkk commented 1 month ago

src/components/PanResponderHandler.tsx#L97src/components/PanResponderHandler.tsx#L97

patch-package -> add a boolean value "isAvoidPressOnScroll" and everything working good.

onPanResponderGrant: ({ nativeEvent }) => {
    if (isAvoidPressOnScroll) dispatchEvents(['mousedown'], nativeEvent);
    else dispatchEvents(['mousedown', 'mousemove'], nativeEvent);
},