From 67611d0c227e81ab6b260db3ac8cf950bade24bd Mon Sep 17 00:00:00 2001 From: Sudheer Date: Wed, 14 Nov 2018 16:53:35 +0530 Subject: [PATCH] MM-12923 Fix Downloading message on cancelling downloads (#2337) --- .../downloader_bottom_content.test.js.snap | 93 +++++++++++++++++++ app/screens/image_preview/downloader.ios.js | 65 +++---------- .../downloader_bottom_content.js | 75 +++++++++++++++ .../downloader_bottom_content.test.js | 58 ++++++++++++ 4 files changed, 237 insertions(+), 54 deletions(-) create mode 100644 app/screens/image_preview/__snapshots__/downloader_bottom_content.test.js.snap create mode 100644 app/screens/image_preview/downloader_bottom_content.js create mode 100644 app/screens/image_preview/downloader_bottom_content.test.js diff --git a/app/screens/image_preview/__snapshots__/downloader_bottom_content.test.js.snap b/app/screens/image_preview/__snapshots__/downloader_bottom_content.test.js.snap new file mode 100644 index 000000000..9506eb359 --- /dev/null +++ b/app/screens/image_preview/__snapshots__/downloader_bottom_content.test.js.snap @@ -0,0 +1,93 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DownloaderBottomContent should match snapshot for downloaded file 1`] = ` + + + +`; + +exports[`DownloaderBottomContent should match snapshot for downloaded file and is not video 1`] = ` + + + +`; + +exports[`DownloaderBottomContent should match snapshot for downloaded file and isVideo 1`] = ` + + + +`; + +exports[`DownloaderBottomContent should match snapshot for downloading 1`] = ` + + + +`; diff --git a/app/screens/image_preview/downloader.ios.js b/app/screens/image_preview/downloader.ios.js index 0121cc75f..ee28e62c4 100644 --- a/app/screens/image_preview/downloader.ios.js +++ b/app/screens/image_preview/downloader.ios.js @@ -18,6 +18,8 @@ import {emptyFunction} from 'app/utils/general'; import LocalConfig from 'assets/config'; +import DownloaderBottomContent from './downloader_bottom_content.js'; + const {View: AnimatedView} = Animated; export default class Downloader extends PureComponent { @@ -115,57 +117,6 @@ export default class Downloader extends PureComponent { ]).start(); }; - renderBottomContent = () => { - const {saveToCameraRoll} = this.props; - const {isVideo, progress} = this.state; - const realFill = Number(progress.toFixed(0)); - - if (realFill === 0) { - return null; - } - - let savedComponent; - if (realFill < 100 || this.state.didCancel) { - savedComponent = ( - - ); - } else if (saveToCameraRoll && isVideo) { - savedComponent = ( - - ); - } else if (saveToCameraRoll) { - savedComponent = ( - - ); - } else { - savedComponent = ( - - ); - } - - return ( - - {savedComponent} - - ); - }; - renderProgress = (fill) => { const {isVideo} = this.state; const realFill = Number(fill.toFixed(0)); @@ -383,12 +334,12 @@ export default class Downloader extends PureComponent { }; render() { - const {show, downloadPath} = this.props; + const {show, downloadPath, saveToCameraRoll} = this.props; if (!show && !this.state.force) { return null; } - const {progress, started} = this.state; + const {progress, started, isVideo} = this.state; const containerHeight = show ? '100%' : 0; @@ -412,7 +363,13 @@ export default class Downloader extends PureComponent { > {component} - {this.renderBottomContent()} + { !this.state.didCancel && ( + + )} diff --git a/app/screens/image_preview/downloader_bottom_content.js b/app/screens/image_preview/downloader_bottom_content.js new file mode 100644 index 000000000..455c831f8 --- /dev/null +++ b/app/screens/image_preview/downloader_bottom_content.js @@ -0,0 +1,75 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. +import React from 'react'; +import FormattedText from 'app/components/formatted_text'; +import {View, StyleSheet} from 'react-native'; +import PropTypes from 'prop-types'; + +const DownloaderBottomContent = ({saveToCameraRoll, isVideo, progressPercent}) => { + const realFill = Number(progressPercent.toFixed(0)); + + if (realFill === 0) { + return null; + } + + let savedComponent; + if (realFill < 100) { + savedComponent = ( + + ); + } else if (saveToCameraRoll && isVideo) { + savedComponent = ( + + ); + } else if (saveToCameraRoll) { + savedComponent = ( + + ); + } else { + savedComponent = ( + + ); + } + + return ( + + {savedComponent} + + ); +}; + +DownloaderBottomContent.propTypes = { + saveToCameraRoll: PropTypes.bool, + isVideo: PropTypes.bool, + progressPercent: PropTypes.number, +}; + +const styles = StyleSheet.create({ + bottomContent: { + alignItems: 'center', + marginTop: 10, + }, + bottomText: { + color: 'white', + fontSize: 16, + fontWeight: '600', + }, +}); + +export default DownloaderBottomContent; diff --git a/app/screens/image_preview/downloader_bottom_content.test.js b/app/screens/image_preview/downloader_bottom_content.test.js new file mode 100644 index 000000000..3a5e87f39 --- /dev/null +++ b/app/screens/image_preview/downloader_bottom_content.test.js @@ -0,0 +1,58 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; +import {shallow} from 'enzyme'; + +import DownloaderBottomContent from './downloader_bottom_content'; + +describe('DownloaderBottomContent', () => { + const baseProps = { + progressPercent: 10, + isVideo: false, + saveToCameraRoll: true, + }; + + test('should match snapshot for downloading', () => { + const wrapper = shallow( + , + ); + + expect(wrapper.getElement()).toMatchSnapshot(); + }); + + test('should match snapshot for downloaded file and isVideo', () => { + const wrapper = shallow( + , + ); + + expect(wrapper.getElement()).toMatchSnapshot(); + }); + + test('should match snapshot for downloaded file and is not video', () => { + const wrapper = shallow( + , + ); + + expect(wrapper.getElement()).toMatchSnapshot(); + }); + + test('should match snapshot for downloaded file', () => { + const wrapper = shallow( + , + ); + + expect(wrapper.getElement()).toMatchSnapshot(); + }); +});