@sendbird/uikit-react 3.0.0-alpha

package/CHANGELOG.md

@@ -0,0 +1,25 @@
+# Changelog - v3
+
+## [3.0.0-beta] (Apr 12 2022)
+
+This is the official beta for Sendbird UIKit for React version 3!
+
+TLDR -> We split the old `smart-components` into modules which contian context and UI. Context contain logic and UI Components handle UI
+
+**[Check out the v2 to v3 migration guide for details](MIGRATION_v2-to-v3.md)**
+
+Changelog:
+* Package should be installed using `@sendbird/uikit-react`
+* Restructure smart-components into modules that contain a context and related UI components
+* Export these context and UI components to allow fine-grain customization
+* Recommend to use these context elements `useXXXXX()` and react function components to make custom components
+* All generic UI components are available as exports
+* Restrcuture export paths to allow better tree-shaking
+* Example:
+```
+import { useChannel } from '@sendbird/uikit-react/Channel/context';
+import ChannelUI from '@sendbird/uikit-react/Channel/components/ChannelUI';
+```
+* We keep older export patterns to make migration easier
+* Retained modules - ChannelList, Channel, ChannelSettings, OpenChannel, OpenChannelSettings, MessageSearch
+* New modules(not including context and ui of above) - CreateChannel, EditUserProfile, ui

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Sendbird
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,103 @@
+# sendbird-uikit
+
+<img alt="Version 3 beta" src="https://img.shields.io/badge/beta-v3-orange" />
+
+> React based UI kit based on sendbird javascript SDK
+
+We are introducing a new version of the Sendbird Chat UIKit. Version 3 features a new modular architecture with more granular components that give you enhanced flexibility to customize your web and mobile apps. Check out our [migration guides](MIGRATION_v2-to-v3.md).
+
+## Getting Started
+
+With Sendbird UI Kit React, we export these components:
+(See `src/index.jsx`)
+
+* SendBirdProvider - The context provider for SDK component
+* useSendbirdStateContext - Hook to access SendBirdProvider context
+* sendBirdSelectors - A bunch of useful selectors that can be used along with *useSendbirdStateContext*
+
+* Channel - A UI Component where conversations happen
+* ChannelList - A ChannelList UI component
+* ChannelSettings - A component to handle the settings of a given channel
+* MessageSearch - To search for a message from a Channel
+* OpenChannel - A UI Component where open channel conversations happen
+* OpenChannelSettings - A component to handle the settings of a given channel
+And many more...
+
+* App - is a full fledged app(group channel) component made by combining the above components so that you dont have to combine all the above components by hand. Also it can be used as an example for composing components to build a chat UI
+
+> Note 1: Dont forget to import the stylesheet from the repo too
+> Note 2: Name of some components are different from the directories they are in(example -> Channel component is from Conversation component). Please keep that in mind
+
+### Prerequisites
+
+You need to install:
+* nodejs 14 LTS https://nodejs.org/en/download/
+* npm 7 or above
+
+```
+npm 14 deprecated warnings for fsevents& chokidar@2.1.8 will be fixed when storybook is updated to webpack 5
+https://github.com/storybookjs/storybook/issues/12425#issuecomment-723043137
+```
+
+We tried development on Mac OS / Linux systems. You might encounter problems in running `npm run build` in Windows machines
+
+### Development
+
+We use storybook for development and rollup for building the npm distribution(bundled JS file)
+Make sure you have nodejs and npm installed and run
+
+```
+Make a copy of env.example and save it as .env
+Set your appId STORYBOOK_APP_ID
+npm install
+npm run storybook
+```
+> `npm run generate-component` generates a UI component skeleton in `src/ui`
+
+* By default, storybook opens in http://localhost:6006/
+* Smart Components such as ChannelList, Channel, ChannelSetting, App can be found under `OTHERS`
+* Dumb components such as inputs, buttons etc can be found under `OTHERS/UI Components` in storybook sidebar
+* Overridden storybook configs can be found in: `./storybook`
+
+### Build
+
+We use rollupJS for building the production bundle script that you want to use inside your applications.
+
+We have both esm and commonjs output
+
+```
+npm run build
+```
+
+The bundled JS code can be found in `./release`
+The CSS is in `./release/dist/index.css`
+
+## Running the tests
+
+We have implemented tests for dumb ui components only. Technologies used: Jest, Enzyme and react-dom/test-utils
+
+```
+npm run test
+```
+
+### Lint
+
+```
+npm run lint
+```
+* .eslintrc.json lints ts files and .eslintrc.js lints js files
+
+
+### Typescript
+
+* We are trying to progressively move our source code to typescript - which means older JS code and newly written TS code will coxist while we migrate older JS code to TS
+* .eslintrc.json lints ts files and .eslintrc.js lints js files
+* Type definition file can be `src/index.d.ts` which will be copied to `/release` directory
+
+### Creating/exporting new components
+
+1. Define your component inside './src'
+2. Add the following line to './src/index.js'
+  `export NewComponent from './src/location/of/NewComponent';`
+3. Add the following line to './exports.js'
+  `NewComponent: 'src/location/of/NewComponent',`

