@smart-link/rn-im 1.0.23 → 1.0.26

package/dist/pages/message/FileSelector.js

@@ -0,0 +1,235 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+// @flow
+import * as React from 'react';
+import { dp, NavigationPage, SearchInput } from "@smart-link/rn-ui";
+import { View, StyleSheet, TouchableOpacity, ScrollView, Text, FlatList } from "react-native";
+import { Fragment, useCallback, useEffect, useState } from "react";
+import { getFileRootItem, getFileType, isImage, numberToFileSize, readFileDir, selectFile } from "../../utils/file";
+import { getImManager } from "../../init";
+import AntDesign from "react-native-vector-icons/AntDesign";
+import useTranslation from "../../hooks/useTranslation";
+import { findSvgIcon } from "../../utils/file-icon";
+import FastImage from "react-native-fast-image";
+import { dirImg } from "../../default-assets";
+import { formatTime } from "../../hooks/useFormatMsgTime";
+import { useConversation } from "../../hooks/useImSelector";
+const getIcon = (item) => {
+    if (item.isDir) {
+        return <FastImage style={styles.fileImage} source={dirImg}/>;
+    }
+    if (isImage(item.path)) {
+        return <FastImage style={styles.fileImage} source={{ uri: 'file://' + item.path }}/>;
+    }
+    if (item.thumbPath) {
+        return <FastImage style={styles.fileImage} source={{ uri: 'file://' + item.thumbPath }}/>;
+    }
+    const Icon = findSvgIcon(getFileType(item.path));
+    return <Icon style={styles.fileImage}/>;
+};
+const FileSelector = ({ navigation }) => {
+    const scrollHolder = {};
+    const [data, setData] = useState([]);
+    const [keyword, setKeyword] = useState('');
+    const [pathItems, setPathItems] = useState([]);
+    const imManager = getImManager();
+    const { t, i18n } = useTranslation();
+    const { currentConversation } = useConversation();
+    useEffect(() => {
+        navigation.setOptions({
+            headerLeft({ tintColor }) {
+                return (<TouchableOpacity activeOpacity={0.5} style={{ padding: dp(10) }} onPress={() => {
+                        navigation.goBack();
+                    }}>
+                        <Text style={{ color: tintColor }}>{t('cancel')}</Text>
+                    </TouchableOpacity>);
+            },
+            title: t('file')
+        });
+        getFileRootItem(imManager).then(items => {
+            setData(items);
+        });
+    }, [navigation, t]);
+    const onPressItem = (item) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!item.isDir) {
+            const localPath = yield selectFile(imManager, item.path, item.name);
+            const file = {
+                filename: item.name,
+                localPath: localPath,
+                size: item.size,
+                type: getFileType(item.path),
+                lastModified: item.time,
+            };
+            navigation.goBack();
+            if (isImage(file.localPath)) {
+                imManager.sendPictureMessage(currentConversation, file);
+            }
+            else {
+                imManager.sendFileMessage(currentConversation, file);
+            }
+            return;
+        }
+        setPathItems([...pathItems.filter(pathItem => pathItem.path !== item.path), item]);
+        scrollHolder.scroll.scrollToEnd();
+        readFileDir(imManager, item.path, keyword).then(items => {
+            setData(items);
+        });
+    });
+    const onChangeText = useCallback((keyword) => {
+        setKeyword(keyword);
+        if (pathItems.length === 0) {
+            return;
+        }
+        readFileDir(imManager, pathItems[pathItems.length - 1].path, keyword).then(items => {
+            setData(items);
+        });
+    }, [pathItems]);
+    const onPressPathRoot = useCallback(() => {
+        setPathItems([]);
+        getFileRootItem(imManager).then(items => {
+            setData(items);
+        });
+    }, []);
+    const onPressPathItem = useCallback((item) => {
+        setPathItems([
+            ...pathItems.filter(source => source.path.indexOf(item.path) === -1),
+            item
+        ]);
+        readFileDir(imManager, item.path, keyword).then(items => {
+            setData(items);
+        });
+    }, [pathItems, keyword]);
+    const listHeaderComponent = data.length === 0 ? null : <View style={styles.listHeaderLine}/>;
+    const listFooterComponent = data.length === 0 ? null : <View style={styles.listFooterLine}/>;
+    const itemSeparatorComponent = () => <View style={styles.separator}/>;
+    const keyExtractor = (item) => item.name + '_' + item.size;
+    const renderItem = ({ item }) => {
+        const icon = getIcon(item);
+        const extText = item.isDir ? (item.childrenCount + t('items')) : numberToFileSize(item.size);
+        return (<TouchableOpacity style={styles.item} onPress={() => {
+                onPressItem && onPressItem(item);
+            }}>
+
+                {icon}
+                <View style={styles.width15}/>
+                <View style={styles.left}>
+                    <Text style={styles.name} numberOfLines={1} ellipsizeMode={'middle'}>
+                        {item.name}
+                    </Text>
+                    <Text style={styles.time} numberOfLines={1} ellipsizeMode={'middle'}>
+                        {(item.time ? (formatTime(item.time, t, i18n) + ' - ') : '') + extText}
+                    </Text>
+                </View>
+                {item.isDir &&
+                <AntDesign name='right' size={dp(14)} color={'#666'} style={styles.accessory}/>}
+
+            </TouchableOpacity>);
+    };
+    return (<NavigationPage noPadding>
+            <View style={styles.selector}>
+                <View style={styles.search}>
+                    <SearchInput style={{
+            height: dp(32),
+            backgroundColor: '#ececec',
+        }} value={keyword} onChange={onChangeText} onSubmitEditing={() => { }}/>
+                </View>
+                <View style={styles.scroll}>
+                    <TouchableOpacity onPress={onPressPathRoot} style={styles.scrollVertical}>
+                        <Text style={styles.pathText}>{t('position')}</Text>
+                    </TouchableOpacity>
+                    <AntDesign name='right' size={dp(16)} color={'#333'} style={styles.scrollVertical}/>
+                    <ScrollView style={styles.scrollVertical} horizontal={true} ref={v => scrollHolder.scroll = v}>
+
+                        {pathItems.map((pathItem, index) => {
+            const disabled = index === pathItems.length - 1;
+            return (<Fragment key={index}>
+                                        <TouchableOpacity disabled={disabled} onPress={() => {
+                    onPressPathItem && onPressPathItem(pathItem);
+                }}>
+                                            <Text style={styles.pathText}>{pathItem.name}</Text>
+                                        </TouchableOpacity>
+                                        <AntDesign name='right' size={dp(16)} color={'#333'}/>
+                                    </Fragment>);
+        })}
+                    </ScrollView>
+                </View>
+                <FlatList contentContainerStyle={styles.list} ItemSeparatorComponent={itemSeparatorComponent} ListHeaderComponent={listHeaderComponent} ListFooterComponent={listFooterComponent} initialNumToRender={20} numColumns={1} data={data} keyboardShouldPersistTaps={'handled'} keyExtractor={keyExtractor} renderItem={renderItem}/>
+            </View>
+        </NavigationPage>);
+};
+const styles = StyleSheet.create({
+    selector: {
+        flex: 1,
+        backgroundColor: '#fff',
+    },
+    scroll: {
+        flexDirection: 'row',
+        paddingHorizontal: dp(8),
+    },
+    scrollVertical: {
+        paddingBottom: dp(10),
+    },
+    pathText: {
+        paddingHorizontal: dp(5),
+        fontSize: dp(14),
+        lineHeight: dp(16),
+        color: '#666',
+    },
+    search: {
+        backgroundColor: '#fff',
+        padding: dp(10),
+    },
+    list: {
+        paddingHorizontal: dp(15),
+    },
+    listFooterLine: {},
+    listHeaderLine: {},
+    separator: {
+        marginLeft: dp(65),
+        marginVertical: dp(10),
+        height: dp(1),
+        backgroundColor: '#ececec'
+    },
+    width15: {
+        width: dp(15),
+    },
+    width10: {
+        width: dp(10),
+    },
+    item: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    fileImage: {
+        borderRadius: dp(5),
+        width: dp(49),
+        height: dp(49)
+    },
+    left: {
+        justifyContent: 'space-around'
+    },
+    name: {
+        color: '#333',
+        fontSize: dp(15),
+        lineHeight: dp(20),
+        width: dp(260),
+    },
+    time: {
+        color: '#666',
+        fontSize: dp(12),
+        lineHeight: dp(18),
+    },
+    accessory: {
+        alignSelf: 'center',
+        position: 'absolute',
+        right: dp(15),
+    }
+});
+export default FileSelector;

