@hero-design/rn 8.12.5-alpha.1 → 8.13.0

package/src/components/Error/index.tsx

@@ -0,0 +1,215 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import type { ReactElement } from 'react';
+import type { ImageSourcePropType, ViewProps } from 'react-native';
+import {
+  ErrorVariant,
+  StyledErrorButtonContainer,
+  StyledErrorButtonPrimary,
+  StyledErrorButtonSecondary,
+  StyledErrorContainer,
+  StyledErrorContent,
+  StyledErrorDescription,
+  StyledErrorImage,
+  StyledErrorModal,
+  StyledErrorTitle,
+} from './StyledError';
+
+interface ErrorPageProps extends ViewProps {
+  /**
+   * Variant of the error
+   */
+  variant?: ErrorVariant;
+  /**
+   * Title of the error
+   */
+  title: string;
+  /**
+   * Description of the error
+   */
+  description?: string;
+  /**
+   * Image of the error
+   */
+  image?: ImageSourcePropType | string;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+  /**
+   * Action button text
+   */
+  ctaText?: string;
+  /**
+   * Callback when the action button is pressed.
+   */
+  onCtaPress?: () => void;
+  /**
+   * Secondary button text
+   */
+  secondaryCtaText?: string;
+  /**
+   * Callback when the secondary button is pressed.
+   */
+  onSecondaryCtaPress?: () => void;
+}
+
+type ErrorProps = ErrorPageProps & {
+  /**
+   * Visibility of the error
+   */
+  visible: boolean;
+};
+
+type onCloseCallbackType = 'cta' | 'secondaryCta' | null;
+
+const ErrorPage = ({
+  variant = 'in-page',
+  title,
+  description,
+  image,
+  testID,
+  ctaText,
+  onCtaPress,
+  secondaryCtaText,
+  onSecondaryCtaPress,
+  ...nativeProps
+}: ErrorPageProps): ReactElement => {
+  const showCta = ctaText && onCtaPress !== undefined;
+  const showSecondaryCta =
+    secondaryCtaText && onSecondaryCtaPress !== undefined;
+  const showButtonContainer = showCta || showSecondaryCta;
+  return (
+    <StyledErrorContainer testID={testID} themeVariant={variant}>
+      <StyledErrorContent {...nativeProps}>
+        {image && (
+          <StyledErrorImage
+            source={typeof image === 'string' ? { uri: image } : image}
+            testID="error-image"
+          />
+        )}
+
+        <StyledErrorTitle>{title}</StyledErrorTitle>
+
+        {description && (
+          <StyledErrorDescription>{description}</StyledErrorDescription>
+        )}
+      </StyledErrorContent>
+
+      {showButtonContainer && (
+        <StyledErrorButtonContainer>
+          {showCta && (
+            <StyledErrorButtonPrimary
+              variant="filled"
+              text={ctaText}
+              onPress={onCtaPress}
+            />
+          )}
+          {showSecondaryCta && (
+            <StyledErrorButtonSecondary
+              variant="text"
+              text={secondaryCtaText}
+              onPress={onSecondaryCtaPress}
+            />
+          )}
+        </StyledErrorButtonContainer>
+      )}
+    </StyledErrorContainer>
+  );
+};
+/**
+ * Renders error page
+ *
+ * @param {ErrorProps}
+ * @return {*}  {ReactElement}
+ */
+const Error = ({
+  visible = true,
+  variant = 'in-page',
+  title,
+  description,
+  testID,
+  ctaText,
+  onCtaPress,
+  secondaryCtaText,
+  onSecondaryCtaPress,
+  ...nativeProps
+}: ErrorProps): ReactElement => {
+  const [isVisible, setIsVisible] = useState(visible);
+  const [ctaPressed, setCtaPressed] = useState<onCloseCallbackType>(null);
+
+  const onCloseModal = useCallback(() => {
+    if (ctaPressed === 'cta' && onCtaPress) {
+      onCtaPress();
+    }
+    if (ctaPressed === 'secondaryCta' && onSecondaryCtaPress) {
+      onSecondaryCtaPress();
+    }
+    setCtaPressed(null);
+  }, [ctaPressed, onCtaPress, onSecondaryCtaPress]);
+
+  useEffect(() => {
+    setIsVisible(visible);
+  }, [visible]);
+
+  // These useEffect lines prevents race condition error when callback contains navigation logic
+  useEffect(() => {
+    if (ctaPressed) {
+      setIsVisible(false);
+    }
+  }, [ctaPressed]);
+
+  useEffect(() => {
+    if (!isVisible) {
+      onCloseModal();
+    }
+  }, [isVisible, onCloseModal]);
+
+  if (variant === 'full-screen') {
+    return (
+      <StyledErrorModal
+        visible={isVisible}
+        onRequestClose={() => setIsVisible(false)}
+        onDismiss={() => setIsVisible(false)}
+        animationType="slide"
+      >
+        <ErrorPage
+          variant={variant}
+          title={title}
+          description={description}
+          testID={testID}
+          ctaText={ctaText}
+          onCtaPress={
+            onCtaPress &&
+            (() => {
+              setCtaPressed('cta');
+            })
+          }
+          secondaryCtaText={secondaryCtaText}
+          onSecondaryCtaPress={
+            onSecondaryCtaPress &&
+            (() => {
+              setCtaPressed('secondaryCta');
+            })
+          }
+          {...nativeProps}
+        />
+      </StyledErrorModal>
+    );
+  }
+
+  return (
+    <ErrorPage
+      variant={variant}
+      title={title}
+      description={description}
+      testID={testID}
+      ctaText={ctaText}
+      onCtaPress={onCtaPress}
+      secondaryCtaText={secondaryCtaText}
+      onSecondaryCtaPress={onSecondaryCtaPress}
+      {...nativeProps}
+    />
+  );
+};
+
+export default Error;