package/dist/App.js

@@ -0,0 +1,294 @@
+import { a as _slicedToArray } from './_rollupPluginBabelHelpers-20904f21.js';
+import React__default, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Sendbird from './SendbirdProvider.js';
+import ChannelList from './ChannelList.js';
+import Channel from './Channel.js';
+import ChannelSettings from './ChannelSettings.js';
+import MessageSearchPannel from './MessageSearch.js';
+import './withSendBird.js';
+import 'sendbird';
+import './actionTypes-1e3a4074.js';
+import './index-8c72a94a.js';
+import './tslib.es6-e3c44017.js';
+import 'css-vars-ponyfill';
+import './uuid-b0c93400.js';
+import './LocalizationContext-e4391013.js';
+import './stringSet-4f6eaa60.js';
+import './index-6ebf7894.js';
+import './ChannelListProvider-0b0c2c40.js';
+import './topics-9442035c.js';
+import './utils-c393e880.js';
+import './UserProfileContext-865db5e6.js';
+import './useSendbirdStateContext.js';
+import './ChannelList/components/ChannelListUI.js';
+import './ChannelList/components/ChannelListHeader.js';
+import './index-7a51bd16.js';
+import './ui/IconButton.js';
+import './ui/Avatar.js';
+import './ui/ImageRenderer.js';
+import './ui/Icon.js';
+import './ChannelList/components/AddChannel.js';
+import './CreateChannel.js';
+import './CreateChannel/components/CreateChannelUI.js';
+import './CreateChannelProvider-c617a1bb.js';
+import './sendBirdSelectors.js';
+import './CreateChannel/components/InviteMembers.js';
+import './ui/Modal.js';
+import 'react-dom';
+import './index-942c85a6.js';
+import './index-acebc2ff.js';
+import './ui/UserListItem.js';
+import './ui/MutedAvatarOverlay.js';
+import './ui/Checkbox.js';
+import './ui/UserProfile.js';
+import './ui/ContextMenu.js';
+import './ui/SortByRow.js';
+import './CreateChannel/components/SelectChannelType.js';
+import './ChannelList/components/ChannelPreview.js';
+import './ui/ChannelAvatar.js';
+import './utils-08c4dbdc.js';
+import './ui/Badge.js';
+import './index-1718324d.js';
+import './index-cd21929d.js';
+import './index-770d7112.js';
+import './ChannelList/components/ChannelPreviewAction.js';
+import './EditUserProfile.js';
+import './index-5c2c81bc.js';
+import './ui/Input.js';
+import './ui/TextButton.js';
+import './color-ee3fc5ee.js';
+import './index-e818a8a3.js';
+import './ui/Loader.js';
+import './ChannelProvider-459e463f.js';
+import './compareIds-808956f2.js';
+import './ui/ReactionButton.js';
+import './Channel/components/ChannelUI.js';
+import './ui/ConnectionStatus.js';
+import './Channel/components/ChannelHeader.js';
+import './Channel/components/MessageList.js';
+import './Channel/components/Message.js';
+import './ui/DateSeparator.js';
+import './ui/MessageInput.js';
+import './ui/MessageContent.js';
+import './ui/MessageItemMenu.js';
+import './ui/MessageItemReactionMenu.js';
+import './ui/EmojiReactions.js';
+import './ui/Tooltip.js';
+import './ui/TooltipWrapper.js';
+import './ui/ReactionBadge.js';
+import './ui/AdminMessage.js';
+import './ui/TextMessageItemBody.js';
+import './ui/FileMessageItemBody.js';
+import './ui/ThumbnailMessageItemBody.js';
+import './ui/OGMessageItemBody.js';
+import './ui/LinkLabel.js';
+import './ui/UnknownMessageItemBody.js';
+import './ui/QuoteMessage.js';
+import './Channel/components/FileViewer.js';
+import './Channel/components/RemoveMessageModal.js';
+import './Channel/components/TypingIndicator.js';
+import './Channel/components/FrozenNotification.js';
+import './Channel/components/UnreadCount.js';
+import './Channel/components/MessageInput.js';
+import './ui/QuoteMessageInput.js';
+import './ChannelSettings/components/ChannelSettingsUI.js';
+import './ChannelSettings/context.js';
+import './ChannelSettings/components/ChannelProfile.js';
+import './ChannelSettings/components/EditDetailsModal.js';
+import './ChannelSettings/components/AdminPanel.js';
+import './ui/Accordion.js';
+import './ui/AccordionGroup.js';
+import './context-98ce535c.js';
+import './ChannelSettings/components/UserListItem.js';
+import './MemberList-6655cba0.js';
+import './ChannelSettings/components/LeaveChannel.js';
+import './ChannelSettings/components/UserPanel.js';
+import './MessageSearch/components/MessageSearchUI.js';
+import './MessageSearch/context.js';
+import './ui/MessageSearchItem.js';
+import './ui/MessageSearchFileItem.js';
+
+function App(props) {
+  var appId = props.appId,
+      userId = props.userId,
+      accessToken = props.accessToken,
+      theme = props.theme,
+      userListQuery = props.userListQuery,
+      nickname = props.nickname,
+      profileUrl = props.profileUrl,
+      dateLocale = props.dateLocale,
+      _props$config = props.config,
+      config = _props$config === void 0 ? {} : _props$config,
+      useReaction = props.useReaction,
+      replyType = props.replyType,
+      useMessageGrouping = props.useMessageGrouping,
+      colorSet = props.colorSet,
+      stringSet = props.stringSet,
+      allowProfileEdit = props.allowProfileEdit,
+      disableUserProfile = props.disableUserProfile,
+      renderUserProfile = props.renderUserProfile,
+      showSearchIcon = props.showSearchIcon,
+      onProfileEditSuccess = props.onProfileEditSuccess,
+      imageCompression = props.imageCompression,
+      disableAutoSelect = props.disableAutoSelect;
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentChannelUrl = _useState2[0],
+      setCurrentChannelUrl = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      showSettings = _useState4[0],
+      setShowSettings = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      showSearch = _useState6[0],
+      setShowSearch = _useState6[1];
+
+  var _useState7 = useState(null),
+      _useState8 = _slicedToArray(_useState7, 2),
+      highlightedMessage = _useState8[0],
+      setHighlightedMessage = _useState8[1];
+
+  var _useState9 = useState(null),
+      _useState10 = _slicedToArray(_useState9, 2),
+      startingPoint = _useState10[0],
+      setStartingPoint = _useState10[1];
+
+  return /*#__PURE__*/React__default.createElement(Sendbird, {
+    stringSet: stringSet,
+    appId: appId,
+    userId: userId,
+    accessToken: accessToken,
+    theme: theme,
+    nickname: nickname,
+    profileUrl: profileUrl,
+    dateLocale: dateLocale,
+    userListQuery: userListQuery,
+    config: config,
+    colorSet: colorSet,
+    disableUserProfile: disableUserProfile,
+    renderUserProfile: renderUserProfile,
+    imageCompression: imageCompression,
+    useReaction: useReaction
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-app__wrap"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-app__channellist-wrap"
+  }, /*#__PURE__*/React__default.createElement(ChannelList, {
+    allowProfileEdit: allowProfileEdit,
+    onProfileEditSuccess: onProfileEditSuccess,
+    disableAutoSelect: disableAutoSelect,
+    onChannelSelect: function onChannelSelect(channel) {
+      setStartingPoint(null);
+      setHighlightedMessage(null);
+
+      if (channel && channel.url) {
+        setCurrentChannelUrl(channel.url);
+      } else {
+        setCurrentChannelUrl('');
+      }
+    }
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "\n            ".concat(showSettings ? 'sendbird-app__conversation--settings-open' : '', "\n            ").concat(showSearch ? 'sendbird-app__conversation--search-open' : '', "\n            sendbird-app__conversation-wrap\n          ")
+  }, /*#__PURE__*/React__default.createElement(Channel, {
+    channelUrl: currentChannelUrl,
+    onChatHeaderActionClick: function onChatHeaderActionClick() {
+      setShowSearch(false);
+      setShowSettings(!showSettings);
+    },
+    onSearchClick: function onSearchClick() {
+      setShowSettings(false);
+      setShowSearch(!showSearch);
+    },
+    showSearchIcon: showSearchIcon,
+    startingPoint: startingPoint,
+    highlightedMessage: highlightedMessage,
+    useReaction: useReaction,
+    replyType: replyType,
+    useMessageGrouping: useMessageGrouping
+  })), showSettings && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-app__settingspanel-wrap"
+  }, /*#__PURE__*/React__default.createElement(ChannelSettings, {
+    className: "sendbird-channel-settings",
+    channelUrl: currentChannelUrl,
+    onCloseClick: function onCloseClick() {
+      setShowSettings(false);
+    }
+  })), showSearch && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-app__searchpanel-wrap"
+  }, /*#__PURE__*/React__default.createElement(MessageSearchPannel, {
+    channelUrl: currentChannelUrl,
+    onResultClick: function onResultClick(message) {
+      if (message.messageId === highlightedMessage) {
+        setHighlightedMessage(null);
+        setTimeout(function () {
+          setHighlightedMessage(message.messageId);
+        });
+      } else {
+        setStartingPoint(message.createdAt);
+        setHighlightedMessage(message.messageId);
+      }
+    },
+    onCloseClick: function onCloseClick() {
+      setShowSearch(false);
+    }
+  }))));
+}
+App.propTypes = {
+  appId: PropTypes.string.isRequired,
+  userId: PropTypes.string.isRequired,
+  accessToken: PropTypes.string,
+  theme: PropTypes.string,
+  userListQuery: PropTypes.func,
+  nickname: PropTypes.string,
+  profileUrl: PropTypes.string,
+  allowProfileEdit: PropTypes.bool,
+  disableUserProfile: PropTypes.bool,
+  renderUserProfile: PropTypes.func,
+  onProfileEditSuccess: PropTypes.func,
+  dateLocale: PropTypes.shape({}),
+  config: PropTypes.shape({
+    // None Error Warning Info 'All/Debug'
+    logLevel: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)])
+  }),
+  useReaction: PropTypes.bool,
+  replyType: PropTypes.oneOf(['NONE', 'QUOTE_REPLY', 'THREAD']),
+  showSearchIcon: PropTypes.bool,
+  useMessageGrouping: PropTypes.bool,
+  stringSet: PropTypes.objectOf(PropTypes.string),
+  colorSet: PropTypes.objectOf(PropTypes.string),
+  imageCompression: PropTypes.shape({
+    compressionRate: PropTypes.number,
+    resizingWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    resizingHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  }),
+  disableAutoSelect: PropTypes.bool
+};
+App.defaultProps = {
+  accessToken: '',
+  theme: 'light',
+  nickname: '',
+  profileUrl: '',
+  userListQuery: null,
+  dateLocale: null,
+  allowProfileEdit: false,
+  onProfileEditSuccess: null,
+  disableUserProfile: false,
+  showSearchIcon: false,
+  renderUserProfile: null,
+  config: {},
+  useReaction: true,
+  replyType: 'NONE',
+  useMessageGrouping: true,
+  stringSet: null,
+  colorSet: null,
+  imageCompression: {},
+  disableAutoSelect: false
+};
+
+export { App as default };
+//# sourceMappingURL=App.js.map

