@react-navigation/elements - npm Package Compare versions

Comparing version 2.0.0-rc.2 to 2.0.0-rc.3

lib/commonjs/Button.js

@@ -72,6 +72,2 @@ "use strict";
   return /*#__PURE__*/React.createElement(_PlatformPressable.PlatformPressable, _extends({}, rest, {
-    pressOpacity: _reactNative.Platform.OS === 'ios' ? undefined : 1,
-    style: [{
-      backgroundColor
-    }, styles.button, style],
     android_ripple: {
@@ -81,7 +77,12 @@ radius: BUTTON_RADIUS,
       ...android_ripple
-    }
-  }), _reactNative.Platform.OS === 'web' ? /*#__PURE__*/React.createElement(HoverEffect, {
-    color: textColor
-  }) : null, /*#__PURE__*/React.createElement(_Text.Text, {
+    },
+    pressOpacity: _reactNative.Platform.OS === 'ios' ? undefined : 1,
+    hoverEffect: {
+      color: textColor
+    },
     style: [{
+      backgroundColor
+    }, styles.button, style]
+  }), /*#__PURE__*/React.createElement(_Text.Text, {
+    style: [{
       color: textColor
@@ -91,40 +92,2 @@ }, fonts.regular, styles.text]
 }
-const CLASS_NAME = '__react-navigation_elements_Button_hover';
-const css = String.raw;
-const cssText = css`
-  .${CLASS_NAME} {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-radius: ${BUTTON_RADIUS}px;
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity 0.15s;
-  }
-
-  button:hover > .${CLASS_NAME} {
-    opacity: 0.08;
-  }
-
-  button:active > .${CLASS_NAME} {
-    opacity: 0.15;
-  }
-`;
-const HoverEffect = ({
-  color
-}) => {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", {
-    // eslint-disable-next-line react/no-danger
-    dangerouslySetInnerHTML: {
-      __html: cssText
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: CLASS_NAME,
-    style: {
-      backgroundColor: color
-    }
-  }));
-};
 const styles = _reactNative.StyleSheet.create({
@@ -131,0 +94,0 @@ button: {

lib/commonjs/PlatformPressable.js

@@ -28,3 +28,5 @@ "use strict";
   pressOpacity = 0.3,
+  hoverEffect,
   style,
+  children,
   ...rest
@@ -88,4 +90,50 @@ }) {
     }, style]
-  }, rest));
+  }, rest), /*#__PURE__*/React.createElement(HoverEffect, hoverEffect), children);
 }
+const css = String.raw;
+const CLASS_NAME = `__react-navigation_elements_Pressable_hover`;
+const CSS_TEXT = css`
+  .${CLASS_NAME} {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: inherit;
+    background-color: var(--overlay-color);
+    opacity: 0;
+    transition: opacity 0.15s;
+  }
+
+  a:hover > .${CLASS_NAME}, button:hover > .${CLASS_NAME} {
+    opacity: var(--overlay-hover-opacity);
+  }
+
+  a:active > .${CLASS_NAME}, button:active > .${CLASS_NAME} {
+    opacity: var(--overlay-active-opacity);
+  }
+`;
+const HoverEffect = ({
+  color,
+  hoverOpacity = 0.08,
+  activeOpacity = 0.16
+}) => {
+  if (_reactNative.Platform.OS !== 'web' || color == null) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", {
+    // eslint-disable-next-line react/no-danger
+    dangerouslySetInnerHTML: {
+      __html: CSS_TEXT
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: CLASS_NAME,
+    style: {
+      // @ts-expect-error: CSS variables are not typed
+      '--overlay-color': color,
+      '--overlay-hover-opacity': hoverOpacity,
+      '--overlay-active-opacity': activeOpacity
+    }
+  }));
+};
 //# sourceMappingURL=PlatformPressable.js.map

lib/module/Button.js

