@sendbird/uikit-react-native 1.0.1 → 1.0.2

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

@@ -0,0 +1,118 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _uikitReactNativeFoundation = require("@sendbird/uikit-react-native-foundation");
+
+var _useContext = require("../../../../hooks/useContext");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const AUTO_FOCUS = _reactNative.Platform.select({
+  ios: false,
+  android: true,
+  default: false
+});
+
+const EditInput = _ref => {
+  let {
+    text,
+    setText,
+    editMessage,
+    setEditMessage,
+    onUpdateUserMessage
+  } = _ref;
+  const {
+    STRINGS
+  } = (0, _useContext.useLocalization)();
+  const inputRef = (0, _react.useRef)(null);
+  const toast = (0, _uikitReactNativeFoundation.useToast)();
+  (0, _react.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.default.createElement(_reactNative.View, {
+    style: styles.editInputContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.inputWrapper
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.TextInput, {
+    autoFocus: AUTO_FOCUS,
+    ref: inputRef,
+    multiline: true,
+    value: text,
+    onChangeText: setText,
+    style: styles.input,
+    placeholder: STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_ACTIVE
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: {
+      marginTop: 8,
+      flexDirection: 'row'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Button, {
+    variant: 'text',
+    onPress: onPressCancel
+  }, STRINGS.GROUP_CHANNEL.INPUT_EDIT_CANCEL), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.space
+  }), /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Button, {
+    variant: 'contained',
+    onPress: onPressSave
+  }, STRINGS.GROUP_CHANNEL.INPUT_EDIT_OK)));
+};
+
+const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
+  editInputContainer: {
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    flexDirection: 'column',
+    alignItems: 'center'
+  },
+  input: {
+    flex: 1,
+    marginRight: 4,
+    minHeight: 36,
+    maxHeight: 36 * _reactNative.Platform.select({
+      ios: 2.5,
+      default: 2
+    }),
+    borderRadius: 20
+  },
+  inputWrapper: {
+    flexDirection: 'row'
+  },
+  space: {
+    flex: 1
+  }
+});
+var _default = EditInput;
+exports.default = _default;
+//# sourceMappingURL=EditInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["AUTO_FOCUS","Platform","select","ios","android","default","EditInput","text","setText","editMessage","setEditMessage","onUpdateUserMessage","STRINGS","useLocalization","inputRef","useRef","toast","useToast","useEffect","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","createStyleSheet","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 = ({ text, setText, editMessage, setEditMessage, onUpdateUserMessage }: EditInputProps) => {\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/commonjs/domain/groupChannel/component/GroupChannelInput/SendInput.js

