Merge branch 'antonis/feedback-save-state' into antonis/feedback-show-screenshot

# Conflicts:
#	packages/core/src/js/feedback/FeedbackWidget.tsx

Author: antonis

CHANGELOG.md

@@ -10,14 +10,14 @@
 
 ### Features
 
-- User Feedback Form Component Beta ([#4435](https://github.com/getsentry/sentry-react-native/pull/4435))
+- User Feedback Widget Beta ([#4435](https://github.com/getsentry/sentry-react-native/pull/4435))
 
-  To collect user feedback from inside your application call `Sentry.showFeedbackForm()` or add the `FeedbackForm` component.
+  To collect user feedback from inside your application call `Sentry.showFeedbackWidget()` or add the `FeedbackWidget` component.
 
   ```jsx
-  import { FeedbackForm } from "@sentry/react-native";
+  import { FeedbackWidget } from "@sentry/react-native";
   ...
-  <FeedbackForm/>
+  <FeedbackWidget/>
   ```
 
 ### Fixes

packages/core/src/js/feedback/FeedbackForm.styles.ts renamed to packages/core/src/js/feedback/FeedbackWidget.styles.ts

@@ -1,13 +1,13 @@
 import type { ViewStyle } from 'react-native';
 
-import type { FeedbackFormStyles } from './FeedbackForm.types';
+import type { FeedbackWidgetStyles } from './FeedbackWidget.types';
 
 const PURPLE = 'rgba(88, 74, 192, 1)';
 const FORGROUND_COLOR = '#2b2233';
 const BACKROUND_COLOR = '#ffffff';
 const BORDER_COLOR = 'rgba(41, 35, 47, 0.13)';
 
-const defaultStyles: FeedbackFormStyles = {
+const defaultStyles: FeedbackWidgetStyles = {
   container: {
     flex: 1,
     padding: 20,

packages/core/src/js/feedback/FeedbackForm.tsx renamed to packages/core/src/js/feedback/FeedbackWidget.tsx

@@ -17,24 +17,24 @@ import {
   View
 } from 'react-native';
 
-import { NATIVE } from './../wrapper';
+import { NATIVE } from '../wrapper';
 import { sentryLogo } from './branding';
 import { defaultConfiguration } from './defaults';
-import defaultStyles from './FeedbackForm.styles';
-import type { FeedbackFormProps, FeedbackFormState, FeedbackFormStyles, FeedbackGeneralConfiguration, FeedbackTextConfiguration, ImagePickerConfiguration } from './FeedbackForm.types';
+import defaultStyles from './FeedbackWidget.styles';
+import type { FeedbackGeneralConfiguration, FeedbackTextConfiguration, FeedbackWidgetProps, FeedbackWidgetState, FeedbackWidgetStyles, ImagePickerConfiguration } from './FeedbackWidget.types';
 import { isValidEmail } from './utils';
 
 /**
  * @beta
  * Implements a feedback form screen that sends feedback to Sentry using Sentry.captureFeedback.
  */
-export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFormState> {
-  public static defaultProps: Partial<FeedbackFormProps> = {
+export class FeedbackWidget extends React.Component<FeedbackWidgetProps, FeedbackWidgetState> {
+  public static defaultProps: Partial<FeedbackWidgetProps> = {
     ...defaultConfiguration
   }
 
-  private static _savedState: FeedbackFormState = {
-    isVisible: false,
+  private static _didSubmitForm: boolean = false;
+  private static _savedState: Omit<FeedbackWidgetState, 'isVisible'> = {
     name: '',
     email: '',
     description: '',
@@ -43,7 +43,7 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
     attachmentUri: undefined,
   };
 
-  public constructor(props: FeedbackFormProps) {
+  public constructor(props: FeedbackWidgetProps) {
     super(props);
 
     const currentUser = {
@@ -55,12 +55,12 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
 
     this.state = {
       isVisible: true,
-      name: FeedbackForm._savedState.name || currentUser.useSentryUser.name,
-      email: FeedbackForm._savedState.email || currentUser.useSentryUser.email,
-      description: FeedbackForm._savedState.description || '',
-      filename: FeedbackForm._savedState.filename || undefined,
-      attachment: FeedbackForm._savedState.attachment || undefined,
-      attachmentUri: FeedbackForm._savedState.attachmentUri || undefined,
+      name: FeedbackWidget._savedState.name || currentUser.useSentryUser.name,
+      email: FeedbackWidget._savedState.email || currentUser.useSentryUser.email,
+      description: FeedbackWidget._savedState.description || '',
+      filename: FeedbackWidget._savedState.filename || undefined,
+      attachment: FeedbackWidget._savedState.attachment || undefined,
+      attachmentUri: FeedbackWidget._savedState.attachmentUri || undefined,
     };
   }
 
@@ -103,10 +103,10 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
     try {
       this.setState({ isVisible: false });
       captureFeedback(userFeedback, attachments ? { attachments } : undefined);
-      onSubmitSuccess({ name: trimmedName, email: trimmedEmail, message: trimmedDescription, attachments: undefined });
+      onSubmitSuccess({ name: trimmedName, email: trimmedEmail, message: trimmedDescription, attachments: attachments });
       Alert.alert(text.successMessageText);
       onFormSubmitted();
-      this._clearFormState();
+      FeedbackWidget._didSubmitForm = true;
     } catch (error) {
       const errorString = `Feedback form submission failed: ${error}`;
       onSubmitError(new Error(errorString));
@@ -143,25 +143,37 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
           const imageUri = result.assets[0].uri;
           NATIVE.getDataFromUri(imageUri).then((data) => {
             if (data != null) {
-              this.setState({ filename, attachment: data, attachmentUri: imageUri }, this._saveFormState);
+              this.setState({ filename, attachment: data, attachmentUri: imageUri });
             } else {
               logger.error('Failed to read image data from uri:', imageUri);
             }
           })
-          .catch((error) => {
-            logger.error('Failed to read image data from uri:', imageUri, 'error: ', error);
-          });
+            .catch((error) => {
+              logger.error('Failed to read image data from uri:', imageUri, 'error: ', error);
+            });
         }
       } else {
         // Defaulting to the onAddScreenshot callback
         const { onAddScreenshot } = { ...defaultConfiguration, ...this.props };
         onAddScreenshot((filename: string, attachement: Uint8Array) => {
           // TODO: Add support for image uri when using onAddScreenshot
-          this.setState({ filename, attachment: attachement, attachmentUri: undefined }, this._saveFormState);
+          this.setState({ filename, attachment: attachement, attachmentUri: undefined });
         });
       }
     } else {
-      this.setState({ filename: undefined, attachment: undefined, attachmentUri: undefined }, this._saveFormState);
+      this.setState({ filename: undefined, attachment: undefined, attachmentUri: undefined });
+    }
+  }
+
+  /**
+   * Save the state before unmounting the component.
+   */
+  public componentWillUnmount(): void {
+    if (FeedbackWidget._didSubmitForm) {
+      this._clearFormState();
+      FeedbackWidget._didSubmitForm = false;
+    } else {
+      this._saveFormState();
     }
   }
 
@@ -174,7 +186,7 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
     const config: FeedbackGeneralConfiguration = this.props;
     const imagePickerConfiguration: ImagePickerConfiguration = this.props;
     const text: FeedbackTextConfiguration = this.props;
-    const styles: FeedbackFormStyles = { ...defaultStyles, ...this.props.styles };
+    const styles: FeedbackWidgetStyles = { ...defaultStyles, ...this.props.styles };
     const onCancel = (): void => {
       onFormClose();
       this.setState({ isVisible: false });
@@ -214,7 +226,7 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
                   style={styles.input}
                   placeholder={text.namePlaceholder}
                   value={name}
-                  onChangeText={(value) => this.setState({ name: value }, this._saveFormState)}
+                  onChangeText={(value) => this.setState({ name: value })}
                 />
               </>
               )}
@@ -230,7 +242,7 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
                   placeholder={text.emailPlaceholder}
                   keyboardType={'email-address' as KeyboardTypeOptions}
                   value={email}
-                  onChangeText={(value) => this.setState({ email: value }, this._saveFormState)}
+                  onChangeText={(value) => this.setState({ email: value })}
                 />
               </>
               )}
@@ -243,7 +255,7 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
                 style={[styles.input, styles.textArea]}
                 placeholder={text.messagePlaceholder}
                 value={description}
-                onChangeText={(value) => this.setState({ description: value }, this._saveFormState)}
+                onChangeText={(value) => this.setState({ description: value })}
                 multiline
               />
               {(config.enableScreenshot || imagePickerConfiguration.imagePicker) && (
@@ -279,12 +291,11 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
   }
 
   private _saveFormState = (): void => {
-    FeedbackForm._savedState = { ...this.state };
+    FeedbackWidget._savedState = { ...this.state };
   };
 
   private _clearFormState = (): void => {
-    FeedbackForm._savedState = {
-      isVisible: false,
+    FeedbackWidget._savedState = {
       name: '',
       email: '',
       description: '',

packages/core/src/js/feedback/FeedbackForm.types.ts renamed to packages/core/src/js/feedback/FeedbackWidget.types.ts

@@ -4,12 +4,12 @@ import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
 /**
  * The props for the feedback form
  */
-export interface FeedbackFormProps
+export interface FeedbackWidgetProps
   extends FeedbackGeneralConfiguration,
     FeedbackTextConfiguration,
     FeedbackCallbacks,
     ImagePickerConfiguration {
-  styles?: FeedbackFormStyles;
+  styles?: FeedbackWidgetStyles;
 }
 
 /**
@@ -226,7 +226,7 @@ export interface ImagePicker {
 /**
  * The styles for the feedback form
  */
-export interface FeedbackFormStyles {
+export interface FeedbackWidgetStyles {
   container?: ViewStyle;
   title?: TextStyle;
   label?: TextStyle;
@@ -247,7 +247,7 @@ export interface FeedbackFormStyles {
 /**
  * The state of the feedback form
  */
-export interface FeedbackFormState {
+export interface FeedbackWidgetState {
   isVisible: boolean;
   name: string;
   email: string;

packages/core/src/js/feedback/FeedbackFormManager.tsx renamed to packages/core/src/js/feedback/FeedbackWidgetManager.tsx

@@ -1,14 +1,17 @@
 import { logger } from '@sentry/core';
 import * as React from 'react';
-import { Animated, KeyboardAvoidingView, Modal, Platform, View } from 'react-native';
+import { Animated, KeyboardAvoidingView, Modal, PanResponder, Platform } from 'react-native';
 
-import { FeedbackForm } from './FeedbackForm';
-import { modalBackground, modalSheetContainer, modalWrapper } from './FeedbackForm.styles';
-import type { FeedbackFormStyles } from './FeedbackForm.types';
+import { FeedbackWidget } from './FeedbackWidget';
+import { modalBackground, modalSheetContainer, modalWrapper } from './FeedbackWidget.styles';
+import type { FeedbackWidgetStyles } from './FeedbackWidget.types';
 import { getFeedbackOptions } from './integration';
 import { isModalSupported } from './utils';
 
-class FeedbackFormManager {
+const PULL_DOWN_CLOSE_THREESHOLD = 200;
+const PULL_DOWN_ANDROID_ACTIVATION_HEIGHT = 150;
+
+class FeedbackWidgetManager {
   private static _isVisible = false;
   private static _setVisibility: (visible: boolean) => void;
 
@@ -35,31 +38,64 @@ class FeedbackFormManager {
   }
 }
 
-interface FeedbackFormProviderProps {
+interface FeedbackWidgetProviderProps {
   children: React.ReactNode;
-  styles?: FeedbackFormStyles;
+  styles?: FeedbackWidgetStyles;
 }
 
-interface FeedbackFormProviderState {
+interface FeedbackWidgetProviderState {
   isVisible: boolean;
   backgroundOpacity: Animated.Value;
+  panY: Animated.Value;
 }
 
-class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
-  public state: FeedbackFormProviderState = {
+class FeedbackWidgetProvider extends React.Component<FeedbackWidgetProviderProps> {
+  public state: FeedbackWidgetProviderState = {
     isVisible: false,
     backgroundOpacity: new Animated.Value(0),
+    panY: new Animated.Value(0),
   };
 
-  public constructor(props: FeedbackFormProviderProps) {
+  private _panResponder = PanResponder.create({
+    onStartShouldSetPanResponder: (evt, _gestureState) => {
+      // On Android allow pulling down only from the top to avoid breaking native gestures
+      return Platform.OS !== 'android' || evt.nativeEvent.pageY < PULL_DOWN_ANDROID_ACTIVATION_HEIGHT;
+    },
+    onMoveShouldSetPanResponder: (evt, _gestureState) => {
+      return Platform.OS !== 'android' || evt.nativeEvent.pageY < PULL_DOWN_ANDROID_ACTIVATION_HEIGHT;
+    },
+    onPanResponderMove: (_, gestureState) => {
+      if (gestureState.dy > 0) {
+        this.state.panY.setValue(gestureState.dy);
+      }
+    },
+    onPanResponderRelease: (_, gestureState) => {
+      if (gestureState.dy > PULL_DOWN_CLOSE_THREESHOLD) { // Close on swipe below a certain threshold
+        Animated.timing(this.state.panY, {
+          toValue: 600,
+          duration: 200,
+          useNativeDriver: true,
+        }).start(() => {
+          this._handleClose();
+        });
+      } else { // Animate it back to the original position
+        Animated.spring(this.state.panY, {
+          toValue: 0,
+          useNativeDriver: true,
+        }).start();
+      }
+    },
+  });
+
+  public constructor(props: FeedbackWidgetProviderProps) {
     super(props);
-    FeedbackFormManager.initialize(this._setVisibilityFunction);
+    FeedbackWidgetManager.initialize(this._setVisibilityFunction);
   }
 
   /**
    * Animates the background opacity when the modal is shown.
    */
-  public componentDidUpdate(_prevProps: any, prevState: FeedbackFormProviderState): void {
+  public componentDidUpdate(_prevProps: any, prevState: FeedbackWidgetProviderState): void {
     if (!prevState.isVisible && this.state.isVisible) {
       Animated.timing(this.state.backgroundOpacity, {
         toValue: 1,
@@ -76,7 +112,7 @@ class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
    */
   public render(): React.ReactNode {
     if (!isModalSupported()) {
-      logger.error('FeedbackForm Modal is not supported in React Native < 0.71 with Fabric renderer.');
+      logger.error('FeedbackWidget Modal is not supported in React Native < 0.71 with Fabric renderer.');
       return <>{this.props.children}</>;
     }
 
@@ -99,12 +135,15 @@ class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
                 behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
                 style={modalBackground}
               >
-                <View style={modalSheetContainer}>
-                  <FeedbackForm {...getFeedbackOptions()}
+                <Animated.View
+                  style={[modalSheetContainer, { transform: [{ translateY: this.state.panY }] }]}
+                  {...this._panResponder.panHandlers}
+                >
+                  <FeedbackWidget {...getFeedbackOptions()}
                     onFormClose={this._handleClose}
                     onFormSubmitted={this._handleClose}
                     />
-                </View>
+                </Animated.View>
               </KeyboardAvoidingView>
             </Modal>
           </Animated.View>
@@ -115,16 +154,19 @@ class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
 
   private _setVisibilityFunction = (visible: boolean): void => {
     this.setState({ isVisible: visible });
+    if (visible) {
+      this.state.panY.setValue(0);
+    }
   };
 
   private _handleClose = (): void => {
-    FeedbackFormManager.hide();
+    FeedbackWidgetManager.hide();
     this.setState({ isVisible: false });
   };
 }
 
-const showFeedbackForm = (): void => {
-  FeedbackFormManager.show();
+const showFeedbackWidget = (): void => {
+  FeedbackWidgetManager.show();
 };
 
-export { showFeedbackForm, FeedbackFormProvider };
+export { showFeedbackWidget, FeedbackWidgetProvider };