@sendbird/uikit-react 3.1.1 → 3.1.2-rc.0

package/ui/ChatHeader.js

@@ -1,66 +1,67 @@
-import React__default, { useContext } from 'react';
-import PropTypes from 'prop-types';
-import { c as LabelStringSet, L as Label, a as LabelTypography, b as LabelColors } from '../index-07cd4778.js';
-import { a as LocalizationContext } from '../LocalizationContext-61a4a931.js';
+import React__default, { useContext, useEffect } from 'react';
+import { a as LocalizationContext } from '../LocalizationContext-7d740b0a.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-5efc096b.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
 import IconButton from './IconButton.js';
 import ChannelAvatar from './ChannelAvatar.js';
-import '../_rollupPluginBabelHelpers-30d122aa.js';
-import '../stringSet-92f53c6e.js';
-import '../index-191d1d43.js';
+import '../stringSet-53204a58.js';
+import '../index-3d519005.js';
+import '../_rollupPluginBabelHelpers-4e546dea.js';
+import 'prop-types';
+import '../tslib.es6-5c8a20bb.js';
 import './Avatar.js';
-import '../tslib.es6-c793443a.js';
 import './ImageRenderer.js';
-import '../uuid-7c3f59a3.js';
-import '../utils-b37c6db3.js';
+import '../uuid-8d849862.js';
+import '../utils-edeb25c5.js';
 