@@ -0,0 +1,148 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _uikitReactNativeFoundation = require("@sendbird/uikit-react-native-foundation");
+
+var _uikitUtils = require("@sendbird/uikit-utils");
+
+var _useContext = require("../../../../hooks/useContext");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const SendInput = _ref => {
+  let {
+    onSendUserMessage,
+    onSendFileMessage,
+    text,
+    setText,
+    disabled
+  } = _ref;
+  const {
+    STRINGS
+  } = (0, _useContext.useLocalization)();
+  const {
+    openSheet
+  } = (0, _uikitReactNativeFoundation.useBottomSheet)();
+  const {
+    fileService
+  } = (0, _useContext.usePlatformService)();
+  const {
+    colors
+  } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
+  const toast = (0, _uikitReactNativeFoundation.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.default.createElement(_reactNative.View, {
+    style: styles.sendInputContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    onPress: onPressAttachment,
+    disabled: disabled
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Icon, {
+    color: disabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight,
+    icon: 'add',
+    size: 24,
+    containerStyle: styles.iconAttach
+  })), /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.TextInput, {
+    multiline: true,
+    editable: !disabled,
+    value: text,
+    onChangeText: setText,
+    style: styles.input,
+    placeholder: (0, _uikitUtils.conditionChaining)([disabled], [STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_DISABLED, STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_ACTIVE])
+  }), Boolean(text.trim()) && /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    onPress: onPressSend,
+    disabled: disabled
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Icon, {
+    color: disabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight,
+    icon: 'send',
+    size: 24,
+    containerStyle: styles.iconSend
+  })));
+};
+
+const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
+  sendInputContainer: {
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  input: {
+    flex: 1,
+    marginRight: 4,
+    minHeight: 36,
+    maxHeight: 36 * _reactNative.Platform.select({
+      ios: 2.5,
+      default: 2
+    }),
+    borderRadius: 20
+  },
+  iconAttach: {
+    marginRight: 8,
+    padding: 4
+  },
+  iconSend: {
+    marginLeft: 4,
+    padding: 4
+  }
+});
+var _default = SendInput;
+exports.default = _default;
+//# sourceMappingURL=SendInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["SendInput","onSendUserMessage","onSendFileMessage","text","setText","disabled","STRINGS","useLocalization","openSheet","useBottomSheet","fileService","usePlatformService","colors","useUIKitTheme","toast","useToast","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","conditionChaining","INPUT_PLACEHOLDER_DISABLED","INPUT_PLACEHOLDER_ACTIVE","Boolean","trim","iconSend","createStyleSheet","paddingVertical","paddingHorizontal","alignItems","flexDirection","flex","marginRight","minHeight","maxHeight","Platform","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 = ({ onSendUserMessage, onSendFileMessage, text, setText, disabled }: SendInputProps) => {\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/commonjs/domain/groupChannel/component/GroupChannelInput/index.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+
+var _uikitReactNativeFoundation = require("@sendbird/uikit-react-native-foundation");
+
+var _uikitUtils = require("@sendbird/uikit-utils");
+
+var _moduleContext = require("../../module/moduleContext");
+
+var _EditInput = _interopRequireDefault(require("./EditInput"));
+
+var _SendInput = _interopRequireDefault(require("./SendInput"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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); }
+
+const KEYBOARD_AVOID_VIEW_BEHAVIOR = _reactNative.Platform.select({
+  ios: 'padding',
+  default: undefined
+});
+
+const GroupChannelInput = props => {
+  const {
+    channel
+  } = props;
+  const {
+    left,
+    right,
+    bottom
+  } = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const {
+    colors
+  } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
+  const {
+    editMessage,
+    setEditMessage,
+    keyboardAvoidOffset = 0
+  } = (0, _react.useContext)(_moduleContext.GroupChannelContexts.Fragment);
+  const [text, setText] = (0, _react.useState)('');
+  const textTmpRef = (0, _react.useRef)('');
+  const disabled = (0, _uikitUtils.groupChannelChatUnavailable)(channel);
+  (0, _react.useEffect)(() => {
+    if (text.length === 0) channel.endTyping();else channel.startTyping();
+  }, [text]);
+  (0, _react.useEffect)(() => {
+    if (disabled) {
+      textTmpRef.current = text;
+      setText('');
+    } else {
+      setText(textTmpRef.current);
+    }
+  }, [disabled]);
+  const inputMode = (0, _uikitUtils.useIIFE)(() => {
+    if (!editMessage) return 'send';
+    if (editMessage.isFileMessage()) return 'send';
+    return 'edit';
+  });
+  return /*#__PURE__*/_react.default.createElement(_reactNative.KeyboardAvoidingView, {
+    keyboardVerticalOffset: -bottom + keyboardAvoidOffset,
+    behavior: KEYBOARD_AVOID_VIEW_BEHAVIOR
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: {
+      paddingLeft: left,
+      paddingRight: right,
+      backgroundColor: colors.background
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: {
+      justifyContent: 'center',
+      width: '100%'
+    }
+  }, inputMode === 'send' && /*#__PURE__*/_react.default.createElement(_SendInput.default, _extends({}, props, {
+    text: text,
+    setText: setText,
+    disabled: disabled
+  })), inputMode === 'edit' && editMessage && /*#__PURE__*/_react.default.createElement(_EditInput.default, _extends({}, props, {
+    text: text,
+    setText: setText,
+    editMessage: editMessage,
+    setEditMessage: setEditMessage
+  }))), /*#__PURE__*/_react.default.createElement(SafeAreaBottom, {
+    height: bottom
+  })));
+};
+
+const SafeAreaBottom = _ref => {
+  let {
+    height
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: {
+      height
+    }
+  });
+};
+
+var _default = /*#__PURE__*/_react.default.memo(GroupChannelInput);
+
+exports.default = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["KEYBOARD_AVOID_VIEW_BEHAVIOR","Platform","select","ios","default","undefined","GroupChannelInput","props","channel","left","right","bottom","useSafeAreaInsets","colors","useUIKitTheme","editMessage","setEditMessage","keyboardAvoidOffset","useContext","GroupChannelContexts","Fragment","text","setText","useState","textTmpRef","useRef","disabled","groupChannelChatUnavailable","useEffect","length","endTyping","startTyping","current","inputMode","useIIFE","isFileMessage","paddingLeft","paddingRight","backgroundColor","background","justifyContent","width","SafeAreaBottom","height","React","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 = (props: GroupChannelProps['Input']) => {\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 = ({ height }: { height: number }) => {\n  return <View style={{ height }} />;\n};\n\nexport default React.memo(GroupChannelInput);\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AAEA;;AAEA;;AACA;;;;;;;;;;AAEA,MAAMA,4BAA4B,GAAGC,qBAAA,CAASC,MAAT,CAAgB;EAAEC,GAAG,EAAE,SAAP;EAA2BC,OAAO,EAAEC;AAApC,CAAhB,CAArC;;AACA,MAAMC,iBAAiB,GAAIC,KAAD,IAAuC;EAC/D,MAAM;IAAEC;EAAF,IAAcD,KAApB;EAEA,MAAM;IAAEE,IAAF;IAAQC,KAAR;IAAeC;EAAf,IAA0B,IAAAC,6CAAA,GAAhC;EACA,MAAM;IAAEC;EAAF,IAAa,IAAAC,yCAAA,GAAnB;EACA,MAAM;IAAEC,WAAF;IAAeC,cAAf;IAA+BC,mBAAmB,GAAG;EAArD,IAA2D,IAAAC,iBAAA,EAAWC,mCAAA,CAAqBC,QAAhC,CAAjE;EAEA,MAAM,CAACC,IAAD,EAAOC,OAAP,IAAkB,IAAAC,eAAA,EAAS,EAAT,CAAxB;EACA,MAAMC,UAAU,GAAG,IAAAC,aAAA,EAAO,EAAP,CAAnB;EACA,MAAMC,QAAQ,GAAG,IAAAC,uCAAA,EAA4BnB,OAA5B,CAAjB;EAEA,IAAAoB,gBAAA,EAAU,MAAM;IACd,IAAIP,IAAI,CAACQ,MAAL,KAAgB,CAApB,EAAuBrB,OAAO,CAACsB,SAAR,GAAvB,KACKtB,OAAO,CAACuB,WAAR;EACN,CAHD,EAGG,CAACV,IAAD,CAHH;EAKA,IAAAO,gBAAA,EAAU,MAAM;IACd,IAAIF,QAAJ,EAAc;MACZF,UAAU,CAACQ,OAAX,GAAqBX,IAArB;MACAC,OAAO,CAAC,EAAD,CAAP;IACD,CAHD,MAGO;MACLA,OAAO,CAACE,UAAU,CAACQ,OAAZ,CAAP;IACD;EACF,CAPD,EAOG,CAACN,QAAD,CAPH;EASA,MAAMO,SAAS,GAAG,IAAAC,mBAAA,EAAQ,MAAM;IAC9B,IAAI,CAACnB,WAAL,EAAkB,OAAO,MAAP;IAClB,IAAIA,WAAW,CAACoB,aAAZ,EAAJ,EAAiC,OAAO,MAAP;IACjC,OAAO,MAAP;EACD,CAJiB,CAAlB;EAMA,oBACE,6BAAC,iCAAD;IACE,sBAAsB,EAAE,CAACxB,MAAD,GAAUM,mBADpC;IAEE,QAAQ,EAAEjB;EAFZ,gBAIE,6BAAC,iBAAD;IAAM,KAAK,EAAE;MAAEoC,WAAW,EAAE3B,IAAf;MAAqB4B,YAAY,EAAE3B,KAAnC;MAA0C4B,eAAe,EAAEzB,MAAM,CAAC0B;IAAlE;EAAb,gBACE,6BAAC,iBAAD;IAAM,KAAK,EAAE;MAAEC,cAAc,EAAE,QAAlB;MAA4BC,KAAK,EAAE;IAAnC;EAAb,GACGR,SAAS,KAAK,MAAd,iBAAwB,6BAAC,kBAAD,eAAe1B,KAAf;IAAsB,IAAI,EAAEc,IAA5B;IAAkC,OAAO,EAAEC,OAA3C;IAAoD,QAAQ,EAAEI;EAA9D,GAD3B,EAEGO,SAAS,KAAK,MAAd,IAAwBlB,WAAxB,iBACC,6BAAC,kBAAD,eACMR,KADN;IAEE,IAAI,EAAEc,IAFR;IAGE,OAAO,EAAEC,OAHX;IAIE,WAAW,EAAEP,WAJf;IAKE,cAAc,EAAEC;EALlB,GAHJ,CADF,eAaE,6BAAC,cAAD;IAAgB,MAAM,EAAEL;EAAxB,EAbF,CAJF,CADF;AAsBD,CArDD;;AAsDA,MAAM+B,cAAc,GAAG,QAAoC;EAAA,IAAnC;IAAEC;EAAF,CAAmC;EACzD,oBAAO,6BAAC,iBAAD;IAAM,KAAK,EAAE;MAAEA;IAAF;EAAb,EAAP;AACD,CAFD;;4BAIeC,cAAA,CAAMC,IAAN,CAAWvC,iBAAX,C"}