agora-appbuilder-core 4.0.0 → 4.0.1

package/template/src/atoms/ToolbarItem.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import {View, ViewProps, ViewStyle, StyleSheet} from 'react-native';
+import {ToolbarPosition, useToolbar} from '../utils/useToolbar';
+import {isMobileUA, isWebInternal} from '../utils/common';
+
+export interface ToolbarItemProps extends ViewProps {
+  style?: ViewStyle;
+  children: React.ReactNode;
+}
+const ToolbarItem = (props: ToolbarItemProps) => {
+  const {isHorizontal, position} = useToolbar();
+  //isHorizontal true -> top/bottom bar
+  //isHorizontal false -> left/right bar
+  // todo hari - first item shouldnot contain the margin right
+  // todo hari - last item shouldnot contain the margin right
+
+  //action sheet
+  if (isMobileUA() && position === ToolbarPosition.bottom) {
+    return (
+      <View {...props} style={[props?.style, toolbarItemStyles.iconWithText]}>
+        {props?.children}
+      </View>
+    );
+  } else {
+    return (
+      <View
+        {...props}
+        style={[
+          props?.style,
+          // isHorizontal ? {flexDirection: 'column'} : {flexDirection: 'row'},
+          position === ToolbarPosition.left
+            ? toolbarItemStyles.leftBarItemStyle
+            : position === ToolbarPosition.right
+            ? toolbarItemStyles.rightBarItemStyle
+            : position === ToolbarPosition.bottom
+            ? toolbarItemStyles.bottomBarItemStyle
+            : isWebInternal() && position === ToolbarPosition.top
+            ? toolbarItemStyles.topBarItemNonNativeStyle
+            : !isWebInternal() && position === ToolbarPosition.top
+            ? toolbarItemStyles.topBarItemNativeStyle
+            : {},
+        ]}>
+        {props?.children}
+      </View>
+    );
+  }
+};
+export default ToolbarItem;
+
+const toolbarItemStyles = StyleSheet.create({
+  iconWithText: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    // alignSelf: 'center',
+    flexBasis: '25%',
+    paddingBottom: 24,
+  },
+  topBarItemNativeStyle: {
+    marginTop: 8,
+    marginBottom: 10,
+    marginHorizontal: 10,
+    justifyContent: 'center',
+  },
+  topBarItemNonNativeStyle: {
+    marginTop: $config.ICON_TEXT ? 8 : 0,
+    marginBottom: $config.ICON_TEXT ? 10 : 0,
+    marginHorizontal: 10,
+    justifyContent: 'center',
+  },
+  bottomBarItemStyle: {
+    marginTop: $config.ICON_TEXT ? 10 : 0,
+    marginBottom: $config.ICON_TEXT ? 16 : 0,
+    marginHorizontal: 10,
+  },
+  leftBarItemStyle: {
+    marginLeft: 16,
+    marginRight: 10,
+    marginVertical: 10,
+  },
+  rightBarItemStyle: {
+    marginRight: 16,
+    marginLeft: 10,
+    marginVertical: 10,
+  },
+});

package/template/src/atoms/ToolbarMenu.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import {View, StyleSheet, ViewStyle} from 'react-native';
+import {ToolbarMenuProvider} from '../utils/useMenu';
+
+export interface ToolbarMenuProps {
+  children: React.ReactNode;
+  containerStyle?: ViewStyle;
+}
+const ToolbarMenu = (props: ToolbarMenuProps) => {
+  const {children, containerStyle} = props;
+  if (!children) {
+    return null;
+  }
+  return (
+    <ToolbarMenuProvider>
+      <View style={[ToolbarMenuStyle.containerStyle, containerStyle]}>
+        {children}
+      </View>
+    </ToolbarMenuProvider>
+  );
+};
+export default ToolbarMenu;
+
+const ToolbarMenuStyle = StyleSheet.create({
+  containerStyle: {
+    flex: 1,
+    justifyContent: 'flex-start',
+    backgroundColor: $config.CARD_LAYER_4_COLOR,
+    borderRadius: 4,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    zIndex: 1,
+    elevation: 1,
+  },
+});

package/template/src/atoms/ToolbarMenuItem.tsx

