@smart-link/rn-im 1.0.1

package/dist/pages/conversation/ForwardToConversation.js

@@ -0,0 +1,172 @@
+"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");
+function isChecked(selectList, item) {
+    for (let i = 0; i < selectList.length; i++) {
+        if (item.id === selectList[i].id) {
+            return true;
+        }
+    }
+    return false;
+}
+const ForwardToConversation = ({ navigation }) => {
+    const { forwardMessage } = (0, useImSelector_1.useMessage)();
+    const { list, selectList } = (0, useImSelector_1.useForward)();
+    const { t } = (0, useTranslation_1.default)();
+    const imManager = (0, init_1.getImManager)();
+    (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={() => {
+                        imManager.store.dispatch(im_base_1.ForwardActions.resetState());
+                        navigation.goBack();
+                    }}>
+                        <react_native_1.Text style={{ color: tintColor }}>{t('cancel')}</react_native_1.Text>
+                    </react_native_1.TouchableOpacity>);
+            },
+            headerTitle: t('selectChat'),
+            headerRight: ({ tintColor }) => {
+                const disabled = selectList.length === 0;
+                const selectCountText = disabled ? '' : '(' + selectList.length + ')';
+                return (<react_native_1.TouchableOpacity activeOpacity={0.5} style={{ padding: (0, rn_ui_1.dp)(10) }} disabled={disabled} onPress={() => {
+                        imManager.store.dispatch(im_base_1.ForwardActions.forwardMessage(imManager, forwardMessage, selectList, () => {
+                            imManager.store.dispatch(im_base_1.ForwardActions.resetState());
+                            imManager.store.dispatch(im_base_1.MessageActions.setForwardMessage(null));
+                            navigation.goBack();
+                        }));
+                    }}>
+                        <react_native_1.Text style={{ color: tintColor }}>
+                            {t('confirm')} {selectCountText}
+                        </react_native_1.Text>
+                    </react_native_1.TouchableOpacity>);
+            },
+        });
+    }, [navigation, t, forwardMessage, selectList]);
+    (0, react_1.useEffect)(() => {
+        imManager.store.dispatch(im_base_1.ForwardActions.loadList(imManager, ''));
+    }, []);
+    const renderItem = ({ item }) => {
+        const checked = isChecked(selectList, item);
+        const enableTopStyles = item.enableTop === 'on' ? styles.enableTop : null;
+        return (<react_native_1.TouchableOpacity activeOpacity={0.5} style={[styles.row, enableTopStyles]} onPress={() => {
+                imManager.store.dispatch(im_base_1.ForwardActions.onSelect(item, !checked));
+            }}>
+                <react_native_1.View style={{ marginRight: (0, rn_ui_1.dp)(10) }}>
+                    <rn_ui_1.Checkbox style={{ pointerEvents: 'none' }} checked={checked}/>
+                </react_native_1.View>
+
+                <ChatAvatar_1.default disabled id={item.id} priority="outside" url={item.avatars} name={item.name} size={(0, rn_ui_1.dp)(40)} type={item.type}/>
+                <react_native_1.View style={styles.width10}/>
+                <react_native_1.Text numberOfLines={1} style={styles.nameText}>
+                    {item.name}
+                </react_native_1.Text>
+            </react_native_1.TouchableOpacity>);
+    };
+    const listHeaderComponent = list.length === 0 ? null : (<>
+                <react_native_1.View style={styles.currChat}>
+                    <react_native_1.Text style={styles.currChatText}>{t('recentChat')}</react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={styles.listHeaderLine}/>
+            </>);
+    const listFooterComponent = list.length === 0 ? null : <react_native_1.View style={styles.listFooterLine}/>;
+    const itemSeparatorComponent = () => <react_native_1.View style={styles.separator}/>;
+    console.log(list);
+    return (<rn_ui_1.NavigationPage noPadding>
+            <rn_ui_1.SearchInput onSubmitEditing={e => {
+            imManager.store.dispatch(im_base_1.ForwardActions.loadList(imManager, e.nativeEvent.text));
+        }} placeholder={t('search')}/>
+            <rn_ui_1.Space size="m"/>
+            <react_native_1.FlatList contentContainerStyle={styles.list} ItemSeparatorComponent={itemSeparatorComponent} ListHeaderComponent={listHeaderComponent} ListFooterComponent={listFooterComponent} initialNumToRender={1} numColumns={1} data={list} keyExtractor={item => item.id} 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 = (0, react_1.memo)(ForwardToConversation);

package/dist/pages/conversation/List.d.ts

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

package/dist/pages/conversation/List.js

@@ -0,0 +1,204 @@
+"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 __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());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const im_base_1 = require("@smart-link/im-base");
+const rn_ui_1 = require("@smart-link/rn-ui");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const IndicatorText_1 = __importDefault(require("../../components/IndicatorText"));
+const NetworkUnconnected_1 = __importDefault(require("../../components/NetworkUnconnected"));
+const useImSelector_1 = require("../../hooks/useImSelector");
+const useTranslation_1 = __importDefault(require("../../hooks/useTranslation"));
+const init_1 = require("../../init");
+const ConversationCard_1 = __importDefault(require("./components/ConversationCard"));
+const ConversationOption_1 = __importDefault(require("./components/ConversationOption"));
+const MaterialIcons_1 = __importDefault(require("react-native-vector-icons/MaterialIcons"));
+const contact_slice_1 = require("../../slice/contact/contact.slice");
+const List = ({ navigation }) => {
+    const { t } = (0, useTranslation_1.default)();
+    const { connectStatus, conversations, onlineMap } = (0, useImSelector_1.useConversation)();
+    const [nativeEvent, setNativeEvent] = (0, react_1.useState)();
+    const [popoverVisible, setPopoverVisible] = (0, react_1.useState)(false);
+    const [conversation, setConversation] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        let headerTitle = t('message');
+        switch (connectStatus) {
+            case im_base_1.ConnectStatus.CONNECTING:
+                headerTitle = () => <IndicatorText_1.default text={t('connecting') + '...'}/>;
+                break;
+            case im_base_1.ConnectStatus.CONNECT_PARAM_ERROR:
+                headerTitle = t('connectFail');
+                break;
+            case im_base_1.ConnectStatus.CONNECT_ERROR:
+                headerTitle = t('serverConnectionFailed');
+                break;
+            case im_base_1.ConnectStatus.CONNECT_TIMEOUT:
+                headerTitle = t('serverConnectionTimeout');
+                break;
+            case im_base_1.ConnectStatus.SYNC_SUBSCRIBE_LIST:
+                headerTitle = () => <IndicatorText_1.default text={t('receipting') + '...'}/>;
+                break;
+            case im_base_1.ConnectStatus.UN_CONNECT:
+                headerTitle = t('message') + '(' + t('unConnect') + ')';
+                break;
+        }
+        navigation.setOptions({
+            headerTitle,
+            headerRight: () => (<rn_ui_1.Popover type="dark" placement="bottom" layout="vertical" duration={100} options={[
+                    {
+                        icon: <MaterialIcons_1.default name="person-add"/>,
+                        content: t('createGroupChat'),
+                        onPress: () => {
+                            (0, init_1.getImManager)().store.dispatch((0, contact_slice_1.startCreateGroup)());
+                            navigation.navigate('ChooseContact', {
+                                chooseOrg: true,
+                                checkMode: 'multi',
+                            });
+                        },
+                    },
+                    {
+                        icon: <MaterialIcons_1.default name="qr-code-scanner"/>,
+                        content: t('scan'),
+                        onPress: () => {
+                            navigation.navigate('ScanCode');
+                        },
+                    },
+                ]} contentStyle={{ borderRadius: (0, rn_ui_1.dp)(6) }}>
+                    <react_native_1.TouchableOpacity style={{ marginHorizontal: (0, rn_ui_1.dp)(10), padding: (0, rn_ui_1.dp)(9) }}>
+                        <rn_ui_1.CaihIcon name="picker-add" size={(0, rn_ui_1.dp)(19)} color={'#f6f6f6'}/>
+                    </react_native_1.TouchableOpacity>
+                </rn_ui_1.Popover>),
+        });
+    }, [t, navigation, connectStatus]);
+    const handleSearch = () => {
+        navigation.navigate('Search');
+    };
+    const onPressCard = (conversation) => __awaiter(void 0, void 0, void 0, function* () {
+        setPopoverVisible(false);
+        try {
+            // 设置更新已读数量
+            const imManager = (0, init_1.getImManager)();
+            yield imManager.store.dispatch(im_base_1.ConversationActions.initConversation(imManager, conversation));
+            navigation.navigate('MessageList');
+        }
+        catch (e) {
+            console.log('e: ', e);
+        }
+    });
+    const onLongPressCard = (conversation, nativeEvent) => {
+        react_native_1.Vibration.vibrate(10);
+        setPopoverVisible(true);
+        setNativeEvent(nativeEvent);
+        setConversation(conversation);
+    };
+    const listHeaderComponent = () => (<>
+            <rn_ui_1.SearchBar onSearch={handleSearch} style={styles.searchBar}/>
+            <react_native_1.View style={styles.line}/>
+            {connectStatus === im_base_1.ConnectStatus.CONNECT_ERROR && (<>
+                    <NetworkUnconnected_1.default />
+                    <react_native_1.View style={styles.line}/>
+                </>)}
+            {/*{TenantConfig.config.showOrgChat && <OrgGroupBar onPressOrgGroupBar={onPressOrgGroupBar} />}*/}
+            <react_native_1.View style={styles.line}/>
+        </>);
+    const listFooterComponent = () => <react_native_1.View style={styles.line}/>;
+    const keyExtractor = (item) => item.id;
+    const renderItem = ({ item }) => {
+        return (
+        // @ts-ignore
+        <ConversationCard_1.default selected={item.id === (conversation === null || conversation === void 0 ? void 0 : conversation.id)} conversation={item} onPressCard={onPressCard} onLongPressCard={onLongPressCard} status={onlineMap[item.id]}/>);
+    };
+    const itemSeparatorComponent = ({ leadingItem }) => {
+        for (let i = 0; i < conversations.length; i++) {
+            if (conversations[i].enableTop === 'off') {
+                break;
+            }
+            if (leadingItem.id === conversations[i].id && conversations[i].enableTop === 'on') {
+                return (<react_native_1.View style={styles.separatorBg}>
+                        <react_native_1.View style={styles.separator}/>
+                    </react_native_1.View>);
+            }
+        }
+        return <react_native_1.View style={styles.separator}/>;
+    };
+    const getItemLayout = (_, index) => ({
+        length: (0, rn_ui_1.dp)(81),
+        offset: (0, rn_ui_1.dp)(81) * index + (0, rn_ui_1.dp)(57),
+        index,
+    });
+    return (<react_native_1.View style={{ flex: 1 }}>
+            <react_native_1.FlatList contentContainerStyle={styles.contentContainerStyle} keyboardShouldPersistTaps={'handled'} data={conversations} ListHeaderComponent={listHeaderComponent} ListFooterComponent={listFooterComponent} ItemSeparatorComponent={itemSeparatorComponent} getItemLayout={getItemLayout} renderItem={renderItem} numColumns={1} keyExtractor={keyExtractor}/>
+            <ConversationOption_1.default conversation={conversation} nativeEvent={nativeEvent} visible={popoverVisible} onClose={() => {
+            setPopoverVisible(false);
+            setConversation(undefined);
+        }}/>
+        </react_native_1.View>);
+};
+const styles = react_native_1.StyleSheet.create({
+    contentContainerStyle: {
+        backgroundColor: '#fff',
+    },
+    searchBar: {
+        marginHorizontal: (0, rn_ui_1.dp)(10),
+        marginVertical: (0, rn_ui_1.dp)(10),
+    },
+    line: {
+        height: (0, rn_ui_1.dp)(1),
+        backgroundColor: '#ececec',
+    },
+    separator: {
+        marginLeft: (0, rn_ui_1.dp)(80),
+        height: (0, rn_ui_1.dp)(1),
+        backgroundColor: '#ececec',
+    },
+    separatorBg: {
+        backgroundColor: '#f2f2f2',
+    },
+    backButton: {
+        backgroundColor: '#ddd',
+        height: (0, rn_ui_1.dp)(50),
+        width: (0, rn_ui_1.dp)(50),
+        borderRadius: (0, rn_ui_1.dp)(25),
+        opacity: 0.5,
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'absolute',
+        bottom: (0, rn_ui_1.dp)(15),
+        right: (0, rn_ui_1.dp)(15),
+    },
+});
+exports.default = List;

