@sendbird/uikit-react 3.6.4-rc-0 → 3.6.4

package/ui/FileMessageItemBody.js

@@ -0,0 +1,57 @@
+import React__default from 'react';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-20f528de.js';
+import Icon, { IconTypes, IconColors } from './Icon.js';
+import TextButton from './TextButton.js';
+import { h as getClassName, L as getUIKitFileType, t as truncateString } from '../index-42dda0be.js';
+import { C as Colors } from '../color-4e19bb80.js';
+import { u as useMediaQueryContext } from '../MediaQueryContext-6fca0d36.js';
+import 'prop-types';
+import '../stringSet-63246007.js';
+import '../_rollupPluginBabelHelpers-71645d31.js';
+import '../utils/message/getOutgoingMessageState.js';
+
+function FileMessageItemBody(_ref) {
+  var _message$reactions;
+  let {
+    className,
+    message,
+    isByMe = false,
+    mouseHover = false,
+    isReactionEnabled = false,
+    truncateLimit = null
+  } = _ref;
+  const {
+    isMobile
+  } = useMediaQueryContext();
+  const truncateMaxNum = truncateLimit || (isMobile ? 20 : null);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: getClassName([className, 'sendbird-file-message-item-body', isByMe ? 'outgoing' : 'incoming', mouseHover ? 'mouse-hover' : '', isReactionEnabled && (message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.length) > 0 ? 'reactions' : ''])
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-file-message-item-body__file-icon"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    className: "sendbird-file-message-item-body__file-icon__icon",
+    type: {
+      IMAGE: IconTypes.PHOTO,
+      VIDEO: IconTypes.PLAY,
+      AUDIO: IconTypes.FILE_AUDIO,
+      GIF: IconTypes.GIF,
+      OTHERS: IconTypes.FILE_DOCUMENT
+    }[getUIKitFileType(message === null || message === void 0 ? void 0 : message.type)],
+    fillColor: IconColors.PRIMARY,
+    width: "24px",
+    height: "24px"
+  })), /*#__PURE__*/React__default.createElement(TextButton, {
+    className: "sendbird-file-message-item-body__file-name",
+    onClick: () => {
+      window.open(message === null || message === void 0 ? void 0 : message.url);
+    },
+    color: isByMe ? Colors.ONCONTENT_1 : Colors.ONBACKGROUND_1
+  }, /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-file-message-item-body__file-name__text",
+    type: LabelTypography.BODY_1,
+    color: isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1
+  }, truncateString((message === null || message === void 0 ? void 0 : message.name) || (message === null || message === void 0 ? void 0 : message.url), truncateMaxNum))));
+}
+
+export { FileMessageItemBody as default };
+//# sourceMappingURL=FileMessageItemBody.js.map

package/ui/FileViewer.js

