@ledgerhq/native-ui 0.15.0 → 0.15.1-next.0

package/lib/components/Cards/FullBackgroundCard/ColoredGradient.js

@@ -5,7 +5,7 @@ const StyledSVG = styled(Svg) `
   position: absolute;
   bottom: 0;
   width: 100%;
-  height: 100%;
+  height: 164;
 `;
 export default function Gradient({ color, opacityColor, style }) {
     return (React.createElement(StyledSVG, { style: style },

package/lib/components/Cards/FullBackgroundCard/index.js

@@ -31,6 +31,6 @@ const FullBackgroundCard = ({ variant, backgroundImage, tag, description, onPres
                     React.createElement(TouchableOpacity, { onPress: onDismiss, style: { top: -8, right: -8 } },
                         React.createElement(Flex, { bg: "neutral.c30", p: "6px", borderRadius: 24 },
                             React.createElement(Icon, { name: "Close", size: 12, color: "neutral.c100" })))),
-                description ? (React.createElement(Text, { variant: "h4", fontWeight: "semiBold", color: "neutral.c100", numberOfLines: 3, height: "84px", lineHeight: "28px" }, highlight(description, "h4"))) : null))));
+                description ? (React.createElement(Text, { variant: "h4", fontWeight: "semiBold", color: "neutral.c100", numberOfLines: 3, height: "96px", lineHeight: "32.4px" }, highlight(description, "h4"))) : null))));
 };
 export default FullBackgroundCard;

package/lib/components/Cards/InformativeCard/index.d.ts

@@ -1,10 +1,11 @@
 import React from "react";
-import { TouchableOpacityProps } from "react-native";
+import { TouchableOpacityProps, ImageProps } from "react-native";
 export type CardProps = TouchableOpacityProps & {
-    tag?: string;
-    title?: string;
+    tag?: React.ReactNode;
+    title?: React.ReactNode;
     imageUrl?: string;
     onClickCard?: () => void;
+    imageProps?: Partial<ImageProps>;
 };
-declare const InformativeCard: (props: CardProps) => React.ReactElement;
-export default InformativeCard;
+declare const _default: React.MemoExoticComponent<(props: CardProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>>;
+export default _default;

package/lib/components/Cards/InformativeCard/index.js

@@ -1,5 +1,5 @@
-import React from "react";
-import { TouchableOpacity, Image } from "react-native";
+import React, { memo } from "react";
+import { TouchableOpacity, Image, StyleSheet, } from "react-native";
 import styled from "styled-components/native";
 import Text from "../../Text";
 import Flex from "../../Layout/Flex";
@@ -7,19 +7,25 @@ const Base = styled(TouchableOpacity) ``;
 const ImageContent = styled(Image) `
   border-radius: 8px;
 `;
+const styles = StyleSheet.create({
+    image: {
+        flex: 1,
+        backgroundColor: "#fff",
+        width: "100%",
+    },
+});
 const CardContainer = (props) => {
-    const { imageUrl, title, tag } = props;
+    const { imageUrl, title, tag, imageProps } = props;
     return (React.createElement(Flex, { flexDirection: "row" },
-        React.createElement(Flex, { justifyContent: "space-between", alignItems: "flex-start", py: 2, pr: 4, flex: 1 },
+        React.createElement(Flex, { justifyContent: "space-between", alignItems: "flex-start", py: 2, pr: imageUrl ? 4 : 2, flex: 1 },
             React.createElement(Text, { variant: "body", fontWeight: "medium", color: "neutral.c100", numberOfLines: 2 }, title),
             React.createElement(Text, { variant: "paragraph", fontWeight: "medium", color: "neutral.c70", numberOfLines: 1, mt: 4 }, tag)),
-        React.createElement(Flex, { width: 100, height: 75 },
-            React.createElement(ImageContent, { source: {
-                    uri: imageUrl,
-                }, style: { width: "100%", height: "100%" } }))));
+        imageUrl && (React.createElement(ImageContent, Object.assign({ source: {
+                uri: imageUrl,
+            }, style: styles.image }, imageProps)))));
 };
 const InformativeCard = (props) => {
     return (React.createElement(Base, Object.assign({}, props, { activeOpacity: 0.5, onPress: props.onClickCard }),
         React.createElement(CardContainer, Object.assign({}, props))));
 };
-export default InformativeCard;
+export default memo(InformativeCard);

package/lib/components/Layout/Modals/BaseModal/index.d.ts

@@ -19,4 +19,4 @@ export type BaseModalProps = {
 } & Partial<ModalProps>;
 export declare function ModalHeader({ Icon, iconColor, title, description, subtitle, }: Pick<BaseModalProps, "Icon" | "iconColor" | "title" | "description" | "subtitle">): React.ReactElement | null;
 export declare function ModalHeaderCloseButton({ onClose, }: Pick<BaseModalProps, "onClose">): React.ReactElement;
