@hero-design/rn 7.2.2 → 7.3.0

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

@@ -27,9 +27,9 @@ exports[`Tabs renders correctly 1`] = `
       style={
         Array [
           Object {
-            "backgroundColor": "#7622d7",
-            "paddingLeft": 0,
-            "paddingRight": 0,
+            "borderBottomColor": "#dadbde",
+            "borderBottomWidth": 1,
+            "paddingHorizontal": 0,
           },
           undefined,
         ]
@@ -43,279 +43,372 @@ exports[`Tabs renders correctly 1`] = `
         }
       }
     >
-      <RCTScrollView
-        data={
-          Array [
-            Object {
-              "component": <Text>
-                Work Screen
-              </Text>,
-              "icon": "suitcase",
-              "key": "work",
-              "title": "Work",
-            },
-            Object {
-              "component": <Text>
-                Personal Screen
-              </Text>,
-              "icon": "face-smiley",
-              "key": "personal",
-              "title": "Personal",
-            },
-          ]
-        }
-        getItem={[Function]}
-        getItemCount={[Function]}
-        horizontal={true}
-        keyExtractor={[Function]}
-        onContentSizeChange={[Function]}
-        onLayout={[Function]}
-        onMomentumScrollBegin={[Function]}
-        onMomentumScrollEnd={[Function]}
-        onScroll={[Function]}
-        onScrollBeginDrag={[Function]}
-        onScrollEndDrag={[Function]}
-        onScrollToIndexFailed={[Function]}
-        removeClippedSubviews={false}
-        renderItem={[Function]}
-        scrollEventThrottle={50}
-        showsHorizontalScrollIndicator={false}
-        stickyHeaderIndices={Array []}
-        style={
-          Array [
-            Object {
-              "paddingLeft": 8,
-              "paddingRight": 8,
-            },
-            undefined,
-          ]
-        }
-        viewabilityConfigCallbackPairs={Array []}
-      >
-        <View>
+      <View>
+        <View
+          onLayout={[Function]}
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+              undefined,
+            ]
+          }
+        >
           <View
-            onLayout={[Function]}
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               Array [
                 Object {
-                  "flexDirection": "row",
+                  "alignItems": "center",
+                  "flex": 1,
+                  "paddingVertical": 8,
                 },
-                null,
+                undefined,
               ]
             }
           >
-            <View
-              accessible={true}
-              collapsable={false}
-              focusable={true}
-              nativeID="animatedComponent"
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Object {
-                  "opacity": 1,
-                }
-              }
-            >
-              <View
+            <View>
+              <Text
+                numberOfLines={1}
                 style={
                   Array [
                     Object {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "paddingBottom": 24,
-                      "paddingLeft": 16,
-                      "paddingRight": 16,
-                      "paddingTop": 24,
+                      "color": "#292a2b",
+                      "fontFamily": "BeVietnamPro-SemiBold",
+                      "fontSize": 14,
+                      "letterSpacing": 0.42,
+                      "lineHeight": 22,
+                    },
+                    Object {
+                      "color": "#292a2b",
                     },
-                    undefined,
                   ]
                 }
+                themeFontSize="medium"
+                themeFontWeight="semi-bold"
+                themeIntent="body"
               >
-                <HeroIcon
-                  name="suitcase"
-                  style={
-                    Array [
-                      Object {
-                        "color": "#292a2b",
-                        "fontSize": 24,
-                      },
-                      Array [
-                        Object {
-                          "color": "#ffffff",
-                        },
-                        undefined,
-                      ],
-                    ]
-                  }
-                  testID="hero-icon-suitcase"
-                  themeIntent="text"
-                  themeSize="medium"
-                />
-                <Text
-                  numberOfLines={1}
-                  style={
-                    Array [
+                Work
+              </Text>
+              <View
+                collapsable={false}
+                nativeID="animatedComponent"
+                style={
+                  Object {
+                    "backgroundColor": "#de350b",
+                    "borderRadius": 999,
+                    "height": 8,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": -2,
+                    "top": -2,
+                    "transform": Array [
                       Object {
-                        "color": "#292a2b",
-                        "fontFamily": "BeVietnamPro-SemiBold",
-                        "fontSize": 14,
-                        "letterSpacing": 0.42,
-                        "lineHeight": 22,
+                        "scale": 0.5,
                       },
-                      Array [
-                        Object {
-                          "color": "#ffffff",
-                          "marginLeft": 8,
-                        },
-                        undefined,
-                      ],
-                    ]
+                    ],
+                    "width": 8,
                   }
-                  themeActive={true}
-                  themeFontSize="medium"
-                  themeFontWeight="semi-bold"
-                  themeIntent="body"
-                >
-                  Work
-                </Text>
-              </View>
+                }
+                themeIntent="danger"
+              />
             </View>
           </View>
           <View
-            onLayout={[Function]}
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               Array [
                 Object {
-                  "flexDirection": "row",
+                  "alignItems": "center",
+                  "flex": 1,
+                  "paddingVertical": 8,
                 },
-                null,
+                undefined,
               ]
             }
           >
