@smart-link/rn-im 1.0.1

package/dist/pages/index.js

@@ -0,0 +1,27 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.imRoutes = void 0;
+const conversation_routes_1 = require("./conversation/conversation.routes");
+const message_routes_1 = require("./message/message.routes");
+const search_routes_1 = require("./search/search.routes");
+const collection_routes_1 = require("./collection/collection.routes");
+const addressList_routes_1 = __importDefault(require("./address-list/addressList.routes"));
+exports.imRoutes = [...conversation_routes_1.conversationRoutes, ...message_routes_1.messageRoutes, ...search_routes_1.searchRoutes, ...collection_routes_1.collectRoutes, ...addressList_routes_1.default];
+__exportStar(require("./types"), exports);

package/dist/pages/message/ChooseMember.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { NativeStackScreenProps } from '@react-navigation/native-stack/lib/typescript/src/types';
+import { IMPageParamList } from '../../pages';
+type ChooseMemberProps = NativeStackScreenProps<IMPageParamList, 'ChooseMember'>;
+declare const ChooseMember: ({ navigation, route: { params } }: ChooseMemberProps) => React.JSX.Element;
+export default ChooseMember;

package/dist/pages/message/ChooseMember.js

@@ -0,0 +1,185 @@
+"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 react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const rn_ui_1 = require("@smart-link/rn-ui");
+const useImSelector_1 = require("../../hooks/useImSelector");
+const useTranslation_1 = __importDefault(require("../../hooks/useTranslation"));
+const styles_1 = require("../../components/styles");
+const ChatAvatar_1 = __importDefault(require("../../components/ChatAvatar/ChatAvatar"));
+const im_base_1 = require("@smart-link/im-base");
+const init_1 = require("../../init");
+const ChooseMember = ({ navigation, route: { params } }) => {
+    const { groupDetail } = (0, useImSelector_1.useChatGroup)();
+    const [keyword, seKeyword] = (0, react_1.useState)('');
+    const [checked, setChecked] = (0, react_1.useState)([]);
+    const { t } = (0, useTranslation_1.default)();
+    const { groupMemberList, memberLevel } = groupDetail;
+    const imManager = (0, init_1.getImManager)();
+    const list = (0, react_1.useMemo)(() => {
+        if (params.atOther && ['owner', 'mgr'].includes(memberLevel)) {
+            return [
+                {
+                    userId: 'allMembers',
+                    memberName: t('allMembers'),
+                },
+            ].concat(groupMemberList.filter(item => item.userId !== imManager.user.userId && (keyword ? item.memberName.includes(keyword) : true)));
+        }
+        else {
+            return groupMemberList.filter(item => item.userId !== imManager.user.userId && (keyword ? item.memberName.includes(keyword) : true));
+        }
+    }, [params.atOther, groupMemberList, keyword]);
+    (0, react_1.useEffect)(() => {
+        navigation.setOptions({
+            headerLeft({ tintColor }) {
+                return (<react_native_1.TouchableOpacity activeOpacity={0.5} style={{ padding: (0, rn_ui_1.dp)(10) }} onPress={() => {
+                        navigation.goBack();
+                    }}>
+                        <react_native_1.Text style={{ color: tintColor }}>{t('cancel')}</react_native_1.Text>
+                    </react_native_1.TouchableOpacity>);
+            },
+            headerTitle: params.atOther ? t('selectRemainder') : t('selectContacts'),
+            headerRight: ({ tintColor }) => {
+                return (<react_native_1.TouchableOpacity activeOpacity={0.5} style={{ padding: (0, rn_ui_1.dp)(10) }} disabled={!checked.length} onPress={confirm}>
+                        <react_native_1.Text style={{ color: tintColor }}>{t('confirm')}</react_native_1.Text>
+                    </react_native_1.TouchableOpacity>);
+            },
+        });
+    }, [list, params, navigation, t, checked]);
+    const confirm = () => {
+        var _a, _b, _c;
+        const members = list.filter(item => checked.includes(item.userId));
+        if (params.atOther) {
+            if ((_a = imManager.inputRef) === null || _a === void 0 ? void 0 : _a.current) {
+                (_c = (_b = imManager.inputRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.appendInputText(`${members[0].memberName} `);
+            }
+            imManager.store.dispatch(im_base_1.MessageActions.addAtUser(members[0]));
+        }
+        if (params.removeMember) {
+            imManager.store.dispatch(im_base_1.ConversationActions.removeGroupMembers({
+                selectMemberList: members,
+            }));
+        }
+        navigation.goBack();
+    };
+    const renderItem = ({ item }) => {
+        const enableTopStyles = item.enableTop === 'on' ? styles.enableTop : null;
+        return (<react_native_1.TouchableOpacity activeOpacity={0.5} style={[styles.row, enableTopStyles]} onPress={() => {
+                if (params.atOther) {
+                    setChecked([item.userId]);
+                }
+                else {
+                    if (checked.includes(item.userId)) {
+                        setChecked(checked.filter(id => id !== item.userId));
+                    }
+                    else {
+                        setChecked([...checked, item.userId]);
+                    }
+                }
+            }}>
+                <react_native_1.View style={{ marginRight: (0, rn_ui_1.dp)(10) }}>
+                    <rn_ui_1.Checkbox style={{ pointerEvents: 'none' }} checked={checked.includes(item.userId)}/>
+                </react_native_1.View>
+
+                <ChatAvatar_1.default disabled id={item.userId} url={item.memberAvatars} name={item.memberName} size={(0, rn_ui_1.dp)(40)}/>
+                <react_native_1.View style={styles.width10}/>
+                <react_native_1.Text numberOfLines={1} style={styles.nameText}>
+                    {item.memberName}
+                </react_native_1.Text>
+            </react_native_1.TouchableOpacity>);
+    };
+    const listFooterComponent = list.length === 0 ? null : <react_native_1.View style={styles.listFooterLine}/>;
+    const itemSeparatorComponent = () => <react_native_1.View style={styles.separator}/>;
+    return (<rn_ui_1.NavigationPage noPadding>
+            <rn_ui_1.SearchInput value={keyword} onChange={text => {
+            seKeyword(text);
+        }} onSubmitEditing={e => {
+            imManager.store.dispatch(im_base_1.ForwardActions.loadList(imManager, keyword));
+        }} style={styles.search} placeholder={t('search')}/>
+            <rn_ui_1.Space size="m"/>
+            <react_native_1.FlatList contentContainerStyle={styles.list} ItemSeparatorComponent={itemSeparatorComponent} ListFooterComponent={listFooterComponent} initialNumToRender={1} numColumns={1} data={list} keyExtractor={item => item.userId} renderItem={renderItem}></react_native_1.FlatList>
+        </rn_ui_1.NavigationPage>);
+};
+const styles = react_native_1.StyleSheet.create({
+    selector: {
+        flex: 1,
+        backgroundColor: '#fff',
+    },
+    list: {
+        backgroundColor: '#fff',
+    },
+    enableTop: {
+        backgroundColor: '#f2f2f2',
+        borderColor: '#e9e9e9',
+    },
+    row: {
+        paddingHorizontal: (0, rn_ui_1.dp)(15),
+        flexDirection: 'row',
+        alignItems: 'center',
+        height: (0, rn_ui_1.dp)(60),
+    },
+    currChat: {
+        backgroundColor: '#f3f3f3',
+        paddingHorizontal: (0, rn_ui_1.dp)(15),
+        paddingVertical: (0, rn_ui_1.dp)(5),
+    },
+    currChatText: {
+        color: '#999',
+    },
+    nameText: {
+        width: (0, rn_ui_1.dp)(250),
+        color: '#333',
+    },
+    width10: {
+        width: (0, rn_ui_1.dp)(10),
+    },
+    search: Object.assign({ backgroundColor: '#fff', padding: (0, rn_ui_1.dp)(10), borderBottomWidth: (0, rn_ui_1.dp)(1), borderColor: '#e9e9e9' }, styles_1.shadowStyle),
+    heightSpace: {
+        height: (0, rn_ui_1.dp)(5),
+    },
+    listHeaderLine: {
+        height: (0, rn_ui_1.dp)(1),
+        backgroundColor: '#ececec',
+    },
+    listFooterLine: {
+        height: (0, rn_ui_1.dp)(1),
+        backgroundColor: '#ececec',
+    },
+    separator: {
+        marginLeft: (0, rn_ui_1.dp)(91),
+        height: (0, rn_ui_1.dp)(1),
+        backgroundColor: '#ececec',
+    },
+    empty: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});
+exports.default = ChooseMember;

package/dist/pages/message/MessageBackup/Bar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type BarProps = {
+    width: number;
+    progress: number;
+    barStyle?: any;
+};
+declare const Bar: React.MemoExoticComponent<({ width: widthProp, progress, ...props }: BarProps) => React.JSX.Element>;
+export default Bar;

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

@@ -0,0 +1,77 @@
+"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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    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');
+/* 进度条组件 */
+const Bar = react_1.default.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, {
+            toValue: progress,
+            useNativeDriver: false,
+        }).start();
+    }, [progress]);
+    return (<react_native_1.View style={[styles.background, { width: widthProp }, props.barStyle]}>
+            <react_native_1.Animated.View style={[
+            styles.fillStyle,
+            {
+                backgroundColor: theme.primaryColor,
+                width: _progress.current.interpolate({
+                    inputRange: [0, 100],
+                    outputRange: [0, 1 * widthProp],
+                }),
+            },
+        ]}/>
+        </react_native_1.View>);
+});
+const styles = react_native_1.StyleSheet.create({
+    background: {
+        height: (0, rn_ui_1.dp)(10),
+        backgroundColor: '#ccc',
+        flexDirection: 'row',
+        borderRadius: (0, rn_ui_1.dp)(30),
+    },
+    fillStyle: {
+        height: (0, rn_ui_1.dp)(10),
+        borderRadius: (0, rn_ui_1.dp)(30),
+    },
+});
+exports.default = Bar;

