@sendbird/uikit-react 3.0.0-alpha.1 → 3.0.0-alpha.2

package/cjs/index-1468d245.js

@@ -0,0 +1,142 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-fc14118c.js');
+var React = require('react');
+var PropTypes = require('prop-types');
+var stringSet = require('./stringSet-aa544ce5.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 Typography = {
+  H_1: 'H_1',
+  H_2: 'H_2',
+  SUBTITLE_1: 'SUBTITLE_1',
+  SUBTITLE_2: 'SUBTITLE_2',
+  BODY_1: 'BODY_1',
+  BODY_2: 'BODY_2',
+  BUTTON_1: 'BUTTON_1',
+  BUTTON_2: 'BUTTON_2',
+  CAPTION_1: 'CAPTION_1',
+  CAPTION_2: 'CAPTION_2',
+  CAPTION_3: 'CAPTION_3'
+};
+var Colors = {
+  ONBACKGROUND_1: 'ONBACKGROUND_1',
+  ONBACKGROUND_2: 'ONBACKGROUND_2',
+  ONBACKGROUND_3: 'ONBACKGROUND_3',
+  ONBACKGROUND_4: 'ONBACKGROUND_4',
+  ONCONTENT_1: 'ONCONTENT_1',
+  ONCONTENT_2: 'ONCONTENT_2',
+  PRIMARY: 'PRIMARY',
+  ERROR: 'ERROR',
+  SECONDARY_3: 'SECONDARY_3'
+};
+
+function changeTypographyToClassName(type) {
+  switch (type) {
+    case Typography.H_1:
+      return 'sendbird-label--h-1';
+
+    case Typography.H_2:
+      return 'sendbird-label--h-2';
+
+    case Typography.SUBTITLE_1:
+      return 'sendbird-label--subtitle-1';
+
+    case Typography.SUBTITLE_2:
+      return 'sendbird-label--subtitle-2';
+
+    case Typography.BODY_1:
+      return 'sendbird-label--body-1';
+
+    case Typography.BODY_2:
+      return 'sendbird-label--body-2';
+
+    case Typography.BUTTON_1:
+      return 'sendbird-label--button-1';
+
+    case Typography.BUTTON_2:
+      return 'sendbird-label--button-2';
+
+    case Typography.CAPTION_1:
+      return 'sendbird-label--caption-1';
+
+    case Typography.CAPTION_2:
+      return 'sendbird-label--caption-2';
+
+    case Typography.CAPTION_3:
+      return 'sendbird-label--caption-3';
+
+    default:
+      return null;
+  }
+}
+function changeColorToClassName(color) {
+  switch (color) {
+    case Colors.ONBACKGROUND_1:
+      return 'sendbird-label--color-onbackground-1';
+
+    case Colors.ONBACKGROUND_2:
+      return 'sendbird-label--color-onbackground-2';
+
+    case Colors.ONBACKGROUND_3:
+      return 'sendbird-label--color-onbackground-3';
+
+    case Colors.ONBACKGROUND_4:
+      return 'sendbird-label--color-onbackground-4';
+
+    case Colors.ONCONTENT_1:
+      return 'sendbird-label--color-oncontent-1';
+
+    case Colors.ONCONTENT_2:
+      return 'sendbird-label--color-oncontent-2';
+
+    case Colors.PRIMARY:
+      return 'sendbird-label--color-primary';
+    // should be Primary-3 fix me
+
+    case Colors.ERROR:
+      return 'sendbird-label--color-error';
+
+    case Colors.SECONDARY_3:
+      return 'sendbird-label--color-secondary-3';
+
+    default:
+      return null;
+  }
+}
+
+function Label(_ref) {
+  var className = _ref.className,
+      type = _ref.type,
+      color = _ref.color,
+      children = _ref.children;
+  return /*#__PURE__*/React__default["default"].createElement("span", {
+    className: [].concat(_rollupPluginBabelHelpers._toConsumableArray(Array.isArray(className) ? className : [className]), ['sendbird-label', type ? changeTypographyToClassName(type) : '', color ? changeColorToClassName(color) : '']).join(' ')
+  }, children);
+}
+Label.propTypes = {
+  className: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)]),
+  type: PropTypes__default["default"].oneOf([].concat(_rollupPluginBabelHelpers._toConsumableArray(Object.keys(Typography)), [''])),
+  color: PropTypes__default["default"].oneOf([].concat(_rollupPluginBabelHelpers._toConsumableArray(Object.keys(Colors)), [''])),
+  children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number, PropTypes__default["default"].element, PropTypes__default["default"].any])
+};
+Label.defaultProps = {
+  className: [],
+  type: '',
+  color: '',
+  children: null
+};
+var LabelTypography = Typography;
+var LabelColors = Colors;
+var LabelStringSet = stringSet.getStringSet('en');
+
+exports.Label = Label;
+exports.LabelColors = LabelColors;
+exports.LabelStringSet = LabelStringSet;
+exports.LabelTypography = LabelTypography;
+exports.changeColorToClassName = changeColorToClassName;
+//# sourceMappingURL=index-1468d245.js.map

