in src/FileUpload.tsx [290:390]
function UploadProgress(props: {
filename: string;
fileSize: string;
uploadStatus: boolean | undefined;
setUploading: ISetBooleanFunctions;
}) {
const {colors: themeColors} = useTheme();
const {uploadStatus, filename, setUploading} = props;
const {screen} = useScreenDimensions();
const [showResult, setShowResult] = useState(false);
const intid = useRef<number>();
const style = useMemo<StyleDefinition>(
() => ({
spinner: {
flex: 2,
justifyContent: 'center',
},
details: {
flex: 1,
alignItems: 'center',
justifyContent: 'space-between',
},
cancel: {
color: 'red',
},
spinnerContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
container: {flex: 1, alignItems: 'center'},
}),
[],
);
useEffect(() => {
if (uploadStatus !== undefined) {
setShowResult(true);
// wait before go back to standard screen
setTimeout(() => {
setUploading.False();
}, 3000);
// @ts-ignore
clearInterval(intid.current);
}
}, [uploadStatus, setUploading]);
if (uploadStatus !== undefined && showResult) {
return (
<View style={style.container}>
<Icon
size={screen.height / 6}
color={uploadStatus ? 'green' : 'red'}
name={
Platform.select({
ios: uploadStatus
? 'checkmark-circle-outline'
: 'close-circle-outline',
android: uploadStatus
? 'check-circle-outline'
: 'close-circle-outline',
}) as string
}
type={Platform.select({
ios: 'ionicon',
android: 'material-community',
})}
/>
<Text>
{uploadStatus
? `Successfully uploaded ${filename}`
: `Failed to upload ${filename}`}
</Text>
</View>
);
}
return (
<View style={style.spinnerContainer}>
<View style={style.spinner}>
<CircleSnail
size={Math.floor(screen.width / 3)}
indeterminate={true}
thickness={3}
color={themeColors.text}
spinDuration={1000}
duration={1000}
/>
</View>
<View style={style.details}>
<Text style={style.cancel} onPress={setUploading.False}>
{Strings.Core.Cancel}
</Text>
<Text style={{}}>{filename}</Text>
</View>
</View>
);
}