package/dist/pages/message/MessageBackup/MessageBackup.d.ts

@@ -0,0 +1,10 @@
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import React from 'react';
+import { IMPageParamList } from '../../types';
+export declare const getImageStyle: (img: any, scale: number) => {
+    width: number;
+    height: number;
+};
+export type MessageBackupProps = NativeStackScreenProps<IMPageParamList, 'MessageBackup'>;
+declare const MessageBackup: ({ navigation, route }: MessageBackupProps) => React.JSX.Element;
+export default MessageBackup;

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

@@ -0,0 +1,133 @@
+"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);
+    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)(() => {
+        navigation.setOptions({
+            title: t('cloudBackup_title'),
+        });
+        navigation.addListener('focus', () => {
+            // 获取上次备份时间
+            console.log('focus');
+            (0, backup_1.getMyLastBackupTime)()
+                .then(res => {
+                if (res.data) {
+                    rn_ui_1.Toast.loading;
+                    setLastBackupTime(new Date(res.data).getTime());
+                    setNoRecord(false);
+                }
+            })
+                .catch(_e => {
+                console.log(_e);
+            });
+        });
+    }, [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={() => {
+            navigation.navigate('StartBackupPage');
+        }}>
+                    {t('cloudBackup_startText')}
+                </rn_ui_1.Button>
+                {!noRecord && (<>
+                        <rn_ui_1.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({
+                    title: t('cloudBackup_clearText'),
+                    message: t('cloudBackup_clearTipsMessage'),
+                    onOk: () => {
+                        (0, backup_1.deleteMyBackupMessage)().then(res => {
+                            if (res.data) {
+                                setNoRecord(true);
+                            }
+                        });
+                    },
+                    onCancel: () => {
+                        model.close();
+                    },
+                    onOkText: t('confirm'),
+                    onCancelText: t('cancel'),
+                });
+            }}>
+                            {t('cloudBackup_clearText')}
+                        </rn_ui_1.Button>
+                    </>)}
+            </react_native_1.View>
+        </rn_ui_1.NavigationPage>);
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        paddingTop: (0, rn_ui_1.dp)(40),
+        width,
+    },
+    img: (0, exports.getImageStyle)(default_assets_1.messageBackupImg.cloud, 0.8),
+    title: {
+        fontSize: (0, rn_ui_1.dp)(16),
+        textAlign: 'center',
+    },
+    button: {
+        marginVertical: (0, rn_ui_1.dp)(8),
+        width: (0, rn_ui_1.dp)(width - 40),
+    },
+    tips: {
+        fontSize: (0, rn_ui_1.dp)(16),
+        paddingVertical: (0, rn_ui_1.dp)(20),
+    },
+});
+exports.default = MessageBackup;

