Adds attachment button UI

getsentry · Dec 3, 2024 · 4e13866 · 4e13866
1 parent 14ac005
commit 4e13866
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 1 deletion.
diff --git a/packages/core/src/js/feedback/FeedbackFormScreen.styles.ts b/packages/core/src/js/feedback/FeedbackFormScreen.styles.ts
@@ -25,6 +25,17 @@ const defaultStyles = StyleSheet.create({
     height: 100,
     textAlignVertical: 'top',
   },
+  attachmentButton: {
+    backgroundColor: '#eee',
+    padding: 15,
+    borderRadius: 5,
+    marginBottom: 20,
+    alignItems: 'center',
+  },
+  attachmentText: {
+    color: '#333',
+    fontSize: 16,
+  },
   submitButton: {
     backgroundColor: '#6a1b9a',
     paddingVertical: 15,

diff --git a/packages/core/src/js/feedback/FeedbackFormScreen.tsx b/packages/core/src/js/feedback/FeedbackFormScreen.tsx
@@ -50,6 +50,10 @@ export class FeedbackFormScreen extends React.Component<FeedbackFormScreenProps,
     closeScreen();
   };
 
+  public addAttachment: () => void = () => {
+    Alert.alert('Info', 'Attachments are not supported yet.'); // TODO: Implement attachment support
+  };
+
   /**
    * Renders the feedback form screen.
    */
@@ -84,6 +88,10 @@ export class FeedbackFormScreen extends React.Component<FeedbackFormScreenProps,
         multiline
       />
 
+      <TouchableOpacity style={styles?.attachmentButton || defaultStyles.attachmentButton} onPress={this.addAttachment}>
+        <Text style={styles?.attachmentText || defaultStyles.attachmentText}>{text?.attachmentButton || 'Add Screenshot'}</Text>
+      </TouchableOpacity>
+
       <TouchableOpacity style={styles?.submitButton || defaultStyles.submitButton} onPress={this.handleFeedbackSubmit}>
         <Text style={styles?.submitText || defaultStyles.submitText}>{text?.submitButton || 'Send Feedback'}</Text>
       </TouchableOpacity>

diff --git a/packages/core/src/js/feedback/FeedbackFormScreen.types.ts b/packages/core/src/js/feedback/FeedbackFormScreen.types.ts
@@ -11,6 +11,7 @@ export interface FeedbackFormText {
   namePlaceholder?: string;
   emailPlaceholder?: string;
   descriptionPlaceholder?: string;
+  attachmentButton?: string;
   submitButton?: string;
   cancelButton?: string;
   errorTitle?: string;
@@ -23,6 +24,8 @@ export interface FeedbackFormScreenStyles {
   title?: TextStyle;
   input?: TextStyle;
   textArea?: ViewStyle;
+  attachmentButton?: ViewStyle;
+  attachmentText?: TextStyle;
   submitButton?: ViewStyle;
   submitText?: TextStyle;
   cancelButton?: ViewStyle;

diff --git a/packages/core/test/feedback/FeedbackFormScreen.test.tsx b/packages/core/test/feedback/FeedbackFormScreen.test.tsx
@@ -21,6 +21,7 @@ const defaultProps: FeedbackFormScreenProps = {
     namePlaceholder: 'Name',
     emailPlaceholder: 'Email',
     descriptionPlaceholder: 'Description',
+    attachmentButton: 'Add Attachment',
     submitButton: 'Submit',
     cancelButton: 'Cancel',
     errorTitle: 'Error',
@@ -41,6 +42,7 @@ describe('FeedbackFormScreen', () => {
     expect(getByPlaceholderText(defaultProps.text.namePlaceholder)).toBeTruthy();
     expect(getByPlaceholderText(defaultProps.text.emailPlaceholder)).toBeTruthy();
     expect(getByPlaceholderText(defaultProps.text.descriptionPlaceholder)).toBeTruthy();
+    expect(getByText(defaultProps.text.attachmentButton)).toBeTruthy();
     expect(getByText(defaultProps.text.submitButton)).toBeTruthy();
     expect(getByText(defaultProps.text.cancelButton)).toBeTruthy();
   });

diff --git a/samples/react-native/src/App.tsx b/samples/react-native/src/App.tsx
@@ -169,7 +169,7 @@ const ErrorsTabNavigator = Sentry.withProfiler(
                       marginBottom: 10,
                     },
                   }}
-                  text={{namePlaceholder: 'Fullname'}}
+                  text={{namePlaceholder: 'Fullname', attachmentButton: 'Add Attachment'}}
                 />
               )}
             </Stack.Screen>