@sendbird/uikit-react 3.10.0 → 3.10.2-alpha.0

package/cjs/chunks/bundle-qRiLsSwC.js

@@ -0,0 +1,153 @@
+'use strict';
+
+var React = require('react');
+var ui_Icon = require('../ui/Icon.js');
+var message = require('@sendbird/chat/message');
+var ui_ImageRenderer = require('../ui/ImageRenderer.js');
+var index = require('./bundle-nox41MG6.js');
+var ui_FileViewer = require('./bundle-NPzNlnHJ.js');
+var index$1 = require('./bundle-xM2DAzE6.js');
+var _tslib = require('./bundle-DhtZdKsr.js');
+
+function ImageGrid(_a) {
+    var _b;
+    var children = _a.children, className = _a.className, message = _a.message, isReactionEnabled = _a.isReactionEnabled;
+    return (React.createElement("div", { className: 'sendbird-image-grid-wrap' },
+        React.createElement("div", { className: index.getClassName([
+                className,
+                'sendbird-image-grid',
+                (isReactionEnabled && ((_b = message === null || message === void 0 ? void 0 : message.reactions) === null || _b === void 0 ? void 0 : _b.length) > 0) ? 'reactions' : '',
+            ]) }, children)));
+}
+
+var GRID_WIDTH_CHAT_WEB = 400;
+var GRID_SIDE_PADDING = 8;
+var GRID_GAP = 4;
+var TIMESTAMP_WIDTH_AND_ITS_SIDE_MARGIN = 54;
+var PROFILE_IMAGE_WIDTH = 40;
+var CHAT_MOBILE_SIDE_PADDING = 48;
+var THREAD_PARENT_WIDTH = 320;
+var THREAD_PARENT_SIDE_PADDING = 28;
+var THREAD_PARENT_GRID_MARGIN_LEFT = 12;
+var THREAD_CHILD_WIDTH = 200;
+var THREAD_CHILD_SIDE_PADDING = 8;
+var THREAD_CHILD_MOBILE_SIDE_PADDING = 32;
+var THREAD_CHILD_MOBILE_TIMESTAMP_WIDTH_AND_ITS_SIDE_MARGIN = 60;
+var MULTIPLE_FILES_IMAGE_SIDE_LENGTH = {
+    CHAT_WEB: "calc(".concat(GRID_WIDTH_CHAT_WEB / 2, "px - ").concat((GRID_SIDE_PADDING + GRID_GAP) / 2, "px)"),
+    CHAT_MOBILE: "calc(50vw - ".concat((CHAT_MOBILE_SIDE_PADDING + PROFILE_IMAGE_WIDTH + TIMESTAMP_WIDTH_AND_ITS_SIDE_MARGIN + GRID_SIDE_PADDING + GRID_GAP) / 2, "px)"),
+    THREAD_PARENT_WEB: "calc(".concat((THREAD_PARENT_WIDTH - (THREAD_PARENT_SIDE_PADDING + PROFILE_IMAGE_WIDTH + THREAD_PARENT_GRID_MARGIN_LEFT + GRID_GAP)) / 2, "px)"),
+    THREAD_PARENT_MOBILE: "calc(50vw - ".concat((THREAD_PARENT_SIDE_PADDING + PROFILE_IMAGE_WIDTH + THREAD_PARENT_GRID_MARGIN_LEFT + GRID_GAP) / 2, "px)"),
+    THREAD_CHILD_WEB: "calc(".concat((THREAD_CHILD_WIDTH - THREAD_CHILD_SIDE_PADDING - GRID_GAP) / 2, "px)"),
+    THREAD_CHILD_MOBILE: "calc(50vw - ".concat((THREAD_CHILD_MOBILE_SIDE_PADDING + PROFILE_IMAGE_WIDTH + THREAD_CHILD_MOBILE_TIMESTAMP_WIDTH_AND_ITS_SIDE_MARGIN + GRID_SIDE_PADDING + GRID_GAP) / 2, "px)"),
+};
+var MULTIPLE_FILES_IMAGE_BORDER_RADIUS = {
+    CHAT_WEB: '6px',
+    CHAT_MOBILE: '6px',
+    THREAD_PARENT_WEB: '6px',
+    THREAD_PARENT_MOBILE: '6px',
+    THREAD_CHILD_WEB: '6px',
+    THREAD_CHILD_MOBILE: '6px',
+};
+var MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH = '34px';
+
+var ThreadMessageKind = {
+    PARENT: 'parent',
+    CHILD: 'child',
+};
+function MultipleFilesMessageItemBody(_a) {
+    var className = _a.className, message$1 = _a.message, _b = _a.isReactionEnabled, isReactionEnabled = _b === void 0 ? false : _b, threadMessageKindKey = _a.threadMessageKindKey, _c = _a.statefulFileInfoList, statefulFileInfoList = _c === void 0 ? [] : _c;
+    var _d = React.useState(-1), currentFileViewerIndex = _d[0], setCurrentFileViewerIndex = _d[1];
+    function onClose() {
+        setCurrentFileViewerIndex(-1);
+    }
+    function onClickLeft() {
+        setCurrentFileViewerIndex(currentFileViewerIndex === 0 ? statefulFileInfoList.length - 1 : currentFileViewerIndex - 1);
+    }
+    function onClickRight() {
+        setCurrentFileViewerIndex(currentFileViewerIndex === statefulFileInfoList.length - 1 ? 0 : currentFileViewerIndex + 1);
+    }
+    return (threadMessageKindKey && (React.createElement(React.Fragment, null,
+        currentFileViewerIndex > -1 && (React.createElement(ui_FileViewer.FileViewer, { message: message$1, statefulFileInfoList: statefulFileInfoList, currentIndex: currentFileViewerIndex, onClickLeft: onClickLeft, onClickRight: onClickRight, onClose: onClose })),
+        React.createElement(ImageGrid, { className: className, message: message$1, isReactionEnabled: isReactionEnabled }, statefulFileInfoList.map(function (fileInfo, index$1) {
+            var _a, _b, _c;
+            return (React.createElement("div", { className: "sendbird-multiple-files-image-renderer-wrapper", onClick: message$1.sendingStatus === message.SendingStatus.SUCCEEDED ? function () { return setCurrentFileViewerIndex(index$1); } : undefined, key: "sendbird-multiple-files-image-renderer-".concat(index$1, "-").concat(fileInfo.url) },
+                React.createElement(ui_ImageRenderer.default, { url: (_c = (_b = (_a = fileInfo.thumbnails) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.url) !== null && _c !== void 0 ? _c : fileInfo.url, fixedSize: false, width: MULTIPLE_FILES_IMAGE_SIDE_LENGTH[threadMessageKindKey], maxSideLength: MULTIPLE_FILES_IMAGE_SIDE_LENGTH.CHAT_WEB, height: MULTIPLE_FILES_IMAGE_SIDE_LENGTH[threadMessageKindKey], borderRadius: ui_ImageRenderer.getBorderRadiusForMultipleImageRenderer(MULTIPLE_FILES_IMAGE_BORDER_RADIUS[threadMessageKindKey], index$1, statefulFileInfoList.length), shadeOnHover: true, isUploaded: !!fileInfo.isUploaded, placeHolder: function (_a) {
+                        var style = _a.style;
+                        if (index.isGif(fileInfo.mimeType))
+                            return React.createElement(ImagePlaceholder.GIF, { style: style });
+                        return React.createElement(ImagePlaceholder.Default, { style: style });
+                    }, defaultComponent: React.createElement(ImagePlaceholder.LoadError, null) })));
+        })))));
+}
+var ImagePlaceholder = {
+    Default: function (_a) {
+        var style = _a.style;
+        return (React.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder", style: style },
+            React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.PHOTO, fillColor: ui_Icon.IconColors.ON_BACKGROUND_2, width: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH, height: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH })));
+    },
+    GIF: function (_a) {
+        var style = _a.style;
+        return (React.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder", style: style },
+            React.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder__icon" },
+                React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.GIF, fillColor: ui_Icon.IconColors.THUMBNAIL_ICON, width: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH, height: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH }))));
+    },
+    LoadError: function () { return (React.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder" },
+        React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.THUMBNAIL_NONE, fillColor: ui_Icon.IconColors.ON_BACKGROUND_2, width: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH, height: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH }))); },
+};
+
+function useThreadMessageKindKeySelector(_a) {
+    var threadMessageKind = _a.threadMessageKind, isMobile = _a.isMobile;
+    var threadMessageKindKey = React.useMemo(function () {
+        return index$1.K(threadMessageKind)
+            .with(ThreadMessageKind.PARENT, function () { return (isMobile
+            ? 'THREAD_PARENT_MOBILE'
+            : 'THREAD_PARENT_WEB'); })
+            .with(ThreadMessageKind.CHILD, function () { return (isMobile
+            ? 'THREAD_CHILD_MOBILE'
+            : 'THREAD_CHILD_WEB'); })
+            .otherwise(function () { return (isMobile
+            ? 'CHAT_MOBILE'
+            : 'CHAT_WEB'); });
+    }, [isMobile, threadMessageKind]);
+    return threadMessageKindKey;
+}
+
+// SendingStatus.SCHEDULED is currently not covered in UIKit
+//  So we can ignore for now, but for future, it is better to explicitly use PENDING, FAILED, or CANCELED.
+var useFileInfoListWithUploaded = function (message$1) {
+    var blobHandler = React.useRef(new Map());
+    var getObjectURL = function (index, blob) {
+        if (!blobHandler.current.has(index) && blob)
+            blobHandler.current.set(index, URL.createObjectURL(blob));
+        return blobHandler.current.get(index);
+    };
+    var revokeURLs = function () {
+        if (blobHandler.current.size > 0) {
+            blobHandler.current.forEach(function (url) { return URL.revokeObjectURL(url); });
+            blobHandler.current.clear();
+        }
+    };
+    React.useEffect(function () {
+        return function () { return revokeURLs(); };
+    }, []);
+    if (!message$1 || !message$1.isMultipleFilesMessage || !message$1.isMultipleFilesMessage()) {
+        return [];
+    }
+    else if (message$1.sendingStatus === message.SendingStatus.SUCCEEDED) {
+        revokeURLs();
+        return message$1.fileInfoList.map(function (it) { return (_tslib.__assign(_tslib.__assign({}, it), { url: it.url, isUploaded: true })); });
+    }
+    else {
+        return message$1.messageParams.fileInfoList.map(function (it, index) {
+            var _a, _b;
+            return (_tslib.__assign(_tslib.__assign({}, it), { url: (_b = (_a = getObjectURL(index)) !== null && _a !== void 0 ? _a : it.fileUrl) !== null && _b !== void 0 ? _b : (it.file instanceof Blob ? getObjectURL(index, it.file) : undefined), isUploaded: !it.file && typeof it.fileUrl === 'string' && it.fileUrl.length > 0 }));
+        });
+    }
+};
+
+exports.MultipleFilesMessageItemBody = MultipleFilesMessageItemBody;
+exports.ThreadMessageKind = ThreadMessageKind;
+exports.useFileInfoListWithUploaded = useFileInfoListWithUploaded;
+exports.useThreadMessageKindKeySelector = useThreadMessageKindKeySelector;
+//# sourceMappingURL=bundle-qRiLsSwC.js.map

