From e127c84ae9335b5206df4a719e16033b3093dd63 Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Sat, 6 Mar 2021 22:49:42 +0100 Subject: [PATCH] refactor: move `tabBarOptions` to `options` for material top tabs --- packages/bottom-tabs/src/types.tsx | 3 +- packages/material-top-tabs/src/index.tsx | 1 - packages/material-top-tabs/src/types.tsx | 156 +++++++++++------- .../src/views/MaterialTopTabBar.tsx | 67 ++++---- .../src/views/MaterialTopTabView.tsx | 2 - 5 files changed, 131 insertions(+), 98 deletions(-) diff --git a/packages/bottom-tabs/src/types.tsx b/packages/bottom-tabs/src/types.tsx index e91df33d..be7d5cd6 100644 --- a/packages/bottom-tabs/src/types.tsx +++ b/packages/bottom-tabs/src/types.tsx @@ -106,7 +106,8 @@ export type BottomTabNavigationOptions = HeaderOptions & { /** * Title string of a tab displayed in the tab bar * or a function that given { focused: boolean, color: string, position: 'below-icon' | 'beside-icon' } returns a React.Node to display in tab bar. - * When undefined, scene title is used. To hide, see tabBarOptions.showLabel in the previous section. + * + * When undefined, scene title is used. Use `tabBarShowLabel` to hide the label. */ tabBarLabel?: | string diff --git a/packages/material-top-tabs/src/index.tsx b/packages/material-top-tabs/src/index.tsx index 932ffb9d..2bceaa8b 100644 --- a/packages/material-top-tabs/src/index.tsx +++ b/packages/material-top-tabs/src/index.tsx @@ -17,5 +17,4 @@ export type { MaterialTopTabNavigationProp, MaterialTopTabScreenProps, MaterialTopTabBarProps, - MaterialTopTabBarOptions, } from './types'; diff --git a/packages/material-top-tabs/src/types.tsx b/packages/material-top-tabs/src/types.tsx index 33d58720..781a3fb5 100644 --- a/packages/material-top-tabs/src/types.tsx +++ b/packages/material-top-tabs/src/types.tsx @@ -1,9 +1,5 @@ import type { StyleProp, ViewStyle, TextStyle } from 'react-native'; -import type { - TabBar, - SceneRendererProps, - TabView, -} from 'react-native-tab-view'; +import type { SceneRendererProps, TabView } from 'react-native-tab-view'; import type { ParamListBase, Descriptor, @@ -69,7 +65,8 @@ export type MaterialTopTabNavigationOptions = { /** * Title string of a tab displayed in the tab bar * or a function that given { focused: boolean, color: string } returns a React.Node, to display in tab bar. - * When undefined, scene title is used. To hide, see tabBarOptions.showLabel in the previous section. + * + * When undefined, scene title is used. Use `tabBarShowLabel` to hide the label. */ tabBarLabel?: | string @@ -90,6 +87,88 @@ export type MaterialTopTabNavigationOptions = { * ID to locate this tab button in tests. */ tabBarTestID?: string; + + /** + * Color for the icon and label in the active tab. + */ + tabBarActiveTintColor?: string; + + /** + * Color for the icon and label in the inactive tabs. + */ + tabBarInactiveTintColor?: string; + + /** + * Color for material ripple (Android >= 5.0 only). + */ + tabBarPressColor?: string; + + /** + * Opacity for pressed tab (iOS and Android < 5.0 only). + */ + tabBarPressOpacity?: number; + + /** + * Whether the tab label should be visible. Defaults to `true`. + */ + tabBarShowLabel?: boolean; + + /** + * Whether the tab icon should be visible. Defaults to `false`. + */ + tabBarShowIcon?: boolean; + + /** + * Whether label font should scale to respect Text Size accessibility settings. + */ + tabBarAllowFontScaling?: boolean; + + /** + * Boolean indicating whether the tab bar bounces when overscrolling. + */ + tabBarBounces?: boolean; + + /** + * Boolean indicating whether to make the tab bar scrollable. + * + * If you set this to `true`, you should also specify a width in `tabBarItemStyle` to improve the performance of initial render. + */ + tabBarScrollEnabled?: boolean; + + /** + * Style object for the tab icon container. + */ + tabBarIconStyle?: StyleProp; + + /** + * Style object for the tab label. + */ + tabBarLabelStyle?: StyleProp; + + /** + * Style object for the individual tab items. + */ + tabBarItemStyle?: StyleProp; + + /** + * Style object for the tab bar indicator. + */ + tabBarIndicatorStyle?: StyleProp; + + /** + * Style object for the view containing the tab bar indicator. + */ + tabBarIndicatorContainerStyle?: StyleProp; + + /** + * Style object for the view containing the tab items. + */ + tabBarContentContainerStyle?: StyleProp; + + /** + * Style object for the the tab bar. + */ + tabBarStyle?: StyleProp; }; export type MaterialTopTabDescriptor = Descriptor< @@ -135,68 +214,17 @@ export type MaterialTopTabNavigationConfig = Partial< * Function that returns a React element to display as the tab bar. */ tabBar?: (props: MaterialTopTabBarProps) => React.ReactNode; - /** - * Options for the tab bar which will be passed as props to the tab bar component. - */ - tabBarOptions?: MaterialTopTabBarOptions; /** * Position of the tab bar. Defaults to `top`. */ tabBarPosition?: 'top' | 'bottom'; }; -export type MaterialTopTabBarOptions = Partial< - Omit< - React.ComponentProps, - | 'navigationState' - | 'activeColor' - | 'inactiveColor' - | 'renderLabel' - | 'renderIcon' - | 'getLabelText' - | 'getAccessibilityLabel' - | 'getTestID' - | 'onTabPress' - | 'onTabLongPress' - | keyof SceneRendererProps - > -> & { - /** - * Color for the icon and label in the active tab. - */ - activeTintColor?: string; - /** - * Color for the icon and label in the inactive tabs. - */ - inactiveTintColor?: string; - /** - * Style object for the tab icon container. - */ - iconStyle?: StyleProp; - /** - * Style object for the tab label. - */ - labelStyle?: StyleProp; - /** - * Whether the tab label should be visible. Defaults to `true`. - */ - showLabel?: boolean; - /** - * Whether the tab icon should be visible. Defaults to `false`. - */ - showIcon?: boolean; - /** - * Whether label font should scale to respect Text Size accessibility settings. - */ - allowFontScaling?: boolean; +export type MaterialTopTabBarProps = SceneRendererProps & { + state: TabNavigationState; + navigation: NavigationHelpers< + ParamListBase, + MaterialTopTabNavigationEventMap + >; + descriptors: MaterialTopTabDescriptorMap; }; - -export type MaterialTopTabBarProps = MaterialTopTabBarOptions & - SceneRendererProps & { - state: TabNavigationState; - navigation: NavigationHelpers< - ParamListBase, - MaterialTopTabNavigationEventMap - >; - descriptors: MaterialTopTabDescriptorMap; - }; diff --git a/packages/material-top-tabs/src/views/MaterialTopTabBar.tsx b/packages/material-top-tabs/src/views/MaterialTopTabBar.tsx index 464f5404..99365ca2 100644 --- a/packages/material-top-tabs/src/views/MaterialTopTabBar.tsx +++ b/packages/material-top-tabs/src/views/MaterialTopTabBar.tsx @@ -6,35 +6,39 @@ import Color from 'color'; import type { MaterialTopTabBarProps } from '../types'; -export default function TabBarTop(props: MaterialTopTabBarProps) { +export default function TabBarTop({ + state, + navigation, + descriptors, + ...rest +}: MaterialTopTabBarProps) { const { colors } = useTheme(); - const { - state, - navigation, - descriptors, - activeTintColor = colors.text, - inactiveTintColor = Color(activeTintColor).alpha(0.5).rgb().string(), - allowFontScaling = true, - showIcon = false, - showLabel = true, - pressColor = Color(activeTintColor).alpha(0.08).rgb().string(), - iconStyle, - labelStyle, - indicatorStyle, - style, - ...rest - } = props; + const focusedOptions = descriptors[state.routes[state.index].key].options; + + const activeColor = focusedOptions.tabBarActiveTintColor ?? colors.text; + const inactiveColor = + focusedOptions.tabBarInactiveTintColor ?? + Color(activeColor).alpha(0.5).rgb().string(); return ( descriptors[route.key].options.tabBarAccessibilityLabel } @@ -57,26 +61,29 @@ export default function TabBarTop(props: MaterialTopTabBarProps) { }) } renderIcon={({ route, focused, color }) => { - if (showIcon === false) { + const { options } = descriptors[route.key]; + + if (options.tabBarShowIcon === false) { return null; } - const { options } = descriptors[route.key]; - if (options.tabBarIcon !== undefined) { const icon = options.tabBarIcon({ focused, color }); - return {icon}; + return ( + {icon} + ); } return null; }} renderLabel={({ route, focused, color }) => { - if (showLabel === false) { + const { options } = descriptors[route.key]; + + if (options.tabBarShowLabel === false) { return null; } - const { options } = descriptors[route.key]; const label = options.tabBarLabel !== undefined ? options.tabBarLabel @@ -87,8 +94,8 @@ export default function TabBarTop(props: MaterialTopTabBarProps) { if (typeof label === 'string') { return ( {label} diff --git a/packages/material-top-tabs/src/views/MaterialTopTabView.tsx b/packages/material-top-tabs/src/views/MaterialTopTabView.tsx index ef05ce64..7cf2ad76 100644 --- a/packages/material-top-tabs/src/views/MaterialTopTabView.tsx +++ b/packages/material-top-tabs/src/views/MaterialTopTabView.tsx @@ -27,7 +27,6 @@ export default function MaterialTopTabView({ pager, lazyPlaceholder, tabBar = (props: MaterialTopTabBarProps) => , - tabBarOptions, state, navigation, descriptors, @@ -38,7 +37,6 @@ export default function MaterialTopTabView({ const renderTabBar = (props: SceneRendererProps) => { return tabBar({ - ...tabBarOptions, ...props, state: state, navigation: navigation,