@sendbird/uikit-react 3.4.0-rc.1 → 3.4.0-rc.2

package/cjs/ui/FileViewer.js

@@ -0,0 +1,137 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var reactDom = require('react-dom');
+var LocalizationContext = require('../LocalizationContext-53fd4ae9.js');
+var index = require('../index-e49314a5.js');
+var index$1 = require('../index-482bbe89.js');
+var ui_Avatar = require('./Avatar.js');
+var ui_Label = require('../index-db48f031.js');
+var ui_Icon = require('./Icon.js');
+require('../stringSet-42fa6280.js');
+require('../index-7c018421.js');
+require('../tslib.es6-5163dacf.js');
+require('../utils/message/getOutgoingMessageState.js');
+require('./ImageRenderer.js');
+require('../uuid-e879709a.js');
+require('prop-types');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var FileViewerComponent = function (_a) {
+  var profileUrl = _a.profileUrl,
+      nickname = _a.nickname,
+      name = _a.name,
+      type = _a.type,
+      url = _a.url,
+      _b = _a.isByMe,
+      isByMe = _b === void 0 ? true : _b,
+      _c = _a.disableDelete,
+      disableDelete = _c === void 0 ? false : _c,
+      onClose = _a.onClose,
+      onDelete = _a.onDelete;
+  var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-fileviewer"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-fileviewer__header"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-fileviewer__header__left"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-fileviewer__header__left__avatar"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
+    height: "32px",
+    width: "32px",
+    src: profileUrl
+  })), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-fileviewer__header__left__filename",
+    type: ui_Label.LabelTypography.H_2,
+    color: ui_Label.LabelColors.ONBACKGROUND_1
+  }, name), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-fileviewer__header__left__sender-name",
+    type: ui_Label.LabelTypography.BODY_1,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, nickname)), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-fileviewer__header__right"
+  }, index$1.isSupportedFileView(type) && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-fileviewer__header__right__actions"
+  }, /*#__PURE__*/React__default["default"].createElement("a", {
+    className: "sendbird-fileviewer__header__right__actions__download",
+    rel: "noopener noreferrer",
+    href: url,
+    target: "_blank"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    type: ui_Icon.IconTypes.DOWNLOAD,
+    fillColor: ui_Icon.IconColors.ON_BACKGROUND_1,
+    height: "24px",
+    width: "24px"
+  })), onDelete && isByMe && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-fileviewer__header__right__actions__delete"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    className: disableDelete ? 'disabled' : '',
+    type: ui_Icon.IconTypes.DELETE,
+    fillColor: disableDelete ? ui_Icon.IconColors.GRAY : ui_Icon.IconColors.ON_BACKGROUND_1,
+    height: "24px",
+    width: "24px",
+    onClick: function (e) {
+      if (!disableDelete) {
+        onDelete === null || onDelete === void 0 ? void 0 : onDelete(e);
+      }
+    }
+  }))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-fileviewer__header__right__actions__close"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    type: ui_Icon.IconTypes.CLOSE,
+    fillColor: ui_Icon.IconColors.ON_BACKGROUND_1,
+    height: "24px",
+    width: "24px",
+    onClick: function (e) {
+      return onClose === null || onClose === void 0 ? void 0 : onClose(e);
+    }
+  })))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-fileviewer__content"
+  }, index$1.isVideo(type) && /*#__PURE__*/React__default["default"].createElement("video", {
+    controls: true,
+    className: "sendbird-fileviewer__content__video"
+  }, /*#__PURE__*/React__default["default"].createElement("source", {
+    src: url,
+    type: type
+  })), index$1.isImage(type) && /*#__PURE__*/React__default["default"].createElement("img", {
+    src: url,
+    alt: name,
+    className: "sendbird-fileviewer__content__img"
+  }), !index$1.isSupportedFileView(type) && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-fileviewer__content__unsupported"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    type: ui_Label.LabelTypography.H_1,
+    color: ui_Label.LabelColors.ONBACKGROUND_1
+  }, (stringSet === null || stringSet === void 0 ? void 0 : stringSet.UI__FILE_VIEWER__UNSUPPORT) || 'Unsupported message'))));
+};
+function FileViewer(_a) {
+  var _b, _c, _d;
+
+  var message = _a.message,
+      _e = _a.isByMe,
+      isByMe = _e === void 0 ? false : _e,
+      onClose = _a.onClose,
+      onDelete = _a.onDelete;
+  return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(FileViewerComponent, {
+    profileUrl: (_b = message === null || message === void 0 ? void 0 : message.sender) === null || _b === void 0 ? void 0 : _b.profileUrl,
+    nickname: (_c = message === null || message === void 0 ? void 0 : message.sender) === null || _c === void 0 ? void 0 : _c.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: ((_d = message === null || message === void 0 ? void 0 : message.threadInfo) === null || _d === void 0 ? void 0 : _d.replyCount) > 0,
+    onClose: onClose,
+    onDelete: onDelete
+  }), document.getElementById(index.MODAL_ROOT));
+}
+
+exports.FileViewerComponent = FileViewerComponent;
+exports["default"] = FileViewer;
+//# sourceMappingURL=FileViewer.js.map

