@ledgerhq/native-ui 0.23.3 → 0.23.4-nightly.0

package/lib/components/Form/TabSelector/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+interface TabSelectorProps<T extends string | number> {
+    options: T[];
+    selectedOption: T;
+    handleSelectOption: (option: T) => void;
+    labels: {
+        [key in T]: string;
+    };
+}
+export default function TabSelector<T extends string | number>({ options, selectedOption, handleSelectOption, labels, }: TabSelectorProps<T>): JSX.Element;
+export {};

package/lib/components/Form/TabSelector/index.js

@@ -0,0 +1,61 @@
+import React, { useEffect } from "react";
+import Text from "../../Text";
+import Flex from "../../Layout/Flex";
+import styled, { useTheme } from "styled-components/native";
+import { TouchableOpacity } from "react-native";
+import Animated, { useSharedValue, useAnimatedStyle, withSpring } from "react-native-reanimated";
+const StyledTouchableOpacity = styled(TouchableOpacity) `
+  width: ${(p) => p.width}px;
+  flex: 1;
+  height: 100%;
+`;
+const StyledFlex = styled(Flex) `
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+`;
+const StyledText = styled(Text) `
+  line-height: 14.52px;
+  overflow: visible;
+  text-align: center;
+  font-size: 12px;
+  color: ${(p) => p.isSelected ? p.theme.colors.constant.black : p.theme.colors.opacityDefault.c50};
+`;
+const OptionButton = ({ option, selectedOption, handleSelectOption, label, width, }) => {
+    const isSelected = selectedOption === option;
+    return (React.createElement(StyledTouchableOpacity, { width: width, onPress: () => handleSelectOption(option) },
+        React.createElement(StyledFlex, { isSelected: isSelected },
+            React.createElement(StyledText, { fontWeight: "semiBold", isSelected: isSelected, numberOfLines: 1 }, label))));
+};
+export default function TabSelector({ options, selectedOption, handleSelectOption, labels, }) {
+    const { colors } = useTheme();
+    const longuestLabel = labels[options[0]].length > labels[options[1]].length ? options[0] : options[1];
+    const widthFactor = 8;
+    const margin = 20;
+    const width = labels[longuestLabel].length * widthFactor + margin;
+    const semiWidth = width / 2;
+    const translateX = useSharedValue(-semiWidth);
+    useEffect(() => {
+        translateX.value = withSpring(selectedOption === options[0] ? -semiWidth : semiWidth, {
+            damping: 30,
+            stiffness: 80,
+        });
+    }, [selectedOption, translateX, options]);
+    const animatedStyle = useAnimatedStyle(() => {
+        return {
+            transform: [{ translateX: translateX.value }],
+        };
+    });
+    return (React.createElement(Flex, { flexDirection: "row", justifyContent: "center", alignItems: "center", width: width * 2 + 4, height: "35px", borderRadius: "40px", bg: colors.opacityDefault.c05, position: "relative" },
+        React.createElement(Animated.View, { style: [
+                {
+                    position: "absolute",
+                    width: width - 2,
+                    height: "90%",
+                    backgroundColor: colors.primary.c80,
+                    borderRadius: 40,
+                },
+                animatedStyle,
+            ] }),
+        options.map((option) => (React.createElement(OptionButton, { width: width, key: option, option: option, selectedOption: selectedOption, handleSelectOption: handleSelectOption, label: labels[option] })))));
+}

package/lib/components/Form/index.d.ts

@@ -4,3 +4,4 @@ export { default as Slider } from "./Slider";
 export { default as Switch } from "./Switch";
 export { default as Toggle } from "./Toggle";
 export { default as SelectableList } from "./SelectableList";
+export { default as TabSelector } from "./TabSelector";

package/lib/components/Form/index.js

@@ -4,3 +4,4 @@ export { default as Slider } from "./Slider";
 export { default as Switch } from "./Switch";
 export { default as Toggle } from "./Toggle";
 export { default as SelectableList } from "./SelectableList";
+export { default as TabSelector } from "./TabSelector";

package/lib/components/Layout/Modals/BaseModal/index.d.ts

