agora-appbuilder-core 3.0.9 → 3.0.10

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

@@ -1,15 +1,18 @@
 import React, { Component } from 'react';
-import { Animated, PanResponder, Keyboard } from 'react-native';
+import { Animated, PanResponder, Keyboard, Dimensions } 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;
 
@@ -81,11 +84,15 @@ class Toast extends Component {
   }
 
   static show(options = {}) {
-    Toast._ref.show(options);
+    Toast._ref?.show(options);
   }
 
   static hide() {
-    Toast._ref.hide();
+    Toast._ref?.hide({ forceHide: true });
+  }
+
+  static getToastId() {
+    return Toast._ref?.getToastId();
   }
 
   constructor(props) {
@@ -109,7 +116,10 @@ class Toast extends Component {
       keyboardHeight: 0,
       keyboardVisible: false,
 
-      customProps: {}
+      customProps: {},
+      customStyle: this.getCustomStyle(),
+      isHovered: false,
+      toastId: 0
     };
 
     this.panResponder = PanResponder.create({
@@ -126,6 +136,40 @@ 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: () => {}
@@ -251,24 +295,29 @@ class Toast extends Component {
     }
   }
 
-  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();
+  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();
+      }
     }
   }
 
@@ -331,9 +380,14 @@ class Toast extends Component {
           'isVisible',
           'text1',
           'text2',
+          'leadingIcon',
           'hide',
           'show',
-          'onPress'
+          'onPress',
+          'primaryBtn',
+          'secondaryBtn',
+          'checkbox',
+          'toastId'
         ]
       }),
       props: { ...customProps },
@@ -358,6 +412,11 @@ 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 }]
@@ -366,7 +425,10 @@ class Toast extends Component {
   }
 
   onLayout(e) {
-    this.setState({ height: e.nativeEvent.layout.height });
+    this.setState({
+      height: e.nativeEvent.layout.height,
+      customStyle: this.getCustomStyle()
+    });
   }
 
   render() {
@@ -375,16 +437,45 @@ class Toast extends Component {
     const baseStyle = this.getBaseStyle(position, keyboardHeight);
 
     return (
-      <Animated.View
-        testID='animatedView'
-        onLayout={this.onLayout}
-        style={[baseStyle, style, { zIndex: 100 }]} //added zindex
-        {...this.panResponder.panHandlers}>
-        {this.renderContent(this.props)}
-      </Animated.View>
+      <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>
     );
   }
 }
+const PlatformWrapper = ({ children, setIsHovered }) => {
+  return isWebInternal() ? (
+    <div
+      onMouseEnter={() => {
+        setIsHovered(true);
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+      }}>
+      {children}
+    </div>
+  ) : (
+    <>{children}</>
+  );
+};
 
 Toast.propTypes = {
   config: PropTypes.objectOf(PropTypes.func),

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

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Animated, PanResponder, Keyboard } from 'react-native';
+import { Animated, PanResponder, Keyboard, Dimensions } from 'react-native';
 import PropTypes from 'prop-types';
 
 import SuccessToast from './components/success';
@@ -10,6 +10,8 @@ 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;
 
@@ -81,11 +83,15 @@ class Toast extends Component {
   }
 
   static show(options = {}) {
-    Toast._ref.show(options);
+    Toast._ref?.show(options);
   }
 
   static hide() {
-    Toast._ref.hide();
+    Toast._ref?.hide({ forceHide: true });
+  }
+
+  static getToastId() {
+    return Toast._ref?.getToastId();
   }
 
   constructor(props) {
@@ -109,7 +115,10 @@ class Toast extends Component {
       keyboardHeight: 0,
       keyboardVisible: false,
 
-      customProps: {}
+      customProps: {},
+      customStyle: this.getCustomStyle(),
+      isHovered: false,
+      toastId: 0
     };
 
     this.panResponder = PanResponder.create({
@@ -126,6 +135,40 @@ 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: () => {}
@@ -251,24 +294,29 @@ class Toast extends Component {
     }
   }
 
-  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();
+  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();
+      }
     }
   }
 
@@ -333,7 +381,11 @@ class Toast extends Component {
           'text2',
           'hide',
           'show',
-          'onPress'
+          'onPress',
+          'primaryBtn',
+          'secondaryBtn',
+          'checkbox',
+          'toastId'
         ]
       }),
       props: { ...customProps },
@@ -358,6 +410,11 @@ 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
@@ -366,7 +423,10 @@ class Toast extends Component {
   }
 
   onLayout(e) {
-    this.setState({ height: e.nativeEvent.layout.height });
+    this.setState({
+      height: e.nativeEvent.layout.height,
+      customStyle: this.getCustomStyle()
+    });
   }
 
   render() {
@@ -375,21 +435,51 @@ class Toast extends Component {
     const baseStyle = this.getBaseStyle(position, keyboardHeight);
 
     return (
-      <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
+        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>
     );
   }
 }
 
+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,12 +1,11 @@
-import { StyleSheet } from 'react-native';
+import isMobileOrTablet from '../../src/utils/isMobileOrTablet';
+import { StyleSheet, Dimensions } from 'react-native';
 
 export default StyleSheet.create({
   base: {
     position: 'absolute',
     alignItems: 'center',
-    justifyContent: 'center',
-    left: 0,
-    right: 0
+    justifyContent: 'center'
   },
   top: {
     top: 0

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

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

package/template/react-native.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    project: {
+        ios: {},
+        android: {},
+    },
+    assets: ["./src/assets/fonts"]
+}

package/template/src/App.tsx

@@ -31,6 +31,7 @@ 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') {
@@ -46,6 +47,7 @@ declare module 'agora-rn-uikit' {
     name: string;
     screenUid: number;
     offline: boolean;
+    lastMessageTimeStamp: number;
   }
   interface RtcPropsInterface {
     screenShareUid: number;
@@ -107,6 +109,10 @@ 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,21 +15,53 @@ 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} from 'react-native';
+import {
+  ImageBackground,
+  SafeAreaView,
+  StatusBar,
+  Platform,
+  View,
+} 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 (
@@ -43,36 +75,39 @@ const AppWrapper = (props: AppWrapperProps) => {
 
   return (
     <AppRoot>
-      <ImageBackground
-        source={{uri: $config.BG}}
-        style={{flex: 1}}
-        resizeMode={'cover'}>
+      <ImageBackgroundComp bg={$config.BG} color={$config.BACKGROUND_COLOR}>
         <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} />
-          <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>
+          <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>
         </SafeAreaView>
-      </ImageBackground>
+      </ImageBackgroundComp>
     </AppRoot>
   );
   // return <div> hello world</div>; {/* isn't join:phrase redundant now, also can we remove joinStore */}