package/cjs/ui/IconButton.js

@@ -0,0 +1,60 @@
+'use strict';
+
+var tslib_es6 = require('../tslib.es6-5163dacf.js');
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var IconButton = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
+  var _a = props.className,
+      className = _a === void 0 ? '' : _a,
+      children = props.children,
+      _b = props.disabled,
+      disabled = _b === void 0 ? false : _b,
+      _c = props.width,
+      width = _c === void 0 ? '56px' : _c,
+      _d = props.height,
+      height = _d === void 0 ? '56px' : _d,
+      _e = props.type,
+      type = _e === void 0 ? 'button' : _e,
+      _f = props.style,
+      style = _f === void 0 ? {} : _f,
+      _g = props.onBlur,
+      onBlur = _g === void 0 ? function () {} : _g,
+      _h = props.onClick,
+      onClick = _h === void 0 ? function () {} : _h;
+
+  var _j = React.useState(false),
+      isPressed = _j[0],
+      setIsPressed = _j[1];
+
+  return /*#__PURE__*/React__default["default"].createElement("button", {
+    className: tslib_es6.__spreadArray(tslib_es6.__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-iconbutton', isPressed ? 'sendbird-iconbutton--pressed' : ''], false).join(' '),
+    disabled: disabled,
+    ref: ref,
+    type: type,
+    style: tslib_es6.__assign(tslib_es6.__assign({}, style), {
+      height: height,
+      width: width
+    }),
+    onClick: function (e) {
+      if (disabled) {
+        return;
+      }
+
+      setIsPressed(true);
+      onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    },
+    onBlur: function (e) {
+      setIsPressed(false);
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "sendbird-iconbutton__inner"
+  }, children));
+});
+
+module.exports = IconButton;
+//# sourceMappingURL=IconButton.js.map

package/cjs/ui/ImageRenderer.js

@@ -0,0 +1,101 @@
+'use strict';
+
+var tslib_es6 = require('../tslib.es6-5163dacf.js');
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ImageRenderer = function (_a) {
+  var _b = _a.className,
+      className = _b === void 0 ? '' : _b,
+      url = _a.url,
+      _c = _a.alt,
+      alt = _c === void 0 ? '' : _c,
+      _d = _a.width,
+      width = _d === void 0 ? null : _d,
+      _e = _a.height,
+      height = _e === void 0 ? null : _e,
+      _f = _a.circle,
+      circle = _f === void 0 ? false : _f,
+      _g = _a.fixedSize,
+      fixedSize = _g === void 0 ? false : _g,
+      _h = _a.placeHolder,
+      placeHolder = _h === void 0 ? null : _h,
+      _j = _a.defaultComponent,
+      defaultComponent = _j === void 0 ? null : _j,
+      _k = _a.onLoad,
+      onLoad = _k === void 0 ? function () {} : _k,
+      _l = _a.onError,
+      onError = _l === void 0 ? function () {} : _l;
+
+  var _m = React.useState(false),
+      showDefaultComponent = _m[0],
+      setShowDefaultComponent = _m[1];
+
+  var _o = React.useState(true),
+      showPlaceHolder = _o[0],
+      setShowPlaceHolder = _o[1];
+
+  var DefaultComponent = React.useMemo(function () {
+    return typeof defaultComponent === 'function' ? defaultComponent() : defaultComponent;
+  }, [defaultComponent]);
+  var PlaceHolder = React.useMemo(function () {
+    return placeHolder && typeof placeHolder === 'function' ? placeHolder({
+      style: {
+        width: '100%',
+        minWidth: width,
+        maxWidth: fixedSize ? width : '400px',
+        height: height,
+        position: 'absolute',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+      }
+    }) : null;
+  }, [placeHolder]);
+  var HiddenImageLoader = React.useMemo(function () {
+    setShowDefaultComponent(false); // reset the state when url is changed
+
+    return /*#__PURE__*/React__default["default"].createElement("img", {
+      className: "sendbird-image-renderer__hidden-image-loader",
+      src: url,
+      alt: alt,
+      onLoad: function () {
+        setShowPlaceHolder(false);
+        onLoad();
+      },
+      onError: function () {
+        setShowDefaultComponent(true);
+        onError();
+      }
+    });
+  }, [url]);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: tslib_es6.__spreadArray(tslib_es6.__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-image-renderer'], false).join(' '),
+    style: {
+      width: '100%',
+      minWidth: width,
+      maxWidth: fixedSize ? width : '400px',
+      height: height
+    }
+  }, showPlaceHolder && PlaceHolder, showDefaultComponent ? DefaultComponent : /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-image-renderer__image",
+    style: {
+      width: '100%',
+      minWidth: width,
+      maxWidth: fixedSize ? width : '400px',
+      height: height,
+      position: 'absolute',
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: 'center',
+      backgroundSize: 'cover',
+      backgroundImage: "url(".concat(url, ")"),
+      borderRadius: circle ? '50%' : null
+    }
+  }), HiddenImageLoader);
+};
+
+module.exports = ImageRenderer;
+//# sourceMappingURL=ImageRenderer.js.map

