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

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

@@ -0,0 +1,307 @@
+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={true}
+              data={data}
+              renderItem={renderItem}
+              keyExtractor={(item, index) => index.toString()}
+              style={{ maxHeight: 200 }}
+            />
+          </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 + hexadecimalTransparency['70%'],
+    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%',