@react-navigation/elements 2.0.0-rc.1 → 2.0.0-rc.2
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/commonjs/Button.js +43 -1
- package/lib/commonjs/Button.js.map +1 -1
- package/lib/module/Button.js +44 -2
- package/lib/module/Button.js.map +1 -1
- package/lib/typescript/src/Button.d.ts +5 -4
- package/lib/typescript/src/Button.d.ts.map +1 -1
- package/package.json +4 -4
- package/src/Button.tsx +66 -8
package/lib/commonjs/Button.js
CHANGED
|
@@ -17,6 +17,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
|
|
|
17
17
|
const BUTTON_RADIUS = 40;
|
|
18
18
|
function Button(props) {
|
|
19
19
|
if ('screen' in props || 'action' in props) {
|
|
20
|
+
// @ts-expect-error: This is already type-checked by the prop types
|
|
20
21
|
return /*#__PURE__*/React.createElement(ButtonLink, props);
|
|
21
22
|
} else {
|
|
22
23
|
return /*#__PURE__*/React.createElement(ButtonBase, props);
|
|
@@ -68,6 +69,7 @@ function ButtonBase({
|
|
|
68
69
|
break;
|
|
69
70
|
}
|
|
70
71
|
return /*#__PURE__*/React.createElement(_PlatformPressable.PlatformPressable, _extends({}, rest, {
|
|
72
|
+
pressOpacity: _reactNative.Platform.OS === 'ios' ? undefined : 1,
|
|
71
73
|
style: [{
|
|
72
74
|
backgroundColor
|
|
73
75
|
}, styles.button, style],
|
|
@@ -76,12 +78,52 @@ function ButtonBase({
|
|
|
76
78
|
color: (0, _color.default)(textColor).fade(0.85).string(),
|
|
77
79
|
...android_ripple
|
|
78
80
|
}
|
|
79
|
-
}), /*#__PURE__*/React.createElement(
|
|
81
|
+
}), _reactNative.Platform.OS === 'web' ? /*#__PURE__*/React.createElement(HoverEffect, {
|
|
82
|
+
color: textColor
|
|
83
|
+
}) : null, /*#__PURE__*/React.createElement(_Text.Text, {
|
|
80
84
|
style: [{
|
|
81
85
|
color: textColor
|
|
82
86
|
}, fonts.regular, styles.text]
|
|
83
87
|
}, children));
|
|
84
88
|
}
|
|
89
|
+
const CLASS_NAME = '__react-navigation_elements_Button_hover';
|
|
90
|
+
const css = String.raw;
|
|
91
|
+
const cssText = css`
|
|
92
|
+
.${CLASS_NAME} {
|
|
93
|
+
position: absolute;
|
|
94
|
+
top: 0;
|
|
95
|
+
left: 0;
|
|
96
|
+
right: 0;
|
|
97
|
+
bottom: 0;
|
|
98
|
+
border-radius: ${BUTTON_RADIUS}px;
|
|
99
|
+
pointer-events: none;
|
|
100
|
+
opacity: 0;
|
|
101
|
+
transition: opacity 0.15s;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
button:hover > .${CLASS_NAME} {
|
|
105
|
+
opacity: 0.08;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
button:active > .${CLASS_NAME} {
|
|
109
|
+
opacity: 0.15;
|
|
110
|
+
}
|
|
111
|
+
`;
|
|
112
|
+
const HoverEffect = ({
|
|
113
|
+
color
|
|
114
|
+
}) => {
|
|
115
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", {
|
|
116
|
+
// eslint-disable-next-line react/no-danger
|
|
117
|
+
dangerouslySetInnerHTML: {
|
|
118
|
+
__html: cssText
|
|
119
|
+
}
|
|
120
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
121
|
+
className: CLASS_NAME,
|
|
122
|
+
style: {
|
|
123
|
+
backgroundColor: color
|
|
124
|
+
}
|
|
125
|
+
}));
|
|
126
|
+
};
|
|
85
127
|
const styles = _reactNative.StyleSheet.create({
|
|
86
128
|
button: {
|
|
87
129
|
paddingHorizontal: 24,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_native","require","_color","_interopRequireDefault","React","_interopRequireWildcard","_reactNative","_PlatformPressable","_Text","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","BUTTON_RADIUS","Button","props","createElement","ButtonLink","ButtonBase","screen","params","action","href","rest","useLinkProps","variant","color","customColor","android_ripple","style","children","colors","fonts","useTheme","primary","backgroundColor","textColor","Color","fade","string","isDark","darken","PlatformPressable","styles","button","radius","Text","regular","text","StyleSheet","create","paddingHorizontal","paddingVertical","borderRadius","fontSize","lineHeight","letterSpacing","textAlign"],"sourceRoot":"../../src","sources":["Button.tsx"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;
|
|
1
|
+
{"version":3,"names":["_native","require","_color","_interopRequireDefault","React","_interopRequireWildcard","_reactNative","_PlatformPressable","_Text","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","BUTTON_RADIUS","Button","props","createElement","ButtonLink","ButtonBase","screen","params","action","href","rest","useLinkProps","variant","color","customColor","android_ripple","style","children","colors","fonts","useTheme","primary","backgroundColor","textColor","Color","fade","string","isDark","darken","PlatformPressable","pressOpacity","Platform","OS","undefined","styles","button","radius","HoverEffect","Text","regular","text","CLASS_NAME","css","String","raw","cssText","Fragment","dangerouslySetInnerHTML","__html","className","StyleSheet","create","paddingHorizontal","paddingVertical","borderRadius","fontSize","lineHeight","letterSpacing","textAlign"],"sourceRoot":"../../src","sources":["Button.tsx"],"mappings":"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","ignoreList":[]}
|
package/lib/module/Button.js
CHANGED
|
@@ -2,12 +2,13 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
|
|
|
2
2
|
import { useLinkProps, useTheme } from '@react-navigation/native';
|
|
3
3
|
import Color from 'color';
|
|
4
4
|
import * as React from 'react';
|
|
5
|
-
import { StyleSheet } from 'react-native';
|
|
5
|
+
import { Platform, StyleSheet } from 'react-native';
|
|
6
6
|
import { PlatformPressable } from './PlatformPressable';
|
|
7
7
|
import { Text } from './Text';
|
|
8
8
|
const BUTTON_RADIUS = 40;
|
|
9
9
|
export function Button(props) {
|
|
10
10
|
if ('screen' in props || 'action' in props) {
|
|
11
|
+
// @ts-expect-error: This is already type-checked by the prop types
|
|
11
12
|
return /*#__PURE__*/React.createElement(ButtonLink, props);
|
|
12
13
|
} else {
|
|
13
14
|
return /*#__PURE__*/React.createElement(ButtonBase, props);
|
|
@@ -59,6 +60,7 @@ function ButtonBase({
|
|
|
59
60
|
break;
|
|
60
61
|
}
|
|
61
62
|
return /*#__PURE__*/React.createElement(PlatformPressable, _extends({}, rest, {
|
|
63
|
+
pressOpacity: Platform.OS === 'ios' ? undefined : 1,
|
|
62
64
|
style: [{
|
|
63
65
|
backgroundColor
|
|
64
66
|
}, styles.button, style],
|
|
@@ -67,12 +69,52 @@ function ButtonBase({
|
|
|
67
69
|
color: Color(textColor).fade(0.85).string(),
|
|
68
70
|
...android_ripple
|
|
69
71
|
}
|
|
70
|
-
}), /*#__PURE__*/React.createElement(
|
|
72
|
+
}), Platform.OS === 'web' ? /*#__PURE__*/React.createElement(HoverEffect, {
|
|
73
|
+
color: textColor
|
|
74
|
+
}) : null, /*#__PURE__*/React.createElement(Text, {
|
|
71
75
|
style: [{
|
|
72
76
|
color: textColor
|
|
73
77
|
}, fonts.regular, styles.text]
|
|
74
78
|
}, children));
|
|
75
79
|
}
|
|
80
|
+
const CLASS_NAME = '__react-navigation_elements_Button_hover';
|
|
81
|
+
const css = String.raw;
|
|
82
|
+
const cssText = css`
|
|
83
|
+
.${CLASS_NAME} {
|
|
84
|
+
position: absolute;
|
|
85
|
+
top: 0;
|
|
86
|
+
left: 0;
|
|
87
|
+
right: 0;
|
|
88
|
+
bottom: 0;
|
|
89
|
+
border-radius: ${BUTTON_RADIUS}px;
|
|
90
|
+
pointer-events: none;
|
|
91
|
+
opacity: 0;
|
|
92
|
+
transition: opacity 0.15s;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
button:hover > .${CLASS_NAME} {
|
|
96
|
+
opacity: 0.08;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
button:active > .${CLASS_NAME} {
|
|
100
|
+
opacity: 0.15;
|
|
101
|
+
}
|
|
102
|
+
`;
|
|
103
|
+
const HoverEffect = ({
|
|
104
|
+
color
|
|
105
|
+
}) => {
|
|
106
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", {
|
|
107
|
+
// eslint-disable-next-line react/no-danger
|
|
108
|
+
dangerouslySetInnerHTML: {
|
|
109
|
+
__html: cssText
|
|
110
|
+
}
|
|
111
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
112
|
+
className: CLASS_NAME,
|
|
113
|
+
style: {
|
|
114
|
+
backgroundColor: color
|
|
115
|
+
}
|
|
116
|
+
}));
|
|
117
|
+
};
|
|
76
118
|
const styles = StyleSheet.create({
|
|
77
119
|
button: {
|
|
78
120
|
paddingHorizontal: 24,
|
package/lib/module/Button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useLinkProps","useTheme","Color","React","StyleSheet","PlatformPressable","Text","BUTTON_RADIUS","Button","props","createElement","ButtonLink","ButtonBase","screen","params","action","href","rest","_extends","variant","color","customColor","android_ripple","style","children","colors","fonts","primary","backgroundColor","textColor","fade","string","isDark","darken","styles","button","radius","regular","text","create","paddingHorizontal","paddingVertical","borderRadius","fontSize","lineHeight","letterSpacing","textAlign"],"sourceRoot":"../../src","sources":["Button.tsx"],"mappings":";AAAA,
|
|
1
|
+
{"version":3,"names":["useLinkProps","useTheme","Color","React","Platform","StyleSheet","PlatformPressable","Text","BUTTON_RADIUS","Button","props","createElement","ButtonLink","ButtonBase","screen","params","action","href","rest","_extends","variant","color","customColor","android_ripple","style","children","colors","fonts","primary","backgroundColor","textColor","fade","string","isDark","darken","pressOpacity","OS","undefined","styles","button","radius","HoverEffect","regular","text","CLASS_NAME","css","String","raw","cssText","Fragment","dangerouslySetInnerHTML","__html","className","create","paddingHorizontal","paddingVertical","borderRadius","fontSize","lineHeight","letterSpacing","textAlign"],"sourceRoot":"../../src","sources":["Button.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { type LinkProps } from '@react-navigation/native';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { type Props as PlatformPressableProps } from './PlatformPressable';
|
|
4
|
-
type
|
|
4
|
+
type ButtonBaseProps = Omit<PlatformPressableProps, 'children'> & {
|
|
5
5
|
variant?: 'plain' | 'tinted' | 'filled';
|
|
6
6
|
color?: string;
|
|
7
7
|
children: string | string[];
|
|
8
8
|
};
|
|
9
|
-
type
|
|
10
|
-
export declare function Button(props:
|
|
9
|
+
type ButtonLinkProps<ParamList extends ReactNavigation.RootParamList> = LinkProps<ParamList> & Omit<ButtonBaseProps, 'onPress'>;
|
|
10
|
+
export declare function Button<ParamList extends ReactNavigation.RootParamList>(props: ButtonLinkProps<ParamList>): React.JSX.Element;
|
|
11
|
+
export declare function Button(props: ButtonBaseProps): React.JSX.Element;
|
|
11
12
|
export {};
|
|
12
13
|
//# sourceMappingURL=Button.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EAGf,MAAM,0BAA0B,CAAC;AAElC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,KAAK,KAAK,IAAI,sBAAsB,EACrC,MAAM,qBAAqB,CAAC;AAG7B,KAAK,eAAe,GAAG,IAAI,CAAC,sBAAsB,EAAE,UAAU,CAAC,GAAG;IAChE,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAC7B,CAAC;AAEF,KAAK,eAAe,CAAC,SAAS,SAAS,eAAe,CAAC,aAAa,IAClE,SAAS,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC;AAI1D,wBAAgB,MAAM,CAAC,SAAS,SAAS,eAAe,CAAC,aAAa,EACpE,KAAK,EAAE,eAAe,CAAC,SAAS,CAAC,GAChC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;AAErB,wBAAgB,MAAM,CAAC,KAAK,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC"}
|
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": "2.0.0-rc.
|
|
4
|
+
"version": "2.0.0-rc.2",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
7
7
|
"react-navigation",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"@react-native-masked-view/masked-view": "0.3.1",
|
|
44
|
-
"@react-navigation/native": "^7.0.0-rc.
|
|
44
|
+
"@react-navigation/native": "^7.0.0-rc.2",
|
|
45
45
|
"@testing-library/react-native": "^12.4.3",
|
|
46
46
|
"@types/react": "~18.2.79",
|
|
47
47
|
"del-cli": "^5.1.0",
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"typescript": "^5.5.2"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|
|
54
|
-
"@react-navigation/native": "^7.0.0-rc.
|
|
54
|
+
"@react-navigation/native": "^7.0.0-rc.2",
|
|
55
55
|
"react": ">= 18.2.0",
|
|
56
56
|
"react-native": ">= 0.72.0",
|
|
57
57
|
"react-native-safe-area-context": ">= 4.0.0"
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
]
|
|
71
71
|
]
|
|
72
72
|
},
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "c840aaeeccc8b5fb4ebc317e3f658bc76e64a7ea"
|
|
74
74
|
}
|
package/src/Button.tsx
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {
|
|
2
|
+
type LinkProps,
|
|
3
|
+
useLinkProps,
|
|
4
|
+
useTheme,
|
|
5
|
+
} from '@react-navigation/native';
|
|
2
6
|
import Color from 'color';
|
|
3
7
|
import * as React from 'react';
|
|
4
|
-
import { StyleSheet } from 'react-native';
|
|
8
|
+
import { Platform, StyleSheet } from 'react-native';
|
|
5
9
|
|
|
6
10
|
import {
|
|
7
11
|
PlatformPressable,
|
|
@@ -9,26 +13,41 @@ import {
|
|
|
9
13
|
} from './PlatformPressable';
|
|
10
14
|
import { Text } from './Text';
|
|
11
15
|
|
|
12
|
-
type
|
|
16
|
+
type ButtonBaseProps = Omit<PlatformPressableProps, 'children'> & {
|
|
13
17
|
variant?: 'plain' | 'tinted' | 'filled';
|
|
14
18
|
color?: string;
|
|
15
19
|
children: string | string[];
|
|
16
20
|
};
|
|
17
21
|
|
|
18
|
-
type
|
|
19
|
-
|
|
22
|
+
type ButtonLinkProps<ParamList extends ReactNavigation.RootParamList> =
|
|
23
|
+
LinkProps<ParamList> & Omit<ButtonBaseProps, 'onPress'>;
|
|
20
24
|
|
|
21
25
|
const BUTTON_RADIUS = 40;
|
|
22
26
|
|
|
23
|
-
export function Button
|
|
27
|
+
export function Button<ParamList extends ReactNavigation.RootParamList>(
|
|
28
|
+
props: ButtonLinkProps<ParamList>
|
|
29
|
+
): React.JSX.Element;
|
|
30
|
+
|
|
31
|
+
export function Button(props: ButtonBaseProps): React.JSX.Element;
|
|
32
|
+
|
|
33
|
+
export function Button<ParamList extends ReactNavigation.RootParamList>(
|
|
34
|
+
props: ButtonBaseProps | ButtonLinkProps<ParamList>
|
|
35
|
+
) {
|
|
24
36
|
if ('screen' in props || 'action' in props) {
|
|
37
|
+
// @ts-expect-error: This is already type-checked by the prop types
|
|
25
38
|
return <ButtonLink {...props} />;
|
|
26
39
|
} else {
|
|
27
40
|
return <ButtonBase {...props} />;
|
|
28
41
|
}
|
|
29
42
|
}
|
|
30
43
|
|
|
31
|
-
function ButtonLink
|
|
44
|
+
function ButtonLink<ParamList extends ReactNavigation.RootParamList>({
|
|
45
|
+
screen,
|
|
46
|
+
params,
|
|
47
|
+
action,
|
|
48
|
+
href,
|
|
49
|
+
...rest
|
|
50
|
+
}: ButtonLinkProps<ParamList>) {
|
|
32
51
|
// @ts-expect-error: This is already type-checked by the prop types
|
|
33
52
|
const props = useLinkProps({ screen, params, action, href });
|
|
34
53
|
|
|
@@ -42,7 +61,7 @@ function ButtonBase({
|
|
|
42
61
|
style,
|
|
43
62
|
children,
|
|
44
63
|
...rest
|
|
45
|
-
}:
|
|
64
|
+
}: ButtonBaseProps) {
|
|
46
65
|
const { colors, fonts } = useTheme();
|
|
47
66
|
|
|
48
67
|
const color = customColor ?? colors.primary;
|
|
@@ -70,6 +89,7 @@ function ButtonBase({
|
|
|
70
89
|
return (
|
|
71
90
|
<PlatformPressable
|
|
72
91
|
{...rest}
|
|
92
|
+
pressOpacity={Platform.OS === 'ios' ? undefined : 1}
|
|
73
93
|
style={[{ backgroundColor }, styles.button, style]}
|
|
74
94
|
android_ripple={{
|
|
75
95
|
radius: BUTTON_RADIUS,
|
|
@@ -77,6 +97,7 @@ function ButtonBase({
|
|
|
77
97
|
...android_ripple,
|
|
78
98
|
}}
|
|
79
99
|
>
|
|
100
|
+
{Platform.OS === 'web' ? <HoverEffect color={textColor} /> : null}
|
|
80
101
|
<Text style={[{ color: textColor }, fonts.regular, styles.text]}>
|
|
81
102
|
{children}
|
|
82
103
|
</Text>
|
|
@@ -84,6 +105,43 @@ function ButtonBase({
|
|
|
84
105
|
);
|
|
85
106
|
}
|
|
86
107
|
|
|
108
|
+
const CLASS_NAME = '__react-navigation_elements_Button_hover';
|
|
109
|
+
|
|
110
|
+
const css = String.raw;
|
|
111
|
+
const cssText = css`
|
|
112
|
+
.${CLASS_NAME} {
|
|
113
|
+
position: absolute;
|
|
114
|
+
top: 0;
|
|
115
|
+
left: 0;
|
|
116
|
+
right: 0;
|
|
117
|
+
bottom: 0;
|
|
118
|
+
border-radius: ${BUTTON_RADIUS}px;
|
|
119
|
+
pointer-events: none;
|
|
120
|
+
opacity: 0;
|
|
121
|
+
transition: opacity 0.15s;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
button:hover > .${CLASS_NAME} {
|
|
125
|
+
opacity: 0.08;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
button:active > .${CLASS_NAME} {
|
|
129
|
+
opacity: 0.15;
|
|
130
|
+
}
|
|
131
|
+
`;
|
|
132
|
+
|
|
133
|
+
const HoverEffect = ({ color }: { color: string }) => {
|
|
134
|
+
return (
|
|
135
|
+
<>
|
|
136
|
+
<style
|
|
137
|
+
// eslint-disable-next-line react/no-danger
|
|
138
|
+
dangerouslySetInnerHTML={{ __html: cssText }}
|
|
139
|
+
/>
|
|
140
|
+
<div className={CLASS_NAME} style={{ backgroundColor: color }} />
|
|
141
|
+
</>
|
|
142
|
+
);
|
|
143
|
+
};
|
|
144
|
+
|
|
87
145
|
const styles = StyleSheet.create({
|
|
88
146
|
button: {
|
|
89
147
|
paddingHorizontal: 24,
|