@@ -63,6 +63,2 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
   return /*#__PURE__*/React.createElement(PlatformPressable, _extends({}, rest, {
-    pressOpacity: Platform.OS === 'ios' ? undefined : 1,
-    style: [{
-      backgroundColor
-    }, styles.button, style],
     android_ripple: {
@@ -72,7 +68,12 @@ radius: BUTTON_RADIUS,
       ...android_ripple
-    }
-  }), Platform.OS === 'web' ? /*#__PURE__*/React.createElement(HoverEffect, {
-    color: textColor
-  }) : null, /*#__PURE__*/React.createElement(Text, {
+    },
+    pressOpacity: Platform.OS === 'ios' ? undefined : 1,
+    hoverEffect: {
+      color: textColor
+    },
     style: [{
+      backgroundColor
+    }, styles.button, style]
+  }), /*#__PURE__*/React.createElement(Text, {
+    style: [{
       color: textColor
@@ -82,40 +83,2 @@ }, fonts.regular, styles.text]
 }
-const CLASS_NAME = '__react-navigation_elements_Button_hover';
-const css = String.raw;
-const cssText = css`
-  .${CLASS_NAME} {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-radius: ${BUTTON_RADIUS}px;
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity 0.15s;
-  }
-
-  button:hover > .${CLASS_NAME} {
-    opacity: 0.08;
-  }
-
-  button:active > .${CLASS_NAME} {
-    opacity: 0.15;
-  }
-`;
-const HoverEffect = ({
-  color
-}) => {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", {
-    // eslint-disable-next-line react/no-danger
-    dangerouslySetInnerHTML: {
-      __html: cssText
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: CLASS_NAME,
-    style: {
-      backgroundColor: color
-    }
-  }));
-};
 const styles = StyleSheet.create({
@@ -122,0 +85,0 @@ button: {

lib/module/PlatformPressable.js

@@ -20,3 +20,5 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
   pressOpacity = 0.3,
+  hoverEffect,
   style,
+  children,
   ...rest
@@ -80,4 +82,50 @@ }) {
     }, style]
-  }, rest));
+  }, rest), /*#__PURE__*/React.createElement(HoverEffect, hoverEffect), children);
 }
+const css = String.raw;
+const CLASS_NAME = `__react-navigation_elements_Pressable_hover`;
+const CSS_TEXT = css`
+  .${CLASS_NAME} {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: inherit;
+    background-color: var(--overlay-color);
+    opacity: 0;
+    transition: opacity 0.15s;
+  }
+
+  a:hover > .${CLASS_NAME}, button:hover > .${CLASS_NAME} {
+    opacity: var(--overlay-hover-opacity);
+  }
+
+  a:active > .${CLASS_NAME}, button:active > .${CLASS_NAME} {
+    opacity: var(--overlay-active-opacity);
+  }
+`;
+const HoverEffect = ({
+  color,
+  hoverOpacity = 0.08,
+  activeOpacity = 0.16
+}) => {
+  if (Platform.OS !== 'web' || color == null) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", {
+    // eslint-disable-next-line react/no-danger
+    dangerouslySetInnerHTML: {
+      __html: CSS_TEXT
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: CLASS_NAME,
+    style: {
+      // @ts-expect-error: CSS variables are not typed
+      '--overlay-color': color,
+      '--overlay-hover-opacity': hoverOpacity,
+      '--overlay-active-opacity': activeOpacity
+    }
+  }));
+};
 //# sourceMappingURL=PlatformPressable.js.map

lib/typescript/src/PlatformPressable.d.ts

 import * as React from 'react';
 import { Animated, type PressableProps, type StyleProp, type ViewStyle } from 'react-native';
+type HoverEffectProps = {
+    color?: string;
+    hoverOpacity?: number;
+    activeOpacity?: number;
+};
 export type Props = Omit<PressableProps, 'style'> & {
     pressColor?: string;
     pressOpacity?: number;
+    hoverEffect?: HoverEffectProps;
     style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
@@ -13,3 +19,4 @@ href?: string;
  */
-export declare function PlatformPressable({ disabled, onPress, onPressIn, onPressOut, android_ripple, pressColor, pressOpacity, style, ...rest }: Props): React.JSX.Element;
+export declare function PlatformPressable({ disabled, onPress, onPressIn, onPressOut, android_ripple, pressColor, pressOpacity, hoverEffect, style, children, ...rest }: Props): React.JSX.Element;
+export {};
 //# sourceMappingURL=PlatformPressable.d.ts.map

package.json

 {
   "name": "@react-navigation/elements",
   "description": "UI Components for React Navigation",
-  "version": "2.0.0-rc.2",
+  "version": "2.0.0-rc.3",
   "keywords": [
@@ -73,3 +73,3 @@ "react-native",
   },
-  "gitHead": "c840aaeeccc8b5fb4ebc317e3f658bc76e64a7ea"
+  "gitHead": "dd5a5224e3b9a891b358627c29554f950c022225"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

310184

increased by0.78%

Lines of code

5008

increased by1.11%

No dependency changes