Chore: migrate index.js class to function component

src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js

@@ -1,70 +1,71 @@
-import React from 'react';
+import React, {useCallback, useEffect, useRef} from 'react';
 import _ from 'underscore';
-import withLocalize from '../../../withLocalize';
+
+import ControlSelection from '../../../../libs/ControlSelection';
+import * as DeviceCapabilities from '../../../../libs/DeviceCapabilities';
 import htmlRendererPropTypes from '../htmlRendererPropTypes';
 import BasePreRenderer from './BasePreRenderer';
-import * as DeviceCapabilities from '../../../../libs/DeviceCapabilities';
-import ControlSelection from '../../../../libs/ControlSelection';
-
-class PreRenderer extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.scrollNode = this.scrollNode.bind(this);
-        this.debouncedIsScrollingVertically = _.debounce(this.isScrollingVertically.bind(this), 100, true);
-    }
 
-    componentDidMount() {
-        if (!this.ref) {
-            return;
-        }
-        this.ref.getScrollableNode().addEventListener('wheel', this.scrollNode);
-    }
-
-    componentWillUnmount() {
-        this.ref.getScrollableNode().removeEventListener('wheel', this.scrollNode);
-    }
+function PreRenderer(props) {
+    const scrollViewRef = useRef();
 
     /**
-     * Check if user is scrolling vertically based on deltaX and deltaY. We debounce this
-     * method in the constructor to make sure it's called only for the first event.
+     * 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
      */
-    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.
-        return Math.abs(event.deltaY) > Math.abs(event.deltaX) * 2;
-    }
+    const isScrollingVertically = useCallback(
+        (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 = useCallback((event) => _.debounce(isScrollingVertically(event), 100, true), [isScrollingVertically]);
 
     /**
      * 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
      */
-    scrollNode(event) {
-        const node = this.ref.getScrollableNode();
-        const horizontalOverflow = node.scrollWidth > node.offsetWidth;
-        const isScrollingVertically = this.debouncedIsScrollingVertically(event);
-        if (event.currentTarget === node && horizontalOverflow && !isScrollingVertically) {
-            node.scrollLeft += event.deltaX;
-            event.preventDefault();
-            event.stopPropagation();
+    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;
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        },
+        [debouncedIsScrollingVertically],
+    );
+
+    useEffect(() => {
+        if (!scrollViewRef.current) {
+            return;
         }
-    }
+        scrollViewRef.current.getScrollableNode().addEventListener('wheel', scrollNode);
+        const eventListenerRefValue = scrollViewRef.current;
+
+        return () => {
+            eventListenerRefValue.getScrollableNode().removeEventListener('wheel', scrollNode);
+        };
+    }, [scrollNode]);
 
-    render() {
-        return (
-            <BasePreRenderer
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...this.props}
-                ref={(el) => (this.ref = el)}
-                onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
-                onPressOut={() => ControlSelection.unblock()}
-            />
-        );
-    }
+    return (
+        <BasePreRenderer
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            ref={scrollViewRef}
+            onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
+            onPressOut={ControlSelection.unblock}
+        />
+    );
 }
 
 PreRenderer.propTypes = htmlRendererPropTypes;
+PreRenderer.displayName = 'PreRenderer';
 
-export default withLocalize(PreRenderer);
+export default PreRenderer;