@sendbird/uikit-react 3.6.11-beta.2 → 3.7.0-rc.0

package/cjs/ui/OpenchannelUserMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"OpenchannelUserMessage.js","sources":["../../../src/ui/OpenchannelUserMessage/index.tsx"],"sourcesContent":["import React, {\n  useContext,\n  useRef,\n  useState,\n  ReactElement,\n  useEffect,\n} from 'react';\nimport { UserMessage } from '@sendbird/chat/message';\nimport format from 'date-fns/format';\nimport './index.scss';\n\nimport Avatar from '../Avatar';\nimport ContextMenu, { MenuItems, MenuItem } from '../ContextMenu';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport IconButton from '../IconButton';\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport Loader from '../Loader';\nimport UserProfile from '../UserProfile';\nimport { UserProfileContext } from '../../lib/UserProfileContext';\n\nimport { useLocalization } from '../../lib/LocalizationContext';\nimport { copyToClipboard } from './utils';\nimport uuidv4 from '../../utils/uuid';\nimport {\n  checkIsPending,\n  checkIsFailed,\n  isFineCopy,\n  isFineEdit,\n  isFineResend,\n  isFineDelete,\n  showMenuTrigger,\n  getSenderFromMessage,\n} from '../../utils/openChannelUtils';\nimport { useMediaQueryContext } from '../../lib/MediaQueryContext';\nimport OpenChannelMobileMenu from '../OpenChannelMobileMenu';\nimport useLongPress from '../../hooks/useLongPress';\nimport { isEditedMessage } from '../../utils';\n\ninterface OpenChannelUserMessageProps {\n  className?: string | Array<string>;\n  message: UserMessage;\n  isOperator?: boolean;\n  isEphemeral?: boolean;\n  userId: string;\n  disabled?: boolean;\n  showEdit(bool: boolean): void;\n  showRemove(bool: boolean): void;\n  resendMessage(message: UserMessage): void;\n  chainTop?: boolean;\n  chainBottom?: boolean;\n}\n\nexport default function OpenchannelUserMessage({\n  className,\n  message,\n  isOperator,\n  isEphemeral = false,\n  userId,\n  resendMessage,\n  disabled,\n  showEdit,\n  showRemove,\n  chainTop,\n}: OpenChannelUserMessageProps): ReactElement {\n  // hooks\n  const { stringSet, dateLocale } = useLocalization();\n  const { disableUserProfile, renderUserProfile } = useContext<UserProfileContext>(UserProfileContext);\n  const messageRef = useRef(null);\n  const avatarRef = useRef(null);\n  const contextMenuRef = useRef(null);\n  const mobileMenuRef = useRef(null);\n  const [contextStyle, setContextStyle] = useState({});\n  const [contextMenu, setContextMenu] = useState(false);\n\n  // consts\n  const status = message?.sendingStatus;\n  const isPending = checkIsPending(status);\n  const isFailed = checkIsFailed(status);\n  const sender = getSenderFromMessage(message);\n\n  // place context menu top depending clientHeight of message component\n  useEffect(() => {\n    if (messageRef?.current?.clientHeight > 36) {\n      setContextStyle({ top: '8px ' });\n    } else {\n      setContextStyle({ top: '2px' });\n    }\n  }, [window.innerWidth]);\n\n  const onLongPress = useLongPress({\n    onLongPress: () => {\n      setContextMenu(true);\n    },\n  });\n\n  const { isMobile } = useMediaQueryContext();\n  if (!message || message.messageType !== 'user') {\n    return <></>;\n  }\n\n  return (\n    <>\n      <div\n        className={[\n          ...(Array.isArray(className) ? className : [className]),\n          'sendbird-openchannel-user-message',\n        ].join(' ')}\n        ref={messageRef}\n      >\n        <div className=\"sendbird-openchannel-user-message__left\">\n          {\n            !chainTop && (\n              <ContextMenu\n                menuTrigger={(toggleDropdown) => (\n                  <Avatar\n                    className=\"sendbird-openchannel-user-message__left__avatar\"\n                    src={sender.profileUrl || ''}\n                    ref={avatarRef}\n                    width=\"28px\"\n                    height=\"28px\"\n                    onClick={() => {\n                      if (!disableUserProfile) {\n                        toggleDropdown();\n                      }\n                    }}\n                  />\n                )}\n                menuItems={(closeDropdown) => (\n                  <MenuItems\n                    parentRef={avatarRef}\n                    parentContainRef={avatarRef}\n                    closeDropdown={closeDropdown}\n                    style={{ paddingTop: '0px', paddingBottom: '0px' }}\n                  >\n                    {\n                      renderUserProfile\n                        ? (\n                          renderUserProfile({\n                            user: sender,\n                            close: closeDropdown,\n                          })\n                        )\n                        : (\n                          <UserProfile\n                            user={sender}\n                            onSuccess={closeDropdown}\n                            disableMessaging\n                          />\n                        )\n                    }\n                  </MenuItems>\n                )}\n              />\n            )\n          }\n        </div>\n        <div className=\"sendbird-openchannel-user-message__right\">\n          {\n            !chainTop && (\n              <div className=\"sendbird-openchannel-user-message__right__top\">\n                <Label\n                  className=\"sendbird-openchannel-user-message__right__top__sender-name\"\n                  type={LabelTypography.CAPTION_2}\n                  color={isOperator ? LabelColors.SECONDARY_3 : LabelColors.ONBACKGROUND_2}\n                >\n                  {\n                    sender && (\n                      sender.friendName\n                      || sender.nickname\n                      || sender.userId\n                    )\n                  }\n                </Label>\n                <Label\n                  className=\"sendbird-openchannel-user-message__right__top__sent-at\"\n                  type={LabelTypography.CAPTION_3}\n                  color={LabelColors.ONBACKGROUND_3}\n                >\n                  {\n                    message?.createdAt && (\n                      format(message?.createdAt, 'p', {\n                        locale: dateLocale,\n                      })\n                    )\n                  }\n                </Label>\n              </div>\n            )\n          }\n          <div\n            {...(isMobile ? { ...onLongPress } : {})}\n            className=\"sendbird-openchannel-user-message__right__bottom\" ref={mobileMenuRef}>\n            <Label\n              className=\"sendbird-openchannel-user-message__right__bottom__message\"\n              type={LabelTypography.BODY_1}\n              color={LabelColors.ONBACKGROUND_1}\n            >\n              {message?.message}\n              {isEditedMessage(message) && (\n                <Label\n                  key={uuidv4()}\n                  type={LabelTypography.BODY_1}\n                  color={LabelColors.ONBACKGROUND_2}\n                  calssName=\"sendbird-openchannel-user-message-word\"\n                >\n                  {` ${stringSet.MESSAGE_EDITED} `}\n                </Label>\n              )}\n            </Label>\n          </div>\n          {\n            (isPending || isFailed) && (\n              <div className=\"sendbird-openchannel-user-message__right__tail\">\n                {\n                  isPending && (\n                    <Loader\n                      width=\"16px\"\n                      height=\"16px\"\n                    >\n                      <Icon\n                        className=\"sendbird-openchannel-user-message__right__tail__pending\"\n                        type={IconTypes.SPINNER}\n                        fillColor={IconColors.PRIMARY}\n                        width=\"16px\"\n                        height=\"16px\"\n                      />\n                    </Loader>\n                  )\n                }\n                {\n                  isFailed && (\n                    <Icon\n                      className=\"sendbird-openchannel-user-message__right__tail__failed\"\n                      type={IconTypes.ERROR}\n                      fillColor={IconColors.ERROR}\n                      width=\"16px\"\n                      height=\"16px\"\n                    />\n                  )\n                }\n              </div>\n            )\n          }\n        </div>\n        {\n          !isMobile && (\n            <div\n              className=\"sendbird-openchannel-user-message__context-menu\"\n              ref={contextMenuRef}\n              style={contextStyle}\n            >\n              <ContextMenu\n                menuTrigger={(toggleDropdown) => (\n                  showMenuTrigger({ message: message, userId: userId, status: status }) && (\n                    <IconButton\n                      className=\"sendbird-openchannel-user-message__context-menu--icon\"\n                      width=\"32px\"\n                      height=\"32px\"\n                      onClick={() => {\n                        toggleDropdown();\n                      }}\n                    >\n                      <Icon\n                        type={IconTypes.MORE}\n                        fillColor={IconColors.CONTENT_INVERSE}\n                        width=\"24px\"\n                        height=\"24px\"\n                      />\n                    </IconButton>\n                  )\n                )}\n                menuItems={(closeDropdown) => (\n                  <MenuItems\n                    parentRef={contextMenuRef}\n                    parentContainRef={contextMenuRef}\n                    closeDropdown={closeDropdown}\n                    openLeft\n                  >\n                    {\n                      isFineCopy({ message: message, userId: userId, status: status }) && (\n                        <MenuItem\n                          className=\"sendbird-openchannel-user-message__context-menu__copy\"\n                          onClick={() => {\n                            copyToClipboard(message.message);\n                            closeDropdown();\n                          }}\n                          dataSbId=\"open_channel_user_message_menu_copy\"\n                        >\n                          {stringSet.CONTEXT_MENU_DROPDOWN__COPY}\n                        </MenuItem>\n                      )\n                    }\n                    {\n                      (!isEphemeral && isFineEdit({ message: message, userId: userId, status: status })) && (\n                        <MenuItem\n                          className=\"sendbird-openchannel-user-message__context-menu__edit\"\n                          onClick={() => {\n                            if (disabled) {\n                              return;\n                            }\n                            showEdit(true);\n                            closeDropdown();\n                          }}\n                          dataSbId=\"open_channel_user_message_menu_edit\"\n                        >\n                          {stringSet.CONTEXT_MENU_DROPDOWN__EDIT}\n                        </MenuItem>\n                      )\n                    }\n                    {\n                      isFineResend({ message: message, userId: userId, status: status }) && (\n                        <MenuItem\n                          className=\"sendbird-openchannel-user-message__context-menu__resend\"\n                          onClick={() => {\n                            resendMessage(message);\n                            closeDropdown();\n                          }}\n                          dataSbId=\"open_channel_user_message_menu_resend\"\n                        >\n                          {stringSet.CONTEXT_MENU_DROPDOWN__RESEND}\n                        </MenuItem>\n                      )\n                    }\n                    {\n                      (!isEphemeral && isFineDelete({ message: message, userId: userId, status: status })) && (\n                        <MenuItem\n                          className=\"sendbird-openchannel-user-message__context-menu__delete\"\n                          onClick={() => {\n                            if (disabled) {\n                              return;\n                            }\n                            showRemove(true);\n                            closeDropdown();\n                          }}\n                          dataSbId=\"open_channel_user_message_menu_delete\"\n                        >\n                          {stringSet.CONTEXT_MENU_DROPDOWN__DELETE}\n                        </MenuItem>\n                      )\n                    }\n                  </MenuItems>\n                )}\n              />\n            </div>\n\n          )\n        }\n      </div>\n      {\n        contextMenu && (\n          <OpenChannelMobileMenu\n            message={message}\n            parentRef={mobileMenuRef}\n            hideMenu={() => {\n              setContextMenu(false);\n            }}\n            showRemove={() => {\n              setContextMenu(false);\n              showRemove(true);\n            }}\n            showEdit={() => {\n              setContextMenu(false);\n              showEdit(true);\n            }}\n            copyToClipboard={() => {\n              setContextMenu(false);\n              copyToClipboard(message?.message);\n            }}\n            resendMessage={() => {\n              setContextMenu(false);\n              resendMessage(message);\n            }}\n          />\n        )\n      }\n    </>\n  );\n}\n"],"names":["OpenchannelUserMessage","_ref","className","message","isOperator","isEphemeral","userId","resendMessage","disabled","showEdit","showRemove","chainTop","stringSet","dateLocale","useLocalization","disableUserProfile","renderUserProfile","useContext","UserProfileContext","messageRef","useRef","avatarRef","contextMenuRef","mobileMenuRef","contextStyle","setContextStyle","useState","contextMenu","setContextMenu","status","sendingStatus","isPending","checkIsPending","isFailed","checkIsFailed","sender","getSenderFromMessage","useEffect","_messageRef$current","current","clientHeight","top","window","innerWidth","onLongPress","useLongPress","isMobile","useMediaQueryContext","messageType","React","createElement","Fragment","Array","isArray","join","ref","ContextMenu","menuTrigger","toggleDropdown","Avatar","src","profileUrl","width","height","onClick","menuItems","closeDropdown","MenuItems","parentRef","parentContainRef","style","paddingTop","paddingBottom","user","close","UserProfile","onSuccess","disableMessaging","Label","type","LabelTypography","CAPTION_2","color","LabelColors","SECONDARY_3","ONBACKGROUND_2","friendName","nickname","CAPTION_3","ONBACKGROUND_3","createdAt","format","locale","_extends","_objectSpread","BODY_1","ONBACKGROUND_1","isEditedMessage","key","uuidv4","calssName","MESSAGE_EDITED","Loader","Icon","IconTypes","SPINNER","fillColor","IconColors","PRIMARY","ERROR","showMenuTrigger","IconButton","MORE","CONTENT_INVERSE","openLeft","isFineCopy","MenuItem","copyToClipboard","dataSbId","CONTEXT_MENU_DROPDOWN__COPY","isFineEdit","CONTEXT_MENU_DROPDOWN__EDIT","isFineResend","CONTEXT_MENU_DROPDOWN__RESEND","isFineDelete","CONTEXT_MENU_DROPDOWN__DELETE","OpenChannelMobileMenu","hideMenu"],"mappings":"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"}
+{"version":3,"file":"OpenchannelUserMessage.js","sources":["../../../src/ui/OpenchannelUserMessage/index.tsx"],"sourcesContent":["import React, {\n  useContext,\n  useRef,\n  useState,\n  ReactElement,\n  useEffect,\n} from 'react';\nimport { UserMessage } from '@sendbird/chat/message';\nimport format from 'date-fns/format';\nimport './index.scss';\n\nimport Avatar from '../Avatar';\nimport ContextMenu, { MenuItems, MenuItem } from '../ContextMenu';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport IconButton from '../IconButton';\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport Loader from '../Loader';\nimport UserProfile from '../UserProfile';\nimport { UserProfileContext } from '../../lib/UserProfileContext';\n\nimport { useLocalization } from '../../lib/LocalizationContext';\nimport { copyToClipboard } from './utils';\nimport uuidv4 from '../../utils/uuid';\nimport {\n  checkIsPending,\n  checkIsFailed,\n  isFineCopy,\n  isFineEdit,\n  isFineResend,\n  isFineDelete,\n  showMenuTrigger,\n  getSenderFromMessage,\n} from '../../utils/openChannelUtils';\nimport { useMediaQueryContext } from '../../lib/MediaQueryContext';\nimport OpenChannelMobileMenu from '../OpenChannelMobileMenu';\nimport useLongPress from '../../hooks/useLongPress';\nimport { isEditedMessage } from '../../utils';\n\ninterface OpenChannelUserMessageProps {\n  className?: string | Array<string>;\n  message: UserMessage;\n  isOperator?: boolean;\n  isEphemeral?: boolean;\n  userId: string;\n  disabled?: boolean;\n  showEdit(bool: boolean): void;\n  showRemove(bool: boolean): void;\n  resendMessage(message: UserMessage): void;\n  chainTop?: boolean;\n  chainBottom?: boolean;\n}\n\nexport default function OpenchannelUserMessage({\n  className,\n  message,\n  isOperator,\n  isEphemeral = false,\n  userId,\n  resendMessage,\n  disabled,\n  showEdit,\n  showRemove,\n  chainTop,\n}: OpenChannelUserMessageProps): ReactElement {\n  // hooks\n  const { stringSet, dateLocale } = useLocalization();\n  const { disableUserProfile, renderUserProfile } = useContext(UserProfileContext);\n  const messageRef = useRef(null);\n  const avatarRef = useRef(null);\n  const contextMenuRef = useRef(null);\n  const mobileMenuRef = useRef(null);\n  const [contextStyle, setContextStyle] = useState({});\n  const [contextMenu, setContextMenu] = useState(false);\n\n  // consts\n  const status = message?.sendingStatus;\n  const isPending = checkIsPending(status);\n  const isFailed = checkIsFailed(status);\n  const sender = getSenderFromMessage(message);\n\n  // place context menu top depending clientHeight of message component\n  useEffect(() => {\n    if (messageRef?.current?.clientHeight > 36) {\n      setContextStyle({ top: '8px ' });\n    } else {\n      setContextStyle({ top: '2px' });\n    }\n  }, [window.innerWidth]);\n\n  const onLongPress = useLongPress({\n    onLongPress: () => {\n      setContextMenu(true);\n    },\n  });\n\n  const { isMobile } = useMediaQueryContext();\n  if (!message || message.messageType !== 'user') {\n    return <></>;\n  }\n\n  return (\n    <>\n      <div\n        className={[\n          ...(Array.isArray(className) ? className : [className]),\n          'sendbird-openchannel-user-message',\n        ].join(' ')}\n        ref={messageRef}\n      >\n        <div className=\"sendbird-openchannel-user-message__left\">\n          {\n            !chainTop && (\n              <ContextMenu\n                menuTrigger={(toggleDropdown) => (\n                  <Avatar\n                    className=\"sendbird-openchannel-user-message__left__avatar\"\n                    src={sender.profileUrl || ''}\n                    ref={avatarRef}\n                    width=\"28px\"\n                    height=\"28px\"\n                    onClick={() => {\n                      if (!disableUserProfile) {\n                        toggleDropdown();\n                      }\n                    }}\n                  />\n                )}\n                menuItems={(closeDropdown) => (\n                  <MenuItems\n                    parentRef={avatarRef}\n                    parentContainRef={avatarRef}\n                    closeDropdown={closeDropdown}\n                    style={{ paddingTop: '0px', paddingBottom: '0px' }}\n                  >\n                    {\n                      renderUserProfile\n                        ? (\n                          renderUserProfile({\n                            user: sender,\n                            close: closeDropdown,\n                            currentUserId: userId,\n                          })\n                        )\n                        : (\n                          <UserProfile\n                            user={sender}\n                            onSuccess={closeDropdown}\n                            disableMessaging\n                          />\n                        )\n                    }\n                  </MenuItems>\n                )}\n              />\n            )\n          }\n        </div>\n        <div className=\"sendbird-openchannel-user-message__right\">\n          {\n            !chainTop && (\n              <div className=\"sendbird-openchannel-user-message__right__top\">\n                <Label\n                  className=\"sendbird-openchannel-user-message__right__top__sender-name\"\n                  type={LabelTypography.CAPTION_2}\n                  color={isOperator ? LabelColors.SECONDARY_3 : LabelColors.ONBACKGROUND_2}\n                >\n                  {\n                    sender && (\n                      sender.friendName\n                      || sender.nickname\n                      || sender.userId\n                    )\n                  }\n                </Label>\n                <Label\n                  className=\"sendbird-openchannel-user-message__right__top__sent-at\"\n                  type={LabelTypography.CAPTION_3}\n                  color={LabelColors.ONBACKGROUND_3}\n                >\n                  {\n                    message?.createdAt && (\n                      format(message?.createdAt, 'p', {\n                        locale: dateLocale,\n                      })\n                    )\n                  }\n                </Label>\n              </div>\n            )\n          }\n          <div\n            {...(isMobile ? { ...onLongPress } : {})}\n            className=\"sendbird-openchannel-user-message__right__bottom\" ref={mobileMenuRef}>\n            <Label\n              className=\"sendbird-openchannel-user-message__right__bottom__message\"\n              type={LabelTypography.BODY_1}\n              color={LabelColors.ONBACKGROUND_1}\n            >\n              {message?.message}\n              {isEditedMessage(message) && (\n                <Label\n                  key={uuidv4()}\n                  type={LabelTypography.BODY_1}\n                  color={LabelColors.ONBACKGROUND_2}\n                  calssName=\"sendbird-openchannel-user-message-word\"\n                >\n                  {` ${stringSet.MESSAGE_EDITED} `}\n                </Label>\n              )}\n            </Label>\n          </div>\n          {\n            (isPending || isFailed) && (\n              <div className=\"sendbird-openchannel-user-message__right__tail\">\n                {\n                  isPending && (\n                    <Loader\n                      width=\"16px\"\n                      height=\"16px\"\n                    >\n                      <Icon\n                        className=\"sendbird-openchannel-user-message__right__tail__pending\"\n                        type={IconTypes.SPINNER}\n                        fillColor={IconColors.PRIMARY}\n                        width=\"16px\"\n                        height=\"16px\"\n                      />\n                    </Loader>\n                  )\n                }\n                {\n                  isFailed && (\n                    <Icon\n                      className=\"sendbird-openchannel-user-message__right__tail__failed\"\n                      type={IconTypes.ERROR}\n                      fillColor={IconColors.ERROR}\n                      width=\"16px\"\n                      height=\"16px\"\n                    />\n                  )\n                }\n              </div>\n            )\n          }\n        </div>\n        {\n          !isMobile && (\n            <div\n              className=\"sendbird-openchannel-user-message__context-menu\"\n              ref={contextMenuRef}\n              style={contextStyle}\n            >\n              <ContextMenu\n                menuTrigger={(toggleDropdown) => (\n                  showMenuTrigger({ message: message, userId: userId, status: status }) && (\n                    <IconButton\n                      className=\"sendbird-openchannel-user-message__context-menu--icon\"\n                      width=\"32px\"\n                      height=\"32px\"\n                      onClick={() => {\n                        toggleDropdown();\n                      }}\n                    >\n                      <Icon\n                        type={IconTypes.MORE}\n                        fillColor={IconColors.CONTENT_INVERSE}\n                        width=\"24px\"\n                        height=\"24px\"\n                      />\n                    </IconButton>\n                  )\n                )}\n                menuItems={(closeDropdown) => (\n                  <MenuItems\n                    parentRef={contextMenuRef}\n                    parentContainRef={contextMenuRef}\n                    closeDropdown={closeDropdown}\n                    openLeft\n                  >\n                    {\n                      isFineCopy({ message: message, userId: userId, status: status }) && (\n                        <MenuItem\n                          className=\"sendbird-openchannel-user-message__context-menu__copy\"\n                          onClick={() => {\n                            copyToClipboard(message.message);\n                            closeDropdown();\n                          }}\n                          dataSbId=\"open_channel_user_message_menu_copy\"\n                        >\n                          {stringSet.CONTEXT_MENU_DROPDOWN__COPY}\n                        </MenuItem>\n                      )\n                    }\n                    {\n                      (!isEphemeral && isFineEdit({ message: message, userId: userId, status: status })) && (\n                        <MenuItem\n                          className=\"sendbird-openchannel-user-message__context-menu__edit\"\n                          onClick={() => {\n                            if (disabled) {\n                              return;\n                            }\n                            showEdit(true);\n                            closeDropdown();\n                          }}\n                          dataSbId=\"open_channel_user_message_menu_edit\"\n                        >\n                          {stringSet.CONTEXT_MENU_DROPDOWN__EDIT}\n                        </MenuItem>\n                      )\n                    }\n                    {\n                      isFineResend({ message: message, userId: userId, status: status }) && (\n                        <MenuItem\n                          className=\"sendbird-openchannel-user-message__context-menu__resend\"\n                          onClick={() => {\n                            resendMessage(message);\n                            closeDropdown();\n                          }}\n                          dataSbId=\"open_channel_user_message_menu_resend\"\n                        >\n                          {stringSet.CONTEXT_MENU_DROPDOWN__RESEND}\n                        </MenuItem>\n                      )\n                    }\n                    {\n                      (!isEphemeral && isFineDelete({ message: message, userId: userId, status: status })) && (\n                        <MenuItem\n                          className=\"sendbird-openchannel-user-message__context-menu__delete\"\n                          onClick={() => {\n                            if (disabled) {\n                              return;\n                            }\n                            showRemove(true);\n                            closeDropdown();\n                          }}\n                          dataSbId=\"open_channel_user_message_menu_delete\"\n                        >\n                          {stringSet.CONTEXT_MENU_DROPDOWN__DELETE}\n                        </MenuItem>\n                      )\n                    }\n                  </MenuItems>\n                )}\n              />\n            </div>\n\n          )\n        }\n      </div>\n      {\n        contextMenu && (\n          <OpenChannelMobileMenu\n            message={message}\n            parentRef={mobileMenuRef}\n            hideMenu={() => {\n              setContextMenu(false);\n            }}\n            showRemove={() => {\n              setContextMenu(false);\n              showRemove(true);\n            }}\n            showEdit={() => {\n              setContextMenu(false);\n              showEdit(true);\n            }}\n            copyToClipboard={() => {\n              setContextMenu(false);\n              copyToClipboard(message?.message);\n            }}\n            resendMessage={() => {\n              setContextMenu(false);\n              resendMessage(message);\n            }}\n          />\n        )\n      }\n    </>\n  );\n}\n"],"names":["OpenchannelUserMessage","_a","className","message","isOperator","_b","isEphemeral","userId","resendMessage","disabled","showEdit","showRemove","chainTop","_c","useLocalization","stringSet","dateLocale","_d","useContext","UserProfileContext","disableUserProfile","renderUserProfile","messageRef","useRef","avatarRef","contextMenuRef","mobileMenuRef","_e","useState","contextStyle","setContextStyle","_f","contextMenu","setContextMenu","status","sendingStatus","isPending","checkIsPending","isFailed","checkIsFailed","sender","getSenderFromMessage","useEffect","current","clientHeight","top","window","innerWidth","onLongPress","useLongPress","isMobile","useMediaQueryContext","messageType","React","createElement","Fragment","__spreadArray","Array","isArray","join","ref","ContextMenu","menuTrigger","toggleDropdown","Avatar","src","profileUrl","width","height","onClick","menuItems","closeDropdown","MenuItems","parentRef","parentContainRef","style","paddingTop","paddingBottom","user","close","currentUserId","UserProfile","onSuccess","disableMessaging","Label","type","LabelTypography","CAPTION_2","color","LabelColors","SECONDARY_3","ONBACKGROUND_2","friendName","nickname","CAPTION_3","ONBACKGROUND_3","createdAt","format","locale","_extends","__assign","BODY_1","ONBACKGROUND_1","isEditedMessage","key","uuidv4","calssName","concat","MESSAGE_EDITED","Loader","Icon","IconTypes","SPINNER","fillColor","IconColors","PRIMARY","ERROR","showMenuTrigger","IconButton","MORE","CONTENT_INVERSE","openLeft","isFineCopy","MenuItem","copyToClipboard","dataSbId","CONTEXT_MENU_DROPDOWN__COPY","isFineEdit","CONTEXT_MENU_DROPDOWN__EDIT","isFineResend","CONTEXT_MENU_DROPDOWN__RESEND","isFineDelete","CONTEXT_MENU_DROPDOWN__DELETE","OpenChannelMobileMenu","hideMenu"],"mappings":"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"}