-var getChannelTitle = function getChannelTitle() {
-  var _channel$members;
+var getChannelTitle = function getChannelTitle(channel, currentUserId, stringSet) {
+  var _a;
 
-  var channel = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var currentUserId = arguments.length > 1 ? arguments[1] : undefined;
-  var stringSet = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : LabelStringSet;
-
-  if (!(channel !== null && channel !== void 0 && channel.name) && !(channel !== null && channel !== void 0 && channel.members)) {
+  if (!(channel === null || channel === void 0 ? void 0 : channel.name) && !(channel === null || channel === void 0 ? void 0 : channel.members)) {
     return stringSet.NO_TITLE;
   }
 
-  if (channel !== null && channel !== void 0 && channel.name && channel.name !== 'Group Channel') {
+  if ((channel === null || channel === void 0 ? void 0 : channel.name) && channel.name !== 'Group Channel') {
     return channel.name;
   }
 
-  if ((channel === null || channel === void 0 ? void 0 : (_channel$members = channel.members) === null || _channel$members === void 0 ? void 0 : _channel$members.length) === 1) {
+  if (((_a = channel === null || channel === void 0 ? void 0 : channel.members) === null || _a === void 0 ? void 0 : _a.length) === 1) {
     return stringSet.NO_MEMBERS;
   }
 
-  return ((channel === null || channel === void 0 ? void 0 : channel.members) || []).filter(function (_ref) {
-    var userId = _ref.userId;
+  return ((channel === null || channel === void 0 ? void 0 : channel.members) || []).filter(function (_a) {
+    var userId = _a.userId;
     return userId !== currentUserId;
-  }).map(function (_ref2) {
-    var nickname = _ref2.nickname;
+  }).map(function (_a) {
+    var nickname = _a.nickname;
     return nickname || stringSet.NO_NAME;
   }).join(', ');
 };
 
-// delete
-
-var noop = function noop() {};
-
-function ChatHeader(props) {
-  var currentGroupChannel = props.currentGroupChannel,
-      currentUser = props.currentUser,
-      title = props.title,
-      subTitle = props.subTitle,
-      isMuted = props.isMuted,
-      theme = props.theme,
-      showSearchIcon = props.showSearchIcon,
-      onSearchClick = props.onSearchClick,
-      onActionClick = props.onActionClick;
-  var userId = currentUser.userId;
-
-  var _useContext = useContext(LocalizationContext),
-      stringSet = _useContext.stringSet;
-
+// will be deprecated
+function ChatHeader(_a) {
+  var currentGroupChannel = _a.currentGroupChannel,
+      currentUser = _a.currentUser,
+      _b = _a.title,
+      title = _b === void 0 ? '' : _b,
+      _c = _a.subTitle,
+      subTitle = _c === void 0 ? '' : _c,
+      _d = _a.isMuted,
+      isMuted = _d === void 0 ? false : _d,
+      _e = _a.theme,
+      theme = _e === void 0 ? 'light' : _e,
+      _f = _a.showSearchIcon,
+      showSearchIcon = _f === void 0 ? false : _f,
+      _g = _a.onSearchClick,
+      onSearchClick = _g === void 0 ? function () {} : _g,
+      _h = _a.onActionClick,
+      onActionClick = _h === void 0 ? function () {} : _h;
+  var userId = currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId;
+  var stringSet = useContext(LocalizationContext).stringSet;
+  useEffect(function () {
+    // eslint-disable-next-line no-console
+    console.warn('SendbirdUIKit: ChatHeader will be deprecated in the next minor version. Recommend to use "@sendbird/uikit-react/Channtl/components/ChannelHeader" instead.');
+  }, []);
   return /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-chat-header"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -108,38 +109,6 @@ function ChatHeader(props) {
     height: "24px"
   }))));
 }
-ChatHeader.propTypes = {
-  /** Type: GroupChannel */
-  currentGroupChannel: PropTypes.shape({
-    members: PropTypes.arrayOf(PropTypes.shape({})),
-    coverUrl: PropTypes.string
-  }),
-
-  /** Type: User */
-  currentUser: PropTypes.shape({
-    userId: PropTypes.string
-  }),
-  title: PropTypes.string,
-  subTitle: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  isMuted: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  theme: PropTypes.string,
-  showSearchIcon: PropTypes.bool,
-  onSearchClick: PropTypes.func,
-
-  /** For clicking the info button */
-  onActionClick: PropTypes.func
-};
-ChatHeader.defaultProps = {
-  currentGroupChannel: {},
-  currentUser: {},
-  title: '',
-  subTitle: '',
-  isMuted: false,
-  theme: 'light',
-  showSearchIcon: false,
-  onSearchClick: noop,
-  onActionClick: noop
-};
 
 export { ChatHeader as default };
 //# sourceMappingURL=ChatHeader.js.map

package/ui/ChatHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatHeader.js","sources":["../../src/ui/ChatHeader/utils.js","../../src/ui/ChatHeader/index.jsx"],"sourcesContent":["import formatDistanceToNowStrict from 'date-fns/formatDistanceToNowStrict';\nimport { LabelStringSet } from '../Label';\n\nexport const prettyDate = (date) => formatDistanceToNowStrict(date, { addSuffix: true });\n\nexport const getChannelTitle = (channel = {}, currentUserId, stringSet = LabelStringSet) => {\n  if (!channel?.name && !channel?.members) {\n    return stringSet.NO_TITLE;\n  }\n  if (channel?.name && channel.name !== 'Group Channel') {\n    return channel.name;\n  }\n\n  if (channel?.members?.length === 1) {\n    return stringSet.NO_MEMBERS;\n  }\n\n  return (channel?.members || [])\n    .filter(({ userId }) => userId !== currentUserId)\n    .map(({ nickname }) => (nickname || stringSet.NO_NAME))\n    .join(', ');\n};\n","// delete\nimport React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\n\nimport './index.scss';\nimport * as utils from './utils';\n\nimport { LocalizationContext } from '../../lib/LocalizationContext';\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport IconButton from '../IconButton';\nimport ChannelAvatar from '../ChannelAvatar/index';\n\nconst noop = () => { };\nexport default function ChatHeader(props) {\n  const {\n    currentGroupChannel,\n    currentUser,\n    title,\n    subTitle,\n    isMuted,\n    theme,\n    showSearchIcon,\n    onSearchClick,\n    onActionClick,\n  } = props;\n  const { userId } = currentUser;\n  const { stringSet } = useContext(LocalizationContext);\n  return (\n    <div className=\"sendbird-chat-header\">\n      <div className=\"sendbird-chat-header__left\">\n        <ChannelAvatar\n          theme={theme}\n          channel={currentGroupChannel}\n          userId={userId}\n          height={32}\n          width={32}\n        />\n        <Label\n          className=\"sendbird-chat-header__left__title\"\n          type={LabelTypography.H_2}\n          color={LabelColors.ONBACKGROUND_1}\n        >\n          {title || utils.getChannelTitle(currentGroupChannel, userId, stringSet)}\n        </Label>\n        <Label\n          className=\"sendbird-chat-header__left__subtitle\"\n          type={LabelTypography.BODY_1}\n          color={LabelColors.ONBACKGROUND_2}\n        >\n          {subTitle}\n        </Label>\n      </div>\n      <div className=\"sendbird-chat-header__right\">\n        {\n          ((typeof isMuted === 'string' && isMuted === 'true') || (typeof isMuted === 'boolean' && isMuted))\n            && (\n              <Icon\n                className=\"sendbird-chat-header__right__mute\"\n                type={IconTypes.NOTIFICATIONS_OFF_FILLED}\n                width=\"24px\"\n                height=\"24px\"\n              />\n            )\n        }\n        {\n          showSearchIcon && (\n            <IconButton\n              className=\"sendbird-chat-header__right__search\"\n              width=\"32px\"\n              height=\"32px\"\n              onClick={onSearchClick}\n            >\n              <Icon\n                type={IconTypes.SEARCH}\n                fillColor={IconColors.PRIMARY}\n                width=\"24px\"\n                height=\"24px\"\n              />\n            </IconButton>\n          )\n        }\n        <IconButton\n          className=\"sendbird-chat-header__right__info\"\n          width=\"32px\"\n          height=\"32px\"\n          onClick={onActionClick}\n        >\n          <Icon\n            type={IconTypes.INFO}\n            fillColor={IconColors.PRIMARY}\n            width=\"24px\"\n            height=\"24px\"\n          />\n        </IconButton>\n      </div>\n    </div>\n  );\n}\n\nChatHeader.propTypes = {\n  /** Type: GroupChannel */\n  currentGroupChannel: PropTypes.shape({\n    members: PropTypes.arrayOf(PropTypes.shape({})),\n    coverUrl: PropTypes.string,\n  }),\n  /** Type: User */\n  currentUser: PropTypes.shape({\n    userId: PropTypes.string,\n  }),\n  title: PropTypes.string,\n  subTitle: PropTypes.oneOfType([\n    PropTypes.bool,\n    PropTypes.string,\n  ]),\n  isMuted: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n  ]),\n  theme: PropTypes.string,\n  showSearchIcon: PropTypes.bool,\n  onSearchClick: PropTypes.func,\n  /** For clicking the info button */\n  onActionClick: PropTypes.func,\n};\n\nChatHeader.defaultProps = {\n  currentGroupChannel: {},\n  currentUser: {},\n  title: '',\n  subTitle: '',\n  isMuted: false,\n  theme: 'light',\n  showSearchIcon: false,\n  onSearchClick: noop,\n  onActionClick: noop,\n};\n"],"names":["getChannelTitle","channel","currentUserId","stringSet","LabelStringSet","name","members","NO_TITLE","length","NO_MEMBERS","filter","userId","map","nickname","NO_NAME","join","noop","ChatHeader","props","currentGroupChannel","currentUser","title","subTitle","isMuted","theme","showSearchIcon","onSearchClick","onActionClick","useContext","LocalizationContext","React","LabelTypography","H_2","LabelColors","ONBACKGROUND_1","utils","BODY_1","ONBACKGROUND_2","IconTypes","NOTIFICATIONS_OFF_FILLED","SEARCH","IconColors","PRIMARY","INFO","propTypes","PropTypes","shape","arrayOf","coverUrl","string","oneOfType","bool","func","defaultProps"],"mappings":"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"}
+{"version":3,"file":"ChatHeader.js","sources":["../../src/ui/ChatHeader/utils.ts","../../src/ui/ChatHeader/index.tsx"],"sourcesContent":["import { GroupChannel } from '@sendbird/chat/groupChannel';\n\nexport const getChannelTitle = (channel: GroupChannel, currentUserId: string, stringSet: { [key: string]: string }): string => {\n  if (!channel?.name && !channel?.members) {\n    return stringSet.NO_TITLE;\n  }\n  if (channel?.name && channel.name !== 'Group Channel') {\n    return channel.name;\n  }\n\n  if (channel?.members?.length === 1) {\n    return stringSet.NO_MEMBERS;\n  }\n\n  return (channel?.members || [])\n    .filter(({ userId }) => userId !== currentUserId)\n    .map(({ nickname }) => (nickname || stringSet.NO_NAME))\n    .join(', ');\n};\n","// will be deprecated\nimport React, { ReactElement, useContext, useEffect } from 'react';\nimport { User } from '@sendbird/chat';\nimport { GroupChannel } from '@sendbird/chat/groupChannel';\n\nimport './index.scss';\nimport * as utils from './utils';\n\nimport { LocalizationContext } from '../../lib/LocalizationContext';\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport IconButton from '../IconButton';\nimport ChannelAvatar from '../ChannelAvatar/index';\n\nexport interface ChatHeaderProps {\n  currentGroupChannel?: GroupChannel;\n  currentUser?: User;\n  title?: string;\n  subTitle?: string;\n  isMuted?: boolean;\n  theme?: string;\n  showSearchIcon?: boolean;\n  onSearchClick?: () => void;\n  onActionClick?: () => void;\n}\n\nexport default function ChatHeader({\n  currentGroupChannel,\n  currentUser,\n  title = '',\n  subTitle = '',\n  isMuted = false,\n  theme = 'light',\n  showSearchIcon = false,\n  onSearchClick = () => {/* noop */},\n  onActionClick = () => {/* noop */},\n}: ChatHeaderProps): ReactElement {\n  const userId = currentUser?.userId;\n  const { stringSet } = useContext(LocalizationContext);\n  useEffect(() => {\n    // eslint-disable-next-line no-console\n    console.warn('SendbirdUIKit: ChatHeader will be deprecated in the next minor version. Recommend to use \"@sendbird/uikit-react/Channtl/components/ChannelHeader\" instead.');\n  }, []);\n  return (\n    <div className=\"sendbird-chat-header\">\n      <div className=\"sendbird-chat-header__left\">\n        <ChannelAvatar\n          theme={theme}\n          channel={currentGroupChannel}\n          userId={userId}\n          height={32}\n          width={32}\n        />\n        <Label\n          className=\"sendbird-chat-header__left__title\"\n          type={LabelTypography.H_2}\n          color={LabelColors.ONBACKGROUND_1}\n        >\n          {title || utils.getChannelTitle(currentGroupChannel, userId, stringSet)}\n        </Label>\n        <Label\n          className=\"sendbird-chat-header__left__subtitle\"\n          type={LabelTypography.BODY_1}\n          color={LabelColors.ONBACKGROUND_2}\n        >\n          {subTitle}\n        </Label>\n      </div>\n      <div className=\"sendbird-chat-header__right\">\n        {\n          ((typeof isMuted === 'string' && isMuted === 'true') || (typeof isMuted === 'boolean' && isMuted))\n            && (\n              <Icon\n                className=\"sendbird-chat-header__right__mute\"\n                type={IconTypes.NOTIFICATIONS_OFF_FILLED}\n                width=\"24px\"\n                height=\"24px\"\n              />\n            )\n        }\n        {\n          showSearchIcon && (\n            <IconButton\n              className=\"sendbird-chat-header__right__search\"\n              width=\"32px\"\n              height=\"32px\"\n              onClick={onSearchClick}\n            >\n              <Icon\n                type={IconTypes.SEARCH}\n                fillColor={IconColors.PRIMARY}\n                width=\"24px\"\n                height=\"24px\"\n              />\n            </IconButton>\n          )\n        }\n        <IconButton\n          className=\"sendbird-chat-header__right__info\"\n          width=\"32px\"\n          height=\"32px\"\n          onClick={onActionClick}\n        >\n          <Icon\n            type={IconTypes.INFO}\n            fillColor={IconColors.PRIMARY}\n            width=\"24px\"\n            height=\"24px\"\n          />\n        </IconButton>\n      </div>\n    </div>\n  );\n}\n"],"names":["getChannelTitle","channel","currentUserId","stringSet","name","members","NO_TITLE","length","NO_MEMBERS","filter","_a","userId","map","nickname","NO_NAME","join","ChatHeader","currentGroupChannel","currentUser","_b","title","_c","subTitle","_d","isMuted","_e","theme","_f","showSearchIcon","_g","onSearchClick","_h","onActionClick","useContext","LocalizationContext","useEffect","console","warn","React","LabelTypography","H_2","LabelColors","ONBACKGROUND_1","utils","BODY_1","ONBACKGROUND_2","IconTypes","NOTIFICATIONS_OFF_FILLED","SEARCH","IconColors","PRIMARY","INFO"],"mappings":"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"}

package/ui/ConnectionStatus.js

@@ -1,16 +1,14 @@
 import React__default, { useContext } from 'react';
 import Icon, { IconTypes, IconColors } from './Icon.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-07cd4778.js';
-import { a as LocalizationContext } from '../LocalizationContext-61a4a931.js';
-import '../_rollupPluginBabelHelpers-30d122aa.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-5efc096b.js';
+import { a as LocalizationContext } from '../LocalizationContext-7d740b0a.js';
+import '../_rollupPluginBabelHelpers-4e546dea.js';
 import 'prop-types';
-import '../stringSet-92f53c6e.js';
-import '../index-191d1d43.js';
+import '../stringSet-53204a58.js';
+import '../index-3d519005.js';
 
 function ConnectionStatus() {
-  var _useContext = useContext(LocalizationContext),
-      stringSet = _useContext.stringSet;
-
+  var stringSet = useContext(LocalizationContext).stringSet;
   return /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-connection-status"
   }, /*#__PURE__*/React__default.createElement(Label, {

package/ui/ConnectionStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectionStatus.js","sources":["../../src/ui/ConnectionStatus/index.jsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\n\nimport './index.scss';\n\nfunction ConnectionStatus() {\n  const { stringSet } = useContext(LocalizationContext);\n  return (\n    <div className=\"sendbird-connection-status\">\n      <Label\n        type={LabelTypography.BODY_2}\n        color={LabelColors.ONBACKGROUND_2}\n      >\n        {stringSet.TRYING_TO_CONNECT}\n      </Label>\n      <Icon\n        type={IconTypes.DISCONNECTED}\n        fillColor={IconColors.SENT}\n        width=\"14px\"\n        height=\"14px\"\n      />\n    </div>\n  );\n}\n\nexport default ConnectionStatus;\n"],"names":["ConnectionStatus","useContext","LocalizationContext","stringSet","React","LabelTypography","BODY_2","LabelColors","ONBACKGROUND_2","TRYING_TO_CONNECT","IconTypes","DISCONNECTED","IconColors","SENT"],"mappings":";;;;;;;;;AAQA,SAASA,gBAAT,GAA4B;AAC1B,oBAAsBC,UAAU,CAACC,mBAAD,CAAhC;AAAA,MAAQC,SAAR,eAAQA,SAAR;;AACA,sBACEC;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA,6BAAC,KAAD;AACE,IAAA,IAAI,EAAEC,eAAe,CAACC,MADxB;AAEE,IAAA,KAAK,EAAEC,WAAW,CAACC;AAFrB,KAIGL,SAAS,CAACM,iBAJb,CADF,eAOEL,6BAAC,IAAD;AACE,IAAA,IAAI,EAAEM,SAAS,CAACC,YADlB;AAEE,IAAA,SAAS,EAAEC,UAAU,CAACC,IAFxB;AAGE,IAAA,KAAK,EAAC,MAHR;AAIE,IAAA,MAAM,EAAC;AAJT,IAPF,CADF;AAgBD;;;;"}
+{"version":3,"file":"ConnectionStatus.js","sources":["../../src/ui/ConnectionStatus/index.tsx"],"sourcesContent":["import React, { ReactElement, useContext } from 'react';\n\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\n\nimport './index.scss';\n\nfunction ConnectionStatus(): ReactElement {\n  const { stringSet } = useContext(LocalizationContext);\n  return (\n    <div className=\"sendbird-connection-status\">\n      <Label\n        type={LabelTypography.BODY_2}\n        color={LabelColors.ONBACKGROUND_2}\n      >\n        {stringSet.TRYING_TO_CONNECT}\n      </Label>\n      <Icon\n        type={IconTypes.DISCONNECTED}\n        fillColor={IconColors.SENT}\n        width=\"14px\"\n        height=\"14px\"\n      />\n    </div>\n  );\n}\n\nexport default ConnectionStatus;\n"],"names":["ConnectionStatus","stringSet","useContext","LocalizationContext","React","LabelTypography","BODY_2","LabelColors","ONBACKGROUND_2","TRYING_TO_CONNECT","IconTypes","DISCONNECTED","IconColors","SENT"],"mappings":";;;;;;;;;AAQA,SAASA,gBAAT;AACU,MAAAC,SAAS,GAAKC,UAAU,CAACC,mBAAD,CAAV,UAAd;AACR,sBACEC;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA,6BAAC,KAAD;AACE,IAAA,IAAI,EAAEC,eAAe,CAACC,MADxB;AAEE,IAAA,KAAK,EAAEC,WAAW,CAACC;AAFrB,KAIGP,SAAS,CAACQ,iBAJb,CADF,eAOEL,6BAAC,IAAD;AACE,IAAA,IAAI,EAAEM,SAAS,CAACC,YADlB;AAEE,IAAA,SAAS,EAAEC,UAAU,CAACC,IAFxB;AAGE,IAAA,KAAK,EAAC,MAHR;AAIE,IAAA,MAAM,EAAC;AAJT,IAPF,CADF;AAgBD;;;;"}