Skip to content

Commit

Permalink
types naming changed
Browse files Browse the repository at this point in the history
  • Loading branch information
@kanzitelli
kanzitelli committed Feb 2, 2023
1 parent a1f2917 commit e77221a
Show file tree
Hide file tree
Showing 2 changed files with 101 additions and 87 deletions.
154 changes: 84 additions & 70 deletions src/navio.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,80 +28,80 @@ import {
} from './types';

export class Navio<
ScreenName extends string,
StackName extends string,
ScreensName extends string,
StacksName extends string,
TabsName extends string,
ModalName extends string,
ModalsName extends string,
DrawersName extends string,
//
ScreenData extends TScreenData,
StackData extends TStackData<ScreenName>,
TabsData extends TTabsData<ScreenName, StackName>,
ModalData extends TModalData<ScreenName, StackName>,
DrawersData extends TDrawersData<ScreenName, StackName>,
ScreensData extends TScreenData,
StacksData extends TStackData<ScreensName>,
TabsData extends TTabsData<ScreensName, StacksName>,
ModalsData extends TModalData<ScreensName, StacksName>,
DrawersData extends TDrawersData<ScreensName, StacksName>,
//
TabsContentName extends ContentKeys<TabsData> = ContentKeys<TabsData>,
DrawersContentName extends ContentKeys<DrawersData> = ContentKeys<DrawersData>,
RootName extends TRootName<StackName, TabsName, DrawersName> = TRootName<
StackName,
RootName extends TRootName<StacksName, TabsName, DrawersName> = TRootName<
StacksName,
TabsName,
DrawersName
>,
> extends NavioNavigation<
ScreenName,
StackName,
ScreensName,
StacksName,
TabsName,
ModalName,
ModalsName,
DrawersName,
ScreenData,
StackData,
ScreensData,
StacksData,
TabsData,
ModalData,
ModalsData,
DrawersData,
TabsContentName,
DrawersContentName,
RootName
> {
static build<
ScreenName extends string,
StackName extends string,
ScreensName extends string,
StacksName extends string,
TabsName extends string,
ModalName extends string,
ModalsName extends string,
DrawersName extends string,
//
ScreenData extends TScreenData,
StackData extends TStackData<ScreenName>,
TabsData extends TTabsData<ScreenName, StackName>,
ModalData extends TModalData<ScreenName, StackName>,
DrawersData extends TDrawersData<ScreenName, StackName>,
ScreensData extends TScreenData,
StacksData extends TStackData<ScreensName>,
TabsData extends TTabsData<ScreensName, StacksName>,
ModalsData extends TModalData<ScreensName, StacksName>,
DrawersData extends TDrawersData<ScreensName, StacksName>,
//
TabsContentName extends ContentKeys<TabsData> = ContentKeys<TabsData>,
DrawersContentName extends ContentKeys<DrawersData> = ContentKeys<DrawersData>,
RootName extends TRootName<StackName, TabsName, DrawersName> = TRootName<
StackName,
RootName extends TRootName<StacksName, TabsName, DrawersName> = TRootName<
StacksName,
TabsName,
DrawersName
>,
>(
data: Layout<
Record<ScreenName, ScreenData>,
Record<StackName, StackData>,
Record<ScreensName, ScreensData>,
Record<StacksName, StacksData>,
Record<TabsName, TabsData>,
Record<ModalName, ModalData>,
Record<ModalsName, ModalsData>,
Record<DrawersName, DrawersData>,
RootName
>,
) {
const _navio = new Navio<
ScreenName,
StackName,
ScreensName,
StacksName,
TabsName,
ModalName,
ModalsName,
DrawersName,
ScreenData,
StackData,
ScreensData,
StacksData,
TabsData,
ModalData,
ModalsData,
DrawersData,
TabsContentName,
DrawersContentName,
Expand All @@ -114,10 +114,10 @@ export class Navio<
// | Vars |
// ========
private layout: Layout<
Record<ScreenName, ScreenData>,
Record<StackName, StackData>,
Record<ScreensName, ScreensData>,
Record<StacksName, StacksData>,
Record<TabsName, TabsData>,
Record<ModalName, ModalData>,
Record<ModalsName, ModalsData>,
Record<DrawersName, DrawersData>,
RootName
>;
Expand All @@ -127,10 +127,10 @@ export class Navio<
// ========
constructor(
data: Layout<
Record<ScreenName, ScreenData>,
Record<StackName, StackData>,
Record<ScreensName, ScreensData>,
Record<StacksName, StacksData>,
Record<TabsName, TabsData>,
Record<ModalName, ModalData>,
Record<ModalsName, ModalsData>,
Record<DrawersName, DrawersData>,
RootName
>,
Expand All @@ -140,11 +140,30 @@ export class Navio<
this.layout = data;
}

// ===========
// | Methods |
// ===========
private log(message: string, type: 'log' | 'warn' | 'error' = 'log') {
console[type](`[navio] ${message}`);
}

private __setRoot(routeName: string) {
if (this.layout.stacks && this.layout.stacks[routeName as StacksName]) {
this.stacks.setRoot(routeName as StacksName);
}
if (this.layout.tabs && this.layout.tabs[routeName as TabsName]) {
this.tabs.setRoot(routeName as TabsName);
}
if (this.layout.drawers && this.layout.drawers[routeName as DrawersName]) {
this.drawers.setRoot(routeName as DrawersName);
}
}

// ===========
// | Layouts |
// ===========
private Stack: React.FC<{
stackDef: TStackDefinition<ScreenName, StackName> | undefined;
stackDef: TStackDefinition<ScreensName, StacksName> | undefined;
}> = ({stackDef}) => {
if (!stackDef) return null;
const {screens, stacks, hooks} = this.layout;
Expand All @@ -162,17 +181,17 @@ export class Navio<
const navigatorProps = Array.isArray(stackDef)
? // if stackDef is ScreenName[]
{}
: // if stackDev is TStackDataObj
: // if stackDev is TStacksDataObj
typeof stackDef === 'object'
? (stackDef as TStackDataObj<ScreenName>).navigatorProps ?? {}
: // if stackDev is StackName -> look into stacks[...]
? (stackDef as TStackDataObj<ScreensName>).navigatorProps ?? {}
: // if stackDev is StacksName -> look into stacks[...]
typeof stackDef === 'string'
? // if stacks[name] is ScreenName[]
Array.isArray(stacks[stackDef])
? {}
: // if stacks[name] is TStackDataObj
: // if stacks[name] is TStacksDataObj
typeof stacks[stackDef] === 'object'
? (stacks[stackDef] as TStackDataObj<ScreenName>).navigatorProps ?? {}
? (stacks[stackDef] as TStackDataObj<ScreensName>).navigatorProps ?? {}
: {}
: {};

Expand All @@ -182,26 +201,26 @@ export class Navio<
// -- building navigator
const Stack = createNativeStackNavigator();
const StackScreensMemo = useMemo(() => {
const screensKeys: ScreenName[] = Array.isArray(stackDef)
const screensKeys: ScreensName[] = Array.isArray(stackDef)
? // if stackDef is ScreenName[]
stackDef
: // if stackDev is TStackDataObj
: // if stackDev is TStacksDataObj
typeof stackDef === 'object'
? (stackDef as TStackDataObj<ScreenName>).screens ?? []
: // if stackDev is StackName -> look into stacks[...]
? (stackDef as TStackDataObj<ScreensName>).screens ?? []
: // if stackDev is StacksName -> look into stacks[...]
typeof stackDef === 'string'
? // if stacks[name] is ScreenName[]
Array.isArray(stacks[stackDef])
? (stacks[stackDef] as ScreenName[])
: // if stacks[name] is TStackDataObj
? (stacks[stackDef] as ScreensName[])
: // if stacks[name] is TStacksDataObj
typeof stacks[stackDef] === 'object'
? (stacks[stackDef] as TStackDataObj<ScreenName>).screens ?? []
? (stacks[stackDef] as TStackDataObj<ScreensName>).screens ?? []
: []
: [];

return screensKeys.map(sk => {
const key = String(sk) as string;
const screen = screens[key as ScreenName];
const screen = screens[key as ScreensName];

// component
// -- handling when screen is a component or object{component,options}
Expand Down Expand Up @@ -253,7 +272,7 @@ export class Navio<
return <></>;
}

const currentDrawer: TDrawersData<ScreenName, StackName> | undefined =
const currentDrawer: TDrawersData<ScreensName, StacksName> | undefined =
typeof drawerDef === 'string' ? drawers[drawerDef] : undefined;
if (!currentDrawer) {
this.log('No drawer found');
Expand All @@ -275,8 +294,8 @@ export class Navio<
const dcs = dContent[key] as any; // drawer content stack definition
const stackDef =
typeof dcs === 'object' && dcs['content']
? (dcs as TDrawerContentData<ScreenName, StackName>).stack
: (dcs as TStackDefinition<ScreenName, StackName>);
? (dcs as TDrawerContentData<ScreensName, StacksName>).stack
: (dcs as TStackDefinition<ScreensName, StacksName>);

// component
const C = () => this.Stack({stackDef});
Expand Down Expand Up @@ -310,7 +329,7 @@ export class Navio<
return <></>;
}

const currentTabs: TTabsData<ScreenName, StackName> | undefined =
const currentTabs: TTabsData<ScreensName, StacksName> | undefined =
typeof tabsDef === 'string' ? tabs[tabsDef] : undefined;
if (!currentTabs) {
this.log('No tabs found');
Expand All @@ -330,8 +349,8 @@ export class Navio<
const tcs = tContent[key] as any; // tabs content stack definition
const stackDef =
typeof tcs === 'object' && tcs['content']
? (tcs as TTabContentData<ScreenName, StackName>).stack
: (tcs as TStackDefinition<ScreenName, StackName>);
? (tcs as TTabContentData<ScreensName, StacksName>).stack
: (tcs as TStackDefinition<ScreensName, StacksName>);

// component
const C = () => this.Stack({stackDef});
Expand Down Expand Up @@ -367,7 +386,7 @@ export class Navio<
useEffect(() => {
// if `initialRouteName` is changed, we set new root
if (initialRouteName) {
this.setRoot(initialRouteName);
this.__setRoot(initialRouteName);
}
}, [initialRouteName]);

Expand All @@ -392,7 +411,7 @@ export class Navio<
const stacksKeys = Object.keys(stacks);
return stacksKeys.map(sk => {
const key = String(sk) as string;
const C = () => this.Stack({stackDef: stacks[sk as StackName]});
const C = () => this.Stack({stackDef: stacks[sk as StacksName]});
return <RootStack.Screen key={key} name={key} component={C} />;
});
}, [stacks]);
Expand All @@ -416,7 +435,7 @@ export class Navio<
const modalsKeys = Object.keys(modals);
return modalsKeys.map(mk => {
const key = String(mk) as string;
const C = () => this.Stack({stackDef: modals[mk as ModalName]});
const C = () => this.Stack({stackDef: modals[mk as ModalsName]});
return <RootStack.Screen key={key} name={key} component={C} />;
});
}, [modals]);
Expand All @@ -435,7 +454,7 @@ export class Navio<

// -- generating fake stack (if none [stacks, tabs, drawers] is provided)
const FakeStackMemo = useMemo(() => {
const fakeStackKeys = Object.keys(screens ?? {}) as ScreenName[];
const fakeStackKeys = Object.keys(screens ?? {}) as ScreensName[];
const C = () => {
if (fakeStackKeys.length > 0) {
return this.Stack({stackDef: fakeStackKeys});
Expand Down Expand Up @@ -481,9 +500,4 @@ export class Navio<
</NavigationContainer>
);
};

// System
private log(message: string, type: 'log' | 'warn' | 'error' = 'log') {
console[type](`[navio] ${message}`);
}
}
34 changes: 17 additions & 17 deletions src/types.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@ export type ContentKeys<T extends {content: any}> = Keys<T['content']>;
export type BaseOptions<Return = NativeStackNavigationOptions> =
| Return
| ((props?: {route?: RouteProp<ParamListBase, string>; navigation?: any}) => Return);
export type TStackDefinition<ScreenName, StackName> =
| StackName
| ScreenName[]
| TStackDataObj<ScreenName>;
export type TStackDefinition<ScreensName, StacksName> =
| StacksName
| ScreensName[]
| TStackDataObj<ScreensName>;
export type TDrawerDefinition<DrawerName> = DrawerName; // maybe smth else will be added
export type TTabsDefinition<TabsName> = TabsName; // maybe smth else will be added
export type TScreenData<Props = {}> =
Expand All @@ -23,35 +23,35 @@ export type TScreenData<Props = {}> =
component: NavioScreen<Props>;
options?: BaseOptions<NativeStackNavigationOptions>;
};
export type TStackDataObj<ScreenName> = {
screens: ScreenName[];
export type TStackDataObj<ScreensName> = {
screens: ScreensName[];
navigatorProps?: NativeStackNavigatorProps;
};
export type TStackData<ScreenName> = ScreenName[] | TStackDataObj<ScreenName>;
export type TTabContentData<ScreenName, StackName> = {
stack: TStackDefinition<ScreenName, StackName>;
export type TStackData<ScreensName> = ScreensName[] | TStackDataObj<ScreensName>;
export type TTabContentData<ScreensName, StacksName> = {
stack: TStackDefinition<ScreensName, StacksName>;
options?: BaseOptions<BottomTabNavigationOptions>;
};
export type TTabsData<ScreenName, StackName> = {
export type TTabsData<ScreensName, StacksName> = {
content: Record<
string,
TStackDefinition<ScreenName, StackName> | TTabContentData<ScreenName, StackName>
TStackDefinition<ScreensName, StacksName> | TTabContentData<ScreensName, StacksName>
>;
navigatorProps?: any; // TODO BottomTabNavigatorProps doesn't exist :(
};
export type TModalData<ScreenName, StackName> = TStackDefinition<ScreenName, StackName>;
export type TDrawerContentData<ScreenName, StackName> = {
stack: TStackDefinition<ScreenName, StackName>;
export type TModalData<ScreensName, StacksName> = TStackDefinition<ScreensName, StacksName>;
export type TDrawerContentData<ScreensName, StacksName> = {
stack: TStackDefinition<ScreensName, StacksName>;
options?: BaseOptions<DrawerNavigationOptions>;
};
export type TDrawersData<ScreenName, StackName> = {
export type TDrawersData<ScreensName, StacksName> = {
content: Record<
string,
TStackDefinition<ScreenName, StackName> | TDrawerContentData<ScreenName, StackName>
TStackDefinition<ScreensName, StacksName> | TDrawerContentData<ScreensName, StacksName>
>;
navigatorProps?: any; // TODO DrawerNavigatorProps doesn't exist :(
};
export type TRootName<StackName, TabsName, DrawersName> = TabsName | StackName | DrawersName;
export type TRootName<StacksName, TabsName, DrawersName> = TabsName | StacksName | DrawersName;
export type ExtractProps<Type> = Type extends React.FC<infer X> ? X : never;

export type Layout<
Expand Down

0 comments on commit e77221a

Please sign in to comment.