Skip to content

Commit 6d22f22

Browse files
jameswilddevjameswilddev
committed
Refactor stack route prop types.
1 parent 1005d03 commit 6d22f22

File tree

8 files changed

+197
-124
lines changed

8 files changed

+197
-124
lines changed

‎index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,9 +161,11 @@ export type { SplitButtonStateStyle } from './react-native/types/SplitButtonStat
161161
export type { SplitButtonStyle } from './react-native/types/SplitButtonStyle'
162162
export type { SplitButtonTypeStyle } from './react-native/types/SplitButtonTypeStyle'
163163
export type { StackRoute } from './react-native/types/StackRoute'
164+
export type { StackRouteProps } from './react-native/types/StackRouteProps'
164165
export type { StackRouterState } from './react-native/types/StackRouterState'
165166
export type { StackRouteTable } from './react-native/types/StackRouteTable'
166167
export type { StackRoutingProps } from './react-native/types/StackRoutingProps'
168+
export type { StackStateItem } from './react-native/types/StackStateItem'
167169
export type { StateStoreInterface } from './react-native/types/StateStoreInterface'
168170
export type { StatusPillProps } from './react-native/types/StatusPillProps'
169171
export type { StatusPillStyle } from './react-native/types/StatusPillStyle'

‎react-native/types/StackRoute/index.tsx

Lines changed: 2 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,6 @@
11
import type * as React from 'react'
22
import type { RouteParameters } from '../RouteParameters'
3-
import type { StackRouterState } from '../StackRouterState'
4-
5-
/**
6-
* Describes an item of stack router state.
7-
*/
8-
type Item<T extends RouteParameters> = {
9-
readonly [TKey in keyof T]: {
10-
/**
11-
* Uniquely identifies this card within the stack.
12-
*/
13-
readonly uuid: string
14-
15-
/**
16-
* The key of the route.
17-
*/
18-
readonly key: TKey
19-
20-
/**
21-
* The parameters passed to the route.
22-
*/
23-
readonly parameters: T[TKey]
24-
};
25-
}[keyof T]
3+
import type { StackRouteProps } from '../StackRouteProps'
264

275
/**
286
* A React component which can be used to render a route within a stack router.
@@ -36,85 +14,7 @@ export interface StackRoute<
3614
TOtherProps extends Readonly<Record<string, unknown>>
3715
> {
3816
readonly component: React.FunctionComponent<
39-
{
40-
/**
41-
* Call to add one or more card(s) to the top of the stack.
42-
* @param itemsToAdd The card(s) to add.
43-
*/
44-
push: (...itemsToAdd: ReadonlyArray<Item<TRouteParameters>>) => void
45-
46-
/**
47-
* Pops one or more card(s) from the top of the stack.
48-
* @param numberOfItemsToRemove The number of card(s) to remove. Defaults
49-
* to 1 when not given.
50-
*/
51-
pop: (numberOfItemsToRemove?: number) => void
52-
53-
/**
54-
* Pops one or more card(s) from the top of stack, then adds one or more
55-
* card(s) to the top of the stack in their place.
56-
* @param numberOfItemsToRemove The number of card(s) to remove.
57-
* @param itemsToAdd The card(s) to add in their place.
58-
*/
59-
replace: (
60-
numberOfItemsToRemove: number,
61-
...itemsToAdd: ReadonlyArray<Item<TRouteParameters>>
62-
) => void
63-
64-
/**
65-
* Resets the entire card stack to a new stack.
66-
* @param replacementItems The replacement stack.
67-
*/
68-
reset: (...replacementItems: ReadonlyArray<Item<TRouteParameters>>) => void
69-
70-
/**
71-
* Changes the parameters of this card.
72-
* @param parameters The replacement parameters.
73-
*/
74-
setParameters: (parameters: TRouteParameters[TRouteKey]) => void
75-
76-
/**
77-
* The route parameters for this card.
78-
*/
79-
readonly parameters: TRouteParameters[TRouteKey]
80-
81-
/**
82-
* The state of the stack router.
83-
*/
84-
readonly routeState: StackRouterState<TRouteParameters>
85-
86-
/**
87-
* Sets a new state within the stack router.
88-
* @param to The new state to set.
89-
*/
90-
setRouteState: (to: StackRouterState<TRouteParameters>) => void
91-
92-
/**
93-
* This function should not be used by your routes and is included here as
94-
* an implementation oversight. Called when the user makes a gesture to go
95-
* back, e.g. swiping from the left or pressing the hardware "back" button.
96-
* @param pop Call to proceed, popping the current card from the top of
97-
* the stack.
98-
* @param cancel Call to cancel; for a swipe gesture, this will unswipe the
99-
* top card.
100-
*/
101-
onBack: (pop: () => void, cancel: () => void) => void
102-
103-
/**
104-
* When true, the card is at the top of the stack and is visible (unless
105-
* something else like a parent tab router is hiding the stack itself). It
106-
* is otherwise underneath another card. Note that swiping to go back may
107-
* reveal a card which is not top!
108-
*/
109-
readonly top: boolean
110-
111-
/**
112-
* When true, the card is at the bottom of the stack and it is not possible
113-
* to pop it (as there would be no card underneath to reveal). When false,
114-
* at least one card is beneath this one to which it is possible to pop.
115-
*/
116-
readonly bottom: boolean
117-
} & TOtherProps
17+
StackRouteProps<TRouteParameters, TRouteKey> & TOtherProps
11818
>
11919