package/dist/pages/message/MessageBackup/Bar.js

@@ -1,27 +1,3 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -33,24 +9,23 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-const rn_ui_1 = require("@smart-link/rn-ui");
-const react_1 = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const { width } = react_native_1.Dimensions.get('window');
+import { dp, useTheme } from '@smart-link/rn-ui';
+import React, { useRef } from 'react';
+import { View, Animated, Dimensions, StyleSheet } from 'react-native';
+const { width } = Dimensions.get('window');
 /* 进度条组件 */
-const Bar = react_1.default.memo((_a) => {
+const Bar = React.memo((_a) => {
     var { width: widthProp, progress } = _a, props = __rest(_a, ["width", "progress"]);
-    const theme = (0, rn_ui_1.useTheme)();
-    const _progress = (0, react_1.useRef)(new react_native_1.Animated.Value(0));
-    react_1.default.useEffect(() => {
-        react_native_1.Animated.spring(_progress.current, {
+    const theme = useTheme();
+    const _progress = useRef(new Animated.Value(0));
+    React.useEffect(() => {
+        Animated.spring(_progress.current, {
             toValue: progress,
             useNativeDriver: false,
         }).start();
     }, [progress]);
-    return (<react_native_1.View style={[styles.background, { width: widthProp }, props.barStyle]}>
-            <react_native_1.Animated.View style={[
+    return (<View style={[styles.background, { width: widthProp }, props.barStyle]}>
+            <Animated.View style={[
             styles.fillStyle,
             {
                 backgroundColor: theme.primaryColor,
@@ -60,18 +35,18 @@ const Bar = react_1.default.memo((_a) => {
                 }),
             },
         ]}/>
-        </react_native_1.View>);
+        </View>);
 });
-const styles = react_native_1.StyleSheet.create({
+const styles = StyleSheet.create({
     background: {
-        height: (0, rn_ui_1.dp)(10),
+        height: dp(10),
         backgroundColor: '#ccc',
         flexDirection: 'row',
-        borderRadius: (0, rn_ui_1.dp)(30),
+        borderRadius: dp(30),
     },
     fillStyle: {
-        height: (0, rn_ui_1.dp)(10),
-        borderRadius: (0, rn_ui_1.dp)(30),
+        height: dp(10),
+        borderRadius: dp(30),
     },
 });
-exports.default = Bar;
+export default Bar;

package/dist/pages/message/MessageBackup/MessageBackup.js

@@ -1,64 +1,34 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getImageStyle = void 0;
-const react_1 = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const rn_ui_1 = require("@smart-link/rn-ui");
-const useTranslation_1 = __importDefault(require("../../../hooks/useTranslation"));
-const default_assets_1 = require("../../../default-assets");
-const useFormatMsgTime_1 = __importDefault(require("../../../hooks/useFormatMsgTime"));
-const backup_1 = require("../../../api/backup");
-const { width } = react_native_1.Dimensions.get('window');
-const getImageStyle = (img, scale) => {
-    const imgInfo = react_native_1.Image.resolveAssetSource(img);
+import React, { useEffect, useState } from 'react';
+import { View, Text, StyleSheet, Dimensions, Image } from 'react-native';
+import { Button, dp, Line, Modal, NavigationPage, Space, Toast } from '@smart-link/rn-ui';
+import useTranslation from '../../../hooks/useTranslation';
+import { messageBackupImg } from '../../../default-assets';
+import useFormatMsgTime from '../../../hooks/useFormatMsgTime';
+import { deleteMyBackupMessage, getMyLastBackupTime } from '../../../api/backup';
+const { width } = Dimensions.get('window');
+export const getImageStyle = (img, scale) => {
+    const imgInfo = Image.resolveAssetSource(img);
     return {
         width: width * scale,
         height: ((width * imgInfo.height) / imgInfo.width) * scale,
     };
 };
-exports.getImageStyle = getImageStyle;
 const MessageBackup = ({ navigation, route }) => {
-    const { t } = (0, useTranslation_1.default)();
-    const [noRecord, setNoRecord] = (0, react_1.useState)(true);
-    const [lastBackupTime, setLastBackupTime] = (0, react_1.useState)(Date.now());
-    const time = (0, useFormatMsgTime_1.default)(lastBackupTime);
-    (0, react_1.useEffect)(() => {
+    const { t } = useTranslation();
+    const [noRecord, setNoRecord] = useState(true);
+    const [lastBackupTime, setLastBackupTime] = useState(Date.now());
+    const time = useFormatMsgTime(lastBackupTime);
+    useEffect(() => {
         navigation.setOptions({
             title: t('cloudBackup_title'),
         });
         navigation.addListener('focus', () => {
             // 获取上次备份时间
             console.log('focus');
-            (0, backup_1.getMyLastBackupTime)()
+            getMyLastBackupTime()
                 .then(res => {
                 if (res.data) {
-                    rn_ui_1.Toast.loading;
+                    Toast.loading;
                     setLastBackupTime(new Date(res.data).getTime());
                     setNoRecord(false);
                 }
@@ -68,29 +38,29 @@ const MessageBackup = ({ navigation, route }) => {
             });
         });
     }, [t, navigation, route]);
-    return (<rn_ui_1.NavigationPage noPadding>
-            <react_native_1.View style={styles.container}>
-                <react_native_1.Image style={styles.img} source={default_assets_1.messageBackupImg.cloud}/>
-                {noRecord ? (<react_native_1.Text style={styles.title}>{t('cloudBackup_noRecord')}</react_native_1.Text>) : (<react_native_1.Text style={styles.title}>{t('cloudBackup_record', { time: time })}</react_native_1.Text>)}
-                <rn_ui_1.Space size="m"/>
-                <rn_ui_1.Line style={{ marginVertical: (0, rn_ui_1.dp)(10) }}/>
-                <rn_ui_1.Button style={styles.button} type={'primary'} onPress={() => {
+    return (<NavigationPage noPadding>
+            <View style={styles.container}>
+                <Image style={styles.img} source={messageBackupImg.cloud}/>
+                {noRecord ? (<Text style={styles.title}>{t('cloudBackup_noRecord')}</Text>) : (<Text style={styles.title}>{t('cloudBackup_record', { time: time })}</Text>)}
+                <Space size="m"/>
+                <Line style={{ marginVertical: dp(10) }}/>
+                <Button style={styles.button} type={'primary'} onPress={() => {
             navigation.navigate('StartBackupPage');
         }}>
                     {t('cloudBackup_startText')}
-                </rn_ui_1.Button>
+                </Button>
                 {!noRecord && (<>
-                        <rn_ui_1.Button style={styles.button} type={'primary'} onPress={() => {
+                        <Button style={styles.button} type={'primary'} onPress={() => {
                 navigation.navigate('RestoreBackupPage');
             }}>
                             {t('cloudBackup_restoreText')}
-                        </rn_ui_1.Button>
-                        <rn_ui_1.Button style={styles.button} onPress={() => {
-                const model = rn_ui_1.Modal.confirm({
+                        </Button>
+                        <Button style={styles.button} onPress={() => {
+                const model = Modal.confirm({
                     title: t('cloudBackup_clearText'),
                     message: t('cloudBackup_clearTipsMessage'),
                     onOk: () => {
-                        (0, backup_1.deleteMyBackupMessage)().then(res => {
+                        deleteMyBackupMessage().then(res => {
                             if (res.data) {
                                 setNoRecord(true);
                             }
@@ -104,30 +74,30 @@ const MessageBackup = ({ navigation, route }) => {
                 });
             }}>
                             {t('cloudBackup_clearText')}
-                        </rn_ui_1.Button>
+                        </Button>
                     </>)}
-            </react_native_1.View>
-        </rn_ui_1.NavigationPage>);
+            </View>
+        </NavigationPage>);
 };
-const styles = react_native_1.StyleSheet.create({
+const styles = StyleSheet.create({
     container: {
         flex: 1,
         alignItems: 'center',
-        paddingTop: (0, rn_ui_1.dp)(40),
+        paddingTop: dp(40),
         width,
     },
-    img: (0, exports.getImageStyle)(default_assets_1.messageBackupImg.cloud, 0.8),
+    img: getImageStyle(messageBackupImg.cloud, 0.8),
     title: {
-        fontSize: (0, rn_ui_1.dp)(16),
+        fontSize: dp(16),
         textAlign: 'center',
     },
     button: {
-        marginVertical: (0, rn_ui_1.dp)(8),
-        width: (0, rn_ui_1.dp)(width - 40),
+        marginVertical: dp(8),
+        width: dp(width - 40),
     },
     tips: {
-        fontSize: (0, rn_ui_1.dp)(16),
-        paddingVertical: (0, rn_ui_1.dp)(20),
+        fontSize: dp(16),
+        paddingVertical: dp(20),
     },
 });
-exports.default = MessageBackup;
+export default MessageBackup;

package/dist/pages/message/MessageBackup/RestoreBackupPage.js

@@ -1,52 +1,24 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const rn_ui_1 = require("@smart-link/rn-ui");
-const react_1 = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const utils_1 = require("./utils");
-const MessageBackup_1 = require("./MessageBackup");
-const default_assets_1 = require("../../../default-assets");
-const useTranslation_1 = __importDefault(require("../../../hooks/useTranslation"));
-const Bar_1 = __importDefault(require("./Bar"));
-const { width } = react_native_1.Dimensions.get('window');
+import { Button, dp, NavigationPage } from '@smart-link/rn-ui';
+import React, { useEffect, useRef, useState } from 'react';
+import { View, StyleSheet, Dimensions, Image, Text } from 'react-native';
+import { MessageRestoreUtils } from './utils';
+import { getImageStyle } from './MessageBackup';
+import { messageBackupImg } from '../../../default-assets';
+import useTranslation from '../../../hooks/useTranslation';
+import Bar from './Bar';
+const { width } = Dimensions.get('window');
 const RestoreBackupPage = ({ navigation }) => {
-    const { t, i18n } = (0, useTranslation_1.default)();
-    const [progress, setProgress] = (0, react_1.useState)(0);
-    const [paused, setPaused] = (0, react_1.useState)(false);
-    const messageRestore = (0, react_1.useRef)();
-    (0, react_1.useEffect)(() => {
+    const { t, i18n } = useTranslation();
+    const [progress, setProgress] = useState(0);
+    const [paused, setPaused] = useState(false);
+    const messageRestore = useRef();
+    useEffect(() => {
         navigation.setOptions({
             title: t('cloudBackup_restoreText'),
         });
     }, [t, navigation]);
-    (0, react_1.useEffect)(() => {
-        messageRestore.current = new utils_1.MessageRestoreUtils(p => {
+    useEffect(() => {
+        messageRestore.current = new MessageRestoreUtils(p => {
             setProgress(p);
         });
         messageRestore.current.start();
@@ -71,65 +43,65 @@ const RestoreBackupPage = ({ navigation }) => {
         setPaused(false);
     };
     const finished = progress >= 100;
-    return (<rn_ui_1.NavigationPage noPadding>
-            <react_native_1.View style={styles.container}>
-                <react_native_1.Image style={styles.img} source={default_assets_1.messageBackupImg.cloud_begin}/>
-                <react_native_1.View style={styles.progress}>
-                    {!finished ? (<react_native_1.Text style={styles.text}>{t('cloudBackup_inRestore')}</react_native_1.Text>) : (<react_native_1.Text style={styles.text}>{t('cloudBackup_completed')}</react_native_1.Text>)}
-                    <react_native_1.View style={styles.progressBar}>
-                        <Bar_1.default width={(0, rn_ui_1.dp)(width - 80)} progress={progress}/>
-                    </react_native_1.View>
-                    <react_native_1.Text style={styles.progressText}>{progress}%</react_native_1.Text>
-                </react_native_1.View>
-                {!finished && !paused && (<rn_ui_1.Button style={styles.button} type={'primary'} onPress={pause}>
+    return (<NavigationPage noPadding>
+            <View style={styles.container}>
+                <Image style={styles.img} source={messageBackupImg.cloud_begin}/>
+                <View style={styles.progress}>
+                    {!finished ? (<Text style={styles.text}>{t('cloudBackup_inRestore')}</Text>) : (<Text style={styles.text}>{t('cloudBackup_completed')}</Text>)}
+                    <View style={styles.progressBar}>
+                        <Bar width={dp(width - 80)} progress={progress}/>
+                    </View>
+                    <Text style={styles.progressText}>{progress}%</Text>
+                </View>
+                {!finished && !paused && (<Button style={styles.button} type={'primary'} onPress={pause}>
                         {t('cloudBackup_pause')}
-                    </rn_ui_1.Button>)}
-                {!finished && paused && (<rn_ui_1.Button style={styles.button} type={'primary'} onPress={resume}>
+                    </Button>)}
+                {!finished && paused && (<Button style={styles.button} type={'primary'} onPress={resume}>
                         {t('cloudBackup_resume')}
-                    </rn_ui_1.Button>)}
-                {!finished && (<rn_ui_1.Button style={styles.button} danger onPress={cancel}>
+                    </Button>)}
+                {!finished && (<Button style={styles.button} danger onPress={cancel}>
                         {t('cancel')}
-                    </rn_ui_1.Button>)}
+                    </Button>)}
 
-                {finished && (<rn_ui_1.Button style={styles.button} type="default" onPress={() => {
+                {finished && (<Button style={styles.button} type="default" onPress={() => {
                 navigation.goBack();
             }}>
                         {i18n.t('back')}
-                    </rn_ui_1.Button>)}
-            </react_native_1.View>
-        </rn_ui_1.NavigationPage>);
+                    </Button>)}
+            </View>
+        </NavigationPage>);
 };
-const styles = react_native_1.StyleSheet.create({
+const styles = StyleSheet.create({
     container: {
         flex: 1,
         alignItems: 'center',
-        paddingTop: (0, rn_ui_1.dp)(20),
+        paddingTop: dp(20),
         width,
     },
-    img: (0, MessageBackup_1.getImageStyle)(default_assets_1.messageBackupImg.cloud_begin, 0.8),
+    img: getImageStyle(messageBackupImg.cloud_begin, 0.8),
     text: {
         textAlign: 'center',
-        marginVertical: (0, rn_ui_1.dp)(8),
+        marginVertical: dp(8),
     },
     button: {
-        marginVertical: (0, rn_ui_1.dp)(8),
-        width: (0, rn_ui_1.dp)(width - 40),
+        marginVertical: dp(8),
+        width: dp(width - 40),
     },
     progress: {
-        paddingTop: (0, rn_ui_1.dp)(30),
-        paddingBottom: (0, rn_ui_1.dp)(20),
+        paddingTop: dp(30),
+        paddingBottom: dp(20),
     },
     progressBar: {
         flexDirection: 'row',
         alignItems: 'center',
     },
     percent: {
-        marginLeft: (0, rn_ui_1.dp)(4),
-        fontSize: (0, rn_ui_1.dp)(14),
+        marginLeft: dp(4),
+        fontSize: dp(14),
     },
     progressText: {
-        fontSize: (0, rn_ui_1.dp)(14),
+        fontSize: dp(14),
         textAlign: 'center',
     },
 });
-exports.default = RestoreBackupPage;
+export default RestoreBackupPage;