@react-navigation/elements 2.0.0-rc.2 → 2.0.0-rc.4
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 +9 -46
- package/lib/commonjs/Button.js.map +1 -1
- package/lib/commonjs/PlatformPressable.js +49 -1
- package/lib/commonjs/PlatformPressable.js.map +1 -1
- package/lib/module/Button.js +9 -46
- package/lib/module/Button.js.map +1 -1
- package/lib/module/PlatformPressable.js +49 -1
- package/lib/module/PlatformPressable.js.map +1 -1
- package/lib/typescript/src/PlatformPressable.d.ts +8 -1
- package/lib/typescript/src/PlatformPressable.d.ts.map +1 -1
- package/package.json +4 -4
- package/src/Button.tsx +3 -40
- package/src/PlatformPressable.tsx +67 -1
package/lib/commonjs/Button.js
CHANGED
|
@@ -69,61 +69,24 @@ function ButtonBase({
|
|
|
69
69
|
break;
|
|
70
70
|
}
|
|
71
71
|
return /*#__PURE__*/React.createElement(_PlatformPressable.PlatformPressable, _extends({}, rest, {
|
|
72
|
-
pressOpacity: _reactNative.Platform.OS === 'ios' ? undefined : 1,
|
|
73
|
-
style: [{
|
|
74
|
-
backgroundColor
|
|
75
|
-
}, styles.button, style],
|
|
76
72
|
android_ripple: {
|
|
77
73
|
radius: BUTTON_RADIUS,
|
|
78
74
|
color: (0, _color.default)(textColor).fade(0.85).string(),
|
|
79
75
|
...android_ripple
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
76
|
+
},
|
|
77
|
+
pressOpacity: _reactNative.Platform.OS === 'ios' ? undefined : 1,
|
|
78
|
+
hoverEffect: {
|
|
79
|
+
color: textColor
|
|
80
|
+
},
|
|
81
|
+
style: [{
|
|
82
|
+
backgroundColor
|
|
83
|
+
}, styles.button, style]
|
|
84
|
+
}), /*#__PURE__*/React.createElement(_Text.Text, {
|
|
84
85
|
style: [{
|
|
85
86
|
color: textColor
|
|
86
87
|
}, fonts.regular, styles.text]
|
|
87
88
|
}, children));
|
|
88
89
|
}
|
|
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
|
-
};
|
|
127
90
|
const styles = _reactNative.StyleSheet.create({
|
|
128
91
|
button: {
|
|
129
92
|
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","pressOpacity","Platform","OS","undefined","
|
|
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","radius","pressOpacity","Platform","OS","undefined","hoverEffect","styles","button","Text","regular","text","StyleSheet","create","paddingHorizontal","paddingVertical","borderRadius","fontSize","lineHeight","letterSpacing","textAlign"],"sourceRoot":"../../src","sources":["Button.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -25,7 +25,9 @@ function PlatformPressable({
|
|
|
25
25
|
android_ripple,
|
|
26
26
|
pressColor,
|
|
27
27
|
pressOpacity = 0.3,
|
|
28
|
+
hoverEffect,
|
|
28
29
|
style,
|
|
30
|
+
children,
|
|
29
31
|
...rest
|
|
30
32
|
}) {
|
|
31
33
|
const {
|
|
@@ -84,6 +86,52 @@ function PlatformPressable({
|
|
|
84
86
|
// Add hover effect on iPad and VisionOS
|
|
85
87
|
opacity: !ANDROID_SUPPORTS_RIPPLE ? opacity : 1
|
|
86
88
|
}, style]
|
|
87
|
-
}, rest));
|
|
89
|
+
}, rest), /*#__PURE__*/React.createElement(HoverEffect, hoverEffect), children);
|
|
88
90
|
}
|
|
91
|
+
const css = String.raw;
|
|
92
|
+
const CLASS_NAME = `__react-navigation_elements_Pressable_hover`;
|
|
93
|
+
const CSS_TEXT = css`
|
|
94
|
+
.${CLASS_NAME} {
|
|
95
|
+
position: absolute;
|
|
96
|
+
top: 0;
|
|
97
|
+
left: 0;
|
|
98
|
+
right: 0;
|
|
99
|
+
bottom: 0;
|
|
100
|
+
border-radius: inherit;
|
|
101
|
+
background-color: var(--overlay-color);
|
|
102
|
+
opacity: 0;
|
|
103
|
+
transition: opacity 0.15s;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
a:hover > .${CLASS_NAME}, button:hover > .${CLASS_NAME} {
|
|
107
|
+
opacity: var(--overlay-hover-opacity);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
a:active > .${CLASS_NAME}, button:active > .${CLASS_NAME} {
|
|
111
|
+
opacity: var(--overlay-active-opacity);
|
|
112
|
+
}
|
|
113
|
+
`;
|
|
114
|
+
const HoverEffect = ({
|
|
115
|
+
color,
|
|
116
|
+
hoverOpacity = 0.08,
|
|
117
|
+
activeOpacity = 0.16
|
|
118
|
+
}) => {
|
|
119
|
+
if (_reactNative.Platform.OS !== 'web' || color == null) {
|
|
120
|
+
return null;
|
|
121
|
+
}
|
|
122
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", {
|
|
123
|
+
// eslint-disable-next-line react/no-danger
|
|
124
|
+
dangerouslySetInnerHTML: {
|
|
125
|
+
__html: CSS_TEXT
|
|
126
|
+
}
|
|
127
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
128
|
+
className: CLASS_NAME,
|
|
129
|
+
style: {
|
|
130
|
+
// @ts-expect-error: CSS variables are not typed
|
|
131
|
+
'--overlay-color': color,
|
|
132
|
+
'--overlay-hover-opacity': hoverOpacity,
|
|
133
|
+
'--overlay-active-opacity': activeOpacity
|
|
134
|
+
}
|
|
135
|
+
}));
|
|
136
|
+
};
|
|
89
137
|
//# sourceMappingURL=PlatformPressable.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_native","require","React","_interopRequireWildcard","_reactNative","_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","AnimatedPressable","Animated","createAnimatedComponent","Pressable","ANDROID_VERSION_LOLLIPOP","ANDROID_SUPPORTS_RIPPLE","Platform","OS","Version","PlatformPressable","disabled","onPress","onPressIn","onPressOut","android_ripple","pressColor","pressOpacity","style","rest","dark","useTheme","opacity","useState","Value","animateTo","toValue","duration","timing","easing","Easing","inOut","quad","useNativeDriver","start","handlePress","hasModifierKey","metaKey","altKey","ctrlKey","shiftKey","isLeftClick","button","isSelfTarget","undefined","includes","currentTarget","target","href","preventDefault","handlePressIn","handlePressOut","createElement","accessible","accessibilityRole","color","cursor"],"sourceRoot":"../../src","sources":["PlatformPressable.tsx"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AASsB,SAAAI,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAAA,SAAAW,SAAA,WAAAA,QAAA,GAAAR,MAAA,CAAAS,MAAA,GAAAT,MAAA,CAAAS,MAAA,CAAAC,IAAA,eAAAb,CAAA,aAAAR,CAAA,MAAAA,CAAA,GAAAsB,SAAA,CAAAC,MAAA,EAAAvB,CAAA,UAAAG,CAAA,GAAAmB,SAAA,CAAAtB,CAAA,YAAAE,CAAA,IAAAC,CAAA,OAAAY,cAAA,CAAAC,IAAA,CAAAb,CAAA,EAAAD,CAAA,MAAAM,CAAA,CAAAN,CAAA,IAAAC,CAAA,CAAAD,CAAA,aAAAM,CAAA,KAAAW,QAAA,CAAAK,KAAA,OAAAF,SAAA;
|
|
1
|
+
{"version":3,"names":["_native","require","React","_interopRequireWildcard","_reactNative","_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","AnimatedPressable","Animated","createAnimatedComponent","Pressable","ANDROID_VERSION_LOLLIPOP","ANDROID_SUPPORTS_RIPPLE","Platform","OS","Version","PlatformPressable","disabled","onPress","onPressIn","onPressOut","android_ripple","pressColor","pressOpacity","hoverEffect","style","children","rest","dark","useTheme","opacity","useState","Value","animateTo","toValue","duration","timing","easing","Easing","inOut","quad","useNativeDriver","start","handlePress","hasModifierKey","metaKey","altKey","ctrlKey","shiftKey","isLeftClick","button","isSelfTarget","undefined","includes","currentTarget","target","href","preventDefault","handlePressIn","handlePressOut","createElement","accessible","accessibilityRole","color","cursor","HoverEffect","css","String","raw","CLASS_NAME","CSS_TEXT","hoverOpacity","activeOpacity","Fragment","dangerouslySetInnerHTML","__html","className"],"sourceRoot":"../../src","sources":["PlatformPressable.tsx"],"mappings":"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","ignoreList":[]}
|
package/lib/module/Button.js
CHANGED
|
@@ -60,61 +60,24 @@ function ButtonBase({
|
|
|
60
60
|
break;
|
|
61
61
|
}
|
|
62
62
|
return /*#__PURE__*/React.createElement(PlatformPressable, _extends({}, rest, {
|
|
63
|
-
pressOpacity: Platform.OS === 'ios' ? undefined : 1,
|
|
64
|
-
style: [{
|
|
65
|
-
backgroundColor
|
|
66
|
-
}, styles.button, style],
|
|
67
63
|
android_ripple: {
|
|
68
64
|
radius: BUTTON_RADIUS,
|
|
69
65
|
color: Color(textColor).fade(0.85).string(),
|
|
70
66
|
...android_ripple
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
67
|
+
},
|
|
68
|
+
pressOpacity: Platform.OS === 'ios' ? undefined : 1,
|
|
69
|
+
hoverEffect: {
|
|
70
|
+
color: textColor
|
|
71
|
+
},
|
|
72
|
+
style: [{
|
|
73
|
+
backgroundColor
|
|
74
|
+
}, styles.button, style]
|
|
75
|
+
}), /*#__PURE__*/React.createElement(Text, {
|
|
75
76
|
style: [{
|
|
76
77
|
color: textColor
|
|
77
78
|
}, fonts.regular, styles.text]
|
|
78
79
|
}, children));
|
|
79
80
|
}
|
|
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
|
-
};
|
|
118
81
|
const styles = StyleSheet.create({
|
|
119
82
|
button: {
|
|
120
83
|
paddingHorizontal: 24,
|
package/lib/module/Button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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","
|
|
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","radius","pressOpacity","OS","undefined","hoverEffect","styles","button","regular","text","create","paddingHorizontal","paddingVertical","borderRadius","fontSize","lineHeight","letterSpacing","textAlign"],"sourceRoot":"../../src","sources":["Button.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -17,7 +17,9 @@ export function PlatformPressable({
|
|
|
17
17
|
android_ripple,
|
|
18
18
|
pressColor,
|
|
19
19
|
pressOpacity = 0.3,
|
|
20
|
+
hoverEffect,
|
|
20
21
|
style,
|
|
22
|
+
children,
|
|
21
23
|
...rest
|
|
22
24
|
}) {
|
|
23
25
|
const {
|
|
@@ -76,6 +78,52 @@ export function PlatformPressable({
|
|
|
76
78
|
// Add hover effect on iPad and VisionOS
|
|
77
79
|
opacity: !ANDROID_SUPPORTS_RIPPLE ? opacity : 1
|
|
78
80
|
}, style]
|
|
79
|
-
}, rest));
|
|
81
|
+
}, rest), /*#__PURE__*/React.createElement(HoverEffect, hoverEffect), children);
|
|
80
82
|
}
|
|
83
|
+
const css = String.raw;
|
|
84
|
+
const CLASS_NAME = `__react-navigation_elements_Pressable_hover`;
|
|
85
|
+
const CSS_TEXT = css`
|
|
86
|
+
.${CLASS_NAME} {
|
|
87
|
+
position: absolute;
|
|
88
|
+
top: 0;
|
|
89
|
+
left: 0;
|
|
90
|
+
right: 0;
|
|
91
|
+
bottom: 0;
|
|
92
|
+
border-radius: inherit;
|
|
93
|
+
background-color: var(--overlay-color);
|
|
94
|
+
opacity: 0;
|
|
95
|
+
transition: opacity 0.15s;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
a:hover > .${CLASS_NAME}, button:hover > .${CLASS_NAME} {
|
|
99
|
+
opacity: var(--overlay-hover-opacity);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
a:active > .${CLASS_NAME}, button:active > .${CLASS_NAME} {
|
|
103
|
+
opacity: var(--overlay-active-opacity);
|
|
104
|
+
}
|
|
105
|
+
`;
|
|
106
|
+
const HoverEffect = ({
|
|
107
|
+
color,
|
|
108
|
+
hoverOpacity = 0.08,
|
|
109
|
+
activeOpacity = 0.16
|
|
110
|
+
}) => {
|
|
111
|
+
if (Platform.OS !== 'web' || color == null) {
|
|
112
|
+
return null;
|
|
113
|
+
}
|
|
114
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", {
|
|
115
|
+
// eslint-disable-next-line react/no-danger
|
|
116
|
+
dangerouslySetInnerHTML: {
|
|
117
|
+
__html: CSS_TEXT
|
|
118
|
+
}
|
|
119
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
120
|
+
className: CLASS_NAME,
|
|
121
|
+
style: {
|
|
122
|
+
// @ts-expect-error: CSS variables are not typed
|
|
123
|
+
'--overlay-color': color,
|
|
124
|
+
'--overlay-hover-opacity': hoverOpacity,
|
|
125
|
+
'--overlay-active-opacity': activeOpacity
|
|
126
|
+
}
|
|
127
|
+
}));
|
|
128
|
+
};
|
|
81
129
|
//# sourceMappingURL=PlatformPressable.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useTheme","React","Animated","Easing","Platform","Pressable","AnimatedPressable","createAnimatedComponent","ANDROID_VERSION_LOLLIPOP","ANDROID_SUPPORTS_RIPPLE","OS","Version","PlatformPressable","disabled","onPress","onPressIn","onPressOut","android_ripple","pressColor","pressOpacity","style","rest","dark","opacity","useState","Value","animateTo","toValue","duration","timing","easing","inOut","quad","useNativeDriver","start","handlePress","e","hasModifierKey","metaKey","altKey","ctrlKey","shiftKey","isLeftClick","button","isSelfTarget","undefined","includes","currentTarget","target","href","preventDefault","handlePressIn","handlePressOut","createElement","_extends","accessible","accessibilityRole","color","cursor"],"sourceRoot":"../../src","sources":["PlatformPressable.tsx"],"mappings":";AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,SACEC,QAAQ,EACRC,MAAM,EAENC,QAAQ,EACRC,SAAS,QAIJ,cAAc;
|
|
1
|
+
{"version":3,"names":["useTheme","React","Animated","Easing","Platform","Pressable","AnimatedPressable","createAnimatedComponent","ANDROID_VERSION_LOLLIPOP","ANDROID_SUPPORTS_RIPPLE","OS","Version","PlatformPressable","disabled","onPress","onPressIn","onPressOut","android_ripple","pressColor","pressOpacity","hoverEffect","style","children","rest","dark","opacity","useState","Value","animateTo","toValue","duration","timing","easing","inOut","quad","useNativeDriver","start","handlePress","e","hasModifierKey","metaKey","altKey","ctrlKey","shiftKey","isLeftClick","button","isSelfTarget","undefined","includes","currentTarget","target","href","preventDefault","handlePressIn","handlePressOut","createElement","_extends","accessible","accessibilityRole","color","cursor","HoverEffect","css","String","raw","CLASS_NAME","CSS_TEXT","hoverOpacity","activeOpacity","Fragment","dangerouslySetInnerHTML","__html","className"],"sourceRoot":"../../src","sources":["PlatformPressable.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,8 +1,14 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { Animated, type PressableProps, type StyleProp, type ViewStyle } from 'react-native';
|
|
3
|
+
type HoverEffectProps = {
|
|
4
|
+
color?: string;
|
|
5
|
+
hoverOpacity?: number;
|
|
6
|
+
activeOpacity?: number;
|
|
7
|
+
};
|
|
3
8
|
export type Props = Omit<PressableProps, 'style'> & {
|
|
4
9
|
pressColor?: string;
|
|
5
10
|
pressOpacity?: number;
|
|
11
|
+
hoverEffect?: HoverEffectProps;
|
|
6
12
|
style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
|
|
7
13
|
href?: string;
|
|
8
14
|
children: React.ReactNode;
|
|
@@ -10,5 +16,6 @@ export type Props = Omit<PressableProps, 'style'> & {
|
|
|
10
16
|
/**
|
|
11
17
|
* PlatformPressable provides an abstraction on top of Pressable to handle platform differences.
|
|
12
18
|
*/
|
|
13
|
-
export declare function PlatformPressable({ disabled, onPress, onPressIn, onPressOut, android_ripple, pressColor, pressOpacity, style, ...rest }: Props): React.JSX.Element;
|
|
19
|
+
export declare function PlatformPressable({ disabled, onPress, onPressIn, onPressOut, android_ripple, pressColor, pressOpacity, hoverEffect, style, children, ...rest }: Props): React.JSX.Element;
|
|
20
|
+
export {};
|
|
14
21
|
//# sourceMappingURL=PlatformPressable.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PlatformPressable.d.ts","sourceRoot":"","sources":["../../../src/PlatformPressable.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,QAAQ,EAKR,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,MAAM,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,GAAG;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAQF;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,OAAO,EACP,SAAS,EACT,UAAU,EACV,cAAc,EACd,UAAU,EACV,YAAkB,EAClB,KAAK,EACL,GAAG,IAAI,EACR,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"PlatformPressable.d.ts","sourceRoot":"","sources":["../../../src/PlatformPressable.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,QAAQ,EAKR,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,GAAG;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,KAAK,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAQF;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,OAAO,EACP,SAAS,EACT,UAAU,EACV,cAAc,EACd,UAAU,EACV,YAAkB,EAClB,WAAW,EACX,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,KAAK,qBAkFP"}
|
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.4",
|
|
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.3",
|
|
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.3",
|
|
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": "3ef5545e7c172274a6647eda1d8b4408c59d4496"
|
|
74
74
|
}
|
package/src/Button.tsx
CHANGED
|
@@ -89,15 +89,15 @@ function ButtonBase({
|
|
|
89
89
|
return (
|
|
90
90
|
<PlatformPressable
|
|
91
91
|
{...rest}
|
|
92
|
-
pressOpacity={Platform.OS === 'ios' ? undefined : 1}
|
|
93
|
-
style={[{ backgroundColor }, styles.button, style]}
|
|
94
92
|
android_ripple={{
|
|
95
93
|
radius: BUTTON_RADIUS,
|
|
96
94
|
color: Color(textColor).fade(0.85).string(),
|
|
97
95
|
...android_ripple,
|
|
98
96
|
}}
|
|
97
|
+
pressOpacity={Platform.OS === 'ios' ? undefined : 1}
|
|
98
|
+
hoverEffect={{ color: textColor }}
|
|
99
|
+
style={[{ backgroundColor }, styles.button, style]}
|
|
99
100
|
>
|
|
100
|
-
{Platform.OS === 'web' ? <HoverEffect color={textColor} /> : null}
|
|
101
101
|
<Text style={[{ color: textColor }, fonts.regular, styles.text]}>
|
|
102
102
|
{children}
|
|
103
103
|
</Text>
|
|
@@ -105,43 +105,6 @@ function ButtonBase({
|
|
|
105
105
|
);
|
|
106
106
|
}
|
|
107
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
|
-
|
|
145
108
|
const styles = StyleSheet.create({
|
|
146
109
|
button: {
|
|
147
110
|
paddingHorizontal: 24,
|
|
@@ -11,9 +11,16 @@ import {
|
|
|
11
11
|
type ViewStyle,
|
|
12
12
|
} from 'react-native';
|
|
13
13
|
|
|
14
|
+
type HoverEffectProps = {
|
|
15
|
+
color?: string;
|
|
16
|
+
hoverOpacity?: number;
|
|
17
|
+
activeOpacity?: number;
|
|
18
|
+
};
|
|
19
|
+
|
|
14
20
|
export type Props = Omit<PressableProps, 'style'> & {
|
|
15
21
|
pressColor?: string;
|
|
16
22
|
pressOpacity?: number;
|
|
23
|
+
hoverEffect?: HoverEffectProps;
|
|
17
24
|
style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
|
|
18
25
|
href?: string;
|
|
19
26
|
children: React.ReactNode;
|
|
@@ -36,7 +43,9 @@ export function PlatformPressable({
|
|
|
36
43
|
android_ripple,
|
|
37
44
|
pressColor,
|
|
38
45
|
pressOpacity = 0.3,
|
|
46
|
+
hoverEffect,
|
|
39
47
|
style,
|
|
48
|
+
children,
|
|
40
49
|
...rest
|
|
41
50
|
}: Props) {
|
|
42
51
|
const { dark } = useTheme();
|
|
@@ -115,6 +124,63 @@ export function PlatformPressable({
|
|
|
115
124
|
style,
|
|
116
125
|
]}
|
|
117
126
|
{...rest}
|
|
118
|
-
|
|
127
|
+
>
|
|
128
|
+
<HoverEffect {...hoverEffect} />
|
|
129
|
+
{children}
|
|
130
|
+
</AnimatedPressable>
|
|
119
131
|
);
|
|
120
132
|
}
|
|
133
|
+
|
|
134
|
+
const css = String.raw;
|
|
135
|
+
|
|
136
|
+
const CLASS_NAME = `__react-navigation_elements_Pressable_hover`;
|
|
137
|
+
|
|
138
|
+
const CSS_TEXT = css`
|
|
139
|
+
.${CLASS_NAME} {
|
|
140
|
+
position: absolute;
|
|
141
|
+
top: 0;
|
|
142
|
+
left: 0;
|
|
143
|
+
right: 0;
|
|
144
|
+
bottom: 0;
|
|
145
|
+
border-radius: inherit;
|
|
146
|
+
background-color: var(--overlay-color);
|
|
147
|
+
opacity: 0;
|
|
148
|
+
transition: opacity 0.15s;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
a:hover > .${CLASS_NAME}, button:hover > .${CLASS_NAME} {
|
|
152
|
+
opacity: var(--overlay-hover-opacity);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
a:active > .${CLASS_NAME}, button:active > .${CLASS_NAME} {
|
|
156
|
+
opacity: var(--overlay-active-opacity);
|
|
157
|
+
}
|
|
158
|
+
`;
|
|
159
|
+
|
|
160
|
+
const HoverEffect = ({
|
|
161
|
+
color,
|
|
162
|
+
hoverOpacity = 0.08,
|
|
163
|
+
activeOpacity = 0.16,
|
|
164
|
+
}: HoverEffectProps) => {
|
|
165
|
+
if (Platform.OS !== 'web' || color == null) {
|
|
166
|
+
return null;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
return (
|
|
170
|
+
<>
|
|
171
|
+
<style
|
|
172
|
+
// eslint-disable-next-line react/no-danger
|
|
173
|
+
dangerouslySetInnerHTML={{ __html: CSS_TEXT }}
|
|
174
|
+
/>
|
|
175
|
+
<div
|
|
176
|
+
className={CLASS_NAME}
|
|
177
|
+
style={{
|
|
178
|
+
// @ts-expect-error: CSS variables are not typed
|
|
179
|
+
'--overlay-color': color,
|
|
180
|
+
'--overlay-hover-opacity': hoverOpacity,
|
|
181
|
+
'--overlay-active-opacity': activeOpacity,
|
|
182
|
+
}}
|
|
183
|
+
/>
|
|
184
|
+
</>
|
|
185
|
+
);
|
|
186
|
+
};
|