@smart-link/rn-im 1.0.1

package/dist/pages/message/components/TextMixQuoteMessage.js

@@ -0,0 +1,74 @@
+"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 TextMixQuote_1 = require("./TextMixQuote");
+const react_native_1 = require("react-native");
+const TextMixMessage_1 = __importDefault(require("./TextMixMessage"));
+const im_base_1 = require("@smart-link/im-base");
+const { TEXT, VOICE, VIDEO, PICTURE, FILE, MULTIPLE } = im_base_1.PayloadType;
+const TextMixQuoteMessage = (0, react_1.memo)(props => {
+    const { text, quote, textStyle, quoteStyle, quoteBgColor, onLongPressPhone, onLongPressURL, onPressQuote } = props;
+    let quotePayloadType;
+    let quoteMessageSeq;
+    const haveQuote = quote && Object.keys(quote).length > 0;
+    if (haveQuote) {
+        quotePayloadType = quote.quoteMessage ? quote.quoteMessage.payloadType : TEXT;
+        quoteMessageSeq = quote.quoteMessage ? quote.quoteMessage.messageSeq : null;
+    }
+    return (<>
+            {haveQuote && (<>
+                    {quotePayloadType === TEXT && (<TextMixQuote_1.QuoteTextMix quoteTitle={quote.quoteTitle} quoteText={quote.quoteText} color={quoteBgColor} quoteStyle={quoteStyle} textStyle={textStyle} onLongPressPhone={onLongPressPhone} onLongPressURL={onLongPressURL} onPressQuote={() => {
+                    onPressQuote === null || onPressQuote === void 0 ? void 0 : onPressQuote(quoteMessageSeq);
+                }}/>)}
+
+                    {quotePayloadType === PICTURE && (<TextMixQuote_1.QuotePicture quoteTitle={quote.quoteTitle} quoteMessage={quote.quoteMessage} quoteStyle={quoteStyle} color={quoteBgColor} textStyle={textStyle} backgroundColor={quoteBgColor} borderColor={quoteBgColor} onPressQuote={() => {
+                    onPressQuote && onPressQuote(quoteMessageSeq);
+                }}/>)}
+
+                    {quotePayloadType === VIDEO && (<TextMixQuote_1.QuoteVideo quoteTitle={quote.quoteTitle} quoteMessage={quote.quoteMessage} quoteStyle={quoteStyle} color={quoteBgColor} textStyle={textStyle} backgroundColor={quoteBgColor} borderColor={quoteBgColor} onPressQuote={() => {
+                    onPressQuote && onPressQuote(quoteMessageSeq);
+                }}/>)}
+
+                    {quotePayloadType === FILE && (<TextMixQuote_1.QuoteFile quoteTitle={quote.quoteTitle} quoteMessage={quote.quoteMessage} color={quoteBgColor} textStyle={textStyle} onPressQuote={() => {
+                    onPressQuote && onPressQuote(quoteMessageSeq);
+                }}/>)}
+
+                    {quotePayloadType === VOICE && (<TextMixQuote_1.QuoteVoice quoteTitle={quote.quoteTitle} quoteMessage={quote.quoteMessage} color={quoteBgColor} textStyle={textStyle} onPressQuote={() => {
+                    onPressQuote && onPressQuote(quoteMessageSeq);
+                }}/>)}
+                    {quotePayloadType === MULTIPLE && (<TextMixQuote_1.QuoteMultiple quoteTitle={quote.quoteTitle} quoteMessage={quote.quoteMessage} color={quoteBgColor} textStyle={textStyle} onPressQuote={() => {
+                    onPressQuote && onPressQuote(quoteMessageSeq);
+                }}/>)}
+                    <react_native_1.View style={{ height: 10 }}/>
+                </>)}
+
+            <TextMixMessage_1.default text={text} textStyle={textStyle} onLongPressPhone={onLongPressPhone} onLongPressURL={onLongPressURL}/>
+        </>);
+});
+exports.default = TextMixQuoteMessage;

package/dist/pages/message/components/UploadProgress.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type UploadProgressProps = {
+    show: boolean;
+    width: number;
+    sendSize: number;
+    totalSize: number;
+};
+declare const _default: React.MemoExoticComponent<({ show, sendSize, totalSize, width }: UploadProgressProps) => React.JSX.Element | null>;
+export default _default;

package/dist/pages/message/components/UploadProgress.js