package/dist/App.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"App.js","sources":["../src/smart-components/App/index.jsx"],"sourcesContent":["/**\n * This is a drop in Chat solution\n * Can also be used as an example for creating\n * default chat apps\n */\nimport React, { useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport Sendbird from '../../lib/Sendbird';\n\nimport ChannelList from '../ChannelList';\nimport Channel from '../Channel';\nimport ChannelSettings from '../ChannelSettings';\nimport MessageSearchPannel from '../MessageSearch';\n\nimport './index.scss';\n\nexport default function App(props) {\n  const {\n    appId,\n    userId,\n    accessToken,\n    theme,\n    userListQuery,\n    nickname,\n    profileUrl,\n    dateLocale,\n    config = {},\n    useReaction,\n    replyType,\n    useMessageGrouping,\n    colorSet,\n    stringSet,\n    allowProfileEdit,\n    disableUserProfile,\n    renderUserProfile,\n    showSearchIcon,\n    onProfileEditSuccess,\n    imageCompression,\n    disableAutoSelect,\n  } = props;\n  const [currentChannelUrl, setCurrentChannelUrl] = useState(null);\n  const [showSettings, setShowSettings] = useState(false);\n  const [showSearch, setShowSearch] = useState(false);\n  const [highlightedMessage, setHighlightedMessage] = useState(null);\n  const [startingPoint, setStartingPoint] = useState(null);\n\n  return (\n    <Sendbird\n      stringSet={stringSet}\n      appId={appId}\n      userId={userId}\n      accessToken={accessToken}\n      theme={theme}\n      nickname={nickname}\n      profileUrl={profileUrl}\n      dateLocale={dateLocale}\n      userListQuery={userListQuery}\n      config={config}\n      colorSet={colorSet}\n      disableUserProfile={disableUserProfile}\n      renderUserProfile={renderUserProfile}\n      imageCompression={imageCompression}\n      useReaction={useReaction}\n    >\n      <div className=\"sendbird-app__wrap\">\n        <div className=\"sendbird-app__channellist-wrap\">\n          <ChannelList\n            allowProfileEdit={allowProfileEdit}\n            onProfileEditSuccess={onProfileEditSuccess}\n            disableAutoSelect={disableAutoSelect}\n            onChannelSelect={(channel) => {\n              setStartingPoint(null);\n              setHighlightedMessage(null);\n              if (channel && channel.url) {\n                setCurrentChannelUrl(channel.url);\n              } else {\n                setCurrentChannelUrl('');\n              }\n            }}\n          />\n        </div>\n        <div\n          className={`\n            ${showSettings ? 'sendbird-app__conversation--settings-open' : ''}\n            ${showSearch ? 'sendbird-app__conversation--search-open' : ''}\n            sendbird-app__conversation-wrap\n          `}\n        >\n          <Channel\n            channelUrl={currentChannelUrl}\n            onChatHeaderActionClick={() => {\n              setShowSearch(false);\n              setShowSettings(!showSettings);\n            }}\n            onSearchClick={() => {\n              setShowSettings(false);\n              setShowSearch(!showSearch);\n            }}\n            showSearchIcon={showSearchIcon}\n            startingPoint={startingPoint}\n            highlightedMessage={highlightedMessage}\n            useReaction={useReaction}\n            replyType={replyType}\n            useMessageGrouping={useMessageGrouping}\n          />\n        </div>\n        {showSettings && (\n          <div className=\"sendbird-app__settingspanel-wrap\">\n            <ChannelSettings\n              className=\"sendbird-channel-settings\"\n              channelUrl={currentChannelUrl}\n              onCloseClick={() => {\n                setShowSettings(false);\n              }}\n            />\n          </div>\n        )}\n        {showSearch && (\n          <div className=\"sendbird-app__searchpanel-wrap\">\n            <MessageSearchPannel\n              channelUrl={currentChannelUrl}\n              onResultClick={(message) => {\n                if (message.messageId === highlightedMessage) {\n                  setHighlightedMessage(null);\n                  setTimeout(() => {\n                    setHighlightedMessage(message.messageId);\n                  });\n                } else {\n                  setStartingPoint(message.createdAt);\n                  setHighlightedMessage(message.messageId);\n                }\n              }}\n              onCloseClick={() => {\n                setShowSearch(false);\n              }}\n            />\n          </div>\n        )}\n      </div>\n    </Sendbird>\n  );\n}\n\nApp.propTypes = {\n  appId: PropTypes.string.isRequired,\n  userId: PropTypes.string.isRequired,\n  accessToken: PropTypes.string,\n  theme: PropTypes.string,\n  userListQuery: PropTypes.func,\n  nickname: PropTypes.string,\n  profileUrl: PropTypes.string,\n  allowProfileEdit: PropTypes.bool,\n  disableUserProfile: PropTypes.bool,\n  renderUserProfile: PropTypes.func,\n  onProfileEditSuccess: PropTypes.func,\n  dateLocale: PropTypes.shape({}),\n  config: PropTypes.shape({\n    // None Error Warning Info 'All/Debug'\n    logLevel: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.arrayOf(PropTypes.string),\n    ]),\n  }),\n  useReaction: PropTypes.bool,\n  replyType: PropTypes.oneOf(['NONE', 'QUOTE_REPLY', 'THREAD']),\n  showSearchIcon: PropTypes.bool,\n  useMessageGrouping: PropTypes.bool,\n  stringSet: PropTypes.objectOf(PropTypes.string),\n  colorSet: PropTypes.objectOf(PropTypes.string),\n  imageCompression: PropTypes.shape({\n    compressionRate: PropTypes.number,\n    resizingWidth: PropTypes.oneOfType([\n      PropTypes.number,\n      PropTypes.string,\n    ]),\n    resizingHeight: PropTypes.oneOfType([\n      PropTypes.number,\n      PropTypes.string,\n    ]),\n  }),\n  disableAutoSelect: PropTypes.bool,\n};\n\nApp.defaultProps = {\n  accessToken: '',\n  theme: 'light',\n  nickname: '',\n  profileUrl: '',\n  userListQuery: null,\n  dateLocale: null,\n  allowProfileEdit: false,\n  onProfileEditSuccess: null,\n  disableUserProfile: false,\n  showSearchIcon: false,\n  renderUserProfile: null,\n  config: {},\n  useReaction: true,\n  replyType: 'NONE',\n  useMessageGrouping: true,\n  stringSet: null,\n  colorSet: null,\n  imageCompression: {},\n  disableAutoSelect: false,\n};\n"],"names":["App","props","appId","userId","accessToken","theme","userListQuery","nickname","profileUrl","dateLocale","config","useReaction","replyType","useMessageGrouping","colorSet","stringSet","allowProfileEdit","disableUserProfile","renderUserProfile","showSearchIcon","onProfileEditSuccess","imageCompression","disableAutoSelect","useState","currentChannelUrl","setCurrentChannelUrl","showSettings","setShowSettings","showSearch","setShowSearch","highlightedMessage","setHighlightedMessage","startingPoint","setStartingPoint","React","channel","url","message","messageId","setTimeout","createdAt","propTypes","PropTypes","string","isRequired","func","bool","shape","logLevel","oneOfType","arrayOf","oneOf","objectOf","compressionRate","number","resizingWidth","resizingHeight","defaultProps"],"mappings":"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"}

