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

package/template/src/atoms/Dropdown.tsx

@@ -0,0 +1,306 @@
+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';
+
+interface Props {
+  label: string;
+  icon?: keyof IconsInterface;
+  data: Array<{label: string; value: string}>;
+  onSelect: (item: {label: string; value: string}) => void;
+  enabled: boolean;
+  selectedValue: string;
+}
+
+const Dropdown: FC<Props> = ({
+  label,
+  data,
+  onSelect,
+  enabled,
+  selectedValue,
+  icon,
+}) => {
+  const DropdownButton = useRef();
+  const [visible, setVisible] = useState(false);
+  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);
+  }, [selectedValue, data]);
+
+  useEffect(() => {
+    if (isWebInternal()) {
+      window.addEventListener('resize', () => {
+        setVisible(false);
+      });
+    }
+  }, []);
+
+  const toggleDropdown = (): void => {
+    visible ? setVisible(false) : openDropdown();
+  };
+
+  const updateDropdownPosition = () => {
+    //@ts-ignore
+    DropdownButton?.current?.measure((_fx, _fy, _w, h, _px, py) => {
+      setDropdownPos({
+        top: py + h,
+        left: _px,
+        width: _w,
+      });
+    });
+  };
+
+  const openDropdown = (): void => {
+    updateDropdownPosition();
+    setVisible(true);
+  };
+
+  const onItemPress = (item): void => {
+    // // Dropdown should rely on the provided
+    // setSelected(item);
+    onSelect(item);
+    setVisible(false);
+  };
+
+  const renderItem = ({item}): ReactElement<any, any> => (
+    <PlatformWrapper onPress={() => onItemPress(item)}>
+      <View style={styles.itemContainer}>
+        <View style={styles.itemTextContainer}>
+          <Text
+            numberOfLines={1}
+            style={[
+              styles.itemText,
+              selected && item?.value === selected?.value
+                ? styles.itemTextSelected
+                : {},
+            ]}>
+            {item.label}
+          </Text>
+        </View>
+        {selected && item?.value === selected?.value ? (
+          <View style={styles.itemTextSelectedContainer}>
+            <ImageIcon
+              iconType="plain"
+              name={'tick'}
+              iconSize={12}
+              tintColor={'#099DFD'}
+            />
+          </View>
+        ) : (
+          <></>
+        )}
+      </View>
+    </PlatformWrapper>
+  );
+
+  const renderDropdown = (): ReactElement<any, any> => {
+    return (
+      <Modal visible={visible} transparent animationType="none">
+        <TouchableOpacity
+          style={styles.overlay}
+          onPress={() => setVisible(false)}>
+          <View
+            style={[
+              styles.dropdown,
+              {
+                top: dropdownPos.top,
+                left: dropdownPos.left,
+                width: dropdownPos.width,
+              },
+            ]}>
+            <FlatList
+              showsVerticalScrollIndicator={false}
+              data={data}
+              renderItem={renderItem}
+              keyExtractor={(item, index) => index.toString()}
+            />
+          </View>
+        </TouchableOpacity>
+      </Modal>
+    );
+  };
+
+  const noData = !data || !data.length;
+
+  return (
+    <TouchableOpacity
+      disabled={!enabled || !data || !data.length}
+      ref={DropdownButton}
+      style={[
+        styles.dropdownOptionContainer,
+        !enabled || !data || !data.length
+          ? {opacity: ThemeConfig.EmphasisOpacity.disabled}
+          : {},
+        visible
+          ? {
+              borderBottomLeftRadius: 0,
+              borderBottomRightRadius: 0,
+              //borderBottomWidth: 0,
+              borderBottomColor: 'transparent',
+            }
+          : {},
+      ]}
+      onPress={toggleDropdown}>
+      {enabled && !noData ? renderDropdown() : <></>}
+      <View
+        style={{flex: 1, justifyContent: 'flex-start', flexDirection: 'row'}}>
+        {icon ? (
+          <View style={styles.dropdownIconContainer}>
+            <ImageIcon
+              iconType="plain"
+              name={icon}
+              iconSize={20}
+              tintColor={$config.SEMANTIC_NEUTRAL}
+            />
+          </View>
+        ) : (
+          <></>
+        )}
+        <View style={[styles.dropdownOptionTextContainer]}>
+          <Text numberOfLines={1} style={styles.dropdownOptionText}>
+            {(selected && selected.label) || label}
+          </Text>
+        </View>
+      </View>
+      <View style={styles.dropdownIconContainer}>
+        <ImageIcon
+          iconType="plain"
+          name={visible ? 'arrow-up' : 'arrow-down'}
+          tintColor={$config.SECONDARY_ACTION_COLOR}
+        />
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const PlatformWrapper = ({children, onPress}) => {
+  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);
+      }}
+      onClick={(e) => {
+        e.preventDefault();
+        onPress && onPress();
+      }}>
+      {children}
+    </div>
+  ) : (
+    <TouchableOpacity onPress={onPress}>{children}</TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  dropdownOptionContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    minHeight: 60,
+    backgroundColor: $config.INPUT_FIELD_BACKGROUND_COLOR,
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderRightWidth: 1,
+    borderLeftWidth: 1,
+    borderColor: $config.INPUT_FIELD_BORDER_COLOR,
+    borderRadius: ThemeConfig.BorderRadius.medium,
+    paddingLeft: 20,
+    paddingRight: 20,
+    justifyContent: 'space-between',
+  },
+  dropdownOptionTextContainer: {
+    alignSelf: 'center',
+    flex: 1,
+  },
+  dropdownOptionText: {
+    textAlign: 'left',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.normal,
+    color: $config.FONT_COLOR,
+    paddingLeft: 8,
+    paddingVertical: 20,
+  },
+  dropdownIconContainer: {
+    alignSelf: 'center',
+  },
+  dropdown: {
+    position: 'absolute',
+    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,
+    overflow: 'hidden',
+  },
+  overlay: {
+    width: '100%',
+    height: '100%',
+  },
+  itemContainer: {
+    minHeight: 40,
+    flex: 1,
+    flexDirection: 'row',
+  },
+  itemTextContainer: {
+    flex: 0.8,
+    justifyContent: 'center',
+    alignSelf: 'center',
+  },
+  itemText: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.normal,
+    color: $config.SECONDARY_ACTION_COLOR,
+    paddingVertical: 12,
+    paddingHorizontal: 15,
+  },
+  itemTextSelected: {
+    color: $config.PRIMARY_ACTION_BRAND_COLOR,
+  },
+  itemTextSelectedContainer: {
+    flex: 0.2,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default Dropdown;

package/template/src/atoms/HorizontalRule.tsx

@@ -11,6 +11,7 @@
 */
 import React from 'react';
 import {StyleSheet, View, ViewProps} from 'react-native';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 
 export default function HorizontalRule(props: ViewProps) {
   return <View style={[styles.ruler, props?.style]} />;
@@ -18,7 +19,8 @@ export default function HorizontalRule(props: ViewProps) {
 
 const styles = StyleSheet.create({
   ruler: {
-    borderBottomColor: $config.PRIMARY_COLOR + '80',
+    borderBottomColor:
+      $config.PRIMARY_ACTION_BRAND_COLOR + hexadecimalTransparency['80%'],
     borderBottomWidth: 1,
     margin: '2%',
     width: '100%',

package/template/src/atoms/IconButton.tsx

@@ -0,0 +1,162 @@
+import React from 'react';
+import {
+  ViewStyle,
+  TextStyle,
+  Text,
+  StyleSheet,
+  Pressable,
+  PressableProps,
+  TouchableOpacity,
+} 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;
+}
+
+export interface IconButtonProps {
+  setRef?: (ref: any) => void;
+  onPress?: PressableProps['onPress'];
+  disabled?: boolean;
+  containerStyle?: 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';
+  isClickable?: boolean;
+}
+
+const IconButton = (props: IconButtonProps) => {
+  return (
+    <ButtonWrapper {...props}>
+      <ImageIcon {...props.iconProps} isHovered={props?.isToolTipVisible} />
+      {props?.btnTextProps?.text ? (
+        <Text
+          numberOfLines={1}
+          ellipsizeMode="tail"
+          style={[
+            styles.btnTextStyle,
+            props?.btnTextProps?.textColor
+              ? {color: props.btnTextProps.textColor}
+              : {},
+            props?.btnTextProps.textStyle,
+          ]}>
+          {props.btnTextProps.text}
+        </Text>
+      ) : (
+        <></>
+      )}
+    </ButtonWrapper>
+  );
+};
+
+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);
+  const {placement = 'top', isClickable = false} = props;
+  if (props?.toolTipMessage) {
+    return (
+      <ToolTip
+        isClickable={isClickable}
+        toolTipMessage={props.toolTipMessage}
+        placement={placement}
+        renderContent={(isToolTipVisible, setToolTipVisible) => {
+          return (
+            <IconButton
+              {...props}
+              isToolTipVisible={isToolTipVisible}
+              setToolTipVisible={setToolTipVisible}
+            />
+          );
+        }}></ToolTip>
+    );
+  }
+  return (
+    <PlatformWrapper isHovered={isHovered} setIsHovered={setIsHovered}>
+      <IconButton
+        {...props}
+        isToolTipVisible={isHovered}
+        setToolTipVisible={setIsHovered}
+      />
+    </PlatformWrapper>
+  );
+};
+
+export default IconButtonWithToolTip;
+
+const styles = StyleSheet.create({
+  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,98 @@
+/*
+********************************************
+ 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;
+  iconSize?: number;
+  iconContainerStyle?: ViewStyle;
+  iconBackgroundColor?: string;
+  base64?: boolean;
+  base64TintColor?: string;
+  iconType?: 'round' | 'plain';
+  isHovered?: boolean;
+  // hoverEffect?: boolean;
+  // hoverEffectStyle?: ViewStyle;
+  showWarningIcon?: boolean;
+}
+
+const ImageIcon = (props: ImageIconProps) => {
+  const {
+    name,
+    iconSize = 26,
+    tintColor,
+    base64 = false,
+    base64TintColor = '',
+    iconType = 'round',
+  } = props;
+  return (
+    <View
+      style={[
+        styles.iconContainerStyle,
+        iconType === 'round'
+          ? props?.iconBackgroundColor
+            ? {backgroundColor: props.iconBackgroundColor}
+            : {}
+          : {backgroundColor: 'transparent', borderRadius: 0},
+      ]}>
+      <View
+        style={[
+          {alignItems: 'center'},
+          iconType === 'round'
+            ? {padding: 13, borderRadius: 50}
+            : {padding: 0, borderRadius: 0},
+          iconType === 'round' && props?.isHovered
+            ? {
+                backgroundColor:
+                  $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['20%'],
+              }
+            : {},
+          props?.iconContainerStyle,
+        ]}>
+        {props?.showWarningIcon ? (
+          <View style={{position: 'absolute', top: -2.5, right: -2}}>
+            <CustomIcon
+              name="alert"
+              color={$config.SEMANTIC_WARNING}
+              size={24}
+            />
+          </View>
+        ) : (
+          <></>
+        )}
+        {base64 ? (
+          <UIKitImageIcon
+            tintColor={base64TintColor}
+            name={name}
+            style={{width: iconSize, height: iconSize}}
+          />
+        ) : (
+          <CustomIcon name={name} color={tintColor} size={iconSize} />
+        )}
+      </View>
+    </View>
+  );
+};
+
+export default ImageIcon;
+
+const styles = StyleSheet.create({
+  iconContainerStyle: {
+    borderRadius: 50,
+    backgroundColor: $config.ICON_BG_COLOR,
+  },
+});