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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.11.0-nightly.0",
+  "version": "0.11.0",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",