package/cjs/chunks/bundle-qRiLsSwC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-qRiLsSwC.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/bundle-rcw3KtAu.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var React = require('react');
+var ChannelList_context = require('./bundle-zGSEOOdl.js');
+var ui_IconButton = require('../ui/IconButton.js');
+var ui_Icon = require('../ui/Icon.js');
+var CreateChannel = require('../CreateChannel.js');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+
+var AddGroupChannelView = function (_a) {
+    var createChannelVisible = _a.createChannelVisible, onChangeCreateChannelVisible = _a.onChangeCreateChannelVisible, onBeforeCreateChannel = _a.onBeforeCreateChannel, onCreateChannelClick = _a.onCreateChannelClick, onChannelCreated = _a.onChannelCreated;
+    var config = useSendbirdStateContext.useSendbirdStateContext().config;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ui_IconButton, { height: '32px', width: '32px', disabled: !config.isOnline, onClick: function () { return onChangeCreateChannelVisible(true); } },
+            React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.CREATE, fillColor: ui_Icon.IconColors.PRIMARY, width: '24px', height: '24px' })),
+        createChannelVisible && (React.createElement(CreateChannel, { onCancel: function () { return onChangeCreateChannelVisible(false); }, onChannelCreated: function (channel) {
+                onChannelCreated === null || onChannelCreated === void 0 ? void 0 : onChannelCreated(channel);
+                onChangeCreateChannelVisible(false);
+            }, onBeforeCreateChannel: onBeforeCreateChannel, onCreateChannelClick: onCreateChannelClick }))));
+};
+
+var AddChannel = function () {
+    var _a = React.useState(false), showModal = _a[0], setShowModal = _a[1];
+    var _b = ChannelList_context.useChannelListContext(), overrideInviteUser = _b.overrideInviteUser, onBeforeCreateChannel = _b.onBeforeCreateChannel, onChannelSelect = _b.onChannelSelect;
+    return (React.createElement(AddGroupChannelView, { createChannelVisible: showModal, onChangeCreateChannelVisible: setShowModal, onCreateChannelClick: overrideInviteUser, onBeforeCreateChannel: onBeforeCreateChannel, onChannelCreated: onChannelSelect }));
+};
+
+exports.AddChannel = AddChannel;
+exports.AddGroupChannelView = AddGroupChannelView;
+//# sourceMappingURL=bundle-rcw3KtAu.js.map