-export default function BaseModal({ isOpen, onClose, noCloseButton, safeContainerStyle, containerStyle, modalStyle, preventBackdropClick, Icon, iconColor, title, description, subtitle, children, ...rest }: BaseModalProps): React.ReactElement;
+export default function BaseModal({ isOpen, onClose, noCloseButton, safeContainerStyle, containerStyle, modalStyle, preventBackdropClick, Icon, iconColor, title, description, subtitle, children, onModalHide, ...rest }: BaseModalProps): React.ReactElement;

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

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from "react";
+import React, { useCallback } from "react";
 import ReactNativeModal from "react-native-modal";
 import styled from "styled-components/native";
 import sizes from "../../../../helpers/getDeviceSize";
@@ -74,7 +74,7 @@ export function ModalHeaderCloseButton({ onClose, }) {
             React.createElement(Icons.CloseMedium, { color: "neutral.c100", size: "20px" }))));
 }
 export default function BaseModal(_a) {
-    var { isOpen, onClose = () => { }, noCloseButton, safeContainerStyle = {}, containerStyle = {}, modalStyle = {}, preventBackdropClick, Icon, iconColor, title, description, subtitle, children } = _a, rest = __rest(_a, ["isOpen", "onClose", "noCloseButton", "safeContainerStyle", "containerStyle", "modalStyle", "preventBackdropClick", "Icon", "iconColor", "title", "description", "subtitle", "children"]);
+    var { isOpen, onClose = () => { }, noCloseButton, safeContainerStyle = {}, containerStyle = {}, modalStyle = {}, preventBackdropClick, Icon, iconColor, title, description, subtitle, children, onModalHide } = _a, rest = __rest(_a, ["isOpen", "onClose", "noCloseButton", "safeContainerStyle", "containerStyle", "modalStyle", "preventBackdropClick", "Icon", "iconColor", "title", "description", "subtitle", "children", "onModalHide"]);
     const backDropProps = preventBackdropClick
         ? {}
         : {
@@ -82,7 +82,14 @@ export default function BaseModal(_a) {
             onBackButtonPress: onClose,
             onSwipeComplete: onClose,
         };
-    return (React.createElement(ReactNativeModal, Object.assign({}, backDropProps, rest, { isVisible: isOpen, deviceWidth: width, deviceHeight: height, useNativeDriver: true, useNativeDriverForBackdrop: true, hideModalContentWhileAnimating: true, onModalHide: onClose, style: [defaultModalStyle, modalStyle] }),
+    // Workaround: until this, onModalHide={onClose}, making onClose being called twice and onModalHide being never called
+    // The real fix would be to have onModalHide={onModalHide} and make sure every usage on onClose in the consumers of this component
+    // expect the correct behavior
+    const onModalHideWithClose = useCallback(() => {
+        onClose();
+        onModalHide && onModalHide();
+    }, [onClose, onModalHide]);
+    return (React.createElement(ReactNativeModal, Object.assign({}, backDropProps, rest, { isVisible: isOpen, deviceWidth: width, deviceHeight: height, useNativeDriver: true, useNativeDriverForBackdrop: true, hideModalContentWhileAnimating: true, onModalHide: onModalHideWithClose, style: [defaultModalStyle, modalStyle] }),
         React.createElement(SafeContainer, { style: safeContainerStyle },
             React.createElement(Container, { style: containerStyle },
                 !noCloseButton && React.createElement(ModalHeaderCloseButton, { onClose: onClose }),

package/lib/components/cta/Link/index.js

@@ -5,7 +5,7 @@ import Text from "../../Text";
 import { getLinkColors } from "./getLinkStyle";
 import { ctaIconSize, ctaTextType } from "../getCtaStyle";
 const IconContainer = styled.View `
-  ${(p) => p.iconLink ? "" : p.iconPosition === "left" ? `margin-right: 6px;` : `margin-left: 6px;`}
+  ${(p) => p.iconLink ? "" : p.iconPosition === "left" ? `margin-right: 4px;` : `margin-left: 4px;`}
 `;
 export const Base = styled(TouchableOpacity) `
   flex-direction: row;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.15.0",
+  "version": "0.15.1-next.0",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -133,7 +133,7 @@
     "react-native-reanimated": "^2.8.0",
     "react-native-web": "~0.17.5",
     "regenerator-runtime": "^0.13.9",
-    "rimraf": "^3.0.2",
+    "rimraf": "^4.1.2",
     "styled-components": "^5.3.3",
     "stylelint": "^14.9.1",
     "stylelint-config-recommended": "^8.0.0",