@ledgerhq/native-ui 0.7.6 → 0.7.9

package/components/ChartCard/index.js

@@ -19,7 +19,7 @@ const ChartCard = ({ Header, Footer, range, isLoading, refreshChart, chartData,
         React.createElement(Flex, { mt: 6, height: 100, alignItems: "center", justifyContent: "center" }, chartData && chartData.length > 0 ? (React.createElement(Transitions.Fade, { status: "entering", duration: 400 },
             React.createElement(Chart, { data: chartData, backgroundColor: colors.neutral.c30, color: currencyColor, valueKey: "value", xAxisFormatter: xAxisFormatter, yAxisFormatter: yAxisFormatter, valueFormatter: valueFormatter, disableTooltips: false }))) : (React.createElement(InfiniteLoader, { size: 32 }))),
         React.createElement(Flex, { mt: 70 },
-            React.createElement(GraphTabs, { activeIndex: activeRangeIndex, activeBg: "neutral.c30", onChange: setRange, labels: rangesLabels })),
+            React.createElement(GraphTabs, { activeIndex: activeRangeIndex, activeBg: currencyColor, activeColor: "neutral.c30", onChange: setRange, labels: rangesLabels })),
         Footer));
 };
 export default ChartCard;

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/components/tags/Tag/index.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 import { FlexBoxProps } from "../../Layout/Flex";
 export interface TagProps extends FlexBoxProps {
     active?: boolean;
+    uppercase?: boolean;
     children: React.ReactNode;
 }
-export default function Tag({ active, children, ...props }: TagProps): JSX.Element;
+export default function Tag({ active, uppercase, children, ...props }: TagProps): JSX.Element;

package/components/tags/Tag/index.js

@@ -13,7 +13,7 @@ import React from "react";
 import Flex from "../../Layout/Flex";
 import Text from "../../Text";
 export default function Tag(_a) {
-    var { active, children } = _a, props = __rest(_a, ["active", "children"]);
+    var { active, uppercase, children } = _a, props = __rest(_a, ["active", "uppercase", "children"]);
     return (React.createElement(Flex, Object.assign({ px: 2, alignItems: "center", justifyContent: "center", borderRadius: 4, borderWidth: 1, borderColor: active ? "primary.c50" : "neutral.c40" }, props),
-        React.createElement(Text, { variant: "tiny", fontWeight: "semiBold", lineHeight: "16px", textTransform: "uppercase", textAlign: "center", color: active ? "primary.c70" : "neutral.c80" }, children)));
+        React.createElement(Text, { variant: "tiny", fontWeight: "semiBold", lineHeight: "16px", uppercase: uppercase !== false, textAlign: "center", color: active ? "primary.c70" : "neutral.c80" }, children)));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.7.6",
+  "version": "0.7.9",
   "description": "Ledger Live - Desktop UI",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",
@@ -16,7 +16,7 @@
   ],
   "dependencies": {
     "@ledgerhq/icons-ui": "^0.2.3",
-    "@ledgerhq/ui-shared": "^0.1.5",
+    "@ledgerhq/ui-shared": "^0.1.6",
     "@types/color": "^3.0.2",
     "@types/react": "^17.0.37",
     "@types/react-native": "^0.65.9",