package/cjs/index-1468d245.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-1468d245.js","sources":["../../src/ui/Label/types.js","../../src/ui/Label/utils.js","../../src/ui/Label/index.jsx"],"sourcesContent":["export const Typography = {\n  H_1: 'H_1',\n  H_2: 'H_2',\n  SUBTITLE_1: 'SUBTITLE_1',\n  SUBTITLE_2: 'SUBTITLE_2',\n  BODY_1: 'BODY_1',\n  BODY_2: 'BODY_2',\n  BUTTON_1: 'BUTTON_1',\n  BUTTON_2: 'BUTTON_2',\n  CAPTION_1: 'CAPTION_1',\n  CAPTION_2: 'CAPTION_2',\n  CAPTION_3: 'CAPTION_3',\n};\n\nexport const Colors = {\n  ONBACKGROUND_1: 'ONBACKGROUND_1',\n  ONBACKGROUND_2: 'ONBACKGROUND_2',\n  ONBACKGROUND_3: 'ONBACKGROUND_3',\n  ONBACKGROUND_4: 'ONBACKGROUND_4',\n  ONCONTENT_1: 'ONCONTENT_1',\n  ONCONTENT_2: 'ONCONTENT_2',\n  PRIMARY: 'PRIMARY',\n  ERROR: 'ERROR',\n  SECONDARY_3: 'SECONDARY_3',\n};\n","import { Typography, Colors } from './types';\n\nexport function changeTypographyToClassName(type) {\n  switch (type) {\n    case Typography.H_1: return 'sendbird-label--h-1';\n    case Typography.H_2: return 'sendbird-label--h-2';\n    case Typography.SUBTITLE_1: return 'sendbird-label--subtitle-1';\n    case Typography.SUBTITLE_2: return 'sendbird-label--subtitle-2';\n    case Typography.BODY_1: return 'sendbird-label--body-1';\n    case Typography.BODY_2: return 'sendbird-label--body-2';\n    case Typography.BUTTON_1: return 'sendbird-label--button-1';\n    case Typography.BUTTON_2: return 'sendbird-label--button-2';\n    case Typography.CAPTION_1: return 'sendbird-label--caption-1';\n    case Typography.CAPTION_2: return 'sendbird-label--caption-2';\n    case Typography.CAPTION_3: return 'sendbird-label--caption-3';\n    default: return null;\n  }\n}\n\nexport function changeColorToClassName(color) {\n  switch (color) {\n    case Colors.ONBACKGROUND_1: return 'sendbird-label--color-onbackground-1';\n    case Colors.ONBACKGROUND_2: return 'sendbird-label--color-onbackground-2';\n    case Colors.ONBACKGROUND_3: return 'sendbird-label--color-onbackground-3';\n    case Colors.ONBACKGROUND_4: return 'sendbird-label--color-onbackground-4';\n    case Colors.ONCONTENT_1: return 'sendbird-label--color-oncontent-1';\n    case Colors.ONCONTENT_2: return 'sendbird-label--color-oncontent-2';\n    case Colors.PRIMARY: return 'sendbird-label--color-primary'; // should be Primary-3 fix me\n    case Colors.ERROR: return 'sendbird-label--color-error';\n    case Colors.SECONDARY_3: return 'sendbird-label--color-secondary-3';\n    default: return null;\n  }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport './index.scss';\nimport { Typography, Colors } from './types';\nimport { changeTypographyToClassName, changeColorToClassName } from './utils';\nimport getStringSet from './stringSet';\n\nexport default function Label({\n  className,\n  type,\n  color,\n  children,\n}) {\n  return (\n    <span\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-label',\n        type ? changeTypographyToClassName(type) : '',\n        color ? changeColorToClassName(color) : '',\n      ].join(' ')}\n    >\n      {children}\n    </span>\n  );\n}\n\nLabel.propTypes = {\n  className: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.arrayOf(PropTypes.string),\n  ]),\n  type: PropTypes.oneOf([...Object.keys(Typography), '']),\n  color: PropTypes.oneOf([...Object.keys(Colors), '']),\n  children: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n    PropTypes.element,\n    PropTypes.any,\n  ]),\n};\n\nLabel.defaultProps = {\n  className: [],\n  type: '',\n  color: '',\n  children: null,\n};\n\nconst LabelTypography = Typography;\nconst LabelColors = Colors;\nconst LabelStringSet = getStringSet('en');\nexport { LabelTypography, LabelColors, LabelStringSet };\n"],"names":["Typography","H_1","H_2","SUBTITLE_1","SUBTITLE_2","BODY_1","BODY_2","BUTTON_1","BUTTON_2","CAPTION_1","CAPTION_2","CAPTION_3","Colors","ONBACKGROUND_1","ONBACKGROUND_2","ONBACKGROUND_3","ONBACKGROUND_4","ONCONTENT_1","ONCONTENT_2","PRIMARY","ERROR","SECONDARY_3","changeTypographyToClassName","type","changeColorToClassName","color","Label","className","children","React","Array","isArray","join","propTypes","PropTypes","oneOfType","string","arrayOf","oneOf","Object","keys","number","element","any","defaultProps","LabelTypography","LabelColors","LabelStringSet","getStringSet"],"mappings":"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"}

package/cjs/index-4987c8b2.js

@@ -0,0 +1,175 @@
+'use strict';
+
+var React = require('react');
+var ui_Modal = require('./ui/Modal.js');
+var LocalizationContext = require('./LocalizationContext-68e55e2a.js');
+var useSendbirdStateContext = require('./useSendbirdStateContext.js');
+var ui_Input = require('./ui/Input.js');
+var ui_Avatar = require('./ui/Avatar.js');
+var ui_Icon = require('./ui/Icon.js');
+var ui_Button = require('./index-1044f1ed.js');
+var ui_Label = require('./index-1468d245.js');
+var ui_TextButton = require('./ui/TextButton.js');
+var utils = require('./utils-3b0815dc.js');
+var actionTypes = require('./actionTypes-bc47f97a.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var EditUserProfileProviderContext = /*#__PURE__*/React__default["default"].createContext(undefined);
+
+var EditUserProfileProvider = function EditUserProfileProvider(props) {
+  var children = props.children,
+      onEditProfile = props.onEditProfile,
+      onCancel = props.onCancel,
+      onThemeChange = props.onThemeChange;
+  var value = React.useMemo(function () {
+    return {
+      onEditProfile: onEditProfile,
+      onCancel: onCancel,
+      onThemeChange: onThemeChange
+    };
+  }, []);
+  return /*#__PURE__*/React__default["default"].createElement(EditUserProfileProviderContext.Provider, {
+    value: value
+  }, children);
+};
+
+var useEditUserProfileProvider = function useEditUserProfileProvider() {
+  return React__default["default"].useContext(EditUserProfileProviderContext);
+};
+
+function EditUserProfile() {
+  var _a, _b, _c, _d, _e, _f, _g;
+
+  var editProfileProps = useEditUserProfileProvider();
+  var store = useSendbirdStateContext();
+  var hiddenInputRef = React.useRef(null);
+  var inputRef = React.useRef(null);
+  var formRef = React.useRef(null);
+  var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+
+  var _h = React.useState(null),
+      currentImg = _h[0],
+      setCurrentImg = _h[1];
+
+  var _j = React.useState(null),
+      newFile = _j[0],
+      setNewFile = _j[1];
+
+  var onEditProfile = editProfileProps.onEditProfile,
+      onCancel = editProfileProps.onCancel,
+      onThemeChange = editProfileProps.onThemeChange;
+  var theme = ((_a = store === null || store === void 0 ? void 0 : store.config) === null || _a === void 0 ? void 0 : _a.theme) || 'light';
+  var changeTheme = ((_b = store === null || store === void 0 ? void 0 : store.config) === null || _b === void 0 ? void 0 : _b.setCurrenttheme) || utils.noop;
+  var user = (_d = (_c = store === null || store === void 0 ? void 0 : store.stores) === null || _c === void 0 ? void 0 : _c.userStore) === null || _d === void 0 ? void 0 : _d.user;
+  var sdk = (_f = (_e = store === null || store === void 0 ? void 0 : store.stores) === null || _e === void 0 ? void 0 : _e.sdkStore) === null || _f === void 0 ? void 0 : _f.sdk;
+  var userDispatcher = (_g = store === null || store === void 0 ? void 0 : store.dispatchers) === null || _g === void 0 ? void 0 : _g.userDispatcher;
+  return /*#__PURE__*/React__default["default"].createElement(ui_Modal["default"], {
+    titleText: stringSet.EDIT_PROFILE__TITLE,
+    submitText: stringSet.BUTTON__SAVE,
+    type: ui_Button.Type.PRIMARY,
+    onCancel: onCancel,
+    onSubmit: function onSubmit() {
+      var _a;
+
+      if ((user === null || user === void 0 ? void 0 : user.nickname) !== '' && !inputRef.current.value) {
+        if (formRef.current.reportValidity) {
+          // might not work in explorer
+          formRef.current.reportValidity();
+        }
+
+        return;
+      }
+
+      sdk === null || sdk === void 0 ? void 0 : sdk.updateCurrentUserInfoWithProfileImage((_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.value, newFile, function (updatedUser) {
+        userDispatcher({
+          type: actionTypes.UPDATE_USER_INFO,
+          payload: updatedUser
+        });
+
+        if (onEditProfile && typeof onEditProfile === 'function') {
+          onEditProfile(updatedUser);
+        }
+      });
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("form", {
+    className: "sendbird-edit-user-profile",
+    ref: formRef,
+    onSubmit: function onSubmit(e) {
+      e.preventDefault();
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("section", {
+    className: "sendbird-edit-user-profile__img"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Input.InputLabel, null, stringSet.EDIT_PROFILE__IMAGE_LABEL), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-edit-user-profile__img__avatar"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
+    width: "80px",
+    height: "80px",
+    src: currentImg || (user === null || user === void 0 ? void 0 : user.profileUrl)
+  })), /*#__PURE__*/React__default["default"].createElement("input", {
+    ref: hiddenInputRef,
+    type: "file",
+    accept: "image/gif, image/jpeg, image/png",
+    style: {
+      display: 'none'
+    },
+    onChange: function onChange(e) {
+      setCurrentImg(URL.createObjectURL(e.target.files[0]));
+      setNewFile(e.target.files[0]);
+      hiddenInputRef.current.value = '';
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(ui_TextButton, {
+    className: "sendbird-edit-user-profile__img__avatar-button",
+    notUnderline: true,
+    onClick: function onClick() {
+      return hiddenInputRef.current.click();
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    type: ui_Label.LabelTypography.BUTTON_1,
+    color: ui_Label.LabelColors.PRIMARY
+  }, stringSet.EDIT_PROFILE__IMAGE_UPLOAD))), /*#__PURE__*/React__default["default"].createElement("section", {
+    className: "sendbird-edit-user-profile__name"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Input.InputLabel, null, stringSet.EDIT_PROFILE__NICKNAME_LABEL), /*#__PURE__*/React__default["default"].createElement(ui_Input["default"], {
+    required: (user === null || user === void 0 ? void 0 : user.nickname) !== '',
+    name: "sendbird-edit-user-profile__name__input",
+    ref: inputRef,
+    value: user === null || user === void 0 ? void 0 : user.nickname,
+    placeHolder: stringSet.EDIT_PROFILE__NICKNAME_PLACEHOLDER
+  })), /*#__PURE__*/React__default["default"].createElement("section", {
+    className: "sendbird-edit-user-profile__userid"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Input.InputLabel, null, stringSet.EDIT_PROFILE__USERID_LABEL), /*#__PURE__*/React__default["default"].createElement(ui_Input["default"], {
+    disabled: true,
+    name: "sendbird-edit-user-profile__userid__input",
+    value: user === null || user === void 0 ? void 0 : user.userId
+  })), /*#__PURE__*/React__default["default"].createElement("section", {
+    className: "sendbird-edit-user-profile__theme"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Input.InputLabel, null, stringSet.EDIT_PROFILE__THEME_LABEL), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-edit-user-profile__theme__theme-icon"
+  }, theme === 'dark' ? /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    onClick: function onClick() {
+      changeTheme('light');
+      onThemeChange === null || onThemeChange === void 0 ? void 0 : onThemeChange('light'); // if (onThemeChange && typeof onThemeChange === 'function') {
+      //   onThemeChange('light');
+      // }
+    },
+    type: ui_Icon.IconTypes.TOGGLE_ON,
+    width: 44,
+    height: 24
+  }) : /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    onClick: function onClick() {
+      changeTheme('dark');
+      onThemeChange === null || onThemeChange === void 0 ? void 0 : onThemeChange('dark'); // if (onThemeChange && typeof onThemeChange === 'function') {
+      //   onThemeChange('dark');
+      // }
+    },
+    type: ui_Icon.IconTypes.TOGGLE_OFF,
+    width: 44,
+    height: 24
+  })))));
+}
+
+exports.EditUserProfile = EditUserProfile;
+exports.EditUserProfileProvider = EditUserProfileProvider;
+//# sourceMappingURL=index-4987c8b2.js.map

package/cjs/index-4987c8b2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-4987c8b2.js","sources":["../../src/smart-components/EditUserProfile/context/EditUserProfIleProvider.tsx","../../src/smart-components/EditUserProfile/components/EditUserProfileUI/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport Sendbird from 'sendbird';\n\nconst EditUserProfileProviderContext = React.createContext(undefined);\n\nexport interface EditUserProfileProps {\n  children?: React.ReactNode;\n  onCancel?(): void;\n  onThemeChange?(theme: string): void;\n  onEditProfile?(updatedUser: Sendbird.User): void;\n}\n\nexport interface EditUserProfileProviderInterface {\n  onCancel?(): void;\n  onThemeChange?(theme: string): void;\n  onEditProfile?(updatedUser: Sendbird.User): void;\n}\n\nconst EditUserProfileProvider: React.FC<EditUserProfileProps> = (props: EditUserProfileProps) => {\n  const {\n    children,\n    onEditProfile,\n    onCancel,\n    onThemeChange,\n  } = props;\n\n  const value = useMemo(() => {\n    return {\n      onEditProfile,\n      onCancel,\n      onThemeChange,\n    };\n  }, []);\n\n  return (\n    <EditUserProfileProviderContext.Provider value={value}>\n      {children}\n    </EditUserProfileProviderContext.Provider>\n  );\n}\n\nconst useEditUserProfileProvider = (): EditUserProfileProviderInterface => (\n  React.useContext(EditUserProfileProviderContext)\n);\n\nexport {\n  EditUserProfileProvider,\n  useEditUserProfileProvider,\n};\n","import './edit-user-profile.scss';\n\nimport React, {\n  ReactElement,\n  useRef,\n  useState,\n  useContext,\n} from 'react';\nimport { useEditUserProfileProvider } from '../../context/EditUserProfIleProvider';\n\nimport Modal from '../../../../ui/Modal';\nimport { LocalizationContext } from '../../../../lib/LocalizationContext';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\n\nimport Input, { InputLabel } from '../../../../ui/Input';\nimport Avatar from '../../../../ui/Avatar';\nimport Icon, { IconTypes } from '../../../../ui/Icon';\nimport { Type as ButtonType } from '../../../../ui/Button/type';\nimport Label, { LabelColors, LabelTypography } from '../../../../ui/Label';\nimport TextButton from '../../../../ui/TextButton';\nimport { noop } from '../../../../utils/utils';\nimport * as userActions from '../../../../lib/dux/user/actionTypes';\n\nexport default function EditUserProfile(): ReactElement {\n  const editProfileProps = useEditUserProfileProvider();\n  const store = useSendbirdStateContext();\n  const hiddenInputRef = useRef(null);\n  const inputRef = useRef(null);\n  const formRef = useRef(null);\n  const { stringSet } = useContext(LocalizationContext);\n  const [currentImg, setCurrentImg] = useState(null);\n  const [newFile, setNewFile] = useState(null);\n\n  const {\n    onEditProfile,\n    onCancel,\n    onThemeChange,\n  } = editProfileProps;\n\n  const theme = store?.config?.theme || 'light';\n  const changeTheme = store?.config?.setCurrenttheme || noop;\n  const user = store?.stores?.userStore?.user;\n  const sdk = store?.stores?.sdkStore?.sdk;\n  const userDispatcher = store?.dispatchers?.userDispatcher;\n\n  return (\n    <Modal\n      titleText={stringSet.EDIT_PROFILE__TITLE}\n      submitText={stringSet.BUTTON__SAVE}\n      type={ButtonType.PRIMARY}\n      onCancel={onCancel}\n      onSubmit={() => {\n        if (user?.nickname !== '' && !inputRef.current.value) {\n          if (formRef.current.reportValidity) { // might not work in explorer\n            formRef.current.reportValidity();\n          }\n          return;\n        }\n        sdk?.updateCurrentUserInfoWithProfileImage(inputRef?.current?.value, newFile, (updatedUser) => {\n          userDispatcher({ type: userActions.UPDATE_USER_INFO, payload: updatedUser });\n          if (onEditProfile && typeof onEditProfile === 'function') {\n            onEditProfile(updatedUser);\n          }\n        });\n      }}\n    >\n      <form\n        className=\"sendbird-edit-user-profile\"\n        ref={formRef}\n        onSubmit={(e) => { e.preventDefault(); }}\n      >\n        <section className=\"sendbird-edit-user-profile__img\">\n          <InputLabel>\n            {stringSet.EDIT_PROFILE__IMAGE_LABEL}\n          </InputLabel>\n          <div className=\"sendbird-edit-user-profile__img__avatar\">\n            <Avatar\n              width=\"80px\"\n              height=\"80px\"\n              src={currentImg || user?.profileUrl}\n            />\n          </div>\n          <input\n            ref={hiddenInputRef}\n            type=\"file\"\n            accept=\"image/gif, image/jpeg, image/png\"\n            style={{ display: 'none' }}\n            onChange={(e) => {\n              setCurrentImg(URL.createObjectURL(e.target.files[0]));\n              setNewFile(e.target.files[0]);\n              hiddenInputRef.current.value = '';\n            }}\n          />\n          <TextButton\n            className=\"sendbird-edit-user-profile__img__avatar-button\"\n            notUnderline\n            onClick={() => hiddenInputRef.current.click()}\n          >\n            <Label type={LabelTypography.BUTTON_1} color={LabelColors.PRIMARY}>\n              {stringSet.EDIT_PROFILE__IMAGE_UPLOAD}\n            </Label>\n          </TextButton>\n        </section>\n        <section className=\"sendbird-edit-user-profile__name\">\n          <InputLabel>\n            {stringSet.EDIT_PROFILE__NICKNAME_LABEL}\n          </InputLabel>\n          <Input\n            required={user?.nickname !== ''}\n            name=\"sendbird-edit-user-profile__name__input\"\n            ref={inputRef}\n            value={user?.nickname}\n            placeHolder={stringSet.EDIT_PROFILE__NICKNAME_PLACEHOLDER}\n          />\n        </section>\n        <section className=\"sendbird-edit-user-profile__userid\">\n          <InputLabel>\n            {/*  userID */}\n            {stringSet.EDIT_PROFILE__USERID_LABEL}\n          </InputLabel>\n          <Input\n            disabled\n            name=\"sendbird-edit-user-profile__userid__input\"\n            value={user?.userId}\n          />\n        </section>\n        <section className=\"sendbird-edit-user-profile__theme\">\n          <InputLabel>\n            {stringSet.EDIT_PROFILE__THEME_LABEL}\n          </InputLabel>\n          <div className=\"sendbird-edit-user-profile__theme__theme-icon\">\n            {\n              theme === 'dark'\n                ? (\n                  <Icon\n                    onClick={() => {\n                      changeTheme('light');\n                      onThemeChange?.('light');\n                      // if (onThemeChange && typeof onThemeChange === 'function') {\n                      //   onThemeChange('light');\n                      // }\n                    }}\n                    type={IconTypes.TOGGLE_ON}\n                    width={44}\n                    height={24}\n                  />\n                )\n                : (\n                  <Icon\n                    onClick={() => {\n                      changeTheme('dark');\n                      onThemeChange?.('dark');\n                      // if (onThemeChange && typeof onThemeChange === 'function') {\n                      //   onThemeChange('dark');\n                      // }\n                    }}\n                    type={IconTypes.TOGGLE_OFF}\n                    width={44}\n                    height={24}\n                  />\n                )\n            }\n          </div>\n        </section>\n      </form>\n    </Modal>\n  );\n}\n\n"],"names":["EditUserProfileProviderContext","React","createContext","undefined","EditUserProfileProvider","props","children","onEditProfile","onCancel","onThemeChange","value","useMemo","useEditUserProfileProvider","useContext","EditUserProfile","editProfileProps","store","useSendbirdStateContext","hiddenInputRef","useRef","inputRef","formRef","stringSet","LocalizationContext","_h","useState","currentImg","setCurrentImg","_j","newFile","setNewFile","theme","config","changeTheme","setCurrenttheme","noop","user","stores","userStore","sdk","sdkStore","userDispatcher","dispatchers","Modal","EDIT_PROFILE__TITLE","BUTTON__SAVE","ButtonType","PRIMARY","nickname","current","reportValidity","updateCurrentUserInfoWithProfileImage","updatedUser","type","userActions","payload","e","preventDefault","InputLabel","EDIT_PROFILE__IMAGE_LABEL","Avatar","profileUrl","display","URL","createObjectURL","target","files","TextButton","click","Label","LabelTypography","BUTTON_1","LabelColors","EDIT_PROFILE__IMAGE_UPLOAD","EDIT_PROFILE__NICKNAME_LABEL","Input","EDIT_PROFILE__NICKNAME_PLACEHOLDER","EDIT_PROFILE__USERID_LABEL","userId","EDIT_PROFILE__THEME_LABEL","Icon","IconTypes","TOGGLE_ON","TOGGLE_OFF"],"mappings":";;;;;;;;;;;;;;;;;;;AAGA,IAAMA,8BAA8B,gBAAGC,yBAAK,CAACC,aAAN,CAAoBC,SAApB,CAAvC;;IAeMC,uBAAuB,GAAmC,SAA1DA,uBAA0D,CAACC,KAAD;AAE5D,MAAAC,QAAQ,GAIND,KAAK,SAJP;AAAA,MACAE,aAAa,GAGXF,KAAK,cAJP;AAAA,MAEAG,QAAQ,GAENH,KAAK,SAJP;AAAA,MAGAI,aAAa,GACXJ,KAAK,cAJP;AAMF,MAAMK,KAAK,GAAGC,aAAO,CAAC;AACpB,WAAO;AACLJ,MAAAA,aAAa,eADR;AAELC,MAAAA,QAAQ,UAFH;AAGLC,MAAAA,aAAa;AAHR,KAAP;AAKD,GANoB,EAMlB,EANkB,CAArB;AAQA,sBACER,wCAAC,8BAAD,CAAgC,QAAhC;AAAyC,IAAA,KAAK,EAAES;AAAhD,KACGJ,QADH,CADF;AAKD;;AAED,IAAMM,0BAA0B,GAAG,SAA7BA,0BAA6B;AAAwC,SACzEX,yBAAK,CAACY,UAAN,CAAiBb,8BAAjB,CADyE;AAE1E,CAFD;;SClBwBc;;;AACtB,MAAMC,gBAAgB,GAAGH,0BAA0B,EAAnD;AACA,MAAMI,KAAK,GAAGC,uBAAuB,EAArC;AACA,MAAMC,cAAc,GAAGC,YAAM,CAAC,IAAD,CAA7B;AACA,MAAMC,QAAQ,GAAGD,YAAM,CAAC,IAAD,CAAvB;AACA,MAAME,OAAO,GAAGF,YAAM,CAAC,IAAD,CAAtB;AACQ,MAAAG,SAAS,GAAKT,gBAAU,CAACU,uCAAD,CAAV,UAAd;;AACF,MAAAC,KAA8BC,cAAQ,CAAC,IAAD,CAAtC;AAAA,MAACC,UAAU,QAAX;AAAA,MAAaC,aAAa,QAA1B;;AACA,MAAAC,KAAwBH,cAAQ,CAAC,IAAD,CAAhC;AAAA,MAACI,OAAO,QAAR;AAAA,MAAUC,UAAU,QAApB;;AAGJ,MAAAvB,aAAa,GAGXQ,gBAAgB,cAHlB;AAAA,MACAP,QAAQ,GAENO,gBAAgB,SAHlB;AAAA,MAEAN,aAAa,GACXM,gBAAgB,cAHlB;AAKF,MAAMgB,KAAK,GAAG,CAAA,MAAAf,KAAK,SAAL,IAAAA,KAAK,WAAL,SAAA,GAAAA,KAAK,CAAEgB,MAAP,UAAA,iBAAA,SAAA,MAAeD,KAAf,KAAwB,OAAtC;AACA,MAAME,WAAW,GAAG,CAAA,MAAAjB,KAAK,SAAL,IAAAA,KAAK,WAAL,SAAA,GAAAA,KAAK,CAAEgB,MAAP,UAAA,iBAAA,SAAA,MAAeE,eAAf,KAAkCC,UAAtD;AACA,MAAMC,IAAI,GAAG,MAAA,MAAApB,KAAK,SAAL,IAAAA,KAAK,WAAL,SAAA,GAAAA,KAAK,CAAEqB,MAAP,UAAA,iBAAA,SAAA,MAAeC,SAAf,UAAA,iBAAA,SAAA,MAA0BF,IAAvC;AACA,MAAMG,GAAG,GAAG,MAAA,MAAAvB,KAAK,SAAL,IAAAA,KAAK,WAAL,SAAA,GAAAA,KAAK,CAAEqB,MAAP,UAAA,iBAAA,SAAA,MAAeG,QAAf,UAAA,iBAAA,SAAA,MAAyBD,GAArC;AACA,MAAME,cAAc,GAAG,MAAAzB,KAAK,SAAL,IAAAA,KAAK,WAAL,SAAA,GAAAA,KAAK,CAAE0B,WAAP,UAAA,iBAAA,SAAA,MAAoBD,cAA3C;AAEA,sBACExC,wCAAC0C,mBAAD;AACE,IAAA,SAAS,EAAErB,SAAS,CAACsB,mBADvB;AAEE,IAAA,UAAU,EAAEtB,SAAS,CAACuB,YAFxB;AAGE,IAAA,IAAI,EAAEC,cAAU,CAACC,OAHnB;AAIE,IAAA,QAAQ,EAAEvC,QAJZ;AAKE,IAAA,QAAQ,EAAE;;;AACR,UAAI,CAAA4B,IAAI,SAAJ,IAAAA,IAAI,WAAJ,SAAA,GAAAA,IAAI,CAAEY,QAAN,MAAmB,EAAnB,IAAyB,CAAC5B,QAAQ,CAAC6B,OAAT,CAAiBvC,KAA/C,EAAsD;AACpD,YAAIW,OAAO,CAAC4B,OAAR,CAAgBC,cAApB,EAAoC;AAAE;AACpC7B,UAAAA,OAAO,CAAC4B,OAAR,CAAgBC,cAAhB;AACD;;AACD;AACD;;AACDX,MAAAA,GAAG,SAAH,IAAAA,GAAG,WAAH,SAAA,GAAAA,GAAG,CAAEY,qCAAL,CAA2C,MAAA/B,QAAQ,SAAR,IAAAA,QAAQ,WAAR,SAAA,GAAAA,QAAQ,CAAE6B,OAAV,UAAA,iBAAA,SAAA,MAAmBvC,KAA9D,EAAqEmB,OAArE,EAA8E,UAACuB,WAAD;AAC5EX,QAAAA,cAAc,CAAC;AAAEY,UAAAA,IAAI,EAAEC,4BAAR;AAAsCC,UAAAA,OAAO,EAAEH;AAA/C,SAAD,CAAd;;AACA,YAAI7C,aAAa,IAAI,OAAOA,aAAP,KAAyB,UAA9C,EAA0D;AACxDA,UAAAA,aAAa,CAAC6C,WAAD,CAAb;AACD;AACF,OALD,CAAA;AAMD;AAlBH,kBAoBEnD;AACE,IAAA,SAAS,EAAC,4BADZ;AAEE,IAAA,GAAG,EAAEoB,OAFP;AAGE,IAAA,QAAQ,EAAE,kBAACmC,CAAD;AAASA,MAAAA,CAAC,CAACC,cAAF;AAAqB;AAH1C,kBAKExD;AAAS,IAAA,SAAS,EAAC;AAAnB,kBACEA,wCAACyD,mBAAD,QACGpC,SAAS,CAACqC,yBADb,CADF,eAIE1D;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA,wCAAC2D,oBAAD;AACE,IAAA,KAAK,EAAC,MADR;AAEE,IAAA,MAAM,EAAC,MAFT;AAGE,IAAA,GAAG,EAAElC,UAAU,KAAIU,IAAI,SAAJ,IAAAA,IAAI,WAAJ,SAAA,GAAAA,IAAI,CAAEyB,UAAV;AAHjB,IADF,CAJF,eAWE5D;AACE,IAAA,GAAG,EAAEiB,cADP;AAEE,IAAA,IAAI,EAAC,MAFP;AAGE,IAAA,MAAM,EAAC,kCAHT;AAIE,IAAA,KAAK,EAAE;AAAE4C,MAAAA,OAAO,EAAE;AAAX,KAJT;AAKE,IAAA,QAAQ,EAAE,kBAACN,CAAD;AACR7B,MAAAA,aAAa,CAACoC,GAAG,CAACC,eAAJ,CAAoBR,CAAC,CAACS,MAAF,CAASC,KAAT,CAAe,CAAf,CAApB,CAAD,CAAb;AACApC,MAAAA,UAAU,CAAC0B,CAAC,CAACS,MAAF,CAASC,KAAT,CAAe,CAAf,CAAD,CAAV;AACAhD,MAAAA,cAAc,CAAC+B,OAAf,CAAuBvC,KAAvB,GAA+B,EAA/B;AACD;AATH,IAXF,eAsBET,wCAACkE,aAAD;AACE,IAAA,SAAS,EAAC,gDADZ;AAEE,IAAA,YAAY,MAFd;AAGE,IAAA,OAAO,EAAE;AAAM,aAAAjD,cAAc,CAAC+B,OAAf,CAAuBmB,KAAvB,EAAA;AAA8B;AAH/C,kBAKEnE,wCAACoE,cAAD;AAAO,IAAA,IAAI,EAAEC,wBAAe,CAACC,QAA7B;AAAuC,IAAA,KAAK,EAAEC,oBAAW,CAACzB;AAA1D,KACGzB,SAAS,CAACmD,0BADb,CALF,CAtBF,CALF,eAqCExE;AAAS,IAAA,SAAS,EAAC;AAAnB,kBACEA,wCAACyD,mBAAD,QACGpC,SAAS,CAACoD,4BADb,CADF,eAIEzE,wCAAC0E,mBAAD;AACE,IAAA,QAAQ,EAAE,CAAAvC,IAAI,SAAJ,IAAAA,IAAI,WAAJ,SAAA,GAAAA,IAAI,CAAEY,QAAN,MAAmB,EAD/B;AAEE,IAAA,IAAI,EAAC,yCAFP;AAGE,IAAA,GAAG,EAAE5B,QAHP;AAIE,IAAA,KAAK,EAAEgB,IAAI,SAAJ,IAAAA,IAAI,WAAJ,SAAA,GAAAA,IAAI,CAAEY,QAJf;AAKE,IAAA,WAAW,EAAE1B,SAAS,CAACsD;AALzB,IAJF,CArCF,eAiDE3E;AAAS,IAAA,SAAS,EAAC;AAAnB,kBACEA,wCAACyD,mBAAD,QAEGpC,SAAS,CAACuD,0BAFb,CADF,eAKE5E,wCAAC0E,mBAAD;AACE,IAAA,QAAQ,MADV;AAEE,IAAA,IAAI,EAAC,2CAFP;AAGE,IAAA,KAAK,EAAEvC,IAAI,SAAJ,IAAAA,IAAI,WAAJ,SAAA,GAAAA,IAAI,CAAE0C;AAHf,IALF,CAjDF,eA4DE7E;AAAS,IAAA,SAAS,EAAC;AAAnB,kBACEA,wCAACyD,mBAAD,QACGpC,SAAS,CAACyD,yBADb,CADF,eAIE9E;AAAK,IAAA,SAAS,EAAC;AAAf,KAEI8B,KAAK,KAAK,MAAV,gBAEI9B,wCAAC+E,kBAAD;AACE,IAAA,OAAO,EAAE;AACP/C,MAAAA,WAAW,CAAC,OAAD,CAAX;AACAxB,MAAAA,aAAa,SAAb,IAAAA,aAAa,WAAb,SAAA,GAAAA,aAAa,CAAG,OAAH,CAAb;AAEA;AACA;AACD,KAPH;AAQE,IAAA,IAAI,EAAEwE,iBAAS,CAACC,SARlB;AASE,IAAA,KAAK,EAAE,EATT;AAUE,IAAA,MAAM,EAAE;AAVV,IAFJ,gBAgBIjF,wCAAC+E,kBAAD;AACE,IAAA,OAAO,EAAE;AACP/C,MAAAA,WAAW,CAAC,MAAD,CAAX;AACAxB,MAAAA,aAAa,SAAb,IAAAA,aAAa,WAAb,SAAA,GAAAA,aAAa,CAAG,MAAH,CAAb;AAEA;AACA;AACD,KAPH;AAQE,IAAA,IAAI,EAAEwE,iBAAS,CAACE,UARlB;AASE,IAAA,KAAK,EAAE,EATT;AAUE,IAAA,MAAM,EAAE;AAVV,IAlBR,CAJF,CA5DF,CApBF,CADF;AA0HD;;;;;"}

package/cjs/index-659c9ca5.js

@@ -0,0 +1,130 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-fc14118c.js');
+var React = require('react');
+var PropTypes = require('prop-types');
+var ui_Icon = require('./ui/Icon.js');
+var ui_Loader = require('./ui/Loader.js');
+var LocalizationContext = require('./LocalizationContext-68e55e2a.js');
+var ui_Label = require('./index-1468d245.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);
+
+function Types() {
+  return {
+    LOADING: 'LOADING',
+    NO_CHANNELS: 'NO_CHANNELS',
+    NO_MESSAGES: 'NO_MESSAGES',
+    WRONG: 'WRONG',
+    SEARCH_IN: 'SEARCH_IN',
+    SEARCHING: 'SEARCHING',
+    NO_RESULTS: 'NO_RESULTS'
+  };
+}
+var PlaceHolderTypes$1 = Types();
+
+var PlaceHolderTypes = PlaceHolderTypes$1;
+function PlaceHolder(_ref) {
+  var className = _ref.className,
+      type = _ref.type,
+      retryToConnect = _ref.retryToConnect,
+      searchInString = _ref.searchInString;
+
+  var _useContext = React.useContext(LocalizationContext.LocalizationContext),
+      stringSet = _useContext.stringSet;
+
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: [].concat(_rollupPluginBabelHelpers._toConsumableArray(Array.isArray(className) ? className : [className]), ['sendbird-place-holder']).join(' ')
+  }, type === PlaceHolderTypes.LOADING && /*#__PURE__*/React__default["default"].createElement(ui_Loader, {
+    width: "48px",
+    height: "48px"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    type: ui_Icon.IconTypes.SPINNER,
+    fillColor: ui_Icon.IconColors.PRIMARY,
+    width: "48px",
+    height: "48px"
+  })), (type === PlaceHolderTypes.NO_CHANNELS || type === PlaceHolderTypes.NO_MESSAGES || type === PlaceHolderTypes.WRONG) && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-place-holder__body"
+  }, type === PlaceHolderTypes.NO_CHANNELS && /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    className: "sendbird-place-holder__body__icon",
+    type: ui_Icon.IconTypes.CHAT,
+    fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
+    width: "64px",
+    height: "64px"
+  }), type === PlaceHolderTypes.WRONG && /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    className: "sendbird-place-holder__body__icon",
+    type: ui_Icon.IconTypes.ERROR,
+    fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
+    width: "64px",
+    height: "64px"
+  }), type === PlaceHolderTypes.NO_MESSAGES && /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    className: "sendbird-place-holder__body__icon",
+    type: ui_Icon.IconTypes.MESSAGE,
+    fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
+    width: "64px",
+    height: "64px"
+  }), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-place-holder__body__text",
+    type: ui_Label.LabelTypography.BODY_1,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, type === PlaceHolderTypes.NO_CHANNELS && stringSet.PLACE_HOLDER__NO_CHANNEL, type === PlaceHolderTypes.WRONG && stringSet.PLACE_HOLDER__WRONG, type === PlaceHolderTypes.NO_MESSAGES && stringSet.PLACE_HOLDER__NO_MESSAGES), retryToConnect && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-place-holder__body__reconnect",
+    role: "button",
+    onClick: retryToConnect,
+    onKeyPress: retryToConnect,
+    tabIndex: 0
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    className: "sendbird-place-holder__body__reconnect__icon",
+    type: ui_Icon.IconTypes.REFRESH,
+    fillColor: ui_Icon.IconColors.PRIMARY,
+    width: "20px",
+    height: "20px"
+  }), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-place-holder__body__reconnect__text",
+    type: ui_Label.LabelTypography.BUTTON_1,
+    color: ui_Label.LabelColors.PRIMARY
+  }, stringSet.PLACE_HOLDER__RETRY_TO_CONNECT))), (type === PlaceHolderTypes.NO_RESULTS || type === PlaceHolderTypes.SEARCH_IN || type === PlaceHolderTypes.SEARCHING) && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-place-holder__body--align-top"
+  }, type === PlaceHolderTypes.SEARCH_IN && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-place-holder__body--align-top__text"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-place-holder__body--align-top__text__search-in",
+    type: ui_Label.LabelTypography.BUTTON_2,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, stringSet.SEARCH_IN), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-place-holder__body--align-top__text__channel-name",
+    type: ui_Label.LabelTypography.BUTTON_2,
+    color: ui_Label.LabelColors.PRIMARY
+  }, "'".concat(searchInString)), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-place-holder__body--align-top__text__quote",
+    type: ui_Label.LabelTypography.BUTTON_2,
+    color: ui_Label.LabelColors.PRIMARY
+  }, '\'')), type === PlaceHolderTypes.SEARCHING && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-place-hlder__body--align-top__searching",
+    type: ui_Label.LabelTypography.BODY_1,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, stringSet.SEARCHING), type === PlaceHolderTypes.NO_RESULTS && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-place-hlder__body--align-top__no-result",
+    type: ui_Label.LabelTypography.BODY_1,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, stringSet.NO_SEARCHED_MESSAGE)));
+}
+PlaceHolder.propTypes = {
+  className: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)]),
+  type: PropTypes__default["default"].oneOfType([PropTypes__default["default"].oneOf(Object.keys(PlaceHolderTypes)), PropTypes__default["default"].string]).isRequired,
+  retryToConnect: PropTypes__default["default"].func,
+  searchInString: PropTypes__default["default"].string
+};
+PlaceHolder.defaultProps = {
+  className: '',
+  retryToConnect: null,
+  searchInString: ''
+};
+
+exports.PlaceHolder = PlaceHolder;
+exports.PlaceHolderTypes = PlaceHolderTypes;
+exports.PlaceHolderTypes$1 = PlaceHolderTypes$1;
+//# sourceMappingURL=index-659c9ca5.js.map