package/dist/pages/conversation/components/ConversationCard.d.ts

@@ -0,0 +1,12 @@
+import { IConversation } from '@smart-link/im-base';
+import React from 'react';
+import { NativeTouchEvent } from 'react-native';
+declare const ConversationCard: React.NamedExoticComponent<ConversationCardProps>;
+export interface ConversationCardProps {
+    status?: 'online' | 'offline';
+    selected?: boolean;
+    conversation: IConversation;
+    onPressCard?: (conversation: IConversation) => void;
+    onLongPressCard?: (conversation: IConversation, event: NativeTouchEvent) => void;
+}
+export default ConversationCard;

package/dist/pages/conversation/components/ConversationCard.js

@@ -0,0 +1,142 @@
+"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 im_base_1 = require("@smart-link/im-base");
+const rn_ui_1 = require("@smart-link/rn-ui");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const FontAwesome5_1 = __importDefault(require("react-native-vector-icons/FontAwesome5"));
+const MaterialIcons_1 = __importDefault(require("react-native-vector-icons/MaterialIcons"));
+const ChatAvatar_1 = __importDefault(require("../../../components/ChatAvatar/ChatAvatar"));
+const useFormatMsgTime_1 = __importDefault(require("../../../hooks/useFormatMsgTime"));
+const useTranslation_1 = __importDefault(require("../../../hooks/useTranslation"));
+const ConversationCard = (0, react_1.memo)(props => {
+    const { status, selected, conversation, onPressCard, onLongPressCard } = props;
+    const { t } = (0, useTranslation_1.default)();
+    const { id, type, avatars, name, text, draftText, errorText, enableNoDisturb, enableTop, tipsList, time, unreadCount } = conversation;
+    const enableTopStyles = enableTop === 'on' ? styles.enableTop : null;
+    const showPoint = enableNoDisturb === 'on' && unreadCount > 0;
+    const countText = showPoint && unreadCount > 0 ? t('unreadCount', { unreadCount }) : '';
+    const content = (0, im_base_1.getConversationContent)(text, errorText, draftText, tipsList, countText, t);
+    const contentStyles = content.tips ? styles.contentRedStyles : null;
+    const formatTime = (0, useFormatMsgTime_1.default)(time, true);
+    return (<react_native_1.TouchableOpacity activeOpacity={0.5} style={[styles.card, enableTopStyles, selected && styles.selected]} onPress={() => {
+            onPressCard && onPressCard(conversation);
+        }} onLongPress={({ nativeEvent }) => {
+            onLongPressCard && onLongPressCard(conversation, nativeEvent);
+        }}>
+            <react_native_1.View style={{ height: (0, rn_ui_1.dp)(50), width: (0, rn_ui_1.dp)(50), marginRight: (0, rn_ui_1.dp)(16) }}>
+                <rn_ui_1.Badge text={unreadCount} dot={showPoint}>
+                    <ChatAvatar_1.default disabled type={type} id={id} size={(0, rn_ui_1.dp)(48)} name={name} url={avatars}/>
+                </rn_ui_1.Badge>
+                {status && <react_native_1.View style={styles.status}>
+                    <MaterialIcons_1.default size={(0, rn_ui_1.dp)(14)} color={status === 'online' ? '#4caf50' : '#616161'} name={status === 'online' ? 'check-circle' : 'not-interested'}/>
+                </react_native_1.View>}
+            </react_native_1.View>
+
+            <react_native_1.View style={{ flexDirection: 'column', flex: 1 }}>
+                <react_native_1.View style={styles.swipe}>
+                    <react_native_1.Text style={styles.name} numberOfLines={1}>
+                        {name}
+                    </react_native_1.Text>
+                    <react_native_1.Text style={styles.time}>{formatTime}</react_native_1.Text>
+                </react_native_1.View>
+
+                <react_native_1.View style={styles.row}>
+                    <react_native_1.Text style={styles.message} numberOfLines={1}>
+                        <react_native_1.Text style={contentStyles}>{content.tips}</react_native_1.Text>
+                        {content.text}
+                    </react_native_1.Text>
+                    {enableNoDisturb === 'on' && (<FontAwesome5_1.default name={'bell-slash'} size={(0, rn_ui_1.dp)(12)} color={'#999'} style={styles.enableNoDisturb}/>)}
+                    {enableTop === 'on' && (<MaterialIcons_1.default name={'push-pin'} size={(0, rn_ui_1.dp)(15)} color={'#999'} style={styles.enableNoDisturb}/>)}
+                </react_native_1.View>
+            </react_native_1.View>
+        </react_native_1.TouchableOpacity>);
+});
+const styles = react_native_1.StyleSheet.create({
+    card: {
+        height: (0, rn_ui_1.dp)(80),
+        padding: (0, rn_ui_1.dp)(16),
+        display: 'flex',
+        flexDirection: 'row',
+    },
+    selected: {
+        backgroundColor: '#f1f1f1',
+    },
+    enableTop: {
+        backgroundColor: '#f2f2f2',
+        borderColor: '#e9e9e9',
+    },
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    name: {
+        fontSize: (0, rn_ui_1.dp)(15),
+        fontWeight: '500',
+        color: '#333333',
+        flex: 1,
+    },
+    time: {
+        fontSize: (0, rn_ui_1.dp)(12),
+        color: '#999999',
+    },
+    message: {
+        fontSize: (0, rn_ui_1.dp)(13),
+        color: '#999999',
+        flex: 1,
+    },
+    enableNoDisturb: {
+        color: '#999999',
+    },
+    contentRedStyles: {
+        color: '#ff4949',
+    },
+    swipe: {
+        flex: 1,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    swipeDel: {
+        justifyContent: 'center',
+        width: (0, rn_ui_1.dp)(75),
+        backgroundColor: '#ff4949',
+    },
+    swipeDelText: {
+        color: '#FFF',
+    },
+    status: {
+        position: 'absolute',
+        right: 2,
+        bottom: 2,
+        backgroundColor: '#fff',
+        borderRadius: (0, rn_ui_1.dp)(10),
+    }
+});
+exports.default = ConversationCard;

package/dist/pages/conversation/components/ConversationOption.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { NativeTouchEvent } from 'react-native';
+import { IConversation } from '@smart-link/im-base';
+type ConversationOptionProps = {
+    conversation?: IConversation;
+    nativeEvent?: NativeTouchEvent;
+    visible: boolean;
+    onClose: () => void;
+};
+declare const _default: React.MemoExoticComponent<({ conversation, nativeEvent, onClose, visible, }: ConversationOptionProps) => React.JSX.Element>;
+export default _default;

package/dist/pages/conversation/components/ConversationOption.js

@@ -0,0 +1,99 @@
+"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 useTranslation_1 = __importDefault(require("../../../hooks/useTranslation"));
+const init_1 = require("../../../init");
+const PopoverWrapper_1 = __importDefault(require("../../../components/PopoverWrapper"));
+const renderMenuItem = (title, onPress) => <react_native_1.TouchableOpacity activeOpacity={0.5} onPress={onPress}>
+    <react_native_1.Text style={styles.text}>{title}</react_native_1.Text>
+</react_native_1.TouchableOpacity>;
+const ConversationOption = ({ conversation, nativeEvent, onClose, visible, }) => {
+    const { t } = (0, useTranslation_1.default)();
+    let read, disturb, top;
+    if (conversation === null || conversation === void 0 ? void 0 : conversation.unreadCount) {
+        read = renderMenuItem(t('markRead'), () => {
+            (0, init_1.getImManager)().markRead(conversation);
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        });
+    }
+    else {
+        read = renderMenuItem(t('markUnread'), () => {
+            (0, init_1.getImManager)().markUnread(conversation);
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        });
+    }
+    if ((conversation === null || conversation === void 0 ? void 0 : conversation.enableNoDisturb) === 'off') {
+        disturb = renderMenuItem(t('chatNoDisturbOn'), () => {
+            (0, init_1.getImManager)().noDisturbOn(conversation);
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        });
+    }
+    else {
+        disturb = renderMenuItem(t('chatNoDisturbOff'), () => {
+            (0, init_1.getImManager)().noDisturbOff(conversation);
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        });
+    }
+    if ((conversation === null || conversation === void 0 ? void 0 : conversation.enableTop) === 'off') {
+        top = renderMenuItem(t('chatTopOn'), () => {
+            (0, init_1.getImManager)().topOn(conversation);
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        });
+    }
+    else {
+        top = renderMenuItem(t('chatTopOff'), () => {
+            (0, init_1.getImManager)().topOff(conversation);
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        });
+    }
+    const del = renderMenuItem(t('deleteChat'), () => {
+        (0, init_1.getImManager)().deleteConversation(conversation);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    });
+    return (<PopoverWrapper_1.default showArrow={false} measureTarget={false} visible={visible} onClose={onClose} nativeEvent={nativeEvent}>
+                {read}
+                <rn_ui_1.Line />
+                {disturb}
+                <rn_ui_1.Line />
+                {top}
+                <rn_ui_1.Line />
+                {del}
+        </PopoverWrapper_1.default>);
+};
+exports.default = (0, react_1.memo)(ConversationOption);
+const styles = react_native_1.StyleSheet.create({
+    text: {
+        color: '#555',
+        fontSize: (0, rn_ui_1.dp)(15),
+        paddingHorizontal: (0, rn_ui_1.dp)(12),
+        paddingVertical: (0, rn_ui_1.dp)(12),
+    },
+});

package/dist/pages/conversation/conversation.routes.d.ts

@@ -0,0 +1,2 @@
+import { RouteConfig } from '../../pages';
+export declare const conversationRoutes: readonly RouteConfig[];