-            <View
-              accessible={true}
-              collapsable={false}
-              focusable={true}
-              nativeID="animatedComponent"
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Object {
-                  "opacity": 1,
-                }
-              }
-            >
-              <View
+            <View>
+              <Text
+                numberOfLines={1}
                 style={
                   Array [
                     Object {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "paddingBottom": 24,
-                      "paddingLeft": 16,
-                      "paddingRight": 16,
-                      "paddingTop": 24,
+                      "color": "#292a2b",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.42,
+                      "lineHeight": 22,
+                    },
+                    Object {
+                      "color": "#292a2b",
                     },
-                    undefined,
                   ]
                 }
+                themeFontSize="medium"
+                themeFontWeight="regular"
+                themeIntent="body"
               >
-                <HeroIcon
-                  name="face-smiley"
-                  style={
-                    Array [
+                Personal
+              </Text>
+              <View
+                collapsable={false}
+                nativeID="animatedComponent"
+                style={
+                  Object {
+                    "backgroundColor": "#de350b",
+                    "borderRadius": 999,
+                    "height": 8,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": -2,
+                    "top": -2,
+                    "transform": Array [
                       Object {
-                        "color": "#292a2b",
-                        "fontSize": 24,
+                        "scale": 0.5,
                       },
-                      Array [
-                        Object {
-                          "color": "#ffffff50",
-                        },
-                        undefined,
-                      ],
-                    ]
+                    ],
+                    "width": 8,
                   }
-                  testID="hero-icon-face-smiley"
-                  themeIntent="text"
-                  themeSize="medium"
-                />
-                <Text
-                  numberOfLines={1}
-                  style={
-                    Array [
+                }
+                themeIntent="danger"
+              />
+            </View>
+          </View>
+          <View
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flex": 1,
+                  "paddingVertical": 8,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View>
+              <Text
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#292a2b",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.42,
+                      "lineHeight": 22,
+                    },
+                    Object {
+                      "color": "#292a2b",
+                    },
+                  ]
+                }
+                themeFontSize="medium"
+                themeFontWeight="regular"
+                themeIntent="body"
+              >
+                Home
+              </Text>
+              <View
+                collapsable={false}
+                nativeID="animatedComponent"
+                style={
+                  Object {
+                    "backgroundColor": "#de350b",
+                    "borderRadius": 999,
+                    "height": 8,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": -2,
+                    "top": -2,
+                    "transform": Array [
                       Object {
-                        "color": "#292a2b",
-                        "fontFamily": "BeVietnamPro-SemiBold",
-                        "fontSize": 14,
-                        "letterSpacing": 0.42,
-                        "lineHeight": 22,
+                        "scale": 1,
                       },
-                      Array [
-                        Object {
-                          "color": "#ffffff50",
-                          "marginLeft": 8,
-                        },
-                        undefined,
-                      ],
-                    ]
+                    ],
+                    "width": 8,
                   }
-                  themeActive={false}
-                  themeFontSize="medium"
-                  themeFontWeight="semi-bold"
-                  themeIntent="body"
-                >
-                  Personal
-                </Text>
-              </View>
+                }
+                themeIntent="danger"
+              />
             </View>
           </View>
         </View>
-      </RCTScrollView>
+        <View
+          collapsable={false}
+          nativeID="animatedComponent"
+          style={
+            Object {
+              "backgroundColor": "#292a2b",
+              "bottom": 0,
+              "height": 2,
+              "position": "absolute",
+              "transform": Array [
+                Object {
+                  "translateX": 0,
+                },
+              ],
+              "width": 0,
+            }
+          }
+          themeWidth={0}
+        />
+      </View>
     </View>
-    <View
-      style={
-        Array [
-          Object {
-            "flex": 1,
-          },
-          undefined,
-        ]
-      }
+    <RNCViewPager
+      layoutDirection="ltr"
+      onMoveShouldSetResponderCapture={[Function]}
+      onPageScroll={[Function]}
+      onPageScrollStateChanged={[Function]}
+      onPageSelected={[Function]}
     >
       <View
