feat(tabs): simplify tabs

Author: minheq

src/components/Tabs/Tab.styles.ts

@@ -3,25 +3,31 @@ import { TextStyle, ViewStyle } from 'react-native';
 import { Theme } from '../../theme/ThemeInterface';
 
 export interface TabStyles {
-  containerStyle: ViewStyle;
   buttonStyle: ViewStyle;
   textStyle: TextStyle;
-  dividerStyle: ViewStyle;
+  focusColor: string;
 }
 
-export type GetTabStyles = (props: {}, theme: Theme) => TabStyles;
+export interface GetTabStyleProps {
+  shouldFit: boolean;
+  isActive: boolean;
+}
+
+export type GetTabStyles = (props: GetTabStyleProps, theme: Theme) => TabStyles;
 
-export const getTabStyles: GetTabStyles = (props, theme) => {
+export const getTabStyles: GetTabStyles = ({ shouldFit, isActive }, theme) => {
   return {
     buttonStyle: {
-      borderRadius: 0,
+      backgroundColor: isActive ? 'white' : 'transparent',
+      ...(shouldFit
+        ? {
+            flex: 1,
+          }
+        : {}),
     },
-    containerStyle: {},
-    dividerStyle: {
-      borderRadius: 0,
-      bottom: 0,
-      position: 'absolute',
+    focusColor: theme.colors.background.greyLight,
+    textStyle: {
+      color: isActive ? theme.colors.text.primary : theme.colors.text.muted,
     },
-    textStyle: {},
   };
 };

src/components/Tabs/Tab.tsx

@@ -1,17 +1,17 @@
 import * as React from 'react';
 import { DeepPartial, Omit } from 'ts-essentials';
 
-import { initialMeasurements, Measurements } from '../../hooks';
+import { Measurements } from '../../hooks';
 import { useTheme } from '../../theme';
 import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
 import { Button, ButtonProps } from '../Button';
-import { ViewMeasure } from '../Helpers';
 import { GetTabStyles, getTabStyles, TabStyles } from './Tab.styles';
 
 export interface TabProps
   extends Omit<Omit<ButtonProps, 'onPress'>, 'getStyles'> {
   index: number;
   isActive?: boolean;
+  shouldFit?: boolean;
   getStyles?: ReplaceReturnType<GetTabStyles, DeepPartial<TabStyles>>;
   onPress: (index: number) => void;
   onActive?: (index: number, measurements: Measurements) => void;
@@ -26,28 +26,21 @@ export const Tab = (props: TabProps) => {
     onActive = () => {
       return;
     },
+    shouldFit = true,
     ...buttonProps
   } = props;
-  const [measurements, setMeasurements] = React.useState(initialMeasurements);
   const theme = useTheme();
-  const { containerStyle, buttonStyle, textStyle } = mergeStyles(
+  const { buttonStyle, textStyle, focusColor } = mergeStyles(
     getTabStyles,
     getStyles,
-  )({}, theme);
-
-  React.useEffect(() => {
-    if (isActive) onActive(index, measurements);
-  }, [isActive, measurements]);
+  )({ isActive, shouldFit }, theme);
 
   return (
-    <ViewMeasure onMeasure={setMeasurements} style={containerStyle}>
-      <Button
-        color={isActive ? 'primary' : 'default'}
-        appearance="minimal"
-        getStyles={() => ({ buttonStyle, textStyle })}
-        onPress={() => onPress(index)}
-        {...buttonProps}
-      />
-    </ViewMeasure>
+    <Button
+      color={isActive ? 'primary' : 'default'}
+      getStyles={() => ({ buttonStyle, focusColor, textStyle })}
+      onPress={() => onPress(index)}
+      {...buttonProps}
+    />
   );
 };

src/components/Tabs/Tabs.mdx

@@ -20,17 +20,12 @@ You can use a custom `Tab` component as long as it accepts `isActive`, `onPress`
 
 <Playground>
   <Tabs
-    ActiveBar={undefined} // The indicator of active tab. Currently works only when distribution="fit"
     defaultActiveTabIndex={1}
     activeTabIndex={undefined}
     onPress={undefined}
-    distribution="fit" // or 'scrollable'
+    shouldFit
     getStyles={(props, theme) => ({
-      containerStyle: {}, // Only applied when distribution="fit"
-      tabContainerStyle: {},
-      buttonStyle: {},
-      textStyle: {},
-      dividerStyle: {},
+      containerStyle: {},
     })}
   >
     {new Array(4).fill(0).map((v, i) => (
@@ -39,18 +34,6 @@ You can use a custom `Tab` component as long as it accepts `isActive`, `onPress`
   </Tabs>
 </Playground>
 
-### Scrollable
-
-Scrollable Tabs will also inline `Tab`
-
-<Playground>
-  <Tabs distribution="scrollable">
-    {new Array(20).fill(0).map((v, i) => (
-      <Tab key={i} title={`Tab ${i + 1}`} />
-    ))}
-  </Tabs>
-</Playground>
-
 ### Props
 
 <Props of={Tabs} />

src/components/Tabs/Tabs.styles.ts

@@ -1,40 +1,21 @@
-import { TextStyle, ViewStyle } from 'react-native';
+import { ViewStyle } from 'react-native';
 
 import { Theme } from '../../theme/ThemeInterface';
-import { TabsDistribution } from './Tabs';
 
 export interface TabsStyles {
   containerStyle: ViewStyle;
-  tabContainerStyle: ViewStyle;
-  buttonStyle: ViewStyle;
-  textStyle: TextStyle;
-  dividerStyle: ViewStyle;
 }
+export type GetTabsStyles = (props: {}, theme: Theme) => TabsStyles;
 
-export interface GetTabsStylesProps {
-  distribution: TabsDistribution;
-}
-
-export type GetTabsStyles = (
-  props: GetTabsStylesProps,
-  theme: Theme,
-) => TabsStyles;
-
-export const getTabsStyles: GetTabsStyles = ({ distribution }, theme) => {
+export const getTabsStyles: GetTabsStyles = (props, theme) => {
   return {
-    buttonStyle: {},
     containerStyle: {
+      backgroundColor: theme.colors.background.greyDefault,
+      borderRadius: theme.controlBorderRadius.medium,
       flex: 1,
       flexDirection: 'row',
       justifyContent: 'flex-start',
+      padding: 2,
     },
-    dividerStyle: {},
-    tabContainerStyle:
-      distribution === 'fit'
-        ? {
-            flex: 1,
-          }
-        : {},
-    textStyle: {},
   };
 };

src/components/Tabs/Tabs.tsx

@@ -1,28 +1,21 @@
 import * as React from 'react';
-import { FlatList, View } from 'react-native';
-import { animated, useSpring } from 'react-spring/native.cjs';
+import { View } from 'react-native';
 import { DeepPartial } from 'ts-essentials';
 
-import { springDefaultConfig } from '../../constants/Animation';
-import { initialMeasurements, Measurements } from '../../hooks';
+import { Measurements } from '../../hooks';
 import { useTheme } from '../../theme';
 import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
-import { Box } from '../Box';
 import { TabProps } from './Tab';
 import { GetTabsStyles, getTabsStyles, TabsStyles } from './Tabs.styles';
 
 export type TabsDistribution = 'scrollable' | 'fit';
 
-const AnimatedView = animated(View);
-
 export interface TabsProps {
-  /** The indicator of active tab. Currently works only when distribution="fit" */
-  ActiveBar?: React.ComponentType<ActiveBarProps>;
   activeTabIndex?: number;
   children: Array<React.ReactElement<TabProps>>;
   defaultActiveTabIndex?: number;
   getStyles?: ReplaceReturnType<GetTabsStyles, DeepPartial<TabsStyles>>;
-  distribution?: TabsDistribution;
+  shouldFit?: boolean;
 
   onPress: (index: number) => void;
 }
@@ -36,130 +29,46 @@ export interface ActiveBarProps {
   measurements: Measurements;
 }
 
-const DefaultActiveBar = (props: ActiveBarProps) => {
-  const { index, measurements } = props;
-  const theme = useTheme();
-
-  const { x, width } = useSpring({
-    config: springDefaultConfig,
-
-    width: measurements.width,
-    x: index * measurements.width,
-  });
-
-  return (
-    <AnimatedView
-      // @ts-ignore
-      style={{
-        backgroundColor: theme.colors.background.primaryDefault,
-        height: 3,
-        left: x,
-        position: 'absolute',
-        top: measurements.height,
-        width,
-      }}
-    />
-  );
-};
-
 export const Tabs = (props: TabsProps) => {
   const {
-    ActiveBar = DefaultActiveBar,
     children,
     activeTabIndex,
     defaultActiveTabIndex = 0,
     onPress,
     getStyles,
-    distribution = 'fit',
+    shouldFit = false,
   } = props;
   const [localActiveTabIndex, setLocalActiveTabIndex] = React.useState(
     defaultActiveTabIndex,
   );
   const theme = useTheme();
   const isControlled = !!(activeTabIndex || onPress);
-  const listRef = React.useRef<FlatList<TabProps>>(null);
-  const [activeBarProps, setActiveBarProps] = React.useState({
-    index: (isControlled ? activeTabIndex : localActiveTabIndex) || -1,
-    measurements: initialMeasurements,
-  });
-
-  React.useEffect(() => {
-    if (listRef.current && distribution === 'scrollable') {
-      if (isControlled && activeTabIndex) {
-        listRef.current.scrollToIndex({
-          animated: true,
-          index: Math.max(activeTabIndex - 2, 0),
-        });
-      } else if (localActiveTabIndex) {
-        listRef.current.scrollToIndex({
-          animated: true,
-          index: Math.max(localActiveTabIndex - 2, 0),
-        });
-      }
-    }
-  });
 
-  const {
-    containerStyle,
-    tabContainerStyle,
-    textStyle,
-    buttonStyle,
-    dividerStyle,
-  } = mergeStyles(getTabsStyles, getStyles)({ distribution }, theme);
+  const { containerStyle } = mergeStyles(getTabsStyles, getStyles)({}, theme);
 
   const data = React.Children.map(children, (child, index) => {
     if (!child) return null;
 
-    const tabCommonProps: Partial<TabProps> = {
-      getStyles: () => ({
-        buttonStyle,
-        containerStyle: tabContainerStyle,
-        dividerStyle,
-        textStyle,
-      }),
-      index,
-      onActive: (i, measurements) => {
-        setActiveBarProps({ index, measurements });
-      },
-    };
-
     return isControlled
       ? {
-          ...tabCommonProps,
+          index,
           isActive: index === activeTabIndex,
           onPress: i => onPress(i),
+          shouldFit,
         }
       : {
-          ...tabCommonProps,
+          index,
           isActive: index === localActiveTabIndex,
           onPress: i => setLocalActiveTabIndex(i),
+          shouldFit,
         };
   }) as TabProps[];
 
   const tabs = React.Children.toArray(children);
 
-  if (distribution === 'fit') {
-    return (
-      <View style={containerStyle}>
-        {data.map((tabProps, index) =>
-          React.cloneElement(tabs[index], tabProps),
-        )}
-        <ActiveBar {...activeBarProps} />
-      </View>
-    );
-  }
-
   return (
-    <>
-      <FlatList
-        ref={listRef}
-        horizontal
-        keyExtractor={item => `${item.index}`}
-        data={data}
-        renderItem={({ item, index }) => React.cloneElement(tabs[index], item)}
-        showsHorizontalScrollIndicator={false}
-        ListFooterComponent={() => <Box width="100%" testID="zxcv" />}
-      />
-    </>
+    <View style={containerStyle}>
+      {data.map((tabProps, index) => React.cloneElement(tabs[index], tabProps))}
+    </View>
   );
 };