package/src/components/Tabs/ScrollableTabs.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import { TouchableWithoutFeedback, FlatList, Animated } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme } from '@emotion/react';
@@ -19,11 +19,6 @@ import Icon from '../Icon';
 import Typography from '../Typography';
 import type { ItemType, TabsProps, TabType } from '.';
 import TabWithBadge from './TabWithBadge';
-import { noop } from '../../utils/functions';
-
-export type ScrollableTabsHandles = {
-  selectTabKey: (tabKey: string) => void;
-};
 
 const getTabItem = ({
   item,
@@ -60,215 +55,179 @@ const getTabItem = ({
   return item({ color });
 };
 
-export interface ScrollableTabsProps extends TabsProps {
-  ref?: React.Ref<ScrollableTabsHandles>;
-}
-
-const ScrollableTab = forwardRef<ScrollableTabsHandles, ScrollableTabsProps>(
-  (
-    {
-      onTabPress = noop,
-      selectedTabKey,
-      tabs,
-      containerStyle,
-      barStyle,
-      lazy = false,
-      lazyPreloadDistance = 1,
-      swipeEnabled = true,
-      testID: componentTestID,
-    },
-    ref?
-  ) => {
-    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 tabsAnims = useAnimatedValueArray(
-      tabs.map((_, i) => (i === selectedTabIndex ? 1 : 0))
-    );
-
-    React.useImperativeHandle(
-      ref,
-      () => ({
-        selectTabKey: (tabKey: string) => {
-          const index = tabs.findIndex((item) => item.key === tabKey);
-          if (index !== -1) {
-            flatListRef.current?.scrollToIndex({
-              index,
-              viewPosition: 0.5,
-            });
-            pagerViewRef.current?.setPage(index);
-            if (onTabPress) {
-              onTabPress(tabKey);
-            }
-          }
-        },
-        getFlatListRef: () => {
-          return flatListRef.current;
-        },
-        getPagerViewRef: () => {
-          return pagerViewRef.current;
-        },
-      }),
-
-      [pagerViewRef, flatListRef, tabs]
-    );
-
-    React.useEffect(() => {
-      let timeoutHandle: number | null = null;
-      if (selectedTabIndex !== -1) {
-        flatListRef.current?.scrollToIndex({
-          index: selectedTabIndex,
-          viewPosition: 0.5,
-        });
-        // 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
-        timeoutHandle = setTimeout(() => {
-          // use no animation to prevent unexpected behavior if users select tab too quickly
-          pagerViewRef.current?.setPageWithoutAnimation(selectedTabIndex);
-        }, 200);
+const ScrollableTab = ({
+  onTabPress,
+  selectedTabKey,
+  tabs,
+  containerStyle,
+  barStyle,
+  lazy = false,
+  lazyPreloadDistance = 1,
+  swipeEnabled = true,
+  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 tabsAnims = useAnimatedValueArray(
+    tabs.map((_, i) => (i === selectedTabIndex ? 1 : 0))
+  );
+
+  React.useEffect(() => {
+    let timeoutHandle: number | null = null;
+    if (selectedTabIndex !== -1) {
+      flatListRef.current?.scrollToIndex({
+        index: selectedTabIndex,
+        viewPosition: 0.5,
+      });
+      // 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
+      timeoutHandle = setTimeout(() => {
+        // use no animation to prevent unexpected behavior if users select tab too quickly
+        pagerViewRef.current?.setPageWithoutAnimation(selectedTabIndex);
+      }, 200);
+    }
+
+    const animation = Animated.parallel([
+      ...tabs.map((_, i) =>
+        Animated.timing(tabsAnims[i], {
+          toValue: i === selectedTabIndex ? 1 : 0,
+          duration: 150,
+          useNativeDriver: true,
+        })
+      ),
+    ]);
+    animation.start();
+
+    return () => {
+      animation.stop();
+      if (timeoutHandle) {
+        clearTimeout(timeoutHandle);
       }
-
-      const animation = Animated.parallel([
-        ...tabs.map((_, i) =>
-          Animated.timing(tabsAnims[i], {
-            toValue: i === selectedTabIndex ? 1 : 0,
-            duration: 150,
-            useNativeDriver: true,
-          })
-        ),
-      ]);
-      animation.start();
-
-      return () => {
-        animation.stop();
-        if (timeoutHandle) {
-          clearTimeout(timeoutHandle);
-        }
-      };
-    }, [selectedTabIndex, selectedTabKey, pagerViewRef]);
-
-    return (
-      <TabContainer style={containerStyle} testID={componentTestID}>
-        <HeaderTabWrapper themeInsets={insets} style={barStyle}>
-          <FlatList<TabType>
-            testID={componentTestID ? `${componentTestID}-tab-bar` : undefined}
-            ref={flatListRef}
-            horizontal
-            data={tabs}
-            keyExtractor={(tab) => String(tab.key)}
-            showsHorizontalScrollIndicator={false}
-            onScrollToIndexFailed={({ index }) => {
-              setTimeout(
-                () =>
-                  flatListRef.current?.scrollToIndex({
-                    index,
-                    viewPosition: 0.5,
-                  }),
-                100
-              );
-            }}
-            contentContainerStyle={{
-              paddingHorizontal:
-                theme.__hd__.tabs.space.flatListHorizontalPadding,
-            }}
-            renderItem={({ item: tab, index }) => {
-              const {
-                key,
-                testID,
-                activeItem,
-                inactiveItem: originalInactiveItem,
-                badge,
-              } = tab;
-              const active = selectedTabKey === key;
-              const activeAnimated = tabsAnims[index];
-              const outlineScale = active
-                ? activeAnimated.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [0.5, 1],
-                  })
-                : 0;
-
-              const inactiveItem = originalInactiveItem ?? activeItem;
-              const tabItem = getTabItem({
-                item: active ? activeItem : inactiveItem,
-                color: active
-                  ? theme.__hd__.tabs.colors.active
-                  : theme.__hd__.tabs.colors.inactive,
-                active,
-              });
-
-              return (
-                <TouchableWithoutFeedback
-                  key={key}
-                  onPress={() => {
-                    onTabPress(key);
-                  }}
-                  testID={testID}
-                >
-                  <HeaderTabItem isFirstItem={index === 0}>
-                    <HeaderTabItemOutlineWrapper>
-                      <HeaderTabItemOutline
-                        themeActive={active}
-                        style={{
-                          flex: 1,
-                          transform: [
-                            {
-                              scaleX: outlineScale,
-                            },
-                          ],
-                        }}
-                      />
-                    </HeaderTabItemOutlineWrapper>
-                    <HeaderTabItemWrapper>
-                      <TabWithBadge config={badge} tabItem={tabItem} />
-                    </HeaderTabItemWrapper>
-                  </HeaderTabItem>
-                </TouchableWithoutFeedback>
-              );
-            }}
-          />
-        </HeaderTabWrapper>
-        <ContentWrapper
-          initialPage={selectedTabIndex}
-          ref={pagerViewRef}
-          onPageSelected={(e) => {
-            const index = e.nativeEvent.position;
-            const selectedItem = tabs[index];
-            if (selectedItem && selectedItem.key !== selectedTabKey) {
-              onTabPress(selectedItem.key);
-            }
+    };
+  }, [selectedTabIndex, pagerViewRef]);
+
+  return (
+    <TabContainer style={containerStyle} testID={componentTestID}>
+      <HeaderTabWrapper themeInsets={insets} style={barStyle}>
+        <FlatList<TabType>
+          testID={componentTestID ? `${componentTestID}-tab-bar` : undefined}
+          ref={flatListRef}
+          horizontal
+          data={tabs}
+          keyExtractor={(tab) => String(tab.key)}
+          showsHorizontalScrollIndicator={false}
+          onScrollToIndexFailed={({ index }) => {
+            setTimeout(
+              () =>
+                flatListRef.current?.scrollToIndex({
+                  index,
+                  viewPosition: 0.5,
+                }),
+              100
+            );
+          }}
+          contentContainerStyle={{
+            paddingHorizontal:
+              theme.__hd__.tabs.space.flatListHorizontalPadding,
           }}
-          scrollEnabled={swipeEnabled}
-        >
-          {tabs.map((tab, index) => {
-            const { key, component, testID } = tab;
+          renderItem={({ item: tab, index }) => {
+            const {
+              key,
+              testID,
+              activeItem,
+              inactiveItem: originalInactiveItem,
+              badge,
+            } = tab;
             const active = selectedTabKey === key;
-            const isLazyScreen =
-              lazy && Math.abs(selectedTabIndex - index) > lazyPreloadDistance;
+            const activeAnimated = tabsAnims[index];
+            const outlineScale = active
+              ? activeAnimated.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [0.5, 1],
+                })
+              : 0;
+
+            const inactiveItem = originalInactiveItem ?? activeItem;
+            const tabItem = getTabItem({
+              item: active ? activeItem : inactiveItem,
+              color: active
+                ? theme.__hd__.tabs.colors.active
+                : theme.__hd__.tabs.colors.inactive,
+              active,
+            });
 
             return (
-              <TabScreen
+              <TouchableWithoutFeedback
                 key={key}
-                testID={testID ? `tab-screen-${testID}` : undefined}
-                pointerEvents={active ? 'auto' : 'none'}
-                accessibilityElementsHidden={!active}
-                importantForAccessibility={
-                  active ? 'auto' : 'no-hide-descendants'
-                }
-                collapsable={false}
+                onPress={() => {
+                  onTabPress(key);
+                }}
+                testID={testID}
               >
-                {isLazyScreen ? null : component}
-              </TabScreen>
+                <HeaderTabItem isFirstItem={index === 0}>
+                  <HeaderTabItemOutlineWrapper>
+                    <HeaderTabItemOutline
+                      themeActive={active}
+                      style={{
+                        flex: 1,
+                        transform: [
+                          {
+                            scaleX: outlineScale,
+                          },
+                        ],
+                      }}
+                    />
+                  </HeaderTabItemOutlineWrapper>
+                  <HeaderTabItemWrapper>
+                    <TabWithBadge config={badge} tabItem={tabItem} />
+                  </HeaderTabItemWrapper>
+                </HeaderTabItem>
+              </TouchableWithoutFeedback>
             );
-          })}
-        </ContentWrapper>
-      </TabContainer>
-    );
-  }
-);
+          }}
+        />
+      </HeaderTabWrapper>
+      <ContentWrapper
+        initialPage={selectedTabIndex}
+        ref={pagerViewRef}
+        onPageSelected={(e) => {
+          const index = e.nativeEvent.position;
+          const selectedItem = tabs[index];
+          if (selectedItem) {
+            onTabPress(selectedItem.key);
+          }
+        }}
+        scrollEnabled={swipeEnabled}
+      >
+        {tabs.map((tab, index) => {
+          const { key, component, testID } = tab;
+          const active = selectedTabKey === key;
+          const isLazyScreen =
+            lazy && Math.abs(selectedTabIndex - index) > lazyPreloadDistance;
+
+          return (
+            <TabScreen
+              key={key}
+              testID={testID ? `tab-screen-${testID}` : undefined}
+              pointerEvents={active ? 'auto' : 'none'}
+              accessibilityElementsHidden={!active}
+              importantForAccessibility={
+                active ? 'auto' : 'no-hide-descendants'
+              }
+              collapsable={false}
+            >
+              {isLazyScreen ? null : component}
+            </TabScreen>
+          );
+        })}
+      </ContentWrapper>
+    </TabContainer>
+  );
+};
 
 export default ScrollableTab;