@react-navigation/native 8.0.0-alpha.39 → 8.0.0-alpha.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ios/ReactNavigationSFSymbolView.swift +6 -2
- package/lib/module/Link.js +65 -29
- package/lib/module/Link.js.map +1 -1
- package/lib/module/Link.native.js +72 -0
- package/lib/module/Link.native.js.map +1 -0
- package/lib/module/NavigationContainer.js +3 -3
- package/lib/module/NavigationContainer.js.map +1 -1
- package/lib/module/constants.js +5 -0
- package/lib/module/constants.js.map +1 -0
- package/lib/module/constants.native.js +6 -0
- package/lib/module/constants.native.js.map +1 -0
- package/lib/module/index.js +1 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/native/CornerInset.js +2 -7
- package/lib/module/native/CornerInset.js.map +1 -1
- package/lib/module/theming/DarkTheme.js +1 -1
- package/lib/module/theming/DarkTheme.js.map +1 -1
- package/lib/module/theming/LightTheme.js +1 -1
- package/lib/module/theming/LightTheme.js.map +1 -1
- package/lib/module/theming/MaterialFallbackTheme.js +1 -1
- package/lib/module/theming/MaterialFallbackTheme.js.map +1 -1
- package/lib/module/theming/MaterialTheme.android.js +1 -1
- package/lib/module/theming/MaterialTheme.android.js.map +1 -1
- package/lib/module/theming/fonts.js +15 -54
- package/lib/module/theming/fonts.js.map +1 -1
- package/lib/module/theming/fonts.native.js +42 -0
- package/lib/module/theming/fonts.native.js.map +1 -0
- package/lib/module/useLinkProps.js +5 -5
- package/lib/module/useLinkProps.js.map +1 -1
- package/lib/module/useLinking.js +1 -1
- package/lib/module/useLinking.js.map +1 -1
- package/lib/module/useLinking.native.js.map +1 -1
- package/lib/typescript/src/Link.d.ts +12 -6
- package/lib/typescript/src/Link.d.ts.map +1 -1
- package/lib/typescript/src/Link.native.d.ts +4 -0
- package/lib/typescript/src/Link.native.d.ts.map +1 -0
- package/lib/typescript/src/NavigationContainer.d.ts.map +1 -1
- package/lib/typescript/src/constants.d.ts +4 -0
- package/lib/typescript/src/constants.d.ts.map +1 -0
- package/lib/typescript/src/constants.native.d.ts +4 -0
- package/lib/typescript/src/constants.native.d.ts.map +1 -0
- package/lib/typescript/src/index.d.ts +1 -1
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/native/CornerInset.d.ts +3 -3
- package/lib/typescript/src/native/CornerInset.d.ts.map +1 -1
- package/lib/typescript/src/native/MaterialSymbol.d.ts +1 -1
- package/lib/typescript/src/native/MaterialSymbol.d.ts.map +1 -1
- package/lib/typescript/src/theming/DarkTheme.d.ts +0 -34
- package/lib/typescript/src/theming/DarkTheme.d.ts.map +1 -1
- package/lib/typescript/src/theming/LightTheme.d.ts +0 -34
- package/lib/typescript/src/theming/LightTheme.d.ts.map +1 -1
- package/lib/typescript/src/theming/MaterialFallbackTheme.d.ts +0 -68
- package/lib/typescript/src/theming/MaterialFallbackTheme.d.ts.map +1 -1
- package/lib/typescript/src/theming/MaterialTheme.android.d.ts +0 -136
- package/lib/typescript/src/theming/MaterialTheme.android.d.ts.map +1 -1
- package/lib/typescript/src/theming/fonts.d.ts +0 -34
- package/lib/typescript/src/theming/fonts.d.ts.map +1 -1
- package/lib/typescript/src/theming/fonts.native.d.ts +36 -0
- package/lib/typescript/src/theming/fonts.native.d.ts.map +1 -0
- package/lib/typescript/src/useLinkBuilder.d.ts +30 -30
- package/lib/typescript/src/useLinkBuilder.d.ts.map +1 -1
- package/lib/typescript/src/useLinkProps.d.ts +1 -1
- package/lib/typescript/src/useLinkProps.d.ts.map +1 -1
- package/lib/typescript/src/useLinking.d.ts +3 -39
- package/lib/typescript/src/useLinking.d.ts.map +1 -1
- package/lib/typescript/src/useLinking.native.d.ts +4 -76
- package/lib/typescript/src/useLinking.native.d.ts.map +1 -1
- package/package.json +9 -5
- package/src/Link.native.tsx +69 -0
- package/src/Link.tsx +102 -34
- package/src/NavigationContainer.tsx +3 -4
- package/src/constants.native.tsx +10 -0
- package/src/constants.tsx +5 -0
- package/src/native/CornerInset.tsx +4 -4
- package/src/native/MaterialSymbol.tsx +1 -1
- package/src/theming/fonts.native.tsx +41 -0
- package/src/theming/fonts.tsx +15 -54
- package/src/useLinkProps.tsx +6 -5
- package/src/useLinking.native.tsx +6 -5
- package/src/useLinking.tsx +9 -12
- package/lib/module/__stubs__/window.js +0 -78
- package/lib/module/__stubs__/window.js.map +0 -1
- package/lib/typescript/src/__stubs__/window.d.ts +0 -18
- package/lib/typescript/src/__stubs__/window.d.ts.map +0 -1
- package/src/__stubs__/window.tsx +0 -82
package/src/Link.tsx
CHANGED
|
@@ -1,11 +1,6 @@
|
|
|
1
1
|
import { type RootParamList, useTheme } from '@react-navigation/core';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
4
|
-
type GestureResponderEvent,
|
|
5
|
-
Platform,
|
|
6
|
-
Text,
|
|
7
|
-
type TextProps,
|
|
8
|
-
} from 'react-native';
|
|
3
|
+
import type { GestureResponderEvent, TextProps, TextStyle } from 'react-native';
|
|
9
4
|
|
|
10
5
|
import { type LinkProps, useLinkProps } from './useLinkProps';
|
|
11
6
|
|
|
@@ -13,12 +8,33 @@ type PressEvent =
|
|
|
13
8
|
| React.MouseEvent<HTMLAnchorElement, MouseEvent>
|
|
14
9
|
| GestureResponderEvent;
|
|
15
10
|
|
|
16
|
-
type LinkBaseProps =
|
|
17
|
-
target?:
|
|
18
|
-
onPress?: (e: PressEvent) => void;
|
|
11
|
+
type LinkBaseProps = {
|
|
12
|
+
target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
|
|
19
13
|
disabled?: boolean | undefined;
|
|
14
|
+
id?: string | undefined;
|
|
15
|
+
testID?: string | undefined;
|
|
16
|
+
onPress?: (e: PressEvent) => void;
|
|
17
|
+
numberOfLines?: number | undefined;
|
|
18
|
+
className?: React.AnchorHTMLAttributes<HTMLAnchorElement>['className'];
|
|
19
|
+
style?: (React.CSSProperties & TextStyle) | undefined;
|
|
20
20
|
children: React.ReactNode;
|
|
21
|
-
}
|
|
21
|
+
} & Pick<
|
|
22
|
+
TextProps,
|
|
23
|
+
| 'aria-busy'
|
|
24
|
+
| 'aria-expanded'
|
|
25
|
+
| 'aria-hidden'
|
|
26
|
+
| 'aria-label'
|
|
27
|
+
| 'aria-labelledby'
|
|
28
|
+
| 'aria-live'
|
|
29
|
+
>;
|
|
30
|
+
|
|
31
|
+
export type Props<
|
|
32
|
+
ParamList extends {} = RootParamList,
|
|
33
|
+
RouteName extends Extract<keyof ParamList, string> = Extract<
|
|
34
|
+
keyof ParamList,
|
|
35
|
+
string
|
|
36
|
+
>,
|
|
37
|
+
> = LinkProps<NoInfer<ParamList>, RouteName> & LinkBaseProps;
|
|
22
38
|
|
|
23
39
|
/**
|
|
24
40
|
* Component to render link to another screen using a path.
|
|
@@ -43,10 +59,21 @@ export function Link<
|
|
|
43
59
|
params,
|
|
44
60
|
action,
|
|
45
61
|
href,
|
|
46
|
-
style,
|
|
47
62
|
target,
|
|
48
|
-
|
|
49
|
-
|
|
63
|
+
disabled,
|
|
64
|
+
id,
|
|
65
|
+
testID,
|
|
66
|
+
onPress,
|
|
67
|
+
className,
|
|
68
|
+
style,
|
|
69
|
+
children,
|
|
70
|
+
'aria-label': ariaLabel,
|
|
71
|
+
'aria-busy': ariaBusy,
|
|
72
|
+
'aria-expanded': ariaExpanded,
|
|
73
|
+
'aria-hidden': ariaHidden,
|
|
74
|
+
'aria-labelledby': ariaLabelledBy,
|
|
75
|
+
'aria-live': ariaLive,
|
|
76
|
+
}: Props<ParamList, RouteName>) {
|
|
50
77
|
// @ts-expect-error: destructuring loses the relationship between target props
|
|
51
78
|
const props = useLinkProps({ in: parent, screen, params, action, href });
|
|
52
79
|
|
|
@@ -54,16 +81,18 @@ export function Link<
|
|
|
54
81
|
// This ensures proper error when used outside of navigation container
|
|
55
82
|
const { colors, fonts } = useTheme();
|
|
56
83
|
|
|
57
|
-
|
|
58
|
-
|
|
84
|
+
if (typeof colors.primary !== 'string') {
|
|
85
|
+
throw new Error('Invalid color format.');
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
const onClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
|
|
89
|
+
if (disabled) {
|
|
59
90
|
e.preventDefault();
|
|
60
91
|
e.stopPropagation();
|
|
61
92
|
return;
|
|
62
93
|
}
|
|
63
94
|
|
|
64
|
-
|
|
65
|
-
rest.onPress?.(e);
|
|
66
|
-
}
|
|
95
|
+
onPress?.(e);
|
|
67
96
|
|
|
68
97
|
// Let user prevent default behavior
|
|
69
98
|
if (!e.defaultPrevented) {
|
|
@@ -71,23 +100,62 @@ export function Link<
|
|
|
71
100
|
}
|
|
72
101
|
};
|
|
73
102
|
|
|
74
|
-
return
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
103
|
+
return (
|
|
104
|
+
<a
|
|
105
|
+
aria-busy={ariaBusy}
|
|
106
|
+
aria-disabled={disabled}
|
|
107
|
+
aria-expanded={ariaExpanded}
|
|
108
|
+
aria-hidden={ariaHidden}
|
|
109
|
+
aria-label={ariaLabel}
|
|
110
|
+
aria-labelledby={ariaLabelledBy}
|
|
111
|
+
aria-live={ariaLive}
|
|
112
|
+
id={id}
|
|
113
|
+
data-testid={testID}
|
|
114
|
+
tabIndex={props.href == null ? 0 : undefined}
|
|
115
|
+
target={target}
|
|
116
|
+
role={props.role}
|
|
117
|
+
href={props.href}
|
|
118
|
+
onAuxClick={
|
|
119
|
+
disabled
|
|
120
|
+
? (e) => {
|
|
82
121
|
e.preventDefault();
|
|
83
122
|
e.stopPropagation();
|
|
84
123
|
}
|
|
85
|
-
: undefined
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
124
|
+
: undefined
|
|
125
|
+
}
|
|
126
|
+
onClick={onClick}
|
|
127
|
+
onKeyDown={
|
|
128
|
+
props.href == null
|
|
129
|
+
? (e) => {
|
|
130
|
+
// On browser, pressing Enter on a link triggers a click event
|
|
131
|
+
// So we simulate browser behavior when href is not provided
|
|
132
|
+
if (e.key === 'Enter') {
|
|
133
|
+
e.preventDefault();
|
|
134
|
+
e.currentTarget.click();
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
: undefined
|
|
138
|
+
}
|
|
139
|
+
className={className}
|
|
140
|
+
style={{
|
|
141
|
+
backgroundColor: 'transparent',
|
|
142
|
+
boxSizing: 'border-box',
|
|
143
|
+
color: colors.primary,
|
|
144
|
+
cursor: disabled ? 'default' : 'pointer',
|
|
145
|
+
display: 'inline',
|
|
146
|
+
fontSize: 14,
|
|
147
|
+
margin: 0,
|
|
148
|
+
overflowWrap: 'break-word',
|
|
149
|
+
padding: 0,
|
|
150
|
+
position: 'relative',
|
|
151
|
+
textAlign: 'start',
|
|
152
|
+
textDecoration: 'none',
|
|
153
|
+
whiteSpace: 'pre-wrap',
|
|
154
|
+
...fonts.regular,
|
|
155
|
+
...style,
|
|
156
|
+
}}
|
|
157
|
+
>
|
|
158
|
+
{children}
|
|
159
|
+
</a>
|
|
160
|
+
);
|
|
93
161
|
}
|
|
@@ -13,8 +13,8 @@ import {
|
|
|
13
13
|
validatePathConfig,
|
|
14
14
|
} from '@react-navigation/core';
|
|
15
15
|
import * as React from 'react';
|
|
16
|
-
import { I18nManager, Platform } from 'react-native';
|
|
17
16
|
|
|
17
|
+
import { DEFAULT_DIRECTION, IS_NATIVE } from './constants';
|
|
18
18
|
import { LinkingContext } from './LinkingContext';
|
|
19
19
|
import { LocaleDirContext } from './LocaleDirContext';
|
|
20
20
|
import { LightTheme } from './theming/LightTheme';
|
|
@@ -120,7 +120,7 @@ const RESTORE_STATE_ERROR =
|
|
|
120
120
|
* This should be rendered at the root wrapping the whole app.
|
|
121
121
|
*/
|
|
122
122
|
export function NavigationContainer<ParamList extends {} = RootParamList>({
|
|
123
|
-
direction =
|
|
123
|
+
direction = DEFAULT_DIRECTION,
|
|
124
124
|
theme = LightTheme,
|
|
125
125
|
linking,
|
|
126
126
|
persistor,
|
|
@@ -188,8 +188,7 @@ export function NavigationContainer<ParamList extends {} = RootParamList>({
|
|
|
188
188
|
return getInitialState();
|
|
189
189
|
});
|
|
190
190
|
|
|
191
|
-
const isPersistenceSupported =
|
|
192
|
-
Platform.OS === 'web' ? !linkingConfig.options.enabled : true;
|
|
191
|
+
const isPersistenceSupported = IS_NATIVE || !linkingConfig.options.enabled;
|
|
193
192
|
|
|
194
193
|
const [isPersistedStateResolved, initialStateFromPersisted] = useThenable(
|
|
195
194
|
() => {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import type { ViewProps } from 'react-native';
|
|
3
3
|
|
|
4
4
|
export type CornerInsetProps = {
|
|
5
5
|
/**
|
|
@@ -17,7 +17,7 @@ export type CornerInsetProps = {
|
|
|
17
17
|
* @default true
|
|
18
18
|
*/
|
|
19
19
|
adaptive?: boolean;
|
|
20
|
-
} &
|
|
20
|
+
} & Omit<ViewProps, 'children'>;
|
|
21
21
|
|
|
22
22
|
export type CornerInsetRef = {
|
|
23
23
|
relayout(): void;
|
|
@@ -27,7 +27,7 @@ type Props = CornerInsetProps & {
|
|
|
27
27
|
ref?: React.Ref<CornerInsetRef>;
|
|
28
28
|
};
|
|
29
29
|
|
|
30
|
-
export function CornerInset({ ref
|
|
30
|
+
export function CornerInset({ ref }: Props) {
|
|
31
31
|
React.useImperativeHandle(
|
|
32
32
|
ref,
|
|
33
33
|
() => ({
|
|
@@ -36,5 +36,5 @@ export function CornerInset({ ref, ...rest }: Props) {
|
|
|
36
36
|
[]
|
|
37
37
|
);
|
|
38
38
|
|
|
39
|
-
return
|
|
39
|
+
return null;
|
|
40
40
|
}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import type { Theme } from '@react-navigation/core';
|
|
2
|
+
import { Platform } from 'react-native';
|
|
3
|
+
|
|
4
|
+
export const fonts = Platform.select({
|
|
5
|
+
ios: {
|
|
6
|
+
regular: {
|
|
7
|
+
fontFamily: 'System',
|
|
8
|
+
fontWeight: '400',
|
|
9
|
+
},
|
|
10
|
+
medium: {
|
|
11
|
+
fontFamily: 'System',
|
|
12
|
+
fontWeight: '500',
|
|
13
|
+
},
|
|
14
|
+
bold: {
|
|
15
|
+
fontFamily: 'System',
|
|
16
|
+
fontWeight: '600',
|
|
17
|
+
},
|
|
18
|
+
heavy: {
|
|
19
|
+
fontFamily: 'System',
|
|
20
|
+
fontWeight: '700',
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
default: {
|
|
24
|
+
regular: {
|
|
25
|
+
fontFamily: 'sans-serif',
|
|
26
|
+
fontWeight: 'normal',
|
|
27
|
+
},
|
|
28
|
+
medium: {
|
|
29
|
+
fontFamily: 'sans-serif-medium',
|
|
30
|
+
fontWeight: 'normal',
|
|
31
|
+
},
|
|
32
|
+
bold: {
|
|
33
|
+
fontFamily: 'sans-serif',
|
|
34
|
+
fontWeight: '600',
|
|
35
|
+
},
|
|
36
|
+
heavy: {
|
|
37
|
+
fontFamily: 'sans-serif',
|
|
38
|
+
fontWeight: '700',
|
|
39
|
+
},
|
|
40
|
+
},
|
|
41
|
+
} as const satisfies Record<string, Theme['fonts']>);
|
package/src/theming/fonts.tsx
CHANGED
|
@@ -1,62 +1,23 @@
|
|
|
1
1
|
import type { Theme } from '@react-navigation/core';
|
|
2
|
-
import { Platform } from 'react-native';
|
|
3
2
|
|
|
4
3
|
const WEB_FONT_STACK =
|
|
5
4
|
'system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
|
|
6
5
|
|
|
7
|
-
export const fonts =
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
fontWeight: '400',
|
|
12
|
-
},
|
|
13
|
-
medium: {
|
|
14
|
-
fontFamily: WEB_FONT_STACK,
|
|
15
|
-
fontWeight: '500',
|
|
16
|
-
},
|
|
17
|
-
bold: {
|
|
18
|
-
fontFamily: WEB_FONT_STACK,
|
|
19
|
-
fontWeight: '600',
|
|
20
|
-
},
|
|
21
|
-
heavy: {
|
|
22
|
-
fontFamily: WEB_FONT_STACK,
|
|
23
|
-
fontWeight: '700',
|
|
24
|
-
},
|
|
6
|
+
export const fonts = {
|
|
7
|
+
regular: {
|
|
8
|
+
fontFamily: WEB_FONT_STACK,
|
|
9
|
+
fontWeight: '400',
|
|
25
10
|
},
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
fontWeight: '400',
|
|
30
|
-
},
|
|
31
|
-
medium: {
|
|
32
|
-
fontFamily: 'System',
|
|
33
|
-
fontWeight: '500',
|
|
34
|
-
},
|
|
35
|
-
bold: {
|
|
36
|
-
fontFamily: 'System',
|
|
37
|
-
fontWeight: '600',
|
|
38
|
-
},
|
|
39
|
-
heavy: {
|
|
40
|
-
fontFamily: 'System',
|
|
41
|
-
fontWeight: '700',
|
|
42
|
-
},
|
|
11
|
+
medium: {
|
|
12
|
+
fontFamily: WEB_FONT_STACK,
|
|
13
|
+
fontWeight: '500',
|
|
43
14
|
},
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
fontWeight: 'normal',
|
|
48
|
-
},
|
|
49
|
-
medium: {
|
|
50
|
-
fontFamily: 'sans-serif-medium',
|
|
51
|
-
fontWeight: 'normal',
|
|
52
|
-
},
|
|
53
|
-
bold: {
|
|
54
|
-
fontFamily: 'sans-serif',
|
|
55
|
-
fontWeight: '600',
|
|
56
|
-
},
|
|
57
|
-
heavy: {
|
|
58
|
-
fontFamily: 'sans-serif',
|
|
59
|
-
fontWeight: '700',
|
|
60
|
-
},
|
|
15
|
+
bold: {
|
|
16
|
+
fontFamily: WEB_FONT_STACK,
|
|
17
|
+
fontWeight: '600',
|
|
61
18
|
},
|
|
62
|
-
|
|
19
|
+
heavy: {
|
|
20
|
+
fontFamily: WEB_FONT_STACK,
|
|
21
|
+
fontWeight: '700',
|
|
22
|
+
},
|
|
23
|
+
} as const satisfies Theme['fonts'];
|
package/src/useLinkProps.tsx
CHANGED
|
@@ -16,9 +16,10 @@ import {
|
|
|
16
16
|
type RootParamList,
|
|
17
17
|
} from '@react-navigation/core';
|
|
18
18
|
import * as React from 'react';
|
|
19
|
-
import {
|
|
19
|
+
import type { GestureResponderEvent } from 'react-native';
|
|
20
20
|
import useLatestCallback from 'use-latest-callback';
|
|
21
21
|
|
|
22
|
+
import { IS_NATIVE } from './constants';
|
|
22
23
|
import { LinkingContext } from './LinkingContext';
|
|
23
24
|
import { useDeepStableValue } from './useDeepStableValue';
|
|
24
25
|
|
|
@@ -321,7 +322,7 @@ export function useLinkProps<
|
|
|
321
322
|
| React.MouseEvent<HTMLAnchorElement, MouseEvent>
|
|
322
323
|
| GestureResponderEvent
|
|
323
324
|
) => {
|
|
324
|
-
if (
|
|
325
|
+
if (!IS_NATIVE && e) {
|
|
325
326
|
// ignore clicks with modifier keys
|
|
326
327
|
const hasModifierKey =
|
|
327
328
|
('metaKey' in e && e.metaKey) ||
|
|
@@ -379,7 +380,7 @@ export function useLinkProps<
|
|
|
379
380
|
);
|
|
380
381
|
|
|
381
382
|
const target = useDeepStableValue(
|
|
382
|
-
|
|
383
|
+
!IS_NATIVE
|
|
383
384
|
? typeof screen === 'string'
|
|
384
385
|
? {
|
|
385
386
|
screen,
|
|
@@ -391,12 +392,12 @@ export function useLinkProps<
|
|
|
391
392
|
);
|
|
392
393
|
|
|
393
394
|
const state =
|
|
394
|
-
|
|
395
|
+
!IS_NATIVE && rest.href == null && target != null
|
|
395
396
|
? React.use(NavigationFocusedRouteStateContext)
|
|
396
397
|
: undefined;
|
|
397
398
|
|
|
398
399
|
const href = React.useMemo(() => {
|
|
399
|
-
if (
|
|
400
|
+
if (IS_NATIVE || rest.href != null || target == null) {
|
|
400
401
|
return rest.href;
|
|
401
402
|
}
|
|
402
403
|
|
|
@@ -4,6 +4,7 @@ import {
|
|
|
4
4
|
type NavigationContainerRef,
|
|
5
5
|
type NavigationState,
|
|
6
6
|
type ParamListBase,
|
|
7
|
+
type PartialState,
|
|
7
8
|
useNavigationIndependentTree,
|
|
8
9
|
} from '@react-navigation/core';
|
|
9
10
|
import * as React from 'react';
|
|
@@ -13,8 +14,6 @@ import { getStateFromHref } from './getStateFromHref';
|
|
|
13
14
|
import type { LinkingOptions } from './types';
|
|
14
15
|
import type { Thenable } from './useThenable';
|
|
15
16
|
|
|
16
|
-
type ResultState = ReturnType<typeof getStateFromPathDefault>;
|
|
17
|
-
|
|
18
17
|
const linkingHandlers = new Set<symbol>();
|
|
19
18
|
|
|
20
19
|
export function useLinking<ParamList extends ParamListBase>(
|
|
@@ -140,7 +139,7 @@ export function useLinking<ParamList extends ParamListBase>(
|
|
|
140
139
|
);
|
|
141
140
|
|
|
142
141
|
const getInitialState = React.useCallback(() => {
|
|
143
|
-
let state:
|
|
142
|
+
let state: PartialState<NavigationState> | undefined;
|
|
144
143
|
|
|
145
144
|
if (enabledRef.current) {
|
|
146
145
|
const url = getInitialURLRef.current();
|
|
@@ -158,8 +157,10 @@ export function useLinking<ParamList extends ParamListBase>(
|
|
|
158
157
|
state = getStateFromURL(url, undefined);
|
|
159
158
|
}
|
|
160
159
|
|
|
161
|
-
const thenable: Thenable<
|
|
162
|
-
then(
|
|
160
|
+
const thenable: Thenable<PartialState<NavigationState> | undefined> = {
|
|
161
|
+
then(
|
|
162
|
+
onfulfilled?: (state: PartialState<NavigationState> | undefined) => void
|
|
163
|
+
) {
|
|
163
164
|
return Promise.resolve(onfulfilled ? onfulfilled(state) : state);
|
|
164
165
|
},
|
|
165
166
|
};
|
package/src/useLinking.tsx
CHANGED
|
@@ -4,7 +4,6 @@ import {
|
|
|
4
4
|
getActionFromState as getActionFromStateDefault,
|
|
5
5
|
getPathFromState as getPathFromStateDefault,
|
|
6
6
|
getStateFromPath as getStateFromPathDefault,
|
|
7
|
-
type InitialState,
|
|
8
7
|
type NavigationContainerRef,
|
|
9
8
|
type NavigationState,
|
|
10
9
|
type ParamListBase,
|
|
@@ -19,8 +18,6 @@ import { ServerContext } from './server/ServerContext';
|
|
|
19
18
|
import type { LinkingOptions } from './types';
|
|
20
19
|
import type { Thenable } from './useThenable';
|
|
21
20
|
|
|
22
|
-
type ResultState = ReturnType<typeof getStateFromPathDefault>;
|
|
23
|
-
|
|
24
21
|
/**
|
|
25
22
|
* History delta already applied by the browser when handling `popstate`
|
|
26
23
|
* The value 'replace' means the delta is unknown, so we can only replace
|
|
@@ -39,8 +36,8 @@ const getRoutesUntilIndex = (state: NavigationState) =>
|
|
|
39
36
|
*/
|
|
40
37
|
const getStateForPath = (
|
|
41
38
|
state: NavigationState | PartialState<NavigationState>,
|
|
42
|
-
fallbackState:
|
|
43
|
-
):
|
|
39
|
+
fallbackState: NavigationState | PartialState<NavigationState> | undefined
|
|
40
|
+
): Omit<PartialState<NavigationState>, 'stale'> => {
|
|
44
41
|
const index = state.index ?? state.routes.length - 1;
|
|
45
42
|
const route = state.routes[index];
|
|
46
43
|
|
|
@@ -72,7 +69,7 @@ const getStateForPath = (
|
|
|
72
69
|
return {
|
|
73
70
|
...state,
|
|
74
71
|
routes: state.routes.map((item) =>
|
|
75
|
-
item === route ? { ...
|
|
72
|
+
item === route ? { ...item, state: childState } : item
|
|
76
73
|
),
|
|
77
74
|
};
|
|
78
75
|
};
|
|
@@ -271,7 +268,7 @@ export function useLinking<ParamList extends ParamListBase>(
|
|
|
271
268
|
});
|
|
272
269
|
|
|
273
270
|
const validateRoutesNotExistInRootState = React.useCallback(
|
|
274
|
-
(state:
|
|
271
|
+
(state: PartialState<NavigationState>) => {
|
|
275
272
|
const navigation = ref.current;
|
|
276
273
|
const rootState = navigation?.getRootState();
|
|
277
274
|
// Make sure that the routes in the state exist in the root navigator
|
|
@@ -282,7 +279,7 @@ export function useLinking<ParamList extends ParamListBase>(
|
|
|
282
279
|
);
|
|
283
280
|
|
|
284
281
|
const getInitialState = React.useCallback(() => {
|
|
285
|
-
let value:
|
|
282
|
+
let value: PartialState<NavigationState> | undefined;
|
|
286
283
|
|
|
287
284
|
if (enabledRef.current) {
|
|
288
285
|
const location = server
|
|
@@ -304,7 +301,7 @@ export function useLinking<ParamList extends ParamListBase>(
|
|
|
304
301
|
}
|
|
305
302
|
}
|
|
306
303
|
|
|
307
|
-
const thenable: Thenable<
|
|
304
|
+
const thenable: Thenable<PartialState<NavigationState> | undefined> = {
|
|
308
305
|
then(onfulfilled) {
|
|
309
306
|
return Promise.resolve(onfulfilled ? onfulfilled(value) : value);
|
|
310
307
|
},
|
|
@@ -468,7 +465,7 @@ export function useLinking<ParamList extends ParamListBase>(
|
|
|
468
465
|
return;
|
|
469
466
|
}
|
|
470
467
|
|
|
471
|
-
let state:
|
|
468
|
+
let state: PartialState<NavigationState> | undefined;
|
|
472
469
|
|
|
473
470
|
try {
|
|
474
471
|
state = getStateFromPathRef.current(
|
|
@@ -531,14 +528,14 @@ export function useLinking<ParamList extends ParamListBase>(
|
|
|
531
528
|
|
|
532
529
|
const getPathForRoute = (
|
|
533
530
|
route: ReturnType<typeof findFocusedRoute>,
|
|
534
|
-
state:
|
|
531
|
+
state: NavigationState | PartialState<NavigationState>
|
|
535
532
|
): string => {
|
|
536
533
|
let path;
|
|
537
534
|
|
|
538
535
|
// If the `route` object contains a `path`, use that path as long as `route.name` and `params` still match
|
|
539
536
|
// This makes sure that we preserve the original URL for wildcard routes
|
|
540
537
|
if (route?.path) {
|
|
541
|
-
let stateForPath:
|
|
538
|
+
let stateForPath: PartialState<NavigationState> | undefined;
|
|
542
539
|
|
|
543
540
|
try {
|
|
544
541
|
stateForPath = getStateFromPathRef.current(
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
let location = new URL('', 'http://example.com');
|
|
4
|
-
let listeners = [];
|
|
5
|
-
let entries = [{
|
|
6
|
-
state: null,
|
|
7
|
-
href: location.href
|
|
8
|
-
}];
|
|
9
|
-
let index = 0;
|
|
10
|
-
let currentState = null;
|
|
11
|
-
const history = {
|
|
12
|
-
get state() {
|
|
13
|
-
return currentState;
|
|
14
|
-
},
|
|
15
|
-
pushState(state, _, path) {
|
|
16
|
-
location = new URL(path, location.origin);
|
|
17
|
-
currentState = state;
|
|
18
|
-
entries = entries.slice(0, index + 1);
|
|
19
|
-
entries.push({
|
|
20
|
-
state,
|
|
21
|
-
href: location.href
|
|
22
|
-
});
|
|
23
|
-
index = entries.length - 1;
|
|
24
|
-
},
|
|
25
|
-
replaceState(state, _, path) {
|
|
26
|
-
location = new URL(path, location.origin);
|
|
27
|
-
currentState = state;
|
|
28
|
-
entries[index] = {
|
|
29
|
-
state,
|
|
30
|
-
href: location.href
|
|
31
|
-
};
|
|
32
|
-
},
|
|
33
|
-
go(n) {
|
|
34
|
-
setTimeout(() => {
|
|
35
|
-
if (n > 0 && n < entries.length - index || n < 0 && Math.abs(n) <= index) {
|
|
36
|
-
index += n;
|
|
37
|
-
const entry = entries[index];
|
|
38
|
-
if (entry == null) {
|
|
39
|
-
throw new Error(`Couldn't find a history entry at index ${index}.`);
|
|
40
|
-
}
|
|
41
|
-
location = new URL(entry.href);
|
|
42
|
-
currentState = entry.state;
|
|
43
|
-
listeners.forEach(cb => cb());
|
|
44
|
-
}
|
|
45
|
-
}, 0);
|
|
46
|
-
},
|
|
47
|
-
back() {
|
|
48
|
-
this.go(-1);
|
|
49
|
-
},
|
|
50
|
-
forward() {
|
|
51
|
-
this.go(1);
|
|
52
|
-
}
|
|
53
|
-
};
|
|
54
|
-
const addEventListener = (type, listener) => {
|
|
55
|
-
if (type === 'popstate') {
|
|
56
|
-
listeners.push(listener);
|
|
57
|
-
}
|
|
58
|
-
};
|
|
59
|
-
const removeEventListener = (type, listener) => {
|
|
60
|
-
if (type === 'popstate') {
|
|
61
|
-
listeners = listeners.filter(cb => cb !== listener);
|
|
62
|
-
}
|
|
63
|
-
};
|
|
64
|
-
export const window = {
|
|
65
|
-
document: {
|
|
66
|
-
title: ''
|
|
67
|
-
},
|
|
68
|
-
get location() {
|
|
69
|
-
return location;
|
|
70
|
-
},
|
|
71
|
-
history,
|
|
72
|
-
addEventListener,
|
|
73
|
-
removeEventListener,
|
|
74
|
-
get window() {
|
|
75
|
-
return window;
|
|
76
|
-
}
|
|
77
|
-
};
|
|
78
|
-
//# sourceMappingURL=window.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["location","URL","listeners","entries","state","href","index","currentState","history","pushState","_","path","origin","slice","push","length","replaceState","go","n","setTimeout","Math","abs","entry","Error","forEach","cb","back","forward","addEventListener","type","listener","removeEventListener","filter","window","document","title"],"sourceRoot":"../../../src","sources":["__stubs__/window.tsx"],"mappings":";;AAAA,IAAIA,QAAQ,GAAG,IAAIC,GAAG,CAAC,EAAE,EAAE,oBAAoB,CAAC;AAEhD,IAAIC,SAAyB,GAAG,EAAE;AAClC,IAAIC,OAAO,GAAG,CAAC;EAAEC,KAAK,EAAE,IAAI;EAAEC,IAAI,EAAEL,QAAQ,CAACK;AAAK,CAAC,CAAC;AACpD,IAAIC,KAAK,GAAG,CAAC;AAEb,IAAIC,YAAiB,GAAG,IAAI;AAE5B,MAAMC,OAAO,GAAG;EACd,IAAIJ,KAAKA,CAAA,EAAG;IACV,OAAOG,YAAY;EACrB,CAAC;EAEDE,SAASA,CAACL,KAAU,EAAEM,CAAS,EAAEC,IAAY,EAAE;IAC7CX,QAAQ,GAAG,IAAIC,GAAG,CAACU,IAAI,EAAEX,QAAQ,CAACY,MAAM,CAAC;IAEzCL,YAAY,GAAGH,KAAK;IACpBD,OAAO,GAAGA,OAAO,CAACU,KAAK,CAAC,CAAC,EAAEP,KAAK,GAAG,CAAC,CAAC;IACrCH,OAAO,CAACW,IAAI,CAAC;MAAEV,KAAK;MAAEC,IAAI,EAAEL,QAAQ,CAACK;IAAK,CAAC,CAAC;IAC5CC,KAAK,GAAGH,OAAO,CAACY,MAAM,GAAG,CAAC;EAC5B,CAAC;EAEDC,YAAYA,CAACZ,KAAU,EAAEM,CAAS,EAAEC,IAAY,EAAE;IAChDX,QAAQ,GAAG,IAAIC,GAAG,CAACU,IAAI,EAAEX,QAAQ,CAACY,MAAM,CAAC;IAEzCL,YAAY,GAAGH,KAAK;IACpBD,OAAO,CAACG,KAAK,CAAC,GAAG;MAAEF,KAAK;MAAEC,IAAI,EAAEL,QAAQ,CAACK;IAAK,CAAC;EACjD,CAAC;EAEDY,EAAEA,CAACC,CAAS,EAAE;IACZC,UAAU,CAAC,MAAM;MACf,IACGD,CAAC,GAAG,CAAC,IAAIA,CAAC,GAAGf,OAAO,CAACY,MAAM,GAAGT,KAAK,IACnCY,CAAC,GAAG,CAAC,IAAIE,IAAI,CAACC,GAAG,CAACH,CAAC,CAAC,IAAIZ,KAAM,EAC/B;QACAA,KAAK,IAAIY,CAAC;QACV,MAAMI,KAAK,GAAGnB,OAAO,CAACG,KAAK,CAAC;QAE5B,IAAIgB,KAAK,IAAI,IAAI,EAAE;UACjB,MAAM,IAAIC,KAAK,CAAC,0CAA0CjB,KAAK,GAAG,CAAC;QACrE;QAEAN,QAAQ,GAAG,IAAIC,GAAG,CAACqB,KAAK,CAACjB,IAAI,CAAC;QAC9BE,YAAY,GAAGe,KAAK,CAAClB,KAAK;QAC1BF,SAAS,CAACsB,OAAO,CAAEC,EAAE,IAAKA,EAAE,CAAC,CAAC,CAAC;MACjC;IACF,CAAC,EAAE,CAAC,CAAC;EACP,CAAC;EAEDC,IAAIA,CAAA,EAAG;IACL,IAAI,CAACT,EAAE,CAAC,CAAC,CAAC,CAAC;EACb,CAAC;EAEDU,OAAOA,CAAA,EAAG;IACR,IAAI,CAACV,EAAE,CAAC,CAAC,CAAC;EACZ;AACF,CAAC;AAED,MAAMW,gBAAgB,GAAGA,CAACC,IAAgB,EAAEC,QAAoB,KAAK;EACnE,IAAID,IAAI,KAAK,UAAU,EAAE;IACvB3B,SAAS,CAACY,IAAI,CAACgB,QAAQ,CAAC;EAC1B;AACF,CAAC;AAED,MAAMC,mBAAmB,GAAGA,CAACF,IAAgB,EAAEC,QAAoB,KAAK;EACtE,IAAID,IAAI,KAAK,UAAU,EAAE;IACvB3B,SAAS,GAAGA,SAAS,CAAC8B,MAAM,CAAEP,EAAE,IAAKA,EAAE,KAAKK,QAAQ,CAAC;EACvD;AACF,CAAC;AAED,OAAO,MAAMG,MAAM,GAAG;EACpBC,QAAQ,EAAE;IAAEC,KAAK,EAAE;EAAG,CAAC;EACvB,IAAInC,QAAQA,CAAA,EAAG;IACb,OAAOA,QAAQ;EACjB,CAAC;EACDQ,OAAO;EACPoB,gBAAgB;EAChBG,mBAAmB;EACnB,IAAIE,MAAMA,CAAA,EAAG;IACX,OAAOA,MAAM;EACf;AACF,CAAC","ignoreList":[]}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
export declare const window: {
|
|
2
|
-
document: {
|
|
3
|
-
title: string;
|
|
4
|
-
};
|
|
5
|
-
readonly location: URL;
|
|
6
|
-
history: {
|
|
7
|
-
readonly state: any;
|
|
8
|
-
pushState(state: any, _: string, path: string): void;
|
|
9
|
-
replaceState(state: any, _: string, path: string): void;
|
|
10
|
-
go(n: number): void;
|
|
11
|
-
back(): void;
|
|
12
|
-
forward(): void;
|
|
13
|
-
};
|
|
14
|
-
addEventListener: (type: "popstate", listener: () => void) => void;
|
|
15
|
-
removeEventListener: (type: "popstate", listener: () => void) => void;
|
|
16
|
-
readonly window: /*elided*/ any;
|
|
17
|
-
};
|
|
18
|
-
//# sourceMappingURL=window.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"window.d.ts","sourceRoot":"","sources":["../../../../src/__stubs__/window.tsx"],"names":[],"mappings":"AAsEA,eAAO,MAAM,MAAM;;;;;;;yBAzDA,GAAG,KAAK,MAAM,QAAQ,MAAM;4BASzB,GAAG,KAAK,MAAM,QAAQ,MAAM;cAO1C,MAAM;;;;6BA6BkB,UAAU,YAAY,MAAM,IAAI;gCAM7B,UAAU,YAAY,MAAM,IAAI;;CAiBlE,CAAC"}
|