@sendbird/uikit-react 3.1.1 → 3.1.2

package/ui/ContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.js","sources":["../../src/ui/ContextMenu/items/MenuItems.jsx","../../src/ui/ContextMenu/items/EmojiListItems.jsx","../../src/ui/ContextMenu/index.jsx"],"sourcesContent":["import React, { Component } from 'react';\nimport { createPortal } from 'react-dom';\nimport PropTypes from 'prop-types';\n\nexport default class MenuItems extends Component {\n  constructor(props) {\n    super(props);\n    this.menuRef = React.createRef();\n    this.state = {\n      menuStyle: {},\n      handleClickOutside: () => { },\n    };\n  }\n\n  componentDidMount() {\n    this.setupEvents();\n    this.getMenuPosition();\n  }\n\n  componentWillUnmount() {\n    this.cleanUpEvents();\n  }\n\n  setupEvents = () => {\n    const { closeDropdown } = this.props;\n    const { menuRef } = this;\n    const handleClickOutside = (event) => {\n      if (menuRef.current && !menuRef.current.contains(event.target)) {\n        closeDropdown();\n      }\n    };\n    this.setState({\n      handleClickOutside,\n    });\n\n    document.addEventListener('mousedown', handleClickOutside);\n  }\n\n  cleanUpEvents = () => {\n    const {\n      handleClickOutside,\n    } = this.state;\n    document.removeEventListener('mousedown', handleClickOutside);\n  }\n\n  getMenuPosition = () => {\n    const { parentRef, openLeft } = this.props;\n    const parentRect = parentRef.current.getBoundingClientRect();\n    const x = parentRect.x || parentRect.left;\n    const y = parentRect.y || parentRect.top;\n    const menuStyle = {\n      top: y,\n      left: x,\n    };\n\n    if (!this.menuRef.current) return menuStyle;\n\n    const { innerWidth, innerHeight } = window;\n    const rect = this.menuRef.current.getBoundingClientRect();\n    if (y + rect.height > innerHeight) {\n      menuStyle.top -= rect.height;\n    }\n\n    if (x + rect.width > innerWidth && !openLeft) {\n      menuStyle.left -= rect.width;\n    }\n\n    if (menuStyle.top < 0) {\n      menuStyle.top = rect.height < innerHeight ? (innerHeight - rect.height) / 2 : 0;\n    }\n\n    if (menuStyle.left < 0) {\n      menuStyle.left = rect.width < innerWidth ? (innerWidth - rect.width) / 2 : 0;\n    }\n\n    menuStyle.top += 32;\n    if (openLeft) {\n      const padding = Number.isNaN(rect.width - 30)\n        ? 108 // default\n        : rect.width - 30;\n      menuStyle.left -= padding;\n    }\n\n    return this.setState({ menuStyle });\n  }\n\n  render() {\n    const { menuStyle } = this.state;\n    const { children, style } = this.props;\n    return (\n      createPortal(\n        (\n          <>\n            <div className=\"sendbird-dropdown__menu-backdrop\" />\n            <ul\n              className=\"sendbird-dropdown__menu\"\n              ref={this.menuRef}\n              style={{\n                display: 'inline-block',\n                position: 'fixed',\n                left: `${Math.round(menuStyle.left)}px`,\n                top: `${Math.round(menuStyle.top)}px`,\n                ...style,\n              }}\n            >\n              {children}\n            </ul>\n          </>\n        ),\n        document.getElementById('sendbird-dropdown-portal'),\n      )\n    );\n  }\n}\nMenuItems.propTypes = {\n  closeDropdown: PropTypes.func.isRequired,\n  children: PropTypes.oneOfType([\n    PropTypes.element,\n    PropTypes.arrayOf(PropTypes.element),\n  ]).isRequired,\n  style: PropTypes.shape({}),\n  // https://stackoverflow.com/a/51127130\n  parentRef: PropTypes.oneOfType([\n    PropTypes.func,\n    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),\n  ]).isRequired,\n  // parentContainRef: PropTypes.oneOfType([\n  //   PropTypes.func,\n  //   PropTypes.shape({ current: PropTypes.instanceOf(Element) }),\n  // ]).isRequired,\n  openLeft: PropTypes.bool,\n};\nMenuItems.defaultProps = {\n  style: {},\n  openLeft: false,\n};\n","import React, { Component } from 'react';\nimport { createPortal } from 'react-dom';\nimport PropTypes from 'prop-types';\n\nimport SortByRow from '../../SortByRow';\n\nexport default class EmojiListItems extends Component {\n  constructor(props) {\n    super(props);\n    this.reactionRef = React.createRef();\n    this.state = {\n      reactionStyle: {},\n      handleClickOutside: () => { },\n    };\n  }\n\n  componentDidMount() {\n    this.setupEvents();\n    this.getBarPosition();\n    this.showParent();\n  }\n\n  componentWillUnmount() {\n    this.cleanUpEvents();\n    this.hideParent();\n  }\n\n  showParent = () => {\n    const { parentContainRef = {} } = this.props;\n    const { current } = parentContainRef;\n    if (parentContainRef && current) {\n      current.classList.add('sendbird-reactions--pressed');\n    }\n  }\n\n  hideParent = () => {\n    const { parentContainRef = {} } = this.props;\n    const { current } = parentContainRef;\n    if (parentContainRef && current) {\n      current.classList.remove('sendbird-reactions--pressed');\n    }\n  }\n\n  setupEvents = () => {\n    const { closeDropdown } = this.props;\n    const { reactionRef } = this;\n    const handleClickOutside = (event) => {\n      if (reactionRef.current && !reactionRef.current.contains(event.target)) {\n        closeDropdown();\n      }\n    };\n    this.setState({\n      handleClickOutside,\n    });\n    document.addEventListener('mousedown', handleClickOutside);\n  }\n\n  cleanUpEvents = () => {\n    const {\n      handleClickOutside,\n    } = this.state;\n    document.removeEventListener('mousedown', handleClickOutside);\n  }\n\n  getBarPosition = () => {\n    // calculate the location that the context menu should be\n    const {\n      parentRef,\n      spaceFromTrigger,\n    } = this.props;\n    const spaceFromTriggerX = spaceFromTrigger.x || 0;\n    const spaceFromTriggerY = spaceFromTrigger.y || 0;\n\n    const parentRect = parentRef.current.getBoundingClientRect();\n\n    const x = parentRect.x || parentRect.left;\n    const y = parentRect.y || parentRect.top;\n\n    const reactionStyle = {\n      top: y,\n      left: x,\n    };\n\n    if (!this.reactionRef.current) return reactionStyle;\n    const rect = this.reactionRef.current.getBoundingClientRect();\n\n    if (reactionStyle.top < rect.height) {\n      reactionStyle.top += parentRect.height;\n      reactionStyle.top += spaceFromTriggerY;\n    } else {\n      reactionStyle.top -= rect.height;\n      reactionStyle.top -= spaceFromTriggerY;\n    }\n\n    reactionStyle.left -= (rect.width / 2);\n    reactionStyle.left += (parentRect.height / 2) - 2;\n    reactionStyle.left += spaceFromTriggerX;\n\n    const maximumLeft = (window.innerWidth - rect.width);\n    if (maximumLeft < reactionStyle.left) {\n      reactionStyle.left = maximumLeft;\n    }\n    if (reactionStyle.left < 0) {\n      reactionStyle.left = 0;\n    }\n\n    return this.setState({ reactionStyle });\n  }\n\n  render() {\n    const { reactionStyle } = this.state;\n    const { children } = this.props;\n    return (\n      createPortal(\n        <>\n          <div className=\"sendbird-dropdown__menu-backdrop\" />\n          <ul\n            className=\"sendbird-dropdown__reaction-bar\"\n            ref={this.reactionRef}\n            style={{\n              display: 'inline-block',\n              position: 'fixed',\n              left: `${Math.round(reactionStyle.left)}px`,\n              top: `${Math.round(reactionStyle.top)}px`,\n            }}\n          >\n            <SortByRow\n              className=\"sendbird-dropdown__reaction-bar__row\"\n              maxItemCount={8}\n              itemWidth={44}\n              itemHeight={40}\n            >\n              {children}\n            </SortByRow>\n          </ul>\n        </>,\n        document.getElementById('sendbird-emoji-list-portal'),\n      )\n    );\n  }\n}\nEmojiListItems.propTypes = {\n  closeDropdown: PropTypes.func.isRequired,\n  children: PropTypes.oneOfType([\n    PropTypes.element,\n    PropTypes.arrayOf(PropTypes.element),\n  ]).isRequired,\n  parentRef: PropTypes.oneOfType([\n    PropTypes.func,\n    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),\n  ]).isRequired,\n  parentContainRef: PropTypes.oneOfType([\n    PropTypes.func,\n    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),\n  ]).isRequired,\n  spaceFromTrigger: PropTypes.shape({\n    x: PropTypes.number,\n    y: PropTypes.number,\n  }),\n};\nEmojiListItems.defaultProps = {\n  spaceFromTrigger: {},\n};\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport './index.scss';\n\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport { getClassName } from '../../utils';\n\nimport MenuItems_ from './items/MenuItems';\nimport EmojiListItems_ from './items/EmojiListItems';\n\nconst ENTER = 13;\n\nexport const MenuItems = MenuItems_;\nexport const EmojiListItems = EmojiListItems_;\n\nexport const MenuItem = ({\n  className,\n  children,\n  onClick,\n  disable,\n}) => {\n  const handleClickEvent = (e) => { if (!disable) onClick(e); };\n  return (\n    <li\n      className={getClassName([className, 'sendbird-dropdown__menu-item', disable ? 'disable' : ''])}\n      role=\"menuitem\"\n      onClick={handleClickEvent}\n      onKeyPress={(e) => { if (e.keyCode === ENTER) handleClickEvent(e); }}\n      tabIndex={0}\n    >\n      <Label\n        className=\"sendbird-dropdown__menu-item__text\"\n        type={LabelTypography.SUBTITLE_2}\n        color={disable ? LabelColors.ONBACKGROUND_4 : LabelColors.ONBACKGROUND_1}\n      >\n        {children}\n      </Label>\n    </li>\n  );\n};\n\nMenuItem.propTypes = {\n  className: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.arrayOf(PropTypes.string),\n  ]),\n  children: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.element,\n  ]).isRequired,\n  onClick: PropTypes.func.isRequired,\n  disable: PropTypes.bool,\n};\n\nMenuItem.defaultProps = {\n  className: '',\n  disable: false,\n};\n\n// Root components should be appended before ContextMenu is rendered\nexport const MenuRoot = () => (\n  <div id=\"sendbird-dropdown-portal\" />\n);\nexport const EmojiReactionListRoot = () => (\n  <div id=\"sendbird-emoji-list-portal\" />\n);\n\nexport default function ContextMenu({ menuTrigger, menuItems }) {\n  const [showMenu, setShowMenu] = useState(false);\n\n  return (\n    <div className=\"sendbird-context-menu\" style={{ display: 'inline' }}>\n      {menuTrigger(() => setShowMenu(!showMenu))}\n      {showMenu && menuItems(() => setShowMenu(false))}\n    </div>\n  );\n}\n\nContextMenu.propTypes = {\n  menuTrigger: PropTypes.func.isRequired,\n  menuItems: PropTypes.func.isRequired,\n};\n"],"names":["MenuItems","props","closeDropdown","menuRef","handleClickOutside","event","current","contains","target","setState","document","addEventListener","state","removeEventListener","parentRef","openLeft","parentRect","getBoundingClientRect","x","left","y","top","menuStyle","window","innerWidth","innerHeight","rect","height","width","padding","Number","isNaN","React","createRef","setupEvents","getMenuPosition","cleanUpEvents","children","style","createPortal","display","position","Math","round","getElementById","Component","propTypes","PropTypes","func","isRequired","oneOfType","element","arrayOf","shape","instanceOf","Element","bool","defaultProps","EmojiListItems","parentContainRef","classList","add","remove","reactionRef","spaceFromTrigger","spaceFromTriggerX","spaceFromTriggerY","reactionStyle","maximumLeft","getBarPosition","showParent","hideParent","number","ENTER","MenuItems_","EmojiListItems_","MenuItem","className","onClick","disable","handleClickEvent","e","getClassName","keyCode","LabelTypography","SUBTITLE_2","LabelColors","ONBACKGROUND_4","ONBACKGROUND_1","string","MenuRoot","EmojiReactionListRoot","ContextMenu","menuTrigger","menuItems","useState","showMenu","setShowMenu"],"mappings":"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"}
+{"version":3,"file":"ContextMenu.js","sources":["../../src/ui/ContextMenu/MenuItems.tsx","../../src/ui/ContextMenu/EmojiListItems.tsx","../../src/ui/ContextMenu/index.tsx"],"sourcesContent":["import React, { ReactElement, RefObject, useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\ntype MenuStyle = { left: number, top: number };\nexport interface MenuItemsProps {\n  className?: string | Array<string>;\n  children?: ReactElement;\n  style?: { [key: string]: string };\n  parentRef: RefObject<HTMLDivElement>;\n  parentContainRef?: RefObject<HTMLDivElement>;\n  openLeft?: boolean;\n  closeDropdown: () => void;\n}\n\nconst MenuItems = ({\n  className,\n  children,\n  style = {},\n  parentRef,\n  parentContainRef,\n  openLeft = false,\n  closeDropdown,\n}: MenuItemsProps): ReactElement => {\n  const menuRef = useRef(null);\n  const [menuStyle, setMenuStyle] = useState<MenuStyle>({ left: 0, top: 0 });\n\n  /* showParent & hideParent */\n  useEffect(() => {\n    if (parentContainRef && parentContainRef?.current) {\n      parentContainRef.current.classList.add('sendbird-reactions--pressed');\n    }\n    return () => {\n      if (parentContainRef && parentContainRef?.current) {\n        parentContainRef.current.classList.remove('sendbird-reactions--pressed');\n      }\n    };\n  }, []);\n\n  /* setupEvents & cleanupEvents */\n  useEffect(() => {\n    const handleClickOutside = (event) => {\n      if (menuRef?.current && !menuRef?.current.contains?.(event.target)) {\n        closeDropdown();\n      }\n    };\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, []);\n\n  /* getMenuPosition */\n  useEffect(() => {\n    const parentRect = parentRef?.current?.getBoundingClientRect();\n    const x = parentRect.x || parentRect.left;\n    const y = parentRect.y || parentRect.top;\n    const menuStyle = {\n      top: y,\n      left: x,\n    };\n    if (!menuRef?.current) {\n      setMenuStyle(menuStyle);\n    } else {\n      const { innerWidth, innerHeight } = window;\n      const rect = menuRef.current.getBoundingClientRect();\n      if (y + rect.height > innerHeight) {\n        menuStyle.top -= rect.height;\n      }\n      if (x + rect.width > innerWidth && !openLeft) {\n        menuStyle.left -= rect.width;\n      }\n      if (menuStyle.top < 0) {\n        menuStyle.top = rect.height < innerHeight ? (innerHeight - rect.height) / 2 : 0;\n      }\n      if (menuStyle.left < 0) {\n        menuStyle.left = rect.width < innerWidth ? (innerWidth - rect.width) / 2 : 0;\n      }\n      menuStyle.top += 32;\n      if (openLeft) {\n        const padding = Number.isNaN(rect.width - 30)\n          ? 108 // default\n          : rect.width - 30;\n        menuStyle.left -= padding;\n      }\n      setMenuStyle(menuStyle);\n    }\n  }, []);\n\n  return createPortal(\n    (\n      <div className={Array.isArray(className) ? className.join(' ') : className}>\n        <div className=\"sendbird-dropdown__menu-backdrop\" />\n        <ul\n          className=\"sendbird-dropdown__menu\"\n          ref={menuRef}\n          style={{\n            display: 'inline-block',\n            position: 'fixed',\n            left: `${Math.round(menuStyle.left)}px`,\n            top: `${Math.round(menuStyle.top)}px`,\n            ...style,\n          }}\n        >\n          {children}\n        </ul>\n      </div>\n    ),\n    document.getElementById('sendbird-dropdown-portal')\n  );\n};\n\nexport default MenuItems;\n","import React, { ReactElement, RefObject, useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport SortByRow from '../SortByRow';\n\ntype SpaceFromTrigger = { x: number, y: number };\ntype ReactionStyle = { left: number, top: number };\nexport interface EmojiListItemsProps {\n  closeDropdown: () => void;\n  children: ReactElement;\n  parentRef: RefObject<HTMLDivElement>;\n  parentContainRef: RefObject<HTMLDivElement>;\n  spaceFromTrigger?: SpaceFromTrigger;\n}\n\nconst EmojiListItems = ({\n  children,\n  parentRef,\n  parentContainRef,\n  spaceFromTrigger = { x: 0, y: 0 },\n  closeDropdown,\n}: EmojiListItemsProps): ReactElement => {\n  const [reactionStyle, setReactionStyle] = useState<ReactionStyle>({ left: 0, top: 0 });\n  const reactionRef = useRef(null);\n\n  /* showParent & hideParent */\n  useEffect(() => {\n    if (parentContainRef && parentContainRef?.current) {\n      parentContainRef.current.classList.add('sendbird-reactions--pressed');\n    }\n    return () => {\n      if (parentContainRef && parentContainRef?.current) {\n        parentContainRef.current.classList.remove('sendbird-reactions--pressed');\n      }\n    };\n  }, []);\n\n  /* setupEvents & cleanupEvents */\n  useEffect(() => {\n    const handleClickOutSide = (event) => {\n      if (reactionRef?.current && !reactionRef?.current?.contains?.(event.target)) {\n        closeDropdown();\n      }\n    };\n    document.addEventListener('mousedown', handleClickOutSide);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutSide);\n    };\n  }, []);\n\n  /* getBarPosition */\n  useEffect(() => {\n    const spaceFromTriggerX = spaceFromTrigger?.x || 0;\n    const spaceFromTriggerY = spaceFromTrigger?.y || 0;\n    const parentRect = parentRef?.current?.getBoundingClientRect();\n    const x = parentRect.x || parentRect.left;\n    const y = parentRect.y || parentRect.top;\n    const reactionStyle = {\n      top: y,\n      left: x,\n    };\n    if (!reactionRef?.current) {\n      setReactionStyle(reactionStyle);\n    } else {\n      const rect = reactionRef?.current?.getBoundingClientRect();\n      if (reactionStyle.top < rect.height) {\n        reactionStyle.top += parentRect.height;\n        reactionStyle.top += spaceFromTriggerY;\n      } else {\n        reactionStyle.top -= rect.height;\n        reactionStyle.top -= spaceFromTriggerY;\n      }\n      reactionStyle.left -= rect.width / 2;\n      reactionStyle.left += (parentRect.height / 2) - 2;\n      reactionStyle.left += spaceFromTriggerX;\n      const maximumLeft = window.innerWidth - rect.width;\n      if (maximumLeft < reactionStyle.left) {\n        reactionStyle.left = maximumLeft;\n      }\n      if (reactionStyle.left < 0) {\n        reactionStyle.left = 0;\n      }\n      setReactionStyle(reactionStyle);\n    }\n  }, []);\n\n  return (\n    createPortal(\n      <>\n        <div className=\"sendbird-dropdown__menu-backdrop\" />\n        <ul\n          className=\"sendbird-dropdown__reaction-bar\"\n          ref={reactionRef}\n          style={{\n            display: 'inline-block',\n            position: 'fixed',\n            left: `${Math.round(reactionStyle.left)}px`,\n            top: `${Math.round(reactionStyle.top)}px`,\n          }}\n        >\n          <SortByRow\n            className=\"sendbird-dropdown__reaction-bar__row\"\n            maxItemCount={8}\n            itemWidth={44}\n            itemHeight={40}\n          >\n            {children}\n          </SortByRow>\n        </ul>\n      </>,\n      document.getElementById('sendbird-emoji-list-portal'),\n    )\n  );\n};\n\nexport default EmojiListItems;\n","import React, { ReactElement, MouseEvent, useState } from 'react';\nimport './index.scss';\n\nimport _MenuItems from './MenuItems';\nimport _EmojiListItems from './EmojiListItems';\n\nimport { getClassName } from '../../utils';\nimport Label, { LabelTypography, LabelColors } from '../Label';\n\nconst ENTER_KEY = 13;\n\nexport const MenuItems = _MenuItems;\nexport const EmojiListItems = _EmojiListItems;\n\nexport interface MenuItemProps {\n  className?: string | Array<string>;\n  children: ReactElement;\n  onClick?: (e: MouseEvent<HTMLLIElement>) => void;\n  disable?: boolean;\n}\nexport const MenuItem = ({\n  className = '',\n  children,\n  onClick,\n  disable = false,\n}: MenuItemProps): ReactElement => {\n  const handleClickEvent = (e) => {\n    if (!disable && onClick) {\n      onClick?.(e);\n    }\n  };\n  return (\n    <li\n      className={getClassName([className, 'sendbird-dropdown__menu-item', disable ? 'disable' : ''])}\n      role=\"menuitem\"\n      onClick={handleClickEvent}\n      onKeyPress={(e) => { if (e.keyCode === ENTER_KEY) handleClickEvent(e); }}\n      tabIndex={0}\n    >\n      <Label\n        className=\"sendbird-dropdown__menu-item__text\"\n        type={LabelTypography.SUBTITLE_2}\n        color={disable ? LabelColors.ONBACKGROUND_4 : LabelColors.ONBACKGROUND_1}\n      >\n        {children}\n      </Label>\n    </li>\n  );\n};\n\nexport const MenuRoot = (): ReactElement => <div id=\"sendbird-dropdown-portal\" />;\nexport const EmojiReactionListRoot = (): ReactElement => <div id=\"sendbird-emoji-list-portal\" />;\n\ntype MenuDisplayingFunc = () => void;\nexport interface ContextMenuProps {\n  menuTrigger: (MenuDisplayingFunc) => ReactElement;\n  menuItems: (MenuDisplayingFunc) => ReactElement;\n}\nexport default function ContextMenu({\n  menuTrigger,\n  menuItems,\n}: ContextMenuProps): ReactElement {\n  const [showMenu, setShowMenu] = useState(false);\n  return (\n    <div className=\"sendbird-context-menu\">\n      {menuTrigger(() => setShowMenu(!showMenu))}\n      {showMenu && menuItems(() => setShowMenu(false))}\n    </div>\n  );\n}\n"],"names":["MenuItems","_a","className","children","_b","style","parentRef","parentContainRef","_c","openLeft","closeDropdown","menuRef","useRef","_d","useState","left","top","menuStyle","setMenuStyle","useEffect","current","classList","add","remove","handleClickOutside","event","contains","target","document","addEventListener","removeEventListener","parentRect","getBoundingClientRect","x","y","innerWidth_1","window","innerHeight_1","rect","height","width","padding","Number","isNaN","createPortal","React","Array","isArray","join","display","position","Math","round","getElementById","EmojiListItems","spaceFromTrigger","reactionStyle","setReactionStyle","reactionRef","handleClickOutSide","spaceFromTriggerX","spaceFromTriggerY","maximumLeft","innerWidth","ENTER_KEY","_MenuItems","_EmojiListItems","MenuItem","onClick","disable","handleClickEvent","e","getClassName","keyCode","LabelTypography","SUBTITLE_2","LabelColors","ONBACKGROUND_4","ONBACKGROUND_1","MenuRoot","EmojiReactionListRoot","ContextMenu","menuTrigger","menuItems","showMenu","setShowMenu"],"mappings":"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"}

package/ui/DateSeparator.js

@@ -1,36 +1,30 @@
-import { b as _toConsumableArray } from '../_rollupPluginBabelHelpers-30d122aa.js';
+import { a as __spreadArray } from '../tslib.es6-710c6267.js';
 import React__default from 'react';
-import PropTypes from 'prop-types';
-import { c as changeColorToClassName, C as Colors } from '../color-f6548425.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-07cd4778.js';
-import '../stringSet-92f53c6e.js';
+import { C as Colors, c as changeColorToClassName } from '../color-798488ed.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-ed39099a.js';
+import '../_rollupPluginBabelHelpers-3043541a.js';
+import 'prop-types';
+import '../stringSet-647493ce.js';
 
-function DateSeparator(_ref) {
-  var className = _ref.className,
-      children = _ref.children,
-      separatorColor = _ref.separatorColor;
+var DateSeparator = function DateSeparator(_a) {
+  var _b = _a.children,
+      children = _b === void 0 ? null : _b,
+      _c = _a.className,
+      className = _c === void 0 ? '' : _c,
+      _d = _a.separatorColor,
+      separatorColor = _d === void 0 ? Colors.ONBACKGROUND_4 : _d;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: [].concat(_toConsumableArray(Array.isArray(className) ? className : [className]), ['sendbird-separator']).join(' ')
+    className: __spreadArray(__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-separator'], false).join(' ')
   }, /*#__PURE__*/React__default.createElement("div", {
     className: ['sendbird-separator__left', "".concat(changeColorToClassName(separatorColor), "--background-color")].join(' ')
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-separator__text"
-  }, children), /*#__PURE__*/React__default.createElement("div", {
-    className: ['sendbird-separator__right', "".concat(changeColorToClassName(separatorColor), "--background-color")].join(' ')
-  }));
-}
-DateSeparator.propTypes = {
-  className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string), PropTypes.element]),
-  separatorColor: PropTypes.oneOf(['ONBACKGROUND_1', 'ONBACKGROUND_2', 'ONBACKGROUND_3', 'ONBACKGROUND_4', 'ONCONTENT_1', 'PRIMARY', 'ERROR'])
-};
-DateSeparator.defaultProps = {
-  className: '',
-  children: /*#__PURE__*/React__default.createElement(Label, {
+  }, children || /*#__PURE__*/React__default.createElement(Label, {
     type: LabelTypography.CAPTION_2,
     color: LabelColors.ONBACKGROUND_2
-  }, "Date Separator"),
-  separatorColor: Colors.ONBACKGROUND_4
+  }, "Date Separator")), /*#__PURE__*/React__default.createElement("div", {
+    className: ['sendbird-separator__right', "".concat(changeColorToClassName(separatorColor), "--background-color")].join(' ')
+  }));
 };
 
 export { DateSeparator as default };

