@ovotech/element-native 5.4.3 → 5.6.0

package/dist/components/Notification/Notification.js

@@ -1,80 +1,53 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
-import { useState } from 'react';
-import { View } from 'react-native';
-import styled, { css } from '../../styled.native';
-import { Icon } from '../Icon';
-const NotificationBox = styled.View(({ theme, noMargin, variant }) => {
-    return css `
-    position: relative;
-    margin-bottom: ${noMargin ? 0 : numToPx(theme.space[400])};
-    border: ${numToPx(theme.border.width.sm)} solid
-      ${theme.color.alert[variant]};
-    border-radius: ${numToPx(theme.border.radius['2xl'])};
-    overflow: hidden;
-  `;
-});
-export const NotificationContentBox = styled.View(({ theme }) => {
-    return css `
-    background-color: ${theme.color.surface.bright};
-    padding-top: ${numToPx(theme.space[200])};
-    padding-bottom: ${numToPx(theme.space[300])};
-    padding-left: ${numToPx(theme.space[400])};
-    padding-right: ${numToPx(theme.space[400])};
-  `;
-});
-export const NotificationTitleBox = styled.View(({ theme, variant, dismissible }) => {
-    const currentVariant = theme.color.alert[`${variant}Tint`];
-    return css `
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    background-color: ${currentVariant};
-    padding-top: ${numToPx(theme.space[200])};
-    padding-bottom: ${numToPx(theme.space[200])};
-    padding-left: ${numToPx(theme.space[400])};
-    padding-right: ${dismissible
-        ? numToPx(theme.space[300])
-        : numToPx(theme.space[400])};
-    min-height: 44px;
-  `;
-});
-const NotificationTitleText = styled.Text(({ theme, variant }) => {
-    const currentVariant = theme.color.alert[variant];
-    return css `
-    font-size: ${numToPx(theme.font.size.md.mediaQuery.sm)};
-    font-family: ${theme.native.font.family.bold};
-    color: ${currentVariant};
-  `;
-});
-const DismissButton = styled.TouchableOpacity(({ theme }) => {
-    return css `
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 28px;
-    height: 28px;
-    background: ${theme.button.surface.color.bg};
-    border: ${numToPx(theme.border.width.sm)} solid ${theme.color.surface.link};
-    border-radius: ${numToPx(theme.border.radius['2xl'])};
-  `;
-});
-const StyledIcon = styled(Icon)(({ theme }) => `
-    color: ${theme.color.surface.bright};
-  `);
-export const Notification = ({ variant = 'info', children, title, noMargin, dismissible, onDismiss, ref, ...rest }) => {
-    const [dismissed, setDismissed] = useState(false);
-    if (dismissed || (!title && !children)) {
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorNotification = exports.WarningNotification = exports.InfoNotification = exports.SuccessNotification = exports.Notification = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const styled_native_1 = require("../../styled.native");
+const Icon_1 = require("../Icon");
+const P_1 = require("../P");
+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"]);
+    const [dismissed, setDismissed] = (0, react_1.useState)(false);
+    if (dismissed) {
         return null;
     }
-    return (_jsx(View, { ref: ref, ...rest, children: _jsxs(NotificationBox, { variant: variant, noMargin: noMargin, testID: "nb-notification", children: [_jsxs(NotificationTitleBox, { variant: variant, dismissible: dismissible, children: [_jsx(NotificationTitleText, { variant: variant, children: title }), dismissible ? (_jsx(DismissButton, { accessible: true, accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", onPress: () => {
+    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 })) }));
+    }
+    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 })));
+};
+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"]);
+    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: _jsx(StyledIcon, { name: "cross", size: "16" }) })) : null] }), children ? (_jsx(NotificationContentBox, { "data-testid": "el-notification-box", children: children })) : null] }) }));
+                            }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { color: theme.button.surface.color.fgInverted, name: "cross", size: theme.space[400] }) })) : null] })] }) })));
 };
-export const ErrorNotification = (props) => (_jsx(Notification, { variant: "error", ...props }));
-export const SuccessNotification = (props) => (_jsx(Notification, { variant: "success", ...props }));
-export const InfoNotification = (props) => (_jsx(Notification, { variant: "info", ...props }));
-export const WarningNotification = (props) => (_jsx(Notification, { variant: "warning", ...props }));
+const SuccessNotification = (props) => ((0, jsx_runtime_1.jsx)(exports.Notification, Object.assign({ variant: "success" }, props)));
+exports.SuccessNotification = SuccessNotification;
+const InfoNotification = (props) => ((0, jsx_runtime_1.jsx)(exports.Notification, Object.assign({ variant: "info" }, props)));
+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)));
+exports.ErrorNotification = ErrorNotification;