@ledgerhq/native-ui 0.15.1-next.0 → 0.16.0-nightly.0

package/lib/components/Layout/List/VerticalStepper/StepperItem.d.ts

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

package/lib/components/Layout/List/VerticalStepper/StepperItem.js

@@ -0,0 +1,52 @@
+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 { CheckAloneMedium } from "@ledgerhq/icons-ui/native";
+import { Flex } from "../..";
+import { Text, ProgressLoader } from "../../..";
+const Container = styled(Flex) `
+  flex: 1;
+  border-bottom-width: ${(p) => (p.nested ? 0 : 1)}px;
+  border-bottom-color: ${(p) => p.isLastItem && p.status !== "inactive" ? "transparent" : p.theme.colors.neutral.c40};
+`;
+export default function StepperItem({ item, progress, nested, isLastItem, setActiveIndex, index, }) {
+    var _a;
+    /**
+     * 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(Container, { nested: nested, status: item.status, isLastItem: isLastItem },
+                React.createElement(Flex, { px: nested ? 0 : 4, py: nested ? 4 : 7, flexDirection: nested ? "row-reverse" : "row", justifyContent: nested ? "space-between" : "flex-start" },
+                    React.createElement(Flex, { width: "28px", alignItems: "center" },
+                        item.status === "completed" && React.createElement(CheckAloneMedium, { size: 20, color: "success.c100" }),
+                        item.status === "active" && (React.createElement(ProgressLoader, { progress: progress, infinite: !progress, radius: 10, strokeWidth: 2 }))),
+                    React.createElement(Flex, { flex: 1, ml: nested ? 0 : 4, mr: nested ? 0 : 2 },
+                        React.createElement(Flex, { pb: item.status === "active" && item.renderBody ? 4 : undefined },
+                            React.createElement(Text, { variant: "body", color: item.status === "active" || nested ? "neutral.c100" : "neutral.c80" }, item.status === "completed" ? (_a = item.doneTitle) !== null && _a !== void 0 ? _a : item.title : item.title)),
+                        React.createElement(Animated.ScrollView, { style: animatedStyle, showsVerticalScrollIndicator: false },
+                            React.createElement(Animated.View, { onLayout: handleLayout }, item.renderBody && item.status === "active" ? item.renderBody(true) : null))))))));
+}

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { BaseStyledProps } from "src/components/styled";
+import { Item } from "../types";
+export type Props = BaseStyledProps & {
+    steps?: Item[];
+    setActiveIndex?: (arg0: number) => void;
+    nested?: boolean;
+};
+declare function VerticalStepper({ steps, setActiveIndex, nested, ...props }: Props): JSX.Element;
+declare namespace VerticalStepper {
+    var ItemStatus: typeof import("../types").ItemStatus;
+}
+export default VerticalStepper;

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

@@ -0,0 +1,22 @@
+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 StepperItem from "./StepperItem";
+import { Flex } from "../..";
+import { ItemStatus } from "../types";
+export default function VerticalStepper(_a) {
+    var { steps, setActiveIndex, nested } = _a, props = __rest(_a, ["steps", "setActiveIndex", "nested"]);
+    return (React.createElement(Flex, Object.assign({}, props, { flexDirection: "column" }),
+        nested && React.createElement(Flex, { mt: 7, mb: 4, borderBottomWidth: 1, borderBottomColor: "neutral.c40" }), steps === null || steps === void 0 ? void 0 :
+        steps.map((step, index) => (React.createElement(StepperItem, { key: step.title, item: step, progress: step.progress, nested: nested, isLastItem: index === steps.length - 1, setActiveIndex: setActiveIndex, index: index })))));
+}
+VerticalStepper.ItemStatus = ItemStatus;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Props as FlexProps } from "../../Flex";
-import { ItemStatus } from ".";
+import { ItemStatus } from "../types";
 export type Props = FlexProps & {
     status: ItemStatus;
     isFirstItem?: boolean;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Item } from ".";
+import { Item } from "../types";
 export type Props = {
     item: Item;
     formatEstimatedTime?: (_: number) => string;

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

@@ -1,17 +1,6 @@
-import { ReactNode } from "react";
+/// <reference types="react" />
 import { BaseStyledProps } from "src/components/styled";
-export declare enum ItemStatus {
-    inactive = "inactive",
-    active = "active",
-    completed = "completed"
-}
-export type Item = {
-    status: ItemStatus;
-    title: string;
-    doneTitle?: string;
-    estimatedTime?: number;
-    renderBody?: (isDisplayed?: boolean) => ReactNode;
-};
+import { Item } from "../types";
 export type Props = BaseStyledProps & {
     steps?: Item[];
     formatEstimatedTime?: (_: number) => string;
@@ -19,6 +8,6 @@ export type Props = BaseStyledProps & {
 };
 declare function VerticalTimeline({ steps, formatEstimatedTime, setActiveIndex, ...props }: Props): JSX.Element;
 declare namespace VerticalTimeline {
-    var ItemStatus: typeof import(".").ItemStatus;
+    var ItemStatus: typeof import("../types").ItemStatus;
 }
 export default VerticalTimeline;

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

@@ -12,12 +12,7 @@ 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 = {}));
+import { ItemStatus } from "../types";
 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 })))));

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

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

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

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

package/lib/components/Layout/List/types.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+export declare enum ItemStatus {
+    inactive = "inactive",
+    active = "active",
+    completed = "completed"
+}
+export type Item = {
+    status: ItemStatus;
+    title: string;
+    doneTitle?: string;
+    estimatedTime?: number;
+    progress?: number;
+    renderBody?: (isDisplayed?: boolean) => ReactNode;
+};

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

@@ -0,0 +1,6 @@
+export var ItemStatus;
+(function (ItemStatus) {
+    ItemStatus["inactive"] = "inactive";
+    ItemStatus["active"] = "active";
+    ItemStatus["completed"] = "completed";
+})(ItemStatus || (ItemStatus = {}));

package/package.json

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