@sendbird/uikit-react 3.5.0-beta.0 → 3.5.0-mobile-web-0

package/cjs/ui/MessageItemReactionMenu.js

@@ -6,86 +6,83 @@ var ui_Icon = require('./Icon.js');
 var ui_IconButton = require('./IconButton.js');
 var ui_ImageRenderer = require('./ImageRenderer.js');
 var ui_ReactionButton = require('./ReactionButton.js');
-var index = require('../index-21b2339d.js');
-require('../tslib.es6-43854eb1.js');
+var index = require('../index-bca3d144.js');
+require('../_rollupPluginBabelHelpers-919a4db3.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../uuid-11d4efe8.js');
-require('../index-d6ef2a60.js');
+require('../uuid-d86ea01f.js');
+require('../index-44186883.js');
 require('prop-types');
-require('../stringSet-91b919f6.js');
+require('../stringSet-d1cee26a.js');
 require('../utils/message/getOutgoingMessageState.js');
+require('../useLongPress-4c2e9a3b.js');
+require('../MediaQueryContext-de7c63bc.js');
+require('../utils-3dacb9bc.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function MessageItemReactionMenu(_a) {
-  var className = _a.className,
-      message = _a.message,
-      userId = _a.userId,
-      _b = _a.spaceFromTrigger,
-      spaceFromTrigger = _b === void 0 ? {} : _b,
-      emojiContainer = _a.emojiContainer,
-      toggleReaction = _a.toggleReaction,
-      setSupposedHover = _a.setSupposedHover;
-  var triggerRef = React.useRef(null);
-  var containerRef = React.useRef(null);
-
+function MessageItemReactionMenu(_ref) {
+  let {
+    className,
+    message,
+    userId,
+    spaceFromTrigger = {
+      x: 0,
+      y: 0
+    },
+    emojiContainer,
+    toggleReaction,
+    setSupposedHover
+  } = _ref;
+  const triggerRef = React.useRef(null);
+  const containerRef = React.useRef(null);
   if (index.isPendingMessage(message) || index.isFailedMessage(message)) {
     return null;
   }
-
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: index.getClassName([className, 'sendbird-message-item-reaction-menu']),
     ref: containerRef
   }, /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
-    menuTrigger: function (toggleDropdown) {
-      return /*#__PURE__*/React__default["default"].createElement(ui_IconButton, {
-        className: "sendbird-message-item-reaction-menu__trigger",
-        ref: triggerRef,
-        width: "32px",
-        height: "32px",
-        onClick: function () {
-          toggleDropdown();
-          setSupposedHover(true);
-        },
-        onBlur: function () {
-          setSupposedHover(false);
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
-        className: "sendbird-message-item-reaction-menu__trigger__icon",
-        type: ui_Icon.IconTypes.EMOJI_MORE,
-        fillColor: ui_Icon.IconColors.CONTENT_INVERSE,
-        width: "24px",
-        height: "24px"
-      }));
-    },
-    menuItems: function (close) {
-      var closeDropdown = function () {
+    menuTrigger: toggleDropdown => /*#__PURE__*/React__default["default"].createElement(ui_IconButton, {
+      className: "sendbird-message-item-reaction-menu__trigger",
+      ref: triggerRef,
+      width: "32px",
+      height: "32px",
+      onClick: () => {
+        toggleDropdown();
+        setSupposedHover(true);
+      },
+      onBlur: () => {
+        setSupposedHover(false);
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+      className: "sendbird-message-item-reaction-menu__trigger__icon",
+      type: ui_Icon.IconTypes.EMOJI_MORE,
+      fillColor: ui_Icon.IconColors.CONTENT_INVERSE,
+      width: "24px",
+      height: "24px"
+    })),
+    menuItems: close => {
+      const closeDropdown = () => {
         close();
         setSupposedHover(false);
       };
-
       return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.EmojiListItems, {
         parentRef: triggerRef,
         parentContainRef: containerRef,
         closeDropdown: closeDropdown,
         spaceFromTrigger: spaceFromTrigger
-      }, index.getEmojiListAll(emojiContainer).map(function (emoji) {
-        var _a, _b, _c;
-
-        var isReacted = (_c = (_b = (_a = message === null || message === void 0 ? void 0 : message.reactions) === null || _a === void 0 ? void 0 : _a.filter(function (reaction) {
-          return reaction.key === emoji.key;
-        })[0]) === null || _b === void 0 ? void 0 : _b.userIds) === null || _c === void 0 ? void 0 : _c.some(function (reactorId) {
-          return reactorId === userId;
-        });
+      }, index.getEmojiListAll(emojiContainer).map(emoji => {
+        var _message$reactions, _message$reactions$fi, _message$reactions$fi2;
+        const isReacted = message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : (_message$reactions$fi = _message$reactions.filter(reaction => reaction.key === emoji.key)[0]) === null || _message$reactions$fi === void 0 ? void 0 : (_message$reactions$fi2 = _message$reactions$fi.userIds) === null || _message$reactions$fi2 === void 0 ? void 0 : _message$reactions$fi2.some(reactorId => reactorId === userId);
         return /*#__PURE__*/React__default["default"].createElement(ui_ReactionButton, {
           key: emoji.key,
           width: "36px",
           height: "36px",
           selected: isReacted,
-          onClick: function () {
+          onClick: () => {
             closeDropdown();
             toggleReaction(message, emoji.key, isReacted);
           }
@@ -93,16 +90,14 @@ function MessageItemReactionMenu(_a) {
           url: emoji.url,
           width: "28px",
           height: "28px",
-          placeHolder: function (style) {
-            return /*#__PURE__*/React__default["default"].createElement("div", {
-              style: style
-            }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
-              type: ui_Icon.IconTypes.QUESTION,
-              fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
-              width: "28px",
-              height: "28px"
-            }));
-          }
+          placeHolder: style => /*#__PURE__*/React__default["default"].createElement("div", {
+            style: style
+          }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+            type: ui_Icon.IconTypes.QUESTION,
+            fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
+            width: "28px",
+            height: "28px"
+          }))
         }));
       }));
     }

