@hero-design/rn 7.21.0 → 7.22.0

package/src/components/Switch/SelectorSwitch/__tests__/index.spec.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import SelectorSwitch from '..';
+
+type PermissionType = 'employee' | 'manager';
+
+describe('SelectorSwitch', () => {
+  it('renders correctly', () => {
+    const wrapper = renderWithTheme(
+      <SelectorSwitch<PermissionType>
+        options={[
+          {
+            value: 'employee',
+            text: 'My Dashboard',
+            icon: 'user',
+          },
+          {
+            value: 'manager',
+            text: 'Manager Dashboard',
+            icon: 'multiple-users',
+            badge: { type: 'status' },
+          },
+        ]}
+        value="employee"
+      />
+    );
+
+    expect(wrapper.queryAllByText('My Dashboard')).toHaveLength(1);
+    expect(wrapper.queryAllByText('Manager Dashboard')).toHaveLength(0);
+    expect(
+      wrapper.queryAllByTestId('selector-switch-status-badge')
+    ).toHaveLength(1);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('triggers onPress correctly', () => {
+    const onPress = jest.fn();
+    const wrapper = renderWithTheme(
+      <SelectorSwitch<PermissionType>
+        options={[
+          {
+            value: 'employee',
+            text: 'My Dashboard',
+            icon: 'user',
+          },
+          {
+            value: 'manager',
+            text: 'Manager Dashboard',
+            icon: 'multiple-users',
+            badge: { type: 'status' },
+          },
+        ]}
+        value="manager"
+        onPress={onPress}
+      />
+    );
+
+    fireEvent.press(wrapper.getByText('Manager Dashboard'));
+    expect(onPress).toBeCalledTimes(1);
+  });
+});

package/src/components/Switch/SelectorSwitch/index.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import { StyleProp, TouchableWithoutFeedback, ViewStyle } from 'react-native';
+import { StyledWrapper } from './StyledSelectorSwitch';
+import type { IconName } from '../../Icon';
+import Option from './Option';
+
+type StatusBadgeType = {
+  type: 'status';
+};
+export type BadgeConfigType = StatusBadgeType;
+
+export type OptionType<T> = {
+  value: T;
+  text: string;
+  icon: IconName;
+  badge?: BadgeConfigType;
+};
+
+export interface SelectorSwitchProps<T> {
+  /**
+   * Array of exactly TWO options to switch between.
+   */
+  options: [OptionType<T>, OptionType<T>];
+  /**
+   * Current selected value.
+   */
+  value: T;
+  /**
+   *  Callback called when an option is pressed.
+   */
+  onPress?: (value: T) => void;
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const SelectorSwitch = <T,>({
+  options,
+  value,
+  onPress,
+  style,
+  testID,
+}: SelectorSwitchProps<T>): ReactElement => (
+  <TouchableWithoutFeedback onPress={() => onPress(value)} testID={testID}>
+    <StyledWrapper style={style}>
+      {options.map((opt, index) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <Option {...opt} selected={opt.value === value} key={index} />
+      ))}
+    </StyledWrapper>
+  </TouchableWithoutFeedback>
+);
+
+export default SelectorSwitch;

package/src/components/Switch/index.tsx

@@ -6,6 +6,7 @@ import { Animated, Easing, TouchableWithoutFeedback } from 'react-native';
 import type { ReactElement } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { StyledKnot, StyledWrapper, Variant } from './StyledSwitch';
+import SelectorSwitch from './SelectorSwitch';
 
 export interface SwitchProps {
   /**
@@ -88,4 +89,6 @@ const Switch = ({
   );
 };
 
-export default Switch;
+export default Object.assign(Switch, {
+  Selector: SelectorSwitch,
+});

package/src/components/Tabs/ScrollableTabs.tsx

@@ -63,12 +63,15 @@ const ScrollableTab = ({
   barStyle,
   lazy = false,
   lazyPreloadDistance = 1,
+  testID: componentTestID,
 }: TabsProps) => {
   const flatListRef = React.useRef<FlatList>(null);
   const pagerViewRef = React.useRef<PagerView>(null);
   const insets = useSafeAreaInsets();
   const theme = useTheme();
-  const selectedTabIndex = tabs.findIndex(item => item.key === selectedTabKey);
+  const selectedTabIndex = tabs.findIndex(
+    (item) => item.key === selectedTabKey
+  );
   const tabsAnims = useAnimatedValueArray(
     tabs.map((_, i) => (i === selectedTabIndex ? 1 : 0))
   );
@@ -97,13 +100,17 @@ const ScrollableTab = ({
   }, [selectedTabIndex]);
 
   return (
-    <TabContainer style={containerStyle}>
-      <HeaderTabWrapper themeInsets={insets} style={barStyle}>
+    <TabContainer style={containerStyle} testID={componentTestID}>
+      <HeaderTabWrapper
+        themeInsets={insets}
+        style={barStyle}
+        testID={componentTestID ? `${componentTestID}-tab-bar` : undefined}
+      >
         <FlatList<TabType>
           ref={flatListRef}
           horizontal
           data={tabs}
-          keyExtractor={tab => String(tab.key)}
+          keyExtractor={(tab) => String(tab.key)}
           showsHorizontalScrollIndicator={false}
           onScrollToIndexFailed={({ index }) => {
             setTimeout(
@@ -184,7 +191,7 @@ const ScrollableTab = ({
       <ContentWrapper
         initialPage={selectedTabIndex}
         ref={pagerViewRef}
-        onPageSelected={e => {
+        onPageSelected={(e) => {
           const index = e.nativeEvent.position;
           const selectedItem = tabs[index];
           if (selectedItem) {

package/src/components/Tabs/__tests__/ScrollableTabs.spec.tsx

@@ -62,7 +62,7 @@ const TestTabsComponent = (
         {...props}
         tabs={tabs}
         selectedTabKey={selectedTabKey}
-        onTabPress={newTabKey => setSelectedTabKey(newTabKey)}
+        onTabPress={(newTabKey) => setSelectedTabKey(newTabKey)}
       />
     </SafeAreaProvider>
   );

package/src/components/Tabs/__tests__/index.spec.tsx

@@ -59,7 +59,7 @@ const TestTabsComponent = (
         {...props}
         tabs={tabs}
         selectedTabKey={selectedTabKey}
-        onTabPress={newTabKey => setSelectedTabKey(newTabKey)}
+        onTabPress={(newTabKey) => setSelectedTabKey(newTabKey)}
       />
     </SafeAreaProvider>
   );

package/src/components/Tabs/index.tsx

@@ -105,11 +105,14 @@ const Tabs = ({
   barStyle,
   lazy = false,
   lazyPreloadDistance = 1,
+  testID: componentTestID,
 }: TabsProps): JSX.Element => {
   const theme = useTheme();
   const insets = useSafeAreaInsets();
   const pagerViewRef = React.useRef<PagerView>(null);
-  const selectedTabIndex = tabs.findIndex(item => item.key === selectedTabKey);
+  const selectedTabIndex = tabs.findIndex(
+    (item) => item.key === selectedTabKey
+  );
   const scrollOffsetAnimatedValue = React.useRef(new Animated.Value(0)).current;
   const positionAnimatedValue = React.useRef(new Animated.Value(0)).current;
   const [tabsWidth, setTabsWidth] = React.useState<number>(0);
@@ -121,18 +124,22 @@ const Tabs = ({
   }, [selectedTabIndex]);
 
   return (
-    <TabContainer style={containerStyle}>
-      <HeaderTabWrapper themeInsets={insets} style={barStyle}>
+    <TabContainer style={containerStyle} testID={componentTestID}>
+      <HeaderTabWrapper
+        themeInsets={insets}
+        style={barStyle}
+        testID={componentTestID ? `${componentTestID}-tab-bar` : undefined}
+      >
         <View>
           <HeaderTab
-            onLayout={e => {
+            onLayout={(e) => {
               const { width } = e.nativeEvent.layout;
               if (tabsWidth !== width) {
                 setTabsWidth(width);
               }
             }}
           >
-            {tabs.map(tab => {
+            {tabs.map((tab) => {
               const {
                 key,
                 testID,
@@ -180,7 +187,7 @@ const Tabs = ({
       <ContentWrapper
         initialPage={selectedTabIndex}
         ref={pagerViewRef}
-        onPageSelected={e => {
+        onPageSelected={(e) => {
           const index = e.nativeEvent.position;
           const selectedItem = tabs[index];
           if (selectedItem) {

package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1396,7 +1396,9 @@ exports[`TextInput idle renders correctly 1`] = `
             "right": 0,
             "top": 0,
           },
-          undefined,
+          Object {
+            "borderColor": "#de350b",
+          },
         ]
       }
       themeVariant="default"