chore: example: add message context menu and input bar menu screen

Author: AsteriskZuo

example/src/demo/App.tsx

@@ -51,8 +51,10 @@ import {
   ImageMessagePreviewScreen,
   LanguageSettingScreen,
   LoginV2Screen,
+  MessageContextMenuSettingScreen,
   MessageForwardSelectorScreen,
   MessageHistoryListScreen,
+  MessageInputBarMenuSettingScreen,
   MessageSearchScreen,
   MessageThreadListScreen,
   MessageThreadMemberListScreen,
@@ -122,6 +124,7 @@ export function App() {
     onSystemTip,
     getNaviTheme,
     messageMenuStyleRef,
+    messageInputBarExtensionStyleRef,
   } = useApp();
 
   const { getEnableDNSConfig, getImPort, getImServer } = useServerConfig();
@@ -332,6 +335,7 @@ export function App() {
         onUsersHandler={onUsersHandler}
         AvatarStatusRender={AvatarStatusRenderMemo}
         messageMenuStyle={messageMenuStyleRef.current}
+        messageInputBarStyle={messageInputBarExtensionStyleRef.current}
         // formatTime={formatTime}
         // recallTimeout={1200}
         // group={{ createGroupMemberLimit: 2 }}
@@ -687,6 +691,20 @@ export function App() {
                 }}
                 component={PrivacySettingScreen}
               />
+              <Root.Screen
+                name={'MessageContextMenuSetting'}
+                options={{
+                  headerShown: false,
+                }}
+                component={MessageContextMenuSettingScreen}
+              />
+              <Root.Screen
+                name={'MessageInputBarMenuSetting'}
+                options={{
+                  headerShown: false,
+                }}
+                component={MessageInputBarMenuSettingScreen}
+              />
             </Root.Navigator>
           </NavigationContainer>
 

example/src/demo/common/StringSet.cn.tsx

@@ -85,12 +85,24 @@ export function createStringSetCn(): StringSet {
     '_demo_general_setting_feature': '特性开关',
     '_demo_general_setting_language': '系统语言',
     '_demo_general_setting_translation_language': '翻译目标语言',
+    '_demo_general_setting_message_menu': '消息上下文菜单样式',
+    '_demo_general_setting_message_input_menu': '消息附件扩展菜单样式',
 
     '_demo_language_setting_navi_title': '系统语言',
     '_demo_language_setting_navi_confim': '完成',
     '_demo_language_setting_language_cn': '中文',
     '_demo_language_setting_language_en': 'English',
 
+    '_demo_message_context_menu_setting_navi_title': '消息上下文菜单样式',
+    '_demo_message_context_menu_setting_navi_confim': '完成',
+    '_demo_message_context_menu_setting_style1': '样式1',
+    '_demo_message_context_menu_setting_style2': '样式2',
+
+    '_demo_message_input_bar_menu_setting_navi_title': '消息附件扩展菜单样式',
+    '_demo_message_input_bar_menu_setting_navi_confim': '完成',
+    '_demo_message_input_bar_menu_setting_style1': '样式1',
+    '_demo_message_input_bar_menu_setting_style2': '样式2',
+
     '_demo_style_setting_navi_title': '主题',
     '_demo_about_title': (accountType) =>
       accountType === 'agora' ? '声网 IM' : '环信 IM',
@@ -170,5 +182,7 @@ export function createStringSetCn(): StringSet {
     'zh-Hans': '中文',
     'classic': '经典',
     'modern': '现代',
+    'style1': '样式1',
+    'style2': '样式2',
   };
 }

example/src/demo/common/StringSet.en.tsx

@@ -88,12 +88,25 @@ export function createStringSetEn(): StringSet {
     '_demo_general_setting_feature': 'Advanced Features',
     '_demo_general_setting_language': 'System Language',
     '_demo_general_setting_translation_language': 'Translation Target Language',
+    '_demo_general_setting_message_menu': 'Message Context Menu Style',
+    '_demo_general_setting_message_input_menu': 'Message Input Bar Menu Style',
 
     '_demo_language_setting_navi_title': 'System Language',
     '_demo_language_setting_navi_confim': 'Done',
     '_demo_language_setting_language_cn': '中文',
     '_demo_language_setting_language_en': 'English',
 
+    '_demo_message_context_menu_setting_navi_title':
+      'Message Context Menu Style',
+    '_demo_message_context_menu_setting_navi_confim': 'Done',
+    '_demo_message_context_menu_setting_style1': 'Style 1',
+    '_demo_message_context_menu_setting_style2': 'Style 2',
+
+    '_demo_message_input_bar_menu_setting_navi_title': 'Message Input Bar Menu',
+    '_demo_message_input_bar_menu_setting_navi_confim': 'Done',
+    '_demo_message_input_bar_menu_setting_style1': 'Style1',
+    '_demo_message_input_bar_menu_setting_style2': 'Style2',
+
     '_demo_style_setting_navi_title': 'Theme',
     '_demo_style_setting_navi_confim': 'Done',
     '_demo_style_setting_language_classic': 'Classic',
@@ -179,5 +192,7 @@ export function createStringSetEn(): StringSet {
     'zh-Hans': '中文',
     'classic': 'Classic',
     'modern': 'Modern',
+    'style1': 'Style1',
+    'style2': 'Style2',
   };
 }

example/src/demo/hooks/useApp.tsx

@@ -40,7 +40,8 @@ import {
   getChatService,
   getReleaseArea,
   LanguageCode,
-  MessageMenuStyle,
+  MessageContextMenuStyle,
+  MessageInputBarExtensionStyle,
   StringSet,
   ThemeType,
   UIGroupListListener,
@@ -109,7 +110,10 @@ export function useApp() {
   const enableBlockRef = React.useRef(false);
   const naviThemeRef = React.useRef(NaviDefaultTheme);
   const pageDeepRef = React.useRef(0);
-  const messageMenuStyleRef = React.useRef<MessageMenuStyle>('custom'); // todo: need design from 'hanxiao'
+  const messageMenuStyleRef =
+    React.useRef<MessageContextMenuStyle>('bottom-sheet');
+  const messageInputBarExtensionStyleRef =
+    React.useRef<MessageInputBarExtensionStyle>('bottom-sheet');
   const [fontsLoaded] = useFonts({
     [twemoji_ttf_name]: twemoji_ttf,
     [boloo_da_ttf_name]: boloo_da_ttf,
@@ -850,6 +854,22 @@ export function useApp() {
         updater();
       }
     );
+    const ret18 = DeviceEventEmitter.addListener(
+      '_demo_emit_app_message_context_menu_style',
+      (e) => {
+        console.log('dev:emit:app:message_menu:', e);
+        messageMenuStyleRef.current = e;
+        updater();
+      }
+    );
+    const ret19 = DeviceEventEmitter.addListener(
+      '_demo_emit_app_message_input_bar_extension_style',
+      (e) => {
+        console.log('dev:emit:app:message_input_bar_ext:', e);
+        messageInputBarExtensionStyleRef.current = e;
+        updater();
+      }
+    );
     return () => {
       ret.remove();
       ret2.remove();
@@ -868,6 +888,8 @@ export function useApp() {
       ret15.remove();
       ret16.remove();
       ret17.remove();
+      ret18.remove();
+      ret19.remove();
     };
   }, [dark, light, updatePush, updater]);
 
@@ -965,5 +987,6 @@ export function useApp() {
     naviThemeRef,
     getNaviTheme,
     messageMenuStyleRef,
+    messageInputBarExtensionStyleRef,
   };
 }

example/src/demo/hooks/useGeneralSetting.tsx

@@ -3,6 +3,8 @@ import { DeviceEventEmitter } from 'react-native';
 
 import {
   AsyncStorageBasic,
+  MessageContextMenuStyle,
+  MessageInputBarExtensionStyle,
   presetPaletteColors,
   SingletonObjects,
   useForceUpdate,
@@ -85,6 +87,20 @@ export function useGeneralSetting() {
     undefined
   );
 
+  const appMessageContextMenuStyleRef = React.useRef<
+    MessageContextMenuStyle | undefined
+  >('bottom-sheet');
+  const [appMessageContextMenuStyle, setAppMessageContextMenuStyle] =
+    React.useState<MessageContextMenuStyle>('bottom-sheet');
+
+  const appMessageInputBarExtensionStyleRef = React.useRef<
+    MessageInputBarExtensionStyle | undefined
+  >('bottom-sheet');
+  const [
+    appMessageInputBarExtensionStyle,
+    setAppMessageInputBarExtensionStyle,
+  ] = React.useState<MessageInputBarExtensionStyle>('bottom-sheet');
+
   const onSetAppTheme = React.useCallback((value: boolean) => {
     appThemeRef.current = value;
     setAppTheme(value);
@@ -279,6 +295,38 @@ export function useGeneralSetting() {
     DeviceEventEmitter.emit('_demo_emit_app_language', value);
   }, []);
 
+  const onSetAppMessageContextMenuStyle = React.useCallback(
+    (value: MessageContextMenuStyle) => {
+      appMessageContextMenuStyleRef.current = value;
+      setAppMessageContextMenuStyle(value);
+      const s = SingletonObjects.getInstanceWithParams(AsyncStorageBasic, {
+        appKey: `${gAppKey}/uikit/demo`,
+      });
+      s.setData({ key: 'messageContextMenuStyle', value });
+      DeviceEventEmitter.emit(
+        '_demo_emit_app_message_context_menu_style',
+        value
+      );
+    },
+    []
+  );
+
+  const onSetAppMessageInputBarExtensionStyle = React.useCallback(
+    (value: MessageInputBarExtensionStyle) => {
+      appMessageInputBarExtensionStyleRef.current = value;
+      setAppMessageInputBarExtensionStyle(value);
+      const s = SingletonObjects.getInstanceWithParams(AsyncStorageBasic, {
+        appKey: `${gAppKey}/uikit/demo`,
+      });
+      s.setData({ key: 'messageInputBarExtensionStyle', value });
+      DeviceEventEmitter.emit(
+        '_demo_emit_app_message_input_bar_extension_style',
+        value
+      );
+    },
+    []
+  );
+
   const initParams = React.useCallback(async () => {
     const s = SingletonObjects.getInstanceWithParams(AsyncStorageBasic, {
       appKey: `${gAppKey}/uikit/demo`,
@@ -300,6 +348,8 @@ export function useGeneralSetting() {
     const res16 = await s.getData({ key: 'translateLanguage' });
     const res17 = await s.getData({ key: 'typing' });
     const res18 = await s.getData({ key: 'block' });
+    const res19 = await s.getData({ key: 'messageContextMenuStyle' });
+    const res20 = await s.getData({ key: 'messageInputBarExtensionStyle' });
     return {
       appTheme: res.value ? res.value !== 'light' : false,
       appTranslate: res10.value ? res10.value === 'enable' : true,
@@ -321,6 +371,10 @@ export function useGeneralSetting() {
       appNeutralSColor: res9.value
         ? +res9.value
         : presetPaletteColors.neutralSpecial,
+      appMessageContextMenuStyle: res19.value ? res19.value : 'bottom-sheet',
+      appMessageInputBarExtensionStyle: res20.value
+        ? res20.value
+        : 'bottom-sheet',
     };
   }, []);
 
@@ -361,6 +415,16 @@ export function useGeneralSetting() {
         appTypingRef.current = res.appTyping;
         setAppBlock(res.appBlock);
         appBlockRef.current = res.appBlock;
+        setAppMessageContextMenuStyle(
+          res.appMessageContextMenuStyle as MessageContextMenuStyle
+        );
+        appMessageContextMenuStyleRef.current =
+          res.appMessageContextMenuStyle as MessageContextMenuStyle;
+        setAppMessageInputBarExtensionStyle(
+          res.appMessageInputBarExtensionStyle as MessageInputBarExtensionStyle
+        );
+        appMessageInputBarExtensionStyleRef.current =
+          res.appMessageInputBarExtensionStyle as MessageInputBarExtensionStyle;
         // updater();
       })
       .catch((e) => {
@@ -409,5 +473,9 @@ export function useGeneralSetting() {
     onSetAppTyping,
     appBlock,
     onSetAppBlock,
+    appMessageContextMenuStyle,
+    onSetAppMessageContextMenuStyle,
+    appMessageInputBarExtensionStyle,
+    onSetAppMessageInputBarExtensionStyle,
   };
 }

example/src/demo/hooks/useNavigationRoute.tsx

@@ -8,7 +8,7 @@ import * as React from 'react';
 import type { RootParamsName, RootScreenParamsList } from '../routes';
 import type { NavigationParams } from './types';
 
-function navigateFC<Props extends NavigationParams<any>>(
+function navigateFC<Props extends NavigationParams<{}>>(
   navigation: NavigationProp<RootScreenParamsList>,
   params: {
     from?: RootParamsName;
@@ -37,7 +37,7 @@ function navigateFC<Props extends NavigationParams<any>>(
     merge: params.merge ?? true,
   });
 }
-function goBackFC<Props extends NavigationParams<any>>(
+function goBackFC<Props extends NavigationParams<{}>>(
   navigation: NavigationProp<RootScreenParamsList>,
   params?: {
     from?: RootParamsName;

example/src/demo/routes/list.tsx

@@ -211,6 +211,14 @@ export type RootParamsList = {
     option?: {} | undefined;
     params?: {} | undefined;
   };
+  MessageContextMenuSetting: {
+    option?: {} | undefined;
+    params?: {} | undefined;
+  };
+  MessageInputBarMenuSetting: {
+    option?: {} | undefined;
+    params?: {} | undefined;
+  };
 };
 export type RootParamsName = Extract<keyof RootParamsList, string>;
 export type RootParamsNameList = RootParamsName[];
@@ -434,6 +442,14 @@ export const SCREEN_LIST: RootParamsList = {
     option: undefined,
     params: undefined,
   },
+  MessageContextMenuSetting: {
+    option: undefined,
+    params: undefined,
+  },
+  MessageInputBarMenuSetting: {
+    option: undefined,
+    params: undefined,
+  },
 };
 export const SCREEN_NAME_LIST: RootParamsNameList = Object.keys(
   SCREEN_LIST