@@ -0,0 +1,128 @@
+import React__default, { useContext } from 'react';
+import { createPortal } from 'react-dom';
+import { a as LocalizationContext } from '../LocalizationContext-53fdaf30.js';
+import { M as MODAL_ROOT } from '../index-869e67e8.js';
+import { x as isSupportedFileView, y as isVideo, z as isImage } from '../index-42dda0be.js';
+import Avatar from './Avatar.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-20f528de.js';
+import Icon, { IconTypes, IconColors } from './Icon.js';
+import '../stringSet-63246007.js';
+import '../index-b596c800.js';
+import '../_rollupPluginBabelHelpers-71645d31.js';
+import '../utils/message/getOutgoingMessageState.js';
+import './ImageRenderer.js';
+import '../uuid-d94880c0.js';
+import 'prop-types';
+
+const FileViewerComponent = _ref => {
+  let {
+    profileUrl,
+    nickname,
+    name,
+    type,
+    url,
+    isByMe = true,
+    disableDelete = false,
+    onClose,
+    onDelete
+  } = _ref;
+  const {
+    stringSet
+  } = useContext(LocalizationContext);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-fileviewer"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-fileviewer__header"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-fileviewer__header__left"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-fileviewer__header__left__avatar"
+  }, /*#__PURE__*/React__default.createElement(Avatar, {
+    height: "32px",
+    width: "32px",
+    src: profileUrl
+  })), /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-fileviewer__header__left__filename",
+    type: LabelTypography.H_2,
+    color: LabelColors.ONBACKGROUND_1
+  }, name), /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-fileviewer__header__left__sender-name",
+    type: LabelTypography.BODY_1,
+    color: LabelColors.ONBACKGROUND_2
+  }, nickname)), /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-fileviewer__header__right"
+  }, isSupportedFileView(type) && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-fileviewer__header__right__actions"
+  }, /*#__PURE__*/React__default.createElement("a", {
+    className: "sendbird-fileviewer__header__right__actions__download",
+    rel: "noopener noreferrer",
+    href: url,
+    target: "_blank"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: IconTypes.DOWNLOAD,
+    fillColor: IconColors.ON_BACKGROUND_1,
+    height: "24px",
+    width: "24px"
+  })), onDelete && isByMe && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-fileviewer__header__right__actions__delete"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    className: disableDelete ? 'disabled' : '',
+    type: IconTypes.DELETE,
+    fillColor: disableDelete ? IconColors.GRAY : IconColors.ON_BACKGROUND_1,
+    height: "24px",
+    width: "24px",
+    onClick: e => {
+      if (!disableDelete) {
+        onDelete === null || onDelete === void 0 ? void 0 : onDelete(e);
+      }
+    }
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-fileviewer__header__right__actions__close"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: IconTypes.CLOSE,
+    fillColor: IconColors.ON_BACKGROUND_1,
+    height: "24px",
+    width: "24px",
+    onClick: e => onClose === null || onClose === void 0 ? void 0 : onClose(e)
+  })))), /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-fileviewer__content"
+  }, isVideo(type) && /*#__PURE__*/React__default.createElement("video", {
+    controls: true,
+    className: "sendbird-fileviewer__content__video"
+  }, /*#__PURE__*/React__default.createElement("source", {
+    src: url,
+    type: type
+  })), isImage(type) && /*#__PURE__*/React__default.createElement("img", {
+    src: url,
+    alt: name,
+    className: "sendbird-fileviewer__content__img"
+  }), !isSupportedFileView(type) && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-fileviewer__content__unsupported"
+  }, /*#__PURE__*/React__default.createElement(Label, {
+    type: LabelTypography.H_1,
+    color: LabelColors.ONBACKGROUND_1
+  }, (stringSet === null || stringSet === void 0 ? void 0 : stringSet.UI__FILE_VIEWER__UNSUPPORT) || 'Unsupported message'))));
+};
+function FileViewer(_ref2) {
+  var _message$sender, _message$sender2, _message$threadInfo;
+  let {
+    message,
+    isByMe = false,
+    onClose,
+    onDelete
+  } = _ref2;
+  return /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement(FileViewerComponent, {
+    profileUrl: message === null || message === void 0 ? void 0 : (_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.profileUrl,
+    nickname: message === null || message === void 0 ? void 0 : (_message$sender2 = message.sender) === null || _message$sender2 === void 0 ? void 0 : _message$sender2.nickname,
+    name: message === null || message === void 0 ? void 0 : message.name,
+    type: message === null || message === void 0 ? void 0 : message.type,
+    url: message === null || message === void 0 ? void 0 : message.url,
+    isByMe: isByMe,
+    disableDelete: (message === null || message === void 0 ? void 0 : (_message$threadInfo = message.threadInfo) === null || _message$threadInfo === void 0 ? void 0 : _message$threadInfo.replyCount) > 0,
+    onClose: onClose,
+    onDelete: onDelete
+  }), document.getElementById(MODAL_ROOT));
+}
+
+export { FileViewerComponent, FileViewer as default };
+//# sourceMappingURL=FileViewer.js.map

package/ui/IconButton.js

@@ -0,0 +1,43 @@
+import { _ as _objectSpread2 } from '../_rollupPluginBabelHelpers-71645d31.js';
+import React__default, { useState } from 'react';
+
+const IconButton = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  const {
+    className = '',
+    children,
+    disabled = false,
+    width = '56px',
+    height = '56px',
+    type = 'button',
+    style = {},
+    onBlur = () => {/* noop */},
+    onClick = () => {/* noop */}
+  } = props;
+  const [isPressed, setIsPressed] = useState(false);
+  return /*#__PURE__*/React__default.createElement("button", {
+    className: [...(Array.isArray(className) ? className : [className]), 'sendbird-iconbutton', isPressed ? 'sendbird-iconbutton--pressed' : ''].join(' '),
+    disabled: disabled,
+    ref: ref,
+    type: type,
+    style: _objectSpread2(_objectSpread2({}, style), {}, {
+      height,
+      width
+    }),
+    onClick: e => {
+      if (disabled) {
+        return;
+      }
+      setIsPressed(true);
+      onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    },
+    onBlur: e => {
+      setIsPressed(false);
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    }
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "sendbird-iconbutton__inner"
+  }, children));
+});
+
+export { IconButton as default };
+//# sourceMappingURL=IconButton.js.map