package/cjs/ui/MessageItemReactionMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageItemReactionMenu.js","sources":["../../../src/ui/MessageItemReactionMenu/index.tsx"],"sourcesContent":["import './index.scss';\nimport React, { ReactElement, useRef } from 'react';\nimport type { FileMessage, Reaction, UserMessage } from '@sendbird/chat/message';\nimport type { Emoji, EmojiContainer } from '@sendbird/chat';\n\nimport ContextMenu, { EmojiListItems } from '../ContextMenu';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport IconButton from '../IconButton';\nimport ImageRenderer from '../ImageRenderer';\nimport ReactionButton from '../ReactionButton';\nimport { getClassName, getEmojiListAll, isPendingMessage, isFailedMessage } from '../../utils';\n\ninterface Props {\n  className?: string | Array<string>;\n  message: UserMessage | FileMessage;\n  userId: string;\n  spaceFromTrigger?: Record<string, unknown>;\n  emojiContainer?: EmojiContainer;\n  toggleReaction?: (message: UserMessage | FileMessage, reactionKey: string, isReacted: boolean) => void;\n  setSupposedHover?: (bool: boolean) => void;\n}\n\nexport default function MessageItemReactionMenu({\n  className,\n  message,\n  userId,\n  spaceFromTrigger = {},\n  emojiContainer,\n  toggleReaction,\n  setSupposedHover,\n}: Props): ReactElement {\n  const triggerRef = useRef(null);\n  const containerRef = useRef(null);\n\n  if(isPendingMessage(message) || isFailedMessage(message)) {\n    return null;\n  }\n\n  return (\n    <div\n      className={getClassName([className, 'sendbird-message-item-reaction-menu'])}\n      ref={containerRef}\n    >\n      <ContextMenu\n        menuTrigger={(toggleDropdown: () => void): ReactElement => (\n          <IconButton\n            className=\"sendbird-message-item-reaction-menu__trigger\"\n            ref={triggerRef}\n            width=\"32px\"\n            height=\"32px\"\n            onClick={(): void => {\n              toggleDropdown();\n              setSupposedHover(true);\n            }}\n            onBlur={(): void => {\n              setSupposedHover(false);\n            }}\n          >\n            <Icon\n              className=\"sendbird-message-item-reaction-menu__trigger__icon\"\n              type={IconTypes.EMOJI_MORE}\n              fillColor={IconColors.CONTENT_INVERSE}\n              width=\"24px\"\n              height=\"24px\"\n            />\n          </IconButton>\n        )}\n        menuItems={(close: () => void): ReactElement => {\n          const closeDropdown = (): void => {\n            close();\n            setSupposedHover(false);\n          };\n          return (\n            <EmojiListItems\n              parentRef={triggerRef}\n              parentContainRef={containerRef}\n              closeDropdown={closeDropdown}\n              spaceFromTrigger={spaceFromTrigger}\n            >\n              {getEmojiListAll(emojiContainer).map((emoji: Emoji): ReactElement => {\n                const isReacted: boolean = message?.reactions?.\n                  filter((reaction: Reaction) => reaction.key === emoji.key)[0]?.userIds?.\n                  some((reactorId: string) => reactorId === userId);\n                return (\n                  <ReactionButton\n                    key={emoji.key}\n                    width=\"36px\"\n                    height=\"36px\"\n                    selected={isReacted}\n                    onClick={() => {\n                      closeDropdown();\n                      toggleReaction(message, emoji.key, isReacted);\n                    }}\n                  >\n                    <ImageRenderer\n                      url={emoji.url}\n                      width=\"28px\"\n                      height=\"28px\"\n                      placeHolder={(style) => (\n                        <div style={style}>\n                          <Icon\n                            type={IconTypes.QUESTION}\n                            fillColor={IconColors.ON_BACKGROUND_3}\n                            width=\"28px\"\n                            height=\"28px\"\n                          />\n                        </div>\n                      )}\n                    />\n                  </ReactionButton>\n                );\n              })}\n            </EmojiListItems>\n          );\n        }}\n      />\n    </div>\n  );\n}\n"],"names":["MessageItemReactionMenu","_a","className","message","userId","_b","spaceFromTrigger","emojiContainer","toggleReaction","setSupposedHover","triggerRef","useRef","containerRef","isPendingMessage","isFailedMessage","React","getClassName","ContextMenu","toggleDropdown","IconButton","Icon","IconTypes","EMOJI_MORE","IconColors","CONTENT_INVERSE","close","closeDropdown","EmojiListItems","getEmojiListAll","map","emoji","isReacted","_c","reactions","filter","reaction","key","userIds","some","reactorId","ReactionButton","ImageRenderer","url","style","QUESTION","ON_BACKGROUND_3"],"mappings":"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"}
+{"version":3,"file":"MessageItemReactionMenu.js","sources":["../../../src/ui/MessageItemReactionMenu/index.tsx"],"sourcesContent":["import './index.scss';\nimport React, { ReactElement, useRef } from 'react';\nimport type { FileMessage, Reaction, UserMessage } from '@sendbird/chat/message';\nimport type { Emoji, EmojiContainer } from '@sendbird/chat';\n\nimport ContextMenu, { EmojiListItems } from '../ContextMenu';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport IconButton from '../IconButton';\nimport ImageRenderer from '../ImageRenderer';\nimport ReactionButton from '../ReactionButton';\nimport { getClassName, getEmojiListAll, isPendingMessage, isFailedMessage } from '../../utils';\nimport { SpaceFromTriggerType } from '../../types';\n\ninterface Props {\n  className?: string | Array<string>;\n  message: UserMessage | FileMessage;\n  userId: string;\n  spaceFromTrigger?: SpaceFromTriggerType;\n  emojiContainer?: EmojiContainer;\n  toggleReaction?: (message: UserMessage | FileMessage, reactionKey: string, isReacted: boolean) => void;\n  setSupposedHover?: (bool: boolean) => void;\n}\n\nexport default function MessageItemReactionMenu({\n  className,\n  message,\n  userId,\n  spaceFromTrigger = { x: 0, y: 0 },\n  emojiContainer,\n  toggleReaction,\n  setSupposedHover,\n}: Props): ReactElement {\n  const triggerRef = useRef(null);\n  const containerRef = useRef(null);\n\n  if (isPendingMessage(message) || isFailedMessage(message)) {\n    return null;\n  }\n\n  return (\n    <div\n      className={getClassName([className, 'sendbird-message-item-reaction-menu'])}\n      ref={containerRef}\n    >\n      <ContextMenu\n        menuTrigger={(toggleDropdown: () => void): ReactElement => (\n          <IconButton\n            className=\"sendbird-message-item-reaction-menu__trigger\"\n            ref={triggerRef}\n            width=\"32px\"\n            height=\"32px\"\n            onClick={(): void => {\n              toggleDropdown();\n              setSupposedHover(true);\n            }}\n            onBlur={(): void => {\n              setSupposedHover(false);\n            }}\n          >\n            <Icon\n              className=\"sendbird-message-item-reaction-menu__trigger__icon\"\n              type={IconTypes.EMOJI_MORE}\n              fillColor={IconColors.CONTENT_INVERSE}\n              width=\"24px\"\n              height=\"24px\"\n            />\n          </IconButton>\n        )}\n        menuItems={(close: () => void): ReactElement => {\n          const closeDropdown = (): void => {\n            close();\n            setSupposedHover(false);\n          };\n          return (\n            <EmojiListItems\n              parentRef={triggerRef}\n              parentContainRef={containerRef}\n              closeDropdown={closeDropdown}\n              spaceFromTrigger={spaceFromTrigger}\n            >\n              {getEmojiListAll(emojiContainer).map((emoji: Emoji): ReactElement => {\n                const isReacted: boolean = message?.reactions\n                  ?.filter((reaction: Reaction) => reaction.key === emoji.key)[0]?.userIds\n                  ?.some((reactorId: string) => reactorId === userId);\n                return (\n                  <ReactionButton\n                    key={emoji.key}\n                    width=\"36px\"\n                    height=\"36px\"\n                    selected={isReacted}\n                    onClick={() => {\n                      closeDropdown();\n                      toggleReaction(message, emoji.key, isReacted);\n                    }}\n                  >\n                    <ImageRenderer\n                      url={emoji.url}\n                      width=\"28px\"\n                      height=\"28px\"\n                      placeHolder={(style) => (\n                        <div style={style}>\n                          <Icon\n                            type={IconTypes.QUESTION}\n                            fillColor={IconColors.ON_BACKGROUND_3}\n                            width=\"28px\"\n                            height=\"28px\"\n                          />\n                        </div>\n                      )}\n                    />\n                  </ReactionButton>\n                );\n              })}\n            </EmojiListItems>\n          );\n        }}\n      />\n    </div>\n  );\n}\n"],"names":["MessageItemReactionMenu","_ref","className","message","userId","spaceFromTrigger","x","y","emojiContainer","toggleReaction","setSupposedHover","triggerRef","useRef","containerRef","isPendingMessage","isFailedMessage","React","createElement","getClassName","ref","ContextMenu","menuTrigger","toggleDropdown","IconButton","width","height","onClick","onBlur","Icon","type","IconTypes","EMOJI_MORE","fillColor","IconColors","CONTENT_INVERSE","menuItems","close","closeDropdown","EmojiListItems","parentRef","parentContainRef","getEmojiListAll","map","emoji","_message$reactions","_message$reactions$fi","_message$reactions$fi2","isReacted","reactions","filter","reaction","key","userIds","some","reactorId","ReactionButton","selected","ImageRenderer","url","placeHolder","style","QUESTION","ON_BACKGROUND_3"],"mappings":"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"}

package/cjs/ui/MessageSearchFileItem.js

@@ -1,59 +1,58 @@
 'use strict';
 
-var tslib_es6 = require('../tslib.es6-43854eb1.js');
 var React = require('react');
 var ui_Avatar = require('./Avatar.js');
 var ui_Icon = require('./Icon.js');
-var ui_Label = require('../index-d6ef2a60.js');
-var LocalizationContext = require('../LocalizationContext-2b3f310d.js');
-var index$1 = require('../index-73467e1d.js');
-var index = require('../index-0988ab25.js');
-var index$2 = require('../index-8de59744.js');
+var ui_Label = require('../index-44186883.js');
+var LocalizationContext = require('../LocalizationContext-461a0816.js');
+var index$1 = require('../index-60bf4d5c.js');
+var index = require('../index-60ea6503.js');
+var index$2 = require('../index-bca3d144.js');
 require('./ImageRenderer.js');
-require('../uuid-11d4efe8.js');
+require('../uuid-d86ea01f.js');
 require('prop-types');
-require('../stringSet-91b919f6.js');
-require('../index-de151767.js');
-require('../index-2c5dd48c.js');
+require('../stringSet-d1cee26a.js');
+require('../index-5e6194f8.js');
+require('../index-849c0736.js');
+require('../_rollupPluginBabelHelpers-919a4db3.js');
+require('../utils/message/getOutgoingMessageState.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function getCreatedAt(_a) {
-  var createdAt = _a.createdAt,
-      locale = _a.locale,
-      stringSet = _a.stringSet;
-  var optionalParam = locale ? {
-    locale: locale
+function getCreatedAt(_ref) {
+  let {
+    createdAt,
+    locale,
+    stringSet
+  } = _ref;
+  const optionalParam = locale ? {
+    locale
   } : null;
-
   if (!createdAt) {
     return '';
   }
-
   if (index.isToday(createdAt)) {
     return index$1.format(createdAt, 'p', optionalParam);
   }
-
   if (index.isYesterday(createdAt)) {
     return (stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_STATUS__YESTERDAY) || 'Yesterday';
   }
-
-  if (index$2.isThisYear(createdAt)) {
+  if (index.isThisYear(createdAt)) {
     return index$1.format(createdAt, 'MMM d', optionalParam);
   }
-
   return index$1.format(createdAt, 'yyyy/M/d', optionalParam);
 }
 function getIconOfFileType(message) {
-  var url = message.url;
-  var fileMessageUrl = url;
-  var fileExtension = fileMessageUrl.match(/\.([^.]*?)(?=\?|#|$)/)[1];
-
+  const {
+    url
+  } = message;
+  const fileMessageUrl = url;
+  const fileExtension = fileMessageUrl.match(/\.([^.]*?)(?=\?|#|$)/)[1];
   if (/(jpg|jpeg|png)$/i.test(fileExtension)) {
     return ui_Icon.IconTypes.PHOTO;
-  } else if (/mp4$/i.test(fileExtension)) {
+  } else if (/mp4$/i.test(fileExtension) || index$2.isVoiceMessage(message)) {
     return ui_Icon.IconTypes.PLAY;
   } else if (/mp3/i.test(fileExtension)) {
     return ui_Icon.IconTypes.FILE_AUDIO;
@@ -65,26 +64,32 @@ function getIconOfFileType(message) {
 }
 
 function MessageSearchFileItem(props) {
-  var className = props.className,
-      message = props.message,
-      selected = props.selected,
-      onClick = props.onClick;
-  var createdAt = message.createdAt,
-      url = message.url,
-      name = message.name;
-  var fileMessageUrl = url; // @ts-ignore
-
-  var sender = message.sender || message._sender;
-  var profileUrl = sender.profileUrl,
-      nickname = sender.nickname;
-
-  var _a = LocalizationContext.useLocalization(),
-      stringSet = _a.stringSet,
-      dateLocale = _a.dateLocale;
-
+  const {
+    className,
+    message,
+    selected,
+    onClick
+  } = props;
+  const {
+    createdAt,
+    url,
+    name
+  } = message;
+  // @ts-ignore
+  const sender = message.sender || message._sender;
+  const {
+    profileUrl,
+    nickname
+  } = sender;
+  const {
+    stringSet,
+    dateLocale
+  } = LocalizationContext.useLocalization();
+  const isVoiceMsg = index$2.isVoiceMessage(message);
+  const prettyFilename = isVoiceMsg ? stringSet.VOICE_MESSAGE : name || url;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: tslib_es6.__spreadArray(tslib_es6.__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-message-search-file-item', selected ? 'sendbird-message-search-file-item--selected' : ''], false).join(' '),
-    onClick: function (e) {
+    className: [...(Array.isArray(className) ? className : [className]), 'sendbird-message-search-file-item', selected ? 'sendbird-message-search-file-item--selected' : ''].join(' '),
+    onClick: e => {
       e.stopPropagation();
       onClick(message);
     }
@@ -104,8 +109,8 @@ function MessageSearchFileItem(props) {
     color: ui_Label.LabelColors.ONBACKGROUND_1
   }, nickname || stringSet.NO_NAME), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-message-search-file-item__right__content"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sendbird-message-search-file-item__right__content__type-icon"
+  }, !isVoiceMsg && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: 'sendbird-message-search-file-item__right__content__type-icon'
   }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
     type: getIconOfFileType(message),
     fillColor: ui_Icon.IconColors.PRIMARY,
@@ -115,14 +120,14 @@ function MessageSearchFileItem(props) {
     className: "sendbird-message-search-file-item__right__content__url",
     type: ui_Label.LabelTypography.BODY_2,
     color: ui_Label.LabelColors.ONBACKGROUND_1
-  }, name || fileMessageUrl))), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+  }, prettyFilename))), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
     className: "sendbird-message-search-file-item__message-created-at",
     type: ui_Label.LabelTypography.CAPTION_3,
     color: ui_Label.LabelColors.ONBACKGROUND_2
   }, getCreatedAt({
-    createdAt: createdAt,
+    createdAt,
     locale: dateLocale,
-    stringSet: stringSet
+    stringSet
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-message-search-file-item__right-footer"
   }));

package/cjs/ui/MessageSearchFileItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageSearchFileItem.js","sources":["../../../src/ui/MessageSearchFileItem/utils.ts","../../../src/ui/MessageSearchFileItem/index.tsx"],"sourcesContent":["import type { FileMessage } from '@sendbird/chat/message';\nimport type { Locale } from 'date-fns';\nimport format from 'date-fns/format';\nimport isToday from 'date-fns/isToday';\nimport isThisYear from 'date-fns/isThisYear';\nimport isYesterday from 'date-fns/isYesterday';\nimport { IconTypes } from '../Icon';\n\nexport interface GetCreatedAtProps {\n  createdAt: number;\n  locale?: Locale;\n  stringSet?: Record<string, string>;\n}\n\nexport function getCreatedAt({ createdAt, locale, stringSet }: GetCreatedAtProps): string {\n  const optionalParam = locale ? { locale } : null;\n  if (!createdAt) {\n    return '';\n  }\n  if (isToday(createdAt)) {\n    return format(createdAt, 'p', optionalParam);\n  }\n  if (isYesterday(createdAt)) {\n    return stringSet?.MESSAGE_STATUS__YESTERDAY || 'Yesterday';\n  }\n  if (isThisYear(createdAt)) {\n    return format(createdAt, 'MMM d', optionalParam);\n  }\n  return format(createdAt, 'yyyy/M/d', optionalParam);\n}\n\nexport function getIconOfFileType(message: FileMessage): string {\n  const { url } = message;\n  const fileMessageUrl = url;\n  const fileExtension = (fileMessageUrl.match(/\\.([^.]*?)(?=\\?|#|$)/))[1];\n\n  if (/(jpg|jpeg|png)$/i.test(fileExtension)) {\n    return IconTypes.PHOTO;\n  } else if (/mp4$/i.test(fileExtension)) {\n    return IconTypes.PLAY;\n  } else if (/mp3/i.test(fileExtension)) {\n    return IconTypes.FILE_AUDIO;\n  } else if (/gif/i.test(fileExtension)) {\n    return IconTypes.GIF;\n  } else {\n    return IconTypes.FILE_DOCUMENT;\n  }\n}\n\nexport function truncate(fullText: string, textLimit: number): string {\n  if (fullText.length <= textLimit) return fullText;\n  const separator = '...';\n  const sepLen = separator.length;\n  const charsToShow = textLimit - sepLen;\n  const frontChars = Math.ceil(charsToShow / 2);\n  const backChars = Math.floor(charsToShow / 2);\n  return fullText.substr(0, frontChars) + separator + fullText.substr(fullText.length - backChars);\n}\n","import './index.scss';\nimport React, { ReactElement } from 'react';\nimport type { FileMessage } from '@sendbird/chat/message';\n\nimport Avatar from '../Avatar';\nimport Icon, { IconColors } from '../Icon';\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport { useLocalization } from '../../lib/LocalizationContext';\nimport { getCreatedAt, getIconOfFileType } from './utils';\n\ninterface Props {\n  className?: string | Array<string>;\n  message: FileMessage;\n  selected?: boolean;\n  onClick?: (message: FileMessage) => void;\n}\n\nexport default function MessageSearchFileItem(props: Props): ReactElement {\n  const {\n    className,\n    message,\n    selected,\n    onClick,\n  } = props;\n  const { createdAt, url, name } = message;\n  const fileMessageUrl = url;\n  // @ts-ignore\n  const sender = message.sender || message._sender;\n  const { profileUrl, nickname } = sender;\n  const { stringSet, dateLocale } = useLocalization();\n\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-message-search-file-item',\n        selected ? 'sendbird-message-search-file-item--selected' : '',\n      ].join(' ')}\n      onClick={(e) => {\n        e.stopPropagation();\n        onClick(message);\n      }}\n    >\n      <div className=\"sendbird-message-search-file-item__left\">\n        <Avatar\n          className=\"sendbird-message-search-file-item__left__sender-avatar\"\n          src={profileUrl}\n          alt=\"profile image\"\n          width=\"56px\"\n          height=\"56px\"\n        />\n      </div>\n      <div className=\"sendbird-message-search-file-item__right\">\n        <Label\n          className=\"sendbird-message-search-file-item__right__sender-name\"\n          type={LabelTypography.SUBTITLE_2}\n          color={LabelColors.ONBACKGROUND_1}\n        >\n          {nickname || stringSet.NO_NAME}\n        </Label>\n        <div className=\"sendbird-message-search-file-item__right__content\">\n          <div className=\"sendbird-message-search-file-item__right__content__type-icon\">\n            <Icon\n              type={getIconOfFileType(message)}\n              fillColor={IconColors.PRIMARY}\n              width=\"18px\"\n              height=\"18px\"\n            />\n          </div>\n          <Label\n            className=\"sendbird-message-search-file-item__right__content__url\"\n            type={LabelTypography.BODY_2}\n            color={LabelColors.ONBACKGROUND_1}\n          >\n            {name || fileMessageUrl}\n          </Label>\n        </div>\n      </div>\n      <Label\n        className=\"sendbird-message-search-file-item__message-created-at\"\n        type={LabelTypography.CAPTION_3}\n        color={LabelColors.ONBACKGROUND_2}\n      >\n        {getCreatedAt({ createdAt, locale: dateLocale, stringSet})}\n      </Label>\n      <div className=\"sendbird-message-search-file-item__right-footer\" />\n    </div>\n  );\n}\n"],"names":["getCreatedAt","_a","createdAt","locale","stringSet","optionalParam","isToday","format","isYesterday","MESSAGE_STATUS__YESTERDAY","isThisYear","getIconOfFileType","message","url","fileMessageUrl","fileExtension","match","test","IconTypes","PHOTO","PLAY","FILE_AUDIO","GIF","FILE_DOCUMENT","MessageSearchFileItem","props","className","selected","onClick","name","sender","_sender","profileUrl","nickname","useLocalization","dateLocale","React","__spreadArray","Array","isArray","join","e","stopPropagation","Avatar","Label","LabelTypography","SUBTITLE_2","LabelColors","ONBACKGROUND_1","NO_NAME","Icon","IconColors","PRIMARY","BODY_2","CAPTION_3","ONBACKGROUND_2"],"mappings":"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"}
+{"version":3,"file":"MessageSearchFileItem.js","sources":["../../../src/ui/MessageSearchFileItem/utils.ts","../../../src/ui/MessageSearchFileItem/index.tsx"],"sourcesContent":["import type { FileMessage } from '@sendbird/chat/message';\nimport type { Locale } from 'date-fns';\nimport format from 'date-fns/format';\nimport isToday from 'date-fns/isToday';\nimport isThisYear from 'date-fns/isThisYear';\nimport isYesterday from 'date-fns/isYesterday';\nimport { IconTypes } from '../Icon';\nimport { isVoiceMessage } from '../../utils';\n\nexport interface GetCreatedAtProps {\n  createdAt: number;\n  locale?: Locale;\n  stringSet?: Record<string, string>;\n}\n\nexport function getCreatedAt({ createdAt, locale, stringSet }: GetCreatedAtProps): string {\n  const optionalParam = locale ? { locale } : null;\n  if (!createdAt) {\n    return '';\n  }\n  if (isToday(createdAt)) {\n    return format(createdAt, 'p', optionalParam);\n  }\n  if (isYesterday(createdAt)) {\n    return stringSet?.MESSAGE_STATUS__YESTERDAY || 'Yesterday';\n  }\n  if (isThisYear(createdAt)) {\n    return format(createdAt, 'MMM d', optionalParam);\n  }\n  return format(createdAt, 'yyyy/M/d', optionalParam);\n}\n\nexport function getIconOfFileType(message: FileMessage): string {\n  const { url } = message;\n  const fileMessageUrl = url;\n  const fileExtension = (fileMessageUrl.match(/\\.([^.]*?)(?=\\?|#|$)/))[1];\n\n  if (/(jpg|jpeg|png)$/i.test(fileExtension)) {\n    return IconTypes.PHOTO;\n  } else if (/mp4$/i.test(fileExtension) || isVoiceMessage(message)) {\n    return IconTypes.PLAY;\n  } else if (/mp3/i.test(fileExtension)) {\n    return IconTypes.FILE_AUDIO;\n  } else if (/gif/i.test(fileExtension)) {\n    return IconTypes.GIF;\n  } else {\n    return IconTypes.FILE_DOCUMENT;\n  }\n}\n\nexport function truncate(fullText: string, textLimit: number): string {\n  if (fullText.length <= textLimit) return fullText;\n  const separator = '...';\n  const sepLen = separator.length;\n  const charsToShow = textLimit - sepLen;\n  const frontChars = Math.ceil(charsToShow / 2);\n  const backChars = Math.floor(charsToShow / 2);\n  return fullText.substr(0, frontChars) + separator + fullText.substr(fullText.length - backChars);\n}\n","import './index.scss';\nimport React, { ReactElement } from 'react';\nimport type { FileMessage } from '@sendbird/chat/message';\n\nimport Avatar from '../Avatar';\nimport Icon, { IconColors } from '../Icon';\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport { useLocalization } from '../../lib/LocalizationContext';\nimport { getCreatedAt, getIconOfFileType } from './utils';\nimport { isVoiceMessage } from '../../utils';\n\ninterface Props {\n  className?: string | Array<string>;\n  message: FileMessage;\n  selected?: boolean;\n  onClick?: (message: FileMessage) => void;\n}\n\nexport default function MessageSearchFileItem(props: Props): ReactElement {\n  const {\n    className,\n    message,\n    selected,\n    onClick,\n  } = props;\n  const { createdAt, url, name } = message;\n  // @ts-ignore\n  const sender = message.sender || message._sender;\n  const { profileUrl, nickname } = sender;\n  const { stringSet, dateLocale } = useLocalization();\n  const isVoiceMsg = isVoiceMessage(message);\n  const prettyFilename = isVoiceMsg ? stringSet.VOICE_MESSAGE : (name || url);\n\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-message-search-file-item',\n        selected ? 'sendbird-message-search-file-item--selected' : '',\n      ].join(' ')}\n      onClick={(e) => {\n        e.stopPropagation();\n        onClick(message);\n      }}\n    >\n      <div className=\"sendbird-message-search-file-item__left\">\n        <Avatar\n          className=\"sendbird-message-search-file-item__left__sender-avatar\"\n          src={profileUrl}\n          alt=\"profile image\"\n          width=\"56px\"\n          height=\"56px\"\n        />\n      </div>\n      <div className=\"sendbird-message-search-file-item__right\">\n        <Label\n          className=\"sendbird-message-search-file-item__right__sender-name\"\n          type={LabelTypography.SUBTITLE_2}\n          color={LabelColors.ONBACKGROUND_1}\n        >\n          {nickname || stringSet.NO_NAME}\n        </Label>\n        <div className=\"sendbird-message-search-file-item__right__content\">\n          {!isVoiceMsg && (\n            <div className={'sendbird-message-search-file-item__right__content__type-icon'}>\n              <Icon\n                type={getIconOfFileType(message)}\n                fillColor={IconColors.PRIMARY}\n                width=\"18px\"\n                height=\"18px\"\n              />\n            </div>\n          )}\n          <Label\n            className=\"sendbird-message-search-file-item__right__content__url\"\n            type={LabelTypography.BODY_2}\n            color={LabelColors.ONBACKGROUND_1}\n          >\n            {prettyFilename}\n          </Label>\n        </div>\n      </div>\n      <Label\n        className=\"sendbird-message-search-file-item__message-created-at\"\n        type={LabelTypography.CAPTION_3}\n        color={LabelColors.ONBACKGROUND_2}\n      >\n        {getCreatedAt({ createdAt, locale: dateLocale, stringSet })}\n      </Label>\n      <div className=\"sendbird-message-search-file-item__right-footer\" />\n    </div>\n  );\n}\n"],"names":["getCreatedAt","_ref","createdAt","locale","stringSet","optionalParam","isToday","format","isYesterday","MESSAGE_STATUS__YESTERDAY","isThisYear","getIconOfFileType","message","url","fileMessageUrl","fileExtension","match","test","IconTypes","PHOTO","isVoiceMessage","PLAY","FILE_AUDIO","GIF","FILE_DOCUMENT","MessageSearchFileItem","props","className","selected","onClick","name","sender","_sender","profileUrl","nickname","dateLocale","useLocalization","isVoiceMsg","prettyFilename","VOICE_MESSAGE","React","createElement","Array","isArray","join","e","stopPropagation","Avatar","src","alt","width","height","Label","type","LabelTypography","SUBTITLE_2","color","LabelColors","ONBACKGROUND_1","NO_NAME","Icon","fillColor","IconColors","PRIMARY","BODY_2","CAPTION_3","ONBACKGROUND_2"],"mappings":"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"}

package/cjs/ui/MessageSearchItem.js

@@ -1,70 +1,71 @@
 'use strict';
 
-var tslib_es6 = require('../tslib.es6-43854eb1.js');
 var React = require('react');
-var index$1 = require('../index-73467e1d.js');
-var index = require('../index-0988ab25.js');
-var index$2 = require('../index-8de59744.js');
+var index$1 = require('../index-60bf4d5c.js');
+var index = require('../index-60ea6503.js');
 var ui_Avatar = require('./Avatar.js');
-var ui_Label = require('../index-d6ef2a60.js');
-var LocalizationContext = require('../LocalizationContext-2b3f310d.js');
-require('../index-de151767.js');
-require('../index-2c5dd48c.js');
+var ui_Label = require('../index-44186883.js');
+var LocalizationContext = require('../LocalizationContext-461a0816.js');
+require('../index-5e6194f8.js');
+require('../index-849c0736.js');
 require('./ImageRenderer.js');
 require('./Icon.js');
 require('prop-types');
-require('../uuid-11d4efe8.js');
-require('../stringSet-91b919f6.js');
+require('../uuid-d86ea01f.js');
+require('../stringSet-d1cee26a.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function getCreatedAt (_a) {
-  var createdAt = _a.createdAt,
-      locale = _a.locale,
-      stringSet = _a.stringSet;
-  var optionalParam = locale ? {
-    locale: locale
+// getCreatedAt
+function getCreatedAt (_ref) {
+  let {
+    createdAt,
+    locale,
+    stringSet
+  } = _ref;
+  const optionalParam = locale ? {
+    locale
   } : null;
-
   if (!createdAt) {
     return '';
   }
-
   if (index.isToday(createdAt)) {
     return index$1.format(createdAt, 'p', optionalParam);
   }
-
   if (index.isYesterday(createdAt)) {
     return (stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_STATUS__YESTERDAY) || 'Yesterday';
   }
-
-  if (index$2.isThisYear(createdAt)) {
+  if (index.isThisYear(createdAt)) {
     return index$1.format(createdAt, 'MMM d', optionalParam);
   }
-
   return index$1.format(createdAt, 'yyyy/M/d', optionalParam);
 }
 
-function MessageSearchItem(_a) {
-  var className = _a.className,
-      message = _a.message,
-      selected = _a.selected,
-      onClick = _a.onClick;
-  var createdAt = message.createdAt;
-  var messageText = message.message;
-  var sender = message.sender || message._sender;
-  var profileUrl = sender.profileUrl,
-      nickname = sender.nickname;
-
-  var _b = LocalizationContext.useLocalization(),
-      stringSet = _b.stringSet,
-      dateLocale = _b.dateLocale;
-
+function MessageSearchItem(_ref) {
+  let {
+    className,
+    message,
+    selected,
+    onClick
+  } = _ref;
+  const {
+    createdAt
+  } = message;
+  const messageText = message.message;
+  const sender = message.sender || message._sender;
+  const {
+    profileUrl,
+    nickname
+  } = sender;
+  const {
+    stringSet,
+    dateLocale
+  } = LocalizationContext.useLocalization();
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: tslib_es6.__spreadArray(tslib_es6.__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-message-search-item', selected ? 'sendbird-message-search-item--selected' : ''], false).join(' '),
-    onClick: function (e) {
+    className: [...(Array.isArray(className) ? className : [className]), 'sendbird-message-search-item', selected ? 'sendbird-message-search-item--selected' : ''].join(' '),
+    onClick: e => {
       e.stopPropagation();
       onClick(message);
     }
@@ -91,9 +92,9 @@ function MessageSearchItem(_a) {
     type: ui_Label.LabelTypography.CAPTION_3,
     color: ui_Label.LabelColors.ONBACKGROUND_2
   }, getCreatedAt({
-    createdAt: createdAt,
+    createdAt,
     locale: dateLocale,
-    stringSet: stringSet
+    stringSet
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-message-search-item__right-footer"
   }));