@hero-design/rn 7.25.0 → 7.26.0

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

@@ -0,0 +1,552 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AvatarStack renders correctly by default 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "flexDirection": "row",
+        "height": 32,
+        "width": 121.6,
+      },
+      undefined,
+    ]
+  }
+  testID="group-avatar"
+  themeAvatarCount={5}
+  themeSize="small"
+>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={false}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#401960",
+        "borderRadius": 999,
+        "height": 32,
+        "left": 0,
+        "opacity": 1,
+        "overflow": "hidden",
+        "position": "absolute",
+        "width": 32,
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "display": "flex",
+            "height": "100%",
+            "justifyContent": "center",
+            "width": "100%",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#ffffff",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "overflow": "hidden",
+            },
+            undefined,
+          ]
+        }
+        themeSize="small"
+      >
+        TT
+      </Text>
+    </View>
+  </View>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={false}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#401960",
+        "borderRadius": 999,
+        "height": 32,
+        "left": 22.4,
+        "opacity": 1,
+        "overflow": "hidden",
+        "position": "absolute",
+        "width": 32,
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "display": "flex",
+            "height": "100%",
+            "justifyContent": "center",
+            "width": "100%",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#ffffff",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "overflow": "hidden",
+            },
+            undefined,
+          ]
+        }
+        themeSize="small"
+      >
+        SS
+      </Text>
+    </View>
+  </View>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={false}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#401960",
+        "borderRadius": 999,
+        "height": 32,
+        "left": 44.8,
+        "opacity": 1,
+        "overflow": "hidden",
+        "position": "absolute",
+        "width": 32,
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "display": "flex",
+            "height": "100%",
+            "justifyContent": "center",
+            "width": "100%",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#ffffff",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "overflow": "hidden",
+            },
+            undefined,
+          ]
+        }
+        themeSize="small"
+      >
+        AA
+      </Text>
+    </View>
+  </View>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={false}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#401960",
+        "borderRadius": 999,
+        "height": 32,
+        "left": 67.19999999999999,
+        "opacity": 1,
+        "overflow": "hidden",
+        "position": "absolute",
+        "width": 32,
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "display": "flex",
+            "height": "100%",
+            "justifyContent": "center",
+            "width": "100%",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#ffffff",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "overflow": "hidden",
+            },
+            undefined,
+          ]
+        }
+        themeSize="small"
+      >
+        OO
+      </Text>
+    </View>
+  </View>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={false}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#401960",
+        "borderRadius": 999,
+        "height": 32,
+        "left": 89.6,
+        "opacity": 1,
+        "overflow": "hidden",
+        "position": "absolute",
+        "width": 32,
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "display": "flex",
+            "height": "100%",
+            "justifyContent": "center",
+            "width": "100%",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#ffffff",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "overflow": "hidden",
+            },
+            undefined,
+          ]
+        }
+        themeSize="small"
+      >
+        NA
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`AvatarStack renders correctly with custom props 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "flexDirection": "row",
+        "height": 40,
+        "width": 123.99999999999999,
+      },
+      undefined,
+    ]
+  }
+  testID="group-avatar"
+  themeAvatarCount={4}
+  themeSize="medium"
+>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={false}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#401960",
+        "borderRadius": 999,
+        "height": 40,
+        "left": 0,
+        "opacity": 1,
+        "overflow": "hidden",
+        "position": "absolute",
+        "width": 40,
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "display": "flex",
+            "height": "100%",
+            "justifyContent": "center",
+            "width": "100%",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#ffffff",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 18,
+              "overflow": "hidden",
+            },
+            undefined,
+          ]
+        }
+        themeSize="medium"
+      >
+        TT
+      </Text>
+    </View>
+  </View>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={false}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#401960",
+        "borderRadius": 999,
+        "height": 40,
+        "left": 28,
+        "opacity": 1,
+        "overflow": "hidden",
+        "position": "absolute",
+        "width": 40,
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "display": "flex",
+            "height": "100%",
+            "justifyContent": "center",
+            "width": "100%",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#ffffff",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 18,
+              "overflow": "hidden",
+            },
+            undefined,
+          ]
+        }
+        themeSize="medium"
+      >
+        SS
+      </Text>
+    </View>
+  </View>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={false}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#401960",
+        "borderRadius": 999,
+        "height": 40,
+        "left": 56,
+        "opacity": 1,
+        "overflow": "hidden",
+        "position": "absolute",
+        "width": 40,
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "display": "flex",
+            "height": "100%",
+            "justifyContent": "center",
+            "width": "100%",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#ffffff",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 18,
+              "overflow": "hidden",
+            },
+            undefined,
+          ]
+        }
+        themeSize="medium"
+      >
+        AA
+      </Text>
+    </View>
+  </View>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={false}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#401960",
+        "borderRadius": 999,
+        "height": 40,
+        "left": 84,
+        "opacity": 1,
+        "overflow": "hidden",
+        "position": "absolute",
+        "width": 40,
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "display": "flex",
+            "height": "100%",
+            "justifyContent": "center",
+            "width": "100%",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#ffffff",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 18,
+              "overflow": "hidden",
+            },
+            undefined,
+          ]
+        }
+        themeSize="medium"
+      >
+        +2
+      </Text>
+    </View>
+  </View>
+</View>
+`;

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import Avatar from '../..';
+import theme from '../../../../theme';
+
+beforeAll(() => {
+  theme.__hd__.avatar.colors.visualisation = [theme.colors.primary];
+});
+
+describe('AvatarStack', () => {
+  it('renders correctly by default', () => {
+    const wrapper = renderWithTheme(
+      <Avatar.Stack testID="group-avatar">
+        <Avatar title="TT" />
+        <Avatar title="SS" />
+        <Avatar title="AA" />
+        <Avatar title="OO" />
+        <Avatar title="NA" />
+      </Avatar.Stack>
+    );
+
+    expect(wrapper.queryAllByText('TT')).toHaveLength(1);
+    expect(wrapper.queryAllByText('SS')).toHaveLength(1);
+    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.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly with custom props', () => {
+    const wrapper = renderWithTheme(
+      <Avatar.Stack max={3} size="medium" testID="group-avatar">
+        <Avatar title="TT" />
+        <Avatar title="SS" />
+        <Avatar title="AA" />
+        <Avatar title="OO" />
+        <Avatar title="NA" />
+      </Avatar.Stack>
+    );
+
+    expect(wrapper.queryAllByText('TT')).toHaveLength(1);
+    expect(wrapper.queryAllByText('SS')).toHaveLength(1);
+    expect(wrapper.queryAllByText('AA')).toHaveLength(1);
+    expect(wrapper.queryAllByText('+2')).toHaveLength(1);
+    expect(wrapper.queryAllByText('OO')).toHaveLength(0);
+    expect(wrapper.queryAllByText('NA')).toHaveLength(0);
+    expect(wrapper.getByTestId('group-avatar')).toHaveStyle({
+      width: 40 * (1 + 0.7 * 3),
+      height: 40,
+    });
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,61 @@
+import React, { ReactElement } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import Avatar, { AvatarProps } from '../Avatar';
+import { StyledAvatar, StyledWrapper } from './StyledAvatarStack';
+import { useAvatarColors } from './utils';
+
+export interface AvatarStackProps extends Pick<AvatarProps, 'size'> {
+  /**
+   * Avatar elements to be rendered.
+   */
+  children: ReactElement<Omit<AvatarProps, 'size' | 'style'>>[];
+  /**
+   * Max avatars to show.
+   */
+  max?: number;
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const AvatarStack = ({
+  children,
+  max,
+  size = 'small',
+  style,
+  testID,
+}: 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);
+  }
+
+  return (
+    <StyledWrapper
+      themeSize={size}
+      themeAvatarCount={avatars.length}
+      style={style}
+      testID={testID}
+    >
+      {avatars.map((avt, index) => (
+        <StyledAvatar
+          {...avt.props}
+          size={size}
+          themeIndex={index}
+          style={{ backgroundColor: colors[index % colors.length] }}
+        />
+      ))}
+    </StyledWrapper>
+  );
+};
+
+export default AvatarStack;

package/src/components/Avatar/AvatarStack/utils.ts

@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+import { useTheme } from '../../../theme';
+
+const shuffleArray = <T>(array: Array<T>): Array<T> =>
+  array
+    .map((value) => ({ value, sort: Math.random() }))
+    .sort((a, b) => a.sort - b.sort)
+    .map(({ value }) => value);
+
+/**
+ * Hook that returns a memoized and shuffled array of visualisation colors for Avatar.
+ */
+export const useAvatarColors = () => {
+  const theme = useTheme();
+  const visualisationColors = theme.__hd__.avatar.colors.visualisation;
+  const shuffledColors = useMemo(
+    () => shuffleArray(visualisationColors),
+    [visualisationColors]
+  );
+
+  return shuffledColors;
+};