@sendbird/uikit-react 3.4.9 → 3.5.0-feature-config-rc-0

package/SendbirdProvider.js

@@ -1,23 +1,33 @@
-import { _ as _objectSpread2, a as _defineProperty } from './_rollupPluginBabelHelpers-6bb0305c.js';
-import React__default, { useLayoutEffect, useState, useEffect, useCallback, useContext, createContext, useMemo, useReducer } from 'react';
+import { _ as _objectSpread2 } from './_rollupPluginBabelHelpers-34fc6689.js';
+import React__default, { useLayoutEffect, useState, useEffect, useCallback, useMemo, useReducer } from 'react';
 import { SendbirdSdkContext } from './withSendbird.js';
 import cssVars from 'css-vars-ponyfill';
-import { K } from './index.module-54d57ec3.js';
-import { U as USER_ACTIONS } from './actionTypes-ce6caec1.js';
+import { K } from './index.module-9faf1703.js';
+import { U as USER_ACTIONS } from './actionTypes-3f51c08a.js';
 import SendbirdChat, { ConnectionHandler } from '@sendbird/chat';
-import { u as uuidv4 } from './uuid-1adedf62.js';
+import { u as uuidv4 } from './uuid-eadf9a09.js';
 import { OpenChannelModule } from '@sendbird/chat/openChannel';
 import { GroupChannelModule } from '@sendbird/chat/groupChannel';
-import { i as isTextuallyNull } from './index-7eb65acf.js';
-import { V as VoicePlayerProvider } from './index-5c985608.js';
+import { i as isTextuallyNull } from './index-39f0a98e.js';
+import { UIKitConfigProvider, useUIKitConfig } from '@sendbird/uikit-tools';
+import { V as VoicePlayerProvider } from './index-c54a357d.js';
 import { VoiceRecorderProvider } from './VoiceRecorder/context.js';
-import { L as LocalizationProvider } from './LocalizationContext-076d6d2e.js';
-import { M as MediaQueryProvider } from './MediaQueryContext-11f0e43f.js';
-import { g as getStringSet } from './stringSet-13bbd4a2.js';
-import { V as VOICE_RECORDER_DEFAULT_MAX, a as VOICE_RECORDER_DEFAULT_MIN } from './consts-95d8566e.js';
+import { L as LocalizationProvider } from './LocalizationContext-2a605cc6.js';
+import { M as MediaQueryProvider } from './MediaQueryContext-9a1ce18e.js';
+import { g as getStringSet } from './stringSet-d0b92983.js';
+import { V as VOICE_RECORDER_DEFAULT_MAX, a as VOICE_RECORDER_DEFAULT_MIN } from './consts-bd5c0783.js';
+import { g as getCaseResolvedReplyType, a as getCaseResolvedThreadReplySelectType } from './resolvedReplyType-f5cc6c0b.js';
 import './utils/message/getOutgoingMessageState.js';
 import './useSendbirdStateContext.js';
-import './index-99aabd9e.js';
+import './ui/Modal.js';
+import 'react-dom';
+import './index-a27543ed.js';
+import './ui/Button.js';
+import './index-8fb5d71a.js';
+import 'prop-types';
+import './ui/Icon.js';
+import './ui/IconButton.js';
+import './index-3515f8f3.js';
 
 const isEmpty = obj => {
   if (obj === null || obj === undefined) {
@@ -322,7 +332,7 @@ async function disconnectSdk(_ref) {
   });
 }
 