@@ -0,0 +1,51 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const rn_ui_1 = require("@smart-link/rn-ui");
+const react_native_progress_1 = require("react-native-progress");
+const react_native_1 = require("react-native");
+const file_1 = require("../../../utils/file");
+const UploadProgress = ({ show, sendSize, totalSize, width }) => {
+    if (!show) {
+        return null;
+    }
+    if (!totalSize || totalSize === 0) {
+        return null;
+    }
+    const progress = sendSize / totalSize;
+    return (<react_native_1.View>
+            <react_native_progress_1.Bar progress={progress} width={width} height={(0, rn_ui_1.dp)(3)} color={'#999'} borderRadius={(0, rn_ui_1.dp)(1)}/>
+            <react_native_1.Text style={styles.rate}>{(0, file_1.numberToFileSize)(sendSize) + ' / ' + (0, file_1.numberToFileSize)(totalSize)}</react_native_1.Text>
+        </react_native_1.View>);
+};
+const styles = react_native_1.StyleSheet.create({
+    rate: {
+        alignSelf: 'flex-end',
+        fontSize: (0, rn_ui_1.dp)(10),
+        color: '#999'
+    }
+});
+exports.default = (0, react_1.memo)(UploadProgress);

package/dist/pages/message/components/messageBar/EmojiPanel.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type EmojiPanelProps = {
+    onCheck: (emoji: string) => void;
+    onBackspace: () => void;
+};
+export type EmojiPanelMethods = {
+    show: (height: number) => void;
+    hide: () => void;
+};
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<EmojiPanelProps & React.RefAttributes<EmojiPanelMethods>>>;
+export default _default;

package/dist/pages/message/components/messageBar/EmojiPanel.js

@@ -0,0 +1,101 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const emoji_1 = require("../../../../utils/emoji");
+const Icons_1 = require("./Icons");
+const emojis = Array.from(new Set([...emoji_1.face]));
+const EMOJI_SIZE = (react_native_1.Dimensions.get('screen').width - 20) / 8;
+const keyExtractor = (item) => item;
+const EmojiPanel = (0, react_1.forwardRef)(({ onCheck, onBackspace }, ref) => {
+    const visible = (0, react_1.useRef)(false);
+    const [, forceUpdate] = (0, react_1.useState)({});
+    const timer = (0, react_1.useRef)(null);
+    const start = (0, react_1.useRef)(false);
+    //通过动画设置表情面板高度
+    const [heightAnim] = (0, react_1.useState)(new react_native_1.Animated.Value(0));
+    const renderItem = ({ item }) => (<react_native_1.TouchableOpacity style={{
+            width: EMOJI_SIZE,
+            height: EMOJI_SIZE,
+            alignItems: 'center',
+        }} onPress={() => {
+            onCheck(item);
+        }}>
+            <react_native_1.Text style={{ fontSize: 22, color: '#333' }}>{item}</react_native_1.Text>
+        </react_native_1.TouchableOpacity>);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        show: (height) => {
+            visible.current = true;
+            heightAnim.setValue(height);
+            forceUpdate({});
+        },
+        hide: () => {
+            visible.current = false;
+            heightAnim.setValue(0);
+            forceUpdate({});
+        },
+    }), []);
+    return (<react_native_1.Animated.View style={{
+            height: heightAnim,
+            position: 'relative',
+            flexDirection: 'column',
+            paddingBottom: visible.current ? 20 : 0,
+        }} pointerEvents='auto'>
+            <react_native_1.FlatList numColumns={8} initialNumToRender={80} data={emojis} keyExtractor={keyExtractor} contentContainerStyle={{
+            paddingHorizontal: 10,
+            paddingBottom: 50,
+        }} pointerEvents='auto' keyboardShouldPersistTaps={'handled'} renderItem={renderItem} scrollEnabled/>
+            {visible.current && <react_native_1.View style={{
+                position: 'absolute',
+                height: EMOJI_SIZE,
+                width: 80,
+                backgroundColor: '#fff',
+                bottom: 20,
+                right: 18,
+                borderRadius: 6,
+                elevation: 1,
+            }}>
+                <react_native_1.TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }} onPressIn={() => {
+                console.log('onPressIn: backspace');
+                onBackspace();
+                start.current = true;
+                timer.current = setInterval(() => {
+                    if (start.current) {
+                        console.log('onPressIn: backspace');
+                        onBackspace();
+                    }
+                }, 160);
+            }} onPressOut={() => {
+                console.log('onPressOut: backspace');
+                start.current = false;
+                clearInterval(timer.current);
+            }}>
+                    <Icons_1.DeleteSvg />
+                </react_native_1.TouchableOpacity>
+            </react_native_1.View>}
+        </react_native_1.Animated.View>);
+});
+exports.default = (0, react_1.memo)(EmojiPanel);