package/dist/Channel/components/ChannelHeader.js

@@ -0,0 +1,116 @@
+import React__default, { useContext } from 'react';
+import { c as LabelStringSet, L as Label, a as LabelTypography, b as LabelColors } from '../../index-7a51bd16.js';
+import Icon, { IconTypes, IconColors } from '../../ui/Icon.js';
+import IconButton from '../../ui/IconButton.js';
+import ChannelAvatar from '../../ui/ChannelAvatar.js';
+import { a as LocalizationContext } from '../../LocalizationContext-e4391013.js';
+import useSendbirdStateContext from '../../useSendbirdStateContext.js';
+import { u as useChannel } from '../../ChannelProvider-459e463f.js';
+import '../../_rollupPluginBabelHelpers-20904f21.js';
+import 'prop-types';
+import '../../stringSet-4f6eaa60.js';
+import '../../ui/Avatar.js';
+import '../../tslib.es6-e3c44017.js';
+import '../../ui/ImageRenderer.js';
+import '../../uuid-b0c93400.js';
+import '../../utils-08c4dbdc.js';
+import '../../index-6ebf7894.js';
+import '../../withSendBird.js';
+import '../../UserProfileContext-865db5e6.js';
+import '../../index-770d7112.js';
+import '../../topics-9442035c.js';
+import '../../index-8c72a94a.js';
+import '../../compareIds-808956f2.js';
+import '../../ui/ContextMenu.js';
+import 'react-dom';
+import '../../ui/SortByRow.js';
+import '../../ui/ReactionButton.js';
+
+var getChannelTitle = function getChannelTitle(channel, currentUserId, stringSet) {
+  var LABEL_STRING_SET = stringSet || LabelStringSet;
+
+  if (!channel || !channel.name && !channel.members) {
+    return LABEL_STRING_SET.NO_TITLE;
+  }
+
+  if (channel.name && channel.name !== 'Group Channel') {
+    return channel.name;
+  }
+
+  if (channel.members.length === 1) {
+    return LABEL_STRING_SET.NO_MEMBERS;
+  }
+
+  return channel.members.filter(function (_a) {
+    var userId = _a.userId;
+    return userId !== currentUserId;
+  }).map(function (_a) {
+    var nickname = _a.nickname;
+    return nickname || LABEL_STRING_SET.NO_NAME;
+  }).join(', ');
+};
+
+var ChatHeader = function ChatHeader() {
+  var _a, _b, _c;
+
+  var globalStore = useSendbirdStateContext();
+  var userId = (_a = globalStore === null || globalStore === void 0 ? void 0 : globalStore.config) === null || _a === void 0 ? void 0 : _a.userId;
+  var theme = (_b = globalStore === null || globalStore === void 0 ? void 0 : globalStore.config) === null || _b === void 0 ? void 0 : _b.theme;
+  var channelStore = useChannel();
+  var currentGroupChannel = channelStore.currentGroupChannel,
+      showSearchIcon = channelStore.showSearchIcon,
+      onSearchClick = channelStore.onSearchClick,
+      onChatHeaderActionClick = channelStore.onChatHeaderActionClick;
+  var subTitle = (currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.members) && ((_c = currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.members) === null || _c === void 0 ? void 0 : _c.length) !== 2;
+  var isMuted = (currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.myMutedState) === "muted";
+  var stringSet = useContext(LocalizationContext).stringSet;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-chat-header"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-chat-header__left"
+  }, /*#__PURE__*/React__default.createElement(ChannelAvatar, {
+    theme: theme,
+    channel: currentGroupChannel,
+    userId: userId,
+    height: 32,
+    width: 32
+  }), /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-chat-header__left__title",
+    type: LabelTypography.H_2,
+    color: LabelColors.ONBACKGROUND_1
+  }, getChannelTitle(currentGroupChannel, userId, stringSet)), /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-chat-header__left__subtitle",
+    type: LabelTypography.BODY_1,
+    color: LabelColors.ONBACKGROUND_2
+  }, subTitle)), /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-chat-header__right"
+  }, (typeof isMuted === 'string' && isMuted === 'true' || typeof isMuted === 'boolean' && isMuted) && /*#__PURE__*/React__default.createElement(Icon, {
+    className: "sendbird-chat-header__right__mute",
+    type: IconTypes.NOTIFICATIONS_OFF_FILLED,
+    width: "24px",
+    height: "24px"
+  }), showSearchIcon && /*#__PURE__*/React__default.createElement(IconButton, {
+    className: "sendbird-chat-header__right__search",
+    width: "32px",
+    height: "32px",
+    onClick: onSearchClick
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: IconTypes.SEARCH,
+    fillColor: IconColors.PRIMARY,
+    width: "24px",
+    height: "24px"
+  })), /*#__PURE__*/React__default.createElement(IconButton, {
+    className: "sendbird-chat-header__right__info",
+    width: "32px",
+    height: "32px",
+    onClick: onChatHeaderActionClick
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: IconTypes.INFO,
+    fillColor: IconColors.PRIMARY,
+    width: "24px",
+    height: "24px"
+  }))));
+};
+
+export { ChatHeader as default };
+//# sourceMappingURL=ChannelHeader.js.map

