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

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: 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/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: 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;;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,iBAAuD,GAAIC,KAAD,IAAW;EACzE,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,cAA4C,GAAG,QAAgB;EAAA,IAAf;IAAEC;EAAF,CAAe;EACnE,oBAAO,6BAAC,iBAAD;IAAM,KAAK,EAAE;MAAEA;IAAF;EAAb,EAAP;AACD,CAFD;;4BAIeC,cAAA,CAAMC,IAAN,CAAWvC,iBAAX,C"}

package/lib/commonjs/domain/groupChannel/component/GroupChannelMessageList.js

@@ -0,0 +1,343 @@
+"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 _ChatFlatList = _interopRequireDefault(require("../../../components/ChatFlatList"));
+
+var _useContext = require("../../../hooks/useContext");
+
+var _moduleContext = require("../module/moduleContext");
+
+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 HANDLE_NEXT_MSG_SEPARATELY = _reactNative.Platform.select({
+  default: true
+});
+
+const GroupChannelMessageList = _ref => {
+  let {
+    currentUserId,
+    channel,
+    messages,
+    renderMessage,
+    nextMessages,
+    newMessagesFromMembers,
+    onBottomReached,
+    onTopReached,
+    renderNewMessagesButton,
+    renderScrollToBottomButton,
+    onResendFailedMessage,
+    onDeleteMessage,
+    onPressImageMessage,
+    flatListProps,
+    enableMessageGrouping
+  } = _ref;
+  const {
+    STRINGS
+  } = (0, _useContext.useLocalization)();
+  const {
+    colors
+  } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
+  const {
+    left,
+    right
+  } = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const [scrollLeaveBottom, setScrollLeaveBottom] = (0, _react.useState)(false);
+  const scrollRef = (0, _react.useRef)(null);
+  const [newMessagesInternalBuffer, setNewMessagesInternalBuffer] = (0, _react.useState)(() => newMessagesFromMembers);
+  const getMessagePressActions = useGetMessagePressActions({
+    onDeleteMessage,
+    onPressImageMessage,
+    currentUserId,
+    onResendFailedMessage
+  });
+  const safeAreaLayout = {
+    paddingLeft: left,
+    paddingRight: right
+  };
+  const renderItem = (0, _uikitUtils.useFreshCallback)(_ref2 => {
+    let {
+      item,
+      index
+    } = _ref2;
+    const {
+      onPress,
+      onLongPress
+    } = getMessagePressActions(item);
+    return renderMessage({
+      message: item,
+      prevMessage: messages[index + 1],
+      nextMessage: messages[index - 1],
+      onPress,
+      onLongPress,
+      enableMessageGrouping,
+      channel,
+      currentUserId
+    });
+  });
+
+  if (!HANDLE_NEXT_MSG_SEPARATELY) {
+    (0, _react.useEffect)(() => {
+      if (newMessagesInternalBuffer.length !== 0) {
+        setNewMessagesInternalBuffer(prev => prev.concat(newMessagesFromMembers));
+      }
+
+      onBottomReached();
+    }, [newMessagesFromMembers]);
+  }
+
+  const onLeaveScrollBottom = (0, _react.useCallback)(val => {
+    if (!HANDLE_NEXT_MSG_SEPARATELY) setNewMessagesInternalBuffer([]);
+    setScrollLeaveBottom(val);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [{
+      flex: 1,
+      backgroundColor: colors.background
+    }, safeAreaLayout]
+  }, channel.isFrozen && /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.ChannelFrozenBanner, {
+    style: styles.frozenBanner,
+    text: STRINGS.GROUP_CHANNEL.LIST_BANNER_FROZEN
+  }), /*#__PURE__*/_react.default.createElement(_ChatFlatList.default, _extends({
+    nextMessages: nextMessages,
+    onBottomReached: onBottomReached,
+    onTopReached: onTopReached,
+    onLeaveScrollBottom: onLeaveScrollBottom,
+    currentUserId: currentUserId
+  }, flatListProps, {
+    listKey: `group-channel-messages-${channel.url}`,
+    ref: scrollRef,
+    data: messages,
+    renderItem: renderItem,
+    keyExtractor: _uikitUtils.messageKeyExtractor,
+    contentContainerStyle: [// { minHeight: '100%', justifyContent: 'flex-end' },
+    channel.isFrozen && styles.frozenListPadding, flatListProps === null || flatListProps === void 0 ? void 0 : flatListProps.contentContainerStyle]
+  })), renderNewMessagesButton && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.newMsgButton, safeAreaLayout]
+  }, renderNewMessagesButton({
+    visible: scrollLeaveBottom,
+    onPress: () => {
+      var _scrollRef$current;
+
+      return (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollToBottom(false);
+    },
+    newMessages: !HANDLE_NEXT_MSG_SEPARATELY ? newMessagesInternalBuffer : newMessagesFromMembers
+  })), renderScrollToBottomButton && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    pointerEvents: scrollLeaveBottom ? 'auto' : 'none',
+    style: [styles.scrollButton, safeAreaLayout]
+  }, renderScrollToBottomButton({
+    visible: scrollLeaveBottom,
+    onPress: () => {
+      var _scrollRef$current2;
+
+      return (_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.scrollToBottom(false);
+    }
+  })));
+};
+
+const toMegabyte = byte => byte / 1024 / 1024;
+
+const useGetMessagePressActions = _ref3 => {
+  let {
+    onPressImageMessage,
+    onDeleteMessage,
+    onResendFailedMessage,
+    currentUserId
+  } = _ref3;
+  const {
+    colors
+  } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
+  const {
+    STRINGS
+  } = (0, _useContext.useLocalization)();
+  const toast = (0, _uikitReactNativeFoundation.useToast)();
+  const {
+    openSheet
+  } = (0, _uikitReactNativeFoundation.useBottomSheet)();
+  const {
+    alert
+  } = (0, _uikitReactNativeFoundation.useAlert)();
+  const {
+    clipboardService,
+    fileService
+  } = (0, _useContext.usePlatformService)();
+  const {
+    setEditMessage
+  } = (0, _react.useContext)(_moduleContext.GroupChannelContexts.Fragment);
+
+  const handleFailedMessage = message => {
+    openSheet({
+      sheetItems: [{
+        title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_FAILED_RETRY,
+        onPress: () => onResendFailedMessage(message).catch(() => toast.show(STRINGS.TOAST.RESEND_MSG_ERROR, 'error'))
+      }, {
+        title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_FAILED_REMOVE,
+        titleColor: colors.ui.dialog.default.none.destructive,
+        onPress: () => confirmDelete(message)
+      }]
+    });
+  };
+
+  const confirmDelete = message => {
+    alert({
+      title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_TITLE,
+      buttons: [{
+        text: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_CANCEL
+      }, {
+        text: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_OK,
+        style: 'destructive',
+        onPress: () => onDeleteMessage(message).catch(() => toast.show(STRINGS.TOAST.DELETE_MSG_ERROR, 'error'))
+      }]
+    });
+  };
+
+  return msg => {
+    if (!msg.isUserMessage() && !msg.isFileMessage()) {
+      return {
+        onPress: undefined,
+        onLongPress: undefined
+      };
+    }
+
+    const sheetItems = [];
+    const response = {
+      onPress: undefined,
+      onLongPress: undefined
+    };
+
+    if (msg.isUserMessage()) {
+      sheetItems.push({
+        icon: 'copy',
+        title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_COPY,
+        onPress: () => {
+          clipboardService.setString(msg.message || '');
+          toast.show(STRINGS.TOAST.COPY_OK, 'success');
+        }
+      });
+
+      if ((0, _uikitUtils.isMyMessage)(msg, currentUserId) && msg.sendingStatus === 'succeeded') {
+        sheetItems.push({
+          icon: 'edit',
+          title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_EDIT,
+          onPress: () => setEditMessage(msg)
+        }, {
+          icon: 'delete',
+          title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE,
+          onPress: () => confirmDelete(msg)
+        });
+      }
+    }
+
+    if (msg.isFileMessage()) {
+      sheetItems.push({
+        icon: 'download',
+        title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_SAVE,
+        onPress: async () => {
+          if (toMegabyte(msg.size) > 4) {
+            toast.show(STRINGS.TOAST.DOWNLOAD_START, 'success');
+          }
+
+          fileService.save({
+            fileUrl: msg.url,
+            fileName: msg.name,
+            fileType: msg.type
+          }).then(response => {
+            toast.show(STRINGS.TOAST.DOWNLOAD_OK, 'success');
+
+            _uikitUtils.Logger.log('File saved to', response);
+          }).catch(err => {
+            toast.show(STRINGS.TOAST.DOWNLOAD_ERROR, 'error');
+
+            _uikitUtils.Logger.log('File save failure', err);
+          });
+        }
+      });
+
+      if ((0, _uikitUtils.isMyMessage)(msg, currentUserId) && msg.sendingStatus === 'succeeded') {
+        sheetItems.push({
+          icon: 'delete',
+          title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE,
+          onPress: () => confirmDelete(msg)
+        });
+      }
+
+      const fileType = (0, _uikitUtils.getFileType)(msg.type || (0, _uikitUtils.getFileExtension)(msg.name));
+
+      if (fileType === 'image') {
+        response.onPress = () => onPressImageMessage === null || onPressImageMessage === void 0 ? void 0 : onPressImageMessage(msg, (0, _uikitUtils.getAvailableUriFromFileMessage)(msg));
+      } else {
+        response.onPress = () => _reactNative.Linking.openURL(msg.url).catch();
+      }
+    }
+
+    if (sheetItems.length > 0) {
+      response.onLongPress = () => openSheet({
+        sheetItems
+      });
+    }
+
+    if (msg.sendingStatus === 'failed') {
+      response.onLongPress = () => handleFailedMessage(msg);
+
+      response.onPress = () => {
+        onResendFailedMessage(msg).catch(() => toast.show(STRINGS.TOAST.RESEND_MSG_ERROR, 'error'));
+      };
+    }
+
+    if (msg.sendingStatus === 'pending') {
+      response.onLongPress = undefined;
+      response.onPress = undefined;
+    }
+
+    return response;
+  };
+};
+
+const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
+  frozenBanner: {
+    position: 'absolute',
+    zIndex: 999,
+    top: 8,
+    left: 8,
+    right: 8
+  },
+  frozenListPadding: {
+    paddingBottom: 32
+  },
+  newMsgButton: {
+    position: 'absolute',
+    zIndex: 999,
+    bottom: 10,
+    alignSelf: 'center'
+  },
+  scrollButton: {
+    position: 'absolute',
+    zIndex: 998,
+    bottom: 10,
+    right: 16
+  }
+});
+
+var _default = /*#__PURE__*/_react.default.memo(GroupChannelMessageList);
+
+exports.default = _default;
+//# sourceMappingURL=GroupChannelMessageList.js.map