agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

package/template/src/atoms/IconButton.tsx

@@ -0,0 +1,205 @@
+import React, {useEffect} from 'react';
+import {
+  ViewStyle,
+  TextStyle,
+  Text,
+  StyleSheet,
+  Pressable,
+  PressableProps,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import ImageIcon, {ImageIconProps} from './ImageIcon';
+import {isMobileUA, isWebInternal} from '../utils/common';
+import ToolTip from './Tooltip';
+import ThemeConfig from '../theme';
+
+export interface BtnTextProps {
+  textStyle?: TextStyle;
+  textColor?: string;
+  text?: string;
+  numberOfLines?: number;
+}
+
+export interface IconButtonProps {
+  setRef?: (ref: any) => void;
+  onPress?: PressableProps['onPress'];
+  disabled?: boolean;
+  containerStyle?: ViewStyle;
+  rootContainerStyle?: ViewStyle;
+  iconContainerStyle?: ViewStyle;
+  btnTextProps?: BtnTextProps;
+  iconProps: ImageIconProps;
+  toolTipMessage?: string;
+  isToolTipVisible?: boolean;
+  setToolTipVisible?: React.Dispatch<React.SetStateAction<boolean>>;
+  isOnActionSheet?: boolean;
+  hoverEffect?: boolean;
+  hoverEffectStyle?: ViewStyle;
+  placement?: 'top' | 'bottom' | 'left' | 'right' | 'center';
+  showTooltipArrow?: boolean;
+  isClickable?: boolean;
+  onHoverCallBack?: (isHovered: boolean) => void;
+}
+
+const IconButton = (props: IconButtonProps) => {
+  return (
+    <IconButtonWrapper {...props}>
+      {props?.iconProps ? (
+        <ImageIcon {...props.iconProps} isHovered={props?.isToolTipVisible} />
+      ) : (
+        <></>
+      )}
+      {props?.btnTextProps?.text ? (
+        <Text
+          numberOfLines={props?.btnTextProps?.numberOfLines || 1}
+          ellipsizeMode="tail"
+          style={[
+            styles.btnTextStyle,
+            props?.btnTextProps?.textColor
+              ? {color: props.btnTextProps.textColor}
+              : {},
+            props?.btnTextProps.textStyle,
+          ]}>
+          {props.btnTextProps.text}
+        </Text>
+      ) : (
+        <></>
+      )}
+    </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>
+  );
+};
+
+const ButtonWrapper = ({children, ...props}) => {
+  const isMobileView = isMobileUA();
+  return isMobileView ? (
+    <TouchableOpacity
+      ref={ref => props?.setRef && props.setRef(ref)}
+      style={
+        !props.isOnActionSheet && [
+          styles.containerStyle,
+          props?.containerStyle,
+          props?.hoverEffect && props?.isToolTipVisible
+            ? props?.hoverEffectStyle
+            : {},
+        ]
+      }
+      onPress={props.onPress}
+      disabled={props.disabled}>
+      {children}
+    </TouchableOpacity>
+  ) : (
+    <Pressable
+      ref={ref => props?.setRef && props.setRef(ref)}
+      style={
+        !props.isOnActionSheet && [
+          styles.containerStyle,
+          props?.containerStyle,
+          props?.hoverEffect && props?.isToolTipVisible
+            ? props?.hoverEffectStyle
+            : {},
+        ]
+      }
+      onPress={props.onPress}
+      disabled={props.disabled}>
+      {children}
+    </Pressable>
+  );
+};
+
+const PlatformWrapper = ({children, ...props}) => {
+  return isWebInternal() ? (
+    <div
+      onMouseEnter={() => {
+        props?.setIsHovered(true);
+      }}
+      onMouseLeave={() => {
+        props?.setIsHovered(false);
+      }}>
+      {children}
+    </div>
+  ) : (
+    children
+  );
+};
+
+const IconButtonWithToolTip = (props: IconButtonProps) => {
+  const [isHovered, setIsHovered] = React.useState(false);
+
+  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
+              {...props}
+              isToolTipVisible={isToolTipVisible}
+              setToolTipVisible={setToolTipVisible}
+            />
+          );
+        }}
+      />
+    );
+  }
+  return (
+    <PlatformWrapper isHovered={isHovered} setIsHovered={setIsHovered}>
+      <IconButton
+        {...props}
+        isToolTipVisible={isHovered}
+        setToolTipVisible={setIsHovered}
+      />
+    </PlatformWrapper>
+  );
+};
+
+export default IconButtonWithToolTip;
+
+const styles = StyleSheet.create({
+  rootContainerStyle: {
+    alignItems: 'center',
+  },
+  containerStyle: {
+    flex: 1,
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
+  btnTextStyle: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontSize: ThemeConfig.FontSize.tiny,
+    fontWeight: '400',
+    textAlign: 'center',
+    marginTop: 4,
+  },
+});

