@hero-design/rn 8.44.1 → 8.45.0

package/src/components/Avatar/AvatarStack/__tests__/index.spec.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import renderWithTheme from '../../../../testHelpers/renderWithTheme';
 import Avatar from '../..';
+import Typography from '../../../Typography';
+import HeroDesignProvider from '../../../HeroDesignProvider';
+import { theme } from '../../../..';
 
 beforeEach(() => {
   jest.spyOn(Math, 'random').mockReturnValue(0.123);
@@ -11,9 +14,13 @@ afterEach(() => {
 });
 
 describe('AvatarStack', () => {
-  it('renders correctly by default', () => {
+  it.each`
+    variant
+    ${'horizontal'}
+    ${'vertical'}
+  `('renders correctly when variant is $variant', ({ variant }) => {
     const wrapper = renderWithTheme(
-      <Avatar.Stack testID="group-avatar">
+      <Avatar.Stack variant={variant} testID="group-avatar">
         <Avatar title="TT" />
         <Avatar title="SS" />
         <Avatar title="AA" />
@@ -27,10 +34,14 @@ describe('AvatarStack', () => {
     expect(wrapper.queryAllByText('AA')).toHaveLength(1);
     expect(wrapper.queryAllByText('OO')).toHaveLength(1);
     expect(wrapper.queryAllByText('NA')).toHaveLength(1);
-    expect(wrapper.getByTestId('group-avatar')).toHaveStyle({
-      width: 121.6,
-      height: 32,
-    });
+    expect(wrapper.getByTestId('group-avatar')).toHaveStyle(
+      variant === 'horizontal'
+        ? {
+            width: 121.6,
+            height: 32,
+          }
+        : { width: 32, height: 121.6 }
+    );
 
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
@@ -59,4 +70,127 @@ describe('AvatarStack', () => {
 
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
+
+  it('does not render surplus when max is equal or larger than the number of avatars', () => {
+    const { toJSON, getByText, queryByTestId, rerender } = renderWithTheme(
+      <Avatar.Stack
+        max={4}
+        renderSurplus={(surplus) => (
+          <Typography.Body>Custom surplus {surplus}</Typography.Body>
+        )}
+      >
+        <Avatar title="TT" />
+        <Avatar title="SS" />
+        <Avatar title="AA" />
+        <Avatar title="OO" />
+      </Avatar.Stack>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('TT')).toBeDefined();
+    expect(getByText('OO')).toBeDefined();
+    expect(queryByTestId('surplus-container')).toBeNull();
+
+    rerender(
+      <HeroDesignProvider theme={theme}>
+        <Avatar.Stack
+          max={10}
+          renderSurplus={(surplus) => (
+            <Typography.Body>Custom surplus {surplus}</Typography.Body>
+          )}
+        >
+          <Avatar title="TT" />
+          <Avatar title="SS" />
+          <Avatar title="AA" />
+          <Avatar title="OO" />
+        </Avatar.Stack>
+      </HeroDesignProvider>
+    );
+
+    expect(queryByTestId('surplus-container')).toBeNull();
+  });
+
+  it('does not render surplus when total is equal to the number of avatars', () => {
+    const { toJSON, getByText, queryByTestId, rerender } = renderWithTheme(
+      <Avatar.Stack
+        total={4}
+        renderSurplus={(surplus) => (
+          <Typography.Body>Custom surplus {surplus}</Typography.Body>
+        )}
+      >
+        <Avatar title="TT" />
+        <Avatar title="SS" />
+        <Avatar title="AA" />
+        <Avatar title="OO" />
+      </Avatar.Stack>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('TT')).toBeDefined();
+    expect(getByText('OO')).toBeDefined();
+    expect(queryByTestId('surplus-container')).toBeNull();
+
+    rerender(
+      <HeroDesignProvider theme={theme}>
+        <Avatar.Stack
+          total={10}
+          renderSurplus={(surplus) => (
+            <Typography.Body>Custom surplus {surplus}</Typography.Body>
+          )}
+        >
+          <Avatar title="TT" />
+          <Avatar title="SS" />
+          <Avatar title="AA" />
+          <Avatar title="OO" />
+        </Avatar.Stack>
+      </HeroDesignProvider>
+    );
+
+    expect(getByText('Custom surplus 6')).toBeDefined();
+  });
+
+  it('render correctly surplus when both max and total are set', () => {
+    const { toJSON, getByText, queryByText } = renderWithTheme(
+      <Avatar.Stack
+        total={25}
+        max={2}
+        renderSurplus={(surplus) => (
+          <Typography.Body>Custom surplus {surplus}</Typography.Body>
+        )}
+      >
+        <Avatar title="TT" />
+        <Avatar title="SS" />
+        <Avatar title="AA" />
+        <Avatar title="OO" />
+        <Avatar title="NA" />
+      </Avatar.Stack>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('TT')).toBeDefined();
+    expect(queryByText('AA')).toBeNull();
+    expect(getByText('Custom surplus 23')).toBeDefined();
+  });
+
+  it('allow rendering custom surplus', () => {
+    const { toJSON, getByText } = renderWithTheme(
+      <Avatar.Stack
+        total={25}
+        renderSurplus={(surplus) => (
+          <Typography.Body>Custom surplus {surplus}</Typography.Body>
+        )}
+      >
+        <Avatar title="TT" />
+        <Avatar title="SS" />
+        <Avatar title="AA" />
+        <Avatar title="OO" />
+        <Avatar title="NA" />
+      </Avatar.Stack>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('TT')).toBeDefined();
+    expect(getByText('NA')).toBeDefined();
+    expect(getByText('Custom surplus 20')).toBeDefined();
+  });
 });

package/src/components/Avatar/AvatarStack/index.tsx

@@ -1,7 +1,11 @@
-import React, { ReactElement } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-import Avatar, { AvatarProps } from '../Avatar';
-import { StyledAvatar, StyledWrapper } from './StyledAvatarStack';
+import { AvatarProps } from '../Avatar';
+import {
+  StyledAvatar,
+  StyledSurplusContainer,
+  StyledWrapper,
+} from './StyledAvatarStack';
 import { useAvatarColors } from './utils';
 
 export interface AvatarStackProps extends Pick<AvatarProps, 'size'> {
@@ -13,6 +17,14 @@ export interface AvatarStackProps extends Pick<AvatarProps, 'size'> {
    * Max avatars to show.
    */
   max?: number;
+  /**
+   * The total number of avatars. Used for calculating the number of extra avatars.
+   */
+  total?: number;
+  /**
+   * Custom renderer of extraAvatars.
+   */
+  renderSurplus?: (value: number) => ReactNode;
   /**
    * Additional style.
    */
@@ -21,39 +33,112 @@ export interface AvatarStackProps extends Pick<AvatarProps, 'size'> {
    * Testing id of the component.
    */
   testID?: string;
+  /**
+   * Variant of the avatar stack.
+   */
+  variant?: 'horizontal' | 'vertical';
 }
 
+type SurplusProps = {
+  value: number;
+  renderSurplus?: AvatarStackProps['renderSurplus'];
+  size?: AvatarStackProps['size'];
+  variant?: AvatarStackProps['variant'];
+  index: number;
+  backgroundColor: string;
+};
+
+const Surplus = ({
+  value,
+  renderSurplus,
+  size,
+  variant = 'horizontal',
+  index,
+  backgroundColor,
+}: SurplusProps) => {
+  if (value > 0) {
+    if (renderSurplus) {
+      return (
+        <StyledSurplusContainer
+          testID="surplus-container"
+          themeSize={size}
+          themeVariant={variant}
+          themeIndex={index}
+          style={{ backgroundColor }}
+        >
+          {renderSurplus(value)}
+        </StyledSurplusContainer>
+      );
+    }
+
+    return (
+      <StyledAvatar
+        testID="surplus-container"
+        themeVariant={variant}
+        title={`+${value}`}
+        size={size}
+        themeIndex={index}
+        style={{ backgroundColor }}
+      />
+    );
+  }
+
+  return null;
+};
+
 const AvatarStack = ({
   children,
   max,
   size = 'small',
   style,
   testID,
+  variant = 'horizontal',
+  total,
+  renderSurplus,
 }: AvatarStackProps) => {
   const colors = useAvatarColors();
   const avatars = children.slice(0, max);
-  if (max !== undefined && children.length - max > 0) {
-    const remainingAvatar = (
-      <Avatar title={`+${children.length - max}`} size={size} />
-    );
-    avatars.push(remainingAvatar);
-  }
+
+  const remainingAvatar = (() => {
+    let remain = 0;
+
+    // Remaining value will prioritize total prop if it exists
+    if (total && total > children.length) {
+      remain = total - avatars.length;
+    } else if (max && children.length > max) {
+      remain = children.length - max;
+    }
+
+    return remain;
+  })();
 
   return (
     <StyledWrapper
       themeSize={size}
       themeAvatarCount={avatars.length}
+      themeHasSurplus={remainingAvatar > 0}
       style={style}
       testID={testID}
+      themeVariant={variant}
     >
       {avatars.map((avt, index) => (
         <StyledAvatar
+          themeVariant={variant}
           {...avt.props}
           size={size}
           themeIndex={index}
           style={{ backgroundColor: colors[index % colors.length] }}
         />
       ))}
+
+      <Surplus
+        value={remainingAvatar}
+        index={avatars.length}
+        size={size}
+        variant={variant}
+        renderSurplus={renderSurplus}
+        backgroundColor={colors[avatars.length % colors.length]}
+      />
     </StyledWrapper>
   );
 };

package/src/components/Carousel/index.tsx

@@ -2,22 +2,25 @@ import React, {
   Dispatch,
   SetStateAction,
   useCallback,
-  useRef,
   useEffect,
+  useRef,
   useState,
 } from 'react';
 import {
   Animated,
   FlatList,
   StyleProp,
-  useWindowDimensions,
   View,
   ViewProps,
   ViewStyle,
   ViewToken,
+  useWindowDimensions,
 } from 'react-native';
 
-import { CarouselData } from './types';
+import { useTheme } from '../../theme';
+import { useDeprecation } from '../../utils/hooks';
+import { CardCarousel } from './CardCarousel';
+import CarouselItem from './CarouselItem';
 import {
   StyledBackDrop,
   StyledCarouselFooterWrapper,
@@ -25,9 +28,7 @@ import {
   StyledPageControl,
   StyledPageControlWrapper,
 } from './StyledCarousel';
-import CarouselItem from './CarouselItem';
-import { CardCarousel } from './CardCarousel';
-import { useDeprecation } from '../../utils/hooks';
+import { CarouselData } from './types';
 
 interface CarouselProps extends ViewProps {
   /**
@@ -98,6 +99,8 @@ const Carousel = ({
     `The use of 'pageControlPosition == bottom' has been deprecated`,
     pageControlPosition === 'bottom'
   );
+
+  const theme = useTheme();
   const carouselRef = useRef<FlatList>(null);
 
   const [currentSlideIndex, setCurrentSlideIndex] =
@@ -130,7 +133,8 @@ const Carousel = ({
   }, [currentSlideIndex, carouselRef]);
 
   const viewConfig = useRef({ viewAreaCoveragePercentThreshold: 50 }).current;
-  const onViewCallBack = React.useCallback(
+
+  const onViewCallBack = useRef(
     (info: { viewableItems: Array<ViewToken>; changed: Array<ViewToken> }) => {
       const firstVisibleItem = info.viewableItems.find(
         (view) => view.index != null && view.isViewable
@@ -138,13 +142,16 @@ const Carousel = ({
       if (firstVisibleItem) {
         internalOnItemIndexChange(firstVisibleItem.index || 0);
       }
-    },
-    [internalOnItemIndexChange]
+    }
   );
+
   return (
     <View style={style} testID={testID} {...nativeProps}>
       <StyledBackDrop
-        themeSlideBackground={items[currentSlideIndex].background}
+        themeSlideBackground={
+          items[currentSlideIndex]?.background ||
+          theme.colors.defaultGlobalSurface
+        }
       />
 
       <StyledPageControlWrapper>
@@ -165,7 +172,7 @@ const Carousel = ({
           pagingEnabled
           bounces={false}
           data={items}
-          onViewableItemsChanged={onViewCallBack}
+          onViewableItemsChanged={onViewCallBack.current}
           viewabilityConfig={viewConfig}
           scrollEventThrottle={32}
           ref={carouselRef}

package/types/components/Avatar/AvatarStack/StyledAvatarStack.d.ts

@@ -1,12 +1,15 @@
 /// <reference types="react" />
 import { View } from 'react-native';
 import { AvatarProps } from '../Avatar';
+type ThemeVariant = 'horizontal' | 'vertical';
 export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     themeSize: Required<AvatarProps>['size'];
     themeAvatarCount: number;
+    themeVariant: ThemeVariant;
+    themeHasSurplus: boolean;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
@@ -15,4 +18,14 @@ export declare const StyledAvatar: import("@emotion/native").StyledComponent<Ava
     as?: import("react").ElementType<any> | undefined;
 } & {
     themeIndex: number;
+    themeVariant: ThemeVariant;
 }, {}, {}>;
+export declare const StyledSurplusContainer: import("@emotion/native").StyledComponent<import("../../Box").BoxProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeIndex: number;
+    themeSize: AvatarProps['size'];
+    themeVariant: ThemeVariant;
+}, {}, {}>;
+export {};

package/types/components/Avatar/AvatarStack/index.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import { AvatarProps } from '../Avatar';
 export interface AvatarStackProps extends Pick<AvatarProps, 'size'> {
@@ -10,6 +10,14 @@ export interface AvatarStackProps extends Pick<AvatarProps, 'size'> {
      * Max avatars to show.
      */
     max?: number;
+    /**
+     * The total number of avatars. Used for calculating the number of extra avatars.
+     */
+    total?: number;
+    /**
+     * Custom renderer of extraAvatars.
+     */
+    renderSurplus?: (value: number) => ReactNode;
     /**
      * Additional style.
      */
@@ -18,6 +26,10 @@ export interface AvatarStackProps extends Pick<AvatarProps, 'size'> {
      * Testing id of the component.
      */
     testID?: string;
+    /**
+     * Variant of the avatar stack.
+     */
+    variant?: 'horizontal' | 'vertical';
 }
-declare const AvatarStack: ({ children, max, size, style, testID, }: AvatarStackProps) => React.JSX.Element;
+declare const AvatarStack: ({ children, max, size, style, testID, variant, total, renderSurplus, }: AvatarStackProps) => React.JSX.Element;
 export default AvatarStack;

package/types/components/Avatar/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { useAvatarColors } from './AvatarStack/utils';
 declare const _default: (({ onPress, source, testID, style, title, size, intent, }: import("./Avatar").AvatarProps) => import("react").JSX.Element | null) & {
-    Stack: ({ children, max, size, style, testID, }: import("./AvatarStack").AvatarStackProps) => import("react").JSX.Element;
+    Stack: ({ children, max, size, style, testID, variant, total, renderSurplus, }: import("./AvatarStack").AvatarStackProps) => import("react").JSX.Element;
 };
 export default _default;
 export { useAvatarColors };