agora-appbuilder-core 3.0.9 → 3.0.10

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?: 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,
+    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;
   }
-  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,
-      visibilityTime?: number,
-      autoHide?: boolean,
-      topOffset?: number,
-      bottomOffset?: number,
-      props?: AnyObject,
-      onShow?: () => void,
-      onHide?: () => void,
-      onPress?: () => void
+      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;
     }): void;
 
     static hide(): void;
 
+    static getToastId(): number;
+
     static setRef(ref: any): any;
   }
 }

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

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

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

@@ -13,53 +13,51 @@ function BaseToast({
   text1,
   text2,
   onPress,
-  onLeadingIconPress,
-  onTrailingIconPress,
   style,
-  leadingIconContainerStyle,
-  trailingIconContainerStyle,
-  leadingIconStyle,
-  trailingIconStyle,
   contentContainerStyle,
   text1Style,
   text2Style,
   activeOpacity,
   text1NumberOfLines,
-  text2NumberOfLines
+  text2NumberOfLines,
+  primaryBtn,
+  secondaryBtn
 }) {
   return (
     <TouchableOpacity
       testID='rootView'
-      style={[styles.base, styles.borderLeft, style]}
+      style={[styles.base, styles.borderTop, 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?.length > 0 && (
-          <View>
-            <Text
-              testID='text1'
-              style={[styles.text1, text1Style]}
-              numberOfLines={text1NumberOfLines}>
-              {text1}
-            </Text>
+        {(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?.length > 0 && (
+        {(text2 || text2?.length > 0) && (
           <View>
             <Text
               testID='text2'
@@ -69,20 +67,21 @@ 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>
   );
 }
@@ -90,18 +89,12 @@ function BaseToast({
 BaseToast.HEIGHT = HEIGHT;
 
 BaseToast.propTypes = {
-  leadingIcon: Icon.propTypes.source,
-  trailingIcon: Icon.propTypes.source,
+  leadingIcon: PropTypes.node,
+  trailingIcon: PropTypes.node,
   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,
@@ -111,18 +104,12 @@ BaseToast.propTypes = {
 };
 
 BaseToast.defaultProps = {
-  leadingIcon: undefined,
-  trailingIcon: icons.close,
+  leadingIcon: null,
+  trailingIcon: null,
   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,13 +1,12 @@
 import { StyleSheet } from 'react-native';
 import colors from '../../colors';
 
-export const HEIGHT = 60;
+export const HEIGHT = 105;
 
 export default StyleSheet.create({
   base: {
     flexDirection: 'row',
     height: HEIGHT,
-    width: '90%',
     borderRadius: 6,
     backgroundColor: colors.white,
     shadowOffset: { width: 0, height: 0 },
@@ -15,42 +14,27 @@ export default StyleSheet.create({
     shadowRadius: 6,
     elevation: 2
   },
-  borderLeft: {
-    borderLeftWidth: 5,
-    borderLeftColor: colors.alto
-  },
-  leadingIconContainer: {
-    width: 50,
-    justifyContent: 'center',
-    alignItems: 'center'
+  borderTop: {
+    borderTopWidth: 5,
+    borderTopColor: colors.alto
   },
   contentContainer: {
+    paddingLeft: 20,
     flex: 1,
-    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
+    flexDirection: 'row',
+    justifyContent: 'flex-start'
   },
   text1: {
-    fontSize: 12,
-    fontWeight: 'bold',
-    marginBottom: 3,
-    width: '100%'
+    fontSize: 15,
+    fontFamily: 'Source Sans Pro',
+    width: '100%',
+    fontWeight: '600',
+    marginRight: 2
   },
   text2: {
-    fontSize: 10,
-    color: colors.dustyGray,
-    width: '100%'
+    fontSize: 15,
+    fontFamily: 'Source Sans Pro',
+    width: '100%',
+    fontWeight: '400'
   }
 });

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 }}
     />
   );
 }