From 67a2b76e416a135fa9e1dc5bbc202a56b95847a7 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Wed, 29 May 2019 16:40:59 +0100
Subject: [PATCH] create progress bar component (#560)
---
app/src/component/fileListItem/view.js | 16 ++++----
app/src/component/progressBar/index.js | 4 ++
app/src/component/progressBar/view.js | 54 ++++++++++++++++++++++++++
app/src/page/splash/view.js | 13 +++----
app/src/styles/fileList.js | 3 --
5 files changed, 73 insertions(+), 17 deletions(-)
create mode 100644 app/src/component/progressBar/index.js
create mode 100644 app/src/component/progressBar/view.js
diff --git a/app/src/component/fileListItem/view.js b/app/src/component/fileListItem/view.js
index 53b00cf..622c9a9 100644
--- a/app/src/component/fileListItem/view.js
+++ b/app/src/component/fileListItem/view.js
@@ -3,7 +3,6 @@ import { normalizeURI, parseURI } from 'lbry-redux';
import {
ActivityIndicator,
Platform,
- ProgressBarAndroid,
Text,
TouchableOpacity,
View
@@ -15,6 +14,7 @@ import FileItemMedia from 'component/fileItemMedia';
import Icon from 'react-native-vector-icons/FontAwesome5';
import Link from 'component/link';
import NsfwOverlay from 'component/nsfwOverlay';
+import ProgressBar from 'component/progressBar';
import fileListStyle from 'styles/fileList';
class FileListItem extends React.PureComponent {
@@ -88,7 +88,7 @@ class FileListItem extends React.PureComponent {
title={(title || name)}
thumbnail={thumbnail} />
{(fileInfo && fileInfo.completed && fileInfo.download_path) &&
- <Icon style={fileListStyle.downloadedIcon} solid={true} color={Colors.BrightGreen} name={"folder"} size={16} />}
+ <Icon style={fileListStyle.downloadedIcon} solid={true} color={Colors.NextLbryGreen} name={"folder"} size={16} />}
<View style={fileListStyle.detailsContainer}>
{featuredResult && <Text style={fileListStyle.featuredUri} numberOfLines={1}>{uri}</Text>}
@@ -112,13 +112,15 @@ class FileListItem extends React.PureComponent {
<DateTime style={fileListStyle.publishInfo} textStyle={fileListStyle.infoText} timeAgo uri={uri} />
</View>
- {fileInfo &&
+ {(fileInfo && fileInfo.download_path) &&
<View style={fileListStyle.downloadInfo}>
{!fileInfo.completed &&
- <View style={fileListStyle.progress}>
- <View style={[fileListStyle.progressCompleted, { flex: this.getDownloadProgress(fileInfo) } ]} />
- <View style={[fileListStyle.progressRemaining, { flex: (100 - this.getDownloadProgress(fileInfo)) } ]} />
- </View>}
+ <ProgressBar
+ borderRadius={3}
+ color={Colors.NextLbryGreen}
+ height={3}
+ style={fileListStyle.progress}
+ progress={this.getDownloadProgress(fileInfo)} />}
</View>
}
</View>
diff --git a/app/src/component/progressBar/index.js b/app/src/component/progressBar/index.js
new file mode 100644
index 0000000..4e1a6c6
--- /dev/null
+++ b/app/src/component/progressBar/index.js
@@ -0,0 +1,4 @@
+import { connect } from 'react-redux';
+import ProgressBar from './view';
+
+export default connect()(ProgressBar);
diff --git a/app/src/component/progressBar/view.js b/app/src/component/progressBar/view.js
new file mode 100644
index 0000000..af82042
--- /dev/null
+++ b/app/src/component/progressBar/view.js
@@ -0,0 +1,54 @@
+// @flow
+import React from 'react';
+import PropTypes from 'prop-types';
+import { View } from 'react-native';
+
+const defaultHeight = 5;
+const defaultBorderRadius = 5;
+const minProgress = 0;
+const maxProgress = 100;
+
+class ProgressBar extends React.PureComponent {
+ static propTypes = {
+ borderRadius: PropTypes.number,
+ color: PropTypes.string.isRequired,
+ height: PropTypes.number,
+ progress: function(props, propName, componentName) {
+ const value = parseInt(props[propName], 10);
+ if (isNaN(value) || props[propName] < minProgress || props[propName] > maxProgress) {
+ return new Error('progress should be between 0 and 100');
+ }
+ },
+ style: PropTypes.any
+ };
+
+ render() {
+ const { borderRadius, color, height, progress, style } = this.props;
+ const currentProgress = Math.ceil(progress);
+
+ let styles = [];
+ if (style) {
+ if (style.length) {
+ styles = styles.concat(style);
+ } else {
+ styles.push(style);
+ }
+ }
+
+ styles.push({
+ borderRadius: borderRadius || defaultBorderRadius,
+ flexDirection: 'row',
+ height: height || defaultHeight,
+ overflow: 'hidden'
+ });
+
+ return (
+ <View style={styles}>
+ <View style={{ backgroundColor: color, borderRadius: borderRadius || defaultBorderRadius, flex: currentProgress }} />
+ <View style={{ backgroundColor: color, opacity: 0.2, flex: (100 - currentProgress) }} />
+ </View>
+ );
+ }
+}
+
+export default ProgressBar;
diff --git a/app/src/page/splash/view.js b/app/src/page/splash/view.js
index 971a6ab..1588c4f 100644
--- a/app/src/page/splash/view.js
+++ b/app/src/page/splash/view.js
@@ -5,7 +5,6 @@ import {
Linking,
NativeModules,
Platform,
- ProgressBarAndroid,
Text,
View
} from 'react-native';
@@ -14,6 +13,7 @@ import { decode as atob } from 'base-64';
import { navigateToUri } from 'utils/helper';
import moment from 'moment';
import AsyncStorage from '@react-native-community/async-storage';
+import ProgressBar from 'component/progressBar';
import PropTypes from 'prop-types';
import Colors from 'styles/colors';
import Constants from 'constants';
@@ -271,12 +271,11 @@ class SplashScreen extends React.PureComponent {
return (
<View style={splashStyle.container}>
<Text style={splashStyle.title}>LBRY</Text>
- {'android' === Platform.OS && this.state.isDownloadingHeaders &&
- <ProgressBarAndroid color={Colors.White}
- indeterminate={false}
- styleAttr={"Horizontal"}
- style={splashStyle.progress}
- progress={this.state.headersDownloadProgress/100.0} />}
+ {this.state.isDownloadingHeaders &&
+ <ProgressBar
+ color={Colors.White}
+ style={splashStyle.progress}
+ progress={this.state.headersDownloadProgress} />}
{!this.state.isDownloadingHeaders && <ActivityIndicator color={Colors.White} style={splashStyle.loading} size={"small"} />}
<Text style={splashStyle.message}>{message}</Text>
<Text style={splashStyle.details}>{details}</Text>
diff --git a/app/src/styles/fileList.js b/app/src/styles/fileList.js
index 18c45c6..9d06900 100644
--- a/app/src/styles/fileList.js
+++ b/app/src/styles/fileList.js
@@ -71,9 +71,6 @@ const fileListStyle = StyleSheet.create({
},
progress: {
marginTop: (screenWidthPixels <= 720) ? 2 : 4,
- height: 3,
- flex: 1,
- flexDirection: 'row'
},
progressCompleted: {
backgroundColor: Colors.LbryGreen