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

package/dist/cjs/ui/FileViewer.js

@@ -1,137 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var reactDom = require('react-dom');
-var LocalizationContext = require('../LocalizationContext-2fb0be1f.js');
-var index = require('../index-490839e3.js');
-var index$1 = require('../index-6714492f.js');
-var ui_Avatar = require('./Avatar.js');
-var ui_Label = require('../index-578f0575.js');
-var ui_Icon = require('./Icon.js');
-require('../stringSet-388f679a.js');
-require('../index-1ec959ab.js');
-require('../tslib.es6-e8acf1b5.js');
-require('../utils/message/getOutgoingMessageState.js');
-require('./ImageRenderer.js');
-require('../uuid-a94df44e.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/dist/cjs/ui/IconButton.js

@@ -1,60 +0,0 @@
-'use strict';
-
-var tslib_es6 = require('../tslib.es6-e8acf1b5.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/dist/cjs/ui/ImageRenderer.js

@@ -1,101 +0,0 @@
-'use strict';
-
-var tslib_es6 = require('../tslib.es6-e8acf1b5.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/dist/cjs/ui/Input.js

@@ -1,54 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var ui_Label = require('../index-578f0575.js');
-require('prop-types');
-require('../stringSet-388f679a.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/dist/cjs/ui/Label.js

@@ -1,16 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('react');
-require('prop-types');
-var ui_Label = require('../index-578f0575.js');
-require('../stringSet-388f679a.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/dist/cjs/ui/LinkLabel.js

@@ -1,60 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var PropTypes = require('prop-types');
-var ui_Label = require('../index-578f0575.js');
-require('../stringSet-388f679a.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/dist/cjs/ui/Loader.js

@@ -1,34 +0,0 @@
-'use strict';
-
-var tslib_es6 = require('../tslib.es6-e8acf1b5.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/dist/cjs/ui/MentionLabel.js

@@ -1,104 +0,0 @@
-'use strict';
-
-var React = require('react');
-var ui_ContextMenu = require('./ContextMenu.js');
-var ui_Label = require('../index-578f0575.js');
-var ui_UserProfile = require('./UserProfile.js');
-var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-require('../tslib.es6-e8acf1b5.js');
-require('react-dom');
-require('./SortByRow.js');
-require('../uuid-a94df44e.js');
-require('../index-6714492f.js');
-require('../utils/message/getOutgoingMessageState.js');
-require('prop-types');
-require('../stringSet-388f679a.js');
-require('../LocalizationContext-2fb0be1f.js');
-require('../index-1ec959ab.js');
-require('../UserProfileContext-0549101e.js');
-require('../sendbirdSelectors.js');
-require('../topics-839402ce.js');
-require('../utils-c61c3737.js');
-require('./Avatar.js');
-require('./ImageRenderer.js');
-require('./Icon.js');
-require('./Button.js');
-require('../withSendbird.js');
-require('../_rollupPluginBabelHelpers-e7c78521.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