@ovotech/element-native 5.6.0 → 5.7.0

package/dist/components/Notification/Notification.d.ts

@@ -9,11 +9,11 @@ export type NotificationProps = ViewProps & {
     children?: ReactNode;
     dismissible?: boolean;
     onDismiss?: () => void;
-    isTappable?: boolean;
+    onPress?: () => void;
     ref?: React.RefObject<View>;
 };
 type PresetNotificationProps = Omit<NotificationProps, 'variant'>;
-export declare const Notification: ({ variant, children, title, subtitle, noMargin, isTappable, dismissible, onDismiss, ref, ...rest }: NotificationProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Notification: ({ variant, children, title, subtitle, noMargin, onPress, dismissible, onDismiss, ref, ...rest }: NotificationProps) => import("react/jsx-runtime").JSX.Element | null;
 export declare const SuccessNotification: (props: PresetNotificationProps) => import("react/jsx-runtime").JSX.Element;
 export declare const InfoNotification: (props: PresetNotificationProps) => import("react/jsx-runtime").JSX.Element;
 export declare const WarningNotification: (props: PresetNotificationProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Notification/Notification.js

@@ -22,26 +22,34 @@ const Strong_1 = require("../Strong");
 const Notification_styles_1 = require("./Notification.styles");
 const utils_1 = require("./utils");
 const Notification = (_a) => {
-    var { variant = 'info', children, title, subtitle, noMargin, isTappable = false, dismissible, onDismiss, ref } = _a, rest = __rest(_a, ["variant", "children", "title", "subtitle", "noMargin", "isTappable", "dismissible", "onDismiss", "ref"]);
+    var { variant = 'info', children, title, subtitle, noMargin, onPress, dismissible = true, onDismiss, ref } = _a, rest = __rest(_a, ["variant", "children", "title", "subtitle", "noMargin", "onPress", "dismissible", "onDismiss", "ref"]);
     const [dismissed, setDismissed] = (0, react_1.useState)(false);
     if (dismissed) {
         return null;
     }
-    if (isTappable || dismissible) {
-        return ((0, jsx_runtime_1.jsx)(Notification_styles_1.NotificationShadow, { children: (0, jsx_runtime_1.jsx)(NotificationContent, Object.assign({ variant: variant, title: title, subtitle: subtitle, noMargin: noMargin, isTappable: isTappable, dismissible: dismissible, onDismiss: onDismiss, setDismissed: setDismissed, ref: ref }, rest, { children: children })) }));
+    const isClickable = !!onPress;
+    if (isClickable || dismissible) {
+        return ((0, jsx_runtime_1.jsx)(Notification_styles_1.NotificationShadow, { children: (0, jsx_runtime_1.jsx)(NotificationContent, Object.assign({ variant: variant, title: title, subtitle: subtitle, noMargin: noMargin, onPress: isClickable ? onPress : undefined, dismissible: dismissible, onDismiss: onDismiss, setDismissed: setDismissed, ref: ref }, rest, { children: children })) }));
     }
-    return ((0, jsx_runtime_1.jsx)(NotificationContent, Object.assign({ variant: variant, title: title, subtitle: subtitle, noMargin: noMargin, isTappable: isTappable, dismissible: dismissible, onDismiss: onDismiss, setDismissed: setDismissed, ref: ref }, rest, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(NotificationContent, Object.assign({ variant: variant, title: title, subtitle: subtitle, noMargin: noMargin, onPress: onPress, dismissible: dismissible, onDismiss: onDismiss, setDismissed: setDismissed, ref: ref }, rest, { children: children })));
 };
 exports.Notification = Notification;
 const NotificationContent = (_a) => {
-    var { variant = 'info', children, title, subtitle, noMargin, dismissible, onDismiss, setDismissed, ref } = _a, rest = __rest(_a, ["variant", "children", "title", "subtitle", "noMargin", "dismissible", "onDismiss", "setDismissed", "ref"]);
+    var { variant = 'info', children, title, subtitle, noMargin, dismissible, onDismiss, setDismissed, onPress, ref } = _a, rest = __rest(_a, ["variant", "children", "title", "subtitle", "noMargin", "dismissible", "onDismiss", "setDismissed", "onPress", "ref"]);
     const theme = (0, styled_native_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ ref: ref }, rest, { children: (0, jsx_runtime_1.jsxs)(Notification_styles_1.NotificationBox, { noMargin: noMargin, testID: "nb-notification", children: [(0, jsx_runtime_1.jsx)(Notification_styles_1.VariantIconBackground, { variant: variant, children: (0, jsx_runtime_1.jsx)(Notification_styles_1.VariantIconContainer, { children: (0, jsx_runtime_1.jsx)(Notification_styles_1.StyledIcon, { variant: variant, size: theme.unit[800], name: (0, utils_1.mapVariantToIconName)(variant) }) }) }), (0, jsx_runtime_1.jsxs)(Notification_styles_1.ContentContainer, { children: [(0, jsx_runtime_1.jsxs)(Notification_styles_1.TitleContainer, { children: [title && ((0, jsx_runtime_1.jsx)(P_1.P, { size: "md", children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: title }) })), subtitle && (0, jsx_runtime_1.jsx)(P_1.P, { size: "sm", children: subtitle }), children && ((0, jsx_runtime_1.jsx)(Notification_styles_1.NotificationContentBox, { testID: "el-notification-box", children: children }))] }), dismissible ? ((0, jsx_runtime_1.jsx)(Notification_styles_1.DismissButton, { accessible: true, accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", onPress: () => {
-                                setDismissed(true);
-                                if (onDismiss) {
-                                    onDismiss();
-                                }
-                            }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { color: theme.button.surface.color.fgInverted, name: "cross", size: theme.space[400] }) })) : null] })] }) })));
+    const hasChildren = !!children;
+    const handleDismiss = () => {
+        if (onDismiss) {
+            onDismiss();
+        }
+        setDismissed(true);
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ ref: ref }, rest, { children: [!!onPress && ((0, jsx_runtime_1.jsx)(Notification_styles_1.TappableNotification, { dismissible: dismissible, hasChildren: hasChildren, onPress: onPress })), (0, jsx_runtime_1.jsxs)(Notification_styles_1.NotificationBox, { noMargin: noMargin, testID: "nb-notification", children: [(0, jsx_runtime_1.jsx)(Notification_styles_1.VariantIconBackground, { variant: variant, children: (0, jsx_runtime_1.jsx)(Notification_styles_1.VariantIconContainer, { children: (0, jsx_runtime_1.jsx)(Notification_styles_1.StyledIcon, { variant: variant, size: theme.unit[800], name: (0, utils_1.mapVariantToIconName)(variant) }) }) }), (0, jsx_runtime_1.jsxs)(Notification_styles_1.ContentContainer, { children: [(0, jsx_runtime_1.jsxs)(Notification_styles_1.TitleContainer, { children: [title && ((0, jsx_runtime_1.jsx)(P_1.P, { size: "md", children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: title }) })), subtitle && (0, jsx_runtime_1.jsx)(P_1.P, { size: "sm", children: subtitle }), children && ((0, jsx_runtime_1.jsx)(Notification_styles_1.NotificationContentBox, { testID: "el-notification-box", children: children }))] }), dismissible ? ((0, jsx_runtime_1.jsx)(Notification_styles_1.DismissButton, { accessible: true, accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", hitSlop: {
+                                    top: theme.space[300],
+                                    right: theme.space[400],
+                                    bottom: theme.space[100],
+                                    left: theme.space[100],
+                                }, onPress: handleDismiss, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { color: theme.button.surface.color.fgInverted, name: "cross", size: theme.space[400] }) })) : null] })] })] })));
 };
 const SuccessNotification = (props) => ((0, jsx_runtime_1.jsx)(exports.Notification, Object.assign({ variant: "success" }, props)));
 exports.SuccessNotification = SuccessNotification;
@@ -49,5 +57,5 @@ const InfoNotification = (props) => ((0, jsx_runtime_1.jsx)(exports.Notification
 exports.InfoNotification = InfoNotification;
 const WarningNotification = (props) => ((0, jsx_runtime_1.jsx)(exports.Notification, Object.assign({ variant: "warning" }, props)));
 exports.WarningNotification = WarningNotification;
-const ErrorNotification = (props) => ((0, jsx_runtime_1.jsx)(exports.Notification, Object.assign({ variant: "error" }, props)));
+const ErrorNotification = (props) => ((0, jsx_runtime_1.jsx)(exports.Notification, Object.assign({ variant: "error", dismissible: false }, props)));
 exports.ErrorNotification = ErrorNotification;