@hero-design/rn 9.0.0-0 → 9.0.0-alpha.0

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

@@ -2,47 +2,79 @@
 
 exports[`Switch renders correctly 1`] = `
 <View
-  accessibilityState={
-    Object {
-      "disabled": false,
-    }
-  }
-  accessible={true}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
   style={
-    Array [
-      Object {
-        "backgroundColor": "#808f91",
-        "borderRadius": 999,
-        "display": "flex",
-        "height": 24,
-        "justifyContent": "center",
-        "paddingHorizontal": 4,
-        "width": 48,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-  testID="switch"
-  themeVariant="unchecked"
 >
   <View
-    collapsable={false}
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "backgroundColor": "#ffffff",
-        "borderRadius": 999,
-        "height": 16,
-        "left": 0,
-        "width": 16,
+      [
+        {
+          "backgroundColor": "#808f91",
+          "borderRadius": 999,
+          "display": "flex",
+          "height": 24,
+          "justifyContent": "center",
+          "paddingHorizontal": 4,
+          "width": 48,
+        },
+        undefined,
+      ]
+    }
+    testID="switch"
+    themeVariant="unchecked"
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderRadius": 999,
+          "height": 16,
+          "left": 0,
+          "width": 16,
+        }
       }
+    />
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
     }
   />
 </View>
@@ -50,47 +82,79 @@ exports[`Switch renders correctly 1`] = `
 
 exports[`Switch trigger press function correctly 1`] = `
 <View
-  accessibilityState={
-    Object {
-      "disabled": false,
-    }
-  }
-  accessible={true}
-  focusable={true}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
   style={
-    Array [
-      Object {
-        "backgroundColor": "#808f91",
-        "borderRadius": 999,
-        "display": "flex",
-        "height": 24,
-        "justifyContent": "center",
-        "paddingHorizontal": 4,
-        "width": 48,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-  testID="switch"
-  themeVariant="unchecked"
 >
   <View
-    collapsable={false}
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessible={true}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "backgroundColor": "#ffffff",
-        "borderRadius": 999,
-        "height": 16,
-        "left": 0,
-        "width": 16,
+      [
+        {
+          "backgroundColor": "#808f91",
+          "borderRadius": 999,
+          "display": "flex",
+          "height": 24,
+          "justifyContent": "center",
+          "paddingHorizontal": 4,
+          "width": 48,
+        },
+        undefined,
+      ]
+    }
+    testID="switch"
+    themeVariant="unchecked"
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderRadius": 999,
+          "height": 16,
+          "left": 0,
+          "width": 16,
+        }
       }
+    />
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
     }
   />
 </View>

package/src/components/Tabs/SceneView.tsx

@@ -22,14 +22,16 @@ const SceneView = ({
   );
   const focused = index === selectedIndex;
 
-  if (isLoading && Math.abs(selectedIndex - index) <= lazyPreloadDistance) {
-    // Always render the route when it becomes focused
-    setIsLoading(false);
-  }
+  React.useEffect(() => {
+    if (isLoading && Math.abs(selectedIndex - index) <= lazyPreloadDistance) {
+      // Always render the route when it becomes focused
+      setIsLoading(false);
+    }
+  }, [isLoading, index, selectedIndex, lazyPreloadDistance]);
 
   React.useEffect(() => {
     let unsubscribe: (() => void) | undefined;
-    let timer: number | undefined;
+    let timer: ReturnType<typeof setTimeout>;
 
     if (!lazy && isLoading) {
       // If lazy mode is not enabled, render the scene with a delay if not loaded already
@@ -39,7 +41,10 @@ const SceneView = ({
 
     return () => {
       unsubscribe?.();
-      clearTimeout(timer);
+
+      if (timer) {
+        clearTimeout(timer);
+      }
     };
   }, [index, isLoading, lazy, focused]);
 

package/src/components/Tabs/ScrollableTabs.tsx

@@ -1,12 +1,16 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import PagerView from 'react-native-pager-view';
-import { TabContainer, ContentWrapper } from './StyledScrollableTabs';
+import { TabContainer } from './StyledScrollableTabs';
 import type { TabsProps } from '.';
 import SceneView from './SceneView';
-import ScrollableTabHeader from './ScrollableTabsHeader';
+import ScrollableTabHeader from './ScrollableTabsHeader/ScrollableTabsHeader';
 import { ScreenContext, TabContext } from './useIsFocused';
 
+export interface ScrollableTabProps extends TabsProps {
+  variant?: 'underlined' | 'highlighted';
+}
+
 const ScrollableTab = ({
   onTabPress,
   selectedTabKey,
@@ -17,15 +21,18 @@ const ScrollableTab = ({
   lazyPreloadDistance = 1,
   swipeEnabled = true,
   testID: componentTestID,
-}: TabsProps) => {
+  variant = 'highlighted',
+}: ScrollableTabProps) => {
   const pagerViewRef = React.useRef<PagerView>(null);
   const insets = useSafeAreaInsets();
   const selectedTabIndex = tabs.findIndex(
     (item) => item.key === selectedTabKey
   );
+  // Used as a flag to prevent calling onTabPress on initial render
+  const hasScrolled = useRef(false);
 
   React.useEffect(() => {
-    let timeoutHandle: number | null = null;
+    let timeoutHandle: ReturnType<typeof setTimeout>;
     if (selectedTabIndex !== -1) {
       // If the selected tab is changed too quickly, the setPage is crashed and not work anymore
       // We apply throttle to prevent this issue https://github.com/Thinkei/hero-design/issues/1715
@@ -59,20 +66,31 @@ const ScrollableTab = ({
           barStyle={barStyle}
           insets={insets}
           testID={componentTestID ? `${componentTestID}-tab-bar` : undefined}
+          variant={variant}
         />
-        <ContentWrapper
+        <PagerView
+          useNext
           initialPage={selectedTabIndex}
           ref={pagerViewRef}
+          onPageScrollStateChanged={(e) => {
+            if (
+              !hasScrolled.current &&
+              e.nativeEvent.pageScrollState === 'dragging'
+            ) {
+              hasScrolled.current = true;
+            }
+          }}
           onPageSelected={(e) => {
             const index = e.nativeEvent.position;
             const selectedItem = tabs[index];
-            if (selectedItem) {
+            if (hasScrolled.current && selectedItem) {
               setTimeout(() => {
                 onTabPress(selectedItem.key);
               });
             }
           }}
           scrollEnabled={swipeEnabled}
+          style={{ flex: 1 }}
         >
           {tabs.map((tab, index) => {
             const { key, component, testID } = tab;
@@ -91,7 +109,7 @@ const ScrollableTab = ({
               </ScreenContext.Provider>
             );
           })}
-        </ContentWrapper>
+        </PagerView>
       </TabContainer>
     </TabContext.Provider>
   );

package/src/components/Tabs/{ScrollableTabsHeader.tsx → ScrollableTabsHeader/ScrollableTabsHeader.tsx}

@@ -1,26 +1,28 @@
+import { useTheme } from '@emotion/react';
 import React from 'react';
 import {
-  TouchableWithoutFeedback,
   FlatList,
-  Animated,
+  Platform,
   StyleProp,
-  ViewStyle,
+  TouchableWithoutFeedback,
   ViewProps,
+  ViewStyle,
 } from 'react-native';
-import { useTheme } from '@emotion/react';
+import type { ItemType, TabType } from '..';
+import Icon from '../../Icon';
+import { isHeroIcon } from '../../Icon/utils';
+import Typography from '../../Typography';
 import {
   HeaderTabItem,
-  HeaderTabWrapper,
+  HeaderTabItemIndicator,
   HeaderTabItemOutline,
-  HeaderTabItemWrapper,
   HeaderTabItemOutlineWrapper,
-} from './StyledScrollableTabs';
-import { useAnimatedValueArray } from './utils';
-import { isHeroIcon } from '../Icon/utils';
-import Icon from '../Icon';
-import Typography from '../Typography';
-import type { ItemType, TabType } from '.';
-import TabWithBadge from './TabWithBadge';
+  HeaderTabItemWrapper,
+  HeaderTabWrapper,
+} from '../StyledScrollableTabs';
+import TabWithBadge from '../TabWithBadge';
+import useInitHighlightedAnimation from './hooks/useInitHighlightedAnimation';
+import useInitUnderlinedAnimation from './hooks/useInitUnderlinedAnimation';
 
 const getTabItem = ({
   item,
@@ -44,13 +46,13 @@ const getTabItem = ({
 
   if (typeof item === 'string') {
     return (
-      <Typography.Text
-        fontWeight={active ? 'semi-bold' : 'regular'}
+      <Typography.Body
+        variant={active ? 'regular-bold' : 'regular'}
         numberOfLines={1}
         style={{ color }}
       >
         {item}
-      </Typography.Text>
+      </Typography.Body>
     );
   }
 
@@ -87,6 +89,10 @@ export interface ScrollableTabHeaderProps extends ViewProps {
     right: number;
     left: number;
   };
+  /**
+   * Variant of the tab header
+   */
+  variant?: 'underlined' | 'highlighted';
 }
 const ScrollableTabHeader = ({
   onTabPress,
@@ -95,12 +101,25 @@ const ScrollableTabHeader = ({
   barStyle,
   testID,
   insets = { top: 0, bottom: 0, right: 0, left: 0 },
+  variant = 'highlighted',
 }: ScrollableTabHeaderProps) => {
-  const flatListRef = React.useRef<FlatList>(null);
   const theme = useTheme();
-  const tabsAnims = useAnimatedValueArray(
-    tabs.map((_, i) => (i === selectedIndex ? 1 : 0))
-  );
+  const flatListRef = React.useRef<FlatList>(null);
+
+  // Init underlined animation data
+  const { underlinedTranslateX, underlinedOpacity } =
+    useInitUnderlinedAnimation({
+      tabsLength: tabs.length,
+      selectedIndex,
+      variant,
+    });
+
+  // Init highlighted animation data
+  const { tabsAnims } = useInitHighlightedAnimation({
+    selectedIndex,
+    tabsLength: tabs.length,
+    variant,
+  });
 
   React.useEffect(() => {
     const timeoutHandle: number | null = null;
@@ -111,19 +130,7 @@ const ScrollableTabHeader = ({
       });
     }
 
-    const animation = Animated.parallel([
-      ...tabs.map((_, i) =>
-        Animated.timing(tabsAnims[i], {
-          toValue: i === selectedIndex ? 1 : 0,
-          duration: 150,
-          useNativeDriver: true,
-        })
-      ),
-    ]);
-    animation.start();
-
     return () => {
-      animation.stop();
       if (timeoutHandle) {
         clearTimeout(timeoutHandle);
       }
@@ -149,8 +156,18 @@ const ScrollableTabHeader = ({
             100
           );
         }}
+        style={{
+          borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
+          borderBottomWidth: theme.__hd__.tabs.sizes.indicator,
+        }}
         contentContainerStyle={{
           paddingHorizontal: theme.__hd__.tabs.space.flatListHorizontalPadding,
+
+          // Specify it here again or the indicator won't show
+          ...(Platform.OS === 'android' && {
+            borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
+            borderBottomWidth: theme.__hd__.tabs.sizes.indicator,
+          }),
         }}
         renderItem={({ item: tab, index }) => {
           const {
@@ -187,22 +204,34 @@ const ScrollableTabHeader = ({
               testID={tabItemTestID}
             >
               <HeaderTabItem isFirstItem={index === 0}>
-                <HeaderTabItemOutlineWrapper>
-                  <HeaderTabItemOutline
-                    themeActive={active}
-                    style={{
-                      flex: 1,
-                      transform: [
-                        {
-                          scaleX: outlineScale,
-                        },
-                      ],
-                    }}
-                  />
-                </HeaderTabItemOutlineWrapper>
+                {variant === 'highlighted' && (
+                  <HeaderTabItemOutlineWrapper>
+                    <HeaderTabItemOutline
+                      themeActive={active}
+                      style={{
+                        flex: 1,
+                        transform: [
+                          {
+                            scaleX: outlineScale,
+                          },
+                        ],
+                      }}
+                    />
+                  </HeaderTabItemOutlineWrapper>
+                )}
+
                 <HeaderTabItemWrapper>
                   <TabWithBadge config={badge} tabItem={tabItem} />
                 </HeaderTabItemWrapper>
+
+                {variant === 'underlined' && (
+                  <HeaderTabItemIndicator
+                    style={{
+                      opacity: underlinedOpacity[index],
+                      transform: [{ translateX: underlinedTranslateX[index] }],
+                    }}
+                  />
+                )}
               </HeaderTabItem>
             </TouchableWithoutFeedback>
           );

package/src/components/Tabs/ScrollableTabsHeader/hooks/useInitHighlightedAnimation.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Animated, Platform } from 'react-native';
+import { useAnimatedValueArray } from '../../utils';
+
+const useInitHighlightedAnimation = ({
+  selectedIndex = 0,
+  tabsLength,
+  variant,
+}: {
+  selectedIndex?: number;
+  tabsLength: number;
+  variant: 'underlined' | 'highlighted';
+}) => {
+  const tabsAnims = useAnimatedValueArray(
+    Array.from({ length: tabsLength }).map((_, i) =>
+      i === selectedIndex ? 1 : 0
+    )
+  );
+
+  React.useEffect(() => {
+    if (variant !== 'highlighted') {
+      return;
+    }
+
+    const animation = Animated.parallel([
+      ...Array.from({ length: tabsLength }).map((_, i) =>
+        Animated.timing(tabsAnims[i], {
+          toValue: i === selectedIndex ? 1 : 0,
+          duration: 150,
+          useNativeDriver: Platform.OS !== 'web',
+        })
+      ),
+    ]);
+
+    animation.start();
+
+    return () => {
+      animation.stop();
+    };
+  }, [selectedIndex]);
+
+  return { tabsAnims };
+};
+
+export default useInitHighlightedAnimation;

package/src/components/Tabs/ScrollableTabsHeader/hooks/useInitUnderlinedAnimation.ts

@@ -0,0 +1,91 @@
+import React from 'react';
+import { Animated, Easing, Platform } from 'react-native';
+import { useAnimatedValueArray } from '../../utils';
+
+const TRANSLATE_DISTANCE = 30;
+
+const animateOpacity = (animatedValue: Animated.Value, toValue: number) => {
+  return Animated.timing(animatedValue, {
+    toValue,
+    duration: 150,
+    easing: Easing.ease,
+    useNativeDriver: Platform.OS !== 'web',
+  });
+};
+
+const animateTranslateX = (animatedValue: Animated.Value, toValue: number) => {
+  return Animated.spring(animatedValue, {
+    toValue,
+    useNativeDriver: Platform.OS !== 'web',
+  });
+};
+
+const useInitUnderlinedAnimation = ({
+  tabsLength,
+  selectedIndex = 0,
+  variant,
+}: {
+  tabsLength: number;
+  selectedIndex?: number;
+  variant: 'underlined' | 'highlighted';
+}) => {
+  const previousIndex = React.useRef<number>(0);
+  const translateXAnims = useAnimatedValueArray(
+    Array.from({ length: tabsLength }).map(() => 0)
+  );
+
+  const opacityAnims = useAnimatedValueArray(
+    Array.from({ length: tabsLength }).map((_, i) =>
+      selectedIndex !== undefined && selectedIndex === i ? 1 : 0
+    )
+  );
+
+  const underlinedTranslateX = translateXAnims.map((anim) =>
+    anim.interpolate({
+      inputRange: [-1, 0, 1],
+      outputRange: [-TRANSLATE_DISTANCE, 0, TRANSLATE_DISTANCE],
+    })
+  );
+
+  const underlinedOpacity = opacityAnims.map((anim) =>
+    anim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, 1],
+    })
+  );
+
+  React.useEffect(() => {
+    if (
+      variant === 'underlined' &&
+      selectedIndex !== undefined &&
+      previousIndex.current !== selectedIndex
+    ) {
+      // Prepare for translateX into the right position.
+      if (selectedIndex > previousIndex.current) {
+        translateXAnims[selectedIndex].setValue(-1);
+      } else {
+        translateXAnims[selectedIndex].setValue(1);
+      }
+
+      // Split animations into 2 sets of parallel animations to prevent race condition.
+      Animated.parallel([
+        animateOpacity(opacityAnims[selectedIndex], 1),
+        animateTranslateX(translateXAnims[selectedIndex], 0),
+      ]).start();
+
+      Animated.parallel([
+        animateOpacity(opacityAnims[previousIndex.current], 0),
+        animateTranslateX(
+          translateXAnims[previousIndex.current],
+          selectedIndex > previousIndex.current ? 1 : -1
+        ),
+      ]).start();
+
+      previousIndex.current = selectedIndex;
+    }
+  }, [selectedIndex, variant, opacityAnims, translateXAnims]);
+
+  return { underlinedTranslateX, underlinedOpacity };
+};
+
+export default useInitUnderlinedAnimation;