agora-appbuilder-core 4.0.0 → 4.0.2

package/template/src/atoms/DropDownMulti.tsx

@@ -0,0 +1,349 @@
+import React, {
+  FC,
+  ReactElement,
+  useEffect,
+  useRef,
+  useState,
+  useMemo,
+} from 'react';
+import {
+  FlatList,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  Modal,
+  View,
+  Image,
+} from 'react-native';
+import {isWebInternal} from '../utils/common';
+import ThemeConfig from '../theme';
+import ImageIcon from './ImageIcon';
+import {IconsInterface} from './CustomIcon';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+import {LanguageType, langData as data} from '../subComponents/caption/utils';
+import IconButton from './IconButton';
+import Checkbox from './Checkbox';
+
+interface Props {
+  icon?: keyof IconsInterface;
+
+  error: boolean;
+  setError: React.Dispatch<React.SetStateAction<boolean>>;
+  selectedValues: LanguageType[];
+  setSelectedValues: React.Dispatch<React.SetStateAction<LanguageType[]>>;
+  defaultSelectedValues?: LanguageType[];
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const DropdownMulti: FC<Props> = ({
+  defaultSelectedValues,
+  selectedValues,
+  setSelectedValues,
+  error,
+  setError,
+  icon,
+  isOpen,
+  setIsOpen,
+}) => {
+  const DropdownButton = useRef();
+  const maxHeight = 170;
+
+  useEffect(() => {
+    setSelectedValues(defaultSelectedValues);
+    setIsOpen(() => false);
+    if (isWebInternal()) {
+      window.addEventListener('resize', () => {
+        setIsOpen(false);
+      });
+    }
+  }, []);
+
+  const toggleDropdown = (): void => {
+    isOpen ? closeDropdown() : openDropdown();
+  };
+
+  const openDropdown = (): void => {
+    setIsOpen(true);
+  };
+
+  const closeDropdown = (): void => {
+    setIsOpen(false);
+  };
+
+  const onItemPress = (item): void => {
+    // // Dropdown should rely on the provided
+    // setSelected(item);
+    //onSelect(item);
+    //setIsOpen(false);
+
+    const isSelected = selectedValues.includes(item.value);
+    let updatedValues = [...selectedValues];
+
+    if (isSelected) {
+      // Item is already selected, remove it if there are more than one selected languages
+      if (selectedValues.length > 0) {
+        updatedValues = selectedValues.filter((value) => value !== item.value);
+      }
+    } else {
+      // Item is not selected, add it
+      if (selectedValues.length < 2) {
+        updatedValues = [...selectedValues, item.value];
+      } else {
+        // Max selection limit reached, replace the second selected value
+        //  updatedValues = [selectedValues[1], item.value];
+      }
+    }
+
+    setSelectedValues(updatedValues);
+    // onSelect(updatedValues);
+  };
+
+  // renders each lang checkbox row
+  const renderItem = ({item}): ReactElement<any, any> => {
+    const isSelected = selectedValues.includes(item.value);
+    const isUSEngLangSelected = selectedValues.includes('en-US');
+    const isINEngLangSelected = selectedValues.includes('en-IN');
+
+    const isDisabled =
+      (!isSelected && selectedValues.length === 2) ||
+      (item.value === 'en-US' && isINEngLangSelected) ||
+      (item.value === 'en-IN' && isUSEngLangSelected);
+
+    setError(isDisabled || selectedValues.length === 0);
+
+    return (
+      <PlatformWrapper>
+        <View style={styles.itemContainer}>
+          <View style={styles.itemTextContainer}>
+            <Checkbox
+              disabled={isDisabled}
+              checked={isSelected}
+              label={item.label}
+              labelStye={styles.itemText}
+              onChange={() => onItemPress(item)}
+            />
+          </View>
+        </View>
+      </PlatformWrapper>
+    );
+  };
+
+  // renders multiselect lang dropdown
+  const renderDropdown = (): ReactElement<any, any> => {
+    return (
+      <View style={[styles.dropdown]}>
+        <FlatList
+          showsVerticalScrollIndicator={true}
+          data={data}
+          renderItem={renderItem}
+          keyExtractor={(item, index) => index.toString()}
+          style={{maxHeight}}
+        />
+      </View>
+    );
+  };
+
+  const selectedLabels = selectedValues.map((value) => {
+    const selectedLanguage = data.find((item) => item.value === value);
+    return selectedLanguage ? (
+      <View style={styles.selectedLang}>
+        <TouchableOpacity
+          onPress={() => {
+            const updatedValues = selectedValues.filter(
+              (value) => value !== selectedLanguage.value,
+            );
+            setSelectedValues(updatedValues);
+          }}>
+          <ImageIcon
+            iconType="plain"
+            name={'close'}
+            iconSize={20}
+            tintColor={$config.CARD_LAYER_5_COLOR}
+          />
+        </TouchableOpacity>
+
+        <Text numberOfLines={1} style={styles.dropdownOptionText}>
+          {selectedLanguage.label}
+        </Text>
+      </View>
+    ) : (
+      <></>
+    );
+  });
+  const formattedSelectedLanguages = selectedLabels; //selectedLabels.join(', ');
+
+  return (
+    <View>
+      {/* Dropdown Header */}
+      <TouchableOpacity
+        disabled={!data || !data.length}
+        ref={DropdownButton}
+        style={[
+          styles.dropdownOptionContainer,
+          !data || !data.length
+            ? {opacity: ThemeConfig.EmphasisOpacity.disabled}
+            : {},
+          isOpen
+            ? {
+                borderBottomLeftRadius: 0,
+                borderBottomRightRadius: 0,
+                borderBottomWidth: 0,
+                borderBottomColor: 'transparent',
+              }
+            : {},
+        ]}
+        onPress={toggleDropdown}>
+        <View
+          style={{flex: 1, justifyContent: 'flex-start', flexDirection: 'row'}}>
+          {/* Dropdown start Icon */}
+          {icon ? (
+            <View style={styles.dropdownIconContainer}>
+              <ImageIcon
+                iconType="plain"
+                name={icon}
+                iconSize={20}
+                tintColor={$config.SEMANTIC_NEUTRAL}
+              />
+            </View>
+          ) : (
+            <></>
+          )}
+          {/* Dropdown Text */}
+          <View
+            style={[
+              styles.dropdownOptionTextContainer,
+              selectedValues.length === 2 && {flex: 0.9},
+            ]}>
+            {formattedSelectedLanguages}
+          </View>
+        </View>
+        {/* Dropdown end Icon */}
+        <View style={styles.dropdownIconContainer}>
+          <ImageIcon
+            iconType="plain"
+            name={isOpen ? 'arrow-up' : 'arrow-down'}
+            tintColor={$config.SECONDARY_ACTION_COLOR}
+          />
+        </View>
+      </TouchableOpacity>
+      {/* Dropdown Body */}
+      {isOpen ? renderDropdown() : <></>}
+    </View>
+  );
+};
+
+const PlatformWrapper = ({children}) => {
+  const [isHovered, setIsHovered] = React.useState(false);
+  return isWebInternal() ? (
+    <div
+      style={{
+        backgroundColor: isHovered
+          ? $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['20%']
+          : 'transparent',
+        cursor: isHovered ? 'pointer' : 'auto',
+      }}
+      onMouseEnter={() => {
+        setIsHovered(true);
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+      }}>
+      {children}
+    </div>
+  ) : (
+    <TouchableOpacity>{children}</TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  dropdownOptionContainer: {
+    flexDirection: 'row',
+    backgroundColor: $config.INPUT_FIELD_BACKGROUND_COLOR,
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderRightWidth: 1,
+    borderLeftWidth: 1,
+    borderColor: $config.INPUT_FIELD_BORDER_COLOR,
+    borderRadius: ThemeConfig.BorderRadius.medium,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    justifyContent: 'space-between',
+  },
+  dropdownOptionTextContainer: {
+    alignSelf: 'center',
+    flexDirection: 'row',
+  },
+  dropdownOptionText: {
+    textAlign: 'left',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.normal,
+    color: $config.FONT_COLOR,
+    marginLeft: 4,
+    flex: 1,
+  },
+  dropdownIconContainer: {
+    alignSelf: 'center',
+  },
+  dropdown: {
+    // position: 'relative',
+    backgroundColor: $config.INPUT_FIELD_BACKGROUND_COLOR,
+    borderBottomColor: $config.INPUT_FIELD_BORDER_COLOR,
+    borderLeftColor: $config.INPUT_FIELD_BORDER_COLOR,
+    borderRightColor: $config.INPUT_FIELD_BORDER_COLOR,
+    borderTopColor: $config.PRIMARY_ACTION_BRAND_COLOR,
+    borderBottomLeftRadius: ThemeConfig.BorderRadius.medium,
+    borderBottomRightRadius: ThemeConfig.BorderRadius.medium,
+    borderBottomWidth: 1,
+    borderLeftWidth: 1,
+    borderRightWidth: 1,
+    borderTopWidth: 2,
+    shadowColor: $config.HARD_CODED_BLACK_COLOR,
+    shadowOffset: {width: 0, height: 4},
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  selectedLang: {
+    paddingVertical: 4,
+    paddingRight: 16,
+    paddingLeft: 8,
+    backgroundColor: $config.CARD_LAYER_4_COLOR,
+    borderRadius: 6,
+    flex: 1,
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    flexDirection: 'row',
+    marginRight: 8,
+  },
+
+  overlay: {
+    width: '100%',
+    height: '100%',
+  },
+  itemContainer: {
+    minHeight: 40,
+    flex: 1,
+    flexDirection: 'row',
+  },
+  itemTextContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignSelf: 'center',
+    paddingLeft: 16,
+  },
+  itemText: {
+    paddingVertical: 12,
+  },
+  itemTextSelected: {
+    color: $config.PRIMARY_ACTION_BRAND_COLOR,
+  },
+  itemTextSelectedContainer: {
+    flex: 0.2,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default DropdownMulti;

package/template/src/atoms/Dropdown.tsx

@@ -43,7 +43,7 @@ const Dropdown: FC<Props> = ({
   const [dropdownPos, setDropdownPos] = useState({top: 0, left: 0, width: 0});
   const [isHovered, setIsHovered] = React.useState(false);
   const selected = useMemo(() => {
-    return data.find((dataItem) => dataItem.value === selectedValue);
+    return data.find(dataItem => dataItem.value === selectedValue);
   }, [selectedValue, data]);
 
   useEffect(() => {
@@ -208,7 +208,7 @@ const PlatformWrapper = ({children, onPress}) => {
       onMouseLeave={() => {
         setIsHovered(false);
       }}
-      onClick={(e) => {
+      onClick={e => {
         e.preventDefault();
         onPress && onPress();
       }}>
@@ -244,7 +244,7 @@ const styles = StyleSheet.create({
     fontFamily: ThemeConfig.FontFamily.sansPro,
     fontWeight: '400',
     fontSize: ThemeConfig.FontSize.normal,
-    color: $config.FONT_COLOR,
+    color: $config.FONT_COLOR + hexadecimalTransparency['70%'],
     paddingLeft: 8,
     paddingVertical: 20,
   },

package/template/src/atoms/IconButton.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import {
   ViewStyle,
   TextStyle,
@@ -7,6 +7,7 @@ import {
   Pressable,
   PressableProps,
   TouchableOpacity,
+  View,
 } from 'react-native';
 import ImageIcon, {ImageIconProps} from './ImageIcon';
 import {isMobileUA, isWebInternal} from '../utils/common';
@@ -17,6 +18,7 @@ export interface BtnTextProps {
   textStyle?: TextStyle;
   textColor?: string;
   text?: string;
+  numberOfLines?: number;
 }
 
 export interface IconButtonProps {
@@ -24,6 +26,8 @@ export interface IconButtonProps {
   onPress?: PressableProps['onPress'];
   disabled?: boolean;
   containerStyle?: ViewStyle;
+  rootContainerStyle?: ViewStyle;
+  iconContainerStyle?: ViewStyle;
   btnTextProps?: BtnTextProps;
   iconProps: ImageIconProps;
   toolTipMessage?: string;
@@ -33,16 +37,22 @@ export interface IconButtonProps {
   hoverEffect?: boolean;
   hoverEffectStyle?: ViewStyle;
   placement?: 'top' | 'bottom' | 'left' | 'right' | 'center';
+  showTooltipArrow?: boolean;
   isClickable?: boolean;
+  onHoverCallBack?: (isHovered: boolean) => void;
 }
 
 const IconButton = (props: IconButtonProps) => {
   return (
-    <ButtonWrapper {...props}>
-      <ImageIcon {...props.iconProps} isHovered={props?.isToolTipVisible} />
+    <IconButtonWrapper {...props}>
+      {props?.iconProps ? (
+        <ImageIcon {...props.iconProps} isHovered={props?.isToolTipVisible} />
+      ) : (
+        <></>
+      )}
       {props?.btnTextProps?.text ? (
         <Text
-          numberOfLines={1}
+          numberOfLines={props?.btnTextProps?.numberOfLines || 1}
           ellipsizeMode="tail"
           style={[
             styles.btnTextStyle,
@@ -56,7 +66,21 @@ const IconButton = (props: IconButtonProps) => {
       ) : (
         <></>
       )}
-    </ButtonWrapper>
+    </IconButtonWrapper>
+  );
+};
+
+const IconButtonWrapper = props => {
+  const {isOnActionSheet = false, children, rootContainerStyle} = props;
+  if (!isOnActionSheet) {
+    return <ButtonWrapper {...props}>{children}</ButtonWrapper>;
+  }
+  const [child1, ...restChildren] = React.Children.toArray(children);
+  return (
+    <View style={[styles.rootContainerStyle, rootContainerStyle]}>
+      <ButtonWrapper {...props}>{child1}</ButtonWrapper>
+      {restChildren}
+    </View>
   );
 };
 
@@ -64,7 +88,7 @@ const ButtonWrapper = ({children, ...props}) => {
   const isMobileView = isMobileUA();
   return isMobileView ? (
     <TouchableOpacity
-      ref={(ref) => props?.setRef && props.setRef(ref)}
+      ref={ref => props?.setRef && props.setRef(ref)}
       style={
         !props.isOnActionSheet && [
           styles.containerStyle,
@@ -80,7 +104,7 @@ const ButtonWrapper = ({children, ...props}) => {
     </TouchableOpacity>
   ) : (
     <Pressable
-      ref={(ref) => props?.setRef && props.setRef(ref)}
+      ref={ref => props?.setRef && props.setRef(ref)}
       style={
         !props.isOnActionSheet && [
           styles.containerStyle,
@@ -115,13 +139,28 @@ const PlatformWrapper = ({children, ...props}) => {
 
 const IconButtonWithToolTip = (props: IconButtonProps) => {
   const [isHovered, setIsHovered] = React.useState(false);
-  const {placement = 'top', isClickable = false} = props;
+
+  useEffect(() => {
+    if (isHovered) {
+      props?.onHoverCallBack && props?.onHoverCallBack(true);
+    } else {
+      props?.onHoverCallBack && props?.onHoverCallBack(false);
+    }
+  }, [isHovered]);
+
+  const {
+    placement = 'top',
+    isClickable = false,
+    showTooltipArrow = true,
+  } = props;
   if (props?.toolTipMessage) {
     return (
       <ToolTip
         isClickable={isClickable}
         toolTipMessage={props.toolTipMessage}
+        //@ts-ignore
         placement={placement}
+        showTooltipArrow={showTooltipArrow}
         renderContent={(isToolTipVisible, setToolTipVisible) => {
           return (
             <IconButton
@@ -130,7 +169,8 @@ const IconButtonWithToolTip = (props: IconButtonProps) => {
               setToolTipVisible={setToolTipVisible}
             />
           );
-        }}></ToolTip>
+        }}
+      />
     );
   }
   return (
@@ -147,6 +187,9 @@ const IconButtonWithToolTip = (props: IconButtonProps) => {
 export default IconButtonWithToolTip;
 
 const styles = StyleSheet.create({
+  rootContainerStyle: {
+    alignItems: 'center',
+  },
   containerStyle: {
     flex: 1,
     flexDirection: 'column',

package/template/src/atoms/ImageIcon.tsx

@@ -17,7 +17,8 @@ import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 
 export interface ImageIconProps {
   tintColor?: string;
-  name: keyof IconsInterface;
+  name?: keyof IconsInterface;
+  icon?: string;
   iconSize?: number;
   iconContainerStyle?: ViewStyle;
   iconBackgroundColor?: string;
@@ -31,13 +32,16 @@ export interface ImageIconProps {
 }
 
 const ImageIcon = (props: ImageIconProps) => {
+  let defaultSize = $config.ICON_TEXT ? 26 : 24;
   const {
     name,
-    iconSize = 26,
+    icon = undefined,
+    iconSize = defaultSize,
     tintColor,
     base64 = false,
     base64TintColor = '',
     iconType = 'round',
+    iconContainerStyle,
   } = props;
   return (
     <View
@@ -53,7 +57,7 @@ const ImageIcon = (props: ImageIconProps) => {
         style={[
           {alignItems: 'center'},
           iconType === 'round'
-            ? {padding: 13, borderRadius: 50}
+            ? {padding: $config.ICON_TEXT ? 13 : 12, borderRadius: 50}
             : {padding: 0, borderRadius: 0},
           iconType === 'round' && props?.isHovered
             ? {
@@ -61,7 +65,7 @@ const ImageIcon = (props: ImageIconProps) => {
                   $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['20%'],
               }
             : {},
-          props?.iconContainerStyle,
+          iconContainerStyle,
         ]}>
         {props?.showWarningIcon ? (
           <View style={{position: 'absolute', top: -2.5, right: -2}}>
@@ -77,11 +81,20 @@ const ImageIcon = (props: ImageIconProps) => {
         {base64 ? (
           <UIKitImageIcon
             tintColor={base64TintColor}
+            //@ts-ignore
             name={name}
             style={{width: iconSize, height: iconSize}}
           />
-        ) : (
+        ) : icon ? (
+          <UIKitImageIcon
+            tintColor={tintColor}
+            icon={icon}
+            style={{width: iconSize, height: iconSize}}
+          />
+        ) : name ? (
           <CustomIcon name={name} color={tintColor} size={iconSize} />
+        ) : (
+          <></>
         )}
       </View>
     </View>

package/template/src/atoms/InlineNotification.tsx

@@ -0,0 +1,81 @@
+import {StyleSheet, Text, View, ViewStyle} from 'react-native';
+import React from 'react';
+import ThemeConfig from '../theme';
+import ImageIcon from './ImageIcon';
+import {isMobileUA} from '../../src/utils/common';
+
+const InlineNotification = (props: {
+  text: string;
+  customStyle?: ViewStyle;
+  warning?: boolean;
+}) => {
+  const {text, customStyle, warning = false} = props;
+  const isMobile = isMobileUA();
+  return (
+    <View
+      style={[
+        styles.container,
+        isMobile && styles.mobileContainer,
+        customStyle ? customStyle : {},
+      ]}>
+      {!warning && !isMobile && (
+        <View style={styles.iconStyleView}>
+          <ImageIcon
+            base64={false}
+            iconSize={20}
+            iconType="plain"
+            name={'video-off'}
+            tintColor={$config.SEMANTIC_NEUTRAL}
+          />
+        </View>
+      )}
+      {warning && !isMobile && (
+        <View style={styles.iconStyleView}>
+          <ImageIcon
+            base64={true}
+            iconSize={20}
+            iconType="plain"
+            name={'warning'}
+            tintColor={$config.SEMANTIC_NEUTRAL}
+          />
+        </View>
+      )}
+      <Text style={styles.text}>{text}</Text>
+    </View>
+  );
+};
+
+export default InlineNotification;
+
+const styles = StyleSheet.create({
+  text: {
+    color: $config.SECONDARY_ACTION_COLOR,
+    fontSize: 12,
+    lineHeight: 16,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    flex: 1,
+  },
+  mobileContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    borderRadius: 12,
+    backgroundColor: $config.CARD_LAYER_2_COLOR,
+  },
+  container: {
+    padding: 12,
+    borderRadius: 4,
+    backgroundColor: $config.CARD_LAYER_2_COLOR,
+    marginBottom: 0,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+  },
+  iconStyleView: {
+    marginRight: 8,
+    width: 20,
+    height: 20,
+  },
+});

package/template/src/atoms/InviteInfo.tsx

@@ -1,7 +1,7 @@
 import {StyleSheet, Text, View} from 'react-native';
 import isSDKCheck from '../utils/isSDK';
 import platform from '../subComponents/Platform';
-import {useMeetingInfo} from '../components/meeting-info/useMeetingInfo';
+import {useRoomInfo} from '../components/room-info/useRoomInfo';
 import {
   SHARE_LINK_CONTENT_TYPE,
   useShareLink,
@@ -12,8 +12,8 @@ import React from 'react';
 import IconButton from './IconButton';
 
 const InviteInfo = () => {
-  const meetingUrlText = 'Meeting Link';
-  const meetingIdText = 'Meeting ID';
+  const meetingUrlText = 'Room Link';
+  const meetingIdText = 'Room ID';
   const hostIdText = 'Host ID';
   const attendeeUrlLabel = 'Attendee Link';
   const attendeeIdLabel = 'Attendee ID';
@@ -26,7 +26,7 @@ const InviteInfo = () => {
   const {copyShareLinkToClipboard, getShareLink} = useShareLink();
   const {
     data: {isSeparateHostLink},
-  } = useMeetingInfo();
+  } = useRoomInfo();
 
   const isSDK = isSDKCheck();
   const isWeb = $config.FRONTEND_ENDPOINT || (platform === 'web' && !isSDK);