package/ui/Input.js

@@ -0,0 +1,45 @@
+import React__default, { useState } from 'react';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-20f528de.js';
+import 'prop-types';
+import '../stringSet-63246007.js';
+
+const InputLabel = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-input-label",
+    type: LabelTypography.CAPTION_3,
+    color: LabelColors.ONBACKGROUND_1
+  }, children);
+};
+const Input = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  const {
+    name,
+    required,
+    disabled,
+    value,
+    placeHolder
+  } = props;
+  const [inputValue, setInputValue] = useState(value);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-input"
+  }, /*#__PURE__*/React__default.createElement("input", {
+    className: "sendbird-input__input",
+    ref: ref,
+    name: name,
+    required: required,
+    disabled: disabled,
+    value: inputValue,
+    onChange: e => {
+      setInputValue(e.target.value);
+    }
+  }), placeHolder && !inputValue && /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-input__placeholder",
+    type: LabelTypography.BODY_1,
+    color: LabelColors.ONBACKGROUND_3
+  }, placeHolder));
+});
+
+export { InputLabel, Input as default };
+//# sourceMappingURL=Input.js.map

package/ui/Label.js

@@ -0,0 +1,5 @@
+import 'react';
+import 'prop-types';
+export { b as LabelColors, c as LabelStringSet, a as LabelTypography, L as default } from '../index-20f528de.js';
+import '../stringSet-63246007.js';
+//# sourceMappingURL=Label.js.map

package/ui/LinkLabel.js

@@ -0,0 +1,50 @@
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { d as changeColorToClassName, L as Label, a as LabelTypography, b as LabelColors } from '../index-20f528de.js';
+import '../stringSet-63246007.js';
+
+const http = /https?:\/\//;
+function LinkLabel(_ref) {
+  let {
+    className,
+    src,
+    type,
+    color,
+    children
+  } = _ref;
+  const url = http.test(src) ? src : `http://${src}`;
+  return /*#__PURE__*/React__default.createElement("a", {
+    className: [...(Array.isArray(className) ? className : [className]), 'sendbird-link-label', color ? changeColorToClassName(color) : ''].join(' '),
+    href: url,
+    target: "_blank",
+    rel: "noopener noreferrer"
+    // for mobile
+    ,
+    onTouchEnd: e => {
+      e.preventDefault();
+      e.nativeEvent.stopImmediatePropagation();
+      window.open(url, '_blank', 'noopener,noreferrer');
+    }
+  }, /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-link-label__label",
+    type: type,
+    color: color
+  }, children));
+}
+LinkLabel.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  src: PropTypes.string.isRequired,
+  type: PropTypes.string,
+  color: PropTypes.string,
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.element)]).isRequired
+};
+LinkLabel.defaultProps = {
+  className: '',
+  type: '',
+  color: ''
+};
+const LinkLabelTypography = LabelTypography;
+const LinkLabelColors = LabelColors;
+
+export { LinkLabelColors, LinkLabelTypography, LinkLabel as default };
+//# sourceMappingURL=LinkLabel.js.map

package/ui/MentionLabel.js