@@ -5,6 +5,7 @@ import { IconOrElementType } from "../../../Icon/type";
 export type BaseModalProps = {
     isOpen?: boolean;
     onClose?: () => void;
+    onBack?: () => void;
     modalStyle?: StyleProp<ViewStyle>;
     safeContainerStyle?: StyleProp<ViewStyle>;
     containerStyle?: StyleProp<ViewStyle>;
@@ -16,10 +17,12 @@ export type BaseModalProps = {
     subtitle?: string;
     children?: React.ReactNode;
     noCloseButton?: boolean;
+    hasBackButton?: boolean;
     CustomHeader?: React.ComponentType<{
         children?: ReactNode;
     }>;
 } & Partial<ModalProps>;
 export declare function ModalHeader({ Icon, iconColor, title, description, subtitle, }: Pick<BaseModalProps, "Icon" | "iconColor" | "title" | "description" | "subtitle">): React.ReactElement | null;
 export declare function ModalHeaderCloseButton({ onClose, }: Pick<BaseModalProps, "onClose">): React.ReactElement;
-export default function BaseModal({ isOpen, onClose, noCloseButton, safeContainerStyle, containerStyle, modalStyle, preventBackdropClick, Icon, iconColor, title, description, subtitle, children, onModalHide, CustomHeader, ...rest }: BaseModalProps): React.ReactElement;
+export declare function ModalHeaderBackButton({ onBack, }: Pick<BaseModalProps, "onBack">): React.ReactElement;
+export default function BaseModal({ isOpen, onClose, onBack, noCloseButton, hasBackButton, safeContainerStyle, containerStyle, modalStyle, preventBackdropClick, Icon, iconColor, title, description, subtitle, children, onModalHide, CustomHeader, ...rest }: BaseModalProps): React.ReactElement;

package/lib/components/Layout/Modals/BaseModal/index.js

@@ -12,12 +12,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { useCallback } from "react";
 import ReactNativeModal from "react-native-modal";
 import styled from "styled-components/native";
+import { TouchableOpacity } from "react-native";
 import sizes from "../../../../helpers/getDeviceSize";
 import Text from "../../../Text";
 import { BoxedIcon } from "../../../Icon";
 import { Flex } from "../../index";
 import { space } from "styled-system";
-import { Close } from "@ledgerhq/icons-ui/native";
+import { Close, ArrowLeft } from "@ledgerhq/icons-ui/native";
 import { useTheme } from "styled-components/native";
 const { width, height } = sizes;
 const SafeContainer = styled.SafeAreaView `
@@ -39,6 +40,12 @@ const CloseContainer = styled.View `
   margin-bottom: ${(p) => p.theme.space[6]}px;
   z-index: 10;
 `;
+const BackContainer = styled.View `
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: ${(p) => p.theme.space[6]}px;
+  z-index: 10;
+`;
 const ClosePressableExtendedBounds = styled.TouchableOpacity.attrs({
     p: 3,
 }) `
@@ -76,8 +83,14 @@ export function ModalHeaderCloseButton({ onClose, }) {
         React.createElement(ClosePressableExtendedBounds, { onPress: onClose, testID: "modal-close-button" },
             React.createElement(Close, { color: colors.neutral.c100, size: "XS" }))));
 }
+export function ModalHeaderBackButton({ onBack, }) {
+    const { colors } = useTheme();
+    return (React.createElement(BackContainer, null,
+        React.createElement(TouchableOpacity, { onPress: onBack, testID: "modal-back-button" },
+            React.createElement(ArrowLeft, { color: colors.neutral.c100, size: "XS" }))));
+}
 export default function BaseModal(_a) {
-    var { isOpen, onClose = () => { }, noCloseButton, safeContainerStyle = {}, containerStyle = {}, modalStyle = {}, preventBackdropClick, Icon, iconColor, title, description, subtitle, children, onModalHide, CustomHeader } = _a, rest = __rest(_a, ["isOpen", "onClose", "noCloseButton", "safeContainerStyle", "containerStyle", "modalStyle", "preventBackdropClick", "Icon", "iconColor", "title", "description", "subtitle", "children", "onModalHide", "CustomHeader"]);
+    var { isOpen, onClose = () => { }, onBack = () => { }, noCloseButton, hasBackButton, safeContainerStyle = {}, containerStyle = {}, modalStyle = {}, preventBackdropClick, Icon, iconColor, title, description, subtitle, children, onModalHide, CustomHeader } = _a, rest = __rest(_a, ["isOpen", "onClose", "onBack", "noCloseButton", "hasBackButton", "safeContainerStyle", "containerStyle", "modalStyle", "preventBackdropClick", "Icon", "iconColor", "title", "description", "subtitle", "children", "onModalHide", "CustomHeader"]);
     const backDropProps = preventBackdropClick
         ? {}
         : {
@@ -96,7 +109,11 @@ export default function BaseModal(_a) {
         React.createElement(SafeContainer, { style: safeContainerStyle },
             CustomHeader && (React.createElement(CustomHeader, null, !noCloseButton && React.createElement(ModalHeaderCloseButton, { onClose: onClose }))),
             React.createElement(Container, { style: containerStyle },
-                !CustomHeader && !noCloseButton && React.createElement(ModalHeaderCloseButton, { onClose: onClose }),
+                React.createElement(Flex, { flexDirection: "row", justifyContent: "space-between", width: "100%", alignItems: "center" },
+                    !CustomHeader && onBack && hasBackButton && (React.createElement(Flex, { flex: 1, justifyContent: "flex-start" },
+                        React.createElement(ModalHeaderBackButton, { onBack: onBack }))),
+                    !CustomHeader && !noCloseButton && (React.createElement(Flex, { flex: 1, justifyContent: "flex-end" },
+                        React.createElement(ModalHeaderCloseButton, { onClose: onClose })))),
                 React.createElement(ModalHeader, { Icon: Icon, iconColor: iconColor, title: title, description: description, subtitle: subtitle }),
                 React.createElement(ContentContainer, null, children)))));
 }

package/package.json

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