agora-appbuilder-core 3.0.10 → 3.0.12

package/template/react-native-toast-message/src/index.sdk.tsx

@@ -1,5 +1,5 @@
 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';
@@ -10,8 +10,6 @@ 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 { isWebInternal, isMobileUA } from '../../src/utils/common';
 
 const FRICTION = 8;
 
@@ -83,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) {
@@ -115,10 +109,7 @@ class Toast extends Component {
       keyboardHeight: 0,
       keyboardVisible: false,
 
-      customProps: {},
-      customStyle: this.getCustomStyle(),
-      isHovered: false,
-      toastId: 0
+      customProps: {}
     };
 
     this.panResponder = PanResponder.create({
@@ -135,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: () => {}
@@ -294,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();
     }
   }
 
@@ -381,11 +333,7 @@ class Toast extends Component {
           'text2',
           'hide',
           'show',
-          'onPress',
-          'primaryBtn',
-          'secondaryBtn',
-          'checkbox',
-          'toastId'
+          'onPress'
         ]
       }),
       props: { ...customProps },
@@ -410,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],
       {
         opacity: translateY
@@ -423,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() {
@@ -435,51 +375,21 @@ 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, display: this.state.isVisible ? 'flex' : 'none' }
-          ]} //added zindex
-          {...this.panResponder.panHandlers}>
-          {this.renderContent(this.props)}
-        </Animated.View>
-      </PlatformWrapper>
+      <Animated.View
+        testID='animatedView'
+        onLayout={this.onLayout}
+        style={[
+          baseStyle,
+          style,
+          { zIndex: 100, display: this.state.isVisible ? 'flex' : 'none' }
+        ]} //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),
   style: stylePropType,

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

@@ -1,11 +1,12 @@
-import isMobileOrTablet from '../../src/utils/isMobileOrTablet';
-import { StyleSheet, Dimensions } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   base: {
     position: 'absolute',
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
+    left: 0,
+    right: 0
   },
   top: {
     top: 0

package/template/react-native-toast-message/src/styles.sdk.ts

@@ -1,11 +1,12 @@
-import isMobileOrTablet from '../../src/utils/isMobileOrTablet';
-import { Dimensions, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   base: {
     position: 'absolute',
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
+    left: 0,
+    right: 0
   },
   top: {
     top: 30

package/template/src/App.tsx

@@ -31,7 +31,6 @@ import {
 } from './components/meeting-info/useMeetingInfo';
 import {SetMeetingInfoProvider} from './components/meeting-info/useSetMeetingInfo';
 import {ShareLinkProvider} from './components/useShareLink';
-import Endcall from './pages/Endcall';
 
 //hook can't be used in the outside react function calls. so directly checking the platform.
 if (Platform.OS === 'ios') {
@@ -47,7 +46,6 @@ declare module 'agora-rn-uikit' {
     name: string;
     screenUid: number;
     offline: boolean;
-    lastMessageTimeStamp: number;
   }
   interface RtcPropsInterface {
     screenShareUid: number;
@@ -109,10 +107,6 @@ const App: React.FC = () => {
               <Route exact path={'/join'}>
                 <Join />
               </Route>
-              {/* Will be used in the future
-              <Route exact path={'/leave'}>
-                <Endcall />
-              </Route> */}
               {shouldAuthenticate ? (
                 <PrivateRoute
                   path={'/create'}

package/template/src/AppWrapper.tsx

@@ -15,53 +15,21 @@ import Navigation from './components/Navigation';
 import {StorageProvider} from './components/StorageContext';
 import GraphQLProvider from './components/GraphQLProvider';
 import {SessionProvider} from './components/SessionContext';
-import {
-  ImageBackground,
-  SafeAreaView,
-  StatusBar,
-  Platform,
-  View,
-} from 'react-native';
+import {ImageBackground, SafeAreaView, StatusBar, Platform} from 'react-native';
 import ColorConfigure from './components/ColorConfigure';
+import Toast from '../react-native-toast-message';
+import ToastConfig from './subComponents/ToastConfig';
 import {isValidReactComponent} from './utils/common';
 import DimensionProvider from './components/dimension/DimensionProvider';
 import Error from './components/common/Error';
 import {ErrorProvider} from './components/common';
 import {useCustomization} from 'customization-implementation';
 import {LanguageProvider} from './language/useLanguage';
-import {PropsConsumer} from 'agora-rn-uikit';
-import ToastComponent from './components/ToastComponent';
-import {ToastContext, ToastProvider} from './components/useToast';
 
 interface AppWrapperProps {
   children: React.ReactNode;
 }
 
-const ImageBackgroundComp = (props: {
-  bg?: string;
-  color?: string;
-  children?: React.ReactNode;
-}) => {
-  if (props?.bg) {
-    return (
-      <ImageBackground
-        source={{uri: props.bg}}
-        style={{flex: 1}}
-        resizeMode={'cover'}>
-        {props.children}
-      </ImageBackground>
-    );
-  } else if (props?.color) {
-    return (
-      <View style={{flex: 1, backgroundColor: props.color}}>
-        {props.children}
-      </View>
-    );
-  } else {
-    return <>{props.children}</>;
-  }
-};
-
 const AppWrapper = (props: AppWrapperProps) => {
   const AppRoot = useCustomization((data) => {
     if (
@@ -75,39 +43,36 @@ const AppWrapper = (props: AppWrapperProps) => {
 
   return (
     <AppRoot>
-      <ImageBackgroundComp bg={$config.BG} color={$config.BACKGROUND_COLOR}>
+      <ImageBackground
+        source={{uri: $config.BG}}
+        style={{flex: 1}}
+        resizeMode={'cover'}>
         <SafeAreaView
           // @ts-ignore textAlign not supported by TS definitions but is applied to web regardless
           style={[{flex: 1}, Platform.select({web: {textAlign: 'left'}})]}>
           <StatusBar hidden={true} />
-          <ToastProvider>
-            <ToastContext.Consumer>
-              {({isActionSheetVisible}) => {
-                return !isActionSheetVisible ? <ToastComponent /> : null;
-              }}
-            </ToastContext.Consumer>
-            <StorageProvider>
-              <GraphQLProvider>
-                <Router>
-                  <SessionProvider>
-                    <ColorConfigure>
-                      <DimensionProvider>
-                        <LanguageProvider>
-                          <ErrorProvider>
-                            <Error />
-                            <Navigation />
-                            {props.children}
-                          </ErrorProvider>
-                        </LanguageProvider>
-                      </DimensionProvider>
-                    </ColorConfigure>
-                  </SessionProvider>
-                </Router>
-              </GraphQLProvider>
-            </StorageProvider>
-          </ToastProvider>
+          <Toast ref={(ref) => Toast.setRef(ref)} config={ToastConfig} />
+          <StorageProvider>
+            <GraphQLProvider>
+              <Router>
+                <SessionProvider>
+                  <ColorConfigure>
+                    <DimensionProvider>
+                      <LanguageProvider>
+                        <ErrorProvider>
+                          <Error />
+                          <Navigation />
+                          {props.children}
+                        </ErrorProvider>
+                      </LanguageProvider>
+                    </DimensionProvider>
+                  </ColorConfigure>
+                </SessionProvider>
+              </Router>
+            </GraphQLProvider>
+          </StorageProvider>
         </SafeAreaView>
-      </ImageBackgroundComp>
+      </ImageBackground>
     </AppRoot>
   );
   // return <div> hello world</div>; {/* isn't join:phrase redundant now, also can we remove joinStore */}