-const APP_VERSION_STRING = '3.4.9';
+const APP_VERSION_STRING = '3.5.0-feature-config-rc-0';
 const {
   INIT_SDK,
   SET_SDK_LOADING,
@@ -759,181 +769,6 @@ 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 = _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) {
-    _defineProperty(this, "key", void 0);
-    _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__*/createContext({
-  initDashboardConfigs: () => Promise.resolve(),
-  configs: initialConfig
-});
-const UIKitConfigProvider = _ref => {
-  let {
-    storage,
-    children,
-    localConfigs
-  } = _ref;
-  // Set by Feature Config setting in Dashboard
-  const [remoteConfigs, setRemoteConfigs] = useState(initialConfig);
-  const initDashboardConfigs = useCallback(async sdk => {
-    try {
-      if (storage == null) {
-        const payload = await sdk.getUIKitConfiguration();
-        setRemoteConfigs(snakeToCamel(payload.json.uikit_configurations));
-        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));
-        setRemoteConfigs(updatedPayloed.uikitConfigurations);
-      }
-    } catch (error) {
-      //
-    }
-  }, []);
-  const configs = getConfigsByPriority(localConfigs, remoteConfigs);
-  return /*#__PURE__*/React__default.createElement(UIKitConfigContext.Provider, {
-    value: {
-      initDashboardConfigs,
-      configs
-    }
-  }, children);
-};
-const useUIKitConfig = () => useContext(UIKitConfigContext);
-
 const VoiceMessageProvider = _ref => {
   let {
     children,
@@ -1006,11 +841,12 @@ function schedulerFactory(_ref) {
 
 // this hook accepts a callback to run component is unmounted
 function useUnmount(callback) {
+  let deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   useLayoutEffect(() => {
     return () => {
       callback();
     };
-  }, []);
+  }, deps);
 }
 
 function useMarkAsReadScheduler(_ref, _ref2) {
@@ -1079,34 +915,33 @@ function useMarkAsDeliveredScheduler(_ref, _ref2) {
 
 function Sendbird(props) {
   const {
-    replyType = 'NONE',
-    isMentionEnabled = false,
-    isReactionEnabled = true,
-    disableUserProfile = false,
-    isVoiceMessageEnabled = true,
-    isTypingIndicatorEnabledOnChannelList = false,
-    isMessageReceiptStatusEnabledOnChannelList = false
+    replyType,
+    isMentionEnabled,
+    isReactionEnabled,
+    disableUserProfile,
+    isVoiceMessageEnabled,
+    isTypingIndicatorEnabledOnChannelList,
+    isMessageReceiptStatusEnabledOnChannelList,
+    showSearchIcon
   } = props;
   return /*#__PURE__*/React__default.createElement(UIKitConfigProvider, {
     localConfigs: {
       common: {
-        enableUsingDefaultUserProfile: !disableUserProfile
+        enableUsingDefaultUserProfile: typeof disableUserProfile === 'boolean' ? !disableUserProfile : undefined
       },
       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.toLowerCase()
+          replyType: replyType != null ? getCaseResolvedReplyType(replyType).lowerCase : undefined
         },
         channelList: {
           enableTypingIndicator: isTypingIndicatorEnabledOnChannelList,
           enableMessageReceiptStatus: isMessageReceiptStatusEnabledOnChannelList
+        },
+        setting: {
+          enableMessageSearch: showSearchIcon
         }
       }
     }
@@ -1137,9 +972,9 @@ const SendbirdSDK = _ref => {
     allowProfileEdit = false,
     disableMarkAsDelivered = false,
     renderUserProfile = null,
-    onUserProfileMessage = null
+    onUserProfileMessage = null,
+    breakpoint = false
   } = _ref;
-  const breakpoint = false;
   const {
     logLevel = '',
     userMention = {},
@@ -1151,8 +986,11 @@ const SendbirdSDK = _ref => {
   const [userStore, userDispatcher] = useReducer(reducer, initialState);
   const {
     configs,
+    configsWithAppAttr,
     initDashboardConfigs
   } = useUIKitConfig();
+  const sdkInitialized = sdkStore.initialized;
+  const sdk = sdkStore === null || sdkStore === void 0 ? void 0 : sdkStore.sdk;
   useTheme(colorSet);
   const reconnect = useConnect({
     appId,
@@ -1165,11 +1003,21 @@ const SendbirdSDK = _ref => {
     configureSession,
     customApiHost,
     customWebSocketHost,
-    sdk: sdkStore === null || sdkStore === void 0 ? void 0 : sdkStore.sdk,
+    sdk,
     sdkDispatcher,
     userDispatcher,
     initDashboardConfigs
   });
+  useUnmount(() => {
+    if (typeof sdk.disconnect === 'function') {
+      disconnectSdk({
+        logger,
+        sdkDispatcher,
+        userDispatcher,
+        sdk
+      });
+    }
+  }, [sdk.disconnect]);
 
   // to create a pubsub to communicate between parent and child
   useEffect(() => {
@@ -1265,20 +1113,24 @@ const SendbirdSDK = _ref => {
         markAsDeliveredScheduler,
         // From UIKitConfigProvider.localConfigs
         disableUserProfile: !configs.common.enableUsingDefaultUserProfile,
-        isReactionEnabled: configs.groupChannel.channel.enableReactions,
+        isReactionEnabled: sdkInitialized && configsWithAppAttr(sdk).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(),
+        replyType: getCaseResolvedReplyType(configs.groupChannel.channel.replyType).upperCase,
         isTypingIndicatorEnabledOnChannelList: configs.groupChannel.channelList.enableTypingIndicator,
-        isMessageReceiptStatusEnabledOnChannelList: configs.groupChannel.channelList.enableMessageReceiptStatus
-        // TODO(Ahyoung): add more configs from UIKitConfigProvider.remoteConfigs
+        isMessageReceiptStatusEnabledOnChannelList: configs.groupChannel.channelList.enableMessageReceiptStatus,
+        showSearchIcon: sdkInitialized && configsWithAppAttr(sdk).groupChannel.setting.enableMessageSearch,
+        // Remote configs set from dashboard by UIKit feature configuration
+        groupChannel: {
+          enableOgtag: sdkInitialized && configsWithAppAttr(sdk).groupChannel.channel.enableOgtag,
+          enableTypingIndicator: configs.groupChannel.channel.enableTypingIndicator,
+          enableDocument: configs.groupChannel.channel.input.enableDocument,
+          threadReplySelectType: getCaseResolvedThreadReplySelectType(configs.groupChannel.channel.threadReplySelectType).upperCase
+        },
+        openChannel: {
+          enableOgtag: sdkInitialized && configsWithAppAttr(sdk).openChannel.channel.enableOgtag,
+          enableDocument: configs.openChannel.channel.input.enableDocument
+        }
       }
     }
   }, /*#__PURE__*/React__default.createElement(MediaQueryProvider, {