package/cjs/ui/Input.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var ui_Label = require('../index-db48f031.js');
+require('prop-types');
+require('../stringSet-42fa6280.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var InputLabel = function (_a) {
+  var children = _a.children;
+  return /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-input-label",
+    type: ui_Label.LabelTypography.CAPTION_3,
+    color: ui_Label.LabelColors.ONBACKGROUND_1
+  }, children);
+};
+var Input = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
+  var name = props.name,
+      required = props.required,
+      disabled = props.disabled,
+      value = props.value,
+      placeHolder = props.placeHolder;
+
+  var _a = React.useState(value),
+      inputValue = _a[0],
+      setInputValue = _a[1];
+
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-input"
+  }, /*#__PURE__*/React__default["default"].createElement("input", {
+    className: "sendbird-input__input",
+    ref: ref,
+    name: name,
+    required: required,
+    disabled: disabled,
+    value: inputValue,
+    onChange: function (e) {
+      setInputValue(e.target.value);
+    }
+  }), placeHolder && !inputValue && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-input__placeholder",
+    type: ui_Label.LabelTypography.BODY_1,
+    color: ui_Label.LabelColors.ONBACKGROUND_3
+  }, placeHolder));
+});
+
+exports.InputLabel = InputLabel;
+exports["default"] = Input;
+//# sourceMappingURL=Input.js.map

package/cjs/ui/Label.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('prop-types');
+var ui_Label = require('../index-db48f031.js');
+require('../stringSet-42fa6280.js');
+
+
+
+exports.LabelColors = ui_Label.LabelColors;
+exports.LabelStringSet = ui_Label.LabelStringSet;
+exports.LabelTypography = ui_Label.LabelTypography;
+exports["default"] = ui_Label.Label;
+//# sourceMappingURL=Label.js.map

package/cjs/ui/LinkLabel.js

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var ui_Label = require('../index-db48f031.js');
+require('../stringSet-42fa6280.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);
+
+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["default"].createElement("a", {
+    className: [...(Array.isArray(className) ? className : [className]), 'sendbird-link-label', color ? ui_Label.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["default"].createElement(ui_Label.Label, {
+    className: "sendbird-link-label__label",
+    type: type,
+    color: color
+  }, children));
+}
+LinkLabel.propTypes = {
+  className: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)]),
+  src: PropTypes__default["default"].string.isRequired,
+  type: PropTypes__default["default"].string,
+  color: PropTypes__default["default"].string,
+  children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].element, PropTypes__default["default"].arrayOf(PropTypes__default["default"].string), PropTypes__default["default"].arrayOf(PropTypes__default["default"].element)]).isRequired
+};
+LinkLabel.defaultProps = {
+  className: '',
+  type: '',
+  color: ''
+};
+const LinkLabelTypography = ui_Label.LabelTypography;
+const LinkLabelColors = ui_Label.LabelColors;
+
+exports.LinkLabelColors = LinkLabelColors;
+exports.LinkLabelTypography = LinkLabelTypography;
+exports["default"] = LinkLabel;
+//# sourceMappingURL=LinkLabel.js.map