package/cjs/ui/PlaceHolder.js

@@ -2,18 +2,116 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('react');
-var ui_PlaceHolder = require('../index-7f41c4b6.js');
-require('../LocalizationContext-482c1343.js');
-require('./Icon.js');
-require('../index-18720f0d.js');
-require('./Loader.js');
-require('../stringSet-d00535a5.js');
-require('../index-d04f312e.js');
+var tslib_es6 = require('../tslib.es6-2f2b0bca.js');
+var React = require('react');
+var LocalizationContext = require('../LocalizationContext-5009012e.js');
+var ui_Icon = require('./Icon.js');
+var ui_Label = require('../index-35820a94.js');
+var ui_Loader = require('./Loader.js');
+require('../stringSet-98b52c49.js');
+require('../index-fd8a0abb.js');
 require('prop-types');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-exports.PlaceHolderTypes = ui_PlaceHolder.PlaceHolderTypes;
-exports["default"] = ui_PlaceHolder.PlaceHolder;
+var PlaceHolderTypes = {
+  LOADING: 'LOADING',
+  NO_CHANNELS: 'NO_CHANNELS',
+  NO_MESSAGES: 'NO_MESSAGES',
+  WRONG: 'WRONG',
+  SEARCH_IN: 'SEARCH_IN',
+  SEARCHING: 'SEARCHING',
+  NO_RESULTS: 'NO_RESULTS'
+};
+function PlaceHolder(_a) {
+  var _b = _a.className,
+    className = _b === void 0 ? '' : _b,
+    type = _a.type,
+    iconSize = _a.iconSize,
+    _c = _a.searchInString,
+    searchInString = _c === void 0 ? '' : _c,
+    _d = _a.retryToConnect,
+    retryToConnect = _d === void 0 ? null : _d;
+  var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: tslib_es6.__spreadArray(tslib_es6.__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-place-holder'], false).join(' ')
+  }, type === PlaceHolderTypes.LOADING && /*#__PURE__*/React__default["default"].createElement(ui_Loader, {
+    width: iconSize || '48px',
+    height: iconSize || '48px'
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    type: ui_Icon.IconTypes.SPINNER,
+    fillColor: ui_Icon.IconColors.PRIMARY,
+    width: iconSize || '48px',
+    height: iconSize || '48px'
+  })), (type === PlaceHolderTypes.NO_CHANNELS || type === PlaceHolderTypes.NO_MESSAGES || type === PlaceHolderTypes.WRONG) && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-place-holder__body"
+  }, type === PlaceHolderTypes.NO_CHANNELS && /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    className: "sendbird-place-holder__body__icon",
+    type: ui_Icon.IconTypes.CHAT,
+    fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
+    width: iconSize || '64px',
+    height: iconSize || '64px'
+  }), type === PlaceHolderTypes.WRONG && /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    className: "sendbird-place-holder__body__icon",
+    type: ui_Icon.IconTypes.ERROR,
+    fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
+    width: iconSize || '64px',
+    height: iconSize || '64px'
+  }), type === PlaceHolderTypes.NO_MESSAGES && /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    className: "sendbird-place-holder__body__icon",
+    type: ui_Icon.IconTypes.MESSAGE,
+    fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
+    width: iconSize || '64px',
+    height: iconSize || '64px'
+  }), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-place-holder__body__text",
+    type: ui_Label.LabelTypography.BODY_1,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, type === PlaceHolderTypes.NO_CHANNELS && stringSet.PLACE_HOLDER__NO_CHANNEL, type === PlaceHolderTypes.WRONG && stringSet.PLACE_HOLDER__WRONG, type === PlaceHolderTypes.NO_MESSAGES && stringSet.PLACE_HOLDER__NO_MESSAGES), retryToConnect && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-place-holder__body__reconnect",
+    role: "button",
+    onClick: retryToConnect,
+    onKeyPress: retryToConnect,
+    tabIndex: 0
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    className: "sendbird-place-holder__body__reconnect__icon",
+    type: ui_Icon.IconTypes.REFRESH,
+    fillColor: ui_Icon.IconColors.PRIMARY,
+    width: "20px",
+    height: "20px"
+  }), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-place-holder__body__reconnect__text",
+    type: ui_Label.LabelTypography.BUTTON_1,
+    color: ui_Label.LabelColors.PRIMARY
+  }, stringSet.PLACE_HOLDER__RETRY_TO_CONNECT))), (type === PlaceHolderTypes.NO_RESULTS || type === PlaceHolderTypes.SEARCH_IN || type === PlaceHolderTypes.SEARCHING) && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-place-holder__body--align-top"
+  }, type === PlaceHolderTypes.SEARCH_IN && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-place-holder__body--align-top__text"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-place-holder__body--align-top__text__search-in",
+    type: ui_Label.LabelTypography.BUTTON_2,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, stringSet.SEARCH_IN), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-place-holder__body--align-top__text__channel-name",
+    type: ui_Label.LabelTypography.BUTTON_2,
+    color: ui_Label.LabelColors.PRIMARY
+  }, "'".concat(searchInString)), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-place-holder__body--align-top__text__quote",
+    type: ui_Label.LabelTypography.BUTTON_2,
+    color: ui_Label.LabelColors.PRIMARY
+  }, '\'')), type === PlaceHolderTypes.SEARCHING && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-place-hlder__body--align-top__searching",
+    type: ui_Label.LabelTypography.BODY_1,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, stringSet.SEARCHING), type === PlaceHolderTypes.NO_RESULTS && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-place-hlder__body--align-top__no-result",
+    type: ui_Label.LabelTypography.BODY_1,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, stringSet.NO_SEARCHED_MESSAGE)));
+}
+
+exports.PlaceHolderTypes = PlaceHolderTypes;
+exports["default"] = PlaceHolder;
 //# sourceMappingURL=PlaceHolder.js.map

