@ledgerhq/native-ui 0.23.3-nightly.2 → 0.23.3

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

@@ -4,4 +4,3 @@ 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,4 +4,3 @@ 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,7 +5,6 @@ import { IconOrElementType } from "../../../Icon/type";
 export type BaseModalProps = {
     isOpen?: boolean;
     onClose?: () => void;
-    onBack?: () => void;
     modalStyle?: StyleProp<ViewStyle>;
     safeContainerStyle?: StyleProp<ViewStyle>;
     containerStyle?: StyleProp<ViewStyle>;
@@ -17,12 +16,10 @@ 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 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;
+export default function BaseModal({ isOpen, onClose, noCloseButton, 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,13 +12,12 @@ 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, ArrowLeft } from "@ledgerhq/icons-ui/native";
+import { Close } from "@ledgerhq/icons-ui/native";
 import { useTheme } from "styled-components/native";
 const { width, height } = sizes;
 const SafeContainer = styled.SafeAreaView `
@@ -40,12 +39,6 @@ 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,
 }) `
@@ -83,14 +76,8 @@ 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 = () => { }, 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"]);
+    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"]);
     const backDropProps = preventBackdropClick
         ? {}
         : {
@@ -109,11 +96,7 @@ 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 },
-                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 })))),
+                !CustomHeader && !noCloseButton && 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-nightly.2",
+  "version": "0.23.3",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -40,8 +40,8 @@
     "react-native-modal": "^13.0.0",
     "rn-range-slider": "2.1.1",
     "styled-system": "^5.1.5",
-    "@ledgerhq/crypto-icons-ui": "^1.4.0-nightly.1",
-    "@ledgerhq/icons-ui": "^0.7.1",
+    "@ledgerhq/crypto-icons-ui": "^1.4.0",
+    "@ledgerhq/icons-ui": "^0.7.2",
     "@ledgerhq/ui-shared": "^0.2.1"
   },
   "peerDependencies": {

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

@@ -1,11 +0,0 @@
-/// <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

@@ -1,55 +0,0 @@
-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) `
-  flex: 1;
-  overflow: hidden;
-`;
-const StyledFlex = styled(Flex) `
-  width: 100%;
-  height: 100%;
-  justify-content: center;
-  align-items: center;
-`;
-const StyledText = styled(Text) `
-  line-height: 14.52px;
-  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, }) => {
-    const isSelected = selectedOption === option;
-    return (React.createElement(StyledTouchableOpacity, { onPress: () => handleSelectOption(option) },
-        React.createElement(StyledFlex, { isSelected: isSelected },
-            React.createElement(StyledText, { fontWeight: "semiBold", isSelected: isSelected, ellipsizeMode: "tail", numberOfLines: 1 }, label))));
-};
-export default function TabSelector({ options, selectedOption, handleSelectOption, labels, }) {
-    const { colors } = useTheme();
-    const translateX = useSharedValue(-39);
-    useEffect(() => {
-        translateX.value = withSpring(selectedOption === options[0] ? -40 : 40, {
-            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: "157px", height: "35px", borderRadius: "40px", padding: "2px", bg: colors.opacityDefault.c05 },
-        React.createElement(Animated.View, { style: [
-                {
-                    position: "absolute",
-                    width: "48%",
-                    height: "96%",
-                    backgroundColor: colors.primary.c80,
-                    borderRadius: 40,
-                },
-                animatedStyle,
-            ] }),
-        options.map((option) => (React.createElement(OptionButton, { key: option, option: option, selectedOption: selectedOption, handleSelectOption: handleSelectOption, label: labels[option] })))));
-}