@sendbird/uikit-react 3.1.1 → 3.1.2

package/cjs/ui/ChatHeader.js

@@ -1,73 +1,73 @@
 'use strict';
 
 var React = require('react');
-var PropTypes = require('prop-types');
-var ui_Label = require('../index-cce2b8c0.js');
-var LocalizationContext = require('../LocalizationContext-f05328b8.js');
+var LocalizationContext = require('../LocalizationContext-da62a103.js');
+var ui_Label = require('../index-089e0fba.js');
 var ui_Icon = require('./Icon.js');
 var ui_IconButton = require('./IconButton.js');
 var ui_ChannelAvatar = require('./ChannelAvatar.js');
-require('../_rollupPluginBabelHelpers-92e5e012.js');
-require('../stringSet-afc1ff3b.js');
-require('../index-2dacade8.js');
+require('../stringSet-857a128c.js');
+require('../index-25336220.js');
+require('../_rollupPluginBabelHelpers-4265e501.js');
+require('prop-types');
+require('../tslib.es6-ba69891c.js');
 require('./Avatar.js');
-require('../tslib.es6-12c25052.js');
 require('./ImageRenderer.js');
-require('../uuid-920ae00d.js');
-require('../utils-1a8a0b72.js');
+require('../uuid-49679ac2.js');
+require('../utils-c39eb349.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-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] : ui_Label.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 = React.useContext(LocalizationContext.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 = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+  React.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["default"].createElement("div", {
     className: "sendbird-chat-header"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -115,38 +115,6 @@ function ChatHeader(props) {
     height: "24px"
   }))));
 }
-ChatHeader.propTypes = {
-  /** Type: GroupChannel */
-  currentGroupChannel: PropTypes__default["default"].shape({
-    members: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({})),
-    coverUrl: PropTypes__default["default"].string
-  }),
-
-  /** Type: User */
-  currentUser: PropTypes__default["default"].shape({
-    userId: PropTypes__default["default"].string
-  }),
-  title: PropTypes__default["default"].string,
-  subTitle: PropTypes__default["default"].oneOfType([PropTypes__default["default"].bool, PropTypes__default["default"].string]),
-  isMuted: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].bool]),
-  theme: PropTypes__default["default"].string,
-  showSearchIcon: PropTypes__default["default"].bool,
-  onSearchClick: PropTypes__default["default"].func,
-
-  /** For clicking the info button */
-  onActionClick: PropTypes__default["default"].func
-};
-ChatHeader.defaultProps = {
-  currentGroupChannel: {},
-  currentUser: {},
-  title: '',
-  subTitle: '',
-  isMuted: false,
-  theme: 'light',
-  showSearchIcon: false,
-  onSearchClick: noop,
-  onActionClick: noop
-};
 
 module.exports = ChatHeader;
 //# sourceMappingURL=ChatHeader.js.map

package/cjs/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","ChannelAvatar","Label","LabelTypography","H_2","LabelColors","ONBACKGROUND_1","utils","BODY_1","ONBACKGROUND_2","Icon","IconTypes","NOTIFICATIONS_OFF_FILLED","IconButton","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","ChannelAvatar","Label","LabelTypography","H_2","LabelColors","ONBACKGROUND_1","utils","BODY_1","ONBACKGROUND_2","Icon","IconTypes","NOTIFICATIONS_OFF_FILLED","IconButton","SEARCH","IconColors","PRIMARY","INFO"],"mappings":"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"}

package/cjs/ui/ConnectionStatus.js

@@ -2,21 +2,19 @@
 
 var React = require('react');
 var ui_Icon = require('./Icon.js');
-var ui_Label = require('../index-cce2b8c0.js');
-var LocalizationContext = require('../LocalizationContext-f05328b8.js');
-require('../_rollupPluginBabelHelpers-92e5e012.js');
+var ui_Label = require('../index-089e0fba.js');
+var LocalizationContext = require('../LocalizationContext-da62a103.js');
+require('../_rollupPluginBabelHelpers-4265e501.js');
 require('prop-types');
-require('../stringSet-afc1ff3b.js');
-require('../index-2dacade8.js');
+require('../stringSet-857a128c.js');
+require('../index-25336220.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function ConnectionStatus() {
-  var _useContext = React.useContext(LocalizationContext.LocalizationContext),
-      stringSet = _useContext.stringSet;
-
+  var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-connection-status"
   }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {

package/cjs/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","Label","LabelTypography","BODY_2","LabelColors","ONBACKGROUND_2","TRYING_TO_CONNECT","Icon","IconTypes","DISCONNECTED","IconColors","SENT"],"mappings":";;;;;;;;;;;;;;;AAQA,SAASA,gBAAT,GAA4B;AAC1B,oBAAsBC,gBAAU,CAACC,uCAAD,CAAhC;AAAA,MAAQC,SAAR,eAAQA,SAAR;;AACA,sBACEC;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA,wCAACC,cAAD;AACE,IAAA,IAAI,EAAEC,wBAAe,CAACC,MADxB;AAEE,IAAA,KAAK,EAAEC,oBAAW,CAACC;AAFrB,KAIGN,SAAS,CAACO,iBAJb,CADF,eAOEN,wCAACO,kBAAD;AACE,IAAA,IAAI,EAAEC,iBAAS,CAACC,YADlB;AAEE,IAAA,SAAS,EAAEC,kBAAU,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","Label","LabelTypography","BODY_2","LabelColors","ONBACKGROUND_2","TRYING_TO_CONNECT","Icon","IconTypes","DISCONNECTED","IconColors","SENT"],"mappings":";;;;;;;;;;;;;;;AAQA,SAASA,gBAAT;AACU,MAAAC,SAAS,GAAKC,gBAAU,CAACC,uCAAD,CAAV,UAAd;AACR,sBACEC;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA,wCAACC,cAAD;AACE,IAAA,IAAI,EAAEC,wBAAe,CAACC,MADxB;AAEE,IAAA,KAAK,EAAEC,oBAAW,CAACC;AAFrB,KAIGR,SAAS,CAACS,iBAJb,CADF,eAOEN,wCAACO,kBAAD;AACE,IAAA,IAAI,EAAEC,iBAAS,CAACC,YADlB;AAEE,IAAA,SAAS,EAAEC,kBAAU,CAACC,IAFxB;AAGE,IAAA,KAAK,EAAC,MAHR;AAIE,IAAA,MAAM,EAAC;AAJT,IAPF,CADF;AAgBD;;;;"}