@ledgerhq/native-ui 0.11.0-nightly.0 → 0.12.0-next.0

package/lib/components/Carousel/index.js

@@ -2,9 +2,15 @@ import React, { useEffect, useState, useRef, useCallback } from "react";
 import { Platform } from "react-native";
 import styled from "styled-components/native";
 import { Flex, SlideIndicator } from "../index";
+import { I18nManager } from "react-native";
 const HorizontalScrollView = styled.ScrollView.attrs({ horizontal: true }) `
   flex: 1;
 `;
+/*
+In RTL activated, this carousel is making a jump to the last item at start. It's patched by scrolling back to the activeIndex item, but i don't know how to patch this definitely.
+It's seems like a behavior that react-native is doing to start from the end of list, except we don't want this kind of RTL behavior as this list is "time based" and need to always stay LTR.
+Except a visual jump on RTL layout.
+*/
 function Carousel({ activeIndex = 0, autoDelay, restartAfterEnd = true, scrollOnSidePress = false, containerProps, slideIndicatorContainerProps, scrollViewProps, onChange, onOverflow, IndicatorComponent = SlideIndicator, maxDurationOfTap, children, onAutoChange, onManualChange, }) {
     const [init, setInit] = useState(false);
     const [activeIndexState, setActiveIndexState] = useState(activeIndex);
@@ -25,17 +31,15 @@ function Carousel({ activeIndex = 0, autoDelay, restartAfterEnd = true, scrollOn
     }, [itemWidth]);
     useEffect(() => {
         // On init scroll to the active index prop location - if specified.
-        if (init && activeIndex) {
+        if (init && typeof activeIndex === "number") {
             scrollToIndex(activeIndex, false);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [init]);
+    }, [activeIndex, init, scrollToIndex]);
     useEffect(() => {
         if (scrollToIndex && typeof activeIndex === "number") {
-            scrollToIndex(activeIndex);
+            scrollToIndex(activeIndex, false);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [activeIndex]);
+    }, [activeIndex, scrollToIndex]);
     const onContentSizeChange = (contentWidth, contentHeight) => {
         dimensions.current = { contentWidth, contentHeight };
         setInit(true);
@@ -109,7 +113,10 @@ function Carousel({ activeIndex = 0, autoDelay, restartAfterEnd = true, scrollOn
                 disableTimer.current = true;
             }, onScrollEndDrag: () => {
                 disableTimer.current = false;
-            }, pagingEnabled: Platform.OS !== "web", showsHorizontalScrollIndicator: false, scrollEventThrottle: 200, contentContainerStyle: { width: `${fullWidth}%` }, decelerationRate: "fast", onTouchStart: scrollOnSidePress ? onStartTap : undefined, onTouchEnd: scrollOnSidePress ? onEndTap : undefined }, scrollViewProps), React.Children.map(children, (child, index) => (React.createElement(Flex, { key: index, flex: 1 }, child)))),
+            }, pagingEnabled: Platform.OS !== "web", showsHorizontalScrollIndicator: false, scrollEventThrottle: 200, contentContainerStyle: {
+                width: `${fullWidth}%`,
+                flexDirection: I18nManager.isRTL && Platform.OS !== "ios" ? "row-reverse" : "row",
+            }, decelerationRate: "fast", onTouchStart: scrollOnSidePress ? onStartTap : undefined, onTouchEnd: scrollOnSidePress ? onEndTap : undefined }, scrollViewProps), React.Children.map(children, (child, index) => (React.createElement(Flex, { key: index, flex: 1 }, child)))),
         React.createElement(Flex, Object.assign({ my: 8 }, slideIndicatorContainerProps), React.isValidElement(IndicatorComponent) ? (IndicatorComponent) : (React.createElement(IndicatorComponent, { activeIndex: activeIndexState || 0, onChange: (index) => {
                 scrollToIndex(index);
                 setResetTimer({});

package/lib/components/Layout/List/VerticalTimeline/TimelineIndicator.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { Props as FlexProps } from "../../Flex";
+import { ItemStatus } from ".";
 export declare type Props = FlexProps & {
-    status: "inactive" | "active" | "completed";
+    status: ItemStatus;
     isFirstItem?: boolean;
     isLastItem?: boolean;
 };

package/lib/components/Layout/List/VerticalTimeline/TimelineItem.d.ts

@@ -5,5 +5,7 @@ export declare type Props = {
     formatEstimatedTime?: (_: number) => string;
     isFirstItem?: boolean;
     isLastItem?: boolean;
+    setActiveIndex?: (_: number) => void;
+    index: number;
 };
-export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, isLastItem, }: Props): JSX.Element;
+export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, isLastItem, setActiveIndex, index, }: Props): JSX.Element;

package/lib/components/Layout/List/VerticalTimeline/TimelineItem.js

@@ -1,5 +1,6 @@
-import React, { useCallback, useState } from "react";
-import Animated, { Easing, useAnimatedStyle, useDerivedValue, withTiming, } from "react-native-reanimated";
+import React, { useCallback } from "react";
+import { Pressable } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
 import styled from "styled-components/native";
 import { Flex } from "../..";
 import { Text, Tag } from "../../..";
@@ -38,36 +39,45 @@ const Container = styled(Flex) `
   border: 1px solid ${(p) => getContainerBorder(p.theme, p.status, p.isLastItem)};
   padding: 20px 16px;
 `;
-export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, isLastItem, }) {
-    const [height, setHeight] = useState(0);
-    const transition = useDerivedValue(() => {
-        return item.status === "active"
-            ? withTiming(1, { duration: 300, easing: Easing.out(Easing.linear) })
-            : withTiming(0, { duration: 300, easing: Easing.in(Easing.linear) });
-    }, [item.status]);
-    const handleLayoutChange = useCallback((event) => {
-        var _a, _b;
-        if (height === 0 && ((_b = (_a = event === null || event === void 0 ? void 0 : event.nativeEvent) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.height) > 0) {
-            setHeight(event.nativeEvent.layout.height);
-        }
-    }, [setHeight, height]);
-    const style = useAnimatedStyle(() => ({
-        height: transition.value * height + 1,
-        overflow: "hidden",
-    }), [height, transition.value]);
-    return (React.createElement(Flex, { flexDirection: "row" },
-        React.createElement(TimelineIndicator, { status: item.status, isFirstItem: isFirstItem, isLastItem: isLastItem, mr: 4 }),
-        React.createElement(Container, { status: item.status, isLastItem: isLastItem, mb: 4 },
-            React.createElement(Flex, { flexDirection: "row", justifyContent: "space-between" },
-                React.createElement(Text, { variant: "body", color: item.status === "inactive"
-                        ? "neutral.c80"
-                        : isLastItem
-                            ? "success.c100"
-                            : "primary.c90" }, item.title),
-                (item === null || item === void 0 ? void 0 : item.estimatedTime) && item.status === "active" && (React.createElement(Tag, null, formatEstimatedTime
-                    ? formatEstimatedTime(item.estimatedTime)
-                    : `${item.estimatedTime / 60} min`))),
-            React.createElement(Animated.View, { style: style }, item.renderBody && (React.createElement(Flex, { position: "relative" },
-                React.createElement(Flex, { onLayout: handleLayoutChange, pt: 6, position: "absolute", opacity: 0 }, item.renderBody(false)),
-                React.createElement(Flex, { pt: 6 }, item.renderBody(item.status === "active"))))))));
+export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, isLastItem, setActiveIndex, index, }) {
+    /**
+     * Having an initial value of null will prevent having "height: 0" before the
+     * initial call of onLayout.
+     * The component will just layout normally without an animation which is ok
+     * since this will happen only on the first step.
+     * Without this default behavior, there are issues on iOS where sometimes the
+     * height is stuck at 0.
+     */
+    const sharedHeight = useSharedValue(null);
+    const handleLayout = useCallback(({ nativeEvent: { layout } }) => {
+        sharedHeight.value = withTiming(layout.height, { duration: 300 });
+    }, [sharedHeight]);
+    const animatedStyle = useAnimatedStyle(() => {
+        var _a;
+        return ({
+            /**
+             * If it's null the component still renders normally at its full height
+             * without its height being derived from an animated value.
+             */
+            height: (_a = sharedHeight.value) !== null && _a !== void 0 ? _a : undefined,
+        });
+    }, []);
+    const handlePress = useCallback(() => {
+        setActiveIndex && setActiveIndex(index);
+    }, [setActiveIndex, index]);
+    return (React.createElement(Pressable, { onPress: handlePress },
+        React.createElement(Flex, { flexDirection: "row" },
+            React.createElement(TimelineIndicator, { status: item.status, isFirstItem: isFirstItem, isLastItem: isLastItem, mr: 4 }),
+            React.createElement(Container, { status: item.status, isLastItem: isLastItem, mb: 4 },
+                React.createElement(Flex, { flexDirection: "row", justifyContent: "space-between" },
+                    React.createElement(Text, { variant: "body", color: item.status === "inactive"
+                            ? "neutral.c80"
+                            : isLastItem
+                                ? "success.c100"
+                                : "primary.c90" }, item.title),
+                    (item === null || item === void 0 ? void 0 : item.estimatedTime) && item.status === "active" && (React.createElement(Tag, null, formatEstimatedTime
+                        ? formatEstimatedTime(item.estimatedTime)
+                        : `${item.estimatedTime / 60} min`))),
+                React.createElement(Animated.ScrollView, { style: animatedStyle },
+                    React.createElement(Animated.View, { onLayout: handleLayout }, item.renderBody && item.status === "active" ? (React.createElement(Flex, { pt: 6 }, item.renderBody(true))) : null))))));
 }

