chore: updated types to allow presets to extend animated tab bar props (

#59)
gorhom · Jul 15, 2020 · dfdbfae · dfdbfae
1 parent c9025cd
commit dfdbfae
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 28 deletions.
diff --git a/src/AnimatedTabBar.tsx b/src/AnimatedTabBar.tsx
@@ -6,11 +6,7 @@ import { useStableCallback } from './utilities';
 import Presets, { PresetEnum } from './presets';
 import { TabsConfig, AnimatedTabBarViewProps } from './types';
 
-interface AnimatedTabBarProps<T extends PresetEnum>
-  extends Omit<
-    AnimatedTabBarViewProps<T>,
-    'index' | 'onIndexChange' | 'tabs' | 'onLongPress' | 'animatedOnChange'
-  > {
+type AnimatedTabBarProps<T extends PresetEnum> = {
   /**
    * Tabs configurations.
    */
@@ -25,7 +21,10 @@ interface AnimatedTabBarProps<T extends PresetEnum>
   onTabPress?: any;
   onTabLongPress?: any;
   safeAreaInsets?: Insets;
-}
+} & Omit<
+  AnimatedTabBarViewProps<T>,
+  'index' | 'tabs' | 'onIndexChange' | 'onLongPress' | 'animatedOnChange'
+>;
 
 interface Route {
   name: string;
@@ -125,12 +124,14 @@ export function AnimatedTabBar<T extends PresetEnum>(
   );
 
   const routesWithTabConfig = useMemo(() => {
-    return routes.map(route => ({
-      title: getRouteTitle(route),
-      key: route.key,
-      ...getRouteTabConfigs(route),
-    }));
-  }, [routes, getRouteTitle, getRouteTabConfigs]);
+    return routes.reduce((result: { [key: string]: {} }, route) => {
+      result[route.key] = {
+        title: getRouteTitle(route),
+        ...getRouteTabConfigs(route),
+      };
+      return result;
+    }, {});
+  }, [routes, getRouteTitle, getRouteTabConfigs]) as any;
   //#endregion
 
   //#region callbacks

