@ledgerhq/native-ui 0.19.0-nightly.1 → 0.19.1-next.0

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

@@ -27,7 +27,7 @@ const linesWidth = 2;
 const linesLength = 5000;
 const TopSegmentSvg = ({ status, hidden, height }) => {
     const theme = useTheme();
-    const strokeColor = status === "inactive" ? theme.colors.neutral.c50 : theme.colors.primary.c80;
+    const strokeColor = status === "inactive" ? theme.colors.neutral.c40 : theme.colors.primary.c80;
     const strokeDashArray = status === "inactive" ? `${dashLength}` : undefined;
     return (React.createElement(Flex, { height: height, width: "100%", overflow: "hidden" },
         React.createElement(Flex, { style: StyleSheet.absoluteFillObject, alignItems: "center" },
@@ -37,7 +37,7 @@ const TopSegmentSvg = ({ status, hidden, height }) => {
 const topSegmentDefaultHeight = Platform.OS === "android" ? 23 : 21; // difference due to how borders are drawn in android
 const BottomSegmentSvg = ({ status, hidden }) => {
     const theme = useTheme();
-    const strokeColor = status === "completed" ? theme.colors.primary.c80 : theme.colors.neutral.c50;
+    const strokeColor = status === "completed" ? theme.colors.primary.c80 : theme.colors.neutral.c40;
     const strokeDashArray = status === "completed" ? undefined : `${dashLength}`;
     return (React.createElement(Flex, { flex: 1, width: "100%", style: { transform: [{ scaleY: -1 }] }, overflow: "hidden" },
         React.createElement(Flex, { style: StyleSheet.absoluteFillObject, alignItems: "center" },
@@ -45,23 +45,24 @@ const BottomSegmentSvg = ({ status, hidden }) => {
                 React.createElement(Line, { x1: "0", y1: "0", x2: "0", y2: "100%", strokeWidth: hidden ? 0 : 2 * linesWidth, stroke: strokeColor, strokeDasharray: strokeDashArray, strokeDashoffset: `${dashLength}` })))));
 };
 const getIconBackground = (theme, status, isLastItem) => {
-    if (status === "completed") {
+    if (isLastItem) {
+        if (status === "inactive")
+            return theme.colors.success.c10;
         return "transparent";
     }
-    else if (isLastItem) {
-        return theme.colors.success.c10;
-    }
     else if (status === "active") {
         return theme.colors.neutral.c40;
     }
-    return theme.colors.background.main;
+    else {
+        return "transparent";
+    }
 };
 const getIconBorder = (theme, status, isLastItem) => {
     if (isLastItem) {
-        return theme.colors.success.c50;
+        return theme.colors.success.c70;
     }
     else if (status === "inactive") {
-        return theme.colors.neutral.c50;
+        return theme.colors.neutral.c40;
     }
     return theme.colors.primary.c80;
 };
@@ -79,7 +80,7 @@ export default function TimelineIndicator(_a) {
     const { colors } = useTheme();
     return (React.createElement(Flex, Object.assign({ flexDirection: "column", alignItems: "center" }, props),
         React.createElement(TopSegmentSvg, { status: status, hidden: isFirstItem, height: PixelRatio.roundToNearestPixel(topHeight || topSegmentDefaultHeight) }),
-        React.createElement(CenterCircle, { status: status, isLastItem: isLastItem }, status === "completed" && (React.createElement(CircledCheckSolidMedium, { color: isLastItem ? colors.success.c50 : colors.primary.c80, size: 20 }))),
+        React.createElement(CenterCircle, { status: status, isLastItem: isLastItem }, status === "completed" && (React.createElement(CircledCheckSolidMedium, { color: isLastItem ? colors.success.c70 : colors.primary.c80, size: 20 }))),
         React.createElement(BottomSegmentSvg, { status: status, hidden: isLastItem })));
 }
 TimelineIndicator.topSegmentDefaultHeight = topSegmentDefaultHeight;

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

@@ -11,7 +11,7 @@ const getContainerBackground = (theme, status) => {
         return "transparent";
     }
     else if (status === "active") {
-        return theme.colors.neutral.c20;
+        return theme.colors.opacityDefault.c05;
     }
     return "transparent";
 };
@@ -20,7 +20,7 @@ const getContainerBorder = (theme, status, isLastItem) => {
         return "transparent";
     }
     else if (isLastItem && status === "active") {
-        return theme.colors.success.c50;
+        return theme.colors.success.c70;
     }
     else if (status === "active") {
         return theme.colors.neutral.c40;
@@ -69,8 +69,8 @@ export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, i
                     : undefined }),
             React.createElement(Container, { status: item.status, isLastItem: isLastItem, mt: withExtraMarginOnActiveStep && !isFirstItem && item.status === "active" ? 4 : 0, mb: withExtraMarginOnActiveStep && !isLastItem && item.status === "active" ? 4 : 0 },
                 React.createElement(Flex, { flexDirection: "row", justifyContent: "space-between" },
-                    React.createElement(Text, { variant: "body", fontWeight: "semiBold", flexShrink: 1, color: item.status === "completed" && isLastItem
-                            ? "success.c40"
+                    React.createElement(Text, { variant: "body", fontWeight: item.status === "active" ? "semiBold" : "medium", flexShrink: 1, color: item.status === "completed" && isLastItem
+                            ? "success.c70"
                             : item.status === "active"
                                 ? "primary.c80"
                                 : "neutral.c70" }, item.status === "completed" ? (_a = item.doneTitle) !== null && _a !== void 0 ? _a : item.title : item.title),

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { StyleProp, ViewStyle } from "react-native";
 import { BaseTextProps } from "../../../Text";
 import { BaseStyledProps } from "src/components/styled";
 import { Item } from "../types";
@@ -12,8 +13,9 @@ export type Props = BaseStyledProps & {
      * Defaults to true.
      * */
     autoScroll?: boolean;
+    contentContainerStyle?: StyleProp<ViewStyle>;
 };
-declare function VerticalTimeline({ steps, formatEstimatedTime, setActiveIndex, header, autoScroll, ...props }: Props): JSX.Element;
+declare function VerticalTimeline({ steps, formatEstimatedTime, setActiveIndex, header, autoScroll, contentContainerStyle, ...props }: Props): JSX.Element;
 declare namespace VerticalTimeline {
     var BodyText: React.FC<BaseTextProps>;
     var SubtitleText: React.FC<BaseTextProps>;

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

@@ -10,13 +10,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useRef, useCallback } from "react";
-import { ScrollView, View } from "react-native";
+import { ScrollView, View, } from "react-native";
 import TimelineItem from "./TimelineItem";
 import Flex from "../../Flex";
 import Text from "../../../Text";
 import { ItemStatus } from "../types";
 export default function VerticalTimeline(_a) {
-    var { steps, formatEstimatedTime, setActiveIndex, header, autoScroll = true } = _a, props = __rest(_a, ["steps", "formatEstimatedTime", "setActiveIndex", "header", "autoScroll"]);
+    var { steps, formatEstimatedTime, setActiveIndex, header, autoScroll = true, contentContainerStyle } = _a, props = __rest(_a, ["steps", "formatEstimatedTime", "setActiveIndex", "header", "autoScroll", "contentContainerStyle"]);
     const scrollViewRef = useRef(null);
     const stepsContainerLayout = useRef();
     const onStepsContainerLayout = useCallback((evt) => {
@@ -28,7 +28,7 @@ export default function VerticalTimeline(_a) {
         const { layout } = evt.nativeEvent;
         scrollViewRef.current.scrollTo({ x: 0, y: stepsContainerLayout.current.y + layout.y });
     }, []);
-    return (React.createElement(ScrollView, { ref: scrollViewRef, onLayout: onStepsContainerLayout },
+    return (React.createElement(ScrollView, { ref: scrollViewRef, onLayout: onStepsContainerLayout, contentContainerStyle: contentContainerStyle },
         header,
         React.createElement(Flex, Object.assign({}, props, { onLayout: onStepsContainerLayout, flexDirection: "column" }), steps === null || steps === void 0 ? void 0 : steps.map((step, index) => (React.createElement(View, { onLayout: autoScroll && step.status === "active" ? onActiveStepLayout : undefined },
             React.createElement(TimelineItem, { key: step.title, item: step, formatEstimatedTime: formatEstimatedTime, isFirstItem: index === 0, isLastItem: index === steps.length - 1, setActiveIndex: setActiveIndex, index: index })))))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.19.0-nightly.1",
+  "version": "0.19.1-next.0",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -46,9 +46,9 @@
     "rn-range-slider": "2.1.1",
     "styled-system": "^5.1.5",
     "victory-native": "^35.5.5",
-    "@ledgerhq/crypto-icons-ui": "^0.2.2-nightly.0",
-    "@ledgerhq/icons-ui": "^0.4.0-nightly.1",
-    "@ledgerhq/ui-shared": "^0.2.0-nightly.0"
+    "@ledgerhq/crypto-icons-ui": "^0.3.0",
+    "@ledgerhq/icons-ui": "^0.4.0",
+    "@ledgerhq/ui-shared": "^0.2.0"
   },
   "peerDependencies": {
     "@types/react": "*",
@@ -57,7 +57,7 @@
     "@types/styled-components-react-native": "^5.3.3",
     "react": ">=17",
     "react-native": ">=0.64.0",
-    "react-native-reanimated": "^2.9.1",
+    "react-native-reanimated": "^3.0.0",
     "styled-components": "^5.3.3"
   },
   "devDependencies": {
@@ -65,6 +65,11 @@
     "@babel/generator": "^7.17.2",
     "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/plugin-proposal-export-namespace-from": "^7.16.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@babel/plugin-transform-arrow-functions": "^7.20.7",
+    "@babel/plugin-transform-shorthand-properties": "^7.18.6",
+    "@babel/plugin-transform-template-literals": "^7.18.9",
     "@babel/preset-env": "^7.15.8",
     "@babel/runtime": "^7.17.2",
     "@emotion/core": "^10.3.1",
@@ -139,17 +144,16 @@
     "react-dom": "^18",
     "react-is": "^18",
     "react-native": "0.71.6",
-    "react-native-reanimated": "^2.15.0",
+    "react-native-reanimated": "^3.1.0",
     "react-native-safe-area-context": "^4.5.0",
     "react-native-web": "~0.18.12",
     "regenerator-runtime": "^0.13.9",
-    "rimraf": "^4.1.2",
+    "rimraf": "^4.4.1",
     "styled-components": "^5.3.3",
     "stylelint": "^14.9.1",
     "stylelint-config-recommended": "^8.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
-    "typescript": "^4.9.5",
     "util": "^0.12.5",
     "victory": "^35.5.5",
     "webpack": "^5.76.1",