package/ui/DateSeparator.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateSeparator.js","sources":["../../src/ui/DateSeparator/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport './index.scss';\nimport { changeColorToClassName, Colors } from '../../utils/color';\nimport Label, { LabelTypography, LabelColors } from '../Label';\n\nexport default function DateSeparator({\n  className,\n  children,\n  separatorColor,\n}) {\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-separator',\n      ].join(' ')}\n    >\n      <div className={['sendbird-separator__left', `${changeColorToClassName(separatorColor)}--background-color`].join(' ')} />\n      <div className=\"sendbird-separator__text\">{children}</div>\n      <div className={['sendbird-separator__right', `${changeColorToClassName(separatorColor)}--background-color`].join(' ')} />\n    </div>\n  );\n}\n\nDateSeparator.propTypes = {\n  className: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.arrayOf(PropTypes.string),\n  ]),\n  children: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.arrayOf(PropTypes.string),\n    PropTypes.element,\n  ]),\n  separatorColor: PropTypes.oneOf([\n    'ONBACKGROUND_1',\n    'ONBACKGROUND_2',\n    'ONBACKGROUND_3',\n    'ONBACKGROUND_4',\n    'ONCONTENT_1',\n    'PRIMARY',\n    'ERROR',\n  ]),\n};\n\nDateSeparator.defaultProps = {\n  className: '',\n  children: (\n    <Label type={LabelTypography.CAPTION_2} color={LabelColors.ONBACKGROUND_2}>\n      Date Separator\n    </Label>\n  ),\n  separatorColor: Colors.ONBACKGROUND_4,\n};\n"],"names":["DateSeparator","className","children","separatorColor","React","Array","isArray","join","changeColorToClassName","propTypes","PropTypes","oneOfType","string","arrayOf","element","oneOf","defaultProps","LabelTypography","CAPTION_2","LabelColors","ONBACKGROUND_2","Colors","ONBACKGROUND_4"],"mappings":";;;;;;;AAOe,SAASA,aAAT,OAIZ;AAAA,MAHDC,SAGC,QAHDA,SAGC;AAAA,MAFDC,QAEC,QAFDA,QAEC;AAAA,MADDC,cACC,QADDA,cACC;AACD,sBACEC;AACE,IAAA,SAAS,EAAE,6BACLC,KAAK,CAACC,OAAN,CAAcL,SAAd,IAA2BA,SAA3B,GAAuC,CAACA,SAAD,CADlC,IAET,oBAFS,GAGTM,IAHS,CAGJ,GAHI;AADb,kBAMEH;AAAK,IAAA,SAAS,EAAE,CAAC,0BAAD,YAAgCI,sBAAsB,CAACL,cAAD,CAAtD,yBAA4FI,IAA5F,CAAiG,GAAjG;AAAhB,IANF,eAOEH;AAAK,IAAA,SAAS,EAAC;AAAf,KAA2CF,QAA3C,CAPF,eAQEE;AAAK,IAAA,SAAS,EAAE,CAAC,2BAAD,YAAiCI,sBAAsB,CAACL,cAAD,CAAvD,yBAA6FI,IAA7F,CAAkG,GAAlG;AAAhB,IARF,CADF;AAYD;AAEDP,aAAa,CAACS,SAAd,GAA0B;AACxBR,EAAAA,SAAS,EAAES,SAAS,CAACC,SAAV,CAAoB,CAC7BD,SAAS,CAACE,MADmB,EAE7BF,SAAS,CAACG,OAAV,CAAkBH,SAAS,CAACE,MAA5B,CAF6B,CAApB,CADa;AAKxBV,EAAAA,QAAQ,EAAEQ,SAAS,CAACC,SAAV,CAAoB,CAC5BD,SAAS,CAACE,MADkB,EAE5BF,SAAS,CAACG,OAAV,CAAkBH,SAAS,CAACE,MAA5B,CAF4B,EAG5BF,SAAS,CAACI,OAHkB,CAApB,CALc;AAUxBX,EAAAA,cAAc,EAAEO,SAAS,CAACK,KAAV,CAAgB,CAC9B,gBAD8B,EAE9B,gBAF8B,EAG9B,gBAH8B,EAI9B,gBAJ8B,EAK9B,aAL8B,EAM9B,SAN8B,EAO9B,OAP8B,CAAhB;AAVQ,CAA1B;AAqBAf,aAAa,CAACgB,YAAd,GAA6B;AAC3Bf,EAAAA,SAAS,EAAE,EADgB;AAE3BC,EAAAA,QAAQ,eACNE,6BAAC,KAAD;AAAO,IAAA,IAAI,EAAEa,eAAe,CAACC,SAA7B;AAAwC,IAAA,KAAK,EAAEC,WAAW,CAACC;AAA3D,sBAHyB;AAO3BjB,EAAAA,cAAc,EAAEkB,MAAM,CAACC;AAPI,CAA7B;;;;"}
+{"version":3,"file":"DateSeparator.js","sources":["../../src/ui/DateSeparator/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\n\nimport './index.scss';\n\nimport {\n  Colors,\n  changeColorToClassName,\n} from '../../utils/color';\n\nimport Label, { LabelTypography, LabelColors } from '../Label';\n\nexport interface DateSeparatorProps {\n  children?: string | ReactElement;\n  className?: string | Array<string>;\n  separatorColor?: Colors;\n}\nconst DateSeparator = ({\n  children = null,\n  className = '',\n  separatorColor = Colors.ONBACKGROUND_4,\n}: DateSeparatorProps): ReactElement => {\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-separator',\n      ].join(' ')}\n    >\n      <div className={['sendbird-separator__left', `${changeColorToClassName(separatorColor)}--background-color`].join(' ')} />\n      <div className=\"sendbird-separator__text\">\n        {\n          children\n          || (\n            <Label type={LabelTypography.CAPTION_2} color={LabelColors.ONBACKGROUND_2}>\n              Date Separator\n            </Label>\n          )\n        }\n      </div>\n      <div className={['sendbird-separator__right', `${changeColorToClassName(separatorColor)}--background-color`].join(' ')} />\n    </div>\n  );\n};\n\nexport default DateSeparator;\n"],"names":["DateSeparator","_a","_b","children","_c","className","_d","separatorColor","Colors","ONBACKGROUND_4","React","__spreadArray","Array","isArray","join","changeColorToClassName","LabelTypography","CAPTION_2","LabelColors","ONBACKGROUND_2"],"mappings":";;;;;;;;IAgBMA,aAAa,GAAG,SAAhBA,aAAgB,CAACC,EAAD;MACpBC;MAAAC,QAAQ,mBAAG;MACXC;MAAAC,SAAS,mBAAG;MACZC;MAAAC,cAAc,mBAAGC,MAAM,CAACC;AAExB,sBACEC;AACE,IAAA,SAAS,EAAEC,gCACLC,KAAK,CAACC,OAAN,CAAcR,SAAd,IAA2BA,SAA3B,GAAuC,CAACA,SAAD,WAC3C,6BAFS,CAGTS,IAHS,CAGJ,GAHI;AADb,kBAMEJ;AAAK,IAAA,SAAS,EAAE,CAAC,0BAAD,EAA6B,SAAA,CAAGK,sBAAsB,CAACR,cAAD,CAAzB,sBAAA,CAA7B,EAA4FO,IAA5F,CAAiG,GAAjG;AAAhB,IANF,eAOEJ;AAAK,IAAA,SAAS,EAAC;AAAf,KAEIP,QAAQ,iBAENO,6BAAC,KAAD;AAAO,IAAA,IAAI,EAAEM,eAAe,CAACC,SAA7B;AAAwC,IAAA,KAAK,EAAEC,WAAW,CAACC;AAA3D,sBAJN,CAPF,eAiBET;AAAK,IAAA,SAAS,EAAE,CAAC,2BAAD,EAA8B,SAAA,CAAGK,sBAAsB,CAACR,cAAD,CAAzB,sBAAA,CAA9B,EAA6FO,IAA7F,CAAkG,GAAlG;AAAhB,IAjBF,CADF;AAqBD;;;;"}

package/ui/EmojiReactions.js

@@ -6,16 +6,17 @@ import ReactionButton from './ReactionButton.js';
 import ImageRenderer from './ImageRenderer.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
 import ContextMenu, { EmojiListItems } from './ContextMenu.js';
-import { I as getEmojiMapAll, k as getClassName, J as isReactedBy, K as getEmojiTooltipString, H as getEmojiListAll } from '../index-65007eeb.js';
-import { a as LocalizationContext } from '../LocalizationContext-61a4a931.js';
-import '../_rollupPluginBabelHelpers-30d122aa.js';
+import { I as getEmojiMapAll, k as getClassName, J as isReactedBy, K as getEmojiTooltipString, H as getEmojiListAll } from '../index-03ccaf35.js';
+import { a as LocalizationContext } from '../LocalizationContext-2a073ef0.js';
+import '../tslib.es6-710c6267.js';
+import '../index-ed39099a.js';
+import '../_rollupPluginBabelHelpers-3043541a.js';
 import 'prop-types';
-import '../index-07cd4778.js';
-import '../stringSet-92f53c6e.js';
+import '../stringSet-647493ce.js';
 import 'react-dom';
 import './SortByRow.js';
-import '../tslib.es6-c793443a.js';
-import '../index-191d1d43.js';
+import '../uuid-60ae25c1.js';
+import '../index-5ec69689.js';
 
 var EmojiReactions = function EmojiReactions(_a) {
   var _b, _c;

package/ui/EmojiReactions.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiReactions.js","sources":["../../src/ui/EmojiReactions/index.tsx"],"sourcesContent":["import './index.scss';\nimport React, { ReactElement, useContext, useRef } from 'react';\nimport type { FileMessage, Reaction, UserMessage } from '@sendbird/chat/message';\nimport type { Emoji, EmojiContainer } from '@sendbird/chat';\n\nimport Tooltip from '../Tooltip';\nimport TooltipWrapper from '../TooltipWrapper';\nimport ReactionBadge from '../ReactionBadge';\nimport ReactionButton from '../ReactionButton';\nimport ImageRenderer from '../ImageRenderer';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport ContextMenu, { EmojiListItems } from '../ContextMenu';\n\nimport { getClassName, getEmojiListAll, getEmojiMapAll, getEmojiTooltipString, isReactedBy } from '../../utils';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\n\ninterface Props {\n  className?: string | Array<string>;\n  userId: string;\n  message: UserMessage | FileMessage;\n  emojiContainer: EmojiContainer;\n  memberNicknamesMap: Map<string, string>;\n  spaceFromTrigger?: Record<string, unknown>;\n  isByMe?: boolean;\n  toggleReaction?: (message: UserMessage | FileMessage, key: string, byMe: boolean) => void;\n}\n\nconst EmojiReactions = ({\n  className,\n  userId,\n  message,\n  emojiContainer,\n  memberNicknamesMap,\n  spaceFromTrigger = {},\n  isByMe = false,\n  toggleReaction,\n}: Props): ReactElement => {\n  const { stringSet } = useContext(LocalizationContext);\n  const emojisMap = getEmojiMapAll(emojiContainer);\n  const addReactionRef = useRef(null);\n\n  return (\n    <div className={getClassName([\n      className, 'sendbird-emoji-reactions',\n      isByMe ? 'outgoing' : 'incoming',\n    ])}>\n      {(message?.reactions?.length > 0) && (\n        message.reactions.map((reaction: Reaction): ReactElement => {\n          const reactedByMe = isReactedBy(userId, reaction);\n          return (\n            <TooltipWrapper\n              className=\"sendbird-emoji-reactions__reaction-badge\"\n              key={reaction?.key}\n              hoverTooltip={(reaction?.userIds?.length > 0) && (\n                <Tooltip>\n                  {getEmojiTooltipString(reaction, userId, memberNicknamesMap, stringSet)}\n                </Tooltip>\n              )}\n            >\n              <ReactionBadge\n                count={reaction.userIds.length}\n                selected={reactedByMe}\n                onClick={() => toggleReaction(message, reaction.key, reactedByMe)}\n              >\n                <ImageRenderer\n                  circle\n                  url={emojisMap.get(reaction?.key)?.url || ''}\n                  width=\"20px\"\n                  height=\"20px\"\n                  defaultComponent={(\n                    <Icon width=\"20px\" height=\"20px\" type={IconTypes.QUESTION} />\n                  )}\n                />\n              </ReactionBadge>\n            </TooltipWrapper>\n          );\n        })\n      )}\n      {(message?.reactions?.length < emojisMap.size) && (\n        <ContextMenu\n          menuTrigger={(toggleDropdown: () => void): ReactElement => (\n            <ReactionBadge\n              className=\"sendbird-emoji-reactions__add-reaction-badge\"\n              ref={addReactionRef}\n              isAdd\n              onClick={toggleDropdown}\n            >\n              <Icon\n                type={IconTypes.EMOJI_MORE}\n                fillColor={IconColors.ON_BACKGROUND_3}\n                width=\"20px\"\n                height=\"20px\"\n              />\n            </ReactionBadge>\n          )}\n          menuItems={(closeDropdown: () => void): ReactElement => (\n            <EmojiListItems\n              parentRef={addReactionRef}\n              parentContainRef={addReactionRef}\n              closeDropdown={closeDropdown}\n              spacefromTrigger={spaceFromTrigger}\n            >\n              {getEmojiListAll(emojiContainer).map((emoji: Emoji): ReactElement => {\n                const isReacted: boolean = message?.reactions?.\n                  filter((reaction: Reaction): boolean => reaction.key === emoji.key)[0]?.userIds?.\n                  some((reactorId: string): boolean => reactorId === userId);\n                return (\n                  <ReactionButton\n                    key={emoji.key}\n                    width=\"36px\"\n                    height=\"36px\"\n                    selected={isReacted}\n                    onClick={(): void => {\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: Record<string, unknown>): ReactElement => (\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\nexport default EmojiReactions;\n"],"names":["EmojiReactions","_a","className","userId","message","emojiContainer","memberNicknamesMap","_d","spaceFromTrigger","_e","isByMe","toggleReaction","stringSet","useContext","LocalizationContext","emojisMap","getEmojiMapAll","addReactionRef","useRef","React","getClassName","reactions","length","map","reaction","reactedByMe","isReactedBy","key","userIds","getEmojiTooltipString","get","url","IconTypes","QUESTION","size","toggleDropdown","EMOJI_MORE","IconColors","ON_BACKGROUND_3","closeDropdown","getEmojiListAll","emoji","isReacted","filter","some","reactorId","style"],"mappings":"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"}
+{"version":3,"file":"EmojiReactions.js","sources":["../../src/ui/EmojiReactions/index.tsx"],"sourcesContent":["import './index.scss';\nimport React, { ReactElement, useContext, useRef } from 'react';\nimport type { FileMessage, Reaction, UserMessage } from '@sendbird/chat/message';\nimport type { Emoji, EmojiContainer } from '@sendbird/chat';\n\nimport Tooltip from '../Tooltip';\nimport TooltipWrapper from '../TooltipWrapper';\nimport ReactionBadge from '../ReactionBadge';\nimport ReactionButton from '../ReactionButton';\nimport ImageRenderer from '../ImageRenderer';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport ContextMenu, { EmojiListItems } from '../ContextMenu';\n\nimport { getClassName, getEmojiListAll, getEmojiMapAll, getEmojiTooltipString, isReactedBy } from '../../utils';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\n\ninterface Props {\n  className?: string | Array<string>;\n  userId: string;\n  message: UserMessage | FileMessage;\n  emojiContainer: EmojiContainer;\n  memberNicknamesMap: Map<string, string>;\n  spaceFromTrigger?: Record<string, unknown>;\n  isByMe?: boolean;\n  toggleReaction?: (message: UserMessage | FileMessage, key: string, byMe: boolean) => void;\n}\n\nconst EmojiReactions = ({\n  className,\n  userId,\n  message,\n  emojiContainer,\n  memberNicknamesMap,\n  spaceFromTrigger = {},\n  isByMe = false,\n  toggleReaction,\n}: Props): ReactElement => {\n  const { stringSet } = useContext(LocalizationContext);\n  const emojisMap = getEmojiMapAll(emojiContainer);\n  const addReactionRef = useRef(null);\n\n  return (\n    <div className={getClassName([\n      className, 'sendbird-emoji-reactions',\n      isByMe ? 'outgoing' : 'incoming',\n    ])}>\n      {(message?.reactions?.length > 0) && (\n        message.reactions.map((reaction: Reaction): ReactElement => {\n          const reactedByMe = isReactedBy(userId, reaction);\n          return (\n            <TooltipWrapper\n              className=\"sendbird-emoji-reactions__reaction-badge\"\n              key={reaction?.key}\n              hoverTooltip={(reaction?.userIds?.length > 0) && (\n                <Tooltip>\n                  {getEmojiTooltipString(reaction, userId, memberNicknamesMap, stringSet)}\n                </Tooltip>\n              )}\n            >\n              <ReactionBadge\n                count={reaction.userIds.length}\n                selected={reactedByMe}\n                onClick={() => toggleReaction(message, reaction.key, reactedByMe)}\n              >\n                <ImageRenderer\n                  circle\n                  url={emojisMap.get(reaction?.key)?.url || ''}\n                  width=\"20px\"\n                  height=\"20px\"\n                  defaultComponent={(\n                    <Icon width=\"20px\" height=\"20px\" type={IconTypes.QUESTION} />\n                  )}\n                />\n              </ReactionBadge>\n            </TooltipWrapper>\n          );\n        })\n      )}\n      {(message?.reactions?.length < emojisMap.size) && (\n        <ContextMenu\n          menuTrigger={(toggleDropdown: () => void): ReactElement => (\n            <ReactionBadge\n              className=\"sendbird-emoji-reactions__add-reaction-badge\"\n              ref={addReactionRef}\n              isAdd\n              onClick={toggleDropdown}\n            >\n              <Icon\n                type={IconTypes.EMOJI_MORE}\n                fillColor={IconColors.ON_BACKGROUND_3}\n                width=\"20px\"\n                height=\"20px\"\n              />\n            </ReactionBadge>\n          )}\n          menuItems={(closeDropdown: () => void): ReactElement => (\n            <EmojiListItems\n              parentRef={addReactionRef}\n              parentContainRef={addReactionRef}\n              closeDropdown={closeDropdown}\n              spacefromTrigger={spaceFromTrigger}\n            >\n              {getEmojiListAll(emojiContainer).map((emoji: Emoji): ReactElement => {\n                const isReacted: boolean = message?.reactions?.\n                  filter((reaction: Reaction): boolean => reaction.key === emoji.key)[0]?.userIds?.\n                  some((reactorId: string): boolean => reactorId === userId);\n                return (\n                  <ReactionButton\n                    key={emoji.key}\n                    width=\"36px\"\n                    height=\"36px\"\n                    selected={isReacted}\n                    onClick={(): void => {\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: Record<string, unknown>): ReactElement => (\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\nexport default EmojiReactions;\n"],"names":["EmojiReactions","_a","className","userId","message","emojiContainer","memberNicknamesMap","_d","spaceFromTrigger","_e","isByMe","toggleReaction","stringSet","useContext","LocalizationContext","emojisMap","getEmojiMapAll","addReactionRef","useRef","React","getClassName","reactions","length","map","reaction","reactedByMe","isReactedBy","key","userIds","getEmojiTooltipString","get","url","IconTypes","QUESTION","size","toggleDropdown","EMOJI_MORE","IconColors","ON_BACKGROUND_3","closeDropdown","getEmojiListAll","emoji","isReacted","filter","some","reactorId","style"],"mappings":"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"}

package/ui/FileMessageItemBody.js

@@ -1,13 +1,13 @@
 import React__default from 'react';
-import { b as LabelColors, L as Label, a as LabelTypography } from '../index-07cd4778.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-ed39099a.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
 import TextButton from './TextButton.js';
-import { k as getClassName, L as getUIKitFileType, t as truncateString } from '../index-65007eeb.js';
-import '../_rollupPluginBabelHelpers-30d122aa.js';
+import { k as getClassName, L as getUIKitFileType, t as truncateString } from '../index-03ccaf35.js';
+import { C as Colors } from '../color-798488ed.js';
+import '../_rollupPluginBabelHelpers-3043541a.js';
 import 'prop-types';
-import '../stringSet-92f53c6e.js';
-import '../color-f6548425.js';
-import '../tslib.es6-c793443a.js';
+import '../stringSet-647493ce.js';
+import '../tslib.es6-710c6267.js';
 
 function FileMessageItemBody(_a) {
   var _b;
@@ -39,7 +39,7 @@ function FileMessageItemBody(_a) {
     onClick: function onClick() {
       window.open(message === null || message === void 0 ? void 0 : message.url);
     },
-    color: isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1
+    color: isByMe ? Colors.ONCONTENT_1 : Colors.ONBACKGROUND_1
   }, /*#__PURE__*/React__default.createElement(Label, {
     className: "sendbird-file-message-item-body__file-name__text",
     type: LabelTypography.BODY_1,

package/ui/FileMessageItemBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileMessageItemBody.js","sources":["../../src/ui/FileMessageItemBody/index.tsx"],"sourcesContent":["import './index.scss';\nimport React, { ReactElement } from 'react';\nimport type { FileMessage } from '@sendbird/chat/message';\n\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport TextButton from '../TextButton';\nimport { getClassName, getUIKitFileType, truncateString } from '../../utils';\n\ninterface Props {\n  className?: string | Array<string>;\n  message: FileMessage;\n  isByMe?: boolean;\n  mouseHover?: boolean;\n}\n\nexport default function FileMessageItemBody({\n  className,\n  message,\n  isByMe = false,\n  mouseHover = false,\n}: Props): ReactElement {\n\n  return (\n    <div className={getClassName([\n      className,\n      'sendbird-file-message-item-body',\n      isByMe ? 'outgoing' : 'incoming',\n      mouseHover ? 'mouse-hover' : '',\n      message?.reactions?.length > 0 ? 'reactions' : '',\n    ])}>\n      <div className=\"sendbird-file-message-item-body__file-icon\">\n        <Icon\n          className={'sendbird-file-message-item-body__file-icon__icon'}\n          type={{\n            IMAGE: IconTypes.PHOTO,\n            VIDEO: IconTypes.PLAY,\n            AUDIO: IconTypes.FILE_AUDIO,\n            GIF: IconTypes.GIF,\n            OTHERS: IconTypes.FILE_DOCUMENT,\n          }[getUIKitFileType(message?.type)]}\n          fillColor={IconColors.PRIMARY}\n          width=\"24px\"\n          height=\"24px\"\n        />\n      </div>\n      <TextButton\n        className=\"sendbird-file-message-item-body__file-name\"\n        onClick={() => { window.open(message?.url) }}\n        color={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}\n      >\n        <Label\n          className=\"sendbird-file-message-item-body__file-name__text\"\n          type={LabelTypography.BODY_1}\n          color={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}\n        >\n          {truncateString(message?.name || message?.url)}\n        </Label>\n      </TextButton>\n    </div>\n  );\n}\n"],"names":["FileMessageItemBody","_a","className","message","_c","isByMe","_d","mouseHover","React","getClassName","reactions","length","IMAGE","IconTypes","PHOTO","VIDEO","PLAY","AUDIO","FILE_AUDIO","GIF","OTHERS","FILE_DOCUMENT","getUIKitFileType","type","IconColors","PRIMARY","window","open","url","LabelColors","ONCONTENT_1","ONBACKGROUND_1","LabelTypography","BODY_1","truncateString","name"],"mappings":";;;;;;;;;;;SAgBwBA,oBAAoBC;;;MAC1CC,SAAS;MACTC,OAAO;MACPC;MAAAC,MAAM,mBAAG;MACTC;MAAAC,UAAU,mBAAG;AAGb,sBACEC;AAAK,IAAA,SAAS,EAAEC,YAAY,CAAC,CAC3BP,SAD2B,EAE3B,iCAF2B,EAG3BG,MAAM,GAAG,UAAH,GAAgB,UAHK,EAI3BE,UAAU,GAAG,aAAH,GAAmB,EAJF,EAK3B,CAAA,MAAAJ,OAAO,SAAP,IAAAA,OAAO,WAAP,SAAA,GAAAA,OAAO,CAAEO,SAAT,UAAA,iBAAA,SAAA,MAAoBC,MAApB,IAA6B,CAA7B,GAAiC,WAAjC,GAA+C,EALpB,CAAD;AAA5B,kBAOEH;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA,6BAAC,IAAD;AACE,IAAA,SAAS,EAAE,kDADb;AAEE,IAAA,IAAI,EAAE;AACJI,MAAAA,KAAK,EAAEC,SAAS,CAACC,KADb;AAEJC,MAAAA,KAAK,EAAEF,SAAS,CAACG,IAFb;AAGJC,MAAAA,KAAK,EAAEJ,SAAS,CAACK,UAHb;AAIJC,MAAAA,GAAG,EAAEN,SAAS,CAACM,GAJX;AAKJC,MAAAA,MAAM,EAAEP,SAAS,CAACQ;AALd,MAMJC,gBAAgB,CAACnB,OAAO,SAAP,IAAAA,OAAO,WAAP,SAAA,GAAAA,OAAO,CAAEoB,IAAV,CANZ,CAFR;AASE,IAAA,SAAS,EAAEC,UAAU,CAACC,OATxB;AAUE,IAAA,KAAK,EAAC,MAVR;AAWE,IAAA,MAAM,EAAC;AAXT,IADF,CAPF,eAsBEjB,6BAAC,UAAD;AACE,IAAA,SAAS,EAAC,4CADZ;AAEE,IAAA,OAAO,EAAE;AAAQkB,MAAAA,MAAM,CAACC,IAAP,CAAYxB,OAAO,SAAP,IAAAA,OAAO,WAAP,SAAA,GAAAA,OAAO,CAAEyB,GAArB;AAA2B,KAF9C;AAGE,IAAA,KAAK,EAAEvB,MAAM,GAAGwB,WAAW,CAACC,WAAf,GAA6BD,WAAW,CAACE;AAHxD,kBAKEvB,6BAAC,KAAD;AACE,IAAA,SAAS,EAAC,kDADZ;AAEE,IAAA,IAAI,EAAEwB,eAAe,CAACC,MAFxB;AAGE,IAAA,KAAK,EAAE5B,MAAM,GAAGwB,WAAW,CAACC,WAAf,GAA6BD,WAAW,CAACE;AAHxD,KAKGG,cAAc,CAAC,CAAA/B,OAAO,SAAP,IAAAA,OAAO,WAAP,SAAA,GAAAA,OAAO,CAAEgC,IAAT,MAAiBhC,OAAO,SAAP,IAAAA,OAAO,WAAP,SAAA,GAAAA,OAAO,CAAEyB,GAA1B,CAAD,CALjB,CALF,CAtBF,CADF;AAsCD;;;;"}
+{"version":3,"file":"FileMessageItemBody.js","sources":["../../src/ui/FileMessageItemBody/index.tsx"],"sourcesContent":["import './index.scss';\nimport React, { ReactElement } from 'react';\nimport type { FileMessage } from '@sendbird/chat/message';\n\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport TextButton from '../TextButton';\nimport { getClassName, getUIKitFileType, truncateString } from '../../utils';\nimport { Colors } from '../../utils/color';\n\ninterface Props {\n  className?: string | Array<string>;\n  message: FileMessage;\n  isByMe?: boolean;\n  mouseHover?: boolean;\n}\n\nexport default function FileMessageItemBody({\n  className,\n  message,\n  isByMe = false,\n  mouseHover = false,\n}: Props): ReactElement {\n\n  return (\n    <div className={getClassName([\n      className,\n      'sendbird-file-message-item-body',\n      isByMe ? 'outgoing' : 'incoming',\n      mouseHover ? 'mouse-hover' : '',\n      message?.reactions?.length > 0 ? 'reactions' : '',\n    ])}>\n      <div className=\"sendbird-file-message-item-body__file-icon\">\n        <Icon\n          className={'sendbird-file-message-item-body__file-icon__icon'}\n          type={{\n            IMAGE: IconTypes.PHOTO,\n            VIDEO: IconTypes.PLAY,\n            AUDIO: IconTypes.FILE_AUDIO,\n            GIF: IconTypes.GIF,\n            OTHERS: IconTypes.FILE_DOCUMENT,\n          }[getUIKitFileType(message?.type)]}\n          fillColor={IconColors.PRIMARY}\n          width=\"24px\"\n          height=\"24px\"\n        />\n      </div>\n      <TextButton\n        className=\"sendbird-file-message-item-body__file-name\"\n        onClick={() => { window.open(message?.url) }}\n        color={isByMe ? Colors.ONCONTENT_1 : Colors.ONBACKGROUND_1}\n      >\n        <Label\n          className=\"sendbird-file-message-item-body__file-name__text\"\n          type={LabelTypography.BODY_1}\n          color={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}\n        >\n          {truncateString(message?.name || message?.url)}\n        </Label>\n      </TextButton>\n    </div>\n  );\n}\n"],"names":["FileMessageItemBody","_a","className","message","_c","isByMe","_d","mouseHover","React","getClassName","reactions","length","IMAGE","IconTypes","PHOTO","VIDEO","PLAY","AUDIO","FILE_AUDIO","GIF","OTHERS","FILE_DOCUMENT","getUIKitFileType","type","IconColors","PRIMARY","window","open","url","Colors","ONCONTENT_1","ONBACKGROUND_1","LabelTypography","BODY_1","LabelColors","truncateString","name"],"mappings":";;;;;;;;;;;SAiBwBA,oBAAoBC;;;MAC1CC,SAAS;MACTC,OAAO;MACPC;MAAAC,MAAM,mBAAG;MACTC;MAAAC,UAAU,mBAAG;AAGb,sBACEC;AAAK,IAAA,SAAS,EAAEC,YAAY,CAAC,CAC3BP,SAD2B,EAE3B,iCAF2B,EAG3BG,MAAM,GAAG,UAAH,GAAgB,UAHK,EAI3BE,UAAU,GAAG,aAAH,GAAmB,EAJF,EAK3B,CAAA,MAAAJ,OAAO,SAAP,IAAAA,OAAO,WAAP,SAAA,GAAAA,OAAO,CAAEO,SAAT,UAAA,iBAAA,SAAA,MAAoBC,MAApB,IAA6B,CAA7B,GAAiC,WAAjC,GAA+C,EALpB,CAAD;AAA5B,kBAOEH;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA,6BAAC,IAAD;AACE,IAAA,SAAS,EAAE,kDADb;AAEE,IAAA,IAAI,EAAE;AACJI,MAAAA,KAAK,EAAEC,SAAS,CAACC,KADb;AAEJC,MAAAA,KAAK,EAAEF,SAAS,CAACG,IAFb;AAGJC,MAAAA,KAAK,EAAEJ,SAAS,CAACK,UAHb;AAIJC,MAAAA,GAAG,EAAEN,SAAS,CAACM,GAJX;AAKJC,MAAAA,MAAM,EAAEP,SAAS,CAACQ;AALd,MAMJC,gBAAgB,CAACnB,OAAO,SAAP,IAAAA,OAAO,WAAP,SAAA,GAAAA,OAAO,CAAEoB,IAAV,CANZ,CAFR;AASE,IAAA,SAAS,EAAEC,UAAU,CAACC,OATxB;AAUE,IAAA,KAAK,EAAC,MAVR;AAWE,IAAA,MAAM,EAAC;AAXT,IADF,CAPF,eAsBEjB,6BAAC,UAAD;AACE,IAAA,SAAS,EAAC,4CADZ;AAEE,IAAA,OAAO,EAAE;AAAQkB,MAAAA,MAAM,CAACC,IAAP,CAAYxB,OAAO,SAAP,IAAAA,OAAO,WAAP,SAAA,GAAAA,OAAO,CAAEyB,GAArB;AAA2B,KAF9C;AAGE,IAAA,KAAK,EAAEvB,MAAM,GAAGwB,MAAM,CAACC,WAAV,GAAwBD,MAAM,CAACE;AAH9C,kBAKEvB,6BAAC,KAAD;AACE,IAAA,SAAS,EAAC,kDADZ;AAEE,IAAA,IAAI,EAAEwB,eAAe,CAACC,MAFxB;AAGE,IAAA,KAAK,EAAE5B,MAAM,GAAG6B,WAAW,CAACJ,WAAf,GAA6BI,WAAW,CAACH;AAHxD,KAKGI,cAAc,CAAC,CAAAhC,OAAO,SAAP,IAAAA,OAAO,WAAP,SAAA,GAAAA,OAAO,CAAEiC,IAAT,MAAiBjC,OAAO,SAAP,IAAAA,OAAO,WAAP,SAAA,GAAAA,OAAO,CAAEyB,GAA1B,CAAD,CALjB,CALF,CAtBF,CADF;AAsCD;;;;"}

package/ui/FileViewer.js

@@ -1,27 +1,32 @@
-import React__default from 'react';
-import PropTypes from 'prop-types';
+import React__default, { useContext } from 'react';
 import { createPortal } from 'react-dom';
+import { a as LocalizationContext } from '../LocalizationContext-2a073ef0.js';
+import { M as MODAL_ROOT } from '../index-c9cda9f6.js';
+import { A as isSupportedFileView, B as isVideo, C as isImage } from '../index-03ccaf35.js';
 import Avatar from './Avatar.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-07cd4778.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-ed39099a.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
-import { M as MODAL_ROOT } from '../index-42b2527f.js';
-import { A as isSupportedFileView, B as isVideo, C as isImage } from '../index-65007eeb.js';
-import '../tslib.es6-c793443a.js';
+import '../stringSet-647493ce.js';
+import '../index-5ec69689.js';
+import '../tslib.es6-710c6267.js';
 import './ImageRenderer.js';
-import '../_rollupPluginBabelHelpers-30d122aa.js';
-import '../uuid-7c3f59a3.js';
-import '../stringSet-92f53c6e.js';
+import '../uuid-60ae25c1.js';
+import '../_rollupPluginBabelHelpers-3043541a.js';
+import 'prop-types';
 
-var FileViewerComponent = function FileViewerComponent(_ref) {
-  var profileUrl = _ref.profileUrl,
-      nickname = _ref.nickname,
-      name = _ref.name,
-      type = _ref.type,
-      url = _ref.url,
-      isByMe = _ref.isByMe,
-      onClose = _ref.onClose,
-      onDelete = _ref.onDelete,
-      disableDelete = _ref.disableDelete;
+var FileViewerComponent = function FileViewerComponent(_a) {
+  var profileUrl = _a.profileUrl,
+      nickname = _a.nickname,
+      name = _a.name,
+      type = _a.type,
+      url = _a.url,
+      _b = _a.isByMe,
+      isByMe = _b === void 0 ? true : _b,
+      _c = _a.disableDelete,
+      disableDelete = _c === void 0 ? false : _c,
+      onClose = _a.onClose,
+      onDelete = _a.onDelete;
+  var stringSet = useContext(LocalizationContext).stringSet;
   return /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-fileviewer"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -64,9 +69,9 @@ var FileViewerComponent = function FileViewerComponent(_ref) {
     fillColor: disableDelete ? IconColors.GRAY : IconColors.ON_BACKGROUND_1,
     height: "24px",
     width: "24px",
-    onClick: function onClick() {
+    onClick: function onClick(e) {
       if (!disableDelete) {
-        onDelete();
+        onDelete === null || onDelete === void 0 ? void 0 : onDelete(e);
       }
     }
   }))), /*#__PURE__*/React__default.createElement("div", {
@@ -76,13 +81,12 @@ var FileViewerComponent = function FileViewerComponent(_ref) {
     fillColor: IconColors.ON_BACKGROUND_1,
     height: "24px",
     width: "24px",
-    onClick: onClose
+    onClick: function onClick(e) {
+      return onClose === null || onClose === void 0 ? void 0 : onClose(e);
+    }
   })))), /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-fileviewer__content"
-  }, isVideo(type) &&
-  /*#__PURE__*/
-  // eslint-disable-next-line jsx-a11y/media-has-caption
-  React__default.createElement("video", {
+  }, isVideo(type) && /*#__PURE__*/React__default.createElement("video", {
     controls: true,
     className: "sendbird-fileviewer__content__video"
   }, /*#__PURE__*/React__default.createElement("source", {
@@ -97,68 +101,28 @@ var FileViewerComponent = function FileViewerComponent(_ref) {
   }, /*#__PURE__*/React__default.createElement(Label, {
     type: LabelTypography.H_1,
     color: LabelColors.ONBACKGROUND_1
-  }, "Unsupoprted message"))));
-};
-FileViewerComponent.propTypes = {
-  profileUrl: PropTypes.string.isRequired,
-  nickname: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
-  url: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  onClose: PropTypes.func.isRequired,
-  onDelete: PropTypes.func.isRequired,
-  isByMe: PropTypes.bool,
-  disableDelete: PropTypes.bool
+  }, (stringSet === null || stringSet === void 0 ? void 0 : stringSet.UI__FILE_VIEWER__UNSUPPORT) || 'Unsupported message'))));
 };
-FileViewerComponent.defaultProps = {
-  isByMe: true,
-  disableDelete: false
-};
-function FileViewer(props) {
-  var message = props.message,
-      isByMe = props.isByMe,
-      onClose = props.onClose,
-      onDelete = props.onDelete;
-  var sender = message.sender,
-      type = message.type,
-      url = message.url,
-      _message$name = message.name,
-      name = _message$name === void 0 ? '' : _message$name,
-      _message$threadInfo = message.threadInfo,
-      threadInfo = _message$threadInfo === void 0 ? {} : _message$threadInfo;
-  var disableDelete = (threadInfo === null || threadInfo === void 0 ? void 0 : threadInfo.replyCount) > 0;
-  var profileUrl = sender.profileUrl,
-      _sender$nickname = sender.nickname,
-      nickname = _sender$nickname === void 0 ? '' : _sender$nickname;
+function FileViewer(_a) {
+  var _b, _c, _d;
+
+  var message = _a.message,
+      _e = _a.isByMe,
+      isByMe = _e === void 0 ? false : _e,
+      onClose = _a.onClose,
+      onDelete = _a.onDelete;
   return /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement(FileViewerComponent, {
-    profileUrl: profileUrl,
-    nickname: nickname,
-    type: type,
-    url: url,
-    name: name,
-    onClose: onClose,
-    onDelete: onDelete,
+    profileUrl: (_b = message === null || message === void 0 ? void 0 : message.sender) === null || _b === void 0 ? void 0 : _b.profileUrl,
+    nickname: (_c = message === null || message === void 0 ? void 0 : message.sender) === null || _c === void 0 ? void 0 : _c.nickname,
+    name: message === null || message === void 0 ? void 0 : message.name,
+    type: message === null || message === void 0 ? void 0 : message.type,
+    url: message === null || message === void 0 ? void 0 : message.url,
     isByMe: isByMe,
-    disableDelete: disableDelete
+    disableDelete: ((_d = message === null || message === void 0 ? void 0 : message.threadInfo) === null || _d === void 0 ? void 0 : _d.replyCount) > 0,
+    onClose: onClose,
+    onDelete: onDelete
   }), document.getElementById(MODAL_ROOT));
 }
-FileViewer.propTypes = {
-  message: PropTypes.shape({
-    sender: PropTypes.shape({
-      profileUrl: PropTypes.string,
-      nickname: PropTypes.string
-    }),
-    type: PropTypes.string,
-    url: PropTypes.string,
-    name: PropTypes.string
-  }).isRequired,
-  isByMe: PropTypes.bool,
-  onClose: PropTypes.func.isRequired,
-  onDelete: PropTypes.func.isRequired
-};
-FileViewer.defaultProps = {
-  isByMe: true
-};
 
 export { FileViewerComponent, FileViewer as default };
 //# sourceMappingURL=FileViewer.js.map

package/ui/FileViewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileViewer.js","sources":["../../src/ui/FileViewer/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { createPortal } from 'react-dom';\n\nimport './index.scss';\nimport Avatar from '../Avatar/index';\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport Icon, { IconColors, IconTypes } from '../Icon';\nimport { MODAL_ROOT } from '../../hooks/useModal/ModalRoot';\n\nimport { isImage, isVideo, isSupportedFileView } from '../../utils';\n\nexport const FileViewerComponent = ({\n  // sender\n  profileUrl,\n  nickname,\n  // file\n  name,\n  type,\n  url,\n  // others\n  isByMe,\n  onClose,\n  onDelete,\n  disableDelete,\n}) => (\n  <div className=\"sendbird-fileviewer\">\n    <div className=\"sendbird-fileviewer__header\">\n      <div className=\"sendbird-fileviewer__header__left\">\n        <div className=\"sendbird-fileviewer__header__left__avatar\">\n          <Avatar height=\"32px\" width=\"32px\" src={profileUrl} />\n        </div>\n        <Label\n          className=\"sendbird-fileviewer__header__left__filename\"\n          type={LabelTypography.H_2}\n          color={LabelColors.ONBACKGROUND_1}\n        >\n          {name}\n        </Label>\n        <Label\n          className=\"sendbird-fileviewer__header__left__sender-name\"\n          type={LabelTypography.BODY_1}\n          color={LabelColors.ONBACKGROUND_2}\n        >\n          {nickname}\n        </Label>\n      </div>\n      <div className=\"sendbird-fileviewer__header__right\">\n        {\n          isSupportedFileView(type) && (\n            <div className=\"sendbird-fileviewer__header__right__actions\">\n              <a\n                className=\"sendbird-fileviewer__header__right__actions__download\"\n                rel=\"noopener noreferrer\"\n                href={url}\n                target=\"_blank\"\n              >\n                <Icon\n                  type={IconTypes.DOWNLOAD}\n                  fillColor={IconColors.ON_BACKGROUND_1}\n                  height=\"24px\"\n                  width=\"24px\"\n                />\n              </a>\n              {\n                onDelete && isByMe && (\n                  <div className=\"sendbird-fileviewer__header__right__actions__delete\">\n                    <Icon\n                      className={disableDelete ? 'disabled' : ''}\n                      type={IconTypes.DELETE}\n                      fillColor={disableDelete ? IconColors.GRAY : IconColors.ON_BACKGROUND_1}\n                      height=\"24px\"\n                      width=\"24px\"\n                      onClick={() => { if (!disableDelete) { onDelete(); } }}\n                    />\n                  </div>\n                )\n              }\n            </div>\n          )\n        }\n        <div className=\"sendbird-fileviewer__header__right__actions__close\">\n          <Icon\n            type={IconTypes.CLOSE}\n            fillColor={IconColors.ON_BACKGROUND_1}\n            height=\"24px\"\n            width=\"24px\"\n            onClick={onClose}\n          />\n        </div>\n      </div>\n    </div>\n    <div className=\"sendbird-fileviewer__content\">\n      {isVideo(type) && (\n        // eslint-disable-next-line jsx-a11y/media-has-caption\n        <video controls className=\"sendbird-fileviewer__content__video\">\n          <source src={url} type={type} />\n        </video>\n      )}\n      {\n        isImage(type) && (\n          <img\n            src={url}\n            alt={name}\n            className=\"sendbird-fileviewer__content__img\"\n          />\n        )\n      }\n      {\n        !isSupportedFileView(type) && (\n          <div className=\"sendbird-fileviewer__content__unsupported\">\n            <Label type={LabelTypography.H_1} color={LabelColors.ONBACKGROUND_1}>\n              Unsupoprted message\n            </Label>\n          </div>\n        )\n      }\n    </div>\n  </div>\n);\n\nFileViewerComponent.propTypes = {\n  profileUrl: PropTypes.string.isRequired,\n  nickname: PropTypes.string.isRequired,\n  type: PropTypes.string.isRequired,\n  url: PropTypes.string.isRequired,\n  name: PropTypes.string.isRequired,\n  onClose: PropTypes.func.isRequired,\n  onDelete: PropTypes.func.isRequired,\n  isByMe: PropTypes.bool,\n  disableDelete: PropTypes.bool,\n};\n\nFileViewerComponent.defaultProps = {\n  isByMe: true,\n  disableDelete: false,\n};\n\nexport default function FileViewer(props) {\n  const {\n    message,\n    isByMe,\n    onClose,\n    onDelete,\n  } = props;\n  const {\n    sender,\n    type,\n    url,\n    name = '',\n    threadInfo = {},\n  } = message;\n  const disableDelete = threadInfo?.replyCount > 0;\n  const { profileUrl, nickname = '' } = sender;\n  return createPortal(\n    (\n      <FileViewerComponent\n        profileUrl={profileUrl}\n        nickname={nickname}\n        type={type}\n        url={url}\n        name={name}\n        onClose={onClose}\n        onDelete={onDelete}\n        isByMe={isByMe}\n        disableDelete={disableDelete}\n      />\n    ),\n    document.getElementById(MODAL_ROOT),\n  );\n}\n\nFileViewer.propTypes = {\n  message: PropTypes.shape({\n    sender: PropTypes.shape({\n      profileUrl: PropTypes.string,\n      nickname: PropTypes.string,\n    }),\n    type: PropTypes.string,\n    url: PropTypes.string,\n    name: PropTypes.string,\n  }).isRequired,\n  isByMe: PropTypes.bool,\n  onClose: PropTypes.func.isRequired,\n  onDelete: PropTypes.func.isRequired,\n};\n\nFileViewer.defaultProps = {\n  isByMe: true,\n};\n"],"names":["FileViewerComponent","profileUrl","nickname","name","type","url","isByMe","onClose","onDelete","disableDelete","React","LabelTypography","H_2","LabelColors","ONBACKGROUND_1","BODY_1","ONBACKGROUND_2","isSupportedFileView","IconTypes","DOWNLOAD","IconColors","ON_BACKGROUND_1","DELETE","GRAY","CLOSE","isVideo","isImage","H_1","propTypes","PropTypes","string","isRequired","func","bool","defaultProps","FileViewer","props","message","sender","threadInfo","replyCount","createPortal","document","getElementById","MODAL_ROOT","shape"],"mappings":"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"}
+{"version":3,"file":"FileViewer.js","sources":["../../src/ui/FileViewer/index.tsx"],"sourcesContent":["import React, { MouseEvent, ReactElement, useContext } from 'react';\nimport { FileMessage } from '@sendbird/chat/message';\nimport { createPortal } from 'react-dom';\n\nimport './index.scss';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\nimport { MODAL_ROOT } from '../../hooks/useModal/ModalRoot';\nimport { isImage, isVideo, isSupportedFileView } from '../../utils';\n\nimport Avatar from '../Avatar/index';\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport Icon, { IconColors, IconTypes } from '../Icon';\n\ninterface SenderInfo {\n  profileUrl: string;\n  nickname: string;\n}\ninterface FileInfo {\n  name: string;\n  type: string;\n  url: string;\n}\nexport interface FileViewerComponentProps extends SenderInfo, FileInfo {\n  isByMe?: boolean;\n  disableDelete?: boolean;\n  onClose: (e: MouseEvent<HTMLDivElement>) => void;\n  onDelete: (e: MouseEvent<HTMLDivElement>) => void;\n}\n\nexport const FileViewerComponent = ({\n  profileUrl,\n  nickname,\n  name,\n  type,\n  url,\n  isByMe = true,\n  disableDelete = false,\n  onClose,\n  onDelete,\n}: FileViewerComponentProps): ReactElement => {\n  const { stringSet } = useContext(LocalizationContext);\n  return (\n    <div className=\"sendbird-fileviewer\">\n      <div className=\"sendbird-fileviewer__header\">\n        <div className=\"sendbird-fileviewer__header__left\">\n          <div className=\"sendbird-fileviewer__header__left__avatar\">\n            <Avatar height=\"32px\" width=\"32px\" src={profileUrl} />\n          </div>\n          <Label\n            className=\"sendbird-fileviewer__header__left__filename\"\n            type={LabelTypography.H_2}\n            color={LabelColors.ONBACKGROUND_1}\n          >\n            {name}\n          </Label>\n          <Label\n            className=\"sendbird-fileviewer__header__left__sender-name\"\n            type={LabelTypography.BODY_1}\n            color={LabelColors.ONBACKGROUND_2}\n          >\n            {nickname}\n          </Label>\n        </div>\n        <div className=\"sendbird-fileviewer__header__right\">\n          {\n            isSupportedFileView(type) && (\n              <div className=\"sendbird-fileviewer__header__right__actions\">\n                <a\n                  className=\"sendbird-fileviewer__header__right__actions__download\"\n                  rel=\"noopener noreferrer\"\n                  href={url}\n                  target=\"_blank\"\n                >\n                  <Icon\n                    type={IconTypes.DOWNLOAD}\n                    fillColor={IconColors.ON_BACKGROUND_1}\n                    height=\"24px\"\n                    width=\"24px\"\n                  />\n                </a>\n                {\n                  onDelete && isByMe && (\n                    <div className=\"sendbird-fileviewer__header__right__actions__delete\">\n                      <Icon\n                        className={disableDelete ? 'disabled' : ''}\n                        type={IconTypes.DELETE}\n                        fillColor={disableDelete ? IconColors.GRAY : IconColors.ON_BACKGROUND_1}\n                        height=\"24px\"\n                        width=\"24px\"\n                        onClick={(e) => { if (!disableDelete) { onDelete?.(e); } }}\n                      />\n                    </div>\n                  )\n                }\n              </div>\n            )\n          }\n          <div className=\"sendbird-fileviewer__header__right__actions__close\">\n            <Icon\n              type={IconTypes.CLOSE}\n              fillColor={IconColors.ON_BACKGROUND_1}\n              height=\"24px\"\n              width=\"24px\"\n              onClick={(e) => onClose?.(e)}\n            />\n          </div>\n        </div>\n      </div>\n      <div className=\"sendbird-fileviewer__content\">\n        {isVideo(type) && (\n          <video controls className=\"sendbird-fileviewer__content__video\">\n            <source src={url} type={type} />\n          </video>\n        )}\n        {\n          isImage(type) && (\n            <img\n              src={url}\n              alt={name}\n              className=\"sendbird-fileviewer__content__img\"\n            />\n          )\n        }\n        {\n          !isSupportedFileView(type) && (\n            <div className=\"sendbird-fileviewer__content__unsupported\">\n              <Label type={LabelTypography.H_1} color={LabelColors.ONBACKGROUND_1}>\n                {stringSet?.UI__FILE_VIEWER__UNSUPPORT || 'Unsupported message'}\n              </Label>\n            </div>\n          )\n        }\n      </div>\n    </div>\n  );\n};\n\nexport interface FileViewerProps {\n  message: FileMessage;\n  isByMe?: boolean;\n  onClose: (e: MouseEvent<HTMLDivElement>) => void;\n  onDelete: (e: MouseEvent<HTMLDivElement>) => void;\n}\n\nexport default function FileViewer({\n  message,\n  isByMe = false,\n  onClose,\n  onDelete,\n}: FileViewerProps): ReactElement {\n  return createPortal(\n    (\n      <FileViewerComponent\n        profileUrl={message?.sender?.profileUrl}\n        nickname={message?.sender?.nickname}\n        name={message?.name}\n        type={message?.type}\n        url={message?.url}\n        isByMe={isByMe}\n        disableDelete={message?.threadInfo?.replyCount > 0}\n        onClose={onClose}\n        onDelete={onDelete}\n      />\n    ),\n    document.getElementById(MODAL_ROOT),\n  );\n}\n"],"names":["FileViewerComponent","_a","profileUrl","nickname","name","type","url","_b","isByMe","_c","disableDelete","onClose","onDelete","stringSet","useContext","LocalizationContext","React","LabelTypography","H_2","LabelColors","ONBACKGROUND_1","BODY_1","ONBACKGROUND_2","isSupportedFileView","IconTypes","DOWNLOAD","IconColors","ON_BACKGROUND_1","DELETE","GRAY","e","CLOSE","isVideo","isImage","H_1","UI__FILE_VIEWER__UNSUPPORT","FileViewer","message","_e","createPortal","sender","threadInfo","replyCount","document","getElementById","MODAL_ROOT"],"mappings":"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"}

package/ui/Icon.js

@@ -1,4 +1,4 @@
-import { b as _toConsumableArray } from '../_rollupPluginBabelHelpers-30d122aa.js';
+import { b as _toConsumableArray } from '../_rollupPluginBabelHelpers-3043541a.js';
 import * as React from 'react';
 import React__default from 'react';
 import PropTypes from 'prop-types';