stream-chat-react-native-core
Version:
The official React Native and Expo components for Stream Chat, a service for building chat applications
226 lines • 9.51 kB
JavaScript
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getNotificationVariant = exports.NotificationIcon = exports.Notification = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeGestureHandler = require("react-native-gesture-handler");
var _useNotificationApi2 = require("./hooks/useNotificationApi");
var _notificationTranslations = require("./notificationTranslations");
var _ComponentsContext = require("../../contexts/componentsContext/ComponentsContext");
var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
var _TranslationContext = require("../../contexts/translationContext/TranslationContext");
var _theme = require("../../theme");
var _Button = require("../ui/Button");
var _jsxRuntime = require("react/jsx-runtime");
var _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Notifications/Notification.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var getNotificationVariant = notification => notification.severity ?? 'default';
exports.getNotificationVariant = getNotificationVariant;
var getNotificationIconComponent = (notification, icons) => {
var variant = getNotificationVariant(notification);
if (variant === 'default') return undefined;
var IconsByVariant = {
error: icons.ExclamationCircle,
info: null,
loading: icons.Reload,
success: icons.Check,
warning: icons.ExclamationCircle
};
return IconsByVariant[variant] ?? undefined;
};
var NotificationIcon = ({
notification
}) => {
var _useComponentsContext = (0, _ComponentsContext.useComponentsContext)(),
icons = _useComponentsContext.icons;
var Icon = getNotificationIconComponent(notification, icons);
var _useNotificationIconS = useNotificationIconStyles(),
iconColor = _useNotificationIconS.iconColor,
styles = _useNotificationIconS.styles;
if (!Icon) return null;
return (0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.iconContainer,
testID: "notification-icon",
children: (0, _jsxRuntime.jsx)(Icon, {
height: 20,
pathFill: iconColor,
stroke: iconColor,
width: 20
})
});
};
exports.NotificationIcon = NotificationIcon;
var Notification = ({
Icon,
notification,
onDismiss,
showClose = false
}) => {
var _useComponentsContext2 = (0, _ComponentsContext.useComponentsContext)(),
icons = _useComponentsContext2.icons,
_useComponentsContext3 = _useComponentsContext2.NotificationIcon,
NotificationIconComponent = _useComponentsContext3 === void 0 ? NotificationIcon : _useComponentsContext3;
var _useNotificationApi = (0, _useNotificationApi2.useNotificationApi)(),
removeNotification = _useNotificationApi.removeNotification;
var _useTranslationContex = (0, _TranslationContext.useTranslationContext)(),
t = _useTranslationContex.t;
var displayMessage = (0, _notificationTranslations.getNotificationDisplayMessage)({
notification,
t
});
var ResolvedIcon = Icon ?? NotificationIconComponent;
var hasResolvedIcon = ResolvedIcon === NotificationIcon ? !!getNotificationIconComponent(notification, icons) : !!ResolvedIcon;
var _useNotificationStyle = useNotificationStyles({
hasResolvedIcon
}),
closeIconColor = _useNotificationStyle.closeIconColor,
styles = _useNotificationStyle.styles;
var isPersistent = !notification.duration;
var closeVisible = showClose || isPersistent;
var handleDismiss = () => {
if (onDismiss) {
onDismiss();
return;
}
removeNotification(notification.id);
};
return (0, _jsxRuntime.jsxs)(_reactNative.View, {
accessibilityLiveRegion: notification.severity === 'error' ? 'assertive' : 'polite',
accessibilityRole: notification.severity === 'error' ? 'alert' : 'summary',
style: styles.container,
testID: "notification",
children: [(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.contentContainer,
children: [hasResolvedIcon ? (0, _jsxRuntime.jsx)(ResolvedIcon, {
notification: notification
}) : null, (0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.message,
children: displayMessage
})]
}), notification.actions && notification.actions.length > 0 ? (0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.actionsContainer,
children: notification.actions.map((action, index) => (0, _jsxRuntime.jsx)(_Button.Button, {
accessibilityLabel: action.label,
label: action.label,
onPress: action.handler,
size: "sm",
style: styles.actionButton,
type: "outline",
variant: "primary"
}, `${action.label}-${index}`))
}) : null, closeVisible ? (0, _jsxRuntime.jsx)(_reactNativeGestureHandler.Pressable, {
accessibilityLabel: t('a11y/Dismiss notification'),
accessibilityRole: "button",
hitSlop: 8,
onPress: handleDismiss,
style: ({
pressed
}) => pressed ? styles.closeButtonPressed : styles.closeButton,
testID: "notification-close-button",
children: (0, _jsxRuntime.jsx)(icons.NewClose, {
height: 20,
stroke: closeIconColor,
width: 20
})
}) : null]
});
};
exports.Notification = Notification;
var useNotificationIconStyles = () => {
var _useTheme = (0, _ThemeContext.useTheme)(),
_useTheme$theme = _useTheme.theme,
notificationTheme = _useTheme$theme.notification,
semantics = _useTheme$theme.semantics;
return (0, _react.useMemo)(() => {
var baseStyles = _reactNative.StyleSheet.create({
iconContainer: {
alignItems: 'center',
height: 20,
justifyContent: 'center',
width: 20
}
});
return {
iconColor: semantics.textOnInverse,
styles: {
iconContainer: [baseStyles.iconContainer, notificationTheme.iconContainer]
}
};
}, [notificationTheme.iconContainer, semantics]);
};
var useNotificationStyles = ({
hasResolvedIcon
}) => {
var _useTheme2 = (0, _ThemeContext.useTheme)(),
_useTheme2$theme = _useTheme2.theme,
notificationTheme = _useTheme2$theme.notification,
semantics = _useTheme2$theme.semantics;
var scheme = (0, _reactNative.useColorScheme)();
var notificationShadow = scheme === 'dark' ? _theme.primitives.darkElevation3 : _theme.primitives.lightElevation3;
return (0, _react.useMemo)(() => {
var baseStyles = _reactNative.StyleSheet.create({
actionButton: {
width: 'auto'
},
actionsContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
gap: _theme.primitives.spacingXs,
marginTop: _theme.primitives.spacingXs
},
closeButton: {
alignItems: 'center',
borderRadius: _theme.primitives.radiusMax,
height: 24,
justifyContent: 'center',
marginLeft: _theme.primitives.spacingXs,
width: 24
},
closeButtonPressed: {
backgroundColor: semantics.backgroundUtilityPressed
},
container: {
alignItems: 'flex-start',
alignSelf: 'center',
backgroundColor: semantics.backgroundCoreInverse,
borderRadius: _theme.primitives.radius3xl,
flexDirection: 'row',
maxWidth: '100%',
paddingHorizontal: _theme.primitives.spacingXs,
...notificationShadow
},
contentContainer: {
alignItems: 'center',
flexDirection: 'row',
flexShrink: 1,
gap: _theme.primitives.spacingXs,
minHeight: 48,
paddingLeft: hasResolvedIcon ? _theme.primitives.spacingXxs : _theme.primitives.spacingXs,
paddingRight: _theme.primitives.spacingXs,
paddingVertical: _theme.primitives.spacingXxxs
},
message: {
color: semantics.textOnInverse,
flexShrink: 1,
fontSize: _theme.primitives.typographyFontSizeSm,
fontWeight: _theme.primitives.typographyFontWeightRegular,
lineHeight: _theme.primitives.typographyLineHeightNormal,
paddingVertical: _theme.primitives.spacingSm
}
});
return {
closeIconColor: semantics.textOnInverse,
styles: {
actionButton: [baseStyles.actionButton, notificationTheme.actionButton],
actionsContainer: [baseStyles.actionsContainer, notificationTheme.actionsContainer],
closeButton: [baseStyles.closeButton, notificationTheme.closeButton],
closeButtonPressed: [baseStyles.closeButton, baseStyles.closeButtonPressed, notificationTheme.closeButton],
container: [baseStyles.container, notificationTheme.container],
contentContainer: [baseStyles.contentContainer, notificationTheme.contentContainer],
message: [baseStyles.message, notificationTheme.message]
}
};
}, [hasResolvedIcon, notificationShadow, notificationTheme, semantics]);
};
//# sourceMappingURL=Notification.js.map