@ledgerhq/native-ui 0.10.0 → 0.11.0-nightly.1

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Props as FlexProps } from "../../Flex";
+import { ItemStatus } from ".";
+export declare type Props = FlexProps & {
+    status: ItemStatus;
+    isFirstItem?: boolean;
+    isLastItem?: boolean;
+};
+export default function TimelineIndicator({ status, isFirstItem, isLastItem, ...props }: Props): JSX.Element;

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

@@ -0,0 +1,67 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { CircledCheckSolidMedium } from "@ledgerhq/icons-ui/native";
+import styled, { useTheme } from "styled-components/native";
+import Flex from "../../Flex";
+const TopSegment = styled(Flex) `
+  height: 20px;
+  border-width: ${(p) => (p.hidden ? 0 : 1)}px;
+  border-style: solid;
+  border-color: ${(p) => p.status === "inactive" ? p.theme.colors.neutral.c50 : p.theme.colors.primary.c80};
+  background: ${(p) => p.status === "inactive" ? p.theme.colors.neutral.c50 : p.theme.colors.primary.c80};
+`;
+const BottomSegment = styled(Flex) `
+  flex: 1;
+  border-width: ${(p) => (p.hidden ? 0 : 1)}px;
+  border-style: solid;
+  border-color: ${(p) => p.status === "completed" ? p.theme.colors.primary.c80 : p.theme.colors.neutral.c50};
+  background: ${(p) => p.status === "completed" ? p.theme.colors.primary.c80 : p.theme.colors.neutral.c50};
+`;
+const getIconBackground = (theme, status, isLastItem) => {
+    if (status === "completed") {
+        return "transparent";
+    }
+    else if (isLastItem) {
+        return theme.colors.success.c10;
+    }
+    else if (status === "active") {
+        return theme.colors.neutral.c40;
+    }
+    return theme.colors.background.main;
+};
+const getIconBorder = (theme, status, isLastItem) => {
+    if (isLastItem) {
+        return theme.colors.success.c100;
+    }
+    else if (status === "inactive") {
+        return theme.colors.neutral.c50;
+    }
+    return theme.colors.primary.c80;
+};
+const CenterSegment = styled(Flex) `
+  border-radius: 9999px;
+  width: 20px;
+  height: 20px;
+  background: ${(p) => getIconBackground(p.theme, p.status, p.isLastItem)};
+  border: 2px solid ${(p) => getIconBorder(p.theme, p.status, p.isLastItem)};
+  align-items: center;
+  justify-content: center;
+`;
+export default function TimelineIndicator(_a) {
+    var { status, isFirstItem, isLastItem } = _a, props = __rest(_a, ["status", "isFirstItem", "isLastItem"]);
+    const { colors } = useTheme();
+    return (React.createElement(Flex, Object.assign({ flexDirection: "column", alignItems: "center" }, props),
+        React.createElement(TopSegment, { status: status, hidden: isFirstItem }),
+        React.createElement(CenterSegment, { status: status, isLastItem: isLastItem }, status === "completed" && (React.createElement(CircledCheckSolidMedium, { color: isLastItem ? colors.success.c100 : colors.primary.c80, size: 24 }))),
+        React.createElement(BottomSegment, { status: status, hidden: isLastItem })));
+}

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Item } from ".";
+export declare type Props = {
+    item: Item;
+    formatEstimatedTime?: (_: number) => string;
+    isFirstItem?: boolean;
+    isLastItem?: boolean;
+    setActiveIndex?: (_: number) => void;
+    index: number;
+};
+export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, isLastItem, setActiveIndex, index, }: Props): JSX.Element;

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

@@ -0,0 +1,83 @@
+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 "../../..";
+import TimelineIndicator from "./TimelineIndicator";
+const getContainerBackground = (theme, status, isLastItem) => {
+    if (isLastItem && status === "completed") {
+        return theme.colors.success.c30;
+    }
+    else if (status === "completed") {
+        return theme.colors.primary.c20;
+    }
+    else if (status === "active") {
+        return theme.colors.neutral.c20;
+    }
+    return theme.colors.neutral.c30;
+};
+const getContainerBorder = (theme, status, isLastItem) => {
+    if (isLastItem && status === "completed") {
+        return theme.colors.success.c30;
+    }
+    else if (isLastItem && status === "active") {
+        return theme.colors.success.c100;
+    }
+    else if (status === "completed") {
+        return theme.colors.primary.c20;
+    }
+    else if (status === "active") {
+        return theme.colors.primary.c80;
+    }
+    return theme.colors.neutral.c30;
+};
+const Container = styled(Flex) `
+  flex: 1;
+  border-radius: ${(p) => p.theme.radii[2]}px;
+  background: ${(p) => getContainerBackground(p.theme, p.status, p.isLastItem)};
+  border: 1px solid ${(p) => getContainerBorder(p.theme, p.status, p.isLastItem)};
+  padding: 20px 16px;
+`;
+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

@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+import { BaseStyledProps } from "src/components/styled";
+export declare enum ItemStatus {
+    inactive = "inactive",
+    active = "active",
+    completed = "completed"
+}
+export declare type Item = {
+    status: ItemStatus;
+    title: string;
+    estimatedTime?: number;
+    renderBody?: (isDisplayed?: boolean) => ReactNode;
+};
+export declare type Props = BaseStyledProps & {
+    steps?: Item[];
+    formatEstimatedTime?: (_: number) => string;
+    setActiveIndex?: (arg0: number) => void;
+};
+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

@@ -0,0 +1,25 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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, 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/List/index.d.ts

@@ -2,3 +2,4 @@ export { default as List } from "./List";
 export { default as IconBoxList } from "./IconBoxList";
 export { default as TipList } from "./TipList";
 export { default as NumberedList } from "./NumberedList";
+export { default as VerticalTimeline } from "./VerticalTimeline";

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

@@ -2,3 +2,4 @@ export { default as List } from "./List";
 export { default as IconBoxList } from "./IconBoxList";
 export { default as TipList } from "./TipList";
 export { default as NumberedList } from "./NumberedList";
+export { default as VerticalTimeline } from "./VerticalTimeline";

package/package.json

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