@proximus/lavender-toast-native 0.1.0-alpha.1

package/dist/PxToast.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface PxModalProps {
+    containerStyle?: StyleProp<ViewStyle>;
+    offset?: number;
+    expanded?: boolean;
+    action1Label: string;
+    action1OnPress: () => void;
+    action1AccessibilityHint?: string;
+    action1TestID?: string;
+    action2Label?: string;
+    action2OnPress?: () => void;
+    action2AccessibilityHint?: string;
+    action2TestID?: string;
+    message: string;
+    visible: boolean;
+    status?: Status;
+    inverted?: boolean;
+}
+export type Status = 'success' | 'error' | 'warning' | 'info';
+export declare function PxToast({ visible, containerStyle, offset, expanded, action1Label, action1OnPress, message, action2Label, action2OnPress, action1AccessibilityHint, action2AccessibilityHint, action1TestID, action2TestID, status, inverted, }: PxModalProps): React.JSX.Element | null;
+//# sourceMappingURL=PxToast.d.ts.map

package/dist/PxToast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PxToast.d.ts","sourceRoot":"","sources":["../src/PxToast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,EAIL,SAAS,EAIT,SAAS,EACV,MAAM,cAAc,CAAC;AAQtB,MAAM,WAAW,YAAY;IAC3B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAE9D,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,cAAc,EACd,MAAU,EACV,QAAgB,EAChB,YAAY,EACZ,cAAc,EACd,OAAO,EACP,YAAY,EACZ,cAAc,EACd,wBAAwB,EACxB,wBAAwB,EACxB,aAAa,EACb,aAAa,EACb,MAAe,EACf,QAAgB,GACjB,EAAE,YAAY,4BAiNd"}

package/dist/PxToast.js

