@ledgerhq/native-ui 0.7.10 → 0.7.13

package/components/Form/SelectableList.js

@@ -10,10 +10,10 @@ const ElementContainer = styled(Flex).attrs({
 function Element(props) {
     const { first, value, selected, disabled, onPress, children, Icon, renderRight: RenderRight, } = props;
     return (React.createElement(TouchableOpacity, { onPress: onPress, disabled: disabled },
-        React.createElement(ElementContainer, { p: 6, mt: first ? 0 : 4, backgroundColor: selected ? "primary.c20" : "neutral.c00", border: "1px solid", borderColor: selected ? "primary.c100" : "neutral.c40", borderRadius: 1, flexDirection: "row", alignItems: "center" },
+        React.createElement(ElementContainer, { p: 6, mt: first ? 0 : 4, backgroundColor: selected ? "primary.c20" : "transparent", border: "1px solid", borderColor: selected ? "primary.c50" : "neutral.c40", borderRadius: 1, flexDirection: "row", alignItems: "center" },
             Icon && (React.createElement(Flex, { mr: 6, flexShrink: 0 },
-                React.createElement(Icon, { size: 24, color: disabled ? "neutral.c50" : "neutral.c100" }))),
-            React.createElement(Text, { variant: "large", flex: 1, color: disabled ? "neutral.c50" : "neutral.c100" }, children || value),
+                React.createElement(Icon, { size: 24, color: disabled ? "neutral.c50" : selected ? "primary.c90" : "neutral.c100" }))),
+            React.createElement(Text, { variant: "large", flex: 1, color: disabled ? "neutral.c50" : selected ? "primary.c90" : "neutral.c100" }, children || value),
             RenderRight && (React.createElement(Flex, { pl: 6, flexShrink: 0 }, React.isValidElement(RenderRight) ? RenderRight : React.createElement(RenderRight, Object.assign({}, props)))))));
 }
 function SelectableList({ currentValue, onChange, children }) {

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

@@ -20,6 +20,9 @@ import { BoxedIcon } from "../../../Icon";
 import { Flex } from "../../index";
 import { space } from "styled-system";
 const { width, height } = sizes;
+const SafeContainer = styled.SafeAreaView `
+  background-color: ${(p) => p.theme.colors.background.main};
+`;
 const Container = styled.View `
   background-color: ${(p) => p.theme.colors.background.main};
   width: 100%;
@@ -75,10 +78,11 @@ export default function BaseModal(_a) {
             onSwipeComplete: onClose,
         };
     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(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))));
+        React.createElement(SafeContainer, null,
+            React.createElement(Container, { style: containerStyle },
+                !noCloseButton && (React.createElement(CloseContainer, null,
+                    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/package.json

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