package/cjs/ui/PlaceHolder.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlaceHolder.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlaceHolder.js","sources":["../../../src/ui/PlaceHolder/index.tsx"],"sourcesContent":["import React, { ReactElement, useContext } from 'react';\n\nimport './index.scss';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\n\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport Label, { LabelColors, LabelTypography } from '../Label';\nimport Loader from '../Loader';\n\nexport const PlaceHolderTypes = {\n  LOADING: 'LOADING',\n  NO_CHANNELS: 'NO_CHANNELS',\n  NO_MESSAGES: 'NO_MESSAGES',\n  WRONG: 'WRONG',\n  SEARCH_IN: 'SEARCH_IN',\n  SEARCHING: 'SEARCHING',\n  NO_RESULTS: 'NO_RESULTS',\n} as const;\n\nexport interface PlaceHolderProps {\n  className?: string | Array<string>;\n  type: keyof typeof PlaceHolderTypes;\n  iconSize?: string | number;\n  searchInString?: string;\n  retryToConnect?: () => void;\n}\n\nexport default function PlaceHolder({\n  className = '',\n  type,\n  iconSize,\n  searchInString = '',\n  retryToConnect = null,\n}: PlaceHolderProps): ReactElement {\n  const { stringSet } = useContext(LocalizationContext);\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-place-holder',\n      ].join(' ')}\n    >\n      {\n        type === PlaceHolderTypes.LOADING && (\n          <Loader\n            width={iconSize || '48px'}\n            height={iconSize || '48px'}\n          >\n            <Icon\n              type={IconTypes.SPINNER}\n              fillColor={IconColors.PRIMARY}\n              width={iconSize || '48px'}\n              height={iconSize || '48px'}\n            />\n          </Loader>\n        )\n      }\n      {\n        (\n          type === PlaceHolderTypes.NO_CHANNELS\n          || type === PlaceHolderTypes.NO_MESSAGES\n          || type === PlaceHolderTypes.WRONG\n        ) && (\n          <div className=\"sendbird-place-holder__body\">\n            {\n              type === PlaceHolderTypes.NO_CHANNELS && (\n                <Icon\n                  className=\"sendbird-place-holder__body__icon\"\n                  type={IconTypes.CHAT}\n                  fillColor={IconColors.ON_BACKGROUND_3}\n                  width={iconSize || '64px'}\n                  height={iconSize || '64px'}\n                />\n              )\n            }\n            {\n              type === PlaceHolderTypes.WRONG && (\n                <Icon\n                  className=\"sendbird-place-holder__body__icon\"\n                  type={IconTypes.ERROR}\n                  fillColor={IconColors.ON_BACKGROUND_3}\n                  width={iconSize || '64px'}\n                  height={iconSize || '64px'}\n                />\n              )\n            }\n            {\n              type === PlaceHolderTypes.NO_MESSAGES && (\n                <Icon\n                  className=\"sendbird-place-holder__body__icon\"\n                  type={IconTypes.MESSAGE}\n                  fillColor={IconColors.ON_BACKGROUND_3}\n                  width={iconSize || '64px'}\n                  height={iconSize || '64px'}\n                />\n              )\n            }\n            <Label\n              className=\"sendbird-place-holder__body__text\"\n              type={LabelTypography.BODY_1}\n              color={LabelColors.ONBACKGROUND_2}\n            >\n              {\n                type === PlaceHolderTypes.NO_CHANNELS && (\n                  stringSet.PLACE_HOLDER__NO_CHANNEL\n                )\n              }\n              {\n                type === PlaceHolderTypes.WRONG && (\n                  stringSet.PLACE_HOLDER__WRONG\n                )\n              }\n              {\n                type === PlaceHolderTypes.NO_MESSAGES && (\n                  stringSet.PLACE_HOLDER__NO_MESSAGES\n                )\n              }\n            </Label>\n            {\n              retryToConnect && (\n                <div\n                  className=\"sendbird-place-holder__body__reconnect\"\n                  role=\"button\"\n                  onClick={retryToConnect}\n                  onKeyPress={retryToConnect}\n                  tabIndex={0}\n                >\n                  <Icon\n                    className=\"sendbird-place-holder__body__reconnect__icon\"\n                    type={IconTypes.REFRESH}\n                    fillColor={IconColors.PRIMARY}\n                    width=\"20px\"\n                    height=\"20px\"\n                  />\n                  <Label\n                    className=\"sendbird-place-holder__body__reconnect__text\"\n                    type={LabelTypography.BUTTON_1}\n                    color={LabelColors.PRIMARY}\n                  >\n                    {stringSet.PLACE_HOLDER__RETRY_TO_CONNECT}\n                  </Label>\n                </div>\n              )\n            }\n          </div>\n        )\n      }\n      {\n        (\n          type === PlaceHolderTypes.NO_RESULTS\n          || type === PlaceHolderTypes.SEARCH_IN\n          || type === PlaceHolderTypes.SEARCHING\n        ) && (\n          <div className=\"sendbird-place-holder__body--align-top\">\n            {\n              type === PlaceHolderTypes.SEARCH_IN && (\n                <div className=\"sendbird-place-holder__body--align-top__text\">\n                  <Label\n                    className=\"sendbird-place-holder__body--align-top__text__search-in\"\n                    type={LabelTypography.BUTTON_2}\n                    color={LabelColors.ONBACKGROUND_2}\n                  >\n                    {stringSet.SEARCH_IN}\n                  </Label>\n                  <Label\n                    className=\"sendbird-place-holder__body--align-top__text__channel-name\"\n                    type={LabelTypography.BUTTON_2}\n                    color={LabelColors.PRIMARY}\n                  >\n                    {`'${searchInString}`}\n                  </Label>\n                  <Label\n                    className=\"sendbird-place-holder__body--align-top__text__quote\"\n                    type={LabelTypography.BUTTON_2}\n                    color={LabelColors.PRIMARY}\n                  >\n                    {'\\''}\n                  </Label>\n                </div>\n              )\n            }\n            {\n              type === PlaceHolderTypes.SEARCHING && (\n                <Label\n                  className=\"sendbird-place-hlder__body--align-top__searching\"\n                  type={LabelTypography.BODY_1}\n                  color={LabelColors.ONBACKGROUND_2}\n                >\n                  {stringSet.SEARCHING}\n                </Label>\n              )\n            }\n            {\n              type === PlaceHolderTypes.NO_RESULTS && (\n                <Label\n                  className=\"sendbird-place-hlder__body--align-top__no-result\"\n                  type={LabelTypography.BODY_1}\n                  color={LabelColors.ONBACKGROUND_2}\n                >\n                  {stringSet.NO_SEARCHED_MESSAGE}\n                </Label>\n              )\n            }\n          </div>\n        )\n      }\n    </div>\n  );\n}\n"],"names":["PlaceHolderTypes","LOADING","NO_CHANNELS","NO_MESSAGES","WRONG","SEARCH_IN","SEARCHING","NO_RESULTS","PlaceHolder","_a","_b","className","type","iconSize","_c","searchInString","_d","retryToConnect","stringSet","useContext","LocalizationContext","React","createElement","__spreadArray","Array","isArray","join","Loader","width","height","Icon","IconTypes","SPINNER","fillColor","IconColors","PRIMARY","CHAT","ON_BACKGROUND_3","ERROR","MESSAGE","Label","LabelTypography","BODY_1","color","LabelColors","ONBACKGROUND_2","PLACE_HOLDER__NO_CHANNEL","PLACE_HOLDER__WRONG","PLACE_HOLDER__NO_MESSAGES","role","onClick","onKeyPress","tabIndex","REFRESH","BUTTON_1","PLACE_HOLDER__RETRY_TO_CONNECT","BUTTON_2","concat","NO_SEARCHED_MESSAGE"],"mappings":"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"}

package/cjs/ui/PlaybackTime.js

@@ -3,31 +3,32 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var ui_Label = require('../index-18720f0d.js');
+var ui_Label = require('../index-35820a94.js');
 require('prop-types');
-require('../stringSet-d00535a5.js');
+require('../stringSet-98b52c49.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const PlaybackTime = _ref => {
-  let {
-    className,
-    time = 0,
-    labelType = ui_Label.LabelTypography.CAPTION_2,
-    labelColor = ui_Label.LabelColors.ONCONTENT_1
-  } = _ref;
-  const naturalTime = time < 0 ? 0 : time;
-  const hour = Math.floor(naturalTime / 3600000);
-  const min = Math.floor(naturalTime % 3600000 / 60000);
-  const sec = Math.floor(naturalTime % 3600000 % 60000 / 1000);
+var PlaybackTime = function (_a) {
+  var className = _a.className,
+    _b = _a.time,
+    time = _b === void 0 ? 0 : _b,
+    _c = _a.labelType,
+    labelType = _c === void 0 ? ui_Label.LabelTypography.CAPTION_2 : _c,
+    _d = _a.labelColor,
+    labelColor = _d === void 0 ? ui_Label.LabelColors.ONCONTENT_1 : _d;
+  var naturalTime = time < 0 ? 0 : time;
+  var hour = Math.floor(naturalTime / 3600000);
+  var min = Math.floor(naturalTime % 3600000 / 60000);
+  var sec = Math.floor(naturalTime % 3600000 % 60000 / 1000);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `sendbird-ui-play-time ${className}`
+    className: "sendbird-ui-play-time ".concat(className)
   }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
     type: labelType,
     color: labelColor
-  }, `${hour ? hour + ':' : ''}${min < 10 ? '0' : ''}${min ? min : '0'}:${sec < 10 ? '0' : ''}${sec}`));
+  }, "".concat(hour ? hour + ':' : '').concat(min < 10 ? '0' : '').concat(min ? min : '0', ":").concat(sec < 10 ? '0' : '').concat(sec)));
 };
 
 exports.PlaybackTime = PlaybackTime;

package/cjs/ui/PlaybackTime.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlaybackTime.js","sources":["../../../src/ui/PlaybackTime/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport Label, { LabelTypography, LabelColors } from '../Label';\n\nexport interface PlaybackTimeProps {\n  className?: string;\n  time: number;// millisec\n  labelType?: string;\n  labelColor?: string;\n}\n\nexport const PlaybackTime = ({\n  className,\n  time = 0,\n  labelType = LabelTypography.CAPTION_2,\n  labelColor = LabelColors.ONCONTENT_1,\n}: PlaybackTimeProps): React.ReactElement => {\n  const naturalTime = time < 0 ? 0 : time;\n\n  const hour = Math.floor(naturalTime / 3600000);\n  const min = Math.floor(naturalTime % 3600000 / 60000);\n  const sec = Math.floor((naturalTime % 3600000 % 60000) / 1000);\n  return (\n    <div className={`sendbird-ui-play-time ${className}`}>\n      <Label\n        type={labelType}\n        color={labelColor}\n      >\n        {`${hour ? hour + ':' : ''}${min < 10 ? '0' : ''}${min ? min : '0'}:${sec < 10 ? '0' : ''}${sec}`}\n      </Label>\n    </div>\n  );\n};\n\nexport default PlaybackTime;\n"],"names":["PlaybackTime","_ref","className","time","labelType","LabelTypography","CAPTION_2","labelColor","LabelColors","ONCONTENT_1","naturalTime","hour","Math","floor","min","sec","React","createElement","Label","type","color"],"mappings":";;;;;;;;;;;;;AAWaA,MAAAA,YAAY,GAAGC,IAAA,IAKiB;EAAA,IALhB;IAC3BC,SAAS;AACTC,IAAAA,IAAI,GAAG,CAAC;IACRC,SAAS,GAAGC,wBAAe,CAACC,SAAS;IACrCC,UAAU,GAAGC,oBAAW,CAACC,WAAAA;AACR,GAAC,GAAAR,IAAA,CAAA;EAClB,MAAMS,WAAW,GAAGP,IAAI,GAAG,CAAC,GAAG,CAAC,GAAGA,IAAI,CAAA;EAEvC,MAAMQ,IAAI,GAAGC,IAAI,CAACC,KAAK,CAACH,WAAW,GAAG,OAAO,CAAC,CAAA;EAC9C,MAAMI,GAAG,GAAGF,IAAI,CAACC,KAAK,CAACH,WAAW,GAAG,OAAO,GAAG,KAAK,CAAC,CAAA;AACrD,EAAA,MAAMK,GAAG,GAAGH,IAAI,CAACC,KAAK,CAAEH,WAAW,GAAG,OAAO,GAAG,KAAK,GAAI,IAAI,CAAC,CAAA;EAC9D,oBACEM,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKf,SAAS,EAAG,yBAAwBA,SAAU,CAAA,CAAA;AAAE,GAAA,eACnDc,yBAAA,CAAAC,aAAA,CAACC,cAAK,EAAA;AACJC,IAAAA,IAAI,EAAEf,SAAU;AAChBgB,IAAAA,KAAK,EAAEb,UAAAA;AAAW,GAAA,EAEhB,CAAEI,EAAAA,IAAI,GAAGA,IAAI,GAAG,GAAG,GAAG,EAAG,CAAA,EAAEG,GAAG,GAAG,EAAE,GAAG,GAAG,GAAG,EAAG,CAAA,EAAEA,GAAG,GAAGA,GAAG,GAAG,GAAI,CAAA,CAAA,EAAGC,GAAG,GAAG,EAAE,GAAG,GAAG,GAAG,EAAG,CAAA,EAAEA,GAAI,CAAA,CAAC,CAC3F,CACJ,CAAA;AAEV;;;;;"}
+{"version":3,"file":"PlaybackTime.js","sources":["../../../src/ui/PlaybackTime/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport Label, { LabelTypography, LabelColors } from '../Label';\n\nexport interface PlaybackTimeProps {\n  className?: string;\n  time: number;// millisec\n  labelType?: string;\n  labelColor?: string;\n}\n\nexport const PlaybackTime = ({\n  className,\n  time = 0,\n  labelType = LabelTypography.CAPTION_2,\n  labelColor = LabelColors.ONCONTENT_1,\n}: PlaybackTimeProps): React.ReactElement => {\n  const naturalTime = time < 0 ? 0 : time;\n\n  const hour = Math.floor(naturalTime / 3600000);\n  const min = Math.floor(naturalTime % 3600000 / 60000);\n  const sec = Math.floor((naturalTime % 3600000 % 60000) / 1000);\n  return (\n    <div className={`sendbird-ui-play-time ${className}`}>\n      <Label\n        type={labelType}\n        color={labelColor}\n      >\n        {`${hour ? hour + ':' : ''}${min < 10 ? '0' : ''}${min ? min : '0'}:${sec < 10 ? '0' : ''}${sec}`}\n      </Label>\n    </div>\n  );\n};\n\nexport default PlaybackTime;\n"],"names":["PlaybackTime","_a","className","_b","time","_c","labelType","LabelTypography","CAPTION_2","_d","labelColor","LabelColors","ONCONTENT_1","naturalTime","hour","Math","floor","min","sec","React","createElement","concat","Label","type","color"],"mappings":";;;;;;;;;;;;;IAWaA,YAAY,GAAG,UAACC,EAKT,EAAA;MAJlBC,SAAS,GAAAD,EAAA,CAAAC,SAAA;IACTC,EAAA,GAAAF,EAAA,CAAAG,IAAQ;IAARA,IAAI,mBAAG,CAAC,GAAAD,EAAA;IACRE,EAAA,GAAAJ,EAAA,CAAAK,SAAqC;IAArCA,SAAS,mBAAGC,wBAAe,CAACC,SAAS,GAAAH,EAAA;IACrCI,EAAA,GAAAR,EAAA,CAAAS,UAAoC;IAApCA,UAAU,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAAE,oBAAW,CAACC,WAAW,GAAAH,EAAA,CAAA;EAEpC,IAAMI,WAAW,GAAGT,IAAI,GAAG,CAAC,GAAG,CAAC,GAAGA,IAAI,CAAA;EAEvC,IAAMU,IAAI,GAAGC,IAAI,CAACC,KAAK,CAACH,WAAW,GAAG,OAAO,CAAC,CAAA;EAC9C,IAAMI,GAAG,GAAGF,IAAI,CAACC,KAAK,CAACH,WAAW,GAAG,OAAO,GAAG,KAAK,CAAC,CAAA;AACrD,EAAA,IAAMK,GAAG,GAAGH,IAAI,CAACC,KAAK,CAAEH,WAAW,GAAG,OAAO,GAAG,KAAK,GAAI,IAAI,CAAC,CAAA;EAC9D,oBACEM,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKlB,IAAAA,SAAS,EAAE,wBAAyB,CAAAmB,MAAA,CAAAnB,SAAS,CAAA;AAAG,GAAA,eACnDiB,yBAAA,CAAAC,aAAA,CAACE,cAAK,EAAA;AACJC,IAAAA,IAAI,EAAEjB,SAAU;AAChBkB,IAAAA,KAAK,EAAEd,UAAAA;GAEN,EAAA,EAAA,CAAAW,MAAA,CAAGP,IAAI,GAAGA,IAAI,GAAG,GAAG,GAAG,EAAE,CAAG,CAAAO,MAAA,CAAAJ,GAAG,GAAG,EAAE,GAAG,GAAG,GAAG,EAAE,SAAGA,GAAG,GAAGA,GAAG,GAAG,GAAG,EAAA,GAAA,CAAA,CAAAI,MAAA,CAAIH,GAAG,GAAG,EAAE,GAAG,GAAG,GAAG,EAAE,CAAA,CAAAG,MAAA,CAAGH,GAAG,CAC1F,CACJ,CAAC,CAAA;AAEV;;;;;"}

package/cjs/ui/ProgressBar.js

@@ -9,27 +9,29 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 /* eslint-disable no-redeclare */
-const ProgressBarColorTypes = {
+var ProgressBarColorTypes = {
   PRIMARY: 'progress-bar-color--primary',
   GRAY: 'progress-bar-color--gray'
 };
-const ProgressBar = _ref => {
-  let {
-    className = '',
-    disabled = false,
-    maxSize,
-    currentSize = 0,
-    colorType = ProgressBarColorTypes.PRIMARY
-  } = _ref;
-  const width = React.useMemo(() => {
-    return `${currentSize / maxSize * 100}%`;
+var ProgressBar = function (_a) {
+  var _b = _a.className,
+    className = _b === void 0 ? '' : _b,
+    _c = _a.disabled,
+    disabled = _c === void 0 ? false : _c,
+    maxSize = _a.maxSize,
+    _d = _a.currentSize,
+    currentSize = _d === void 0 ? 0 : _d,
+    _e = _a.colorType,
+    colorType = _e === void 0 ? ProgressBarColorTypes.PRIMARY : _e;
+  var width = React.useMemo(function () {
+    return "".concat(currentSize / maxSize * 100, "%");
   }, [currentSize, maxSize]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `sendbird-progress-bar ${className} ${colorType} ${disabled ? 'progress-bar--disabled' : ''}`
+    className: "sendbird-progress-bar ".concat(className, " ").concat(colorType, " ").concat(disabled ? 'progress-bar--disabled' : '')
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-progress-bar__fill",
     style: {
-      width
+      width: width
     }
   }));
 };

package/cjs/ui/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","sources":["../../../src/ui/ProgressBar/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport './index.scss';\n\n/* eslint-disable no-redeclare */\nexport const ProgressBarColorTypes = {\n  PRIMARY: 'progress-bar-color--primary',\n  GRAY: 'progress-bar-color--gray',\n} as const;\nexport type ProgressBarColorTypes = typeof ProgressBarColorTypes[keyof typeof ProgressBarColorTypes];\n\nexport interface ProgressBarProps {\n  className?: string;\n  disabled?: boolean;\n  maxSize: number;\n  currentSize: number;\n  colorType?: ProgressBarColorTypes;\n}\n\nexport const ProgressBar = ({\n  className = '',\n  disabled = false,\n  maxSize,\n  currentSize = 0,\n  colorType = ProgressBarColorTypes.PRIMARY,\n}: ProgressBarProps): React.ReactElement => {\n  const width = useMemo(() => {\n    return `${currentSize / maxSize * 100}%`;\n  }, [currentSize, maxSize]);\n  return (\n    <div className={`sendbird-progress-bar ${className} ${colorType} ${disabled ? 'progress-bar--disabled' : ''}`}>\n      <div className=\"sendbird-progress-bar__fill\" style={{ width }} />\n    </div>\n  );\n};\n\nexport default ProgressBar;\n"],"names":["ProgressBarColorTypes","PRIMARY","GRAY","ProgressBar","_ref","className","disabled","maxSize","currentSize","colorType","width","useMemo","React","createElement","style"],"mappings":";;;;;;;;;;AAGA;AACO,MAAMA,qBAAqB,GAAG;AACnCC,EAAAA,OAAO,EAAE,6BAA6B;AACtCC,EAAAA,IAAI,EAAE,0BAAA;AACR,EAAU;AAWGC,MAAAA,WAAW,GAAGC,IAAA,IAMiB;EAAA,IANhB;AAC1BC,IAAAA,SAAS,GAAG,EAAE;AACdC,IAAAA,QAAQ,GAAG,KAAK;IAChBC,OAAO;AACPC,IAAAA,WAAW,GAAG,CAAC;IACfC,SAAS,GAAGT,qBAAqB,CAACC,OAAAA;AAClB,GAAC,GAAAG,IAAA,CAAA;AACjB,EAAA,MAAMM,KAAK,GAAGC,aAAO,CAAC,MAAM;AAC1B,IAAA,OAAQ,GAAEH,WAAW,GAAGD,OAAO,GAAG,GAAI,CAAE,CAAA,CAAA,CAAA;AAC1C,GAAC,EAAE,CAACC,WAAW,EAAED,OAAO,CAAC,CAAC,CAAA;EAC1B,oBACEK,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKR,SAAS,EAAG,CAAwBA,sBAAAA,EAAAA,SAAU,CAAGI,CAAAA,EAAAA,SAAU,IAAGH,QAAQ,GAAG,wBAAwB,GAAG,EAAG,CAAA,CAAA;GAC1GM,eAAAA,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKR,IAAAA,SAAS,EAAC,6BAA6B;AAACS,IAAAA,KAAK,EAAE;AAAEJ,MAAAA,KAAAA;AAAM,KAAA;AAAE,GAAA,CAAG,CAC7D,CAAA;AAEV;;;;;;"}
+{"version":3,"file":"ProgressBar.js","sources":["../../../src/ui/ProgressBar/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport './index.scss';\n\n/* eslint-disable no-redeclare */\nexport const ProgressBarColorTypes = {\n  PRIMARY: 'progress-bar-color--primary',\n  GRAY: 'progress-bar-color--gray',\n} as const;\nexport type ProgressBarColorTypes = typeof ProgressBarColorTypes[keyof typeof ProgressBarColorTypes];\n\nexport interface ProgressBarProps {\n  className?: string;\n  disabled?: boolean;\n  maxSize: number;\n  currentSize: number;\n  colorType?: ProgressBarColorTypes;\n}\n\nexport const ProgressBar = ({\n  className = '',\n  disabled = false,\n  maxSize,\n  currentSize = 0,\n  colorType = ProgressBarColorTypes.PRIMARY,\n}: ProgressBarProps): React.ReactElement => {\n  const width = useMemo(() => {\n    return `${currentSize / maxSize * 100}%`;\n  }, [currentSize, maxSize]);\n  return (\n    <div className={`sendbird-progress-bar ${className} ${colorType} ${disabled ? 'progress-bar--disabled' : ''}`}>\n      <div className=\"sendbird-progress-bar__fill\" style={{ width }} />\n    </div>\n  );\n};\n\nexport default ProgressBar;\n"],"names":["ProgressBarColorTypes","PRIMARY","GRAY","ProgressBar","_a","_b","className","_c","disabled","maxSize","_d","currentSize","_e","colorType","width","useMemo","React","createElement","concat","style"],"mappings":";;;;;;;;;;AAGA;AACO,IAAMA,qBAAqB,GAAG;AACnCC,EAAAA,OAAO,EAAE,6BAA6B;AACtCC,EAAAA,IAAI,EAAE,0BAAA;EACE;IAWGC,WAAW,GAAG,UAACC,EAMT,EAAA;AALjB,EAAA,IAAAC,EAAA,GAAAD,EAAA,CAAAE,SAAc;IAAdA,SAAS,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,EAAE,GAAAA,EAAA;IACdE,EAAgB,GAAAH,EAAA,CAAAI,QAAA;IAAhBA,QAAQ,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAG,KAAK,GAAAA,EAAA;IAChBE,OAAO,GAAAL,EAAA,CAAAK,OAAA;IACPC,EAAA,GAAAN,EAAA,CAAAO,WAAe;IAAfA,WAAW,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,CAAC,GAAAA,EAAA;IACfE,EAAyC,GAAAR,EAAA,CAAAS,SAAA;IAAzCA,SAAS,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAGZ,qBAAqB,CAACC,OAAO,GAAAW,EAAA,CAAA;AAEzC,EAAA,IAAME,KAAK,GAAGC,aAAO,CAAC,YAAA;IACpB,OAAO,UAAGJ,WAAW,GAAGF,OAAO,GAAG,GAAG,MAAG,CAAA;AAC1C,GAAC,EAAE,CAACE,WAAW,EAAEF,OAAO,CAAC,CAAC,CAAA;EAC1B,oBACEO,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKX,SAAS,EAAE,wBAAyB,CAAAY,MAAA,CAAAZ,SAAS,EAAI,GAAA,CAAA,CAAAY,MAAA,CAAAL,SAAS,cAAIL,QAAQ,GAAG,wBAAwB,GAAG,EAAE,CAAA;GACzGQ,eAAAA,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKX,IAAAA,SAAS,EAAC,6BAA6B;AAACa,IAAAA,KAAK,EAAE;AAAEL,MAAAA,KAAK,EAAAA,KAAAA;AAAA,KAAA;AAAG,GAChE,CAAK,CAAC,CAAA;AAEV;;;;;;"}

package/cjs/ui/QuoteMessage.js

@@ -2,55 +2,56 @@
 
 var React = require('react');
 var ui_Icon = require('./Icon.js');
-var ui_Label = require('../index-18720f0d.js');
+var ui_Label = require('../index-35820a94.js');
 var ui_ImageRenderer = require('./ImageRenderer.js');
-var LocalizationContext = require('../LocalizationContext-482c1343.js');
-var index = require('../index-fbe9cc73.js');
-var utils = require('../utils-418b4438.js');
+var LocalizationContext = require('../LocalizationContext-5009012e.js');
+var index = require('../index-b995f638.js');
+var utils = require('../utils-851724e0.js');
 require('prop-types');
-require('../stringSet-d00535a5.js');
-require('../index-d04f312e.js');
-require('../_rollupPluginBabelHelpers-83d7e84b.js');
+require('../stringSet-98b52c49.js');
+require('../tslib.es6-2f2b0bca.js');
+require('../index-fd8a0abb.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../index.module-a24e9cd7.js');
+require('../index-609b07a2.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function QuoteMessage(_ref) {
-  var _message$sender, _message$sender2, _getMessageFirstFileN, _getMessageFirstFileN2, _message, _thumbnails;
-  let {
-    message,
-    userId = '',
-    isByMe = false,
-    className = '',
-    isUnavailable = false,
-    onClick
-  } = _ref;
-  const {
-    stringSet
-  } = React.useContext(LocalizationContext.LocalizationContext);
-  const {
-    parentMessage
-  } = message;
-  const parentMessageSender = parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.sender;
-  const parentMessageSenderNickname = userId === (parentMessageSender === null || parentMessageSender === void 0 ? void 0 : parentMessageSender.userId) ? stringSet.QUOTED_MESSAGE__CURRENT_USER : parentMessageSender === null || parentMessageSender === void 0 ? void 0 : parentMessageSender.nickname;
-  const parentMessageUrl = utils.getMessageFirstFileUrl(parentMessage);
-  const parentMessageType = utils.getMessageFirstFileType(parentMessage);
-  const currentMessageSenderNickname = userId === (message === null || message === void 0 ? void 0 : (_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.userId) ? stringSet.QUOTED_MESSAGE__CURRENT_USER : message === null || message === void 0 ? void 0 : (_message$sender2 = message.sender) === null || _message$sender2 === void 0 ? void 0 : _message$sender2.nickname;
-  const [isThumbnailLoaded, setThumbnailLoaded] = React.useState(false);
-  const uikitFileTypes = index.getUIKitFileTypes();
-  const splitFileName = (_getMessageFirstFileN = (_getMessageFirstFileN2 = utils.getMessageFirstFileName(parentMessage)) === null || _getMessageFirstFileN2 === void 0 ? void 0 : _getMessageFirstFileN2.split('/')) !== null && _getMessageFirstFileN !== void 0 ? _getMessageFirstFileN : parentMessageUrl.split('/');
+function QuoteMessage(_a) {
+  var _b;
+  var _c, _d, _e, _f, _g, _h;
+  var message = _a.message,
+    _j = _a.userId,
+    userId = _j === void 0 ? '' : _j,
+    _k = _a.isByMe,
+    isByMe = _k === void 0 ? false : _k,
+    _l = _a.className,
+    className = _l === void 0 ? '' : _l,
+    _m = _a.isUnavailable,
+    isUnavailable = _m === void 0 ? false : _m,
+    onClick = _a.onClick;
+  var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+  var parentMessage = message.parentMessage;
+  var parentMessageSender = parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.sender;
+  var parentMessageSenderNickname = userId === (parentMessageSender === null || parentMessageSender === void 0 ? void 0 : parentMessageSender.userId) ? stringSet.QUOTED_MESSAGE__CURRENT_USER : parentMessageSender === null || parentMessageSender === void 0 ? void 0 : parentMessageSender.nickname;
+  var parentMessageUrl = utils.getMessageFirstFileUrl(parentMessage);
+  var parentMessageType = utils.getMessageFirstFileType(parentMessage);
+  var currentMessageSenderNickname = userId === ((_c = message === null || message === void 0 ? void 0 : message.sender) === null || _c === void 0 ? void 0 : _c.userId) ? stringSet.QUOTED_MESSAGE__CURRENT_USER : (_d = message === null || message === void 0 ? void 0 : message.sender) === null || _d === void 0 ? void 0 : _d.nickname;
+  var _o = React.useState(false),
+    isThumbnailLoaded = _o[0],
+    setThumbnailLoaded = _o[1];
+  var uikitFileTypes = index.getUIKitFileTypes();
+  var splitFileName = (_f = (_e = utils.getMessageFirstFileName(parentMessage)) === null || _e === void 0 ? void 0 : _e.split('/')) !== null && _f !== void 0 ? _f : parentMessageUrl.split('/');
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: index.getClassName([className, 'sendbird-quote-message', isByMe ? 'outgoing' : 'incoming', isUnavailable ? 'unavailable' : '']),
     key: parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.messageId,
-    onClick: () => {
+    onClick: function () {
       if (!isUnavailable && onClick) {
         onClick();
       }
     },
-    onTouchEnd: () => {
+    onTouchEnd: function () {
       if (!isUnavailable && onClick) {
         onClick();
       }
@@ -81,7 +82,7 @@ function QuoteMessage(_ref) {
     className: "sendbird-quote-message__replied-message__text-message__word",
     type: ui_Label.LabelTypography.BODY_2,
     color: ui_Label.LabelColors.ONBACKGROUND_1
-  }, stringSet.QUOTED_MESSAGE__UNAVAILABLE)), index.isUserMessage(parentMessage) && (parentMessage === null || parentMessage === void 0 ? void 0 : (_message = parentMessage.message) === null || _message === void 0 ? void 0 : _message.length) > 0 && !isUnavailable && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, stringSet.QUOTED_MESSAGE__UNAVAILABLE)), index.isUserMessage(parentMessage) && ((_g = parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.message) === null || _g === void 0 ? void 0 : _g.length) > 0 && !isUnavailable && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-quote-message__replied-message__text-message"
   }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
     className: "sendbird-quote-message__replied-message__text-message__word",
@@ -101,7 +102,9 @@ function QuoteMessage(_ref) {
     alt: parentMessageType,
     width: "144px",
     height: "108px",
-    onLoad: () => setThumbnailLoaded(true),
+    onLoad: function () {
+      return setThumbnailLoaded(true);
+    },
     defaultComponent: /*#__PURE__*/React__default["default"].createElement("div", {
       className: "sendbird-quote-message__replied-message__thumbnail-message__placeholder"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -112,7 +115,7 @@ function QuoteMessage(_ref) {
       width: "22px",
       height: "22px"
     })))
-  }), index.isVideo(parentMessageType) && !((parentMessage === null || parentMessage === void 0 ? void 0 : (_thumbnails = parentMessage.thumbnails) === null || _thumbnails === void 0 ? void 0 : _thumbnails.length) > 0) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("video", {
+  }), index.isVideo(parentMessageType) && !(((_h = parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.thumbnails) === null || _h === void 0 ? void 0 : _h.length) > 0) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("video", {
     className: "sendbird-quote-message__replied-message__thumbnail-message__video"
   }, /*#__PURE__*/React__default["default"].createElement("source", {
     src: parentMessageUrl,
@@ -139,13 +142,7 @@ function QuoteMessage(_ref) {
     className: "sendbird-quote-message__replied-message__file-message"
   }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
     className: "sendbird-quote-message__replied-message__file-message__type-icon",
-    type: {
-      [uikitFileTypes.IMAGE]: ui_Icon.IconTypes.PHOTO,
-      [uikitFileTypes.VIDEO]: ui_Icon.IconTypes.PLAY,
-      [uikitFileTypes.AUDIO]: ui_Icon.IconTypes.FILE_AUDIO,
-      [uikitFileTypes.GIF]: ui_Icon.IconTypes.GIF,
-      [uikitFileTypes.OTHERS]: ui_Icon.IconTypes.FILE_DOCUMENT
-    }[index.getUIKitFileType(parentMessageType)],
+    type: (_b = {}, _b[uikitFileTypes.IMAGE] = ui_Icon.IconTypes.PHOTO, _b[uikitFileTypes.VIDEO] = ui_Icon.IconTypes.PLAY, _b[uikitFileTypes.AUDIO] = ui_Icon.IconTypes.FILE_AUDIO, _b[uikitFileTypes.GIF] = ui_Icon.IconTypes.GIF, _b[uikitFileTypes.OTHERS] = ui_Icon.IconTypes.FILE_DOCUMENT, _b)[index.getUIKitFileType(parentMessageType)],
     fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
     width: "16px",
     height: "16px"