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

package/template/src/atoms/UserAvatar.tsx

@@ -0,0 +1,60 @@
+import {StyleSheet, Text, View} from 'react-native';
+import React from 'react';
+import ThemeConfig from '../theme';
+import {isWeb} from '../utils/common';
+
+function getInitials(name: string) {
+  if (name && name?.length) {
+    return name[0].toUpperCase();
+  }
+  return 'U';
+}
+
+const UserAvatar = ({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',
+            },
+          ]}>
+          {getInitials(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 UserAvatar;
+
+const styles = StyleSheet.create({});

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