package/template/src/atoms/ImageIcon.tsx

@@ -0,0 +1,127 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+import React from 'react';
+import {ViewStyle, View, StyleSheet} from 'react-native';
+import CustomIcon, {IconsInterface} from '../atoms/CustomIcon';
+import {ImageIcon as UIKitImageIcon} from '../../agora-rn-uikit';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+
+export interface ImageIconProps {
+  tintColor?: string;
+  name?: keyof IconsInterface;
+  hoverIconName?: keyof IconsInterface;
+  icon?: string;
+  iconSize?: number;
+  iconContainerStyle?: ViewStyle;
+  iconBackgroundColor?: string;
+  base64?: boolean;
+  hoverBase64?: boolean;
+  base64TintColor?: string;
+  iconType?: 'round' | 'plain';
+  isHovered?: boolean;
+  // hoverEffect?: boolean;
+  // hoverEffectStyle?: ViewStyle;
+  showWarningIcon?: boolean;
+}
+
+const ImageIcon = (props: ImageIconProps) => {
+  let defaultSize = $config.ICON_TEXT ? 26 : 24;
+  const {
+    name,
+    hoverIconName = name,
+    icon = undefined,
+    iconSize = defaultSize,
+    tintColor,
+    base64 = false,
+    hoverBase64 = false,
+    base64TintColor = '',
+    iconType = 'round',
+    iconContainerStyle,
+    isHovered,
+  } = props;
+  return (
+    <View
+      style={[
+        styles.iconContainerStyle,
+        iconType === 'round'
+          ? props?.iconBackgroundColor
+            ? {backgroundColor: props.iconBackgroundColor}
+            : {}
+          : {backgroundColor: 'transparent', borderRadius: 0},
+      ]}>
+      <View
+        style={[
+          {alignItems: 'center'},
+          iconType === 'round'
+            ? {padding: $config.ICON_TEXT ? 13 : 12, borderRadius: 50}
+            : {padding: 0, borderRadius: 0},
+          iconType === 'round' && props?.isHovered
+            ? {
+                backgroundColor:
+                  $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['20%'],
+              }
+            : {},
+          iconContainerStyle,
+        ]}>
+        {props?.showWarningIcon ? (
+          <View style={{position: 'absolute', top: -2.5, right: -2}}>
+            <CustomIcon
+              name="alert"
+              color={$config.SEMANTIC_WARNING}
+              size={24}
+            />
+          </View>
+        ) : (
+          <></>
+        )}
+        {isHovered && hoverBase64 ? (
+          <UIKitImageIcon
+            tintColor={base64TintColor}
+            //@ts-ignore
+            name={hoverIconName}
+            style={{width: iconSize, height: iconSize}}
+          />
+        ) : base64 ? (
+          <UIKitImageIcon
+            tintColor={base64TintColor}
+            //@ts-ignore
+            name={isHovered ? hoverIconName : name}
+            style={{width: iconSize, height: iconSize}}
+          />
+        ) : icon ? (
+          <UIKitImageIcon
+            tintColor={tintColor}
+            icon={icon}
+            style={{width: iconSize, height: iconSize}}
+          />
+        ) : name ? (
+          <CustomIcon
+            name={isHovered ? hoverIconName : name}
+            color={tintColor}
+            size={iconSize}
+          />
+        ) : (
+          <></>
+        )}
+      </View>
+    </View>
+  );
+};
+
+export default ImageIcon;
+
+const styles = StyleSheet.create({
+  iconContainerStyle: {
+    borderRadius: 50,
+    backgroundColor: $config.ICON_BG_COLOR,
+  },
+});