@@ -0,0 +1,91 @@
+import React__default, { useRef, useState, useCallback } from 'react';
+import ContextMenu, { MenuItems } from './ContextMenu.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-20f528de.js';
+import UserProfile from './UserProfile.js';
+import useSendbirdStateContext from '../useSendbirdStateContext.js';
+import '../_rollupPluginBabelHelpers-71645d31.js';
+import 'react-dom';
+import './SortByRow.js';
+import '../uuid-d94880c0.js';
+import '../index-42dda0be.js';
+import '../utils/message/getOutgoingMessageState.js';
+import 'prop-types';
+import '../stringSet-63246007.js';
+import '../LocalizationContext-53fdaf30.js';
+import '../index-b596c800.js';
+import '../UserProfileContext-0041c5c2.js';
+import '../sendbirdSelectors.js';
+import '../topics-86131d90.js';
+import '../utils-b0301443.js';
+import './Avatar.js';
+import './ImageRenderer.js';
+import './Icon.js';
+import './Button.js';
+import '../withSendbird.js';
+
+function MentionLabel(props) {
+  var _sendbirdState$config, _sendbirdState$stores, _sendbirdState$stores2;
+  const {
+    mentionTemplate,
+    mentionedUserId,
+    mentionedUserNickname,
+    isByMe
+  } = props;
+  const mentionRef = useRef();
+  const sendbirdState = useSendbirdStateContext();
+  const userId = sendbirdState === null || sendbirdState === void 0 ? void 0 : (_sendbirdState$config = sendbirdState.config) === null || _sendbirdState$config === void 0 ? void 0 : _sendbirdState$config.userId;
+  const sdk = sendbirdState === null || sendbirdState === void 0 ? void 0 : (_sendbirdState$stores = sendbirdState.stores) === null || _sendbirdState$stores === void 0 ? void 0 : (_sendbirdState$stores2 = _sendbirdState$stores.sdkStore) === null || _sendbirdState$stores2 === void 0 ? void 0 : _sendbirdState$stores2.sdk;
+  const amIBeingMentioned = userId === mentionedUserId;
+  const [user, setUser] = useState();
+  const fetchUser = useCallback(toggleDropdown => {
+    if (user || !(sdk !== null && sdk !== void 0 && sdk.createApplicationUserListQuery)) {
+      toggleDropdown();
+      return;
+    }
+    const query = sdk === null || sdk === void 0 ? void 0 : sdk.createApplicationUserListQuery({
+      userIdsFilter: [mentionedUserId]
+    });
+    query.next().then(members => {
+      if ((members === null || members === void 0 ? void 0 : members.length) > 0) {
+        setUser(members[0]);
+      }
+      toggleDropdown();
+    });
+  }, [sdk, mentionedUserId]);
+  return /*#__PURE__*/React__default.createElement(ContextMenu, {
+    menuTrigger: toggleDropdown => /*#__PURE__*/React__default.createElement("a", {
+      className: `
+            sendbird-word__mention
+            ${amIBeingMentioned ? 'sendbird-word__mention--me' : ''}
+          `,
+      onClick: () => fetchUser(toggleDropdown),
+      ref: mentionRef,
+      "data-userid": mentionedUserId,
+      "data-nickname": mentionedUserNickname,
+      "data-sb-mention": true
+    }, /*#__PURE__*/React__default.createElement(Label, {
+      type: LabelTypography.CAPTION_1,
+      color: isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1
+    }, `${mentionTemplate}${mentionedUserNickname}`)),
+    menuItems: closeDropdown => /*#__PURE__*/React__default.createElement(MenuItems
+    /**
+    * parentRef: For catching location(x, y) of MenuItems
+    * parentContainRef: For toggling more options(menus & reactions)
+    */, {
+      parentRef: mentionRef,
+      parentContainRef: mentionRef,
+      closeDropdown: closeDropdown,
+      style: {
+        paddingTop: '0px',
+        paddingBottom: '0px'
+      }
+    }, /*#__PURE__*/React__default.createElement(UserProfile, {
+      user: user,
+      onSuccess: closeDropdown,
+      currentUserId: userId
+    }))
+  });
+}
+
+export { MentionLabel as default };
+//# sourceMappingURL=MentionLabel.js.map

package/ui/MentionUserLabel.js

@@ -0,0 +1,21 @@
+import React__default from 'react';
+import { M as MENTION_USER_LABEL_CLASSNAME } from '../consts-876e7a4b.js';
+
+function MentionUserLabel(_ref) {
+  let {
+    className = '',
+    children,
+    isReverse = false,
+    color,
+    userId
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement("span", {
+    className: `${MENTION_USER_LABEL_CLASSNAME} ${className} ${isReverse ? 'reverse' : ''} ${color}`,
+    contentEditable: false,
+    "data-userid": userId,
+    "data-sb-mention": true
+  }, children);
+}
+
+export { MentionUserLabel as default };
+//# sourceMappingURL=MentionUserLabel.js.map