12020
/**

‎react-native/types/StackRouteProps/index.tsx

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import type { RouteParameters } from '../RouteParameters'
2+
import type { StackStateItem } from '../StackStateItem'
3+
import type { StackRouterState } from '../StackRouterState'
4+
5+
/**
6+
* Props given to stack routes.
7+
* @template TRouteParameters The parameters to the stack router's routes.
8+
* @template TRouteKey The key of this route.
9+
*/
10+
export interface StackRouteProps<TRouteParameters extends RouteParameters, TRouteKey extends keyof TRouteParameters> {
11+
/**
12+
* Call to add one or more card(s) to the top of the stack.
13+
* @param itemsToAdd The card(s) to add.
14+
*/
15+
push: (...itemsToAdd: ReadonlyArray<StackStateItem<TRouteParameters>>) => void
16+
17+
/**
18+
* Pops one or more card(s) from the top of the stack.
19+
* @param numberOfItemsToRemove The number of card(s) to remove. Defaults
20+
* to 1 when not given.
21+
*/
22+
pop: (numberOfItemsToRemove?: number) => void
23+
24+
/**
25+
* Pops one or more card(s) from the top of stack, then adds one or more
26+
* card(s) to the top of the stack in their place.
27+
* @param numberOfItemsToRemove The number of card(s) to remove.
28+
* @param itemsToAdd The card(s) to add in their place.
29+
*/
30+
replace: (
31+
numberOfItemsToRemove: number,
32+
...itemsToAdd: ReadonlyArray<StackStateItem<TRouteParameters>>
33+
) => void
34+
35+
/**
36+
* Resets the entire card stack to a new stack.
37+
* @param replacementItems The replacement stack.
38+
*/
39+
reset: (...replacementItems: ReadonlyArray<StackStateItem<TRouteParameters>>) => void
40+
41+
/**
42+
* Changes the parameters of this card.
43+
* @param parameters The replacement parameters.
44+
*/
45+
setParameters: (parameters: TRouteParameters[TRouteKey]) => void
46+
47+
/**
48+
* The route parameters for this card.
49+
*/
50+
readonly parameters: TRouteParameters[TRouteKey]
51+
52+
/**
53+
* The state of the stack router.
54+
*/
55+
readonly routeState: StackRouterState<TRouteParameters>
56+
57+
/**
58+
* Sets a new state within the stack router.
59+
* @param to The new state to set.
60+
*/
61+
setRouteState: (to: StackRouterState<TRouteParameters>) => void
62+
63+
/**
64+
* This function should not be used by your routes and is included here as
65+
* an implementation oversight. Called when the user makes a gesture to go
66+
* back, e.g. swiping from the left or pressing the hardware "back" button.
67+
* @param pop Call to proceed, popping the current card from the top of
68+
* the stack.
69+
* @param cancel Call to cancel; for a swipe gesture, this will unswipe the
70+
* top card.
71+
*/
72+
onBack: (pop: () => void, cancel: () => void) => void
73+
74+
/**
75+
* When true, the card is at the top of the stack and is visible (unless
76+
* something else like a parent tab router is hiding the stack itself). It
77+
* is otherwise underneath another card. Note that swiping to go back may
78+
* reveal a card which is not top!
79+
*/
80+
readonly top: boolean
81+
82+
/**
83+
* When true, the card is at the bottom of the stack and it is not possible
84+
* to pop it (as there would be no card underneath to reveal). When false,
85+
* at least one card is beneath this one to which it is possible to pop.
86+
*/
87+
readonly bottom: boolean
88+
}