@@ -0,0 +1,104 @@
+import React, {useState} from 'react';
+import {
+  View,
+  StyleSheet,
+  TouchableOpacityProps,
+  TouchableOpacity,
+  Text,
+} from 'react-native';
+import ThemeConfig from '../theme';
+import ImageIcon from './ImageIcon';
+import {IconButtonProps} from './IconButton';
+import {isWebInternal} from '../utils/common';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+
+export interface ToolbarMenuItemProps extends IconButtonProps {
+  // disabled?: boolean;
+  // onPress: TouchableOpacityProps['onPress'];
+  // isHovered?: boolean;
+  // menuIcon?: string;
+  // menuText?: string;
+  // menuIconColor?: string;
+}
+const ToolbarMenuItem = (props: ToolbarMenuItemProps) => {
+  return (
+    <PlatformWrapper>
+      {(isHovered: boolean) => (
+        <>
+          <TouchableOpacity
+            disabled={props.disabled}
+            style={[
+              props.disabled ? {opacity: 0.4} : {},
+              isHovered
+                ? {
+                    backgroundColor:
+                      $config.CARD_LAYER_5_COLOR +
+                      hexadecimalTransparency['15%'],
+                  }
+                : {},
+              ToolbarMenuItemStyles.container,
+            ]}
+            onPress={props.onPress}>
+            <View style={ToolbarMenuItemStyles.iconContainer}>
+              <ImageIcon
+                base64={false}
+                iconType="plain"
+                iconSize={20}
+                name={props?.iconProps?.name}
+                tintColor={props?.iconProps?.tintColor}
+              />
+            </View>
+            <Text
+              style={[
+                ToolbarMenuItemStyles.textStyle,
+                props?.btnTextProps?.textStyle,
+                props?.btnTextProps?.textColor
+                  ? {color: props?.btnTextProps?.textColor}
+                  : {},
+              ]}>
+              {props?.btnTextProps?.text}
+            </Text>
+          </TouchableOpacity>
+        </>
+      )}
+    </PlatformWrapper>
+  );
+};
+export default ToolbarMenuItem;
+const PlatformWrapper = ({children}) => {
+  const [isHovered, setIsHovered] = useState(false);
+  return isWebInternal() ? (
+    <div
+      onMouseEnter={() => {
+        setIsHovered(true);
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+      }}>
+      {children(isHovered)}
+    </div>
+  ) : (
+    <>{children(false)}</>
+  );
+};
+const ToolbarMenuItemStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: $config.CARD_LAYER_3_COLOR,
+  },
+  iconContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 8,
+    marginVertical: 12,
+    marginLeft: 12,
+  },
+  textStyle: {
+    paddingVertical: 14,
+    color: $config.SECONDARY_ACTION_COLOR,
+    fontSize: ThemeConfig.FontSize.normal,
+    fontWeight: '400',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+  },
+});

package/template/src/atoms/ToolbarPreset.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import Navbar from '../components/Navbar';
+import Controls from '../components/Controls';
+import Leftbar from '../components/Leftbar';
+import Rightbar from '../components/Rightbar';
+import {isMobileUA} from '../utils/common';
+import NavbarMobile from '../components/NavbarMobile';
+import ActionSheet from '../pages/video-call/ActionSheet';
+
+export interface ToolbarCustomItem {
+  component: () => JSX.Element;
+  align: 'start' | 'center' | 'end';
+  hide: 'yes' | 'no' | 'never';
+  order?: number;
+}
+
+export interface ToolbarBottomPresetProps {
+  align: 'bottom';
+  customItems?: Array<ToolbarCustomItem>;
+  snapPointsMinMax: [number, number];
+}
+export interface ToolbarOtherPresetProps {
+  align: 'top' | 'left' | 'right';
+  customItems?: Array<ToolbarCustomItem>;
+  snapPointsMinMax?: never;
+}
+
+export type ToolbarPresetProps =
+  | ToolbarBottomPresetProps
+  | ToolbarOtherPresetProps;
+
+const ToolbarPreset = (props: ToolbarPresetProps) => {
+  const {align} = props;
+  if (!align) {
+    console.log(
+      'ToolbarPreset align prop is empty. please provide align prop to get the corresponding toolbar preset',
+    );
+    return null;
+  }
+  if (align === 'left') {
+    return (
+      <Leftbar customItems={props?.customItems} includeDefaultItems={true} />
+    );
+  } else if (align === 'right') {
+    return (
+      <Rightbar customItems={props?.customItems} includeDefaultItems={true} />
+    );
+  } else if (align === 'top') {
+    return isMobileUA() ? (
+      <NavbarMobile
+        customItems={props?.customItems}
+        includeDefaultItems={true}
+      />
+    ) : (
+      <Navbar customItems={props?.customItems} includeDefaultItems={true} />
+    );
+  } else if (align === 'bottom') {
+    return isMobileUA() ? (
+      <ActionSheet
+        customItems={props?.customItems}
+        includeDefaultItems={true}
+        snapPointsMinMax={props?.snapPointsMinMax}
+      />
+    ) : (
+      <Controls customItems={props?.customItems} includeDefaultItems={true} />
+    );
+  } else {
+    return null;
+  }
+};
+export default ToolbarPreset;

