@react-navigation/elements 3.0.0-alpha.3 → 3.0.0-alpha.30
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/lib/module/ActivityView.js +90 -0
- package/lib/module/ActivityView.js.map +1 -0
- package/lib/module/ActivityView.native.js +67 -0
- package/lib/module/ActivityView.native.js.map +1 -0
- package/lib/module/Badge.js +5 -4
- package/lib/module/Badge.js.map +1 -1
- package/lib/module/Button.js +91 -13
- package/lib/module/Button.js.map +1 -1
- package/lib/module/Color.js +552 -4
- package/lib/module/Color.js.map +1 -1
- package/lib/module/Container.js +11 -1
- package/lib/module/Container.js.map +1 -1
- package/lib/module/Header/Header.js +26 -11
- package/lib/module/Header/Header.js.map +1 -1
- package/lib/module/Header/HeaderBackButton.js +27 -13
- package/lib/module/Header/HeaderBackButton.js.map +1 -1
- package/lib/module/Header/HeaderButton.js +4 -5
- package/lib/module/Header/HeaderButton.js.map +1 -1
- package/lib/module/Header/HeaderIcon.js +29 -10
- package/lib/module/Header/HeaderIcon.js.map +1 -1
- package/lib/module/Header/HeaderSearchBar.js +31 -24
- package/lib/module/Header/HeaderSearchBar.js.map +1 -1
- package/lib/module/Header/getHeaderTitle.js.map +1 -1
- package/lib/module/Header/useHeaderHeight.js +1 -1
- package/lib/module/Header/useHeaderHeight.js.map +1 -1
- package/lib/module/Label/getLabel.js.map +1 -1
- package/lib/module/PlatformColor.js +1 -0
- package/lib/module/PlatformColor.js.map +1 -1
- package/lib/module/PlatformColor.native.js +1 -1
- package/lib/module/PlatformColor.native.js.map +1 -1
- package/lib/module/PlatformPressable.js +14 -5
- package/lib/module/PlatformPressable.js.map +1 -1
- package/lib/module/SafeAreaProviderCompat.js +1 -1
- package/lib/module/SafeAreaProviderCompat.js.map +1 -1
- package/lib/module/Screen.js +31 -18
- package/lib/module/Screen.js.map +1 -1
- package/lib/module/index.js +1 -7
- package/lib/module/index.js.map +1 -1
- package/lib/module/internal.js +1 -1
- package/lib/module/internal.js.map +1 -1
- package/lib/module/useFrameSize.js +1 -1
- package/lib/module/useFrameSize.js.map +1 -1
- package/lib/typescript/src/ActivityView.d.ts +31 -0
- package/lib/typescript/src/ActivityView.d.ts.map +1 -0
- package/lib/typescript/src/ActivityView.native.d.ts +3 -0
- package/lib/typescript/src/ActivityView.native.d.ts.map +1 -0
- package/lib/typescript/src/Badge.d.ts +3 -3
- package/lib/typescript/src/Badge.d.ts.map +1 -1
- package/lib/typescript/src/Button.d.ts +35 -4
- package/lib/typescript/src/Button.d.ts.map +1 -1
- package/lib/typescript/src/Color.d.ts +4 -4
- package/lib/typescript/src/Color.d.ts.map +1 -1
- package/lib/typescript/src/Container.d.ts +7 -4
- package/lib/typescript/src/Container.d.ts.map +1 -1
- package/lib/typescript/src/Header/Header.d.ts +2 -2
- package/lib/typescript/src/Header/Header.d.ts.map +1 -1
- package/lib/typescript/src/Header/HeaderBackButton.d.ts +1 -1
- package/lib/typescript/src/Header/HeaderBackButton.d.ts.map +1 -1
- package/lib/typescript/src/Header/HeaderBackground.d.ts +3 -3
- package/lib/typescript/src/Header/HeaderBackground.d.ts.map +1 -1
- package/lib/typescript/src/Header/HeaderButton.d.ts +6 -1
- package/lib/typescript/src/Header/HeaderButton.d.ts.map +1 -1
- package/lib/typescript/src/Header/HeaderIcon.d.ts +8 -4
- package/lib/typescript/src/Header/HeaderIcon.d.ts.map +1 -1
- package/lib/typescript/src/Header/HeaderSearchBar.d.ts +9 -6
- package/lib/typescript/src/Header/HeaderSearchBar.d.ts.map +1 -1
- package/lib/typescript/src/Header/HeaderTitle.d.ts +3 -3
- package/lib/typescript/src/Header/HeaderTitle.d.ts.map +1 -1
- package/lib/typescript/src/Header/getHeaderTitle.d.ts +1 -1
- package/lib/typescript/src/Header/getHeaderTitle.d.ts.map +1 -1
- package/lib/typescript/src/Label/getLabel.d.ts +2 -2
- package/lib/typescript/src/Label/getLabel.d.ts.map +1 -1
- package/lib/typescript/src/PlatformColor.d.ts +1 -0
- package/lib/typescript/src/PlatformColor.d.ts.map +1 -1
- package/lib/typescript/src/PlatformColor.native.d.ts +1 -1
- package/lib/typescript/src/PlatformColor.native.d.ts.map +1 -1
- package/lib/typescript/src/PlatformPressable.d.ts +12 -15
- package/lib/typescript/src/PlatformPressable.d.ts.map +1 -1
- package/lib/typescript/src/Screen.d.ts +6 -6
- package/lib/typescript/src/Screen.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +1 -2
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/internal.d.ts +1 -1
- package/lib/typescript/src/internal.d.ts.map +1 -1
- package/lib/typescript/src/types.d.ts +119 -69
- package/lib/typescript/src/types.d.ts.map +1 -1
- package/package.json +20 -20
- package/src/ActivityView.native.tsx +90 -0
- package/src/ActivityView.tsx +129 -0
- package/src/Badge.tsx +9 -7
- package/src/Button.tsx +151 -14
- package/src/Color.tsx +726 -8
- package/src/Container.tsx +20 -4
- package/src/Header/Header.tsx +43 -20
- package/src/Header/HeaderBackButton.tsx +31 -17
- package/src/Header/HeaderBackground.tsx +3 -3
- package/src/Header/HeaderButton.tsx +16 -18
- package/src/Header/HeaderIcon.tsx +49 -9
- package/src/Header/HeaderSearchBar.tsx +50 -44
- package/src/Header/HeaderTitle.tsx +3 -3
- package/src/Header/getHeaderTitle.tsx +4 -1
- package/src/Header/useHeaderHeight.tsx +1 -1
- package/src/Label/getLabel.tsx +1 -1
- package/src/PlatformColor.native.tsx +1 -1
- package/src/PlatformColor.tsx +4 -0
- package/src/PlatformPressable.tsx +40 -29
- package/src/SafeAreaProviderCompat.tsx +1 -1
- package/src/Screen.tsx +40 -27
- package/src/index.tsx +1 -16
- package/src/internal.tsx +1 -1
- package/src/types.tsx +153 -76
- package/src/useFrameSize.tsx +1 -1
- package/lib/module/Lazy.js +0 -42
- package/lib/module/Lazy.js.map +0 -1
- package/lib/module/assets/back-icon.ios.svg +0 -4
- package/lib/module/assets/back-icon@1x.android.png +0 -0
- package/lib/module/assets/back-icon@1x.ios.png +0 -0
- package/lib/module/assets/back-icon@2x.android.png +0 -0
- package/lib/module/assets/back-icon@2x.ios.png +0 -0
- package/lib/module/assets/back-icon@3x.android.png +0 -0
- package/lib/module/assets/back-icon@3x.ios.png +0 -0
- package/lib/module/assets/back-icon@4x.android.png +0 -0
- package/lib/module/assets/back-icon@4x.ios.png +0 -0
- package/lib/module/assets/clear-icon@1x.png +0 -0
- package/lib/module/assets/clear-icon@2x.png +0 -0
- package/lib/module/assets/clear-icon@3x.png +0 -0
- package/lib/module/assets/clear-icon@4x.png +0 -0
- package/lib/module/assets/close-icon@1x.png +0 -0
- package/lib/module/assets/close-icon@2x.png +0 -0
- package/lib/module/assets/close-icon@3x.png +0 -0
- package/lib/module/assets/close-icon@4x.png +0 -0
- package/lib/module/assets/search-icon-legacy@1x.ios.png +0 -0
- package/lib/module/assets/search-icon-legacy@2x.ios.png +0 -0
- package/lib/module/assets/search-icon-legacy@3x.ios.png +0 -0
- package/lib/module/assets/search-icon-legacy@4x.ios.png +0 -0
- package/lib/module/assets/search-icon.ios.svg +0 -4
- package/lib/module/assets/search-icon@1x.android.png +0 -0
- package/lib/module/assets/search-icon@1x.ios.png +0 -0
- package/lib/module/assets/search-icon@2x.android.png +0 -0
- package/lib/module/assets/search-icon@2x.ios.png +0 -0
- package/lib/module/assets/search-icon@3x.android.png +0 -0
- package/lib/module/assets/search-icon@3x.ios.png +0 -0
- package/lib/module/assets/search-icon@4x.android.png +0 -0
- package/lib/module/assets/search-icon@4x.ios.png +0 -0
- package/lib/typescript/src/Lazy.d.ts +0 -31
- package/lib/typescript/src/Lazy.d.ts.map +0 -1
- package/src/Lazy.tsx +0 -59
- package/src/assets/back-icon.ios.svg +0 -4
- package/src/assets/back-icon@1x.android.png +0 -0
- package/src/assets/back-icon@1x.ios.png +0 -0
- package/src/assets/back-icon@2x.android.png +0 -0
- package/src/assets/back-icon@2x.ios.png +0 -0
- package/src/assets/back-icon@3x.android.png +0 -0
- package/src/assets/back-icon@3x.ios.png +0 -0
- package/src/assets/back-icon@4x.android.png +0 -0
- package/src/assets/back-icon@4x.ios.png +0 -0
- package/src/assets/clear-icon@1x.png +0 -0
- package/src/assets/clear-icon@2x.png +0 -0
- package/src/assets/clear-icon@3x.png +0 -0
- package/src/assets/clear-icon@4x.png +0 -0
- package/src/assets/close-icon@1x.png +0 -0
- package/src/assets/close-icon@2x.png +0 -0
- package/src/assets/close-icon@3x.png +0 -0
- package/src/assets/close-icon@4x.png +0 -0
- package/src/assets/search-icon-legacy@1x.ios.png +0 -0
- package/src/assets/search-icon-legacy@2x.ios.png +0 -0
- package/src/assets/search-icon-legacy@3x.ios.png +0 -0
- package/src/assets/search-icon-legacy@4x.ios.png +0 -0
- package/src/assets/search-icon.ios.svg +0 -4
- package/src/assets/search-icon@1x.android.png +0 -0
- package/src/assets/search-icon@1x.ios.png +0 -0
- package/src/assets/search-icon@2x.android.png +0 -0
- package/src/assets/search-icon@2x.ios.png +0 -0
- package/src/assets/search-icon@3x.android.png +0 -0
- package/src/assets/search-icon@3x.ios.png +0 -0
- package/src/assets/search-icon@4x.android.png +0 -0
- package/src/assets/search-icon@4x.ios.png +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,QAAQ,EACR,UAAU,EACV,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-navigation/elements",
|
|
3
3
|
"description": "UI Components for React Navigation",
|
|
4
|
-
"version": "3.0.0-alpha.
|
|
4
|
+
"version": "3.0.0-alpha.30",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
7
7
|
"react-navigation",
|
|
@@ -47,32 +47,32 @@
|
|
|
47
47
|
"clean": "del lib"
|
|
48
48
|
},
|
|
49
49
|
"dependencies": {
|
|
50
|
-
"
|
|
51
|
-
"use-latest-callback": "^0.3.
|
|
52
|
-
"use-sync-external-store": "^1.
|
|
50
|
+
"sf-symbols-typescript": "^2.2.0",
|
|
51
|
+
"use-latest-callback": "^0.3.3",
|
|
52
|
+
"use-sync-external-store": "^1.6.0"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
|
-
"@callstack/liquid-glass": "^0.
|
|
56
|
-
"@jest/globals": "^30.
|
|
57
|
-
"@react-navigation/native": "^8.0.0-alpha.
|
|
58
|
-
"@testing-library/react-native": "^13.
|
|
59
|
-
"@types/react": "~19.
|
|
55
|
+
"@callstack/liquid-glass": "^0.7.1",
|
|
56
|
+
"@jest/globals": "^30.3.0",
|
|
57
|
+
"@react-navigation/native": "^8.0.0-alpha.27",
|
|
58
|
+
"@testing-library/react-native": "^13.3.3",
|
|
59
|
+
"@types/react": "~19.2.2",
|
|
60
60
|
"@types/use-sync-external-store": "^1.5.0",
|
|
61
|
-
"del-cli": "^
|
|
62
|
-
"react": "19.
|
|
63
|
-
"react-native": "0.
|
|
64
|
-
"react-native-builder-bob": "^0.
|
|
65
|
-
"react-native-screens": "^4.
|
|
66
|
-
"react-test-renderer": "19.
|
|
67
|
-
"typescript": "^
|
|
61
|
+
"del-cli": "^7.0.0",
|
|
62
|
+
"react": "19.2.0",
|
|
63
|
+
"react-native": "0.83.4",
|
|
64
|
+
"react-native-builder-bob": "^0.41.0",
|
|
65
|
+
"react-native-screens": "^4.25.0",
|
|
66
|
+
"react-test-renderer": "19.2.0",
|
|
67
|
+
"typescript": "^6.0.2"
|
|
68
68
|
},
|
|
69
69
|
"peerDependencies": {
|
|
70
70
|
"@callstack/liquid-glass": ">= 0.6.0",
|
|
71
|
-
"@react-navigation/native": "^8.0.0-alpha.
|
|
72
|
-
"react": ">= 19.
|
|
71
|
+
"@react-navigation/native": "^8.0.0-alpha.27",
|
|
72
|
+
"react": ">= 19.2.0",
|
|
73
73
|
"react-native": "*",
|
|
74
74
|
"react-native-safe-area-context": ">= 5.5.0",
|
|
75
|
-
"react-native-screens": ">= 4.
|
|
75
|
+
"react-native-screens": ">= 4.25.0"
|
|
76
76
|
},
|
|
77
77
|
"react-native-builder-bob": {
|
|
78
78
|
"source": "src",
|
|
@@ -92,5 +92,5 @@
|
|
|
92
92
|
]
|
|
93
93
|
]
|
|
94
94
|
},
|
|
95
|
-
"gitHead": "
|
|
95
|
+
"gitHead": "b7aefd9b75d991723412d30505221d00debf3665"
|
|
96
96
|
}
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import { Activity, useEffect, useState } from 'react';
|
|
2
|
+
import {
|
|
3
|
+
type HostComponent,
|
|
4
|
+
NativeComponentRegistry,
|
|
5
|
+
type ViewProps,
|
|
6
|
+
} from 'react-native';
|
|
7
|
+
|
|
8
|
+
// eslint-disable-next-line import-x/extensions
|
|
9
|
+
import type { Props } from './ActivityView.tsx';
|
|
10
|
+
import { Container } from './Container';
|
|
11
|
+
|
|
12
|
+
export function ActivityView({
|
|
13
|
+
mode,
|
|
14
|
+
visible,
|
|
15
|
+
delay = 500,
|
|
16
|
+
style,
|
|
17
|
+
children,
|
|
18
|
+
}: Props) {
|
|
19
|
+
const [delayedMode, setDelayedMode] = useState(mode);
|
|
20
|
+
|
|
21
|
+
useEffect(() => {
|
|
22
|
+
if (!delay) {
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
const timer = setTimeout(() => {
|
|
27
|
+
setDelayedMode(mode);
|
|
28
|
+
}, delay);
|
|
29
|
+
|
|
30
|
+
return () => clearTimeout(timer);
|
|
31
|
+
}, [delay, mode]);
|
|
32
|
+
|
|
33
|
+
const display = visible ? 'flex' : 'none';
|
|
34
|
+
const activityMode =
|
|
35
|
+
mode !== 'paused' || (delay && delayedMode !== 'paused')
|
|
36
|
+
? 'visible'
|
|
37
|
+
: 'hidden';
|
|
38
|
+
|
|
39
|
+
return (
|
|
40
|
+
<Activity mode={activityMode}>
|
|
41
|
+
<ActivityContentView style={{ display: 'contents' }}>
|
|
42
|
+
<Container
|
|
43
|
+
inert={mode !== 'normal'}
|
|
44
|
+
style={{
|
|
45
|
+
...style,
|
|
46
|
+
/**
|
|
47
|
+
* The visibility of the nested view is controlled by `Activity`
|
|
48
|
+
* It'll be overridden to `display: 'none'` when `mode="hidden"` regardless of what we set
|
|
49
|
+
* So we set the visibility on another view instead
|
|
50
|
+
*/
|
|
51
|
+
display,
|
|
52
|
+
}}
|
|
53
|
+
>
|
|
54
|
+
{children}
|
|
55
|
+
</Container>
|
|
56
|
+
</ActivityContentView>
|
|
57
|
+
</Activity>
|
|
58
|
+
);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
const STYLE: Record<string, true | { process?: (arg1: any) => any }> = {
|
|
62
|
+
display: {
|
|
63
|
+
/**
|
|
64
|
+
* React `Activity` sets `display: 'none'` when `mode="hidden"` to unmount effects
|
|
65
|
+
* But we want to keep the content visible, so we switch it to `display: 'contents'`
|
|
66
|
+
*/
|
|
67
|
+
process: () => 'contents',
|
|
68
|
+
},
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
const VIEW_CONFIG = {
|
|
72
|
+
uiViewClassName: 'RCTView',
|
|
73
|
+
validAttributes: {
|
|
74
|
+
style: STYLE,
|
|
75
|
+
},
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
type ActivityContentViewProps = Omit<ViewProps, 'style'> & {
|
|
79
|
+
style?:
|
|
80
|
+
| {
|
|
81
|
+
display?: 'contents' | undefined;
|
|
82
|
+
}
|
|
83
|
+
| undefined;
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
const ActivityContentView: HostComponent<ActivityContentViewProps> =
|
|
87
|
+
NativeComponentRegistry.get<ActivityContentViewProps>(
|
|
88
|
+
'ReactNavigationActivityContentView',
|
|
89
|
+
() => VIEW_CONFIG
|
|
90
|
+
);
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
import { Activity, useCallback, useEffect, useState } from 'react';
|
|
2
|
+
import { Platform, View, type ViewStyle } from 'react-native';
|
|
3
|
+
|
|
4
|
+
import { Container } from './Container';
|
|
5
|
+
|
|
6
|
+
export type Props = {
|
|
7
|
+
/**
|
|
8
|
+
* Mode of the activity view
|
|
9
|
+
* - `normal`: The view renders normally
|
|
10
|
+
* - `inert`: Content is not interactive
|
|
11
|
+
* - `paused`: Effects are unmounted and content is not interactive
|
|
12
|
+
*/
|
|
13
|
+
mode: 'normal' | 'inert' | 'paused';
|
|
14
|
+
/**
|
|
15
|
+
* Whether the content is visible or not
|
|
16
|
+
*/
|
|
17
|
+
visible: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Delay before pausing effects.
|
|
20
|
+
* So pending animations have time to finish.
|
|
21
|
+
*
|
|
22
|
+
* Defaults to 500ms.
|
|
23
|
+
*/
|
|
24
|
+
delay?: number | undefined;
|
|
25
|
+
/**
|
|
26
|
+
* The style for the container view
|
|
27
|
+
*/
|
|
28
|
+
style?: Omit<React.CSSProperties & ViewStyle, 'display'> | undefined;
|
|
29
|
+
/**
|
|
30
|
+
* The content of the activity view
|
|
31
|
+
*/
|
|
32
|
+
children: React.ReactNode;
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
export function ActivityView({
|
|
36
|
+
mode,
|
|
37
|
+
visible,
|
|
38
|
+
delay = 500,
|
|
39
|
+
style,
|
|
40
|
+
children,
|
|
41
|
+
}: Props) {
|
|
42
|
+
const [delayedMode, setDelayedMode] = useState(mode);
|
|
43
|
+
|
|
44
|
+
useEffect(() => {
|
|
45
|
+
if (!delay) {
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
const timer = setTimeout(() => {
|
|
50
|
+
setDelayedMode(mode);
|
|
51
|
+
}, delay);
|
|
52
|
+
|
|
53
|
+
return () => clearTimeout(timer);
|
|
54
|
+
}, [delay, mode]);
|
|
55
|
+
|
|
56
|
+
const display = visible ? 'flex' : 'none';
|
|
57
|
+
const activityMode =
|
|
58
|
+
mode !== 'paused' || (delay && delayedMode !== 'paused')
|
|
59
|
+
? 'visible'
|
|
60
|
+
: 'hidden';
|
|
61
|
+
|
|
62
|
+
/**
|
|
63
|
+
* Activity has 2 modes, visible and hidden - hidden unmounts effects
|
|
64
|
+
* But what we want is to unmount effects, without hiding content
|
|
65
|
+
* So we use hidden mode, but unset display: none to make content visible
|
|
66
|
+
*/
|
|
67
|
+
const onRef = useCallback(
|
|
68
|
+
(node: HTMLDivElement | View | null) => {
|
|
69
|
+
if (Platform.OS !== 'web' || !(node && node instanceof HTMLElement)) {
|
|
70
|
+
return;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
const observers: MutationObserver[] = [];
|
|
74
|
+
|
|
75
|
+
const observe = () => {
|
|
76
|
+
// Remove previous observers
|
|
77
|
+
observers.forEach((o) => o.disconnect());
|
|
78
|
+
observers.length = 0;
|
|
79
|
+
|
|
80
|
+
const children = node.childNodes;
|
|
81
|
+
|
|
82
|
+
// When the style attribute for children is updated by React
|
|
83
|
+
// We observe it and update display to make content visible
|
|
84
|
+
children.forEach((child) => {
|
|
85
|
+
if (child instanceof HTMLElement) {
|
|
86
|
+
child.style.display = display;
|
|
87
|
+
|
|
88
|
+
const o = new MutationObserver(() => {
|
|
89
|
+
child.style.display = display;
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
o.observe(child, {
|
|
93
|
+
attributes: true,
|
|
94
|
+
attributeFilter: ['style'],
|
|
95
|
+
});
|
|
96
|
+
|
|
97
|
+
observers.push(o);
|
|
98
|
+
}
|
|
99
|
+
});
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
observe();
|
|
103
|
+
|
|
104
|
+
// React removes refs when `Activity` is hidden
|
|
105
|
+
// So we render outside of the `Activity` and observer child list
|
|
106
|
+
const observer = new MutationObserver(observe);
|
|
107
|
+
|
|
108
|
+
observer.observe(node, {
|
|
109
|
+
childList: true,
|
|
110
|
+
});
|
|
111
|
+
|
|
112
|
+
return () => {
|
|
113
|
+
observer.disconnect();
|
|
114
|
+
observers.forEach((o) => o.disconnect());
|
|
115
|
+
};
|
|
116
|
+
},
|
|
117
|
+
[display]
|
|
118
|
+
);
|
|
119
|
+
|
|
120
|
+
return (
|
|
121
|
+
<Container ref={onRef} style={{ display: 'contents' }}>
|
|
122
|
+
<Activity mode={activityMode}>
|
|
123
|
+
<Container inert={mode !== 'normal'} style={{ ...style, display }}>
|
|
124
|
+
{children}
|
|
125
|
+
</Container>
|
|
126
|
+
</Activity>
|
|
127
|
+
</Container>
|
|
128
|
+
);
|
|
129
|
+
}
|
package/src/Badge.tsx
CHANGED
|
@@ -19,15 +19,15 @@ type Props = TextProps & {
|
|
|
19
19
|
/**
|
|
20
20
|
* Content of the `Badge`.
|
|
21
21
|
*/
|
|
22
|
-
children?: string | number;
|
|
22
|
+
children?: string | number | undefined;
|
|
23
23
|
/**
|
|
24
24
|
* Size of the `Badge`.
|
|
25
25
|
*/
|
|
26
|
-
size?: number;
|
|
26
|
+
size?: number | undefined;
|
|
27
27
|
/**
|
|
28
28
|
* Style object for the tab bar container.
|
|
29
29
|
*/
|
|
30
|
-
style?: Animated.WithAnimatedValue<StyleProp<TextStyle
|
|
30
|
+
style?: Animated.WithAnimatedValue<StyleProp<TextStyle>> | undefined;
|
|
31
31
|
};
|
|
32
32
|
|
|
33
33
|
const useNativeDriver = Platform.OS !== 'web';
|
|
@@ -49,17 +49,19 @@ export function Badge({
|
|
|
49
49
|
return;
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
-
Animated.timing(opacity, {
|
|
52
|
+
const animation = Animated.timing(opacity, {
|
|
53
53
|
toValue: visible ? 1 : 0,
|
|
54
54
|
duration: 150,
|
|
55
55
|
useNativeDriver,
|
|
56
|
-
})
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
animation.start(({ finished }) => {
|
|
57
59
|
if (finished && !visible) {
|
|
58
60
|
setRendered(false);
|
|
59
61
|
}
|
|
60
62
|
});
|
|
61
63
|
|
|
62
|
-
return () =>
|
|
64
|
+
return () => animation.stop();
|
|
63
65
|
}, [opacity, rendered, visible]);
|
|
64
66
|
|
|
65
67
|
if (!rendered) {
|
|
@@ -73,7 +75,7 @@ export function Badge({
|
|
|
73
75
|
// @ts-expect-error: backgroundColor definitely exists
|
|
74
76
|
const { backgroundColor = colors.notification, ...restStyle } =
|
|
75
77
|
StyleSheet.flatten(style) || {};
|
|
76
|
-
const textColor = Color(backgroundColor)
|
|
78
|
+
const textColor = Color.foreground(backgroundColor);
|
|
77
79
|
|
|
78
80
|
const borderRadius = size / 2;
|
|
79
81
|
const fontSize = Math.floor((size * 3) / 4);
|
package/src/Button.tsx
CHANGED
|
@@ -1,11 +1,19 @@
|
|
|
1
1
|
import {
|
|
2
2
|
type LinkProps,
|
|
3
|
+
MaterialSymbol,
|
|
3
4
|
type RootParamList,
|
|
5
|
+
SFSymbol,
|
|
4
6
|
useLinkProps,
|
|
5
7
|
useTheme,
|
|
6
8
|
} from '@react-navigation/native';
|
|
7
9
|
import * as React from 'react';
|
|
8
|
-
import {
|
|
10
|
+
import {
|
|
11
|
+
type ColorValue,
|
|
12
|
+
Image,
|
|
13
|
+
Platform,
|
|
14
|
+
StyleSheet,
|
|
15
|
+
View,
|
|
16
|
+
} from 'react-native';
|
|
9
17
|
|
|
10
18
|
import { Color } from './Color';
|
|
11
19
|
import {
|
|
@@ -13,19 +21,51 @@ import {
|
|
|
13
21
|
type Props as PlatformPressableProps,
|
|
14
22
|
} from './PlatformPressable';
|
|
15
23
|
import { Text } from './Text';
|
|
24
|
+
import type { Icon } from './types';
|
|
16
25
|
|
|
17
26
|
type ButtonBaseProps = Omit<PlatformPressableProps, 'children'> & {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
27
|
+
/**
|
|
28
|
+
* Variant of the button.
|
|
29
|
+
*
|
|
30
|
+
* - `plain`: transparent background, colored text
|
|
31
|
+
* - `tinted`: lightly tinted background, colored text
|
|
32
|
+
* - `filled`: colored background, contrasting text color
|
|
33
|
+
*
|
|
34
|
+
* @default 'tinted'
|
|
35
|
+
*/
|
|
36
|
+
variant?: 'plain' | 'tinted' | 'filled' | undefined;
|
|
37
|
+
/**
|
|
38
|
+
* Custom color for the button.
|
|
39
|
+
* Changes the text color for `plain` and `tinted` variants,
|
|
40
|
+
* and background color for `filled` variant.
|
|
41
|
+
*/
|
|
42
|
+
color?: ColorValue | undefined;
|
|
43
|
+
/**
|
|
44
|
+
* Icon to display before the label.
|
|
45
|
+
*
|
|
46
|
+
* Supported types:
|
|
47
|
+
* - image: custom image source
|
|
48
|
+
* - sfSymbol: SF Symbol icon (iOS only)
|
|
49
|
+
* - materialSymbol: material symbol icon (Android only)
|
|
50
|
+
* - React Node: function that returns a React Element
|
|
51
|
+
*/
|
|
52
|
+
icon?:
|
|
53
|
+
| Icon
|
|
54
|
+
| ((props: { color: ColorValue; size: number }) => Icon | React.ReactNode)
|
|
55
|
+
| undefined;
|
|
56
|
+
/**
|
|
57
|
+
* Label text to display inside the button.
|
|
58
|
+
*/
|
|
59
|
+
children: string | string[] | React.ReactElement | React.ReactElement[];
|
|
21
60
|
};
|
|
22
61
|
|
|
23
62
|
type ButtonLinkProps<
|
|
24
63
|
ParamList extends {} = RootParamList,
|
|
25
64
|
RouteName extends keyof ParamList = keyof ParamList,
|
|
26
|
-
> = LinkProps<ParamList, RouteName> &
|
|
65
|
+
> = LinkProps<ParamList, RouteName> & ButtonBaseProps;
|
|
27
66
|
|
|
28
67
|
const BUTTON_RADIUS = 40;
|
|
68
|
+
const ICON_SIZE = 14;
|
|
29
69
|
|
|
30
70
|
export function Button<
|
|
31
71
|
ParamList extends {} = RootParamList,
|
|
@@ -54,18 +94,30 @@ function ButtonLink<
|
|
|
54
94
|
params,
|
|
55
95
|
action,
|
|
56
96
|
href,
|
|
97
|
+
onPress,
|
|
57
98
|
...rest
|
|
58
99
|
}: ButtonLinkProps<ParamList, RouteName>) {
|
|
59
100
|
// @ts-expect-error: This is already type-checked by the prop types
|
|
60
101
|
const props = useLinkProps({ screen, params, action, href });
|
|
61
102
|
|
|
62
|
-
return
|
|
103
|
+
return (
|
|
104
|
+
<ButtonBase
|
|
105
|
+
{...rest}
|
|
106
|
+
{...props}
|
|
107
|
+
onPress={(e) => {
|
|
108
|
+
onPress?.(e);
|
|
109
|
+
props.onPress?.(e);
|
|
110
|
+
}}
|
|
111
|
+
/>
|
|
112
|
+
);
|
|
63
113
|
}
|
|
64
114
|
|
|
65
115
|
function ButtonBase({
|
|
66
116
|
variant = 'tinted',
|
|
67
117
|
color: customColor,
|
|
118
|
+
icon,
|
|
68
119
|
android_ripple,
|
|
120
|
+
disabled,
|
|
69
121
|
style,
|
|
70
122
|
children,
|
|
71
123
|
...rest
|
|
@@ -90,18 +142,35 @@ function ButtonBase({
|
|
|
90
142
|
break;
|
|
91
143
|
case 'filled':
|
|
92
144
|
backgroundColor = color;
|
|
93
|
-
textColor = Color(
|
|
94
|
-
? 'white'
|
|
95
|
-
: (Color(color)?.darken(0.71).string() ?? '#fff');
|
|
145
|
+
textColor = Color.foreground(backgroundColor);
|
|
96
146
|
break;
|
|
97
147
|
}
|
|
98
148
|
|
|
149
|
+
if (disabled) {
|
|
150
|
+
textColor = dark ? 'rgba(235, 235, 245, 0.3)' : 'rgba(60, 60, 67, 0.3)';
|
|
151
|
+
|
|
152
|
+
if (variant !== 'plain') {
|
|
153
|
+
backgroundColor = dark
|
|
154
|
+
? 'rgba(118, 118, 128, 0.24)'
|
|
155
|
+
: 'rgba(118, 118, 128, 0.12)';
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
const rippleColor =
|
|
160
|
+
Color(textColor)?.fade(0.88).string() ??
|
|
161
|
+
(variant === 'filled' || dark
|
|
162
|
+
? 'rgba(255, 255, 255, 0.12)'
|
|
163
|
+
: 'rgba(0, 0, 0, 0.12)');
|
|
164
|
+
|
|
165
|
+
const iconNode = renderIcon(icon, textColor, ICON_SIZE);
|
|
166
|
+
|
|
99
167
|
return (
|
|
100
168
|
<PlatformPressable
|
|
101
169
|
{...rest}
|
|
170
|
+
disabled={disabled}
|
|
102
171
|
android_ripple={{
|
|
103
|
-
|
|
104
|
-
color:
|
|
172
|
+
foreground: true,
|
|
173
|
+
color: rippleColor,
|
|
105
174
|
...android_ripple,
|
|
106
175
|
}}
|
|
107
176
|
pressOpacity={Platform.OS === 'ios' ? undefined : 1}
|
|
@@ -110,19 +179,87 @@ function ButtonBase({
|
|
|
110
179
|
}
|
|
111
180
|
style={[{ backgroundColor }, styles.button, style]}
|
|
112
181
|
>
|
|
113
|
-
<
|
|
114
|
-
{
|
|
115
|
-
|
|
182
|
+
<View style={styles.content}>
|
|
183
|
+
{iconNode && <View style={styles.icon}>{iconNode}</View>}
|
|
184
|
+
<Text style={[{ color: textColor }, fonts.regular, styles.text]}>
|
|
185
|
+
{children}
|
|
186
|
+
</Text>
|
|
187
|
+
</View>
|
|
116
188
|
</PlatformPressable>
|
|
117
189
|
);
|
|
118
190
|
}
|
|
119
191
|
|
|
192
|
+
function renderIcon(
|
|
193
|
+
icon: ButtonBaseProps['icon'],
|
|
194
|
+
color: ColorValue,
|
|
195
|
+
size: number
|
|
196
|
+
) {
|
|
197
|
+
if (!icon) {
|
|
198
|
+
return null;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
const iconValue = typeof icon === 'function' ? icon({ color, size }) : icon;
|
|
202
|
+
|
|
203
|
+
if (React.isValidElement(iconValue)) {
|
|
204
|
+
return iconValue;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
if (
|
|
208
|
+
typeof iconValue === 'object' &&
|
|
209
|
+
iconValue != null &&
|
|
210
|
+
'type' in iconValue
|
|
211
|
+
) {
|
|
212
|
+
switch (iconValue.type) {
|
|
213
|
+
case 'image':
|
|
214
|
+
return (
|
|
215
|
+
<Image
|
|
216
|
+
source={iconValue.source}
|
|
217
|
+
style={{
|
|
218
|
+
width: size,
|
|
219
|
+
height: size,
|
|
220
|
+
tintColor: iconValue.tinted === false ? undefined : color,
|
|
221
|
+
}}
|
|
222
|
+
/>
|
|
223
|
+
);
|
|
224
|
+
case 'sfSymbol':
|
|
225
|
+
return <SFSymbol name={iconValue.name} size={size} color={color} />;
|
|
226
|
+
case 'materialSymbol':
|
|
227
|
+
return (
|
|
228
|
+
<MaterialSymbol
|
|
229
|
+
name={iconValue.name}
|
|
230
|
+
variant={iconValue.variant}
|
|
231
|
+
weight={iconValue.weight}
|
|
232
|
+
size={size}
|
|
233
|
+
color={color}
|
|
234
|
+
/>
|
|
235
|
+
);
|
|
236
|
+
default: {
|
|
237
|
+
const _exhaustiveCheck: never = iconValue;
|
|
238
|
+
|
|
239
|
+
return _exhaustiveCheck;
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
return null;
|
|
245
|
+
}
|
|
246
|
+
|
|
120
247
|
const styles = StyleSheet.create({
|
|
121
248
|
button: {
|
|
122
249
|
paddingHorizontal: 24,
|
|
123
250
|
paddingVertical: 10,
|
|
124
251
|
borderRadius: BUTTON_RADIUS,
|
|
125
252
|
borderCurve: 'continuous',
|
|
253
|
+
overflow: 'hidden',
|
|
254
|
+
},
|
|
255
|
+
content: {
|
|
256
|
+
flexDirection: 'row',
|
|
257
|
+
alignItems: 'center',
|
|
258
|
+
justifyContent: 'center',
|
|
259
|
+
gap: 8,
|
|
260
|
+
},
|
|
261
|
+
icon: {
|
|
262
|
+
marginLeft: -6,
|
|
126
263
|
},
|
|
127
264
|
text: {
|
|
128
265
|
fontSize: 14,
|