Skip to content

Commit efb4f02

Browse files
authored
Merge f220540 into e63ee11
2 parents e63ee11 + f220540 commit efb4f02

File tree

4 files changed

+180
-120
lines changed

4 files changed

+180
-120
lines changed

packages/core/src/js/feedback/FeedbackWidget.styles.ts

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,20 @@ const defaultStyles: FeedbackWidgetStyles = {
4545
backgroundColor: '#eee',
4646
padding: 15,
4747
borderRadius: 5,
48-
marginBottom: 20,
4948
alignItems: 'center',
49+
flex: 1,
50+
},
51+
screenshotContainer: {
52+
flexDirection: 'row',
53+
alignItems: 'center',
54+
width: '100%',
55+
marginBottom: 20,
56+
},
57+
screenshotThumbnail: {
58+
width: 50,
59+
height: 50,
60+
borderRadius: 5,
61+
marginRight: 10,
5062
},
5163
screenshotText: {
5264
color: '#333',

packages/core/src/js/feedback/FeedbackWidget.tsx

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
4040
description: '',
4141
filename: undefined,
4242
attachment: undefined,
43+
attachmentUri: undefined,
4344
};
4445

4546
public constructor(props: FeedbackWidgetProps) {
@@ -59,6 +60,7 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
5960
description: FeedbackWidget._savedState.description || '',
6061
filename: FeedbackWidget._savedState.filename || undefined,
6162
attachment: FeedbackWidget._savedState.attachment || undefined,
63+
attachmentUri: FeedbackWidget._savedState.attachmentUri || undefined,
6264
};
6365
}
6466

@@ -143,24 +145,25 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
143145
const imageUri = result.assets[0].uri;
144146
NATIVE.getDataFromUri(imageUri).then((data) => {
145147
if (data != null) {
146-
this.setState({ filename, attachment: data });
148+
this.setState({ filename, attachment: data, attachmentUri: imageUri });
147149
} else {
148150
logger.error('Failed to read image data from uri:', imageUri);
149151
}
150152
})
151-
.catch((error) => {
152-
logger.error('Failed to read image data from uri:', imageUri, 'error: ', error);
153-
});
153+
.catch((error) => {
154+
logger.error('Failed to read image data from uri:', imageUri, 'error: ', error);
155+
});
154156
}
155157
} else {
156158
// Defaulting to the onAddScreenshot callback
157159
const { onAddScreenshot } = { ...defaultConfiguration, ...this.props };
158160
onAddScreenshot((filename: string, attachement: Uint8Array) => {
159-
this.setState({ filename, attachment: attachement });
161+
// TODO: Add support for image uri when using onAddScreenshot
162+
this.setState({ filename, attachment: attachement, attachmentUri: undefined });
160163
});
161164
}
162165
} else {
163-
this.setState({ filename: undefined, attachment: undefined });
166+
this.setState({ filename: undefined, attachment: undefined, attachmentUri: undefined });
164167
}
165168
}
166169

@@ -261,13 +264,21 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
261264
multiline
262265
/>
263266
{(config.enableScreenshot || imagePickerConfiguration.imagePicker) && (
264-
<TouchableOpacity style={styles.screenshotButton} onPress={this.onScreenshotButtonPress}>
265-
<Text style={styles.screenshotText}>
266-
{!this.state.filename && !this.state.attachment
267-
? text.addScreenshotButtonLabel
268-
: text.removeScreenshotButtonLabel}
269-
</Text>
270-
</TouchableOpacity>
267+
<View style={styles.screenshotContainer}>
268+
{this.state.attachmentUri && (
269+
<Image
270+
source={{ uri: this.state.attachmentUri }}
271+
style={styles.screenshotThumbnail}
272+
/>
273+
)}
274+
<TouchableOpacity style={styles.screenshotButton} onPress={this.onScreenshotButtonPress}>
275+
<Text style={styles.screenshotText}>
276+
{!this.state.filename && !this.state.attachment
277+
? text.addScreenshotButtonLabel
278+
: text.removeScreenshotButtonLabel}
279+
</Text>
280+
</TouchableOpacity>
281+
</View>
271282
)}
272283
<TouchableOpacity style={styles.submitButton} onPress={this.handleFeedbackSubmit}>
273284
<Text style={styles.submitText}>{text.submitButtonLabel}</Text>
@@ -295,6 +306,7 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
295306
description: '',
296307
filename: undefined,
297308
attachment: undefined,
309+
attachmentUri: undefined,
298310
};
299311
};
300312
}

packages/core/src/js/feedback/FeedbackWidget.types.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -237,6 +237,8 @@ export interface FeedbackWidgetStyles {
237237
cancelButton?: ViewStyle;
238238
cancelText?: TextStyle;
239239
screenshotButton?: ViewStyle;
240+
screenshotContainer?: ViewStyle;
241+
screenshotThumbnail?: ImageStyle;
240242
screenshotText?: TextStyle;
241243
titleContainer?: ViewStyle;
242244
sentryLogo?: ImageStyle;
@@ -252,4 +254,5 @@ export interface FeedbackWidgetState {
252254
description: string;
253255
filename?: string;
254256
attachment?: string | Uint8Array;
257+
attachmentUri?: string;
255258
}

0 commit comments

Comments
 (0)