From 814548292bcb03c36737f5d1075f4ddc60dae459 Mon Sep 17 00:00:00 2001 From: vishtree Date: Tue, 15 Sep 2020 13:48:48 +0200 Subject: [PATCH 1/3] Fixing issues with FileUploadPreview 1. Visibility of retry button was quite poor, because of white color on white background. This reload icon has been changes to contrast on white background 2. Cancel button was unaccessible because of overlapping reload icon container. --- .../MessageInput/FileUploadPreview.js | 17 ++--- .../MessageInput/UploadProgressIndicator.js | 72 +++++++++++------- src/images/reload1.png | Bin 3338 -> 4398 bytes src/styles/theme.js | 2 +- types/index.d.ts | 1 + 5 files changed, 54 insertions(+), 38 deletions(-) diff --git a/src/components/MessageInput/FileUploadPreview.js b/src/components/MessageInput/FileUploadPreview.js index 1707923e34..e2872b199e 100644 --- a/src/components/MessageInput/FileUploadPreview.js +++ b/src/components/MessageInput/FileUploadPreview.js @@ -39,10 +39,6 @@ const Container = styled.View` ${({ theme }) => theme.messageInput.fileUploadPreview.container.css}; `; -const DismissText = styled.Text` - ${({ theme }) => theme.messageInput.fileUploadPreview.dismissText.css}; -`; - const FilenameText = styled.Text` padding-left: 10px; ${({ theme }) => theme.messageInput.fileUploadPreview.filenameText.css}; @@ -73,8 +69,13 @@ const FileUploadPreview = ({ return ( (retryUpload ? retryUpload(item.id) : null)} + action={() => { + retryUpload ? retryUpload(item.id) : null; + }} active={item.state !== FileState.UPLOADED} + cancel={() => { + removeFile ? removeFile(item.id) : null; + }} type={type} > @@ -86,12 +87,6 @@ const FileUploadPreview = ({ : item.file.name} - removeFile(item.id)} - testID='remove-file-upload-preview' - > - X - ); diff --git a/src/components/MessageInput/UploadProgressIndicator.js b/src/components/MessageInput/UploadProgressIndicator.js index 0891a4a0f3..69e13255dc 100644 --- a/src/components/MessageInput/UploadProgressIndicator.js +++ b/src/components/MessageInput/UploadProgressIndicator.js @@ -1,5 +1,5 @@ import React from 'react'; -import { ActivityIndicator, Image, TouchableOpacity, View } from 'react-native'; +import { ActivityIndicator, Image, View } from 'react-native'; import styled from '@stream-io/styled-components'; import PropTypes from 'prop-types'; @@ -28,51 +28,71 @@ const Overlay = styled.View` ${({ theme }) => theme.messageInput.uploadProgressIndicator.overlay.css}; `; -const UploadProgressIndicator = ({ action, active, children, type }) => +const ActivityIndicatorContainer = styled.View` + align-items: center; + bottom: 0; + justify-content: center; + left: 0; + position: absolute; + right: 0; + top: 0; +`; + +const DismissText = styled.Text` + align-self: flex-end; + margin-right: 10px; + ${({ theme }) => theme.messageInput.uploadProgressIndicator.dismiss.css}; +`; + +const RetryButtonContainer = styled.TouchableOpacity` + align-items: center; + bottom: 0; + justify-content: center; + left: 0; + position: absolute; + right: 0; + top: 0; +`; + +const UploadProgressIndicator = ({ action, active, cancel, children, type }) => !active ? ( {children} ) : ( - + {children} {type === ProgressIndicatorTypes.IN_PROGRESS && ( - + - + )} {type === ProgressIndicatorTypes.RETRY && ( - + + + )} + + X + - + ); UploadProgressIndicator.propTypes = { /** Action triggered when clicked indicator */ action: PropTypes.func, - /** Boolean status of upload progress */ active: PropTypes.bool, + /** Action triggered when clicked cancel button */ + cancel: PropTypes.func, + /** Boolean status of upload progress */ /** Type of active indicator */ type: PropTypes.oneOf([ ProgressIndicatorTypes.IN_PROGRESS, diff --git a/src/images/reload1.png b/src/images/reload1.png index a42a28ec1e0420aebcd45dadefb09950a6fb1af9..fad57208c3f104e01e344825c29830ad335bbeb2 100644 GIT binary patch literal 4398 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 Z==XJ-YChkca#Z$X&aC<7!!s=<{{?Nl#A5&e diff --git a/src/styles/theme.js b/src/styles/theme.js index 446e5b4422..745ba44a93 100644 --- a/src/styles/theme.js +++ b/src/styles/theme.js @@ -202,7 +202,6 @@ export const defaultTheme = { attachmentContainerView: {}, attachmentView: {}, container: {}, - dismissText: {}, filenameText: {}, }, imageUploadPreview: { @@ -239,6 +238,7 @@ export const defaultTheme = { }, uploadProgressIndicator: { container: {}, + dismiss: {}, overlay: {}, }, }, diff --git a/types/index.d.ts b/types/index.d.ts index 84ca80d3b0..692a01640e 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -1141,6 +1141,7 @@ export interface UploadProgressIndicatorProps extends StyledComponentProps { active: boolean; type: 'in_progress' | 'retry'; action?(event: GestureResponderEvent): void; + cancel?(event: GestureResponderEvent): void; } export interface AttachmentActionsProps extends StyledComponentProps { From e5e5d3f6c1f678ad821241110089a2d2172881eb Mon Sep 17 00:00:00 2001 From: Vir Desai Date: Tue, 15 Sep 2020 12:44:40 -0400 Subject: [PATCH 2/3] updating tests, adding types, adding custom override for FileUploadPreview and ImageUploadPreview components --- .../MessageInput/FileUploadPreview.js | 73 +- .../MessageInput/ImageUploadPreview.js | 12 +- src/components/MessageInput/MessageInput.js | 22 +- .../MessageInput/UploadProgressIndicator.js | 17 +- .../__tests__/FileUploadPreview.test.js | 9 +- .../__tests__/ImageUploadPreview.test.js | 9 +- .../__tests__/UploadProgressIndicator.test.js | 12 +- .../FileUploadPreview.test.js.snap | 960 ++++++++++++------ .../ImageUploadPreview.test.js.snap | 388 ++++--- .../UploadProgressIndicator.test.js.snap | 97 +- src/styles/theme.js | 3 + types/index.d.ts | 42 +- 12 files changed, 1017 insertions(+), 627 deletions(-) diff --git a/src/components/MessageInput/FileUploadPreview.js b/src/components/MessageInput/FileUploadPreview.js index e2872b199e..1c3a52120b 100644 --- a/src/components/MessageInput/FileUploadPreview.js +++ b/src/components/MessageInput/FileUploadPreview.js @@ -7,6 +7,7 @@ import UploadProgressIndicator from './UploadProgressIndicator'; import FileIcon from '../Attachment/FileIcon'; +import closeRound from '../../images/icons/close-round.png'; import { themed } from '../../styles/theme'; import { FileState, ProgressIndicatorTypes } from '../../utils/utils'; @@ -39,6 +40,25 @@ const Container = styled.View` ${({ theme }) => theme.messageInput.fileUploadPreview.container.css}; `; +const Dismiss = styled.TouchableOpacity` + align-items: center; + background-color: #fff; + border-radius: 20px; + height: 20px; + justify-content: center; + position: absolute; + right: 5; + top: 5; + width: 20px; + ${({ theme }) => theme.messageInput.fileUploadPreview.dismiss.css}; +`; + +const DismissImage = styled.Image` + height: 10px; + width: 10px; + ${({ theme }) => theme.messageInput.fileUploadPreview.dismissImage.css}; +`; + const FilenameText = styled.Text` padding-left: 10px; ${({ theme }) => theme.messageInput.fileUploadPreview.filenameText.css}; @@ -68,27 +88,38 @@ const FileUploadPreview = ({ } return ( - { - retryUpload ? retryUpload(item.id) : null; - }} - active={item.state !== FileState.UPLOADED} - cancel={() => { - removeFile ? removeFile(item.id) : null; - }} - type={type} - > - - - - - {item.file.name.length > 35 - ? item.file.name.substring(0, 35).concat('...') - : item.file.name} - - - - + <> + { + if (retryUpload) { + retryUpload(item.id); + } + }} + active={item.state !== FileState.UPLOADED} + type={type} + > + + + + + {item.file.name.length > 35 + ? item.file.name.substring(0, 35).concat('...') + : item.file.name} + + + + + { + if (removeFile) { + removeFile(item.id); + } + }} + testID='remove-file-upload-preview' + > + + + ); }; diff --git a/src/components/MessageInput/ImageUploadPreview.js b/src/components/MessageInput/ImageUploadPreview.js index 9e0e8b429b..72ae223165 100644 --- a/src/components/MessageInput/ImageUploadPreview.js +++ b/src/components/MessageInput/ImageUploadPreview.js @@ -69,7 +69,11 @@ const ImageUploadPreview = ({ imageUploads, removeImage, retryUpload }) => { return ( (retryUpload ? retryUpload(item.id) : null)} + action={() => { + if (retryUpload) { + retryUpload(item.id); + } + }} active={item.state !== FileState.UPLOADED} type={type} > @@ -79,7 +83,11 @@ const ImageUploadPreview = ({ imageUploads, removeImage, retryUpload }) => { /> removeImage(item.id)} + onPress={() => { + if (removeImage) { + removeImage(item.id); + } + }} testID='remove-image-upload-preview' > diff --git a/src/components/MessageInput/MessageInput.js b/src/components/MessageInput/MessageInput.js index f903151aeb..f709d4e20e 100644 --- a/src/components/MessageInput/MessageInput.js +++ b/src/components/MessageInput/MessageInput.js @@ -8,8 +8,8 @@ import { logChatPromiseExecution } from 'stream-chat'; import ActionSheetAttachmentDefault from './ActionSheetAttachment'; import AttachButtonDefault from './AttachButton'; -import FileUploadPreview from './FileUploadPreview'; -import ImageUploadPreview from './ImageUploadPreview'; +import FileUploadPreviewDefault from './FileUploadPreview'; +import ImageUploadPreviewDefault from './ImageUploadPreview'; import SendButtonDefault from './SendButton'; import { useMessageDetailsForState } from './hooks/useMessageDetailsForState'; @@ -123,8 +123,10 @@ const MessageInput = (props) => { compressImageQuality, doDocUploadRequest, doImageUploadRequest, + FileUploadPreview = FileUploadPreviewDefault, hasFilePicker = true, hasImagePicker = true, + ImageUploadPreview = ImageUploadPreviewDefault, initialValue, Input, maxNumberOfFiles, @@ -870,10 +872,26 @@ MessageInput.propTypes = { * @param channel Current channel object * */ doImageUploadRequest: PropTypes.func, + /** + * Custom UI component for FileUploadPreview. + * Defaults to and accepts same props as: https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageInput/FileUploadPreview.js + */ + FileUploadPreview: PropTypes.oneOfType([ + PropTypes.node, + PropTypes.elementType, + ]), /** If component should have file picker functionality */ hasFilePicker: PropTypes.bool, /** If component should have image picker functionality */ hasImagePicker: PropTypes.bool, + /** + * Custom UI component for ImageUploadPreview. + * Defaults to and accepts same props as: https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageInput/ImageUploadPreview.js + */ + ImageUploadPreview: PropTypes.oneOfType([ + PropTypes.node, + PropTypes.elementType, + ]), /** Initial value to set on input */ initialValue: PropTypes.string, /** Limit on allowed number of files to attach at a time. */ diff --git a/src/components/MessageInput/UploadProgressIndicator.js b/src/components/MessageInput/UploadProgressIndicator.js index 69e13255dc..1998911e22 100644 --- a/src/components/MessageInput/UploadProgressIndicator.js +++ b/src/components/MessageInput/UploadProgressIndicator.js @@ -38,12 +38,6 @@ const ActivityIndicatorContainer = styled.View` top: 0; `; -const DismissText = styled.Text` - align-self: flex-end; - margin-right: 10px; - ${({ theme }) => theme.messageInput.uploadProgressIndicator.dismiss.css}; -`; - const RetryButtonContainer = styled.TouchableOpacity` align-items: center; bottom: 0; @@ -54,7 +48,7 @@ const RetryButtonContainer = styled.TouchableOpacity` top: 0; `; -const UploadProgressIndicator = ({ action, active, cancel, children, type }) => +const UploadProgressIndicator = ({ action, active, children, type }) => !active ? ( {children} ) : ( @@ -63,7 +57,7 @@ const UploadProgressIndicator = ({ action, active, cancel, children, type }) => {type === ProgressIndicatorTypes.IN_PROGRESS && ( - + /> )} - - X - ); @@ -89,10 +80,8 @@ const UploadProgressIndicator = ({ action, active, cancel, children, type }) => UploadProgressIndicator.propTypes = { /** Action triggered when clicked indicator */ action: PropTypes.func, - active: PropTypes.bool, - /** Action triggered when clicked cancel button */ - cancel: PropTypes.func, /** Boolean status of upload progress */ + active: PropTypes.bool, /** Type of active indicator */ type: PropTypes.oneOf([ ProgressIndicatorTypes.IN_PROGRESS, diff --git a/src/components/MessageInput/__tests__/FileUploadPreview.test.js b/src/components/MessageInput/__tests__/FileUploadPreview.test.js index 1ea8d37acf..0449d007e5 100644 --- a/src/components/MessageInput/__tests__/FileUploadPreview.test.js +++ b/src/components/MessageInput/__tests__/FileUploadPreview.test.js @@ -49,13 +49,6 @@ describe('FileUploadPreview', () => { expect(retryUpload).toHaveBeenCalledTimes(0); }); - fireEvent.press(getAllByTestId('active-upload-progress-indicator')[0]); - - await waitFor(() => { - expect(removeFile).toHaveBeenCalledTimes(1); - expect(retryUpload).toHaveBeenCalledTimes(1); - }); - rerender( ({ @@ -170,7 +163,7 @@ describe('FileUploadPreview', () => { expect(retryUpload).toHaveBeenCalledTimes(0); }); - fireEvent.press(getAllByTestId('active-upload-progress-indicator')[0]); + fireEvent.press(getAllByTestId('retry-upload-progress-indicator')[0]); await waitFor(() => { expect(removeFile).toHaveBeenCalledTimes(1); diff --git a/src/components/MessageInput/__tests__/ImageUploadPreview.test.js b/src/components/MessageInput/__tests__/ImageUploadPreview.test.js index 4b9a4df9e7..024b68089a 100644 --- a/src/components/MessageInput/__tests__/ImageUploadPreview.test.js +++ b/src/components/MessageInput/__tests__/ImageUploadPreview.test.js @@ -49,13 +49,6 @@ describe('ImageUploadPreview', () => { expect(retryUpload).toHaveBeenCalledTimes(0); }); - fireEvent.press(getAllByTestId('active-upload-progress-indicator')[0]); - - await waitFor(() => { - expect(removeImage).toHaveBeenCalledTimes(1); - expect(retryUpload).toHaveBeenCalledTimes(1); - }); - rerender( ({ @@ -170,7 +163,7 @@ describe('ImageUploadPreview', () => { expect(retryUpload).toHaveBeenCalledTimes(0); }); - fireEvent.press(getAllByTestId('active-upload-progress-indicator')[0]); + fireEvent.press(getAllByTestId('retry-upload-progress-indicator')[0]); await waitFor(() => { expect(removeImage).toHaveBeenCalledTimes(1); diff --git a/src/components/MessageInput/__tests__/UploadProgressIndicator.test.js b/src/components/MessageInput/__tests__/UploadProgressIndicator.test.js index f2e9249ca7..7dbb7c5583 100644 --- a/src/components/MessageInput/__tests__/UploadProgressIndicator.test.js +++ b/src/components/MessageInput/__tests__/UploadProgressIndicator.test.js @@ -55,7 +55,7 @@ describe('UploadProgressIndicator', () => { it('should render an active IN_PROGRESS UploadProgressIndicator', async () => { const action = jest.fn(); - const { getByTestId, queryByTestId, toJSON } = render( + const { queryByTestId, toJSON } = render( { await waitFor(() => { expect(queryByTestId('active-upload-progress-indicator')).toBeTruthy(); expect(queryByTestId('inactive-upload-progress-indicator')).toBeFalsy(); + expect(queryByTestId('upload-progress-indicator')).toBeTruthy(); + expect(queryByTestId('retry-upload-progress-indicator')).toBeFalsy(); expect(action).toHaveBeenCalledTimes(0); }); - fireEvent.press(getByTestId('active-upload-progress-indicator')); - - await waitFor(() => expect(action).toHaveBeenCalledTimes(1)); - const snapshot = toJSON(); await waitFor(() => { @@ -94,10 +92,12 @@ describe('UploadProgressIndicator', () => { await waitFor(() => { expect(queryByTestId('active-upload-progress-indicator')).toBeTruthy(); expect(queryByTestId('inactive-upload-progress-indicator')).toBeFalsy(); + expect(queryByTestId('upload-progress-indicator')).toBeFalsy(); + expect(queryByTestId('retry-upload-progress-indicator')).toBeTruthy(); expect(action).toHaveBeenCalledTimes(0); }); - fireEvent.press(getByTestId('active-upload-progress-indicator')); + fireEvent.press(getByTestId('retry-upload-progress-indicator')); await waitFor(() => expect(action).toHaveBeenCalledTimes(1)); diff --git a/src/components/MessageInput/__tests__/__snapshots__/FileUploadPreview.test.js.snap b/src/components/MessageInput/__tests__/__snapshots__/FileUploadPreview.test.js.snap index b75ce12bd0..31106d1fc5 100644 --- a/src/components/MessageInput/__tests__/__snapshots__/FileUploadPreview.test.js.snap +++ b/src/components/MessageInput/__tests__/__snapshots__/FileUploadPreview.test.js.snap @@ -78,21 +78,6 @@ exports[`FileUploadPreview should render FileUploadPreview with 1 uploading, 1 u style={null} > - - X - + + + - - X - - - + + + + + - - X - - + > + + + + + @@ -515,21 +608,6 @@ exports[`FileUploadPreview should render FileUploadPreview with all failed files style={null} > - - X - - + > + + - - + + + + + - - X - - + > + + - - + + + + + - - X - + + + + + + + - - + /> @@ -1063,19 +1282,51 @@ exports[`FileUploadPreview should render FileUploadPreview with all uploaded fil dummy.pdf - - X - + + + - - X - + + + - - X - + + + @@ -1316,21 +1631,6 @@ exports[`FileUploadPreview should render FileUploadPreview with all uploading fi style={null} > - - X - - - + + + + + - - X - - - + + + + + - - X - + + + diff --git a/src/components/MessageInput/__tests__/__snapshots__/ImageUploadPreview.test.js.snap b/src/components/MessageInput/__tests__/__snapshots__/ImageUploadPreview.test.js.snap index f535e7db87..f5570ed4b4 100644 --- a/src/components/MessageInput/__tests__/__snapshots__/ImageUploadPreview.test.js.snap +++ b/src/components/MessageInput/__tests__/__snapshots__/ImageUploadPreview.test.js.snap @@ -93,21 +93,6 @@ exports[`ImageUploadPreview should render ImageUploadPreview with 1 uploading, 1 } > - + > + + - + > + + - + > + + - + > + + - + > + + `; diff --git a/src/styles/theme.js b/src/styles/theme.js index 745ba44a93..d8f70cee79 100644 --- a/src/styles/theme.js +++ b/src/styles/theme.js @@ -202,7 +202,10 @@ export const defaultTheme = { attachmentContainerView: {}, attachmentView: {}, container: {}, + dismiss: {}, + dismissImage: {}, filenameText: {}, + itemContainer: {}, }, imageUploadPreview: { container: {}, diff --git a/types/index.d.ts b/types/index.d.ts index 692a01640e..af5b729f91 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -264,33 +264,32 @@ export interface MessageInputProps SuggestionsContextValue, TranslationContextValue, StyledComponentProps { - /** Callback that is called when the text input's text changes. Changed text is passed as a single string argument to the callback handler. */ - onChangeText?(newText: string): void; - /** Initial value to set on input */ + ActionSheetAttachment?: React.ElementType; + /** https://github.com/beefe/react-native-actionsheet/blob/master/lib/styles.js */ + actionSheetStyles?: object; + additionalTextInputProps?: object; + AttachButton?: React.ElementType; + AttachmentFileIcon?: React.ElementType; + compressImageQuality?: number; + /** Override file upload request */ + doFileUploadRequest?(file: File): Promise; + /** Override image upload request */ + doImageUploadRequest?(file: File): Promise; + FileUploadPreview?: React.ElementType; + hasFilePicker?: boolean; + hasImagePicker?: boolean; + ImageUploadPreview?: React.ElementType; initialValue?: string; /** The parent message object when replying on a thread */ - parent?: Client.Message | null; - /** The component handling how the input is rendered */ Input?: React.ElementType; - - /** Override image upload request */ - doImageUploadRequest?(file: File): Promise; - - /** Override file upload request */ - doFileUploadRequest?(file: File): Promise; maxNumberOfFiles?: number; - hasImagePicker?: boolean; - hasFilePicker?: boolean; - focus?: boolean; - sendImageAsync?: boolean; - /** https://github.com/beefe/react-native-actionsheet/blob/master/lib/styles.js */ - actionSheetStyles?: object; - AttachmentFileIcon?: React.ElementType; - AttachButton?: React.ElementType; - ActionSheetAttachment?: React.ElementType; + /** Callback that is called when the text input's text changes. Changed text is passed as a single string argument to the callback handler. */ + onChangeText?(newText: string): void; + /** Initial value to set on input */ + parent?: Client.Message | null; SendButton: React.ElementType; - additionalTextInputProps?: object; + sendImageAsync?: boolean; } export interface DocumentPickerFile { @@ -1141,7 +1140,6 @@ export interface UploadProgressIndicatorProps extends StyledComponentProps { active: boolean; type: 'in_progress' | 'retry'; action?(event: GestureResponderEvent): void; - cancel?(event: GestureResponderEvent): void; } export interface AttachmentActionsProps extends StyledComponentProps { From e9212cd6de97a7b5bf92e9ff9824ffa28a32dde8 Mon Sep 17 00:00:00 2001 From: Vir Desai Date: Tue, 15 Sep 2020 12:46:50 -0400 Subject: [PATCH 3/3] removing unused theme --- src/styles/theme.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/styles/theme.js b/src/styles/theme.js index d8f70cee79..f1319f4149 100644 --- a/src/styles/theme.js +++ b/src/styles/theme.js @@ -241,7 +241,6 @@ export const defaultTheme = { }, uploadProgressIndicator: { container: {}, - dismiss: {}, overlay: {}, }, },