diff --git a/src/index.ts b/src/index.ts
@@ -1,6 +1,7 @@
 export { AnimatedTabBar as default } from './AnimatedTabBar';
 export { AnimatedTabBarView } from './AnimatedTabBarView';
 import {
+  BubbleConfig,
   BubbleTabConfig,
   BubbleTabIconProps,
   BubbleTabBarItem,
@@ -19,6 +20,7 @@ export type TabsConfigsType = TabsConfig<BubbleTabConfig>;
  * exports presets for customisations
  */
 export {
+  BubbleConfig,
   BubbleTabConfig,
   BubbleTabIconProps,
   BubbleTabBarItem,
@@ -27,6 +29,7 @@ export {
 };
 
 export {
+  FlashyConfig,
   FlashyTabConfig,
   FlashyTabIconProps,
   FlashyTabBarItem,

diff --git a/src/presets.ts b/src/presets.ts
@@ -1,13 +1,15 @@
-import BubbleTabBar, { BubbleTabConfig } from './presets/bubble';
-import FlashyTabBar, { FlashyTabConfig } from './presets/flashy';
+import BubbleTabBar, { BubbleConfig, BubbleTabConfig } from './presets/bubble';
+import FlashyTabBar, { FlashyConfig, FlashyTabConfig } from './presets/flashy';
 
 const Presets = {
   bubble: {
     component: BubbleTabBar,
+    $c: (undefined as any) as BubbleConfig,
     $t: (undefined as any) as BubbleTabConfig,
   },
   flashy: {
     component: FlashyTabBar,
+    $c: (undefined as any) as FlashyConfig,
     $t: (undefined as any) as FlashyTabConfig,
   },
 };

diff --git a/src/presets/bubble/BubbleTabBar.tsx b/src/presets/bubble/BubbleTabBar.tsx
@@ -16,7 +16,7 @@ import {
 import { withTransition } from '../../withTransition';
 import { noop } from '../../utilities';
 import { TabBarViewProps } from '../../types';
-import { BubbleTabConfig } from './types';
+import { BubbleConfig, BubbleTabConfig } from './types';
 import { styles } from './styles';
 
 const BubbleTabBarComponent = ({
@@ -32,7 +32,7 @@ const BubbleTabBarComponent = ({
   style: containerStyleOverride,
   animatedOnChange,
   onLongPress = noop,
-}: TabBarViewProps<BubbleTabConfig>) => {
+}: TabBarViewProps<BubbleConfig, BubbleTabConfig>) => {
   //#region variables
   const animatedFocusValues = useMemo(
     () =>

diff --git a/src/presets/bubble/index.ts b/src/presets/bubble/index.ts
@@ -1,3 +1,3 @@
 export { default } from './BubbleTabBar';
 export { default as BubbleTabBarItem, BubbleTabBarItemProps } from './item';
-export { BubbleTabConfig, BubbleTabIconProps } from './types';
+export { BubbleConfig, BubbleTabConfig, BubbleTabIconProps } from './types';
diff --git a/src/presets/bubble/types.ts b/src/presets/bubble/types.ts
@@ -1,6 +1,8 @@
 import { TextStyle } from 'react-native';
 import Animated from 'react-native-reanimated';
 
+export interface BubbleConfig {}
+
 export interface BubbleTabConfig {
   /**
    * Tab bar item label style.

diff --git a/src/presets/flashy/FlashyTabBar.tsx b/src/presets/flashy/FlashyTabBar.tsx
@@ -16,7 +16,7 @@ import {
 import { withTransition } from '../../withTransition';
 import { noop } from '../../utilities';
 import { TabBarViewProps } from '../../types';
-import { FlashyTabConfig } from './types';
+import { FlashyConfig, FlashyTabConfig } from './types';
 import { styles } from './styles';
 
 const FlashyTabBarComponent = ({
@@ -32,7 +32,7 @@ const FlashyTabBarComponent = ({
   style: containerStyleOverride,
   onLongPress = noop,
   animatedOnChange,
-}: TabBarViewProps<FlashyTabConfig>) => {
+}: TabBarViewProps<FlashyConfig, FlashyTabConfig>) => {
   //#region variables
   const animatedFocusValues = useMemo(
     () =>

diff --git a/src/presets/flashy/index.ts b/src/presets/flashy/index.ts
@@ -1,3 +1,3 @@
 export { default } from './FlashyTabBar';
 export { default as FlashyTabBarItem, FlashyTabBarItemProps } from './item';
-export { FlashyTabConfig, FlashyTabIconProps } from './types';
+export { FlashyConfig, FlashyTabConfig, FlashyTabIconProps } from './types';
diff --git a/src/presets/flashy/types.ts b/src/presets/flashy/types.ts
@@ -1,6 +1,8 @@
 import { TextStyle } from 'react-native';
 import Animated from 'react-native-reanimated';
 
+export interface FlashyConfig {}
+
 export interface FlashyTabConfig {
   /**
    * Tab bar item label style.

diff --git a/src/types.ts b/src/types.ts
@@ -58,7 +58,7 @@ export interface TabInfo {
   key: string;
 }
 
-export interface TabBarViewProps<T> extends TabBarConfigurableProps {
+export type TabBarViewProps<C, T> = {
   /**
    * Selected animated index.
    */
@@ -75,7 +75,8 @@ export interface TabBarViewProps<T> extends TabBarConfigurableProps {
    * Root container style.
    */
   style?: StyleProp<ViewStyle>;
-}
+} & TabBarConfigurableProps &
+  C;
 
 export interface TabBarItemProps
   extends Required<
@@ -95,11 +96,7 @@ export interface TabBarItemProps
   label: string;
 }
 
-export interface AnimatedTabBarViewProps<T extends PresetEnum>
-  extends Omit<
-    TabBarViewProps<{}>,
-    'selectedIndex' | 'tabs' | 'animatedOnChange'
-  > {
+export type AnimatedTabBarViewProps<T extends PresetEnum> = {
   /**
    * Initial index.
    */
@@ -115,8 +112,44 @@ export interface AnimatedTabBarViewProps<T extends PresetEnum>
    */
   preset?: T;
 
+  /**
+   * Root container style.
+   */
+  style?: StyleProp<ViewStyle>;
+
   /**
    * Callback when animated index changes.
    */
   onIndexChange: (index: number) => void;
-}
+} & TabBarConfigurableProps &
+  ExtractPresetConfig<T>;
+
+// export interface AnimatedTabBarViewProps<T extends PresetEnum>
+//   extends Omit<
+//     TabBarViewProps<{}, {}>,
+//     'selectedIndex' | 'tabs' | 'animatedOnChange'
+//   > {
+//   /**
+//    * Initial index.
+//    */
+//   index: number;
+
+//   /**
+//    * Tabs configurations.
+//    */
+//   tabs: TabsConfig<typeof Presets[T]['$t'] & Partial<TabInfo>>;
+
+//   /**
+//    * Animation preset.
+//    */
+//   preset?: T;
+
+//   /**
+//    * Callback when animated index changes.
+//    */
+//   onIndexChange: (index: number) => void;
+// }
+
+export type ExtractPresetConfig<T extends PresetEnum> = {
+  [k in keyof typeof Presets[T]['$c']]: typeof Presets[T]['$c'][k];
+};