@sendbird/uikit-react-native 1.0.0-rc.1

package/lib/module/domain/groupChannel/component/GroupChannelInput/EditInput.js

@@ -0,0 +1,102 @@
+import React, { useEffect, useRef } from 'react';
+import { Platform, View } from 'react-native';
+import { Button, TextInput, createStyleSheet, useToast } from '@sendbird/uikit-react-native-foundation';
+import { useLocalization } from '../../../../hooks/useContext';
+const AUTO_FOCUS = Platform.select({
+  ios: false,
+  android: true,
+  default: false
+});
+
+const EditInput = _ref => {
+  let {
+    text,
+    setText,
+    editMessage,
+    setEditMessage,
+    onUpdateUserMessage
+  } = _ref;
+  const {
+    STRINGS
+  } = useLocalization();
+  const inputRef = useRef(null);
+  const toast = useToast();
+  useEffect(() => {
+    if (editMessage.isUserMessage()) {
+      setText(editMessage.message ?? '');
+      if (!AUTO_FOCUS) setTimeout(() => {
+        var _inputRef$current;
+
+        return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+      }, 500);
+    }
+  }, [editMessage]);
+
+  const onPressCancel = () => {
+    setEditMessage();
+    setText('');
+  };
+
+  const onPressSave = () => {
+    if (editMessage.isUserMessage()) {
+      onUpdateUserMessage(text, editMessage).catch(() => toast.show(STRINGS.TOAST.UPDATE_MSG_ERROR, 'error'));
+    }
+
+    setEditMessage();
+    setText('');
+  };
+
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.editInputContainer
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.inputWrapper
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    autoFocus: AUTO_FOCUS,
+    ref: inputRef,
+    multiline: true,
+    value: text,
+    onChangeText: setText,
+    style: styles.input,
+    placeholder: STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_ACTIVE
+  })), /*#__PURE__*/React.createElement(View, {
+    style: {
+      marginTop: 8,
+      flexDirection: 'row'
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: 'text',
+    onPress: onPressCancel
+  }, STRINGS.GROUP_CHANNEL.INPUT_EDIT_CANCEL), /*#__PURE__*/React.createElement(View, {
+    style: styles.space
+  }), /*#__PURE__*/React.createElement(Button, {
+    variant: 'contained',
+    onPress: onPressSave
+  }, STRINGS.GROUP_CHANNEL.INPUT_EDIT_OK)));
+};
+
+const styles = createStyleSheet({
+  editInputContainer: {
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    flexDirection: 'column',
+    alignItems: 'center'
+  },
+  input: {
+    flex: 1,
+    marginRight: 4,
+    minHeight: 36,
+    maxHeight: 36 * Platform.select({
+      ios: 2.5,
+      default: 2
+    }),
+    borderRadius: 20
+  },
+  inputWrapper: {
+    flexDirection: 'row'
+  },
+  space: {
+    flex: 1
+  }
+});
+export default EditInput;
+//# sourceMappingURL=EditInput.js.map

