agora-appbuilder-core 3.0.10 → 3.0.12

package/template/react-native-toast-message/index.d.ts

@@ -1,67 +1,67 @@
 import React from 'react';
-import { ViewStyle, TextStyle, ImageSourcePropType } from 'react-native';
+import { ViewStyle, TextStyle, ImageSourcePropType } from 'react-native'
 
 declare module 'react-native-toast-message' {
   interface AnyObject {
     [key: string]: any;
   }
 
-  export type ToastPosition = 'top' | 'bottom';
+  export type ToastPosition = 'top' | 'bottom'
 
   export interface BaseToastProps {
-    leadingIcon?: React.ReactNode;
-    trailingIcon?: React.ReactNode;
-    text1?: string;
-    text2?: string;
-    onPress?: () => void;
-    style?: ViewStyle;
-    contentContainerStyle?: ViewStyle;
-    text1Style?: TextStyle;
-    text2Style?: TextStyle;
-    activeOpacity?: number;
-    text1NumberOfLines: number;
-    text2NumberOfLines: number;
-    primaryBtn?: React.ReactNode;
-    secondaryBtn?: React.ReactNode;
+    leadingIcon?: ImageSourcePropType,
+    trailingIcon?: ImageSourcePropType,
+    text1?: string,
+    text2?: string,
+    onPress?: () => void,
+    onTrailingIconPress?: () => void,
+    onLeadingIconPress?: () => void,
+    style?: ViewStyle,
+    leadingIconContainerStyle?: ViewStyle,
+    trailingIconContainerStyle?: ViewStyle,
+    leadingIconStyle?: ViewStyle,
+    trailingIconStyle?: ViewStyle,
+    contentContainerStyle?: ViewStyle,
+    text1Style?: TextStyle,
+    text2Style?: TextStyle,
+    activeOpacity?: number,
+    text1NumberOfLines: number,
+    text2NumberOfLines: number,
   }
-  export const BaseToast: React.FC<BaseToastProps>;
+  export const BaseToast: React.FC<BaseToastProps>
 
   export interface ToastProps {
     ref: (ref: any) => any;
-    config?: AnyObject;
-    style?: ViewStyle;
-    topOffset?: number;
-    bottomOffset?: number;
-    keyboardOffset?: number;
-    visibilityTime?: number;
-    autoHide?: boolean;
-    height?: number;
-    position?: ToastPosition;
-    type?: string;
+    config?: AnyObject,
+    style?: ViewStyle,
+    topOffset?: number,
+    bottomOffset?: number,
+    keyboardOffset?: number,
+    visibilityTime?: number,
+    autoHide?: boolean,
+    height?: number,
+    position?: ToastPosition,
+    type?: string
   }
 
   export default class Toast extends React.Component<ToastProps> {
     static show(options: {
-      type: string;
-      position?: ToastPosition;
-      text1?: string;
-      text2?: string;
-      primaryBtn?: React.ReactNode;
-      secondaryBtn?: React.ReactNode;
-      visibilityTime?: number;
-      autoHide?: boolean;
-      topOffset?: number;
-      bottomOffset?: number;
-      props?: AnyObject;
-      onShow?: () => void;
-      onHide?: () => void;
-      onPress?: () => void;
+      type: string,
+      position?: ToastPosition,
+      text1?: string,
+      text2?: string,
+      visibilityTime?: number,
+      autoHide?: boolean,
+      topOffset?: number,
+      bottomOffset?: number,
+      props?: AnyObject,
+      onShow?: () => void,
+      onHide?: () => void,
+      onPress?: () => void
     }): void;
 
     static hide(): void;
 
-    static getToastId(): number;
-
     static setRef(ref: any): any;
   }
 }

package/template/react-native-toast-message/src/colors/index.js

@@ -1,11 +1,10 @@
 const colors = {
   white: '#FFF',
-  blazeOrange: '#FF414D',
+  blazeOrange: '#FE6301',
   mantis: '#69C779',
   alto: '#D8D8D8',
   dustyGray: '#979797',
-  lightSkyBlue: '#87CEFA',
-  black: '#040405'
+  lightSkyBlue: '#87CEFA'
 };
 
 export default colors;

package/template/react-native-toast-message/src/components/base/index.js

