toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

MM-12923 Fix Downloading message on cancelling downloads (#2337)

Browse source
This commit is contained in:
Sudheer 2018-11-14 16:53:35 +05:30 committed by Elias Nahum
parent 592fab2375
commit 67611d0c22
4 changed files with 237 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
app/screens/image_preview/__snapshots__/downloader_bottom_content.test.js.snap Normal file
View file

@ -0,0 +1,93 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DownloaderBottomContent should match snapshot for downloaded file 1`] = `
<Component
style={
Object {
"alignItems": "center",
"marginTop": 10,
}
}
>
<FormattedText
defaultMessage="Download complete"
id="mobile.downloader.complete"
style={
Object {
"color": "white",
"fontSize": 16,
"fontWeight": "600",
}
}
/>
</Component>
`;
exports[`DownloaderBottomContent should match snapshot for downloaded file and is not video 1`] = `
<Component
style={
Object {
"alignItems": "center",
"marginTop": 10,
}
}
>
<FormattedText
defaultMessage="Image Saved"
id="mobile.downloader.image_saved"
style={
Object {
"color": "white",
"fontSize": 16,
"fontWeight": "600",
}
}
/>
</Component>
`;
exports[`DownloaderBottomContent should match snapshot for downloaded file and isVideo 1`] = `
<Component
style={
Object {
"alignItems": "center",
"marginTop": 10,
}
}
>
<FormattedText
defaultMessage="Video Saved"
id="mobile.downloader.video_saved"
style={
Object {
"color": "white",
"fontSize": 16,
"fontWeight": "600",
}
}
/>
</Component>
`;
exports[`DownloaderBottomContent should match snapshot for downloading 1`] = `
<Component
style={
Object {
"alignItems": "center",
"marginTop": 10,
}
}
>
<FormattedText
defaultMessage="Downloading..."
id="mobile.downloader.downloading"
style={
Object {
"color": "white",
"fontSize": 16,
"fontWeight": "600",
}
}
/>
</Component>
`;

65
app/screens/image_preview/downloader.ios.js
View file

@ -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 = (
<FormattedText
id='mobile.downloader.downloading'
defaultMessage='Downloading...'
style={styles.bottomText}
/>
);
} else if (saveToCameraRoll && isVideo) {
savedComponent = (
<FormattedText
id='mobile.downloader.video_saved'
defaultMessage='Video Saved'
style={styles.bottomText}
/>
);
} else if (saveToCameraRoll) {
savedComponent = (
<FormattedText
id='mobile.downloader.image_saved'
defaultMessage='Image Saved'
style={styles.bottomText}
/>
);
} else {
savedComponent = (
<FormattedText
id='mobile.downloader.complete'
defaultMessage='Download complete'
style={styles.bottomText}
/>
);
}
return (
<View style={styles.bottomContent}>
{savedComponent}
</View>
);
};
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}
</CircularProgress>
{this.renderBottomContent()}
{ !this.state.didCancel && (
<DownloaderBottomContent
saveToCameraRoll={saveToCameraRoll}
isVideo={isVideo}
progressPercent={progress}
/>
)}
</View>
</AnimatedView>
</View>

75
app/screens/image_preview/downloader_bottom_content.js Normal file
View file

@ -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 = (
<FormattedText
id='mobile.downloader.downloading'
defaultMessage='Downloading...'
style={styles.bottomText}
/>
);
} else if (saveToCameraRoll && isVideo) {
savedComponent = (
<FormattedText
id='mobile.downloader.video_saved'
defaultMessage='Video Saved'
style={styles.bottomText}
/>
);
} else if (saveToCameraRoll) {
savedComponent = (
<FormattedText
id='mobile.downloader.image_saved'
defaultMessage='Image Saved'
style={styles.bottomText}
/>
);
} else {
savedComponent = (
<FormattedText
id='mobile.downloader.complete'
defaultMessage='Download complete'
style={styles.bottomText}
/>
);
}
return (
<View style={styles.bottomContent}>
{savedComponent}
</View>
);
};
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;

58
app/screens/image_preview/downloader_bottom_content.test.js Normal file
View file

@ -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(
<DownloaderBottomContent {...baseProps}/>,
);
expect(wrapper.getElement()).toMatchSnapshot();
});
test('should match snapshot for downloaded file and isVideo', () => {
const wrapper = shallow(
<DownloaderBottomContent
{...baseProps}
isVideo={true}
progressPercent={100}
/>,
);
expect(wrapper.getElement()).toMatchSnapshot();
});
test('should match snapshot for downloaded file and is not video', () => {
const wrapper = shallow(
<DownloaderBottomContent
{...baseProps}
progressPercent={100}
/>,
);
expect(wrapper.getElement()).toMatchSnapshot();
});
test('should match snapshot for downloaded file', () => {
const wrapper = shallow(
<DownloaderBottomContent
{...baseProps}
saveToCameraRoll={false}
progressPercent={100}
/>,
);
expect(wrapper.getElement()).toMatchSnapshot();
});
});