@gluestack-ui-nightly/core/lib/esm/toast/creator/ToastList.jsx

Universal UI components for React Native, Expo, and Next.js

import { useKeyboardBottomInset } from '@gluestack-ui-nightly/utils/hooks';
import { Overlay } from '../../overlay/creator';
import React from 'react';
import { Platform, SafeAreaView, View } from 'react-native';
import { OverlayAnimatePresence } from './OverlayAnimatePresence';
import { ToastContext } from './ToastContext';
const initialAnimationOffset = 24;
const transitionConfig = {
    'bottom': initialAnimationOffset,
    'top': -initialAnimationOffset,
    'top right': -initialAnimationOffset,
    'top left': -initialAnimationOffset,
    'bottom left': initialAnimationOffset,
    'bottom right': initialAnimationOffset,
};
const toastPositionStyle = Platform.OS === 'web' ? 'fixed' : 'absolute';
const POSITIONS = {
    'top': {
        top: 0,
        left: 0,
        right: 0,
        alignItems: 'center',
    },
    'top right': {
        top: 0,
        right: 0,
        alignItems: 'flex-end',
    },
    'top left': {
        top: 0,
        left: 0,
        alignItems: 'flex-start',
    },
    'bottom': {
        bottom: 0,
        left: 0,
        right: 0,
        alignItems: 'center',
    },
    'bottom left': {
        bottom: 0,
        left: 0,
        alignItems: 'flex-start',
    },
    'bottom right': {
        bottom: 0,
        right: 0,
        alignItems: 'flex-end',
    },
};
export const ToastList = () => {
    const { toastInfo, visibleToasts, removeToast, AnimationWrapper, AnimatePresence: ContextAnimatePresence, } = React.useContext(ToastContext);
    const AnimationView = AnimationWrapper === null || AnimationWrapper === void 0 ? void 0 : AnimationWrapper.current;
    const AnimatePresence = ContextAnimatePresence === null || ContextAnimatePresence === void 0 ? void 0 : ContextAnimatePresence.current;
    const bottomInset = useKeyboardBottomInset() * 2;
    const getPositions = () => {
        return Object.keys(toastInfo);
    };
    let hasToastOnOverlay = false;
    getPositions().map((position) => {
        var _a;
        if (((_a = toastInfo[position]) === null || _a === void 0 ? void 0 : _a.length) > 0)
            hasToastOnOverlay = true;
    });
    return getPositions().length > 0 ? (<Overlay isOpen={hasToastOnOverlay} isKeyboardDismissable={false}>
      {getPositions().map((position) => {
            if (Object.keys(POSITIONS).includes(position))
                return (<View key={position} style={Object.assign({ justifyContent: 'center', margin: 'auto', position: toastPositionStyle, pointerEvents: 'box-none' }, POSITIONS[position])}>
              {toastInfo[position].map((toast) => {
                        var _a, _b;
                        return (<SafeAreaView style={{ pointerEvents: 'box-none' }} key={toast.id}>
                    <OverlayAnimatePresence visible={visibleToasts[toast.id]} AnimatePresence={AnimatePresence} onExit={() => {
                                var _a, _b;
                                removeToast(toast.id);
                                ((_a = toast.config) === null || _a === void 0 ? void 0 : _a.onCloseComplete) &&
                                    ((_b = toast.config) === null || _b === void 0 ? void 0 : _b.onCloseComplete());
                            }}>
                      <AnimationView initial={{
                                opacity: 0,
                                y: transitionConfig[position],
                            }} animate={{
                                opacity: 1,
                                y: 0,
                            }} exit={{
                                opacity: 0,
                                y: transitionConfig[position],
                            }} transition={{
                                type: 'timing',
                                duration: 150,
                            }} key={toast.id} {...(_a = toast.config) === null || _a === void 0 ? void 0 : _a.containerStyle} style={{ pointerEvents: 'box-none' }}>
                        <View style={{
                                bottom: [
                                    'bottom',
                                    'bottom-left',
                                    'bottom-right',
                                ].includes(position) &&
                                    ((_b = toast.config) === null || _b === void 0 ? void 0 : _b.avoidKeyboard)
                                    ? bottomInset
                                    : undefined,
                            }}>
                          {toast.component}
                        </View>
                      </AnimationView>
                    </OverlayAnimatePresence>
                  </SafeAreaView>);
                    })}
            </View>);
            else
                return null;
        })}
    </Overlay>) : null;
};
//# sourceMappingURL=ToastList.jsx.map