package/cjs/index-659c9ca5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-659c9ca5.js","sources":["../../src/ui/PlaceHolder/type.js","../../src/ui/PlaceHolder/index.jsx"],"sourcesContent":["export function Types() {\n  return {\n    LOADING: 'LOADING',\n    NO_CHANNELS: 'NO_CHANNELS',\n    NO_MESSAGES: 'NO_MESSAGES',\n    WRONG: 'WRONG',\n    SEARCH_IN: 'SEARCH_IN',\n    SEARCHING: 'SEARCHING',\n    NO_RESULTS: 'NO_RESULTS',\n  };\n}\n\nexport default Types();\n","import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\n\nimport './index.scss';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport Loader from '../Loader';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\nimport Label, { LabelColors, LabelTypography } from '../Label';\nimport _PlaceHolderTypes from './type';\n\nexport const PlaceHolderTypes = _PlaceHolderTypes;\n\nexport default function PlaceHolder({\n  className,\n  type,\n  retryToConnect,\n  searchInString,\n}) {\n  const { stringSet } = useContext(LocalizationContext);\n  return (\n    <div className={[\n      ...(Array.isArray(className) ? className : [className]),\n      'sendbird-place-holder',\n    ].join(' ')}\n    >\n      {\n        type === PlaceHolderTypes.LOADING && (\n          <Loader\n            width=\"48px\"\n            height=\"48px\"\n          >\n            <Icon\n              type={IconTypes.SPINNER}\n              fillColor={IconColors.PRIMARY}\n              width=\"48px\"\n              height=\"48px\"\n            />\n          </Loader>\n        )\n      }\n      {\n        (\n          type === PlaceHolderTypes.NO_CHANNELS\n          || type === PlaceHolderTypes.NO_MESSAGES\n          || type === PlaceHolderTypes.WRONG\n        ) && (\n          <div className=\"sendbird-place-holder__body\">\n            {\n              type === PlaceHolderTypes.NO_CHANNELS && (\n                <Icon\n                  className=\"sendbird-place-holder__body__icon\"\n                  type={IconTypes.CHAT}\n                  fillColor={IconColors.ON_BACKGROUND_3}\n                  width=\"64px\"\n                  height=\"64px\"\n                />\n              )\n            }\n            {\n              type === PlaceHolderTypes.WRONG && (\n                <Icon\n                  className=\"sendbird-place-holder__body__icon\"\n                  type={IconTypes.ERROR}\n                  fillColor={IconColors.ON_BACKGROUND_3}\n                  width=\"64px\"\n                  height=\"64px\"\n                />\n              )\n            }\n            {\n              type === PlaceHolderTypes.NO_MESSAGES && (\n                <Icon\n                  className=\"sendbird-place-holder__body__icon\"\n                  type={IconTypes.MESSAGE}\n                  fillColor={IconColors.ON_BACKGROUND_3}\n                  width=\"64px\"\n                  height=\"64px\"\n                />\n              )\n            }\n            <Label\n              className=\"sendbird-place-holder__body__text\"\n              type={LabelTypography.BODY_1}\n              color={LabelColors.ONBACKGROUND_2}\n            >\n              {\n                type === PlaceHolderTypes.NO_CHANNELS && (\n                  stringSet.PLACE_HOLDER__NO_CHANNEL\n                )\n              }\n              {\n                type === PlaceHolderTypes.WRONG && (\n                  stringSet.PLACE_HOLDER__WRONG\n                )\n              }\n              {\n                type === PlaceHolderTypes.NO_MESSAGES && (\n                  stringSet.PLACE_HOLDER__NO_MESSAGES\n                )\n              }\n            </Label>\n            {\n              retryToConnect && (\n                <div\n                  className=\"sendbird-place-holder__body__reconnect\"\n                  role=\"button\"\n                  onClick={retryToConnect}\n                  onKeyPress={retryToConnect}\n                  tabIndex={0}\n                >\n                  <Icon\n                    className=\"sendbird-place-holder__body__reconnect__icon\"\n                    type={IconTypes.REFRESH}\n                    fillColor={IconColors.PRIMARY}\n                    width=\"20px\"\n                    height=\"20px\"\n                  />\n                  <Label\n                    className=\"sendbird-place-holder__body__reconnect__text\"\n                    type={LabelTypography.BUTTON_1}\n                    color={LabelColors.PRIMARY}\n                  >\n                    {stringSet.PLACE_HOLDER__RETRY_TO_CONNECT}\n                  </Label>\n                </div>\n              )\n            }\n          </div>\n        )\n      }\n      {\n        (\n          type === PlaceHolderTypes.NO_RESULTS\n          || type === PlaceHolderTypes.SEARCH_IN\n          || type === PlaceHolderTypes.SEARCHING\n        ) && (\n          <div className=\"sendbird-place-holder__body--align-top\">\n            {\n              type === PlaceHolderTypes.SEARCH_IN && (\n                <div className=\"sendbird-place-holder__body--align-top__text\">\n                  <Label\n                    className=\"sendbird-place-holder__body--align-top__text__search-in\"\n                    type={LabelTypography.BUTTON_2}\n                    color={LabelColors.ONBACKGROUND_2}\n                  >\n                    {stringSet.SEARCH_IN}\n                  </Label>\n                  <Label\n                    className=\"sendbird-place-holder__body--align-top__text__channel-name\"\n                    type={LabelTypography.BUTTON_2}\n                    color={LabelColors.PRIMARY}\n                  >\n                    {`'${searchInString}`}\n                  </Label>\n                  <Label\n                    className=\"sendbird-place-holder__body--align-top__text__quote\"\n                    type={LabelTypography.BUTTON_2}\n                    color={LabelColors.PRIMARY}\n                  >\n                    {'\\''}\n                  </Label>\n                </div>\n              )\n            }\n            {\n              type === PlaceHolderTypes.SEARCHING && (\n                <Label\n                  className=\"sendbird-place-hlder__body--align-top__searching\"\n                  type={LabelTypography.BODY_1}\n                  color={LabelColors.ONBACKGROUND_2}\n                >\n                  {stringSet.SEARCHING}\n                </Label>\n              )\n            }\n            {\n              type === PlaceHolderTypes.NO_RESULTS && (\n                <Label\n                  className=\"sendbird-place-hlder__body--align-top__no-result\"\n                  type={LabelTypography.BODY_1}\n                  color={LabelColors.ONBACKGROUND_2}\n                >\n                  {stringSet.NO_SEARCHED_MESSAGE}\n                </Label>\n              )\n            }\n          </div>\n        )\n      }\n    </div>\n  );\n}\n\nPlaceHolder.propTypes = {\n  className: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.arrayOf(PropTypes.string),\n  ]),\n  type: PropTypes.oneOfType([\n    PropTypes.oneOf(Object.keys(PlaceHolderTypes)),\n    PropTypes.string,\n  ]).isRequired,\n  retryToConnect: PropTypes.func,\n  searchInString: PropTypes.string,\n};\n\nPlaceHolder.defaultProps = {\n  className: '',\n  retryToConnect: null,\n  searchInString: '',\n};\n"],"names":["Types","LOADING","NO_CHANNELS","NO_MESSAGES","WRONG","SEARCH_IN","SEARCHING","NO_RESULTS","PlaceHolderTypes","_PlaceHolderTypes","PlaceHolder","className","type","retryToConnect","searchInString","useContext","LocalizationContext","stringSet","React","Array","isArray","join","Loader","Icon","IconTypes","SPINNER","IconColors","PRIMARY","CHAT","ON_BACKGROUND_3","ERROR","MESSAGE","Label","LabelTypography","BODY_1","LabelColors","ONBACKGROUND_2","PLACE_HOLDER__NO_CHANNEL","PLACE_HOLDER__WRONG","PLACE_HOLDER__NO_MESSAGES","REFRESH","BUTTON_1","PLACE_HOLDER__RETRY_TO_CONNECT","BUTTON_2","NO_SEARCHED_MESSAGE","propTypes","PropTypes","oneOfType","string","arrayOf","oneOf","Object","keys","isRequired","func","defaultProps"],"mappings":"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"}