@sendbird/uikit-react 3.5.0-mobile-web-0 → 3.5.0-mobile-rc-2

package/cjs/SendbirdProvider.js

@@ -1,25 +1,33 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-919a4db3.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-36df1dd2.js');
 var React = require('react');
 var withSendbird = require('./withSendbird.js');
 var cssVars = require('css-vars-ponyfill');
-var index_module = require('./index.module-10ef9afc.js');
-var actionTypes = require('./actionTypes-1e75e6e9.js');
+var index_module = require('./index.module-76c961aa.js');
+var actionTypes = require('./actionTypes-a970787b.js');
 var SendbirdChat = require('@sendbird/chat');
-var uuid = require('./uuid-d86ea01f.js');
+var uuid = require('./uuid-982f480d.js');
 var openChannel = require('@sendbird/chat/openChannel');
 var groupChannel = require('@sendbird/chat/groupChannel');
-var index = require('./index-bca3d144.js');
-var VoicePlayer_context = require('./index-6a46ed00.js');
+var index = require('./index-afdcc71c.js');
+var VoicePlayer_context = require('./index-7f58f1fb.js');
 var VoiceRecorder_context = require('./VoiceRecorder/context.js');
-var LocalizationContext = require('./LocalizationContext-461a0816.js');
-var MediaQueryContext = require('./MediaQueryContext-de7c63bc.js');
-var stringSet = require('./stringSet-d1cee26a.js');
-var consts = require('./consts-6f02fcc4.js');
+var LocalizationContext = require('./LocalizationContext-08e5c17b.js');
+var MediaQueryContext = require('./MediaQueryContext-456e731e.js');
+var stringSet = require('./stringSet-f096ea52.js');
+var consts = require('./consts-df560049.js');
 require('./utils/message/getOutgoingMessageState.js');
 require('./useSendbirdStateContext.js');
-require('./index-5e6194f8.js');
+require('./ui/Modal.js');
+require('react-dom');
+require('./index-43dc753a.js');
+require('./ui/Button.js');
+require('./index-dc79adcc.js');
+require('prop-types');
+require('./ui/Icon.js');
+require('./ui/IconButton.js');
+require('./index-66390034.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -302,121 +310,6 @@ function useConnectionStatus(sdk, logger) {
   return isOnline;
 }
 
-function snakeToCamel(obj) {
-  if (typeof obj !== 'object' || obj === null) {
-    return obj;
-  }
-  if (Array.isArray(obj)) {
-    return obj.map(item => snakeToCamel(item));
-  }
-  const result = {};
-  Object.keys(obj).forEach(key => {
-    const camelKey = key.replace(/_\w/g, m => m[1].toUpperCase());
-    result[camelKey] = snakeToCamel(obj[key]);
-  });
-  return result;
-}
-
-// @link: https://docs.google.com/spreadsheets/d/1-AozBMHRYOXS74vZ-7x2ptQcBL6nnM-orJWRvUgmkd4/edit#gid=0
-const initialConfig = {
-  common: {
-    enableUsingDefaultUserProfile: false
-  },
-  groupChannel: {
-    channel: {
-      enableMention: false,
-      enableOgtag: true,
-      enableReactions: true,
-      enableTypingIndicator: true,
-      enableVoiceMessage: false,
-      input: {
-        camera: {
-          enablePhoto: true,
-          enableVideo: true
-        },
-        enableDocument: true,
-        gallery: {
-          enablePhoto: true,
-          enableVideo: true
-        }
-      },
-      replyType: 'quote_reply',
-      threadReplySelectType: 'thread'
-    },
-    channelList: {
-      enableMessageReceiptStatus: false,
-      enableTypingIndicator: false
-    },
-    setting: {
-      enableMessageSearch: false
-    }
-  },
-  openChannel: {
-    channel: {
-      enableOgtag: true,
-      input: {
-        camera: {
-          enablePhoto: true,
-          enableVideo: true
-        },
-        enableDocument: true,
-        gallery: {
-          enablePhoto: true,
-          enableVideo: true
-        }
-      }
-    }
-  }
-};
-const UIKitConfigContext = /*#__PURE__*/React.createContext({
-  initDashboardConfigs: () => Promise.resolve(),
-  configs: initialConfig
-});
-const UIKitConfigProvider = _ref => {
-  let {
-    storage,
-    children /* appConfigurations */
-  } = _ref;
-  // TODO: Implement
-  // const localConfigs = mergeConfigs(initialConfig, mapToUIKItConfig(configurations));
-  const [remoteConfigs, setRemoteConfigs] = React.useState(initialConfig);
-  const initDashboardConfigs = React.useCallback(async sdk => {
-    try {
-      // TODO: Implement
-      // const manager = new UIKitConfigStorageManager(storage)
-      // const storedConfigs = await manager.init(sdk.appId);
-
-      if (storage == null) {
-        const payload = await sdk.getUIKitConfiguration().json;
-        setRemoteConfigs(snakeToCamel(payload.uikit_configurations));
-      }
-
-      // TODO: Implement
-      // Compare the sdk uikitConfig's lastUpdatedAt <-> stored one
-      // if(sdk.appInfo.uikitConfigInfo.lastUpdatedAt === storedConfigs.lastUpdatedAt) {
-      //   setRemoteConfigs(storedConfigs);
-      // } else {
-      //   const newConfigs = await sdk.getUIKitConfig();
-      //   const updatedConfigs = await manager.update(newConfigs);
-      //   setRemoteConfigs(updatedConfigs);
-      // }
-    } catch (error) {
-      //
-    }
-  }, []);
-
-  // TODO: Implement
-  // const configs = getByPriority(localConfigs, remoteConfigs);
-  const configs = remoteConfigs;
-  return /*#__PURE__*/React__default["default"].createElement(UIKitConfigContext.Provider, {
-    value: {
-      initDashboardConfigs,
-      configs
-    }
-  }, children);
-};
-const useUIKitConfig = () => React.useContext(UIKitConfigContext);
-
 async function disconnectSdk(_ref) {
   let {
     sdkDispatcher,
@@ -445,7 +338,7 @@ async function disconnectSdk(_ref) {
   });
 }
 