package/dist/pages/message/components/messageBar/Icons.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+type IconProps = {
+    size?: number;
+    color?: string;
+};
+export declare const VoiceSvg: () => React.JSX.Element;
+export declare const KeyboardSvg: () => React.JSX.Element;
+export declare const EmojiSvg: () => React.JSX.Element;
+export declare const OptionSvg: () => React.JSX.Element;
+export declare const DeleteSvg: () => React.JSX.Element;
+export declare const PhotosIcon: (props: IconProps) => React.JSX.Element;
+export declare const ShootingIcon: (props: IconProps) => React.JSX.Element;
+export declare const TelPhoneIcon: (props: IconProps) => React.JSX.Element;
+export declare const VideoIcon: (props: IconProps) => React.JSX.Element;
+export declare const FileIcon: (props: IconProps) => React.JSX.Element;
+export declare const CollectionIcon: (props: IconProps) => React.JSX.Element;
+export declare const UserIcon: (props: IconProps) => React.JSX.Element;
+export {};

package/dist/pages/message/components/messageBar/Icons.js

@@ -0,0 +1,88 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserIcon = exports.CollectionIcon = exports.FileIcon = exports.VideoIcon = exports.TelPhoneIcon = exports.ShootingIcon = exports.PhotosIcon = exports.DeleteSvg = exports.OptionSvg = exports.EmojiSvg = exports.KeyboardSvg = exports.VoiceSvg = void 0;
+const rn_ui_1 = require("@smart-link/rn-ui");
+const react_1 = __importDefault(require("react"));
+const react_native_svg_1 = require("react-native-svg");
+const VoiceSvg = () => (<react_native_svg_1.Svg viewBox="0 0 1024 1024" width={(0, rn_ui_1.dp)(32)} height={(0, rn_ui_1.dp)(32)}>
+        <react_native_svg_1.Path d="M512.5 54C765.723 54 971 259.277 971 512.5S765.723 971 512.5 971 54 765.723 54 512.5 259.277 54 512.5 54z m0 64C294.624 118 118 294.624 118 512.5S294.624 907 512.5 907 907 730.376 907 512.5 730.376 118 512.5 118z m84.457 158.623c61.57 61.569 96.816 144.901 96.816 233.734s-35.247 172.165-96.816 233.734c-12.497 12.497-32.758 12.497-45.255 0-12.496-12.497-12.496-32.758 0-45.255 49.686-49.686 78.07-116.795 78.07-188.48 0-71.684-28.384-138.793-78.07-188.479-12.496-12.496-12.496-32.758 0-45.254 12.497-12.497 32.758-12.497 45.255 0zM491.405 382.175C525.16 415.93 544.5 461.653 544.5 510.357c0 48.704-19.34 94.426-53.096 128.18-12.497 12.497-32.759 12.496-45.255-0.001-12.496-12.498-12.495-32.759 0.002-45.255 21.872-21.87 34.349-51.369 34.349-82.924 0-31.555-12.477-61.054-34.35-82.927-12.497-12.497-12.497-32.758 0-45.255s32.758-12.497 45.255 0z m-128.18 85.53c23.556 0 42.65 19.094 42.65 42.65 0 23.555-19.094 42.65-42.65 42.65-23.556 0-42.65-19.095-42.65-42.65 0-23.556 19.094-42.65 42.65-42.65z"/>
+    </react_native_svg_1.Svg>);
+exports.VoiceSvg = VoiceSvg;
+const KeyboardSvg = () => (<react_native_svg_1.Svg viewBox="0 0 1024 1024" width={(0, rn_ui_1.dp)(32)} height={(0, rn_ui_1.dp)(32)}>
+        <react_native_svg_1.Path d="M736 352c-17.696 0-32 14.336-32 32l0 96-96 0c-17.696 0-32 14.336-32 32s14.304 32 32 32l128 0c17.696 0 32-14.336 32-32l0-128C768 366.336 753.696 352 736 352zM736 672 288 672c-17.664 0-32-14.304-32-32s14.336-32 32-32l448 0c17.696 0 32 14.304 32 32S753.696 672 736 672zM480 544l-32 0c-17.664 0-32-14.336-32-32s14.336-32 32-32l32 0c17.664 0 32 14.336 32 32S497.664 544 480 544zM320 544 288 544c-17.664 0-32-14.336-32-32s14.336-32 32-32l32 0c17.664 0 32 14.336 32 32S337.664 544 320 544zM480 416l-32 0c-17.664 0-32-14.336-32-32s14.336-32 32-32l32 0c17.664 0 32 14.336 32 32S497.664 416 480 416zM640 416l-32 0c-17.696 0-32-14.336-32-32s14.304-32 32-32l32 0c17.696 0 32 14.336 32 32S657.696 416 640 416zM320 416 288 416c-17.664 0-32-14.336-32-32s14.336-32 32-32l32 0c17.664 0 32 14.336 32 32S337.664 416 320 416zM512.128 957.344c-247.04 0-448-200.96-448-448s200.96-448 448-448 448 200.96 448 448S759.168 957.344 512.128 957.344zM512.128 125.344c-211.744 0-384 172.256-384 384 0 211.744 172.256 384 384 384 211.744 0 384-172.256 384-384C896.128 297.6 723.872 125.344 512.128 125.344z"/>
+    </react_native_svg_1.Svg>);
+exports.KeyboardSvg = KeyboardSvg;
+const EmojiSvg = () => (<react_native_svg_1.Svg viewBox="0 0 1024 1024" width={(0, rn_ui_1.dp)(32)} height={(0, rn_ui_1.dp)(32)}>
+        <react_native_svg_1.Path d="M510.944 960c-247.04 0-448-200.96-448-448s200.992-448 448-448c247.008 0 448 200.96 448 448S757.984 960 510.944 960zM510.944 128c-211.744 0-384 172.256-384 384 0 211.744 172.256 384 384 384 211.744 0 384-172.256 384-384C894.944 300.256 722.688 128 510.944 128zM512 773.344c-89.184 0-171.904-40.32-226.912-110.624-10.88-13.92-8.448-34.016 5.472-44.896 13.888-10.912 34.016-8.48 44.928 5.472 42.784 54.688 107.136 86.048 176.512 86.048 70.112 0 134.88-31.904 177.664-87.552 10.784-14.016 30.848-16.672 44.864-5.888 14.016 10.784 16.672 30.88 5.888 44.864C685.408 732.32 602.144 773.344 512 773.344zM368 515.2c-26.528 0-48-21.472-48-48l0-64c0-26.528 21.472-48 48-48s48 21.472 48 48l0 64C416 493.696 394.496 515.2 368 515.2zM656 515.2c-26.496 0-48-21.472-48-48l0-64c0-26.528 21.504-48 48-48s48 21.472 48 48l0 64C704 493.696 682.496 515.2 656 515.2z"/>
+    </react_native_svg_1.Svg>);
+exports.EmojiSvg = EmojiSvg;
+const OptionSvg = () => (<react_native_svg_1.Svg viewBox="0 0 1024 1024" width={(0, rn_ui_1.dp)(32)} height={(0, rn_ui_1.dp)(32)}>
+        <react_native_svg_1.Path d="M512 128c211.2 0 384 172.8 384 384s-172.8 384-384 384-384-172.8-384-384 172.8-384 384-384m0-64C262.4 64 64 262.4 64 512s198.4 448 448 448 448-198.4 448-448-198.4-448-448-448z"/>
+        <react_native_svg_1.Path d="M320 512m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z"/>
+        <react_native_svg_1.Path d="M704 512m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z"/>
+        <react_native_svg_1.Path d="M512 320m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z"/>
+        <react_native_svg_1.Path d="M512 704m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z"/>
+        <react_native_svg_1.Path d="M320 480h384v64H320z"/>
+        <react_native_svg_1.Path d="M480 320h64v384h-64z"/>
+    </react_native_svg_1.Svg>);
+exports.OptionSvg = OptionSvg;
+const DeleteSvg = () => (<react_native_svg_1.Svg fill={'#333'} viewBox="0 0 1024 1024" width={(0, rn_ui_1.dp)(24)} height={(0, rn_ui_1.dp)(24)}>
+        <react_native_svg_1.Path d="M896 896H341.333333a42.666667 42.666667 0 0 1-32-14.506667l-298.666666-341.333333a42.666667 42.666667 0 0 1 0-56.32l298.666666-341.333333A42.666667 42.666667 0 0 1 341.333333 128h554.666667a128 128 0 0 1 128 128v512a128 128 0 0 1-128 128zM360.533333 810.666667H896a42.666667 42.666667 0 0 0 42.666667-42.666667V256a42.666667 42.666667 0 0 0-42.666667-42.666667H360.533333l-261.12 298.666667z"/>
+        <react_native_svg_1.Path d="M512 682.666667a42.666667 42.666667 0 0 1-30.293333-12.373334 42.666667 42.666667 0 0 1 0-60.586666l256-256a42.666667 42.666667 0 0 1 60.586666 60.586666l-256 256A42.666667 42.666667 0 0 1 512 682.666667z"/>
+        <react_native_svg_1.Path d="M768 682.666667a42.666667 42.666667 0 0 1-30.293333-12.373334l-256-256a42.666667 42.666667 0 0 1 60.586666-60.586666l256 256a42.666667 42.666667 0 0 1 0 60.586666A42.666667 42.666667 0 0 1 768 682.666667z"/>
+    </react_native_svg_1.Svg>);
+exports.DeleteSvg = DeleteSvg;
+const PhotosIcon = (props) => {
+    const { size = 24, color = '#333' } = props;
+    return (<react_native_svg_1.Svg fill={color} width={(0, rn_ui_1.dp)(size)} height={(0, rn_ui_1.dp)(size)} viewBox="0 0 1024 1024">
+            <react_native_svg_1.Path d="M730.3 432.9c53.5 0 97-43.4 97-97 0-53.5-43.4-97-97-97-53.5 0-97 43.4-97 97s43.6 97 97 97zM900 109.7H108c-31.5 0-56.6 25.7-56.6 57.2v661.4c0 31.5 25 57.2 56.6 57.2h792c31.5 0 56.6-25.7 56.6-57.2V166.9c0-31.5-25.1-57.2-56.6-57.2zM691.8 509.1c-6.1-7.1-15.3-12.5-25.9-12.5-10.2 0-17.5 4.8-25.9 11.5L602.2 540c-7.8 5.6-14.2 9.5-23.3 9.5-8.8 0-16.6-3.2-22.2-8.2-2-1.9-5.6-5.2-8.8-8.2L439.2 415.6c-8-9.3-20.1-15.1-33.7-15.1-13.6 0-26.1 6.7-33.9 15.8L116.2 724.2V198c2-13.8 12.7-23.7 26.4-23.7h722.7c14 0 25.3 10.2 26.1 24.2l0.6 526-200.2-215.4z"></react_native_svg_1.Path>
+        </react_native_svg_1.Svg>);
+};
+exports.PhotosIcon = PhotosIcon;
+const ShootingIcon = (props) => {
+    const { size = 24, color = '#333' } = props;
+    return (<react_native_svg_1.Svg fill={color} width={(0, rn_ui_1.dp)(size)} height={(0, rn_ui_1.dp)(size)} viewBox="0 0 1024 1024">
+            <react_native_svg_1.Path d="M294.41 822.05c-53.11-9-95.48-49.27-107.16-101.85a681.035 681.035 0 0 1 0-295.52c11.69-52.58 54.05-92.85 107.16-101.85a1316.232 1316.232 0 0 1 439.84 0c53.11 9 95.48 49.27 107.16 101.85a681.035 681.035 0 0 1 0 295.52c-11.69 52.58-54.05 92.85-107.16 101.85a1316.232 1316.232 0 0 1-439.84 0z"></react_native_svg_1.Path>
+            <react_native_svg_1.Path d="M668 331.32c0-22.18-2.42-44.36-7.26-66.14-5.23-23.54-24.19-41.56-47.97-45.59a589.311 589.311 0 0 0-196.88 0c-23.77 4.03-42.74 22.05-47.97 45.59a304.887 304.887 0 0 0-7.26 66.14"></react_native_svg_1.Path>
+            <react_native_svg_1.Path d="M514.33 571.91m-139.27 0a139.27 139.27 0 1 0 278.54 0 139.27 139.27 0 1 0-278.54 0Z" fill="#FFFFFF"></react_native_svg_1.Path>
+        </react_native_svg_1.Svg>);
+};
+exports.ShootingIcon = ShootingIcon;
+const TelPhoneIcon = (props) => {
+    const { size = 24, color = '#333' } = props;
+    return (<react_native_svg_1.Svg fill={color} width={(0, rn_ui_1.dp)(size)} height={(0, rn_ui_1.dp)(size)} viewBox="0 0 1024 1024">
+            <react_native_svg_1.Path d="M585 584.9c-94 94-202.9 183.9-245.9 140.9-61.7-61.6-99.6-115.3-235.4-6.1s-31.5 182 28.2 241.7c68.9 68.8 325.6 3.7 579.4-250.1 253.7-253.8 319-510.5 250.1-579.4-59.7-59.7-132.4-164-241.6-28.1-109.2 135.8-55.5 173.7 6.1 235.4C768.8 382 679 490.9 585 584.9z"></react_native_svg_1.Path>
+        </react_native_svg_1.Svg>);
+};
+exports.TelPhoneIcon = TelPhoneIcon;
+const VideoIcon = (props) => {
+    const { size = 24, color = '#333' } = props;
+    return (<react_native_svg_1.Svg fill={color} width={(0, rn_ui_1.dp)(size)} height={(0, rn_ui_1.dp)(size)} viewBox="0 0 1024 1024">
+            <react_native_svg_1.Path d="M768 415.744q0 5.12-10.752 17.92t-23.04 30.208-23.04 37.888-10.752 41.984 10.752 41.472 23.04 36.352 23.04 27.136 10.752 13.824l0 107.52q0 17.408-12.8 39.424t-31.744 41.472-41.984 32.256-43.52 12.8l-508.928 0q-27.648 0-50.688-9.728t-40.448-27.136-27.136-40.96-9.728-51.2l0-441.344q0-20.48 9.216-42.496t26.112-40.448 39.936-30.72 50.688-12.288l508.928 0q27.648 0 51.712 9.728t41.984 26.624 28.16 40.448 10.24 50.176l0 89.088zM1086.464 319.488l0 467.968q0 22.528-11.776 39.936t-35.328 17.408q-8.192 0-20.992-6.144t-25.6-14.336-24.064-16.384-16.384-13.312q-13.312-11.264-40.448-38.912t-54.784-62.464-48.64-71.68-20.992-67.584 22.528-70.144 54.272-77.312 66.56-70.144 58.368-48.64q9.216-6.144 25.088-14.848t28.16-8.704q27.648 0 35.84 15.36t8.192 37.888l0 2.048z"></react_native_svg_1.Path>
+        </react_native_svg_1.Svg>);
+};
+exports.VideoIcon = VideoIcon;
+const FileIcon = (props) => {
+    const { size = 24, color = '#333' } = props;
+    return (<react_native_svg_1.Svg fill={color} width={(0, rn_ui_1.dp)(size)} height={(0, rn_ui_1.dp)(size)} viewBox="0 0 1024 1024">
+            <react_native_svg_1.Path d="M519.283382 163.91421l0 232.024447 232.315066 0L519.283382 163.91421zM490.341213 425.124374 490.341213 163.91421l0 0L257.879813 163.91421l0 696.170556 508.23935 0L766.119163 425.124374 490.341213 425.124374z"></react_native_svg_1.Path>
+        </react_native_svg_1.Svg>);
+};
+exports.FileIcon = FileIcon;
+const CollectionIcon = (props) => {
+    const { size = 24, color = '#333' } = props;
+    return (<react_native_svg_1.Svg fill={color} width={(0, rn_ui_1.dp)(size)} height={(0, rn_ui_1.dp)(size)} viewBox="0 0 1024 1024">
+            <react_native_svg_1.Path d="M832 128H192a64.19 64.19 0 0 0-64 64v640a64.19 64.19 0 0 0 64 64h640a64.19 64.19 0 0 0 64-64V192a64.19 64.19 0 0 0-64-64zM685.41 750.68L512 659.51l-173.41 91.17 33.12-193.1-140.3-136.75 193.88-28.17L512 217l86.71 175.69 193.88 28.17-140.3 136.72z"></react_native_svg_1.Path>
+        </react_native_svg_1.Svg>);
+};
+exports.CollectionIcon = CollectionIcon;
+const UserIcon = (props) => {
+    const { size = 24, color = '#333' } = props;
+    return (<react_native_svg_1.Svg fill={color} width={(0, rn_ui_1.dp)(size)} height={(0, rn_ui_1.dp)(size)} viewBox="0 0 1024 1024">
+            <react_native_svg_1.Path d="M525.973 511.844c106.044 0 192.026-86.011 192.026-192.026 0-106.077-85.982-192.026-192.026-192.026-106.048 0-192.029 85.949-192.029 192.026 0 106.015 85.981 192.026 192.029 192.026z m0 32.004c-176.745 0-320.077 140.853-320.077 317.63 0 12.563 0.937 34.773 2.344 34.773h635.402c1.406 0 2.344-22.21 2.344-34.774 0-176.777-143.272-317.629-320.013-317.629z"></react_native_svg_1.Path>
+        </react_native_svg_1.Svg>);
+};
+exports.UserIcon = UserIcon;

