@ledgerhq/native-ui 0.8.1 → 0.8.2-next.0

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

@@ -61,7 +61,15 @@ export declare type Props = React.PropsWithChildren<{
      * Number of milliseconds a tap should not exceed to scroll to the netxt or precedent item.
      */
     maxDurationOfTap?: number;
+    /**
+     * Called when the active carousel index is updated automaticly.
+     */
+    onAutoChange?: (index: number) => void;
+    /**
+     * Called when the active carousel index is updated manually.
+     */
+    onManualChange?: (index: number) => void;
 }>;
-declare function Carousel({ activeIndex, autoDelay, restartAfterEnd, scrollOnSidePress, containerProps, slideIndicatorContainerProps, scrollViewProps, onChange, onOverflow, IndicatorComponent, maxDurationOfTap, children, }: Props): JSX.Element;
+declare function Carousel({ activeIndex, autoDelay, restartAfterEnd, scrollOnSidePress, containerProps, slideIndicatorContainerProps, scrollViewProps, onChange, onOverflow, IndicatorComponent, maxDurationOfTap, children, onAutoChange, onManualChange, }: Props): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Carousel>;
 export default _default;

package/lib/components/Carousel/index.js

@@ -5,7 +5,7 @@ import { Flex, SlideIndicator } from "../index";
 const HorizontalScrollView = styled.ScrollView.attrs({ horizontal: true }) `
   flex: 1;
 `;
