@ledgerhq/native-ui 0.7.8 → 0.7.9

package/components/Form/Switch/index.js

@@ -1,11 +1,20 @@
-import React from "react";
-import { Switch as NativeSwitch } from "react-native";
+import React, { useCallback } from "react";
+import { Pressable as BasePressable, Switch as NativeSwitch } from "react-native";
 import { useTheme } from "styled-components/native";
 import Text from "../../Text";
-import Flex from "../../Layout/Flex";
+import proxyStyled from "../../../components/styled";
+const Pressable = proxyStyled(BasePressable).attrs({
+    flexDirection: "row",
+    alignItems: "center",
+}) ``;
 const Switch = ({ checked, onChange, disabled, label }) => {
     const { colors, space } = useTheme();
-    return (React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
+    const handlePress = useCallback(() => {
+        if (disabled)
+            return;
+        onChange && onChange(!checked);
+    }, [checked, disabled, onChange]);
+    return (React.createElement(Pressable, { onPress: handlePress },
         React.createElement(NativeSwitch, { trackColor: {
                 false: colors.neutral.c50,
                 true: colors.primary.c80,

package/components/Layout/Modals/BaseModal/index.js

@@ -18,6 +18,7 @@ import CloseMedium from "@ledgerhq/icons-ui/native/CloseMedium";
 import Text from "../../../Text";
 import { BoxedIcon } from "../../../Icon";
 import { Flex } from "../../index";
+import { space } from "styled-system";
 const { width, height } = sizes;
 const Container = styled.View `
   background-color: ${(p) => p.theme.colors.background.main};
@@ -34,6 +35,12 @@ const CloseContainer = styled.View `
   align-items: flex-end;
   margin-bottom: ${(p) => p.theme.space[7]}px;
 `;
+const ClosePressableExtendedBounds = styled.TouchableOpacity.attrs({
+    p: 5,
+    m: -5,
+}) `
+  ${space};
+`;
 const StyledTitle = styled(Text).attrs({ variant: "h2" }) `
   text-transform: uppercase;
 `;
@@ -70,7 +77,8 @@ export default function BaseModal(_a) {
     return (React.createElement(ReactNativeModal, Object.assign({}, rest, backDropProps, { isVisible: isOpen, deviceWidth: width, deviceHeight: height, useNativeDriver: true, useNativeDriverForBackdrop: true, hideModalContentWhileAnimating: true, onModalHide: onClose, style: [defaultModalStyle, modalStyle] }),
         React.createElement(Container, { style: containerStyle },
             !noCloseButton && (React.createElement(CloseContainer, null,
-                React.createElement(Link, { Icon: CloseMedium, onPress: onClose }))),
+                React.createElement(ClosePressableExtendedBounds, { onPress: onClose },
+                    React.createElement(Link, { Icon: CloseMedium, onPress: onClose })))),
             React.createElement(ModalHeader, { Icon: Icon, iconColor: iconColor, title: title, description: description, subtitle: subtitle }),
             React.createElement(ContentContainer, null, children))));
 }

package/components/message/Notification/index.js

@@ -5,6 +5,7 @@ import { TouchableOpacity } from "react-native";
 import Text from "../../Text";
 import CloseMedium from "@ledgerhq/icons-ui/native/CloseMedium";
 import { Flex } from "../../Layout";
+import { space } from "styled-system";
 const NotificationContainer = styled.View `
   display: flex;
   width: 100%;
@@ -17,6 +18,12 @@ const NotificationContainer = styled.View `
   background-color: ${(p) => p.variant === "primary" ? p.theme.colors.primary.c90 : "transparent"};
   border-radius: ${(p) => `${p.theme.radii[1]}px`};
 `;
+const ClosePressableExtendedBounds = styled.TouchableOpacity.attrs({
+    p: 5,
+    m: -5,
+}) `
+  ${space};
+`;
 export default function Notification({ Icon, iconColor, variant = "primary", numberOfLines, title, subtitle, onClose, linkText, onLinkPress, }) {
     const { colors } = useTheme();
     const textColor = variant === "primary" ? colors.neutral.c00 : colors.neutral.c100;
@@ -30,6 +37,6 @@ export default function Notification({ Icon, iconColor, variant = "primary", num
                 React.createElement(TouchableOpacity, { onPress: onLinkPress },
                     React.createElement(Text, { variant: "body", fontWeight: "semiBold", color: textColor }, linkText))))),
         onClose && (React.createElement(FlexBox, { marginLeft: "auto", pl: 16 },
-            React.createElement(TouchableOpacity, { onPress: onClose },
+            React.createElement(ClosePressableExtendedBounds, { onPress: onClose },
                 React.createElement(CloseMedium, { size: 14, color: textColor }))))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.7.8",
+  "version": "0.7.9",
   "description": "Ledger Live - Desktop UI",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",