-        accessibilityElementsHidden={false}
         collapsable={false}
-        importantForAccessibility="auto"
-        pointerEvents="auto"
-        removeClippedSubviews={false}
         style={
-          Array [
-            Object {
-              "display": "flex",
-              "flex": 1,
-            },
-            undefined,
-          ]
+          Object {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
         }
-        themeVisibility={true}
       >
-        <Text>
-          Work Screen
-        </Text>
+        <View
+          accessibilityElementsHidden={false}
+          collapsable={false}
+          importantForAccessibility="auto"
+          pointerEvents="auto"
+          style={
+            Array [
+              Object {
+                "flex": 1,
+              },
+              Array [
+                undefined,
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ],
+            ]
+          }
+        >
+          <Text>
+            Work Screen
+          </Text>
+        </View>
       </View>
-    </View>
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={true}
+          collapsable={false}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          style={
+            Array [
+              Object {
+                "flex": 1,
+              },
+              Array [
+                undefined,
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ],
+            ]
+          }
+        >
+          <Text>
+            Personal Screen
+          </Text>
+        </View>
+      </View>
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={true}
+          collapsable={false}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          style={
+            Array [
+              Object {
+                "flex": 1,
+              },
+              Array [
+                undefined,
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ],
+            ]
+          }
+        >
+          <Text>
+            Home Screen
+          </Text>
+        </View>
+      </View>
+    </RNCViewPager>
   </View>
 </RNCSafeAreaProvider>
 `;

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

@@ -15,16 +15,20 @@ const TestTabsComponent = (
   const tabs: TabType[] = [
     {
       key: 'work',
-      title: 'Work',
-      icon: 'suitcase',
+      activeItem: 'Work',
       component: <Text>Work Screen</Text>,
     },
     {
       key: 'personal',
-      title: 'Personal',
-      icon: 'face-smiley',
+      activeItem: 'Personal',
       component: <Text>Personal Screen</Text>,
     },
+    {
+      key: 'home',
+      activeItem: 'Home',
+      component: <Text>Home Screen</Text>,
+      showBadge: true,
+    },
   ];
 
   return (
@@ -46,34 +50,31 @@ const TestTabsComponent = (
 
 describe('Tabs', () => {
   it('renders correctly', () => {
-    const { getByTestId, getByText, toJSON } = renderWithTheme(
-      <TestTabsComponent />
-    );
+    const { getByText, toJSON } = renderWithTheme(<TestTabsComponent />);
 
     expect(toJSON()).toMatchSnapshot();
     expect(getByText('Work')).toBeDefined();
     expect(getByText('Personal')).toBeDefined();
-    expect(getByTestId('hero-icon-suitcase')).toBeDefined();
-    expect(getByTestId('hero-icon-face-smiley')).toBeDefined();
-    fireEvent.press(getByText('Personal'));
-
-    // All screens are rendered and component is not unmounted when switching screen.
+    expect(getByText('Home')).toBeDefined();
     expect(getByText('Work Screen')).toBeDefined();
+    fireEvent.press(getByText('Personal'));
     expect(getByText('Personal Screen')).toBeDefined();
+    fireEvent.press(getByText('Home'));
+    expect(getByText('Home Screen')).toBeDefined();
   });
 
-  it('renders correctly with renderActiveTabOnly is true', () => {
-    const { getByText, queryByText, getByTestId } = renderWithTheme(
-      <TestTabsComponent renderActiveTabOnly />
+  it('renders correctly with lazy preloaded', () => {
+    const { getByText, queryByText } = renderWithTheme(
+      <TestTabsComponent lazy lazyPreloadDistance={1} />
     );
 
-    // Can switch tab by clicking icon.
-    fireEvent.press(getByTestId('hero-icon-face-smiley'));
-    expect(getByText('Personal Screen')).toBeDefined();
-    fireEvent.press(getByTestId('hero-icon-suitcase'));
     expect(getByText('Work Screen')).toBeDefined();
+    expect(getByText('Personal Screen')).toBeDefined();
+    // Preload distance is 1, so Home Screen is not rendered.
+    expect(queryByText('Home Screen')).toBeNull();
 
-    // Only render selected screen, others are unmounted.
-    expect(queryByText('Personal Screen')).toBeNull();
+    fireEvent.press(getByText('Home'));
+    expect(getByText('Home Screen')).toBeDefined();
+    expect(queryByText('Work Screen')).toBeNull();
   });
 });