@smart-link/rn-im 1.0.22 → 1.0.24

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

@@ -1,52 +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 __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;
+import React, { forwardRef, memo, useImperativeHandle, useRef, useState } from 'react';
+import { View, Text, FlatList, Animated, TouchableOpacity, Dimensions } from 'react-native';
+import { face } from '../../../../utils/emoji';
+import { DeleteSvg } from './Icons';
+const emojis = Array.from(new Set([...face]));
+const EMOJI_SIZE = (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 EmojiPanel = forwardRef(({ onCheck, onBackspace }, ref) => {
+    const visible = useRef(false);
+    const [, forceUpdate] = useState({});
+    const timer = useRef(null);
+    const start = useRef(false);
     //通过动画设置表情面板高度
-    const [heightAnim] = (0, react_1.useState)(new react_native_1.Animated.Value(0));
-    const renderItem = ({ item }) => (<react_native_1.TouchableOpacity style={{
+    const [heightAnim] = useState(new Animated.Value(0));
+    const renderItem = ({ item }) => (<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, () => ({
+            <Text style={{ fontSize: 22, color: '#333' }}>{item}</Text>
+        </TouchableOpacity>);
+    useImperativeHandle(ref, () => ({
         show: (height) => {
             visible.current = true;
             heightAnim.setValue(height);
@@ -58,17 +33,17 @@ const EmojiPanel = (0, react_1.forwardRef)(({ onCheck, onBackspace }, ref) => {
             forceUpdate({});
         },
     }), []);
-    return (<react_native_1.Animated.View style={{
+    return (<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={{
+            <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={{
+            {visible.current && <View style={{
                 position: 'absolute',
                 height: EMOJI_SIZE,
                 width: 80,
@@ -78,7 +53,7 @@ const EmojiPanel = (0, react_1.forwardRef)(({ onCheck, onBackspace }, ref) => {
                 borderRadius: 6,
                 elevation: 1,
             }}>
-                <react_native_1.TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }} onPressIn={() => {
+                <TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }} onPressIn={() => {
                 console.log('onPressIn: backspace');
                 onBackspace();
                 start.current = true;
@@ -93,9 +68,9 @@ const EmojiPanel = (0, react_1.forwardRef)(({ onCheck, onBackspace }, ref) => {
                 start.current = false;
                 clearInterval(timer.current);
             }}>
-                    <Icons_1.DeleteSvg />
-                </react_native_1.TouchableOpacity>
-            </react_native_1.View>}
-        </react_native_1.Animated.View>);
+                    <DeleteSvg />
+                </TouchableOpacity>
+            </View>}
+        </Animated.View>);
 });
-exports.default = (0, react_1.memo)(EmojiPanel);
+export default memo(EmojiPanel);

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

@@ -1,88 +1,70 @@
-"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) => {
+import { dp } from '@smart-link/rn-ui';
+import React from 'react';
+import { Svg, Path } from 'react-native-svg';
+export const VoiceSvg = () => (<Svg viewBox="0 0 1024 1024" width={dp(32)} height={dp(32)}>
+        <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"/>
+    </Svg>);
+export const KeyboardSvg = () => (<Svg viewBox="0 0 1024 1024" width={dp(32)} height={dp(32)}>
+        <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"/>
+    </Svg>);
+export const EmojiSvg = () => (<Svg viewBox="0 0 1024 1024" width={dp(32)} height={dp(32)}>
+        <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"/>
+    </Svg>);
+export const OptionSvg = () => (<Svg viewBox="0 0 1024 1024" width={dp(32)} height={dp(32)}>
+        <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"/>
+        <Path d="M320 512m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z"/>
+        <Path d="M704 512m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z"/>
+        <Path d="M512 320m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z"/>
+        <Path d="M512 704m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z"/>
+        <Path d="M320 480h384v64H320z"/>
+        <Path d="M480 320h64v384h-64z"/>
+    </Svg>);
+export const DeleteSvg = () => (<Svg fill={'#333'} viewBox="0 0 1024 1024" width={dp(24)} height={dp(24)}>
+        <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"/>
+        <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"/>
+        <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"/>
+    </Svg>);
+export 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>);
+    return (<Svg fill={color} width={dp(size)} height={dp(size)} viewBox="0 0 1024 1024">
+            <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"></Path>
+        </Svg>);
 };
-exports.PhotosIcon = PhotosIcon;
-const ShootingIcon = (props) => {
+export 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>);
+    return (<Svg fill={color} width={dp(size)} height={dp(size)} viewBox="0 0 1024 1024">
+            <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"></Path>
+            <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"></Path>
+            <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"></Path>
+        </Svg>);
 };
-exports.ShootingIcon = ShootingIcon;
-const TelPhoneIcon = (props) => {
+export 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>);
+    return (<Svg fill={color} width={dp(size)} height={dp(size)} viewBox="0 0 1024 1024">
+            <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"></Path>
+        </Svg>);
 };
-exports.TelPhoneIcon = TelPhoneIcon;
-const VideoIcon = (props) => {
+export 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>);
+    return (<Svg fill={color} width={dp(size)} height={dp(size)} viewBox="0 0 1024 1024">
+            <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"></Path>
+        </Svg>);
 };
-exports.VideoIcon = VideoIcon;
-const FileIcon = (props) => {
+export 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>);
+    return (<Svg fill={color} width={dp(size)} height={dp(size)} viewBox="0 0 1024 1024">
+            <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"></Path>
+        </Svg>);
 };
-exports.FileIcon = FileIcon;
-const CollectionIcon = (props) => {
+export 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>);
+    return (<Svg fill={color} width={dp(size)} height={dp(size)} viewBox="0 0 1024 1024">
+            <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"></Path>
+        </Svg>);
 };
-exports.CollectionIcon = CollectionIcon;
-const UserIcon = (props) => {
+export 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>);
+    return (<Svg fill={color} width={dp(size)} height={dp(size)} viewBox="0 0 1024 1024">
+            <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"></Path>
+        </Svg>);
 };
-exports.UserIcon = UserIcon;

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

@@ -1,27 +1,3 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __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) {
@@ -31,43 +7,39 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         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) => {
+import { dp, Button, Modal } from '@smart-link/rn-ui';
+import { useMemoizedFn } from 'ahooks';
+import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { StyleSheet, View, TouchableOpacity, Keyboard } from 'react-native';
+import { useConversation, useMessage } from '../../../../hooks/useImSelector';
+import useTranslation from '../../../../hooks/useTranslation';
+import { getImManager } from '../../../../init';
+import EmojiPanel from './EmojiPanel';
+import { EmojiSvg, KeyboardSvg, OptionSvg, VoiceSvg } from './Icons';
+import MessageInput from './MessageInput';
+import OptionPanel from './OptionPanel';
+import VoiceBar from './VoiceBar';
+import { setMessageBarHeight } from '../../../../slice/panel/panel.slice';
+import { useDispatch } from 'react-redux';
+import { MessageActions } from '@smart-link/im-base';
+import debounce from 'lodash-es/debounce';
+const MessageBar = forwardRef(({ onKeyboardAt }, ref) => {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+    const debounceAt = useRef(null);
+    const inputRef = useRef(null);
+    const emojiPanelRef = useRef(null);
+    const optionPanelRef = useRef(null);
+    const lazy = useRef(false);
+    const tempText = useRef('');
+    const { currentConversation } = useConversation();
+    const { quote, messageText } = useMessage();
+    const [showSend, setShowSend] = useState(false);
+    const keyboardDuration = useRef(100);
+    const modeRef = useRef('text');
+    const [inputMode, setInputMode] = useState('text');
+    const keyboardHeight = useRef(240);
+    const handleChange = useCallback((text) => {
         tempText.current = text;
         // const trimTxt = text.trim();
         if (text.length && !lazy.current) {
@@ -78,22 +50,22 @@ const MessageBar = (0, react_1.forwardRef)(({ onKeyboardAt }, ref) => {
             setShowSend(false);
             lazy.current = false;
         }
-        dispatch(im_base_1.MessageActions.setDraftText(text));
+        dispatch(MessageActions.setDraftText(text));
     }, []);
-    const handleInsertEmoji = (0, react_1.useCallback)((emoji) => {
+    const handleInsertEmoji = useCallback((emoji) => {
         var _a;
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.insertEmoji(emoji);
     }, []);
-    const switchVoice = (0, react_1.useCallback)(() => {
+    const switchVoice = 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();
+        Keyboard.dismiss();
         modeRef.current = 'voice';
         setInputMode('voice');
         setShowSend(false);
     }, []);
-    const switchKeyboardInputMode = (0, react_1.useCallback)(() => {
+    const switchKeyboardInputMode = 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();
@@ -112,10 +84,10 @@ const MessageBar = (0, react_1.forwardRef)(({ onKeyboardAt }, ref) => {
             (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.focus();
         }, timeout);
     }, []);
-    const switchEmojiInputMode = (0, react_1.useCallback)(() => {
+    const switchEmojiInputMode = useCallback(() => {
         modeRef.current = 'emoji';
         setInputMode('emoji');
-        react_native_1.Keyboard.dismiss();
+        Keyboard.dismiss();
         setTimeout(() => {
             var _a, _b, _c;
             (_a = optionPanelRef.current) === null || _a === void 0 ? void 0 : _a.hide();
@@ -123,7 +95,7 @@ const MessageBar = (0, react_1.forwardRef)(({ onKeyboardAt }, ref) => {
             (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.focusNoSoftKeyboard();
         }, keyboardDuration.current);
     }, []);
-    const switchOptionPanelMode = (0, ahooks_1.useMemoizedFn)(() => {
+    const switchOptionPanelMode = useMemoizedFn(() => {
         var _a;
         if ((_a = optionPanelRef.current) === null || _a === void 0 ? void 0 : _a.getVisible()) {
             switchKeyboardInputMode();
@@ -131,17 +103,17 @@ const MessageBar = (0, react_1.forwardRef)(({ onKeyboardAt }, ref) => {
         }
         setInputMode('option');
         modeRef.current = 'option';
-        react_native_1.Keyboard.dismiss();
+        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) => {
+    const onKeyPress = useCallback((e) => {
         if (e.nativeEvent.key === '@') {
             if (!debounceAt.current) {
-                debounceAt.current = (0, debounce_1.default)(() => {
+                debounceAt.current = debounce(() => {
                     onKeyboardAt && onKeyboardAt();
                 }, 500);
                 debounceAt.current();
@@ -151,11 +123,11 @@ const MessageBar = (0, react_1.forwardRef)(({ onKeyboardAt }, ref) => {
             }
         }
     }, []);
-    const handleSendText = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
+    const handleSendText = 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();
         if (text.trim().length === 0) {
-            const { close } = rn_ui_1.Modal.open({
+            const { close } = Modal.open({
                 title: t('tips'),
                 content: t('cantSendEmptyMsg'),
                 footer: {
@@ -174,13 +146,10 @@ const MessageBar = (0, react_1.forwardRef)(({ onKeyboardAt }, ref) => {
         (_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)();
+        const imManager = getImManager();
         yield imManager.handleSend(text);
     }), [quote, handleChange, currentConversation]);
-    (0, react_1.useImperativeHandle)(ref, () => ({
+    useImperativeHandle(ref, () => ({
         reset: () => {
             var _a, _b, _c;
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
@@ -214,10 +183,10 @@ const MessageBar = (0, react_1.forwardRef)(({ onKeyboardAt }, ref) => {
             }, 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));
+            dispatch(MessageActions.setDraftText(text));
         }
     }), []);
-    (0, react_1.useEffect)(() => {
+    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);
@@ -228,7 +197,7 @@ const MessageBar = (0, react_1.forwardRef)(({ onKeyboardAt }, ref) => {
                 (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             }, 150);
         }
-        const keyboardDidShowListener = react_native_1.Keyboard.addListener('keyboardDidShow', event => {
+        const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', event => {
             var _a, _b;
             keyboardHeight.current = Math.max(event.endCoordinates.height, 240);
             keyboardDuration.current = event.duration;
@@ -240,52 +209,52 @@ const MessageBar = (0, react_1.forwardRef)(({ onKeyboardAt }, ref) => {
         };
     }, []);
     return (<>
-            <react_native_1.View style={styles.root} onLayout={event => {
-            dispatch((0, panel_slice_1.setMessageBarHeight)(event.nativeEvent.layout.height));
+            <View style={styles.root} onLayout={event => {
+            dispatch(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}/>}
+                <View style={styles.switchInput}>
+                    {inputMode === 'voice' ? (<TouchableOpacity onPress={switchKeyboardInputMode}>
+                            <KeyboardSvg />
+                        </TouchableOpacity>) : (<TouchableOpacity onPress={switchVoice}>
+                            <VoiceSvg />
+                        </TouchableOpacity>)}
+                </View>
+                {inputMode === 'voice' ? <VoiceBar /> : <MessageInput 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}>
+                <View style={[styles.switchInput, { paddingRight: 0 }]}>
+                    {inputMode === 'emoji' ? (<TouchableOpacity onPress={switchKeyboardInputMode}>
+                            <KeyboardSvg />
+                        </TouchableOpacity>) : (<TouchableOpacity onPress={switchEmojiInputMode}>
+                            <EmojiSvg />
+                        </TouchableOpacity>)}
+                </View>
+                <View style={styles.switchInput}>
+                    {showSend ? (<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}/>
+                        </Button>) : (<TouchableOpacity onPress={switchOptionPanelMode}>
+                            <OptionSvg />
+                        </TouchableOpacity>)}
+                </View>
+            </View>
+            <EmojiPanel ref={emojiPanelRef} onCheck={handleInsertEmoji} onBackspace={() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.backspace(); }}/>
+            <OptionPanel ref={optionPanelRef}/>
         </>);
 });
-const styles = react_native_1.StyleSheet.create({
+const styles = StyleSheet.create({
     root: {
         justifyContent: 'flex-end',
         flexDirection: 'row',
-        borderTopWidth: (0, rn_ui_1.dp)(1),
+        borderTopWidth: dp(1),
         borderTopColor: '#e3e3e3',
     },
     switchInput: {
         justifyContent: 'flex-end',
-        paddingVertical: (0, rn_ui_1.dp)(8),
-        paddingHorizontal: (0, rn_ui_1.dp)(8),
+        paddingVertical: dp(8),
+        paddingHorizontal: dp(8),
     },
     icon: {
-        width: (0, rn_ui_1.dp)(28),
-        height: (0, rn_ui_1.dp)(28),
+        width: dp(28),
+        height: dp(28),
     },
 });
-exports.default = (0, react_1.memo)(MessageBar);
+export default memo(MessageBar);