‎react-native/types/StackRouteProps/readme.md

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# `react-native-app-helpers/StackRoute`
2+
3+
A React component which can be used to render a route within a stack router,
4+
and some metadata for doing so.
5+
6+
## Usage
7+
8+
```tsx
9+
import type { StackRoute } from "react-native-app-helpers";
10+
11+
type RouteParameters = {
12+
routeAKey: {
13+
routeAParameterKey: `Route A Parameter Value`,
14+
},
15+
routeBKey: {
16+
routeBParameterKey: `Route B Parameter Value`,
17+
},
18+
routeCKey: {
19+
routeCParameterKey: `Route C Parameter Value`,
20+
},
21+
};
22+
23+
type OtherProps = {
24+
otherPropKey: `Other Prop Value`,
25+
};
26+
27+
const stackRouteProps: StackRoute<RouteParameters, `routeBKey`> = {
28+
push(...itemsToAdd: ReadonlyArray<StackStateItem<RouteParameters>>): void,
29+
pop(numberOfItemsToRemove?: number): void,
30+
replace(numberOfItemsToRemove: number, ...itemsToAdd: ReadonlyArray<StackStateItem<RouteParameters>>): void {},
31+
reset(...replacementItems: ReadonlyArray<StackStateItem<RouteParameters>>): void {},
32+
setParameters(parameters: RouteParameters[`routeBKey`]): void {},
33+
parameters: {
34+
routeBParameterKey: `Route B Parameter Value`,
35+
},
36+
routeState: [{
37+
uuid: `68496389-b2ac-435c-8458-1eee80319e10`,
38+
key: `routeBKey`,
39+
parameters: {
40+
routeBParameterKey: `Route B Parameter Value`,
41+
},
42+
}],
43+
setRouteState(to: StackRouterState<RouteParameters>): void {},
44+
onBack(pop: () => void, cancel: () => void): void,
45+
top: true,
46+
bottom: false,
47+
};
48+
```

‎react-native/types/StackRouterState/index.tsx

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,9 @@
11
import type { RouteParameters } from '../RouteParameters'
2-
3-
type Item<T extends RouteParameters> = {
4-
readonly [TKey in keyof T]: {
5-
/**
6-
* Uniquely identifies this card within the stack.
7-
*/
8-
readonly uuid: string
9-
10-
/**
11-
* The route key.
12-
*/
13-
readonly key: TKey
14-
15-
/**
16-
* The parameters to the route.
17-
*/
18-
readonly parameters: T[TKey]
19-
};
20-
}[keyof T]
2+
import type { StackStateItem } from '../StackStateItem'
213

224
/**
235
* The state of a stack router.
246
* @template T The parameters of the route table of which a state is being
257
* produced.
268
*/
27-
export type StackRouterState<T extends RouteParameters> = ReadonlyArray<
28-
Item<T>
29-
>
9+
export type StackRouterState<T extends RouteParameters> = ReadonlyArray<StackStateItem<T>>

‎react-native/types/StackStateItem/index.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import type { RouteParameters } from '../RouteParameters'
2+
3+
/**
4+
* Describes an item of stack router state.
5+
* @template TRouteParameters The parameters to the stack router's routes.
6+
*/
7+
export type StackStateItem<T extends RouteParameters> = {
8+
readonly [TKey in keyof T]: {
9+
/**
10+
* Uniquely identifies this card within the stack.
11+
*/
12+
readonly uuid: string
13+
14+
/**
15+
* The key of the route.
16+
*/
17+
readonly key: TKey
18+
19+
/**
20+
* The parameters passed to the route.
21+
*/
22+
readonly parameters: T[TKey]
23+
};
24+
}[keyof T]

‎react-native/types/StackStateItem/readme.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# `react-native-app-helpers/StackStateItem`
2+
3+
Describes an item of stack router state.
4+
5+
## Usage
6+
7+
```tsx
8+
import type { StackStateItem } from "react-native-app-helpers";
9+
10+
type RouteParameters = {
11+
routeAKey: {
12+
routeAParameterKey: `Route A Parameter Value`,
13+
},
14+
routeBKey: {
15+
routeBParameterKey: `Route B Parameter Value`,
16+
},
17+
routeCKey: {
18+
routeCParameterKey: `Route C Parameter Value`,
19+
},
20+
};
21+
22+
const item: StackStateItem<RouteParameters> = {
23+
uuid: `2a14bf24-8c93-4949-961e-55f25dc6b08e`,
24+
key: `routeBKey`,
25+
parameters: {
26+
routeBParameterKey: `Route B Parameter Value`,
27+
},
28+
};
29+
```

‎readme.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -177,9 +177,11 @@ import { createTextComponent } from "react-native-app-helpers";
177177
- [SplitButtonStyle](./react-native/types/SplitButtonStyle/readme.md)
178178
- [SplitButtonTypeStyle](./react-native/types/SplitButtonTypeStyle/readme.md)
179179
- [StackRoute](./react-native/types/StackRoute/readme.md)
180+
- [StackRouteProps](./react-native/types/StackRouteProps/readme.md)
180181
- [StackRouterState](./react-native/types/StackRouterState/readme.md)
181182
- [StackRouteTable](./react-native/types/StackRouteTable/readme.md)
182183
- [StackRoutingProps](./react-native/types/StackRoutingProps/readme.md)
184+
- [StackStateItem](./react-native/types/StackStateItem/readme.md)
183185
- [StatusPillProps](./react-native/types/StatusPillProps/readme.md)
184186
- [StatusPillStyle](./react-native/types/StatusPillStyle/readme.md)
185187
- [StatusPillStyleStatus](./react-native/types/StatusPillStyleStatus/readme.md)

0 commit comments

Comments
 (0)