-const APP_VERSION_STRING = '3.5.0-mobile-web-0';
+const APP_VERSION_STRING = '3.5.0-mobile-rc-2';
 const {
   INIT_SDK,
   SET_SDK_LOADING,
@@ -684,12 +577,10 @@ function useConnect(triggerTypes, staticTypes) {
     customWebSocketHost,
     sdk,
     sdkDispatcher,
-    userDispatcher
+    userDispatcher,
+    initDashboardConfigs
   } = staticTypes;
   logger === null || logger === void 0 ? void 0 : (_logger$info = logger.info) === null || _logger$info === void 0 ? void 0 : _logger$info.call(logger, 'SendbirdProvider | useConnect', _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, triggerTypes), staticTypes));
-  const {
-    initDashboardConfigs
-  } = useUIKitConfig();
   React.useEffect(() => {
     var _logger$info2;
     logger === null || logger === void 0 ? void 0 : (_logger$info2 = logger.info) === null || _logger$info2 === void 0 ? void 0 : _logger$info2.call(logger, 'SendbirdProvider | useConnect/useEffect', {
@@ -884,6 +775,181 @@ function useAppendDomNode() {
   }, []);
 }
 
+function snakeToCamel(obj) {
+  if (typeof obj !== 'object' || obj === null) {
+    return obj;
+  }
+  if (Array.isArray(obj)) {
+    return obj.map(item => snakeToCamel(item));
+  }
+  const result = {};
+  Object.keys(obj).forEach(key => {
+    const camelKey = key.replace(/_\w/g, m => m[1].toUpperCase());
+    result[camelKey] = snakeToCamel(obj[key]);
+  });
+  return result;
+}
+
+// @link https://gist.github.com/navix/6c25c15e0a2d3cd0e5bce999e0086fc9
+/* eslint-disable @typescript-eslint/ban-types */
+
+function isSameType(a, b) {
+  // we do this cause typeof can't differenciate object/ array/ null
+  return Object.prototype.toString.call(a) === Object.prototype.toString.call(b);
+}
+
+/**
+ * @param localConfigs Set directly in code level. It has higher priority than remote ones
+ * @param remoteConfigs Set by Feature Config setting in Dashboard
+ * @returns
+ */
+function getConfigsByPriority(localConfigs, remoteConfigs) {
+  const prioritizedConfigs = _rollupPluginBabelHelpers._objectSpread2({}, remoteConfigs); // copy remoteConfigs to prevent mutation
+
+  Object.keys(localConfigs).forEach(key => {
+    if (prioritizedConfigs.hasOwnProperty(key) && isSameType(localConfigs[key], prioritizedConfigs[key])) {
+      prioritizedConfigs[key] = typeof localConfigs[key] === 'object'
+      // Recursively call getConfigsByPriority only when the value of the key is Object
+      ? getConfigsByPriority(localConfigs[key], prioritizedConfigs[key]) : localConfigs[key];
+    }
+  });
+  return prioritizedConfigs;
+}
+
+// @link: https://docs.google.com/spreadsheets/d/1-AozBMHRYOXS74vZ-7x2ptQcBL6nnM-orJWRvUgmkd4/edit#gid=0
+const initialConfig = {
+  common: {
+    enableUsingDefaultUserProfile: false
+  },
+  groupChannel: {
+    channel: {
+      enableMention: false,
+      enableOgtag: true,
+      enableReactions: true,
+      enableTypingIndicator: true,
+      enableVoiceMessage: false,
+      input: {
+        camera: {
+          enablePhoto: true,
+          enableVideo: true
+        },
+        enableDocument: true,
+        gallery: {
+          enablePhoto: true,
+          enableVideo: true
+        }
+      },
+      replyType: 'quote_reply',
+      threadReplySelectType: 'thread'
+    },
+    channelList: {
+      enableMessageReceiptStatus: false,
+      enableTypingIndicator: false
+    },
+    setting: {
+      enableMessageSearch: false
+    }
+  },
+  openChannel: {
+    channel: {
+      enableOgtag: true,
+      input: {
+        camera: {
+          enablePhoto: true,
+          enableVideo: true
+        },
+        enableDocument: true,
+        gallery: {
+          enablePhoto: true,
+          enableVideo: true
+        }
+      }
+    }
+  }
+};
+
+class UIKitConfigStorageManager {
+  constructor(storage) {
+    _rollupPluginBabelHelpers._defineProperty(this, "key", void 0);
+    _rollupPluginBabelHelpers._defineProperty(this, "storage", void 0);
+    this.storage = storage;
+  }
+  init(appId) {
+    this.key = `sbu@${appId}.uikitConfiguration`;
+    return this.get();
+  }
+  async update(payload) {
+    const storedConfig = await this.get();
+    const mergedConfig = {
+      lastUpdatedAt: payload.lastUpdatedAt,
+      uikitConfigurations: getConfigsByPriority(payload === null || payload === void 0 ? void 0 : payload.uikitConfigurations, storedConfig === null || storedConfig === void 0 ? void 0 : storedConfig.uikitConfigurations)
+    };
+    await this.storage.setItem(this.key, JSON.stringify(mergedConfig));
+    return mergedConfig;
+  }
+  async get() {
+    const initialPayload = {
+      lastUpdatedAt: 0,
+      uikitConfigurations: initialConfig
+    };
+    try {
+      const storedConfig = await this.storage.getItem(this.key);
+      if (storedConfig) {
+        // TODO: Validation
+        return JSON.parse(storedConfig);
+      } else {
+        return initialPayload;
+      }
+    } catch (_unused) {
+      return initialPayload;
+    }
+  }
+}
+
+const UIKitConfigContext = /*#__PURE__*/React.createContext({
+  initDashboardConfigs: () => Promise.resolve(),
+  configs: initialConfig
+});
+const UIKitConfigProvider = _ref => {
+  let {
+    storage,
+    children,
+    localConfigs
+  } = _ref;
+  // Set by Feature Config setting in Dashboard
+  const [remoteConfigs, setRemoteConfigs] = React.useState(initialConfig);
+  const initDashboardConfigs = React.useCallback(async sdk => {
+    try {
+      if (storage == null) {
+        const payload = await sdk.getUIKitConfiguration();
+        setRemoteConfigs(snakeToCamel(payload.json).configuration.uikitConfigurations);
+        return;
+      }
+
+      // Compare the sdk uikitConfig's lastUpdatedAt <-> stored one
+      const manager = new UIKitConfigStorageManager(storage);
+      const storedConfigs = await manager.init(sdk.appId);
+      if (sdk.appInfo.uikitConfigInfo.lastUpdatedAt === storedConfigs.lastUpdatedAt) {
+        setRemoteConfigs(storedConfigs.uikitConfigurations);
+      } else {
+        const payload = await sdk.getUIKitConfiguration();
+        const updatedPayloed = await manager.update(snakeToCamel(payload.json).configuration);
+        setRemoteConfigs(updatedPayloed.uikitConfigurations);
+      }
+    } catch (error) {
+      //
+    }
+  }, []);
+  const configs = getConfigsByPriority(localConfigs, remoteConfigs);
+  return /*#__PURE__*/React__default["default"].createElement(UIKitConfigContext.Provider, {
+    value: {
+      initDashboardConfigs,
+      configs
+    }
+  }, children);
+};
+const useUIKitConfig = () => React.useContext(UIKitConfigContext);
+
 const VoiceMessageProvider = _ref => {
   let {
     children,
@@ -1027,7 +1093,42 @@ function useMarkAsDeliveredScheduler(_ref, _ref2) {
   return markAsDeliveredScheduler;
 }
 
-const Sendbird = _ref => {
+function Sendbird(props) {
+  const {
+    replyType,
+    isMentionEnabled,
+    isReactionEnabled,
+    disableUserProfile,
+    isVoiceMessageEnabled,
+    isTypingIndicatorEnabledOnChannelList,
+    isMessageReceiptStatusEnabledOnChannelList
+  } = props;
+  return /*#__PURE__*/React__default["default"].createElement(UIKitConfigProvider, {
+    localConfigs: {
+      common: {
+        enableUsingDefaultUserProfile: !disableUserProfile
+      },
+      groupChannel: {
+        channel: {
+          enableReactions: isReactionEnabled,
+          enableMention: isMentionEnabled,
+          enableVoiceMessage: isVoiceMessageEnabled,
+          /**
+           * Since dashbord UIKit Configuration's replyType is consisted of all lowercase letters,
+           * we convert it from here.
+           * i.e. 'THREAD' -> 'thread'
+           */
+          replyType: replyType == null ? initialConfig.groupChannel.channel.replyType : replyType.toLowerCase()
+        },
+        channelList: {
+          enableTypingIndicator: isTypingIndicatorEnabledOnChannelList,
+          enableMessageReceiptStatus: isMessageReceiptStatusEnabledOnChannelList
+        }
+      }
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(SendbirdSDK, props));
+}
+const SendbirdSDK = _ref => {
   let {
     appId,
     userId,
@@ -1041,7 +1142,6 @@ const Sendbird = _ref => {
     nickname = '',
     colorSet = null,
     stringSet: stringSet$1 = null,
-    replyType = 'NONE',
     dateLocale = null,
     profileUrl = '',
     voiceRecord = {
@@ -1051,17 +1151,11 @@ const Sendbird = _ref => {
     userListQuery = null,
     imageCompression = {},
     allowProfileEdit = false,
-    isMentionEnabled = false,
-    isReactionEnabled = true,
-    disableUserProfile = false,
-    isVoiceMessageEnabled = true,
     disableMarkAsDelivered = false,
-    isTypingIndicatorEnabledOnChannelList = false,
-    isMessageReceiptStatusEnabledOnChannelList = false,
     renderUserProfile = null,
-    onUserProfileMessage = null
+    onUserProfileMessage = null,
+    breakpoint = false
   } = _ref;
-  const mediaQueryBreakPoint = false;
   const {
     logLevel = '',
     userMention = {},
@@ -1071,6 +1165,10 @@ const Sendbird = _ref => {
   const [pubSub] = React.useState(pubSubFactory());
   const [sdkStore, sdkDispatcher] = React.useReducer(reducer$1, initialState$1);
   const [userStore, userDispatcher] = React.useReducer(reducer, initialState);
+  const {
+    configs,
+    initDashboardConfigs
+  } = useUIKitConfig();
   useTheme(colorSet);
   const reconnect = useConnect({
     appId,
@@ -1085,7 +1183,8 @@ const Sendbird = _ref => {
     customWebSocketHost,
     sdk: sdkStore === null || sdkStore === void 0 ? void 0 : sdkStore.sdk,
     sdkDispatcher,
-    userDispatcher
+    userDispatcher,
+    initDashboardConfigs
   });
 
   // to create a pubsub to communicate between parent and child
@@ -1145,22 +1244,6 @@ const Sendbird = _ref => {
     }
     return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, stringSet.getStringSet('en')), stringSet$1);
   }, [stringSet$1]);
-  const uikitConfigurations = {
-    // common.enable_using_default_user_profile
-    disableUserProfile,
-    // group_channel.enable_reactions
-    isReactionEnabled,
-    // group_channel.enable_mention
-    isMentionEnabled: isMentionEnabled || false,
-    // group_channel.enable_voice_message
-    isVoiceMessageEnabled,
-    // group_channel.reply_type
-    replyType,
-    // group_channel_list.enable_typing_indicator
-    isTypingIndicatorEnabledOnChannelList,
-    // group_channel_list.enable_message_receipt_status
-    isMessageReceiptStatusEnabledOnChannelList
-  };
   return /*#__PURE__*/React__default["default"].createElement(withSendbird.SendbirdSdkContext.Provider, {
     value: {
       stores: {
@@ -1172,7 +1255,7 @@ const Sendbird = _ref => {
         userDispatcher,
         reconnect
       },
-      config: _rollupPluginBabelHelpers._objectSpread2({
+      config: {
         disableMarkAsDelivered,
         renderUserProfile,
         onUserProfileMessage,
@@ -1195,41 +1278,40 @@ const Sendbird = _ref => {
           maxSuggestionCount: (userMention === null || userMention === void 0 ? void 0 : userMention.maxSuggestionCount) || 15
         },
         markAsReadScheduler,
-        markAsDeliveredScheduler
-      }, uikitConfigurations)
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(UIKitConfigProvider, {
-    appConfigurations: {
-      common: {
-        enableUsingDefaultUserProfile: !uikitConfigurations.disableUserProfile
-      },
-      groupChannel: {
-        channel: {
-          enableReactions: uikitConfigurations.isReactionEnabled,
-          enableMention: uikitConfigurations.isMentionEnabled,
-          enableVoiceMessage: uikitConfigurations.isVoiceMessageEnabled,
-          /**
-           * Since dashbord UIKit Configuration's replyType is consisted of all lowercase letters,
-           * we convert it from here.
-           * i.e. 'THREAD' -> 'thread'
-           */
-          replyType: uikitConfigurations.replyType.toLowerCase()
+        markAsDeliveredScheduler,
+        // From UIKitConfigProvider.localConfigs
+        disableUserProfile: !configs.common.enableUsingDefaultUserProfile,
+        isReactionEnabled: configs.groupChannel.channel.enableReactions,
+        isMentionEnabled: configs.groupChannel.channel.enableMention,
+        isVoiceMessageEnabled: configs.groupChannel.channel.enableVoiceMessage,
+        replyType:
+        /**
+         * Since UIKitConfigContext's replyType is consisted of all lowercase letters,
+         * we need to convert it into all uppercase ones like
+         *  - 'thread' -> 'THREAD'
+         *  - 'quote_reply' -> 'QUOTE_REPLY'
+         */
+        configs.groupChannel.channel.replyType.toUpperCase(),
+        isTypingIndicatorEnabledOnChannelList: configs.groupChannel.channelList.enableTypingIndicator,
+        isMessageReceiptStatusEnabledOnChannelList: configs.groupChannel.channelList.enableMessageReceiptStatus,
+        // Remote configs set from dashboard by UIKit feature configuration
+        groupChannel: {
+          enableOgtag: configs.groupChannel.channel.enableOgtag
         },
-        channelList: {
-          enableTypingIndicator: uikitConfigurations.isTypingIndicatorEnabledOnChannelList,
-          enableMessageReceiptStatus: uikitConfigurations.isMessageReceiptStatusEnabledOnChannelList
+        openChannel: {
+          enableOgtag: configs.openChannel.channel.enableOgtag
         }
       }
     }
   }, /*#__PURE__*/React__default["default"].createElement(MediaQueryContext.MediaQueryProvider, {
     logger: logger,
-    mediaQueryBreakPoint: mediaQueryBreakPoint
+    breakpoint: breakpoint
   }, /*#__PURE__*/React__default["default"].createElement(LocalizationContext.LocalizationProvider, {
     stringSet: localeStringSet,
     dateLocale: dateLocale
   }, /*#__PURE__*/React__default["default"].createElement(VoiceMessageProvider, {
-    isVoiceMessageEnabled: isVoiceMessageEnabled
-  }, children)))));
+    isVoiceMessageEnabled: configs.groupChannel.channel.enableVoiceMessage
+  }, children))));
 };
 
 module.exports = Sendbird;