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

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Props as FlexProps } from "../../Flex";
+export declare type Props = FlexProps & {
+    status: "inactive" | "active" | "completed";
+    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,9 @@
+/// <reference types="react" />
+import { Item } from ".";
+export declare type Props = {
+    item: Item;
+    formatEstimatedTime?: (_: number) => string;
+    isFirstItem?: boolean;
+    isLastItem?: boolean;
+};
+export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, isLastItem, }: Props): JSX.Element;

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

@@ -0,0 +1,73 @@
+import React, { useCallback, useState } from "react";
+import Animated, { Easing, useAnimatedStyle, useDerivedValue, 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, }) {
+    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"))))))));
+}

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

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+import { BaseStyledProps } from "src/components/styled";
+export declare type ItemStatus = "inactive" | "active" | "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;
+};
+export default function VerticalTimeline({ steps, formatEstimatedTime, ...props }: Props): JSX.Element;

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

@@ -0,0 +1,18 @@
+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 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 })))));
+}

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.0",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",