package/dist/Channel/components/ChannelHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelHeader.js","sources":["../../../src/smart-components/Channel/components/ChannelHeader/utils.ts","../../../src/smart-components/Channel/components/ChannelHeader/index.tsx"],"sourcesContent":["import SendBird from 'sendbird';\nimport { LabelStringSet } from '../../../../ui/Label';\n\nexport const getChannelTitle = (\n  channel: SendBird.GroupChannel,\n  currentUserId: string,\n  stringSet: { [label: string]: string }\n  ): string => {\n  const LABEL_STRING_SET: { [label: string]: string } = stringSet || LabelStringSet;\n  if (!channel || (!channel.name && !channel.members)) {\n    return LABEL_STRING_SET.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 LABEL_STRING_SET.NO_MEMBERS;\n  }\n\n  return channel.members\n    .filter(({ userId }) => userId !== currentUserId)\n    .map(({ nickname }) => (nickname || LABEL_STRING_SET.NO_NAME))\n    .join(', ');\n};\n","import './channel-header.scss';\nimport React, { useContext } from 'react';\n\nimport * as utils from './utils';\n\nimport Label, { LabelTypography, LabelColors } from '../../../../ui/Label';\nimport Icon, { IconTypes, IconColors } from '../../../../ui/Icon';\nimport IconButton from '../../../../ui/IconButton';\nimport ChannelAvatar from '../../../../ui/ChannelAvatar/index';\nimport { LocalizationContext } from '../../../../lib/LocalizationContext';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\nimport { useChannel } from '../../context/ChannelProvider';\n\nconst ChatHeader: React.FC = () => {\n  const globalStore = useSendbirdStateContext();\n  const userId = globalStore?.config?.userId;\n  const theme = globalStore?.config?.theme;\n\n  const channelStore = useChannel();\n  const {\n    currentGroupChannel,\n    showSearchIcon,\n    onSearchClick,\n    onChatHeaderActionClick,\n  } = channelStore;\n  const subTitle = (currentGroupChannel?.members\n    && currentGroupChannel?.members?.length !== 2);\n  const isMuted = currentGroupChannel?.myMutedState === \"muted\";\n\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          {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={onChatHeaderActionClick}\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\nexport default ChatHeader;\n"],"names":["getChannelTitle","channel","currentUserId","stringSet","LABEL_STRING_SET","LabelStringSet","name","members","NO_TITLE","length","NO_MEMBERS","filter","_a","userId","map","nickname","NO_NAME","join","ChatHeader","globalStore","useSendbirdStateContext","config","theme","channelStore","useChannel","currentGroupChannel","showSearchIcon","onSearchClick","onChatHeaderActionClick","subTitle","isMuted","myMutedState","useContext","LocalizationContext","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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"}