@ledgerhq/native-ui 0.11.0 → 0.12.0-nightly.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/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",
+  "version": "0.12.0-nightly.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",