package/template/src/atoms/InfoBubble.tsx

@@ -0,0 +1,291 @@
+import {
+  StyleSheet,
+  Image,
+  View,
+  Pressable,
+  Text,
+  Modal,
+  TouchableWithoutFeedback,
+  useWindowDimensions,
+} from 'react-native';
+import React, {useRef, useState} from 'react';
+import ImageIcon, {ImageIconProps} from './ImageIcon';
+import ThemeConfig from '../theme';
+import {isMobileUA, isWebInternal} from '../utils/common';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+
+interface iconProps extends ImageIconProps {
+  activeTintColor: string;
+}
+
+interface InfoBubbleProps {
+  text: string;
+  iconProps: iconProps;
+  bubbleIconProps?: iconProps;
+  hoverMode?: boolean;
+  onPress?: () => void;
+}
+
+const InfoBubble = (props: InfoBubbleProps) => {
+  const [toolTipVisible, setToolTipVisible] = useState(false);
+  const [left, setLeft] = useState(0);
+  const [position, setPosition] = useState({});
+  const [arrowPosition, setArrowPosition] = useState({});
+  const {hoverMode = true} = props;
+  const tooltipRef = useRef(null);
+  const iconRef = useRef(null);
+  const pressableRef = useRef(null);
+  const {width, height} = useWindowDimensions();
+
+  const setModalPosition = (width: number) => {
+    setTimeout(() => {
+      pressableRef?.current?.measure(
+        (
+          _fx: number,
+          _fy: number,
+          _localWidth: number,
+          _localHeight: number,
+          px: number,
+          py: number,
+        ) => {
+          setPosition({
+            top: py - (hoverMode ? 80 : 70),
+            left: hoverMode ? 40 : px - (width ? width / 1.5 : 0),
+            //left: px - (width ? width / 2 : 0), //TODO: need to dynamically adjust
+          });
+          setArrowPosition({
+            top: py - 6,
+            left: 100,
+          });
+        },
+      );
+    });
+  };
+
+  return (
+    <PlatformWrapper
+      onPress={() => setToolTipVisible(true)}
+      setToolTipVisible={setToolTipVisible}
+      toolTipVisible={toolTipVisible}
+      hoverMode={hoverMode}>
+      {/* toolTipBox for desktop  */}
+      {!isMobileUA() && hoverMode && isWebInternal() && toolTipVisible ? (
+        <>
+          <View
+            style={[
+              styles.textContainer,
+              position,
+              {left: left - 20},
+              {opacity: !left ? 0 : 1},
+            ]}
+            onLayout={({
+              nativeEvent: {
+                layout: {x, y, width, height},
+              },
+            }) => {
+              //To center align the tooltip above the icons
+              if (!left) setLeft(-(width / 2));
+            }}
+            ref={tooltipRef}>
+            <Text style={[styles.textStyle, {padding: 24}]} numberOfLines={1}>
+              {props.text}
+            </Text>
+          </View>
+          <View style={styles.downsideTriangleIconContainer}>
+            <ImageIcon
+              customSize={{
+                width: styles.downsideTriangleIcon.width,
+                height: styles.downsideTriangleIcon.height,
+              }}
+              name={'downside-triangle'}
+              tintColor={$config.CARD_LAYER_3_COLOR}
+            />
+          </View>
+        </>
+      ) : (
+        <></>
+      )}
+      {/* toolTip modal for mobile  */}
+      {(isMobileUA() || !hoverMode) && (
+        <>
+          <Modal
+            animationType="none"
+            transparent={true}
+            visible={toolTipVisible}
+            onRequestClose={() => {
+              setToolTipVisible(!toolTipVisible);
+            }}>
+            <TouchableWithoutFeedback
+              onPress={() => {
+                setToolTipVisible(false);
+              }}>
+              <View style={styles.backDrop} />
+            </TouchableWithoutFeedback>
+            <View
+              style={[styles.textContainer, position, {maxWidth: width - 100}]}
+              onLayout={({
+                nativeEvent: {
+                  layout: {x, y, width, height},
+                },
+              }) => {
+                //To center align the tooltip above the icons
+                setModalPosition(width);
+              }}
+              ref={tooltipRef}>
+              {props?.bubbleIconProps ? (
+                <View
+                  style={{
+                    paddingLeft: 12,
+                    marginRight: -4,
+                    alignSelf: 'center',
+                  }}>
+                  <ImageIcon {...props.bubbleIconProps} />
+                </View>
+              ) : (
+                <></>
+              )}
+              <Text style={[styles.textStyle, {padding: 12}]}>
+                {props.text}
+              </Text>
+            </View>
+          </Modal>
+          {toolTipVisible ? (
+            <View style={styles.downsideTriangleIconContainer}>
+              <ImageIcon
+                customSize={{
+                  width: styles.downsideTriangleIcon.width,
+                  height: styles.downsideTriangleIcon.height,
+                }}
+                name={'downside-triangle'}
+                tintColor={$config.CARD_LAYER_3_COLOR}
+              />
+            </View>
+          ) : (
+            <></>
+          )}
+        </>
+      )}
+      {/* info icon */}
+      <View style={styles.iconStyleView} ref={pressableRef}>
+        <ImageIcon
+          iconSize={props.iconProps.iconSize}
+          name={props.iconProps.name}
+          tintColor={
+            toolTipVisible
+              ? props?.iconProps.activeTintColor || props?.iconProps.tintColor
+              : props?.iconProps.tintColor
+          }
+        />
+      </View>
+    </PlatformWrapper>
+  );
+};
+
+const PlatformWrapper = ({
+  children,
+  onPress,
+  setToolTipVisible,
+  toolTipVisible,
+  hoverMode,
+}) => {
+  if (isWebInternal()) {
+    window.addEventListener('resize', () => {
+      setToolTipVisible(false);
+    });
+  }
+  return hoverMode && isWebInternal() && !isMobileUA() ? (
+    <div
+      style={{
+        position: 'relative',
+        marginTop: -3,
+        marginLeft: -3,
+        background:
+          hoverMode && toolTipVisible
+            ? $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['20%']
+            : 'transparent',
+        width: 28,
+        height: 28,
+        borderRadius: '50%',
+      }}
+      onMouseEnter={() => {
+        setToolTipVisible(true);
+      }}
+      onMouseLeave={() => {
+        setToolTipVisible(false);
+      }}>
+      {children}
+    </div>
+  ) : (
+    <View
+      style={{
+        position: 'relative',
+        marginTop: -3,
+        marginLeft: -3,
+        backgroundColor:
+          hoverMode && toolTipVisible
+            ? $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['20%']
+            : 'transparent',
+
+        width: 28,
+        height: 28,
+        borderRadius: 14,
+      }}>
+      <Pressable hitSlop={2} onPress={onPress}>
+        {children}
+      </Pressable>
+    </View>
+  );
+};
+
+export default InfoBubble;
+
+const styles = StyleSheet.create({
+  iconStyleView: {
+    marginTop: 4,
+    marginLeft: 4,
+  },
+  downsideTriangleIconContainer: {
+    position: 'absolute',
+    top: -24,
+    left: -2,
+    zIndex: 999,
+  },
+  downsideTriangleIcon: {
+    width: 27,
+    height: 36,
+  },
+  textContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    position: 'absolute',
+    zIndex: 998,
+    backgroundColor: $config.CARD_LAYER_3_COLOR,
+    top: -87,
+    borderRadius: 12,
+    shadowColor:
+      $config.HARD_CODED_BLACK_COLOR + hexadecimalTransparency['10%'],
+    shadowOffset: {
+      height: 4,
+      width: 0,
+    },
+    shadowOpacity: 0.2,
+    elevation: 5,
+    shadowRadius: 2,
+  },
+  textStyle: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.normal,
+    lineHeight: 24,
+    textAlign: 'left',
+    color: $config.FONT_COLOR,
+  },
+  backDrop: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: 'transparent',
+  },
+});

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,
+  },
+});