agora-appbuilder-core 4.0.27 → 4.0.28-beta-2

package/template/src/atoms/ActionMenu.tsx

@@ -18,10 +18,10 @@ import ThemeConfig from '../theme';
 import {isWebInternal} from '../utils/common';
 import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 import Toggle from './Toggle';
-import {Either} from '../../agora-rn-uikit/src/Controls/types';
-import {ToolbarItemHide, ToolbarMoreMenuCustomItem} from './ToolbarPreset';
+import {ToolbarItemHide} from './ToolbarPreset';
 
 export interface ActionMenuItem {
+  component?: React.ComponentType;
   componentName?: string;
   order?: number;
   isExternalIcon?: boolean;
@@ -32,8 +32,9 @@ export interface ActionMenuItem {
   iconColor: string;
   textColor: string;
   title: string;
+  label?: string;
   toggleStatus?: boolean;
-  callback: () => void;
+  onPress: () => void;
   onHoverCallback?: (isHovered: boolean) => void;
   onHoverContent?: JSX.Element;
   disabled?: boolean;
@@ -50,7 +51,7 @@ export interface ActionMenuProps {
     left?: number;
     bottom?: number;
   };
-  items: Either<ActionMenuItem[], ToolbarMoreMenuCustomItem[]>;
+  items: ActionMenuItem[];
   hoverMode?: boolean;
   onHover?: (hover: boolean) => void;
   containerStyle?: ViewStyle;
@@ -68,9 +69,7 @@ const ActionMenu = (props: ActionMenuProps) => {
 
   const renderItems = () => {
     return items?.map((item, index) => {
-      //rendering the custom item with default UI
-      const {title, onPress, iconBase64, componentName, hide = false} = item;
-
+      const {hide = false} = item;
       if (typeof hide === 'boolean' && hide) {
         return null;
       }
@@ -81,16 +80,37 @@ const ActionMenu = (props: ActionMenuProps) => {
         }
       } catch (error) {}
 
-      if (title && onPress) {
-        return (
-          <PlatformWrapper key={props.from + '_' + componentName + index}>
-            {(isHovered: boolean) => (
-              <>
+      const {
+        title,
+        label = null,
+        component: CustomActionItem = null,
+        icon = '',
+        onHoverIcon,
+        isBase64Icon = false,
+        isExternalIcon = false,
+        externalIconString = '',
+        toggleStatus,
+        onPress = () => {},
+        iconColor,
+        textColor,
+        disabled = false,
+        onHoverCallback = undefined,
+        onHoverContent = undefined,
+        iconSize = 20,
+      } = item;
+      return (
+        <PlatformWrapper key={props.from + '_' + title + index}>
+          {(isHovered: boolean) => (
+            <>
+              {/* {onHoverCallback && onHoverCallback(isHovered)} */}
+              {isHovered ? onHoverContent ? onHoverContent : <></> : <></>}
+              {CustomActionItem ? (
                 <TouchableOpacity
-                  disabled={false}
+                  disabled={disabled}
+                  onPress={onPress}
                   style={[
                     styles.row,
-                    isHovered && !false
+                    isHovered && !disabled
                       ? //first item should have border-radius on top left and top right
                         index === 0
                         ? styles.rowHoveredFirstChild
@@ -100,118 +120,77 @@ const ActionMenu = (props: ActionMenuProps) => {
                         : //middle items don't need any border-radius
                           styles.rowHoveredMiddleItems
                       : {},
-                    false ? {opacity: 0.4} : {},
+                    disabled ? {opacity: 0.4} : {},
+                    items?.length - 1 === index
+                      ? {borderBottomColor: 'transparent'}
+                      : {},
+                  ]}>
+                  <CustomActionItem />
+                </TouchableOpacity>
+              ) : (
+                <TouchableOpacity
+                  disabled={disabled}
+                  style={[
+                    styles.row,
+                    isHovered && !disabled
+                      ? //first item should have border-radius on top left and top right
+                        index === 0
+                        ? styles.rowHoveredFirstChild
+                        : //last item should have border-radius on bottom left and top right
+                        items?.length - 1 === index
+                        ? styles.rowHoveredLastChild
+                        : //middle items don't need any border-radius
+                          styles.rowHoveredMiddleItems
+                      : {},
+                    disabled ? {opacity: 0.4} : {},
                     items?.length - 1 === index
                       ? {borderBottomColor: 'transparent'}
                       : {},
                   ]}
                   onPress={onPress}
-                  key={componentName + index}>
-                  {iconBase64 ? (
-                    <View style={styles.iconContainer}>
+                  key={icon + index}>
+                  <View style={styles.iconContainer}>
+                    {isExternalIcon ? (
                       <ImageIcon
-                        base64={false}
-                        base64TintColor={$config.SECONDARY_ACTION_COLOR}
+                        base64={isBase64Icon}
+                        base64TintColor={iconColor}
                         iconType="plain"
-                        iconSize={24}
-                        icon={iconBase64}
-                        tintColor={$config.SECONDARY_ACTION_COLOR}
+                        iconSize={iconSize}
+                        icon={externalIconString}
+                        tintColor={iconColor}
+                      />
+                    ) : (
+                      <ImageIcon
+                        base64={isBase64Icon}
+                        base64TintColor={iconColor}
+                        iconType="plain"
+                        iconSize={iconSize}
+                        name={
+                          isHovered && onHoverIcon && !disabled
+                            ? onHoverIcon
+                            : icon
+                        }
+                        tintColor={iconColor}
+                      />
+                    )}
+                  </View>
+                  <Text
+                    style={[styles.text, textColor ? {color: textColor} : {}]}>
+                    {label || title}
+                  </Text>
+                  {toggleStatus !== undefined && toggleStatus !== null ? (
+                    <View style={styles.toggleContainer}>
+                      <Toggle
+                        disabled={disabled}
+                        isEnabled={toggleStatus}
+                        toggleSwitch={onPress}
                       />
                     </View>
                   ) : (
                     <></>
                   )}
-                  <Text style={[styles.text]}>{title}</Text>
                 </TouchableOpacity>
-              </>
-            )}
-          </PlatformWrapper>
-        );
-      }
-
-      const {
-        icon = '',
-        onHoverIcon,
-        isBase64Icon = false,
-        isExternalIcon = false,
-        externalIconString = '',
-        toggleStatus,
-        callback,
-        iconColor,
-        textColor,
-        disabled = false,
-        onHoverCallback = undefined,
-        onHoverContent = undefined,
-        iconSize = 20,
-      } = item;
-      return (
-        <PlatformWrapper key={props.from + '_' + title + index}>
-          {(isHovered: boolean) => (
-            <>
-              {/* {onHoverCallback && onHoverCallback(isHovered)} */}
-              {isHovered ? onHoverContent ? onHoverContent : <></> : <></>}
-              <TouchableOpacity
-                disabled={disabled}
-                style={[
-                  styles.row,
-                  isHovered && !disabled
-                    ? //first item should have border-radius on top left and top right
-                      index === 0
-                      ? styles.rowHoveredFirstChild
-                      : //last item should have border-radius on bottom left and top right
-                      items?.length - 1 === index
-                      ? styles.rowHoveredLastChild
-                      : //middle items don't need any border-radius
-                        styles.rowHoveredMiddleItems
-                    : {},
-                  disabled ? {opacity: 0.4} : {},
-                  items?.length - 1 === index
-                    ? {borderBottomColor: 'transparent'}
-                    : {},
-                ]}
-                onPress={callback}
-                key={icon + index}>
-                <View style={styles.iconContainer}>
-                  {isExternalIcon ? (
-                    <ImageIcon
-                      base64={isBase64Icon}
-                      base64TintColor={iconColor}
-                      iconType="plain"
-                      iconSize={iconSize}
-                      icon={externalIconString}
-                      tintColor={iconColor}
-                    />
-                  ) : (
-                    <ImageIcon
-                      base64={isBase64Icon}
-                      base64TintColor={iconColor}
-                      iconType="plain"
-                      iconSize={iconSize}
-                      name={
-                        isHovered && onHoverIcon && !disabled
-                          ? onHoverIcon
-                          : icon
-                      }
-                      tintColor={iconColor}
-                    />
-                  )}
-                </View>
-                <Text
-                  style={[styles.text, textColor ? {color: textColor} : {}]}>
-                  {title}
-                </Text>
-                {toggleStatus !== undefined && toggleStatus !== null ? (
-                  <View style={styles.toggleContainer}>
-                    <Toggle
-                      disabled={disabled}
-                      isEnabled={toggleStatus}
-                      toggleSwitch={callback}
-                    />
-                  </View>
-                ) : (
-                  <></>
-                )}
-              </TouchableOpacity>
+              )}
             </>
           )}
         </PlatformWrapper>
@@ -311,8 +290,12 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderBottomColor: $config.CARD_LAYER_3_COLOR,
     flexDirection: 'row',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
   },
   iconContainer: {
+    display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
     marginRight: 8,

package/template/src/atoms/LinkButton.tsx

@@ -1,16 +1,17 @@
-import {StyleSheet, Text, TouchableOpacity} from 'react-native';
+import {StyleSheet, Text, TouchableOpacity, TextStyle} from 'react-native';
 import React from 'react';
 import ThemeConfig from '../theme';
 
 interface LinkButtonProps {
   onPress: () => void;
   text: string;
+  textStyle?: TextStyle;
 }
 
-const LinkButton = ({onPress, text}: LinkButtonProps) => {
+const LinkButton = ({onPress, text, textStyle = {}}: LinkButtonProps) => {
   return (
     <TouchableOpacity onPress={onPress}>
-      <Text style={styles.text}> {text} </Text>
+      <Text style={(styles.text, textStyle)}> {text} </Text>
     </TouchableOpacity>
   );
 };

package/template/src/atoms/ToolbarItem.tsx

@@ -2,11 +2,21 @@ import React from 'react';
 import {View, ViewProps, ViewStyle, StyleSheet} from 'react-native';
 import {ToolbarPosition, useToolbar} from '../utils/useToolbar';
 import {isMobileUA, isWebInternal} from '../utils/common';
+import {createHook} from 'customization-implementation';
 
 export interface ToolbarItemProps extends ViewProps {
   style?: ViewStyle;
   children: React.ReactNode;
+  toolbarProps?: {
+    [key: string]: any;
+  };
 }
+
+export const ToolbarPropsContext = React.createContext<
+  ToolbarItemProps['toolbarProps']
+>({});
+export const useToolbarProps = createHook(ToolbarPropsContext);
+
 const ToolbarItem = (props: ToolbarItemProps) => {
   const {isHorizontal, position} = useToolbar();
   //isHorizontal true -> top/bottom bar
@@ -17,31 +27,35 @@ const ToolbarItem = (props: ToolbarItemProps) => {
   //action sheet
   if (isMobileUA() && position === ToolbarPosition.bottom) {
     return (
-      <View {...props} style={[props?.style, toolbarItemStyles.iconWithText]}>
-        {props?.children}
-      </View>
+      <ToolbarPropsContext.Provider value={props?.toolbarProps || {}}>
+        <View {...props} style={[props?.style, toolbarItemStyles.iconWithText]}>
+          {props?.children}
+        </View>
+      </ToolbarPropsContext.Provider>
     );
   } else {
     return (
-      <View
-        {...props}
-        style={[
-          props?.style,
-          // isHorizontal ? {flexDirection: 'column'} : {flexDirection: 'row'},
-          position === ToolbarPosition.left
-            ? toolbarItemStyles.leftBarItemStyle
-            : position === ToolbarPosition.right
-            ? toolbarItemStyles.rightBarItemStyle
-            : position === ToolbarPosition.bottom
-            ? toolbarItemStyles.bottomBarItemStyle
-            : isWebInternal() && position === ToolbarPosition.top
-            ? toolbarItemStyles.topBarItemNonNativeStyle
-            : !isWebInternal() && position === ToolbarPosition.top
-            ? toolbarItemStyles.topBarItemNativeStyle
-            : {},
-        ]}>
-        {props?.children}
-      </View>
+      <ToolbarPropsContext.Provider value={props?.toolbarProps || {}}>
+        <View
+          {...props}
+          style={[
+            props?.style,
+            // isHorizontal ? {flexDirection: 'column'} : {flexDirection: 'row'},
+            position === ToolbarPosition.left
+              ? toolbarItemStyles.leftBarItemStyle
+              : position === ToolbarPosition.right
+              ? toolbarItemStyles.rightBarItemStyle
+              : position === ToolbarPosition.bottom
+              ? toolbarItemStyles.bottomBarItemStyle
+              : isWebInternal() && position === ToolbarPosition.top
+              ? toolbarItemStyles.topBarItemNonNativeStyle
+              : !isWebInternal() && position === ToolbarPosition.top
+              ? toolbarItemStyles.topBarItemNativeStyle
+              : {},
+          ]}>
+          {props?.children}
+        </View>
+      </ToolbarPropsContext.Provider>
     );
   }
 };

package/template/src/atoms/ToolbarPreset.tsx

@@ -45,10 +45,21 @@ export type TopToolbarDefaultKeys =
   | 'participant'
   | 'settings';
 
-export type ToolbarMoreButtonFields = {
+export type ToolbarMoreButtonDefaultFields = {
   [key in MoreButtonDefaultKeys]?: {
     hide?: ToolbarItemHide;
     order?: number;
+    component?: React.ComponentType;
+    label?: ToolbarItemLabel;
+    onPress?: () => void;
+  };
+};
+export type ToolbarMoreButtonCustomFields = {
+  [key: string]: {
+    hide?: ToolbarItemHide;
+    order?: number;
+    component?: React.ComponentType;
+    onPress?: () => void;
   };
 };
 
@@ -56,14 +67,18 @@ export type ToolbarItemAlign = 'start' | 'center' | 'end';
 export type ToolbarHideCallback = (width: number, height: number) => boolean;
 export type ToolbarItemHide = boolean | ToolbarHideCallback;
 
+export type ToolbarItemLabelCallback = (languageCode: string) => string;
+export type ToolbarItemLabel = string | ToolbarItemLabelCallback;
 export interface ToolbarDefaultItem {
-  component?: () => JSX.Element;
+  component?: (props?: any) => JSX.Element;
   align?: ToolbarItemAlign;
   hide?: ToolbarItemHide;
   order?: number;
+  label?: ToolbarItemLabel;
+  onPress?: () => void;
 }
 export interface ToolbarMoreDefaultItem extends ToolbarDefaultItem {
-  fields?: ToolbarMoreButtonFields;
+  fields?: ToolbarMoreButtonDefaultFields | ToolbarMoreButtonCustomFields;
 }
 
 export type ToolbarPresetAlign = 'top' | 'bottom' | 'right' | 'left';