@ledgerhq/native-ui 0.6.7 → 0.7.2

package/components/Loader/ProgressLoader/index.d.ts

@@ -1,11 +1,13 @@
 import React from "react";
 declare type Props = {
     progress?: number;
+    infinite: boolean;
     onPress?: () => void;
-    Icon?: React.ComponentType<{
-        color: string;
-        size: number;
-    }>;
+    mainColor: string;
+    secondaryColor: string;
+    radius: number;
+    strokeWidth: number;
+    children: React.ReactNode;
 };
-declare const ProgressLoader: ({ progress, onPress, Icon }: Props) => React.ReactElement;
+declare const ProgressLoader: ({ progress, infinite, mainColor, secondaryColor, onPress, radius, strokeWidth, children, }: Props) => React.ReactElement;
 export default ProgressLoader;

package/components/Loader/ProgressLoader/index.js

@@ -1,24 +1,47 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Svg, Circle, G } from "react-native-svg";
 import { useTheme } from "styled-components/native";
 import { TouchableOpacity } from "react-native";
-const radius = 25;
-const strokeWidth = 2;
-const normalizedRadius = radius - strokeWidth / 2;
-const circumference = normalizedRadius * 2 * Math.PI;
-const iconSize = radius * 0.88;
-const iconOffset = radius - iconSize / 2;
-const ProgressLoader = ({ progress = 0, onPress, Icon }) => {
+import { Flex } from "../../Layout";
+import Animated, { useAnimatedStyle, useSharedValue, withRepeat, withTiming, cancelAnimation, Easing, } from "react-native-reanimated";
+const ProgressLoader = ({ progress = 0, infinite, mainColor, secondaryColor, onPress, radius = 48, strokeWidth = 4, children, }) => {
     const { colors } = useTheme();
-    const backgroundColor = colors.primary.c20;
-    const progressColor = colors.primary.c90;
+    const backgroundColor = secondaryColor || colors.neutral.c40;
+    const progressColor = mainColor || colors.primary.c80;
+    const normalizedRadius = radius - strokeWidth / 2;
+    const circumference = normalizedRadius * 2 * Math.PI;
     const strokeDashoffset = circumference - progress * circumference;
-    return (React.createElement(TouchableOpacity, { disabled: !onPress, onPress: onPress },
-        React.createElement(Svg, { width: radius * 2, height: radius * 2 },
-            React.createElement(Circle, { cx: radius, cy: radius, r: radius * 0.92, fill: "transparent", stroke: backgroundColor, strokeDashoffset: 0, strokeWidth: strokeWidth }),
-            React.createElement(G, { transform: `rotate(-90) translate(-${radius * 2}, 0)` },
-                React.createElement(Circle, { cx: radius, cy: radius, r: radius * 0.92, fill: "transparent", stroke: progressColor, strokeWidth: strokeWidth, strokeDasharray: `${circumference} ${circumference}`, strokeDashoffset: strokeDashoffset })),
-            Icon ? (React.createElement(G, { transform: `translate(${iconOffset}, ${iconOffset})` },
-                React.createElement(Icon, { color: progressColor, size: iconSize }))) : null)));
+    const rotation = useSharedValue(0);
+    const animatedStyles = useAnimatedStyle(() => ({
+        transform: [
+            {
+                rotateZ: `${rotation.value}deg`,
+            },
+        ],
+    }), [rotation.value]);
+    useEffect(() => {
+        rotation.value = withRepeat(withTiming(360, {
+            duration: 1000,
+            easing: Easing.linear,
+        }), -1);
+        return () => cancelAnimation(rotation);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    if (infinite) {
+        return (React.createElement(TouchableOpacity, { disabled: !onPress, onPress: onPress, activeOpacity: 1 },
+            React.createElement(Flex, { alignItems: "center", justifyContent: "center" },
+                React.createElement(Animated.View, { style: animatedStyles },
+                    React.createElement(Svg, { width: radius * 2, height: radius * 2 },
+                        React.createElement(Circle, { cx: radius, cy: radius, fill: "transparent", r: radius * 0.92, stroke: backgroundColor, strokeWidth: strokeWidth }),
+                        React.createElement(Circle, { cx: radius, cy: radius, fill: "transparent", r: radius * 0.92, stroke: mainColor, strokeWidth: strokeWidth, strokeDasharray: `${circumference / 4}, ${circumference}`, strokeDashoffset: "500", strokeLinecap: "round" }))),
+                React.createElement(Flex, { position: "absolute" }, children))));
+    }
+    return (React.createElement(TouchableOpacity, { disabled: !onPress, onPress: onPress, activeOpacity: 1 },
+        React.createElement(Flex, { alignItems: "center", justifyContent: "center" },
+            React.createElement(Svg, { width: radius * 2, height: radius * 2 },
+                React.createElement(Circle, { cx: radius, cy: radius, r: radius * 0.92, fill: "transparent", stroke: backgroundColor, strokeDashoffset: 0, strokeWidth: strokeWidth }),
+                React.createElement(G, { transform: `rotate(-90) translate(-${radius * 2}, 0)` },
+                    React.createElement(Circle, { cx: radius, cy: radius, r: radius * 0.92, fill: "transparent", stroke: progressColor, strokeWidth: strokeWidth, strokeDasharray: `${circumference} ${circumference}`, strokeDashoffset: strokeDashoffset }))),
+            React.createElement(Flex, { position: "absolute" }, children))));
 };
 export default ProgressLoader;

package/components/Loader/index.d.ts

@@ -1,2 +1,2 @@
-export { default as Loader } from "./ProgressLoader";
+export { default as ProgressLoader } from "./ProgressLoader";
 export { default as InfiniteLoader } from "./InfiniteLoader";

package/components/Loader/index.js

@@ -1,2 +1,2 @@
-export { default as Loader } from "./ProgressLoader";
+export { default as ProgressLoader } from "./ProgressLoader";
 export { default as InfiniteLoader } from "./InfiniteLoader";

package/components/Text/getTextStyle.d.ts

@@ -1,16 +1,19 @@
 import { TextVariants } from "../../styles/theme";
 import { BaseTextProps } from "./index";
 export declare type FontWeightTypes = "medium" | "semiBold" | "bold";
+export declare function getBracketSize({ variant }: {
+    variant?: TextVariants;
+}): number;
 export declare function getTextTypeStyle({ bracket }: {
     bracket?: boolean;
 }): Record<TextVariants, {
     fontFamily: string;
-    lineHeight?: number;
+    lineHeight?: string;
     paddingTop?: number;
     textTransform?: string;
 }>;
 export declare function getTextStyle({ variant, bracket, fontWeight, }: Partial<BaseTextProps>): {
     fontFamily: string;
-    lineHeight?: number;
+    lineHeight?: string;
     paddingTop?: number;
 };

package/components/Text/getTextStyle.js

@@ -1,20 +1,37 @@
+const bracketSizes = {
+    h1: 32,
+    h2: 28,
+    h3: 20,
+    h4: 18,
+    large: 20,
+    body: 20,
+    bodyLineHeight: 20,
+    paragraph: 20,
+    paragraphLineHeight: 18,
+    small: 16,
+    subtitle: 16,
+    tiny: 16,
+};
+export function getBracketSize({ variant }) {
+    return variant ? bracketSizes[variant] : 20;
+}
 export function getTextTypeStyle({ bracket }) {
     return {
         h1: {
             fontFamily: "Alpha",
-            lineHeight: 32,
-            paddingTop: bracket ? 15 : 0,
+            lineHeight: "32px",
+            paddingTop: bracket ? 5 : 0,
             textTransform: "uppercase",
         },
         h2: {
             fontFamily: "Alpha",
-            lineHeight: 28,
-            paddingTop: bracket ? 10 : 0,
+            lineHeight: "28px",
+            paddingTop: bracket ? 3 : 0,
             textTransform: "uppercase",
         },
         h3: {
             fontFamily: "Alpha",
-            lineHeight: 20,
+            lineHeight: "20px",
             paddingTop: bracket ? 5 : 0,
             textTransform: "uppercase",
         },
@@ -30,14 +47,14 @@ export function getTextTypeStyle({ bracket }) {
         },
         bodyLineHeight: {
             fontFamily: "Inter",
-            lineHeight: 20,
+            lineHeight: "20px",
         },
         paragraph: {
             fontFamily: "Inter",
         },
         paragraphLineHeight: {
             fontFamily: "Inter",
-            lineHeight: 18,
+            lineHeight: "18px",
         },
         small: {
             fontFamily: "Inter",

package/components/Text/index.d.ts

@@ -10,7 +10,7 @@ export interface BaseTextProps extends TextProps, BaseStyledProps, FontSizeProps
     fontFamily?: string;
     fontSize?: number | string | TextVariants;
     color?: string;
-    lineHeight?: number | string;
+    lineHeight?: string;
     bracket?: boolean;
     textTransform?: TextStyle["textTransform"];
     uppercase?: boolean;

package/components/Text/index.js

@@ -16,7 +16,7 @@ import baseStyled from "../styled";
 import BracketRight from "../../icons/BracketLeft";
 import BracketLeft from "../../icons/BracketRight";
 import { getColor } from "../../styles";
-import { getTextStyle } from "./getTextStyle";
+import { getTextStyle, getBracketSize } from "./getTextStyle";
 const uppercase = system({
     uppercase: {
         property: "textTransform",
@@ -46,8 +46,8 @@ const T = styled.View `
   align-items: center;
 `;
 const BracketText = (_a) => {
-    var { children, color = "neutral.c100", lineHeight } = _a, props = __rest(_a, ["children", "color", "lineHeight"]);
-    const size = lineHeight || getTextStyle(props).lineHeight;
+    var { children, color = "neutral.c100" } = _a, props = __rest(_a, ["children", "color"]);
+    const size = getBracketSize(props);
     const theme = useTheme();
     const c = theme ? getColor(theme, color) : "transparent";
     return (React.createElement(T, null,

package/components/chart/index.js

@@ -38,7 +38,7 @@ const Chart = ({ data, color, tickFormat = "MMM", valueKey = "value", height = 1
                     tickLabels: {
                         fill: theme.colors.neutral.c80,
                         fontSize: 12,
-                        lineHeight: 14.52,
+                        lineHeight: "14.52px",
                     },
                     grid: { display: "none" },
                 } }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.6.7",
+  "version": "0.7.2",
   "description": "Ledger Live - Desktop UI",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",
@@ -24,14 +24,14 @@
     "@types/styled-system": "^5.1.13",
     "color": "^3.1.3",
     "moment": "^2.29.1",
-    "react-native-modal": "^12.0.3",
+    "react-native-modal": "^13.0.0",
     "rn-range-slider": "^2.1.1",
     "styled-system": "^5.1.5",
     "victory-native": "^35.5.5"
   },
   "peerDependencies": {
     "react": "^17.0.2",
-    "react-native": "^0.64.0",
+    "react-native": "^0.65.0",
     "react-native-reanimated": "^2.2.4",
     "react-native-svg": "^12.1.1",
     "styled-components": "^5.3.3"