package/lib/module/domain/groupChannel/component/GroupChannelInput/EditInput.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useRef","Platform","View","Button","TextInput","createStyleSheet","useToast","useLocalization","AUTO_FOCUS","select","ios","android","default","EditInput","text","setText","editMessage","setEditMessage","onUpdateUserMessage","STRINGS","inputRef","toast","isUserMessage","message","setTimeout","current","focus","onPressCancel","onPressSave","catch","show","TOAST","UPDATE_MSG_ERROR","styles","editInputContainer","inputWrapper","input","GROUP_CHANNEL","INPUT_PLACEHOLDER_ACTIVE","marginTop","flexDirection","INPUT_EDIT_CANCEL","space","INPUT_EDIT_OK","paddingVertical","paddingHorizontal","alignItems","flex","marginRight","minHeight","maxHeight","borderRadius"],"sources":["EditInput.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { Platform, TextInput as RNTextInput, View } from 'react-native';\n\nimport { Button, TextInput, createStyleSheet, useToast } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdFileMessage, SendbirdUserMessage } from '@sendbird/uikit-utils';\n\nimport { useLocalization } from '../../../../hooks/useContext';\nimport type { GroupChannelProps } from '../../types';\n\ntype EditInputProps = GroupChannelProps['Input'] & {\n  text: string;\n  setText: (val: string) => void;\n  editMessage: SendbirdUserMessage | SendbirdFileMessage;\n  setEditMessage: (msg?: SendbirdUserMessage | SendbirdFileMessage) => void;\n};\n\nconst AUTO_FOCUS = Platform.select({ ios: false, android: true, default: false });\nconst EditInput: React.FC<EditInputProps> = ({ text, setText, editMessage, setEditMessage, onUpdateUserMessage }) => {\n  const { STRINGS } = useLocalization();\n  const inputRef = useRef<RNTextInput>(null);\n  const toast = useToast();\n\n  useEffect(() => {\n    if (editMessage.isUserMessage()) {\n      setText(editMessage.message ?? '');\n\n      if (!AUTO_FOCUS) setTimeout(() => inputRef.current?.focus(), 500);\n    }\n  }, [editMessage]);\n\n  const onPressCancel = () => {\n    setEditMessage();\n    setText('');\n  };\n\n  const onPressSave = () => {\n    if (editMessage.isUserMessage()) {\n      onUpdateUserMessage(text, editMessage).catch(() => toast.show(STRINGS.TOAST.UPDATE_MSG_ERROR, 'error'));\n    }\n    setEditMessage();\n    setText('');\n  };\n\n  return (\n    <View style={styles.editInputContainer}>\n      <View style={styles.inputWrapper}>\n        <TextInput\n          autoFocus={AUTO_FOCUS}\n          ref={inputRef}\n          multiline\n          value={text}\n          onChangeText={setText}\n          style={styles.input}\n          placeholder={STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_ACTIVE}\n        />\n      </View>\n      <View style={{ marginTop: 8, flexDirection: 'row' }}>\n        <Button variant={'text'} onPress={onPressCancel}>\n          {STRINGS.GROUP_CHANNEL.INPUT_EDIT_CANCEL}\n        </Button>\n        <View style={styles.space} />\n        <Button variant={'contained'} onPress={onPressSave}>\n          {STRINGS.GROUP_CHANNEL.INPUT_EDIT_OK}\n        </Button>\n      </View>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  editInputContainer: {\n    paddingVertical: 10,\n    paddingHorizontal: 16,\n    flexDirection: 'column',\n    alignItems: 'center',\n  },\n  input: {\n    flex: 1,\n    marginRight: 4,\n    minHeight: 36,\n    maxHeight: 36 * Platform.select({ ios: 2.5, default: 2 }),\n    borderRadius: 20,\n  },\n  inputWrapper: {\n    flexDirection: 'row',\n  },\n  space: {\n    flex: 1,\n  },\n});\n\nexport default EditInput;\n"],"mappings":"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"}

package/lib/module/domain/groupChannel/component/GroupChannelInput/SendInput.js

