agora-appbuilder-core 4.0.0-api.5 → 4.0.0-api.6

package/template/src/atoms/ActionMenu.tsx

@@ -16,14 +16,18 @@ import {IconsInterface} from '../atoms/CustomIcon';
 import ThemeConfig from '../theme';
 import {isWebInternal} from '../utils/common';
 import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+import Toggle from './Toggle';
 
 export interface ActionMenuItem {
+  isExternalIcon?: boolean;
+  externalIconString?: string;
   isBase64Icon?: boolean;
   icon: keyof IconsInterface;
   onHoverIcon?: keyof IconsInterface;
   iconColor: string;
   textColor: string;
   title: string;
+  toggleStatus?: boolean;
   callback: () => void;
   onHoverCallback?: (isHovered: boolean) => void;
   onHoverContent?: JSX.Element;
@@ -58,10 +62,13 @@ const ActionMenu = (props: ActionMenuProps) => {
     return items?.map(
       (
         {
-          icon,
+          icon = '',
           onHoverIcon,
           isBase64Icon = false,
+          isExternalIcon = false,
+          externalIconString = '',
           title,
+          toggleStatus,
           callback,
           iconColor,
           textColor,
@@ -98,20 +105,45 @@ const ActionMenu = (props: ActionMenuProps) => {
                 onPress={callback}
                 key={icon + index}>
                 <View style={styles.iconContainer}>
-                  <ImageIcon
-                    base64={isBase64Icon}
-                    iconType="plain"
-                    iconSize={20}
-                    name={
-                      isHovered && onHoverIcon && !disabled ? onHoverIcon : icon
-                    }
-                    tintColor={iconColor}
-                  />
+                  {isExternalIcon ? (
+                    <ImageIcon
+                      base64={isBase64Icon}
+                      base64TintColor={iconColor}
+                      iconType="plain"
+                      iconSize={20}
+                      icon={externalIconString}
+                      tintColor={iconColor}
+                    />
+                  ) : (
+                    <ImageIcon
+                      base64={isBase64Icon}
+                      base64TintColor={iconColor}
+                      iconType="plain"
+                      iconSize={20}
+                      name={
+                        isHovered && onHoverIcon && !disabled
+                          ? onHoverIcon
+                          : icon
+                      }
+                      tintColor={iconColor}
+                    />
+                  )}
                 </View>
                 <Text
                   style={[styles.text, textColor ? {color: textColor} : {}]}>
                   {title}
                 </Text>
+                {toggleStatus !== undefined && toggleStatus !== null ? (
+                  <View style={styles.toggleContainer}>
+                    <Toggle
+                      disabled={disabled}
+                      isEnabled={toggleStatus}
+                      toggleSwitch={callback}
+                    />
+                  </View>
+                ) : (
+                  <></>
+                )}
               </TouchableOpacity>
             </>
           )}
@@ -178,7 +210,7 @@ const styles = StyleSheet.create({
   modalView: {
     //don't added overflow: hidden, bottombar minimized version layout popup will be shown in the overflow
     position: 'absolute',
-    width: 230,
+    // width: 230,
     backgroundColor: $config.CARD_LAYER_4_COLOR,
     borderRadius: 4,
     shadowColor: '#000',
@@ -219,12 +251,19 @@ const styles = StyleSheet.create({
     marginVertical: 12,
     marginLeft: 12,
   },
+  toggleContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 12,
+    marginLeft: 'auto',
+  },
   text: {
     paddingVertical: 14,
     color: $config.SECONDARY_ACTION_COLOR,
     fontSize: ThemeConfig.FontSize.normal,
     fontWeight: '400',
     fontFamily: ThemeConfig.FontFamily.sansPro,
+    marginRight: 8,
   },
   backDrop: {
     position: 'absolute',

package/template/src/atoms/Avatar.tsx

@@ -0,0 +1,51 @@
+import {Text, View} from 'react-native';
+import React from 'react';
+import ThemeConfig from '../theme';
+import {isWeb} from '../utils/common';
+
+const Avatar = ({name, containerStyle, textStyle}) => {
+  return (
+    <View
+      style={[
+        containerStyle,
+        {
+          alignSelf: 'center',
+          alignContent: 'center',
+          justifyContent: 'center',
+        },
+      ]}>
+      <PlatformWrapper>
+        <Text
+          style={[
+            textStyle,
+            {
+              fontFamily: ThemeConfig.FontFamily.sansPro,
+              alignSelf: 'center',
+              textAlign: 'center',
+            },
+          ]}>
+          {name}
+        </Text>
+      </PlatformWrapper>
+    </View>
+  );
+};
+
+const PlatformWrapper = ({children}) => {
+  return isWeb() ? (
+    <div
+      style={{
+        userSelect: 'none',
+        MozUserSelect: 'none',
+        WebkitUserSelect: 'none',
+        msUserSelect: 'none',
+        alignSelf: 'center',
+      }}>
+      {children}
+    </div>
+  ) : (
+    <>{children}</>
+  );
+};
+
+export default Avatar;

package/template/src/atoms/Card.tsx

@@ -5,18 +5,29 @@ import ThemeConfig from '../theme';
 
 interface CardProps {
   style?: ViewStyle;
+  margin?: 'dense' | 'normal';
+  padding?: 'dense' | 'normal';
   children?: React.ReactNode;
+  cardContainerStyle?: ViewStyle;
 }
 
 const Card = (props: CardProps) => {
-  const {style, children, ...rest} = props;
-  const styles = useStyles();
+  const {
+    style,
+    margin = 'normal',
+    padding = 'normal',
+    children,
+    cardContainerStyle = {},
+    ...rest
+  } = props;
+  const styles = useStyles(margin, padding);
   return (
     <View
       style={[
         styles.root,
         isMobileUA() ? styles.mobile : styles.desktop,
         style,
+        cardContainerStyle,
       ]}
       {...rest}>
       {children}
@@ -26,7 +37,7 @@ const Card = (props: CardProps) => {
 
 export default Card;
 
-const useStyles = () => {
+const useStyles = (margin: 'dense' | 'normal', padding: 'dense' | 'normal') => {
   const getResponsiveValue = useResponsive();
   return StyleSheet.create({
     root: {
@@ -39,23 +50,25 @@ const useStyles = () => {
     },
     mobile: {
       paddingHorizontal: 16,
-      paddingTop: 20,
-      paddingBottom: 40,
+      paddingVertical: 20,
       justifyContent: 'space-between',
     },
     desktop: {
       justifyContent: 'center',
       alignSelf: 'center',
       borderWidth: 1,
-      paddingHorizontal: getResponsiveValue(60),
-      paddingVertical: getResponsiveValue(60),
+      paddingHorizontal:
+        padding === 'dense' ? getResponsiveValue(30) : getResponsiveValue(60),
+      paddingVertical:
+        padding === 'dense' ? getResponsiveValue(30) : getResponsiveValue(60),
+      margin:
+        margin === 'dense' ? getResponsiveValue(20) : getResponsiveValue(40),
       borderRadius: ThemeConfig.BorderRadius.extraLarge,
       borderColor: $config.CARD_LAYER_3_COLOR,
       shadowColor: $config.HARD_CODED_BLACK_COLOR,
       shadowOffset: {width: 0, height: 4},
       shadowOpacity: 0.1,
       shadowRadius: 20,
-      margin: getResponsiveValue(40),
     },
   });
 };

package/template/src/atoms/Carousel.native.tsx

@@ -0,0 +1,105 @@
+import React, {useState} from 'react';
+import {View, StyleSheet, Dimensions, Pressable} from 'react-native';
+import {FlatList} from 'react-native-gesture-handler';
+
+const {width} = Dimensions.get('window');
+
+interface CarouselItem {
+  id: string;
+  component: React.ReactNode;
+}
+
+interface CarouselProps {
+  data: CarouselItem[];
+}
+
+const Carousel: React.FC<CarouselProps> = ({data}) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  const flatListRef = React.useRef<FlatList | null>(null);
+
+  const handleScroll = event => {
+    const {contentOffset} = event.nativeEvent;
+    const index = Math.round(contentOffset.x / width);
+    setActiveIndex(index);
+  };
+  const renderItem = ({item}: {item: CarouselItem}) => {
+    return <View style={[styles.item, {width: width}]}>{item.component}</View>;
+  };
+
+  const scrollToIndex = (index: number) => {
+    if (flatListRef.current) {
+      flatListRef.current.scrollToOffset({
+        offset: index * width,
+        animated: true,
+      });
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <FlatList
+        ref={flatListRef}
+        data={data}
+        renderItem={renderItem}
+        horizontal
+        pagingEnabled
+        showsHorizontalScrollIndicator={false}
+        keyExtractor={(_, index) => index.toString()}
+        onScroll={handleScroll}
+      />
+      <View style={styles.indicatorContainer}>
+        {data.map((_, index) => (
+          <Pressable
+            key={index}
+            onPress={() => {
+              scrollToIndex(index);
+              setActiveIndex(index);
+            }}
+            hitSlop={5} // to increase clickable area
+          >
+            {({pressed}) => (
+              <View
+                style={[
+                  styles.dot,
+                  index === activeIndex && styles.activeDot,
+                  pressed && styles.pressedDot,
+                ]}
+              />
+            )}
+          </Pressable>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  item: {},
+  indicatorContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+
+    width: '100%',
+    marginBottom: 24,
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: $config.SEMANTIC_NEUTRAL,
+    marginHorizontal: 5,
+  },
+  activeDot: {
+    backgroundColor: $config.FONT_COLOR,
+  },
+  pressedDot: {
+    backgroundColor: $config.PRIMARY_ACTION_BRAND_COLOR,
+  },
+});
+
+export default Carousel;

package/template/src/atoms/Carousel.tsx

@@ -0,0 +1,103 @@
+import React, {useState} from 'react';
+import {View, FlatList, StyleSheet, Dimensions, Pressable} from 'react-native';
+
+const {width} = Dimensions.get('window');
+
+interface CarouselItem {
+  id: string;
+  component: React.ReactNode;
+}
+
+interface CarouselProps {
+  data: CarouselItem[];
+}
+
+const Carousel: React.FC<CarouselProps> = ({data}) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  const flatListRef = React.useRef<FlatList | null>(null);
+
+  const handleScroll = event => {
+    const {contentOffset} = event.nativeEvent;
+    const index = Math.round(contentOffset.x / width);
+    setActiveIndex(index);
+  };
+  const renderItem = ({item}: {item: CarouselItem}) => {
+    return <View style={[styles.item, {width: width}]}>{item.component}</View>;
+  };
+
+  const scrollToIndex = (index: number) => {
+    if (flatListRef.current) {
+      flatListRef.current.scrollToOffset({
+        offset: index * width,
+        animated: true,
+      });
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <FlatList
+        ref={flatListRef}
+        data={data}
+        renderItem={renderItem}
+        horizontal
+        pagingEnabled
+        showsHorizontalScrollIndicator={false}
+        keyExtractor={(_, index) => index.toString()}
+        onScroll={handleScroll}
+      />
+      <View style={styles.indicatorContainer}>
+        {data.map((_, index) => (
+          <Pressable
+            key={index}
+            onPress={() => {
+              scrollToIndex(index);
+              setActiveIndex(index);
+            }}
+            hitSlop={5} // to increase clickable area
+          >
+            {({pressed}) => (
+              <View
+                style={[
+                  styles.dot,
+                  index === activeIndex && styles.activeDot,
+                  pressed && styles.pressedDot,
+                ]}
+              />
+            )}
+          </Pressable>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  item: {},
+  indicatorContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+    marginBottom: 24,
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: $config.SEMANTIC_NEUTRAL,
+    marginHorizontal: 5,
+  },
+  activeDot: {
+    backgroundColor: $config.FONT_COLOR,
+  },
+  pressedDot: {
+    backgroundColor: $config.PRIMARY_ACTION_BRAND_COLOR,
+  },
+});
+
+export default Carousel;

package/template/src/atoms/Checkbox.tsx

@@ -0,0 +1,98 @@
+import React, {useState} from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Platform,
+  StyleSheet,
+  TextStyle,
+} from 'react-native';
+
+import ThemeConfig from '../theme';
+import ImageIcon from './ImageIcon';
+
+interface CheckboxProps {
+  label: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  labelStye?: TextStyle;
+  disabled?: boolean;
+}
+
+const Checkbox: React.FC<CheckboxProps> = ({
+  label,
+  checked,
+  onChange,
+  disabled = false,
+  labelStye = {},
+}) => {
+  const [isChecked, setIsChecked] = useState(checked);
+
+  React.useEffect(() => {
+    setIsChecked(checked);
+  }, [checked]);
+
+  const handleCheckboxToggle = () => {
+    if (disabled) return;
+    const updatedChecked = !isChecked;
+    setIsChecked(updatedChecked);
+    onChange(updatedChecked);
+  };
+
+  return (
+    <TouchableOpacity onPress={handleCheckboxToggle} style={styles.container}>
+      <View
+        style={[styles.checkboxContainer, isChecked && styles.fillSelected]}>
+        {isChecked && (
+          <ImageIcon
+            iconType="plain"
+            name={'tick'}
+            iconSize={8}
+            tintColor={$config.FONT_COLOR}
+          />
+        )}
+      </View>
+      <Text
+        style={[
+          styles.label,
+          labelStye,
+          !isChecked && disabled && styles.disabledText,
+        ]}>
+        {label}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  checkboxContainer: {
+    width: 20,
+    height: 20,
+    borderWidth: 2,
+    borderColor: $config.SEMANTIC_NEUTRAL,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  checkIcon: {
+    position: 'absolute',
+  },
+  label: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.normal,
+    color: $config.SECONDARY_ACTION_COLOR,
+    marginLeft: 14,
+  },
+  fillSelected: {
+    backgroundColor: $config.PRIMARY_ACTION_BRAND_COLOR,
+  },
+  disabledText: {
+    color: $config.SEMANTIC_NEUTRAL,
+  },
+});
+
+export default Checkbox;

package/template/src/atoms/CircularProgress.tsx

@@ -27,7 +27,6 @@ const CircularProgress = (props: CircleProgressProps) => {
     const maxPercentage = (100 * seconds) / timer;
     const strokeDashoffset =
       circleCircumference - (circleCircumference * maxPercentage) / 100;
-    console.log('seonds', seconds);
     setStrokeDashoffset(strokeDashoffset);
     if (seconds <= 0) {
       clearInterval(timeInterval);

package/template/src/atoms/ClipboardIconButton.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import {View, TouchableOpacity, StyleSheet} from 'react-native';
+import {
+  SHARE_LINK_CONTENT_TYPE,
+  useShareLink,
+} from '../components/useShareLink';
+import Spacer from './Spacer';
+import ImageIcon from './ImageIcon';
+import Tooltip from './Tooltip';
+import ThemeConfig from '../theme';
+import {shareRoomCopyBtnTooltipText} from '../language/default-labels/shareLinkScreenLabels';
+import {useString} from '../utils/useString';
+
+interface Props {
+  text: SHARE_LINK_CONTENT_TYPE;
+  variant?: 'none' | 'primary' | 'secondary';
+  size?: number;
+}
+
+const ClipboardIconButton = (props: Props) => {
+  const {copyShareLinkToClipboard} = useShareLink();
+  const copiedToClipboard = useString(shareRoomCopyBtnTooltipText)();
+  const {text, variant = 'primary', size = 26} = props;
+
+  const getTintColor = () => {
+    if (variant == 'primary') {
+      return $config.PRIMARY_ACTION_BRAND_COLOR;
+    }
+    return $config.SECONDARY_ACTION_COLOR;
+  };
+  return (
+    <View style={style.iconContainer}>
+      <Tooltip
+        isClickable
+        onPress={() => {
+          copyShareLinkToClipboard(text);
+        }}
+        toolTipIcon={
+          <>
+            <ImageIcon
+              iconType="plain"
+              name="tick-fill"
+              tintColor={$config.SEMANTIC_SUCCESS}
+            />
+            <Spacer size={8} horizontal={true} />
+          </>
+        }
+        toolTipMessage={copiedToClipboard}
+        renderContent={(isToolTipVisible, setToolTipVisible) => {
+          return (
+            <TouchableOpacity
+              onPress={() => {
+                copyShareLinkToClipboard(text, () => {
+                  setToolTipVisible(true);
+                });
+                //setToolTipVisible(true);
+              }}>
+              <ImageIcon
+                iconSize={size}
+                iconType="plain"
+                name="clipboard"
+                tintColor={getTintColor()}
+              />
+            </TouchableOpacity>
+          );
+        }}
+      />
+    </View>
+  );
+};
+
+export default ClipboardIconButton;
+
+export const style = StyleSheet.create({
+  iconContainer: {
+    flex: 0.1,
+    minWidth: 25,
+    backgroundColor: $config.INPUT_FIELD_BACKGROUND_COLOR,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderColor: $config.INPUT_FIELD_BORDER_COLOR,
+    borderLeftWidth: 0,
+    borderRightWidth: 1,
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderTopRightRadius: ThemeConfig.BorderRadius.medium,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: ThemeConfig.BorderRadius.medium,
+    borderTopLeftRadius: 0,
+  },
+});

package/template/src/atoms/CustomIcon.tsx

@@ -85,4 +85,49 @@ export interface IconsInterface {
   'video-on-outlined': string;
   'video-off-filled': string;
   'video-off-outlined': string;
+  celebration: string;
+  'down-arrow': string;
+  'closed-caption': string;
+  globe: string;
+  'lang-select': string;
+  search: string;
+  captions: string;
+  'captions-off': string;
+  download: string;
+  'transcript-stop': string;
+  transcript: string;
+  'view-last': string;
+  'transcript-mode': string;
+  vb: string;
+  'vb-blur': string;
+  '': string;
+  done: string;
+  'done-fill': string;
+  blur: string;
+  add: string;
+  'upload-new': string;
+  'zoom-in': string;
+  'zoom-out': string;
+  undo: string;
+  redo: string;
+  light: string;
+  dark: string;
+  line: string;
+  square: string;
+  circle: string;
+  arrow: string;
+  gradient: string;
+  'area-selection': string;
+  'clear-all': string;
+  erasor: string;
+  highlight: string;
+  move: string;
+  pen: string;
+  selector: string;
+  shapes: string;
+  text: string;
+  'color-picker': string;
+  'fit-to-screen': string;
+  warning: string;
+  'view-only': string;
 }