-function Carousel({ activeIndex = 0, autoDelay, restartAfterEnd = true, scrollOnSidePress = false, containerProps, slideIndicatorContainerProps, scrollViewProps, onChange, onOverflow, IndicatorComponent = SlideIndicator, maxDurationOfTap, children, }) {
+function Carousel({ activeIndex = 0, autoDelay, restartAfterEnd = true, scrollOnSidePress = false, containerProps, slideIndicatorContainerProps, scrollViewProps, onChange, onOverflow, IndicatorComponent = SlideIndicator, maxDurationOfTap, children, onAutoChange, onManualChange, }) {
     const [init, setInit] = useState(false);
     const [activeIndexState, setActiveIndexState] = useState(activeIndex);
     const disableTimer = useRef(false);
@@ -45,6 +45,7 @@ function Carousel({ activeIndex = 0, autoDelay, restartAfterEnd = true, scrollOn
         if (tapPositionXPercent > 0.25) {
             if (slidesLength > activeIndexState + 1) {
                 scrollToIndex(activeIndexState + 1, false);
+                onManualChange && onManualChange(activeIndexState + 1);
             }
             else {
                 onOverflow && onOverflow("end", false);
@@ -52,11 +53,12 @@ function Carousel({ activeIndex = 0, autoDelay, restartAfterEnd = true, scrollOn
         }
         else if (activeIndexState > 0) {
             scrollToIndex(activeIndexState - 1, false);
+            onManualChange && onManualChange(activeIndexState - 1);
         }
         else {
             onOverflow && onOverflow("start", false);
         }
-    }, [slidesLength, activeIndexState, scrollToIndex, onOverflow, itemWidth]);
+    }, [slidesLength, activeIndexState, scrollToIndex, onOverflow, itemWidth, onManualChange]);
     const onScroll = ({ nativeEvent: { contentOffset, contentSize }, }) => {
         const newIndex = Math.abs(Math.round((contentOffset.x / contentSize.width) * slidesLength));
         setActiveIndexState(newIndex);
@@ -68,6 +70,7 @@ function Carousel({ activeIndex = 0, autoDelay, restartAfterEnd = true, scrollOn
         const interval = setTimeout(() => {
             if (!disableTimer.current) {
                 const newIndex = typeof activeIndexState !== "undefined" ? (activeIndexState + 1) % slidesLength : 0;
+                onAutoChange && onAutoChange(newIndex);
                 if (restartAfterEnd || newIndex !== 0) {
                     scrollToIndex(newIndex);
                 }
@@ -88,6 +91,7 @@ function Carousel({ activeIndex = 0, autoDelay, restartAfterEnd = true, scrollOn
         activeIndexState,
         onOverflow,
         restartAfterEnd,
+        onAutoChange,
     ]);
     // Timestamp of start of click on the Carrousel
     const [tapTime, setTapTime] = useState(0);
@@ -109,6 +113,7 @@ function Carousel({ activeIndex = 0, autoDelay, restartAfterEnd = true, scrollOn
         React.createElement(Flex, Object.assign({ my: 8 }, slideIndicatorContainerProps), React.isValidElement(IndicatorComponent) ? (IndicatorComponent) : (React.createElement(IndicatorComponent, { activeIndex: activeIndexState || 0, onChange: (index) => {
                 scrollToIndex(index);
                 setResetTimer({});
+                onManualChange && onManualChange(index);
             }, slidesLength: slidesLength, duration: autoDelay })))));
 }
 export default React.memo(Carousel);

package/lib/components/message/Notification/index.d.ts

@@ -1,12 +1,13 @@
 import React from "react";
 import { TextProps, TouchableOpacityProps } from "react-native";
+declare type NotificationVariant = "primary" | "secondary" | "success" | "warning" | "error" | string;
 declare type Props = {
     Icon?: React.ComponentType<{
         size: number;
         color?: string;
     }>;
     iconColor?: string;
-    variant?: "primary" | "secondary";
+    variant?: NotificationVariant;
     title: string;
     subtitle?: string;
     numberOfLines?: TextProps["numberOfLines"];

package/lib/components/message/Notification/index.js

@@ -7,18 +7,50 @@ import CloseMedium from "@ledgerhq/icons-ui/native/CloseMedium";
 import { Flex } from "../../Layout";
 import { space } from "styled-system";
 import { ExternalLinkMedium } from "@ledgerhq/icons-ui/native";
-const NotificationContainer = styled.View `
-  display: flex;
-  width: 100%;
-  flex-direction: row;
-  align-items: center;
-  ${(p) => p.variant === "primary" &&
-    `
-     padding: 16px;
-  `}
-  background-color: ${(p) => p.variant === "primary" ? p.theme.colors.primary.c90 : "transparent"};
-  border-radius: ${(p) => `${p.theme.radii[1]}px`};
-`;
+const variantProps = {
+    primary: {
+        bg: "primary.c90",
+        color: "neutral.c00",
+        padding: 6,
+    },
+    success: {
+        bg: "success.c100",
+        color: "neutral.c00",
+        padding: 6,
+    },
+    warning: {
+        bg: "warning.c100",
+        color: "neutral.c00",
+        padding: 6,
+    },
+    error: {
+        bg: "error.c100",
+        color: "neutral.c00",
+        padding: 6,
+    },
+    neutral: {
+        bg: "neutral.c30",
+        color: "neutral.c100",
+        linkColor: "primary.c80",
+        padding: 6,
+    },
+    secondary: {
+        bg: "transparent",
+        color: "neutral.c100",
+        padding: 0,
+    },
+};
+const NotificationContainer = styled(FlexBox).attrs((p) => {
+    var _a, _b, _c;
+    return ({
+        width: "100%",
+        flexDirection: "row",
+        alignItems: "center",
+        bg: (_b = (_a = variantProps[p.variant]) === null || _a === void 0 ? void 0 : _a.bg) !== null && _b !== void 0 ? _b : variantProps.primary.bg,
+        p: (_c = variantProps[p.variant]) === null || _c === void 0 ? void 0 : _c.padding,
+        borderRadius: 1,
+    });
+}) ``;
 const ClosePressableExtendedBounds = styled.TouchableOpacity.attrs({
     p: 5,
     m: -5,
@@ -26,8 +58,10 @@ const ClosePressableExtendedBounds = styled.TouchableOpacity.attrs({
   ${space};
 `;
 export default function Notification({ Icon, iconColor, variant = "primary", numberOfLines, title, subtitle, onClose, linkText, onLinkPress, }) {
+    var _a, _b, _c;
     const { colors } = useTheme();
-    const textColor = variant === "primary" ? colors.neutral.c00 : colors.neutral.c100;
+    const textColor = (_b = (_a = variantProps[variant]) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : variantProps.primary.color;
+    const linkColor = ((_c = variantProps[variant]) === null || _c === void 0 ? void 0 : _c.linkColor) || textColor;
     return (React.createElement(NotificationContainer, { variant: variant },
         Icon && (React.createElement(FlexBox, { mr: 16 },
             React.createElement(Icon, { size: 20, color: iconColor || textColor }))),
@@ -37,8 +71,8 @@ export default function Notification({ Icon, iconColor, variant = "primary", num
             linkText && onLinkPress && (React.createElement(Flex, { mt: 3 },
                 React.createElement(TouchableOpacity, { onPress: onLinkPress },
                     React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
-                        React.createElement(Text, { variant: "body", fontWeight: "semiBold", color: textColor, mr: 3 }, linkText),
-                        React.createElement(ExternalLinkMedium, { size: 16, color: textColor })))))),
+                        React.createElement(Text, { variant: "body", fontWeight: "semiBold", color: linkColor, mr: 3 }, linkText),
+                        React.createElement(ExternalLinkMedium, { size: 16, color: linkColor })))))),
         onClose && (React.createElement(FlexBox, { marginLeft: "auto", pl: 16 },
             React.createElement(ClosePressableExtendedBounds, { onPress: onClose },
                 React.createElement(CloseMedium, { size: 14, color: textColor }))))));

package/package.json

@@ -1,8 +1,15 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.8.1",
+  "version": "0.8.2-next.0",
   "description": "Ledger Live - Mobile UI",
-  "repository": "https://github.com/LedgerHQ/ui",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/LedgerHQ/ledger-live.git"
+  },
+  "bugs": {
+    "url": "https://github.com/LedgerHQ/ledger-live/issues"
+  },
+  "homepage": "https://github.com/LedgerHQ/ledger-live/tree/develop/libs/ui/packages/native",
   "license": "MIT",
   "author": "Ledger Live Team <team-live@ledger.fr>",
   "main": "lib/index.js",
@@ -25,7 +32,7 @@
     "lib/**/*"
   ],
   "dependencies": {
-    "@ledgerhq/icons-ui": "^0.2.6",
+    "@ledgerhq/icons-ui": "^0.2.7-next.0",
     "@ledgerhq/ui-shared": "^0.1.9",
     "@types/color": "^3.0.3",
     "@types/react": "^17.0.39",