@ledgerhq/native-ui 0.7.8 → 0.7.11

package/components/Form/Input/SearchInput/index.js

@@ -1,12 +1,30 @@
-import React from "react";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useCallback } from "react";
 import styled from "styled-components/native";
 import Input, { InputRenderLeftContainer } from "../BaseInput";
 import SearchMedium from "@ledgerhq/icons-ui/native/SearchMedium";
+import Button from "../../../cta/Button";
 const Icon = styled(SearchMedium).attrs((p) => ({
     color: p.theme.colors.neutral.c70,
 })) ``;
-function SearchInput(props, ref) {
-    return (React.createElement(Input, Object.assign({ ref: ref }, props, { renderLeft: React.createElement(InputRenderLeftContainer, null,
-            React.createElement(Icon, null)) })));
+function SearchInput(_a, ref) {
+    var { onChange, value } = _a, props = __rest(_a, ["onChange", "value"]);
+    const onClear = useCallback(() => {
+        if (onChange) {
+            onChange("");
+        }
+    }, [onChange]);
+    return (React.createElement(Input, Object.assign({ ref: ref, onChange: onChange, value: value }, props, { renderLeft: React.createElement(InputRenderLeftContainer, null,
+            React.createElement(Icon, null)), renderRight: value ? React.createElement(Button, { iconName: "Close", onPress: onClear }) : null })));
 }
 export default React.forwardRef(SearchInput);

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/cta/Button/index.d.ts

@@ -15,6 +15,8 @@ export declare type ButtonProps = TouchableOpacityProps & BaseStyledProps & {
     disabled?: boolean;
     pressed?: boolean;
     children?: React.ReactNode;
+    pending?: boolean;
+    displayContentWhenPending?: boolean;
 };
 export declare const Base: import("styled-components").StyledComponent<typeof TouchableOpacity, import("styled-components").DefaultTheme, {
     iconButton?: boolean | undefined;

package/components/cta/Button/index.js

@@ -45,7 +45,7 @@ const Container = styled.View `
   opacity: ${(p) => (p.hide ? 0 : 1)};
 `;
 const SpinnerContainer = styled.View `
-  position: absolute;
+  position: ${(p) => (p.displayContentWhenPending ? "relative" : "absolute")};
   top: 0;
   left: 0;
   right: 0;
@@ -55,20 +55,26 @@ const SpinnerContainer = styled.View `
   justify-content: center;
 `;
 const ButtonContainer = (props) => {
-    const { Icon, iconPosition = "right", children, hide = false, size = "medium", iconName } = props;
+    const { Icon, iconPosition = "right", children, hide = false, size = "medium", iconName, pending, displayContentWhenPending, } = props;
     const theme = useTheme();
     const { text } = getButtonColorStyle(theme.colors, props);
     const IconNode = useMemo(() => (iconName && React.createElement(IconComponent, { name: iconName, size: ctaIconSize[size], color: text.color })) ||
         (Icon && React.createElement(Icon, { size: ctaIconSize[size], color: text.color })), [iconName, size, Icon, text.color]);
+    const textColor = useMemo(() => (pending ? theme.colors.neutral.c50 : text.color), [pending, theme.colors.neutral.c50, text.color]);
     return (React.createElement(Container, { hide: hide },
-        iconPosition === "right" && children ? (React.createElement(Text, { variant: ctaTextType[size], fontWeight: "semiBold", color: text.color }, children)) : null,
-        IconNode && (React.createElement(IconContainer, { iconButton: !children, iconPosition: iconPosition }, IconNode)),
-        iconPosition === "left" && children ? (React.createElement(Text, { variant: ctaTextType[size], fontWeight: "semiBold", color: text.color }, children)) : null));
+        iconPosition === "right" && children ? (React.createElement(Text, { variant: ctaTextType[size], fontWeight: "semiBold", color: textColor }, children)) : null,
+        pending && displayContentWhenPending ? (React.createElement(IconContainer, { iconPosition: iconPosition },
+            React.createElement(SpinnerContainer, { displayContentWhenPending: true },
+                React.createElement(ActivityIndicator, { color: theme.colors.neutral.c50, animating: true })))) : IconNode ? (React.createElement(IconContainer, { iconButton: !children, iconPosition: iconPosition }, IconNode)) : null,
+        iconPosition === "left" && children ? (React.createElement(Text, { variant: ctaTextType[size], fontWeight: "semiBold", color: textColor }, children)) : null));
 };
 const Button = (props) => {
-    const { Icon, children, type = "default", iconName } = props;
-    return (React.createElement(Base, Object.assign({}, props, { type: type, iconButton: (!!Icon || !!iconName) && !children, activeOpacity: 0.5 }),
-        React.createElement(ButtonContainer, Object.assign({}, props, { type: type }))));
+    const { Icon, children, type = "default", iconName, disabled = false, pending = false, displayContentWhenPending = false, } = props;
+    const theme = useTheme();
+    return (React.createElement(Base, Object.assign({}, props, { type: type, iconButton: (!!Icon || !!iconName) && !children, activeOpacity: 0.5, disabled: disabled || pending }),
+        React.createElement(ButtonContainer, Object.assign({}, props, { type: type, hide: pending && !displayContentWhenPending })),
+        pending && !displayContentWhenPending ? (React.createElement(SpinnerContainer, { displayContentWhenPending: displayContentWhenPending },
+            React.createElement(ActivityIndicator, { color: theme.colors.neutral.c50, animating: true }))) : null));
 };
 export const PromisableButton = (props) => {
     const { Icon, children, onPress, type = "main", disabled = false, iconName } = props;

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,7 +1,7 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.7.8",
-  "description": "Ledger Live - Desktop UI",
+  "version": "0.7.11",
+  "description": "Ledger Live - React Native UI",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",
   "author": "Ledger Live Team <team-live@ledger.fr>",