Add new HOC for instrumenting components manually

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';
 
 /**
  * `setAppId` Initializes Heap tracking and sets the app ID where you'll be sending data. It can be used to switch
@@ -122,6 +124,42 @@ export function getUserId(): Promise<string>;
  */
 export function getSessionId(): Promise<string|null>;
 
+/**
+ * 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, eventType?: 'touch' | 'change'): 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>;
+
+/**
+ * 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 navigation container that autotracks pageviews on navigation change.
  * 

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';
@@ -91,6 +92,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,61 @@
+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,
+  eventType = 'touch'
+) => {
+  class HeapAutocapture extends React.Component {
+    trackEvent() {
+      const autotrackProps = getBaseComponentProps(this);
+
+      if (!autotrackProps) {
+        // We're not capturing this interaction.
+        return;
+      }
+
+      track(eventType, 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;
+};