Add new HOC for instrumenting generic components

CHANGELOG.md

@@ -8,6 +8,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 __BEGIN_UNRELEASED__
 ## [Unreleased]
 ### Added
+- Added `withHeapAutocapture` to support HOC instrumentation of components that
+  may have a custom prop
+- Added type declarations for HOC instrumentation for `Touchable` and `Pressable`
 ### Changed
 ### Deprecated
 ### Removed

index.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { JSXElementConstructor } from 'react';
+import { GestureResponderEvent } from 'react-native';
 
 import { HeapIgnore, HeapIgnoreTargetText } from './js/autotrack/heapIgnore';
 
@@ -118,6 +120,43 @@ export function resetIdentity(): void;
  */
 export function getUserId(): Promise<string>;
 
+/**
+ * Returns an HOC of a component that tracks specific specified actions as touches
+ *
+ * @param Component the component to autocapture for
+ */
+ export function withHeapAutocapture<
+ P,
+ C extends JSXElementConstructor<Partial<P>>
+>(Component: C, propName: keyof P): C;
+
+/**
+ * Returns an HOC of a component that tracks touches, i.e. calls to `onPress` or
+ * `onLongPress`
+ * 
+ * @param TouchableComponent the component to autocapture touches for
+ */
+ export function withHeapTouchableAutocapture<
+  P extends {
+    onPress?: (e: GestureResponderEvent) => void;
+    onLongPress?: (e: GestureResponderEvent) => void;
+  }
+>(TouchableComponent: React.ComponentType<P>): React.ComponentType<P>;
+export function getUserId(): Promise<string>;
+
+/**
+ * Returns an HOC of a component that tracks presses, i.e. calls to `onPress` or
+ * `onLongPress`
+ * 
+ * @param PressableComponent the component to autocapture presses for
+ */
+ export function withHeapPressableAutocapture<
+  P extends {
+    onPress?: (e: GestureResponderEvent) => void;
+    onLongPress?: (e: GestureResponderEvent) => void;
+  }
+>(PressableComponent: React.ComponentType<P>): React.ComponentType<P>;
+
 /**
  * Returns an HOC of a component with specific HeapIgnore properties.
  *

js/Heap.js

@@ -11,6 +11,7 @@ import {
   autotrackPress,
   withHeapTouchableAutocapture,
 } from './autotrack/touchables';
+import { withHeapAutocapture } from './autotrack/component';
 import { withHeapPressableAutocapture } from './autotrack/pressable';
 import { autotrackSwitchChange } from './autotrack/switches';
 import { autotrackScrollView } from './autotrack/scrollViews';
@@ -90,6 +91,7 @@ export default {
   autotrackPress: bailOnError(autotrackPress(autocaptureTrack)),
   withHeapTouchableAutocapture: withHeapTouchableAutocapture(autocaptureTrack),
   withHeapPressableAutocapture: withHeapPressableAutocapture(autocaptureTrack),
+  withHeapAutocapture: withHeapAutocapture(autocaptureTrack),
   autotrackSwitchChange: bailOnError(autotrackSwitchChange(autocaptureTrack)),
   autocaptureScrollView: bailOnError(autotrackScrollView(autocaptureTrack)),
   autocaptureTextInput: bailOnError(

js/autotrack/component.js

@@ -0,0 +1,57 @@
+import hoistNonReactStatic from 'hoist-non-react-statics';
+import * as React from 'react';
+import { bailOnError } from '../util/bailer';
+import { getComponentDisplayName } from '../util/hocUtil';
+import { getBaseComponentProps } from './common';
+
+export const withHeapAutocapture = track => (CapturableComponent, propName) => {
+  class HeapAutocapture extends React.Component {
+    trackEvent() {
+      const autotrackProps = getBaseComponentProps(this);
+
+      if (!autotrackProps) {
+        // We're not capturing this interaction.
+        return;
+      }
+
+      track('touch', autotrackProps);
+    }
+
+    render() {
+      const {
+        heapForwardedRef,
+        [propName]: defaultImplementation,
+        ...rest
+      } = this.props;
+
+      const instrumentedProps = {
+        [propName]: e => {
+          bailOnError(() => this.trackEvent())();
+          defaultImplementation && defaultImplementation(e);
+        },
+      };
+
+      return (
+        <CapturableComponent
+          ref={heapForwardedRef}
+          {...instrumentedProps}
+          {...rest}
+        >
+          {this.props.children}
+        </CapturableComponent>
+      );
+    }
+  }
+
+  HeapAutocapture.displayName = `withHeapAutocapture(${getComponentDisplayName(
+    CapturableComponent
+  )})`;
+
+  const forwardRefHoc = React.forwardRef((props, ref) => {
+    return <HeapAutocapture {...props} heapForwardedRef={ref} />;
+  });
+
+  hoistNonReactStatic(forwardRefHoc, CapturableComponent);
+
+  return forwardRefHoc;
+};