package/template/src/atoms/Tooltip.tsx

@@ -13,31 +13,48 @@ interface TooltipProps {
   toolTipIcon?: React.ReactNode;
   isClickable?: boolean;
   placement?: 'top' | 'bottom' | 'left' | 'right';
+  showTooltipArrow?: boolean;
+  fontSize?: number;
   onPress?: () => void;
 }
 const Tooltip = (props: TooltipProps) => {
   const [isToolTipVisible, setToolTipVisible] = useState(false);
-  const {isClickable = false, placement = 'top'} = props;
-  const css = `
+  const {
+    isClickable = false,
+    placement = 'top',
+    showTooltipArrow = true,
+  } = props;
+  const css = showTooltipArrow
+    ? `
   .custom-tool-tip{
-    padding:12px;
+    padding:8px;
     border-radius: 8px;
   }
   .custom-tool-tip div{
     font-family: "Source Sans Pro";
     font-weight: 400;
-    font-size: 16px;
+    font-size: ${props.fontSize ? props.fontSize : 16}px;
   }
   .__react_component_tooltip.show{
     opacity:1;
   }
-  .custom-tool-tip::after {
-    width: 20px !important;
-    height: 20px !important;
-    border-top-right-radius: 5px !important;
-    bottom: -10px !important;
-    margin-left: -10px !important;
-  }`;
+ `
+    : `.custom-tool-tip {
+        padding:8px;
+        border-radius: 8px;
+      }
+  .custom-tool-tip div{
+    font-family: "Source Sans Pro";
+    font-weight: 400;
+    font-size: ${props.fontSize ? props.fontSize : 16}px;
+  }
+  .__react_component_tooltip.show{
+    opacity:1;
+  }
+  .custom-tool-tip::after{
+    display:none
+  }
+`;
   const randomString = (
     length = 5,
     chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
@@ -77,11 +94,11 @@ const Tooltip = (props: TooltipProps) => {
         id={toolTipId}
         backgroundColor={$config.CARD_LAYER_3_COLOR}
         className="custom-tool-tip"
-        place={'top'}
+        place={placement}
         type="dark"
         effect="solid">
         <style type="text/css">{css}</style>
-        <View style={{flex: 1, flexDirection: 'row'}}>
+        <View style={{flex: 1, flexDirection: 'row', alignItems: 'center'}}>
           {props?.toolTipIcon ? props.toolTipIcon : null}
           <Text style={{color: $config.FONT_COLOR}}>
             {props.toolTipMessage}

package/template/src/atoms/pagination/Pagination.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import {usePagination, DOTS} from './usePagination';
+import {TouchableOpacity, Text, View, StyleSheet} from 'react-native';
+import ThemeConfig from '../../theme';
+
+const Pagination = props => {
+  const {
+    onPageChange,
+    totalCount,
+    siblingCount = 1,
+    currentPage,
+    pageSize,
+  } = props;
+
+  const paginationRange = usePagination({
+    currentPage,
+    totalCount,
+    siblingCount,
+    pageSize,
+  });
+
+  if (paginationRange.length < 2) {
+    return null;
+  }
+
+  const onNext = () => {
+    onPageChange(currentPage + 1);
+  };
+
+  const onPrevious = () => {
+    onPageChange(currentPage - 1);
+  };
+
+  let lastPage = paginationRange[paginationRange.length - 1];
+
+  return (
+    <View>
+      <View style={style.paginationContainer}>
+        <TouchableOpacity
+          disabled={currentPage === 1}
+          style={[style.paginationButton, style.paginationFirstButton]}
+          onPress={onPrevious}>
+          <Text
+            style={[
+              style.btnText,
+              currentPage === 1 ? style.disabledText : {},
+            ]}>
+            Prev
+          </Text>
+        </TouchableOpacity>
+        {paginationRange.map(pageNumber => {
+          if (pageNumber === DOTS) {
+            return (
+              <Text style={[style.paginationButton, style.btnText]}>
+                &#8230;
+              </Text>
+            );
+          }
+          return (
+            <TouchableOpacity
+              key={pageNumber}
+              onPress={() => onPageChange(pageNumber)}
+              style={[
+                style.paginationButton,
+                pageNumber === currentPage ? style.activeButton : null,
+              ]}>
+              <Text style={style.btnText}>{pageNumber}</Text>
+            </TouchableOpacity>
+          );
+        })}
+        <TouchableOpacity
+          disabled={currentPage === lastPage}
+          style={[style.paginationButton, style.paginationLastButton]}
+          onPress={onNext}>
+          <Text
+            style={[
+              style.btnText,
+              currentPage === lastPage ? style.disabledText : {},
+            ]}>
+            Next
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+export default Pagination;
+
+const style = StyleSheet.create({
+  paginationContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  paginationButton: {
+    alignItems: 'center',
+    backgroundColor: $config.CARD_LAYER_3_COLOR,
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    height: 32,
+    minWidth: 32,
+    borderRightWidth: 1,
+    borderRightColor: $config.CARD_LAYER_4_COLOR,
+  },
+  paginationFirstButton: {
+    borderTopLeftRadius: 4,
+    borderBottomLeftRadius: 4,
+  },
+  paginationLastButton: {
+    borderTopRightRadius: 4,
+    borderBottomRightRadius: 4,
+  },
+  btnText: {
+    color: $config.SECONDARY_ACTION_COLOR,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontSize: ThemeConfig.FontSize.small,
+    lineHeight: 20,
+  },
+  disabledText: {
+    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.low,
+  },
+  activeButton: {
+    borderColor: $config.PRIMARY_ACTION_BRAND_COLOR,
+    borderRightColor: $config.PRIMARY_ACTION_BRAND_COLOR,
+    backgroundColor: $config.PRIMARY_ACTION_BRAND_COLOR,
+  },
+});

package/template/src/atoms/pagination/usePagination.tsx

@@ -0,0 +1,88 @@
+import {useMemo} from 'react';
+
+const range = (start: number, end: number) => {
+  const length = end - start + 1;
+  /*
+  	Create an array of certain length and set the elements within it from
+    start value to end value.
+  */
+  return Array.from({length}, (_, idx) => idx + start);
+};
+
+type usePaginationProps = {
+  totalCount: number;
+  pageSize: number;
+  siblingCount: number;
+  currentPage: number;
+};
+
+export const DOTS = '...';
+
+export const usePagination = (
+  props: usePaginationProps,
+): (number | string)[] => {
+  const {totalCount, pageSize, siblingCount, currentPage} = props;
+  const paginationRange = useMemo(() => {
+    const totalPageCount = Math.ceil(totalCount / pageSize);
+
+    // Pages count is determined as siblingCount + firstPage + lastPage + currentPage + 2*DOTS
+    const totalPageNumbers = siblingCount + 5;
+
+    /*
+        Case 1:
+        If the number of pages is less than the page numbers we want to show in our
+        paginationComponent, we return the range [1..totalPageCount]
+    */
+    if (totalPageNumbers >= totalPageCount) {
+      return range(1, totalPageCount);
+    }
+
+    /*
+        Calculate left and right sibling index and make sure they are within range 1 and totalPageCount
+    */
+    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+    const rightSiblingIndex = Math.min(
+      currentPage + siblingCount,
+      totalPageCount,
+    );
+
+    /*
+        We do not show dots just when there is just one page number to be inserted between the extremes of sibling and the page limits i.e 1 and totalPageCount. Hence we are using leftSiblingIndex > 2 and rightSiblingIndex < totalPageCount - 2
+    */
+    const shouldShowLeftDots = leftSiblingIndex > 2;
+    const shouldShowRightDots = rightSiblingIndex < totalPageCount - 2;
+
+    const firstPageIndex = 1;
+    const lastPageIndex = totalPageCount;
+
+    /*
+        Case 2: No left dots to show, but rights dots to be shown
+    */
+    if (!shouldShowLeftDots && shouldShowRightDots) {
+      const leftItemCount = 3 + 2 * siblingCount;
+      const leftRange = range(1, leftItemCount);
+
+      return [...leftRange, DOTS, totalPageCount];
+    }
+
+    /*
+        Case 3: No right dots to show, but left dots to be shown
+    */
+    if (shouldShowLeftDots && !shouldShowRightDots) {
+      const rightItemCount = 3 + 2 * siblingCount;
+      const rightRange = range(
+        totalPageCount - rightItemCount + 1,
+        totalPageCount,
+      );
+      return [firstPageIndex, DOTS, ...rightRange];
+    }
+
+    /*
+        Case 4: Both left and right dots to be shown
+    */
+    const middleRange = range(leftSiblingIndex, rightSiblingIndex);
+    return [firstPageIndex, DOTS, ...middleRange, DOTS, lastPageIndex];
+  }, [totalCount, pageSize, siblingCount, currentPage]);
+
+  return paginationRange;
+};