package/cjs/ui/Loader.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var tslib_es6 = require('../tslib.es6-5163dacf.js');
+var React = require('react');
+var ui_Icon = require('./Icon.js');
+require('prop-types');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function Loader(_a) {
+  var _b = _a.className,
+      className = _b === void 0 ? '' : _b,
+      _c = _a.width,
+      width = _c === void 0 ? '26px' : _c,
+      _d = _a.height,
+      height = _d === void 0 ? '26px' : _d,
+      children = _a.children;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: tslib_es6.__spreadArray(tslib_es6.__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-loader'], false).join(' '),
+    style: {
+      width: typeof width === 'string' ? width : "".concat(width, "px"),
+      height: typeof height === 'string' ? height : "".concat(height, "px")
+    }
+  }, children || /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    type: ui_Icon.IconTypes.SPINNER,
+    width: "26px",
+    height: "26px"
+  }));
+}
+
+module.exports = Loader;
+//# sourceMappingURL=Loader.js.map

package/cjs/ui/MentionLabel.js

@@ -0,0 +1,104 @@
+'use strict';
+
+var React = require('react');
+var ui_ContextMenu = require('./ContextMenu.js');
+var ui_Label = require('../index-db48f031.js');
+var ui_UserProfile = require('./UserProfile.js');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+require('../tslib.es6-5163dacf.js');
+require('react-dom');
+require('./SortByRow.js');
+require('../uuid-e879709a.js');
+require('../index-482bbe89.js');
+require('../utils/message/getOutgoingMessageState.js');
+require('prop-types');
+require('../stringSet-42fa6280.js');
+require('../LocalizationContext-53fd4ae9.js');
+require('../index-7c018421.js');
+require('../UserProfileContext-c7d6be85.js');
+require('../sendbirdSelectors.js');
+require('../topics-bc8e923e.js');
+require('../utils-09e1cb5d.js');
+require('./Avatar.js');
+require('./ImageRenderer.js');
+require('./Icon.js');
+require('./Button.js');
+require('../withSendbird.js');
+require('../_rollupPluginBabelHelpers-3c8c757e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function MentionLabel(props) {
+  var _a, _b, _c;
+
+  var mentionTemplate = props.mentionTemplate,
+      mentionedUserId = props.mentionedUserId,
+      mentionedUserNickname = props.mentionedUserNickname,
+      isByMe = props.isByMe;
+  var mentionRef = React.useRef();
+  var sendbirdState = useSendbirdStateContext();
+  var userId = (_a = sendbirdState === null || sendbirdState === void 0 ? void 0 : sendbirdState.config) === null || _a === void 0 ? void 0 : _a.userId;
+  var sdk = (_c = (_b = sendbirdState === null || sendbirdState === void 0 ? void 0 : sendbirdState.stores) === null || _b === void 0 ? void 0 : _b.sdkStore) === null || _c === void 0 ? void 0 : _c.sdk;
+  var amIBeingMentioned = userId === mentionedUserId;
+
+  var _d = React.useState(),
+      user = _d[0],
+      setUser = _d[1];
+
+  var fetchUser = React.useCallback(function (toggleDropdown) {
+    if (user || !(sdk === null || sdk === void 0 ? void 0 : sdk.createApplicationUserListQuery)) {
+      toggleDropdown();
+      return;
+    }
+
+    var query = sdk === null || sdk === void 0 ? void 0 : sdk.createApplicationUserListQuery({
+      userIdsFilter: [mentionedUserId]
+    });
+    query.next().then(function (members) {
+      if ((members === null || members === void 0 ? void 0 : members.length) > 0) {
+        setUser(members[0]);
+      }
+
+      toggleDropdown();
+    });
+  }, [sdk, mentionedUserId]);
+  return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
+    menuTrigger: function (toggleDropdown) {
+      return /*#__PURE__*/React__default["default"].createElement("a", {
+        className: "\n            sendbird-word__mention\n            ".concat(amIBeingMentioned ? 'sendbird-word__mention--me' : '', "\n          "),
+        onClick: function () {
+          return fetchUser(toggleDropdown);
+        },
+        ref: mentionRef
+      }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+        type: ui_Label.LabelTypography.CAPTION_1,
+        color: isByMe ? ui_Label.LabelColors.ONCONTENT_1 : ui_Label.LabelColors.ONBACKGROUND_1
+      }, "".concat(mentionTemplate).concat(mentionedUserNickname)));
+    },
+    menuItems: function (closeDropdown) {
+      return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.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["default"].createElement(ui_UserProfile, {
+        user: user,
+        onSuccess: closeDropdown,
+        currentUserId: userId
+      }));
+    }
+  });
+}
+
+module.exports = MentionLabel;
+//# sourceMappingURL=MentionLabel.js.map