@@ -13,51 +13,53 @@ function BaseToast({
   text1,
   text2,
   onPress,
+  onLeadingIconPress,
+  onTrailingIconPress,
   style,
+  leadingIconContainerStyle,
+  trailingIconContainerStyle,
+  leadingIconStyle,
+  trailingIconStyle,
   contentContainerStyle,
   text1Style,
   text2Style,
   activeOpacity,
   text1NumberOfLines,
-  text2NumberOfLines,
-  primaryBtn,
-  secondaryBtn
+  text2NumberOfLines
 }) {
   return (
     <TouchableOpacity
       testID='rootView'
-      style={[styles.base, styles.borderTop, style]}
+      style={[styles.base, styles.borderLeft, style]}
       onPress={onPress}
       activeOpacity={onPress ? activeOpacity : 1}>
+      {leadingIcon && (
+        <TouchableOpacity
+          testID='leadingIcon'
+          style={[styles.leadingIconContainer, leadingIconContainerStyle]}
+          onPress={onLeadingIconPress}
+          activeOpacity={onLeadingIconPress ? activeOpacity : 1}>
+          <Icon
+            style={{ ...styles.leadingIcon, ...leadingIconStyle }}
+            source={leadingIcon}
+          />
+        </TouchableOpacity>
+      )}
+
       <View
         testID='contentContainer'
         style={[styles.contentContainer, contentContainerStyle]}>
-        {(text1 || text1?.length > 0) && (
-          <View
-            style={{
-              flex: 1,
-              flexDirection: 'row',
-              justifyContent: 'space-between'
-            }}>
-            <View
-              style={{
-                flexDirection: 'row',
-                flex: 1
-              }}>
-              {leadingIcon ? leadingIcon : <></>}
-              <Text
-                testID='text1'
-                style={[styles.text1, text1Style]}
-                numberOfLines={text1NumberOfLines}>
-                {text1}
-              </Text>
-            </View>
-            <View style={{ justifyContent: 'flex-start', alignSelf: 'center' }}>
-              {trailingIcon ? trailingIcon : <></>}
-            </View>
+        {text1?.length > 0 && (
+          <View>
+            <Text
+              testID='text1'
+              style={[styles.text1, text1Style]}
+              numberOfLines={text1NumberOfLines}>
+              {text1}
+            </Text>
           </View>
         )}
-        {(text2 || text2?.length > 0) && (
+        {text2?.length > 0 && (
           <View>
             <Text
               testID='text2'
@@ -67,21 +69,20 @@ function BaseToast({
             </Text>
           </View>
         )}
-        {primaryBtn || secondaryBtn ? (
-          <View
-            style={{
-              flex: 1,
-              flexDirection: 'row',
-              paddingTop: 32,
-              paddingBottom: 24
-            }}>
-            {primaryBtn ? primaryBtn : <></>}
-            {secondaryBtn ? secondaryBtn : <></>}
-          </View>
-        ) : (
-          <></>
-        )}
       </View>
+
+      {trailingIcon && (
+        <TouchableOpacity
+          testID='trailingIcon'
+          style={[styles.trailingIconContainer, trailingIconContainerStyle]}
+          onPress={onTrailingIconPress}
+          activeOpacity={onTrailingIconPress ? activeOpacity : 1}>
+          <Icon
+            style={{ ...styles.trailingIcon, ...trailingIconStyle }}
+            source={trailingIcon}
+          />
+        </TouchableOpacity>
+      )}
     </TouchableOpacity>
   );
 }
@@ -89,12 +90,18 @@ function BaseToast({
 BaseToast.HEIGHT = HEIGHT;
 
 BaseToast.propTypes = {
-  leadingIcon: PropTypes.node,
-  trailingIcon: PropTypes.node,
+  leadingIcon: Icon.propTypes.source,
+  trailingIcon: Icon.propTypes.source,
   text1: PropTypes.string,
   text2: PropTypes.string,
   onPress: PropTypes.func,
+  onTrailingIconPress: PropTypes.func,
+  onLeadingIconPress: PropTypes.func,
   style: stylePropType,
+  leadingIconContainerStyle: stylePropType,
+  trailingIconContainerStyle: stylePropType,
+  leadingIconStyle: stylePropType,
+  trailingIconStyle: stylePropType,
   contentContainerStyle: stylePropType,
   text1Style: stylePropType,
   text2Style: stylePropType,
@@ -104,12 +111,18 @@ BaseToast.propTypes = {
 };
 
 BaseToast.defaultProps = {
-  leadingIcon: null,
-  trailingIcon: null,
+  leadingIcon: undefined,
+  trailingIcon: icons.close,
   text1: undefined,
   text2: undefined,
   onPress: undefined,
+  onLeadingIconPress: undefined,
+  onTrailingIconPress: undefined,
   style: undefined,
+  leadingIconContainerStyle: undefined,
+  trailingIconContainerStyle: undefined,
+  leadingIconStyle: undefined,
+  trailingIconStyle: undefined,
   contentContainerStyle: undefined,
   text1Style: undefined,
   text2Style: undefined,

package/template/react-native-toast-message/src/components/base/styles.js

@@ -1,12 +1,13 @@
 import { StyleSheet } from 'react-native';
 import colors from '../../colors';
 
-export const HEIGHT = 105;
+export const HEIGHT = 60;
 
 export default StyleSheet.create({
   base: {
     flexDirection: 'row',
     height: HEIGHT,
+    width: '90%',
     borderRadius: 6,
     backgroundColor: colors.white,
     shadowOffset: { width: 0, height: 0 },
@@ -14,27 +15,42 @@ export default StyleSheet.create({
     shadowRadius: 6,
     elevation: 2
   },
-  borderTop: {
-    borderTopWidth: 5,
-    borderTopColor: colors.alto
+  borderLeft: {
+    borderLeftWidth: 5,
+    borderLeftColor: colors.alto
+  },
+  leadingIconContainer: {
+    width: 50,
+    justifyContent: 'center',
+    alignItems: 'center'
   },
   contentContainer: {
-    paddingLeft: 20,
     flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'flex-start'
+    justifyContent: 'center',
+    alignItems: 'flex-start' // in case of rtl the text will start from the right
+  },
+  trailingIconContainer: {
+    width: 40,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  leadingIcon: {
+    width: 20,
+    height: 20
+  },
+  trailingIcon: {
+    width: 9,
+    height: 9
   },
   text1: {
-    fontSize: 15,
-    fontFamily: 'Source Sans Pro',
-    width: '100%',
-    fontWeight: '600',
-    marginRight: 2
+    fontSize: 12,
+    fontWeight: 'bold',
+    marginBottom: 3,
+    width: '100%'
   },
   text2: {
-    fontSize: 15,
-    fontFamily: 'Source Sans Pro',
-    width: '100%',
-    fontWeight: '400'
+    fontSize: 10,
+    color: colors.dustyGray,
+    width: '100%'
   }
 });

package/template/react-native-toast-message/src/components/error.js

@@ -8,9 +8,8 @@ function ErrorToast(props) {
   return (
     <BaseToast
       {...props}
-      style={{ borderTopColor: colors.blazeOrange }}
-      text1Style={{ color: colors.blazeOrange }}
-      text2Style={{ color: colors.blazeOrange }}
+      style={{ borderLeftColor: colors.blazeOrange }}
+      leadingIcon={icons.error}
     />
   );
 }

package/template/react-native-toast-message/src/components/info.js

@@ -8,9 +8,8 @@ function InfoToast(props) {
   return (
     <BaseToast
       {...props}
-      style={{ borderTopColor: colors.lightSkyBlue }}
-      text1Style={{ color: colors.black }}
-      text2Style={{ color: colors.black }}
+      style={{ borderLeftColor: colors.lightSkyBlue }}
+      leadingIcon={icons.info}
     />
   );
 }

package/template/react-native-toast-message/src/components/success.js

@@ -8,9 +8,8 @@ function SuccessToast(props) {
   return (
     <BaseToast
       {...props}
-      style={{ borderTopColor: colors.mantis }}
-      text1Style={{ color: colors.black }}
-      text2Style={{ color: colors.black }}
+      style={{ borderLeftColor: colors.mantis }}
+      leadingIcon={icons.success}
     />
   );
 }

package/template/react-native-toast-message/src/index.js

@@ -1,18 +1,15 @@
 import React, { Component } from 'react';
-import { Animated, PanResponder, Keyboard, Dimensions } from 'react-native';
+import { Animated, PanResponder, Keyboard } from 'react-native';
 import PropTypes from 'prop-types';
 
 import SuccessToast from './components/success';
 import ErrorToast from './components/error';
 import InfoToast from './components/info';
-
 import { complement } from './utils/arr';
 import { includeKeys } from './utils/obj';
 import { stylePropType } from './utils/prop-types';
 import { isIOS } from './utils/platform';
 import styles from './styles';
-import isMobileOrTablet from '../../src/utils/isMobileOrTablet';
-import { isMobileUA, isWebInternal } from '../../src/utils/common';
 
 const FRICTION = 8;
 
@@ -84,15 +81,11 @@ class Toast extends Component {
   }
 
   static show(options = {}) {
-    Toast._ref?.show(options);
+    Toast._ref.show(options);
   }
 
   static hide() {
-    Toast._ref?.hide({ forceHide: true });
-  }
-
-  static getToastId() {
-    return Toast._ref?.getToastId();
+    Toast._ref.hide();
   }
 
   constructor(props) {
@@ -116,10 +109,7 @@ class Toast extends Component {
       keyboardHeight: 0,
       keyboardVisible: false,
 
-      customProps: {},
-      customStyle: this.getCustomStyle(),
-      isHovered: false,
-      toastId: 0
+      customProps: {}
     };
 
     this.panResponder = PanResponder.create({
@@ -136,40 +126,6 @@ class Toast extends Component {
     });
   }
 
-  getToastId = () => {
-    return this.state?.toastId;
-  };
-
-  getCustomStyle = () => {
-    let customStyle = {};
-    if (isMobileOrTablet() || Dimensions.get('window').width < 768) {
-      customStyle = {
-        left: '3%',
-        right: '3%',
-        width: '94%'
-      };
-    } else if (Dimensions.get('window').width < 900) {
-      customStyle = {
-        left: '18%',
-        right: '18%',
-        width: '64%'
-      };
-    } else if (Dimensions.get('window').width < 1200) {
-      customStyle = {
-        left: '25%',
-        right: '25%',
-        width: '50%'
-      };
-    } else {
-      customStyle = {
-        left: '33.33%',
-        right: '33.33%',
-        width: '33.33%'
-      };
-    }
-    return customStyle;
-  };
-
   componentDidMount() {
     const noop = {
       remove: () => {}
@@ -295,29 +251,24 @@ class Toast extends Component {
     }
   }
 
-  async hide({ speed, forceHide = false } = {}) {
-    if (this.state.isHovered && !forceHide && !isMobileUA()) {
-      return;
-    } else {
-      await this._setState((prevState) => ({
-        ...prevState,
-        inProgress: true
-      }));
-      await this.animateHide({
-        speed
-      });
-      this.clearTimer();
-      await this._setState((prevState) => ({
-        ...prevState,
-        isVisible: false,
-        inProgress: false,
-        toastId: 0
-      }));
-
-      const { onHide } = this.state;
-      if (onHide) {
-        onHide();
-      }
+  async hide({ speed } = {}) {
+    await this._setState((prevState) => ({
+      ...prevState,
+      inProgress: true
+    }));
+    await this.animateHide({
+      speed
+    });
+    this.clearTimer();
+    await this._setState((prevState) => ({
+      ...prevState,
+      isVisible: false,
+      inProgress: false
+    }));
+
+    const { onHide } = this.state;
+    if (onHide) {
+      onHide();
     }
   }
 
@@ -380,14 +331,9 @@ class Toast extends Component {
           'isVisible',
           'text1',
           'text2',
-          'leadingIcon',
           'hide',
           'show',
-          'onPress',
-          'primaryBtn',
-          'secondaryBtn',
-          'checkbox',
-          'toastId'
+          'onPress'
         ]
       }),
       props: { ...customProps },
@@ -412,11 +358,6 @@ class Toast extends Component {
 
     return [
       styles.base,
-      {
-        left: this.state.customStyle.left,
-        right: this.state.customStyle.right,
-        width: this.state.customStyle.width
-      },
       styles[position],
       {
         transform: [{ translateY }]
@@ -425,10 +366,7 @@ class Toast extends Component {
   }
 
   onLayout(e) {
-    this.setState({
-      height: e.nativeEvent.layout.height,
-      customStyle: this.getCustomStyle()
-    });
+    this.setState({ height: e.nativeEvent.layout.height });
   }
 
   render() {
@@ -437,45 +375,16 @@ class Toast extends Component {
     const baseStyle = this.getBaseStyle(position, keyboardHeight);
 
     return (
-      <PlatformWrapper
-        setIsHovered={(value) => {
-          if (!isMobileUA()) {
-            this.setState({
-              isHovered: value
-            });
-            setTimeout(() => {
-              if (!value) {
-                this.startTimer();
-              }
-            });
-          }
-        }}>
-        <Animated.View
-          testID='animatedView'
-          onLayout={this.onLayout}
-          style={[baseStyle, style, { zIndex: 100 }]} //added zindex
-          {...this.panResponder.panHandlers}>
-          {this.renderContent(this.props)}
-        </Animated.View>
-      </PlatformWrapper>
+      <Animated.View
+        testID='animatedView'
+        onLayout={this.onLayout}
+        style={[baseStyle, style, { zIndex: 100 }]} //added zindex
+        {...this.panResponder.panHandlers}>
+        {this.renderContent(this.props)}
+      </Animated.View>
     );
   }
 }
-const PlatformWrapper = ({ children, setIsHovered }) => {
-  return isWebInternal() ? (
-    <div
-      onMouseEnter={() => {
-        setIsHovered(true);
-      }}
-      onMouseLeave={() => {
-        setIsHovered(false);
-      }}>
-      {children}
-    </div>
-  ) : (
-    <>{children}</>
-  );
-};
 
 Toast.propTypes = {
   config: PropTypes.objectOf(PropTypes.func),