package/dist/pages/message/MessageBackup/RestoreBackupPage.d.ts

@@ -0,0 +1,6 @@
+import { IMPageParamList } from '../../../pages/types';
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import React from 'react';
+export type RestoreBackupPageProps = NativeStackScreenProps<IMPageParamList, 'StartBackupPage'>;
+declare const RestoreBackupPage: ({ navigation }: RestoreBackupPageProps) => React.JSX.Element;
+export default RestoreBackupPage;

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

@@ -0,0 +1,135 @@
+"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');
+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)(() => {
+        navigation.setOptions({
+            title: t('cloudBackup_restoreText'),
+        });
+    }, [t, navigation]);
+    (0, react_1.useEffect)(() => {
+        messageRestore.current = new utils_1.MessageRestoreUtils(p => {
+            setProgress(p);
+        });
+        messageRestore.current.start();
+        return () => {
+            var _a;
+            (_a = messageRestore.current) === null || _a === void 0 ? void 0 : _a.destroy();
+        };
+    }, []);
+    const cancel = () => {
+        var _a;
+        (_a = messageRestore.current) === null || _a === void 0 ? void 0 : _a.cancel();
+        navigation.goBack();
+    };
+    const pause = () => {
+        var _a;
+        (_a = messageRestore.current) === null || _a === void 0 ? void 0 : _a.pause();
+        setPaused(true);
+    };
+    const resume = () => {
+        var _a;
+        (_a = messageRestore.current) === null || _a === void 0 ? void 0 : _a.resume();
+        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}>
+                        {t('cloudBackup_pause')}
+                    </rn_ui_1.Button>)}
+                {!finished && paused && (<rn_ui_1.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}>
+                        {t('cancel')}
+                    </rn_ui_1.Button>)}
+
+                {finished && (<rn_ui_1.Button style={styles.button} type="default" onPress={() => {
+                navigation.goBack();
+            }}>
+                        {i18n.t('back')}
+                    </rn_ui_1.Button>)}
+            </react_native_1.View>
+        </rn_ui_1.NavigationPage>);
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        paddingTop: (0, rn_ui_1.dp)(20),
+        width,
+    },
+    img: (0, MessageBackup_1.getImageStyle)(default_assets_1.messageBackupImg.cloud_begin, 0.8),
+    text: {
+        textAlign: 'center',
+        marginVertical: (0, rn_ui_1.dp)(8),
+    },
+    button: {
+        marginVertical: (0, rn_ui_1.dp)(8),
+        width: (0, rn_ui_1.dp)(width - 40),
+    },
+    progress: {
+        paddingTop: (0, rn_ui_1.dp)(30),
+        paddingBottom: (0, rn_ui_1.dp)(20),
+    },
+    progressBar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    percent: {
+        marginLeft: (0, rn_ui_1.dp)(4),
+        fontSize: (0, rn_ui_1.dp)(14),
+    },
+    progressText: {
+        fontSize: (0, rn_ui_1.dp)(14),
+        textAlign: 'center',
+    },
+});
+exports.default = RestoreBackupPage;

package/dist/pages/message/MessageBackup/StartBackupPage.d.ts

@@ -0,0 +1,6 @@
+import { IMPageParamList } from '../../../pages/types';
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import React from 'react';
+export type StartBackupPageProps = NativeStackScreenProps<IMPageParamList, 'StartBackupPage'>;
+declare const StartBackupPage: ({ navigation }: StartBackupPageProps) => React.JSX.Element;
+export default StartBackupPage;