agora-appbuilder-core 3.0.8 → 4.0.0-api.0

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

@@ -0,0 +1,178 @@
+import React, { useState, useEffect } from 'react';
+import { View, TouchableOpacity, Text, Pressable } from 'react-native';
+import PropTypes from 'prop-types';
+import { stylePropType } from '../utils/prop-types';
+import styles, { HEIGHT } from './base/styles';
+import Checkbox from '../../../src/subComponents/Checkbox';
+import { PrimaryButton } from 'customization-api';
+import TertiaryButton from '../../../src/atoms/TertiaryButton';
+
+function BaseToast({
+  leadingIcon,
+  trailingIcon,
+  text1,
+  text2,
+  onPress,
+  style,
+  contentContainerStyle,
+  text1Style,
+  text2Style,
+  subTextStyle,
+  activeOpacity,
+  text1NumberOfLines,
+  text2NumberOfLines,
+  primaryBtn,
+  secondaryBtn,
+  checkbox
+}) {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <TouchableOpacity
+      testID='rootView'
+      style={[styles.base, styles.borderTop, style]}
+      onPress={onPress}
+      activeOpacity={onPress ? activeOpacity : 1}>
+      <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>
+          </View>
+        )}
+        {(text2 || text2?.length > 0) && (
+          <View>
+            <Text
+              testID='text2'
+              style={[styles.text2, text2Style]}
+              numberOfLines={text2NumberOfLines}>
+              {text2}
+            </Text>
+          </View>
+        )}
+        {checkbox && (
+          <Pressable
+            style={{
+              flex: 1,
+              flexDirection: 'row',
+              paddingTop: 16,
+              paddingBottom: 8,
+              marginLeft: 4
+            }}
+            onPress={() => {
+              setChecked((e) => !e);
+            }}>
+            <Checkbox
+              {...checkbox}
+              value={checked}
+              onValueChange={setChecked}
+              style={{
+                marginRight: 8
+              }}
+            />
+            <Text style={subTextStyle}>{checkbox.text}</Text>
+          </Pressable>
+        )}
+        {primaryBtn || secondaryBtn ? (
+          <View
+            style={{
+              flex: 1,
+              flexDirection: 'row',
+              paddingTop: 16,
+              paddingBottom: 24
+            }}>
+            {primaryBtn && (
+              <PrimaryButton
+                textStyle={{ fontWeight: '600', fontSize: 16, paddingLeft: 0 }}
+                containerStyle={{
+                  height: 40,
+                  borderRadius: 4,
+                  paddingVertical: 0,
+                  paddingHorizontal: 12,
+                  minWidth: 'unset'
+                }}
+                {...primaryBtn}
+                onPress={(e) => {
+                  primaryBtn.onPress(checked, e);
+                  setChecked(false);
+                }}
+              />
+            )}
+            {secondaryBtn && (
+              <TertiaryButton
+                textStyle={{ fontWeight: '600', fontSize: 16, paddingLeft: 0 }}
+                containerStyle={{
+                  height: 40,
+                  marginLeft: 16,
+                  paddingVertical: 0
+                }}
+                {...secondaryBtn}
+                onPress={(e) => {
+                  secondaryBtn.onPress(checked, e);
+                  setChecked(false);
+                }}
+              />
+            )}
+          </View>
+        ) : (
+          <></>
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+BaseToast.HEIGHT = HEIGHT;
+
+BaseToast.propTypes = {
+  leadingIcon: PropTypes.node,
+  trailingIcon: PropTypes.node,
+  text1: PropTypes.string,
+  text2: PropTypes.string || PropTypes.element || PropTypes.any,
+  onPress: PropTypes.func,
+  style: stylePropType,
+  contentContainerStyle: stylePropType,
+  text1Style: stylePropType,
+  text2Style: stylePropType,
+  activeOpacity: PropTypes.number,
+  text1NumberOfLines: PropTypes.number,
+  text2NumberOfLines: PropTypes.number
+};
+
+BaseToast.defaultProps = {
+  leadingIcon: null,
+  trailingIcon: null,
+  text1: undefined,
+  text2: undefined,
+  onPress: undefined,
+  style: undefined,
+  contentContainerStyle: undefined,
+  text1Style: undefined,
+  text2Style: undefined,
+  activeOpacity: 0.8,
+  text1NumberOfLines: 1,
+  text2NumberOfLines: 2
+};
+
+export default BaseToast;

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

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

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

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

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

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

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