package/dist/pages/message/components/messageBar/MessageBar.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface MessageBarProps {
+    onKeyboardAt?: () => void;
+}
+export interface MessageBarMethods {
+    reset(): void;
+    focusTextInput(): void;
+    appendInputText(text: string): void;
+    setMessageText(text: string): void;
+}
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<MessageBarProps & React.RefAttributes<MessageBarMethods>>>;
+export default _default;

package/dist/pages/message/components/messageBar/MessageBar.js

@@ -0,0 +1,273 @@
+"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 rn_ui_1 = require("@smart-link/rn-ui");
+const ahooks_1 = require("ahooks");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const useImSelector_1 = require("../../../../hooks/useImSelector");
+const useTranslation_1 = __importDefault(require("../../../../hooks/useTranslation"));
+const init_1 = require("../../../../init");
+const EmojiPanel_1 = __importDefault(require("./EmojiPanel"));
+const Icons_1 = require("./Icons");
+const MessageInput_1 = __importDefault(require("./MessageInput"));
+const OptionPanel_1 = __importDefault(require("./OptionPanel"));
+const VoiceBar_1 = __importDefault(require("./VoiceBar"));
+const panel_slice_1 = require("../../../../slice/panel/panel.slice");
+const react_redux_1 = require("react-redux");
+const im_base_1 = require("@smart-link/im-base");
+const debounce_1 = __importDefault(require("lodash-es/debounce"));
+const MessageBar = (0, react_1.forwardRef)(({ onKeyboardAt }, ref) => {
+    const { t } = (0, useTranslation_1.default)();
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const debounceAt = (0, react_1.useRef)(null);
+    const inputRef = (0, react_1.useRef)(null);
+    const emojiPanelRef = (0, react_1.useRef)(null);
+    const optionPanelRef = (0, react_1.useRef)(null);
+    const lazy = (0, react_1.useRef)(false);
+    const tempText = (0, react_1.useRef)('');
+    const { currentConversation } = (0, useImSelector_1.useConversation)();
+    const { quote, messageText } = (0, useImSelector_1.useMessage)();
+    const [showSend, setShowSend] = (0, react_1.useState)(false);
+    const keyboardDuration = (0, react_1.useRef)(100);
+    const modeRef = (0, react_1.useRef)('text');
+    const [inputMode, setInputMode] = (0, react_1.useState)('text');
+    const keyboardHeight = (0, react_1.useRef)(240);
+    const handleChange = (0, react_1.useCallback)((text) => {
+        tempText.current = text;
+        if (text.length && !lazy.current) {
+            setShowSend(true);
+            lazy.current = true;
+        }
+        else if (!text.length) {
+            setShowSend(false);
+            lazy.current = false;
+        }
+        dispatch(im_base_1.MessageActions.setDraftText(text));
+    }, []);
+    const handleInsertEmoji = (0, react_1.useCallback)((emoji) => {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.insertEmoji(emoji);
+    }, []);
+    const switchVoice = (0, react_1.useCallback)(() => {
+        var _a, _b;
+        (_a = emojiPanelRef.current) === null || _a === void 0 ? void 0 : _a.hide();
+        (_b = optionPanelRef.current) === null || _b === void 0 ? void 0 : _b.hide();
+        react_native_1.Keyboard.dismiss();
+        modeRef.current = 'voice';
+        setInputMode('voice');
+        setShowSend(false);
+    }, []);
+    const switchKeyboardInputMode = (0, react_1.useCallback)(() => {
+        var _a, _b;
+        (_a = emojiPanelRef.current) === null || _a === void 0 ? void 0 : _a.hide();
+        (_b = optionPanelRef.current) === null || _b === void 0 ? void 0 : _b.hide();
+        let timeout = 0;
+        if (modeRef.current === 'voice') {
+            timeout = keyboardDuration.current;
+        }
+        modeRef.current = 'text';
+        setInputMode('text');
+        setTimeout(() => {
+            var _a, _b, _c;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setText(tempText.current || '');
+            if ((_b = tempText.current) === null || _b === void 0 ? void 0 : _b.length) {
+                setShowSend(true);
+            }
+            (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+        }, timeout);
+    }, []);
+    const switchEmojiInputMode = (0, react_1.useCallback)(() => {
+        modeRef.current = 'emoji';
+        setInputMode('emoji');
+        react_native_1.Keyboard.dismiss();
+        setTimeout(() => {
+            var _a, _b, _c;
+            (_a = optionPanelRef.current) === null || _a === void 0 ? void 0 : _a.hide();
+            (_b = emojiPanelRef.current) === null || _b === void 0 ? void 0 : _b.show(keyboardHeight.current);
+            (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.focusNoSoftKeyboard();
+        }, keyboardDuration.current);
+    }, []);
+    const switchOptionPanelMode = (0, ahooks_1.useMemoizedFn)(() => {
+        var _a;
+        if ((_a = optionPanelRef.current) === null || _a === void 0 ? void 0 : _a.getVisible()) {
+            switchKeyboardInputMode();
+            return;
+        }
+        setInputMode('option');
+        modeRef.current = 'option';
+        react_native_1.Keyboard.dismiss();
+        setTimeout(() => {
+            var _a, _b;
+            (_a = emojiPanelRef.current) === null || _a === void 0 ? void 0 : _a.hide();
+            (_b = optionPanelRef.current) === null || _b === void 0 ? void 0 : _b.show(keyboardHeight.current);
+        }, keyboardDuration.current);
+    });
+    const onKeyPress = (0, react_1.useCallback)((e) => {
+        if (e.nativeEvent.key === '@') {
+            if (!debounceAt.current) {
+                debounceAt.current = (0, debounce_1.default)(() => {
+                    onKeyboardAt && onKeyboardAt();
+                }, 500);
+                debounceAt.current();
+            }
+            else {
+                debounceAt.current();
+            }
+        }
+    }, []);
+    const handleSendText = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        const text = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.getText();
+        (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.clear();
+        tempText.current = '';
+        handleChange('');
+        react_native_1.InteractionManager.runAfterInteractions(() => {
+            imManager.scrollToLatest(true);
+        });
+        const imManager = (0, init_1.getImManager)();
+        yield imManager.handleSend(text);
+    }), [quote, handleChange, currentConversation]);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        reset: () => {
+            var _a, _b, _c;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            (_b = emojiPanelRef.current) === null || _b === void 0 ? void 0 : _b.hide();
+            (_c = optionPanelRef.current) === null || _c === void 0 ? void 0 : _c.hide();
+        },
+        focusTextInput: () => {
+            var _a, _b, _c;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = emojiPanelRef.current) === null || _b === void 0 ? void 0 : _b.hide();
+            (_c = optionPanelRef.current) === null || _c === void 0 ? void 0 : _c.hide();
+        },
+        appendInputText: (text) => {
+            var _a, _b, _c;
+            tempText.current += text;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setText(tempText.current);
+            setTimeout(() => {
+                var _a;
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, keyboardDuration.current);
+            (_b = emojiPanelRef.current) === null || _b === void 0 ? void 0 : _b.hide();
+            (_c = optionPanelRef.current) === null || _c === void 0 ? void 0 : _c.hide();
+        },
+        setMessageText: (text) => {
+            var _a, _b, _c;
+            tempText.current = text;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setText(tempText.current);
+            setTimeout(() => {
+                var _a;
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, keyboardDuration.current);
+            (_b = emojiPanelRef.current) === null || _b === void 0 ? void 0 : _b.hide();
+            (_c = optionPanelRef.current) === null || _c === void 0 ? void 0 : _c.hide();
+            dispatch(im_base_1.MessageActions.setDraftText(text));
+        }
+    }), []);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (currentConversation === null || currentConversation === void 0 ? void 0 : currentConversation.draftText) {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setText(currentConversation === null || currentConversation === void 0 ? void 0 : currentConversation.draftText);
+            tempText.current = currentConversation === null || currentConversation === void 0 ? void 0 : currentConversation.draftText;
+            setShowSend(true);
+            setTimeout(() => {
+                var _a;
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 150);
+        }
+        const keyboardDidShowListener = react_native_1.Keyboard.addListener('keyboardDidShow', event => {
+            var _a, _b;
+            keyboardHeight.current = Math.max(event.endCoordinates.height, 240);
+            keyboardDuration.current = event.duration;
+            (_a = emojiPanelRef.current) === null || _a === void 0 ? void 0 : _a.hide();
+            (_b = optionPanelRef.current) === null || _b === void 0 ? void 0 : _b.hide();
+        });
+        return () => {
+            keyboardDidShowListener.remove();
+        };
+    }, []);
+    return (<>
+            <react_native_1.View style={styles.root} onLayout={event => {
+            dispatch((0, panel_slice_1.setMessageBarHeight)(event.nativeEvent.layout.height));
+        }}>
+                <react_native_1.View style={styles.switchInput}>
+                    {inputMode === 'voice' ? (<react_native_1.TouchableOpacity onPress={switchKeyboardInputMode}>
+                            <Icons_1.KeyboardSvg />
+                        </react_native_1.TouchableOpacity>) : (<react_native_1.TouchableOpacity onPress={switchVoice}>
+                            <Icons_1.VoiceSvg />
+                        </react_native_1.TouchableOpacity>)}
+                </react_native_1.View>
+                {inputMode === 'voice' ? <VoiceBar_1.default /> : <MessageInput_1.default ref={inputRef} onChangeText={handleChange} onKeyPress={onKeyPress}/>}
+
+                <react_native_1.View style={[styles.switchInput, { paddingRight: 0 }]}>
+                    {inputMode === 'emoji' ? (<react_native_1.TouchableOpacity onPress={switchKeyboardInputMode}>
+                            <Icons_1.KeyboardSvg />
+                        </react_native_1.TouchableOpacity>) : (<react_native_1.TouchableOpacity onPress={switchEmojiInputMode}>
+                            <Icons_1.EmojiSvg />
+                        </react_native_1.TouchableOpacity>)}
+                </react_native_1.View>
+                <react_native_1.View style={styles.switchInput}>
+                    {showSend ? (<rn_ui_1.Button type="primary" size="s" onPress={handleSendText}>
+                            {t('sent')}
+                        </rn_ui_1.Button>) : (<react_native_1.TouchableOpacity onPress={switchOptionPanelMode}>
+                            <Icons_1.OptionSvg />
+                        </react_native_1.TouchableOpacity>)}
+                </react_native_1.View>
+            </react_native_1.View>
+            <EmojiPanel_1.default ref={emojiPanelRef} onCheck={handleInsertEmoji} onBackspace={() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.backspace(); }}/>
+            <OptionPanel_1.default ref={optionPanelRef}/>
+        </>);
+});
+const styles = react_native_1.StyleSheet.create({
+    root: {
+        justifyContent: 'flex-end',
+        flexDirection: 'row',
+        borderTopWidth: (0, rn_ui_1.dp)(1),
+        borderTopColor: '#e3e3e3',
+    },
+    switchInput: {
+        justifyContent: 'flex-end',
+        paddingVertical: (0, rn_ui_1.dp)(8),
+        paddingHorizontal: (0, rn_ui_1.dp)(8),
+    },
+    icon: {
+        width: (0, rn_ui_1.dp)(28),
+        height: (0, rn_ui_1.dp)(28),
+    },
+});
+exports.default = (0, react_1.memo)(MessageBar);