@@ -0,0 +1,134 @@
+import React from 'react';
+import { Platform, TouchableOpacity, View } from 'react-native';
+import { Icon, TextInput, createStyleSheet, useBottomSheet, useToast, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { conditionChaining } from '@sendbird/uikit-utils';
+import { useLocalization, usePlatformService } from '../../../../hooks/useContext';
+
+const SendInput = _ref => {
+  let {
+    onSendUserMessage,
+    onSendFileMessage,
+    text,
+    setText,
+    disabled
+  } = _ref;
+  const {
+    STRINGS
+  } = useLocalization();
+  const {
+    openSheet
+  } = useBottomSheet();
+  const {
+    fileService
+  } = usePlatformService();
+  const {
+    colors
+  } = useUIKitTheme();
+  const toast = useToast();
+
+  const onPressSend = () => {
+    onSendUserMessage(text).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
+    setText('');
+  };
+
+  const onPressAttachment = () => {
+    openSheet({
+      sheetItems: [{
+        title: STRINGS.GROUP_CHANNEL.DIALOG_ATTACHMENT_CAMERA,
+        icon: 'camera',
+        onPress: async () => {
+          const photo = await fileService.openCamera({
+            mediaType: 'photo',
+            onOpenFailureWithToastMessage: () => toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error')
+          });
+
+          if (photo) {
+            onSendFileMessage(photo).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
+          }
+        }
+      }, {
+        title: STRINGS.GROUP_CHANNEL.DIALOG_ATTACHMENT_PHOTO_LIBRARY,
+        icon: 'photo',
+        onPress: async () => {
+          const photo = await fileService.openMediaLibrary({
+            selectionLimit: 1,
+            mediaType: 'all',
+            onOpenFailureWithToastMessage: () => toast.show(STRINGS.TOAST.OPEN_PHOTO_LIBRARY_ERROR, 'error')
+          });
+
+          if (photo && photo[0]) {
+            onSendFileMessage(photo[0]).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
+          }
+        }
+      }, {
+        title: STRINGS.GROUP_CHANNEL.DIALOG_ATTACHMENT_FILES,
+        icon: 'document',
+        onPress: async () => {
+          const file = await fileService.openDocument({
+            onOpenFailureWithToastMessage: () => toast.show(STRINGS.TOAST.OPEN_FILES_ERROR, 'error')
+          });
+
+          if (file) {
+            onSendFileMessage(file).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
+          }
+        }
+      }]
+    });
+  };
+
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.sendInputContainer
+  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: onPressAttachment,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(Icon, {
+    color: disabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight,
+    icon: 'add',
+    size: 24,
+    containerStyle: styles.iconAttach
+  })), /*#__PURE__*/React.createElement(TextInput, {
+    multiline: true,
+    editable: !disabled,
+    value: text,
+    onChangeText: setText,
+    style: styles.input,
+    placeholder: conditionChaining([disabled], [STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_DISABLED, STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_ACTIVE])
+  }), Boolean(text.trim()) && /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: onPressSend,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(Icon, {
+    color: disabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight,
+    icon: 'send',
+    size: 24,
+    containerStyle: styles.iconSend
+  })));
+};
+
+const styles = createStyleSheet({
+  sendInputContainer: {
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  input: {
+    flex: 1,
+    marginRight: 4,
+    minHeight: 36,
+    maxHeight: 36 * Platform.select({
+      ios: 2.5,
+      default: 2
+    }),
+    borderRadius: 20
+  },
+  iconAttach: {
+    marginRight: 8,
+    padding: 4
+  },
+  iconSend: {
+    marginLeft: 4,
+    padding: 4
+  }
+});
+export default SendInput;
+//# sourceMappingURL=SendInput.js.map

package/lib/module/domain/groupChannel/component/GroupChannelInput/SendInput.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Platform","TouchableOpacity","View","Icon","TextInput","createStyleSheet","useBottomSheet","useToast","useUIKitTheme","conditionChaining","useLocalization","usePlatformService","SendInput","onSendUserMessage","onSendFileMessage","text","setText","disabled","STRINGS","openSheet","fileService","colors","toast","onPressSend","catch","show","TOAST","SEND_MSG_ERROR","onPressAttachment","sheetItems","title","GROUP_CHANNEL","DIALOG_ATTACHMENT_CAMERA","icon","onPress","photo","openCamera","mediaType","onOpenFailureWithToastMessage","OPEN_CAMERA_ERROR","DIALOG_ATTACHMENT_PHOTO_LIBRARY","openMediaLibrary","selectionLimit","OPEN_PHOTO_LIBRARY_ERROR","DIALOG_ATTACHMENT_FILES","file","openDocument","OPEN_FILES_ERROR","styles","sendInputContainer","ui","input","default","highlight","active","iconAttach","INPUT_PLACEHOLDER_DISABLED","INPUT_PLACEHOLDER_ACTIVE","Boolean","trim","iconSend","paddingVertical","paddingHorizontal","alignItems","flexDirection","flex","marginRight","minHeight","maxHeight","select","ios","borderRadius","padding","marginLeft"],"sources":["SendInput.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, TouchableOpacity, View } from 'react-native';\n\nimport {\n  Icon,\n  TextInput,\n  createStyleSheet,\n  useBottomSheet,\n  useToast,\n  useUIKitTheme,\n} from '@sendbird/uikit-react-native-foundation';\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport { useLocalization, usePlatformService } from '../../../../hooks/useContext';\nimport type { GroupChannelProps } from '../../types';\n\ntype SendInputProps = GroupChannelProps['Input'] & {\n  text: string;\n  setText: (val: string) => void;\n  disabled: boolean;\n};\nconst SendInput: React.FC<SendInputProps> = ({ onSendUserMessage, onSendFileMessage, text, setText, disabled }) => {\n  const { STRINGS } = useLocalization();\n  const { openSheet } = useBottomSheet();\n  const { fileService } = usePlatformService();\n  const { colors } = useUIKitTheme();\n  const toast = useToast();\n\n  const onPressSend = () => {\n    onSendUserMessage(text).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));\n    setText('');\n  };\n  const onPressAttachment = () => {\n    openSheet({\n      sheetItems: [\n        {\n          title: STRINGS.GROUP_CHANNEL.DIALOG_ATTACHMENT_CAMERA,\n          icon: 'camera',\n          onPress: async () => {\n            const photo = await fileService.openCamera({\n              mediaType: 'photo',\n              onOpenFailureWithToastMessage: () => toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error'),\n            });\n\n            if (photo) {\n              onSendFileMessage(photo).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));\n            }\n          },\n        },\n        {\n          title: STRINGS.GROUP_CHANNEL.DIALOG_ATTACHMENT_PHOTO_LIBRARY,\n          icon: 'photo',\n          onPress: async () => {\n            const photo = await fileService.openMediaLibrary({\n              selectionLimit: 1,\n              mediaType: 'all',\n              onOpenFailureWithToastMessage: () => toast.show(STRINGS.TOAST.OPEN_PHOTO_LIBRARY_ERROR, 'error'),\n            });\n\n            if (photo && photo[0]) {\n              onSendFileMessage(photo[0]).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));\n            }\n          },\n        },\n        {\n          title: STRINGS.GROUP_CHANNEL.DIALOG_ATTACHMENT_FILES,\n          icon: 'document',\n          onPress: async () => {\n            const file = await fileService.openDocument({\n              onOpenFailureWithToastMessage: () => toast.show(STRINGS.TOAST.OPEN_FILES_ERROR, 'error'),\n            });\n\n            if (file) {\n              onSendFileMessage(file).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));\n            }\n          },\n        },\n      ],\n    });\n  };\n\n  return (\n    <View style={styles.sendInputContainer}>\n      <TouchableOpacity onPress={onPressAttachment} disabled={disabled}>\n        <Icon\n          color={disabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight}\n          icon={'add'}\n          size={24}\n          containerStyle={styles.iconAttach}\n        />\n      </TouchableOpacity>\n      <TextInput\n        multiline\n        editable={!disabled}\n        value={text}\n        onChangeText={setText}\n        style={styles.input}\n        placeholder={conditionChaining(\n          [disabled],\n          [STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_DISABLED, STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_ACTIVE],\n        )}\n      />\n      {Boolean(text.trim()) && (\n        <TouchableOpacity onPress={onPressSend} disabled={disabled}>\n          <Icon\n            color={disabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight}\n            icon={'send'}\n            size={24}\n            containerStyle={styles.iconSend}\n          />\n        </TouchableOpacity>\n      )}\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  sendInputContainer: {\n    paddingVertical: 10,\n    paddingHorizontal: 12,\n    alignItems: 'center',\n    flexDirection: 'row',\n  },\n  input: {\n    flex: 1,\n    marginRight: 4,\n    minHeight: 36,\n    maxHeight: 36 * Platform.select({ ios: 2.5, default: 2 }),\n    borderRadius: 20,\n  },\n  iconAttach: {\n    marginRight: 8,\n    padding: 4,\n  },\n  iconSend: {\n    marginLeft: 4,\n    padding: 4,\n  },\n});\n\nexport default SendInput;\n"],"mappings":"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"}

package/lib/module/domain/groupChannel/component/GroupChannelInput/index.js

@@ -0,0 +1,92 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { KeyboardAvoidingView, Platform, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { groupChannelChatUnavailable, useIIFE } from '@sendbird/uikit-utils';
+import { GroupChannelContexts } from '../../module/moduleContext';
+import EditInput from './EditInput';
+import SendInput from './SendInput';
+const KEYBOARD_AVOID_VIEW_BEHAVIOR = Platform.select({
+  ios: 'padding',
+  default: undefined
+});
+
+const GroupChannelInput = props => {
+  const {
+    channel
+  } = props;
+  const {
+    left,
+    right,
+    bottom
+  } = useSafeAreaInsets();
+  const {
+    colors
+  } = useUIKitTheme();
+  const {
+    editMessage,
+    setEditMessage,
+    keyboardAvoidOffset = 0
+  } = useContext(GroupChannelContexts.Fragment);
+  const [text, setText] = useState('');
+  const textTmpRef = useRef('');
+  const disabled = groupChannelChatUnavailable(channel);
+  useEffect(() => {
+    if (text.length === 0) channel.endTyping();else channel.startTyping();
+  }, [text]);
+  useEffect(() => {
+    if (disabled) {
+      textTmpRef.current = text;
+      setText('');
+    } else {
+      setText(textTmpRef.current);
+    }
+  }, [disabled]);
+  const inputMode = useIIFE(() => {
+    if (!editMessage) return 'send';
+    if (editMessage.isFileMessage()) return 'send';
+    return 'edit';
+  });
+  return /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
+    keyboardVerticalOffset: -bottom + keyboardAvoidOffset,
+    behavior: KEYBOARD_AVOID_VIEW_BEHAVIOR
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      paddingLeft: left,
+      paddingRight: right,
+      backgroundColor: colors.background
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      justifyContent: 'center',
+      width: '100%'
+    }
+  }, inputMode === 'send' && /*#__PURE__*/React.createElement(SendInput, _extends({}, props, {
+    text: text,
+    setText: setText,
+    disabled: disabled
+  })), inputMode === 'edit' && editMessage && /*#__PURE__*/React.createElement(EditInput, _extends({}, props, {
+    text: text,
+    setText: setText,
+    editMessage: editMessage,
+    setEditMessage: setEditMessage
+  }))), /*#__PURE__*/React.createElement(SafeAreaBottom, {
+    height: bottom
+  })));
+};
+
+const SafeAreaBottom = _ref => {
+  let {
+    height
+  } = _ref;
+  return /*#__PURE__*/React.createElement(View, {
+    style: {
+      height
+    }
+  });
+};
+
+export default /*#__PURE__*/React.memo(GroupChannelInput);
+//# sourceMappingURL=index.js.map

package/lib/module/domain/groupChannel/component/GroupChannelInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useContext","useEffect","useRef","useState","KeyboardAvoidingView","Platform","View","useSafeAreaInsets","useUIKitTheme","groupChannelChatUnavailable","useIIFE","GroupChannelContexts","EditInput","SendInput","KEYBOARD_AVOID_VIEW_BEHAVIOR","select","ios","default","undefined","GroupChannelInput","props","channel","left","right","bottom","colors","editMessage","setEditMessage","keyboardAvoidOffset","Fragment","text","setText","textTmpRef","disabled","length","endTyping","startTyping","current","inputMode","isFileMessage","paddingLeft","paddingRight","backgroundColor","background","justifyContent","width","SafeAreaBottom","height","memo"],"sources":["index.tsx"],"sourcesContent":["import React, { useContext, useEffect, useRef, useState } from 'react';\nimport { KeyboardAvoidingView, Platform, View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport { useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { groupChannelChatUnavailable, useIIFE } from '@sendbird/uikit-utils';\n\nimport { GroupChannelContexts } from '../../module/moduleContext';\nimport type { GroupChannelProps } from '../../types';\nimport EditInput from './EditInput';\nimport SendInput from './SendInput';\n\nconst KEYBOARD_AVOID_VIEW_BEHAVIOR = Platform.select({ ios: 'padding' as const, default: undefined });\nconst GroupChannelInput: React.FC<GroupChannelProps['Input']> = (props) => {\n  const { channel } = props;\n\n  const { left, right, bottom } = useSafeAreaInsets();\n  const { colors } = useUIKitTheme();\n  const { editMessage, setEditMessage, keyboardAvoidOffset = 0 } = useContext(GroupChannelContexts.Fragment);\n\n  const [text, setText] = useState('');\n  const textTmpRef = useRef('');\n  const disabled = groupChannelChatUnavailable(channel);\n\n  useEffect(() => {\n    if (text.length === 0) channel.endTyping();\n    else channel.startTyping();\n  }, [text]);\n\n  useEffect(() => {\n    if (disabled) {\n      textTmpRef.current = text;\n      setText('');\n    } else {\n      setText(textTmpRef.current);\n    }\n  }, [disabled]);\n\n  const inputMode = useIIFE(() => {\n    if (!editMessage) return 'send';\n    if (editMessage.isFileMessage()) return 'send';\n    return 'edit';\n  });\n\n  return (\n    <KeyboardAvoidingView\n      keyboardVerticalOffset={-bottom + keyboardAvoidOffset}\n      behavior={KEYBOARD_AVOID_VIEW_BEHAVIOR}\n    >\n      <View style={{ paddingLeft: left, paddingRight: right, backgroundColor: colors.background }}>\n        <View style={{ justifyContent: 'center', width: '100%' }}>\n          {inputMode === 'send' && <SendInput {...props} text={text} setText={setText} disabled={disabled} />}\n          {inputMode === 'edit' && editMessage && (\n            <EditInput\n              {...props}\n              text={text}\n              setText={setText}\n              editMessage={editMessage}\n              setEditMessage={setEditMessage}\n            />\n          )}\n        </View>\n        <SafeAreaBottom height={bottom} />\n      </View>\n    </KeyboardAvoidingView>\n  );\n};\nconst SafeAreaBottom: React.FC<{ height: number }> = ({ height }) => {\n  return <View style={{ height }} />;\n};\n\nexport default React.memo(GroupChannelInput);\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,SAA5B,EAAuCC,MAAvC,EAA+CC,QAA/C,QAA+D,OAA/D;AACA,SAASC,oBAAT,EAA+BC,QAA/B,EAAyCC,IAAzC,QAAqD,cAArD;AACA,SAASC,iBAAT,QAAkC,gCAAlC;AAEA,SAASC,aAAT,QAA8B,yCAA9B;AACA,SAASC,2BAAT,EAAsCC,OAAtC,QAAqD,uBAArD;AAEA,SAASC,oBAAT,QAAqC,4BAArC;AAEA,OAAOC,SAAP,MAAsB,aAAtB;AACA,OAAOC,SAAP,MAAsB,aAAtB;AAEA,MAAMC,4BAA4B,GAAGT,QAAQ,CAACU,MAAT,CAAgB;EAAEC,GAAG,EAAE,SAAP;EAA2BC,OAAO,EAAEC;AAApC,CAAhB,CAArC;;AACA,MAAMC,iBAAuD,GAAIC,KAAD,IAAW;EACzE,MAAM;IAAEC;EAAF,IAAcD,KAApB;EAEA,MAAM;IAAEE,IAAF;IAAQC,KAAR;IAAeC;EAAf,IAA0BjB,iBAAiB,EAAjD;EACA,MAAM;IAAEkB;EAAF,IAAajB,aAAa,EAAhC;EACA,MAAM;IAAEkB,WAAF;IAAeC,cAAf;IAA+BC,mBAAmB,GAAG;EAArD,IAA2D5B,UAAU,CAACW,oBAAoB,CAACkB,QAAtB,CAA3E;EAEA,MAAM,CAACC,IAAD,EAAOC,OAAP,IAAkB5B,QAAQ,CAAC,EAAD,CAAhC;EACA,MAAM6B,UAAU,GAAG9B,MAAM,CAAC,EAAD,CAAzB;EACA,MAAM+B,QAAQ,GAAGxB,2BAA2B,CAACY,OAAD,CAA5C;EAEApB,SAAS,CAAC,MAAM;IACd,IAAI6B,IAAI,CAACI,MAAL,KAAgB,CAApB,EAAuBb,OAAO,CAACc,SAAR,GAAvB,KACKd,OAAO,CAACe,WAAR;EACN,CAHQ,EAGN,CAACN,IAAD,CAHM,CAAT;EAKA7B,SAAS,CAAC,MAAM;IACd,IAAIgC,QAAJ,EAAc;MACZD,UAAU,CAACK,OAAX,GAAqBP,IAArB;MACAC,OAAO,CAAC,EAAD,CAAP;IACD,CAHD,MAGO;MACLA,OAAO,CAACC,UAAU,CAACK,OAAZ,CAAP;IACD;EACF,CAPQ,EAON,CAACJ,QAAD,CAPM,CAAT;EASA,MAAMK,SAAS,GAAG5B,OAAO,CAAC,MAAM;IAC9B,IAAI,CAACgB,WAAL,EAAkB,OAAO,MAAP;IAClB,IAAIA,WAAW,CAACa,aAAZ,EAAJ,EAAiC,OAAO,MAAP;IACjC,OAAO,MAAP;EACD,CAJwB,CAAzB;EAMA,oBACE,oBAAC,oBAAD;IACE,sBAAsB,EAAE,CAACf,MAAD,GAAUI,mBADpC;IAEE,QAAQ,EAAEd;EAFZ,gBAIE,oBAAC,IAAD;IAAM,KAAK,EAAE;MAAE0B,WAAW,EAAElB,IAAf;MAAqBmB,YAAY,EAAElB,KAAnC;MAA0CmB,eAAe,EAAEjB,MAAM,CAACkB;IAAlE;EAAb,gBACE,oBAAC,IAAD;IAAM,KAAK,EAAE;MAAEC,cAAc,EAAE,QAAlB;MAA4BC,KAAK,EAAE;IAAnC;EAAb,GACGP,SAAS,KAAK,MAAd,iBAAwB,oBAAC,SAAD,eAAelB,KAAf;IAAsB,IAAI,EAAEU,IAA5B;IAAkC,OAAO,EAAEC,OAA3C;IAAoD,QAAQ,EAAEE;EAA9D,GAD3B,EAEGK,SAAS,KAAK,MAAd,IAAwBZ,WAAxB,iBACC,oBAAC,SAAD,eACMN,KADN;IAEE,IAAI,EAAEU,IAFR;IAGE,OAAO,EAAEC,OAHX;IAIE,WAAW,EAAEL,WAJf;IAKE,cAAc,EAAEC;EALlB,GAHJ,CADF,eAaE,oBAAC,cAAD;IAAgB,MAAM,EAAEH;EAAxB,EAbF,CAJF,CADF;AAsBD,CArDD;;AAsDA,MAAMsB,cAA4C,GAAG,QAAgB;EAAA,IAAf;IAAEC;EAAF,CAAe;EACnE,oBAAO,oBAAC,IAAD;IAAM,KAAK,EAAE;MAAEA;IAAF;EAAb,EAAP;AACD,CAFD;;AAIA,4BAAehD,KAAK,CAACiD,IAAN,CAAW7B,iBAAX,CAAf"}