package/cjs/chunks/bundle-rcw3KtAu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-rcw3KtAu.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-NZXUf6_L.js → bundle-s--ExKtj.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var ui_Label = require('./bundle-wDJ0vmp7.js');
+var ui_Label = require('./bundle-VxcYXhwp.js');
 
 var getChannelTitle = function (channel, currentUserId, stringSet) {
     var _a;
@@ -24,4 +24,4 @@ var getChannelTitle = function (channel, currentUserId, stringSet) {
 };
 
 exports.getChannelTitle = getChannelTitle;
-//# sourceMappingURL=bundle-NZXUf6_L.js.map
+//# sourceMappingURL=bundle-s--ExKtj.js.map

package/cjs/chunks/bundle-s--ExKtj.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-s--ExKtj.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-XIMyjFuW.js → bundle-t2GWOYzL.js}

@@ -2,10 +2,10 @@
 
 var React = require('react');
 var DOMPurify = require('dompurify');
-var _tslib = require('./bundle-UHsDbhGB.js');
-var consts = require('./bundle-85IKKe_e.js');
-var consts$2 = require('./bundle-s5Lt0vKF.js');
-var consts$1 = require('./bundle-jayPpL4B.js');
+var _tslib = require('./bundle-DhtZdKsr.js');
+var consts = require('./bundle-nYBtJl9e.js');
+var consts$2 = require('./bundle-RUqSDidW.js');
+var consts$1 = require('./bundle-0zagc7hR.js');
 
 function renderToString(_a) {
     var userId = _a.userId, nickname = _a.nickname;
@@ -214,4 +214,4 @@ exports.nodeListToArray = nodeListToArray;
 exports.renderToString = renderToString;
 exports.sanitizeString = sanitizeString;
 exports.usePaste = usePaste;
-//# sourceMappingURL=bundle-XIMyjFuW.js.map
+//# sourceMappingURL=bundle-t2GWOYzL.js.map

package/{chunks/bundle-Abz9zH51.js.map → cjs/chunks/bundle-t2GWOYzL.js.map}

@@ -1 +1 @@
-{"version":3,"file":"bundle-Abz9zH51.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"bundle-t2GWOYzL.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-LWd8plnK.js → bundle-tntEm-Mv.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./bundle-lk7syGfV.js');
+var index = require('./bundle-AN4eZ2xs.js');
 
 function _typeof(o) {
   "@babel/helpers - typeof";
@@ -18,6 +18,43 @@ function requiredArgs(required, args) {
   }
 }
 
+/**
+ * @name isDate
+ * @category Common Helpers
+ * @summary Is the given value a date?
+ *
+ * @description
+ * Returns true if the given value is an instance of Date. The function works for dates transferred across iframes.
+ *
+ * @param {*} value - the value to check
+ * @returns {boolean} true if the given value is a date
+ * @throws {TypeError} 1 arguments required
+ *
+ * @example
+ * // For a valid date:
+ * const result = isDate(new Date())
+ * //=> true
+ *
+ * @example
+ * // For an invalid date:
+ * const result = isDate(new Date(NaN))
+ * //=> true
+ *
+ * @example
+ * // For some value:
+ * const result = isDate('2014-02-31')
+ * //=> false
+ *
+ * @example
+ * // For an object:
+ * const result = isDate({})
+ * //=> false
+ */
+function isDate(value) {
+  requiredArgs(1, arguments);
+  return value instanceof Date || _typeof(value) === 'object' && Object.prototype.toString.call(value) === '[object Date]';
+}
+
 /**
  * @name toDate
  * @category Common Helpers
@@ -69,43 +106,6 @@ function toDate(argument) {
   }
 }
 
-/**
- * @name isDate
- * @category Common Helpers
- * @summary Is the given value a date?
- *
- * @description
- * Returns true if the given value is an instance of Date. The function works for dates transferred across iframes.
- *
- * @param {*} value - the value to check
- * @returns {boolean} true if the given value is a date
- * @throws {TypeError} 1 arguments required
- *
- * @example
- * // For a valid date:
- * const result = isDate(new Date())
- * //=> true
- *
- * @example
- * // For an invalid date:
- * const result = isDate(new Date(NaN))
- * //=> true
- *
- * @example
- * // For some value:
- * const result = isDate('2014-02-31')
- * //=> false
- *
- * @example
- * // For an object:
- * const result = isDate({})
- * //=> false
- */
-function isDate(value) {
-  requiredArgs(1, arguments);
-  return value instanceof Date || _typeof(value) === 'object' && Object.prototype.toString.call(value) === '[object Date]';
-}
-
 /**
  * @name isValid
  * @category Common Helpers
@@ -1716,4 +1716,4 @@ exports.format = format;
 exports.requiredArgs = requiredArgs;
 exports.toDate = toDate;
 exports.toInteger = toInteger;
-//# sourceMappingURL=bundle-LWd8plnK.js.map
+//# sourceMappingURL=bundle-tntEm-Mv.js.map