package/lib/components/Layout/List/VerticalTimeline/index.d.ts

@@ -1,6 +1,10 @@
 import { ReactNode } from "react";
 import { BaseStyledProps } from "src/components/styled";
-export declare type ItemStatus = "inactive" | "active" | "completed";
+export declare enum ItemStatus {
+    inactive = "inactive",
+    active = "active",
+    completed = "completed"
+}
 export declare type Item = {
     status: ItemStatus;
     title: string;
@@ -10,5 +14,10 @@ export declare type Item = {
 export declare type Props = BaseStyledProps & {
     steps?: Item[];
     formatEstimatedTime?: (_: number) => string;
+    setActiveIndex?: (arg0: number) => void;
 };
-export default function VerticalTimeline({ steps, formatEstimatedTime, ...props }: Props): JSX.Element;
+declare function VerticalTimeline({ steps, formatEstimatedTime, setActiveIndex, ...props }: Props): JSX.Element;
+declare namespace VerticalTimeline {
+    var ItemStatus: typeof import(".").ItemStatus;
+}
+export default VerticalTimeline;

package/lib/components/Layout/List/VerticalTimeline/index.js

@@ -12,7 +12,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from "react";
 import TimelineItem from "./TimelineItem";
 import { Flex } from "../..";
+export var ItemStatus;
+(function (ItemStatus) {
+    ItemStatus["inactive"] = "inactive";
+    ItemStatus["active"] = "active";
+    ItemStatus["completed"] = "completed";
+})(ItemStatus || (ItemStatus = {}));
 export default function VerticalTimeline(_a) {
-    var { steps, formatEstimatedTime } = _a, props = __rest(_a, ["steps", "formatEstimatedTime"]);
-    return (React.createElement(Flex, Object.assign({}, props, { flexDirection: "column" }), steps === null || steps === void 0 ? void 0 : steps.map((step, index) => (React.createElement(TimelineItem, { key: step.title, item: step, formatEstimatedTime: formatEstimatedTime, isFirstItem: index === 0, isLastItem: index === steps.length - 1 })))));
+    var { steps, formatEstimatedTime, setActiveIndex } = _a, props = __rest(_a, ["steps", "formatEstimatedTime", "setActiveIndex"]);
+    return (React.createElement(Flex, Object.assign({}, props, { flexDirection: "column" }), steps === null || steps === void 0 ? void 0 : steps.map((step, index) => (React.createElement(TimelineItem, { key: step.title, item: step, formatEstimatedTime: formatEstimatedTime, isFirstItem: index === 0, isLastItem: index === steps.length - 1, setActiveIndex: setActiveIndex, index: index })))));
 }
+VerticalTimeline.ItemStatus = ItemStatus;

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

@@ -17,6 +17,7 @@ const modalStyleOverrides = StyleSheet.create({
         flex: 1,
         justifyContent: "flex-end",
         margin: 0,
+        marginTop: 32,
     },
     safeContainer: {
         borderTopLeftRadius: 24,

package/lib/components/Navigation/StoriesIndicator/index.js

@@ -2,6 +2,7 @@ import React, { useEffect, useMemo } from "react";
 import styled from "styled-components/native";
 import Animated, { useAnimatedStyle, withTiming, useSharedValue, Easing, } from "react-native-reanimated";
 import { Flex } from "../../Layout";
+import { I18nManager } from "react-native";
 const ProgressBar = styled.View `
   background-color: ${(p) => p.theme.colors.primary.c100};
   border-radius: ${(p) => p.theme.radii[2]}px;
@@ -27,6 +28,10 @@ function StoryBar({ full = false, isActive, duration }) {
 }
 function StoriesIndicator({ activeIndex, slidesLength, duration }) {
     const storiesArray = useMemo(() => new Array(slidesLength).fill(0), [slidesLength]);
-    return (React.createElement(Flex, { flexDirection: "row", alignItems: "stretch", width: "100%" }, storiesArray.map((_, storyIndex) => (React.createElement(StoryBar, { key: storyIndex, full: activeIndex > storyIndex, isActive: activeIndex === storyIndex, duration: duration })))));
+    return (React.createElement(Flex, { flexDirection: "row", alignItems: "stretch", width: "100%", style: I18nManager.isRTL
+            ? {
+                transform: [{ scaleX: -1 }],
+            }
+            : undefined }, storiesArray.map((_, storyIndex) => (React.createElement(StoryBar, { key: storyIndex, full: activeIndex > storyIndex, isActive: activeIndex === storyIndex, duration: duration })))));
 }
 export default React.memo(StoriesIndicator);

package/lib/components/Text/index.d.ts

@@ -16,5 +16,5 @@ export interface BaseTextProps extends TextProps, BaseStyledProps, FontSizeProps
     uppercase?: boolean;
     children: React.ReactNode;
 }
-declare const Text: ({ children, bracket, ...props }: BaseTextProps) => JSX.Element;
+declare const Text: ({ children, bracket, textAlign, ...props }: BaseTextProps) => JSX.Element;
 export default Text;

package/lib/components/Text/index.js

@@ -56,9 +56,9 @@ const BracketText = (_a) => {
         React.createElement(BracketRight, { fill: c, width: size, height: size })));
 };
 const Text = (_a) => {
-    var { children, bracket } = _a, props = __rest(_a, ["children", "bracket"]);
+    var { children, bracket, textAlign = "left" } = _a, props = __rest(_a, ["children", "bracket", "textAlign"]);
     if (bracket)
         return React.createElement(BracketText, Object.assign({}, props), children);
-    return React.createElement(Base, Object.assign({}, props), children);
+    return (React.createElement(Base, Object.assign({ textAlign: textAlign }, props), children));
 };
 export default Text;

package/lib/components/cta/Button/getButtonStyle.js

@@ -3,6 +3,8 @@ export function getButtonColors(colors) {
         default: {
             primaryColor: colors.neutral.c100,
             secondaryColor: "rgba(0,0,255,0)",
+            pressedColor: "transparent",
+            pressedOutlineColor: "transparent",
         },
         disabled: {
             primaryColor: colors.neutral.c50,

package/lib/components/message/Log/Brackets.js

@@ -3,6 +3,7 @@ import styled, { useTheme } from "styled-components/native";
 import { Svg, Path } from "react-native-svg";
 import FlexBox from "../../Layout/Flex";
 import { getColor } from "../../../styles";
+import { I18nManager } from "react-native";
 const BracketContainer = styled(FlexBox).attrs({
     flexDirection: "column",
     position: "relative",
@@ -15,15 +16,22 @@ export const Bracket = ({ color, style, mb, mt }) => {
         React.createElement(Svg, { width: "17", height: "10", viewBox: "0 0 17 10" },
             React.createElement(Path, { d: "M16.8125 0H2.8125H0.8125V2V10H2.8125V2H16.8125V0Z", fill: fill }))));
 };
+const RTLBracketManager = ({ children }) => {
+    return (React.createElement(FlexBox, { style: { transform: I18nManager.isRTL ? [{ scaleX: -1 }] : undefined } }, children));
+};
 export const BracketTopLeft = ({ color }) => {
-    return React.createElement(Bracket, { color: color });
+    return (React.createElement(RTLBracketManager, null,
+        React.createElement(Bracket, { color: color })));
 };
 export const BracketTopRight = ({ color }) => {
-    return React.createElement(Bracket, { color: color, style: { transform: [{ scaleX: -1 }] } });
+    return (React.createElement(RTLBracketManager, null,
+        React.createElement(Bracket, { color: color, style: { transform: [{ scaleX: -1 }] } })));
 };
 export const BracketBottomLeft = ({ color }) => {
-    return React.createElement(Bracket, { color: color, style: { transform: [{ scaleY: -1 }] } });
+    return (React.createElement(RTLBracketManager, null,
+        React.createElement(Bracket, { color: color, style: { transform: [{ scaleY: -1 }] } })));
 };
 export const BracketBottomRight = ({ color }) => {
-    return React.createElement(Bracket, { color: color, style: { transform: [{ scale: -1 }] } });
+    return (React.createElement(RTLBracketManager, null,
+        React.createElement(Bracket, { color: color, style: { transform: [{ scale: -1 }] } })));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.11.0-nightly.0",
+  "version": "0.12.0-next.0",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -134,13 +134,13 @@
     "regenerator-runtime": "^0.13.9",
     "rimraf": "^3.0.2",
     "styled-components": "^5.3.3",
-    "typescript": "^4.4.4",
-    "victory": "^35.5.5",
-    "webpack": "^4.46.0",
     "stylelint": "^14.9.1",
     "stylelint-config-recommended": "^8.0.0",
     "stylelint-config-styled-components": "^0.1.1",
-    "stylelint-processor-styled-components": "^1.10.0"
+    "stylelint-processor-styled-components": "^1.10.0",
+    "typescript": "^4.4.4",
+    "victory": "^35.5.5",
+    "webpack": "^4.46.0"
   },
   "scripts": {
     "android": "expo start --android",