@@ -0,0 +1,187 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { AccessibilityInfo, Animated, StyleSheet, TouchableOpacity, View, } from 'react-native';
+import { useTheme } from '@proximus/lavender-styling-native';
+import { PxIcon } from '@proximus/lavender-icon-native';
+import { Body, Header } from '@proximus/lavender-texts-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { a11y, e2eID } from '@proximus/lavender-common-native';
+export function PxToast({ visible, containerStyle, offset = 0, expanded = false, action1Label, action1OnPress, message, action2Label, action2OnPress, action1AccessibilityHint, action2AccessibilityHint, action1TestID, action2TestID, status = 'info', inverted = false, }) {
+    const [bottom, setBottom] = useState();
+    const [canDisplay, setCanDisplay] = useState(true);
+    const [animatedVisible, setAnimatedVisible] = useState(false);
+    const { theme } = useTheme();
+    const insets = useSafeAreaInsets();
+    const translateY = useRef(new Animated.Value(10)).current;
+    const opacity = useRef(new Animated.Value(0)).current;
+    const toastRef = useRef(null);
+    const iconSetup = useStatusIcon(theme, status, inverted);
+    const onLayoutCallback = useCallback((e) => {
+        if (!bottom && e.nativeEvent.layout.height > 0) {
+            setBottom(insets.bottom + offset);
+        }
+    }, [bottom, insets, offset]);
+    useEffect(() => {
+        if (visible) {
+            setCanDisplay(true);
+        }
+    }, [visible]);
+    useEffect(() => {
+        if (visible && canDisplay) {
+            Animated.parallel([
+                Animated.spring(translateY, {
+                    toValue: 0,
+                    useNativeDriver: true,
+                }),
+                Animated.spring(opacity, {
+                    toValue: 1,
+                    useNativeDriver: true,
+                }),
+            ]).start(() => {
+                setAnimatedVisible(true);
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [visible, canDisplay]);
+    useEffect(() => {
+        if (!visible && animatedVisible) {
+            Animated.parallel([
+                Animated.spring(translateY, {
+                    toValue: 10,
+                    useNativeDriver: true,
+                }),
+                Animated.spring(opacity, {
+                    toValue: 0,
+                    useNativeDriver: true,
+                }),
+            ]).start(() => {
+                setAnimatedVisible(false);
+                setCanDisplay(false);
+                opacity.setValue(0);
+                translateY.setValue(10);
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [animatedVisible, visible]);
+    useEffect(() => {
+        return () => {
+            opacity.setValue(0);
+            translateY.setValue(10);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => {
+        if (animatedVisible) {
+            // Announce to screen readers that a toast has appeared
+            AccessibilityInfo.announceForAccessibility(message);
+            setTimeout(() => {
+                AccessibilityInfo.announceForAccessibility('Alert');
+            }, 1000);
+        }
+    }, [animatedVisible, message]);
+    return canDisplay ? (React.createElement(View, { pointerEvents: 'box-none', onLayout: onLayoutCallback, style: [
+            containerStyle,
+            styles.absoluteContainer,
+            {
+                bottom,
+            },
+        ] },
+        React.createElement(Animated.View, { pointerEvents: 'box-none', style: [
+                styles.animatedView,
+                {
+                    paddingBottom: offset,
+                    opacity,
+                    transform: [{ translateY }],
+                },
+            ] },
+            React.createElement(View, { style: {
+                    flex: 1,
+                    marginHorizontal: theme.t('SpacingDefaultMobile').number,
+                    borderRadius: theme.t('RadiusMain').number,
+                    padding: theme.t('PaddingSMobile').number,
+                    backgroundColor: inverted
+                        ? theme.t('ColorBackgroundSurfaceLight')
+                        : theme.t('ColorBackgroundSurfaceDark'),
+                    flexDirection: expanded ? 'column' : 'row',
+                }, ref: toastRef },
+                React.createElement(View, { style: {
+                        ...(!expanded && { flex: 1 }),
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        justifyContent: 'flex-start',
+                        gap: theme.t('SpacingSMobile').number,
+                    } },
+                    React.createElement(PxIcon, { accessible: false, importantForAccessibility: 'no', size: 24, ...iconSetup }),
+                    React.createElement(Body, { inverted: !inverted, accessible: false, importantForAccessibility: 'no', numberOfLines: 1, ellipsizeMode: 'tail' }, message)),
+                React.createElement(View, { style: {
+                        ...(!expanded && { flex: 1 }),
+                        flexDirection: 'row',
+                        justifyContent: 'flex-end',
+                        gap: theme.t('SpacingDefaultMobile').number,
+                    } },
+                    React.createElement(TouchableOpacity, { onPress: () => {
+                            action1OnPress();
+                        }, ...a11y({
+                            accessible: true,
+                            accessibilityHint: action1AccessibilityHint,
+                            accessibilityLabel: action1Label,
+                            importantForAccessibility: 'yes',
+                        }), ...e2eID(action1TestID) },
+                        React.createElement(Header, { inverted: !inverted, style: {
+                                textTransform: 'uppercase',
+                                textDecorationLine: 'underline',
+                                ...(inverted && { color: theme.t('ColorTextBrandDefault') }),
+                            } }, action1Label)),
+                    action2Label && action2OnPress && expanded && (React.createElement(TouchableOpacity, { onPress: () => {
+                            action2OnPress();
+                        }, ...a11y({
+                            accessible: true,
+                            accessibilityHint: action2AccessibilityHint,
+                            accessibilityLabel: action2Label,
+                        }), ...e2eID(action2TestID) },
+                        React.createElement(Header, { inverted: !inverted, style: {
+                                textTransform: 'uppercase',
+                                textDecorationLine: 'underline',
+                                ...(inverted && {
+                                    color: theme.t('ColorTextBrandDefault'),
+                                }),
+                            } }, action2Label)))))))) : null;
+}
+function useStatusIcon(theme, status, inverted) {
+    const colorSuffix = inverted ? 'Default' : 'Inverted';
+    switch (status) {
+        case 'info':
+            return {
+                name: 'information_fill',
+                color: theme.t(`ColorIconBrand${colorSuffix}`),
+            };
+        case 'success':
+            return {
+                name: 'checkmark_fill',
+                color: theme.t(`ColorIconPurposeSuccess${colorSuffix}`),
+            };
+        case 'warning':
+            return {
+                name: 'exclamation_mark_fill',
+                color: theme.t(`ColorIconPurposeWarning${colorSuffix}`),
+            };
+        case 'error':
+            return {
+                name: 'minus_fill',
+                color: theme.t(`ColorIconPurposeError${colorSuffix}`),
+            };
+    }
+}
+const styles = StyleSheet.create({
+    absoluteContainer: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: 10000,
+    },
+    animatedView: {
+        flex: 1,
+        alignItems: 'flex-end',
+        flexDirection: 'row',
+    },
+});

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PxToast';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+export * from './PxToast';

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@proximus/lavender-toast-native",
+  "version": "0.1.0-alpha.1",
+  "description": "Lavender toast native component",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "peerDependencies": {
+    "@proximus/lavender-common-native": "*",
+    "@proximus/lavender-icon-native": "*",
+    "@proximus/lavender-styling-native": "*",
+    "@proximus/lavender-texts-native": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}