@navinc/base-react-components/cjs/toast-hook.js

Nav's Pattern Library

"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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Toast = exports.useToast = exports.ToastProvider = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const banner_toast_js_1 = __importDefault(require("./banner-toast.js"));
const styled_components_1 = __importDefault(require("styled-components"));
const utils_1 = require("@navinc/utils");
const CLEAR_MESSAGE = 'CLEAR_MESSAGE';
const SHOW_MESSAGE = 'SHOW_MESSAGE';
const reducer = (state, action) => {
    switch (action.type) {
        case CLEAR_MESSAGE: {
            return Object.assign(Object.assign({}, state), { messages: state.messages.filter((message) => message.id !== action.id) });
        }
        case SHOW_MESSAGE: {
            // if we already have a message with the give id, we want to replace the old one.
            const hasMessageOfId = state.messages.some(({ id }) => id === action.props.id);
            return Object.assign(Object.assign({}, state), { messages: hasMessageOfId
                    ? state.messages.map((message) => {
                        return message.id === action.props.id ? action.props : message;
                    })
                    : [
                        ...state.messages,
                        Object.assign({}, action.props),
                    ] });
        }
        default:
            return state;
    }
};
const toastContext = (0, react_1.createContext)({
    showMessage: (_msg) => { },
    clearMessage: (_id) => { },
    getMessages: () => [],
});
const ToastProvider = ({ children }) => {
    const [state, dispatch] = (0, react_1.useReducer)(reducer, { messages: [] });
    const clearMessage = (0, react_1.useCallback)((id) => dispatch({ type: CLEAR_MESSAGE, id }), [dispatch]);
    const showMessage = (0, react_1.useCallback)((_a) => {
        var { id = (0, utils_1.uuidBrowser)() } = _a, props = __rest(_a, ["id"]);
        dispatch({ type: SHOW_MESSAGE, props: Object.assign({ id }, props) });
    }, [dispatch]);
    const getMessages = (0, react_1.useCallback)(() => state.messages, [state]);
    return (0, jsx_runtime_1.jsx)(toastContext.Provider, Object.assign({ value: { showMessage, clearMessage, getMessages } }, { children: children }));
};
exports.ToastProvider = ToastProvider;
const MessageContainer = styled_components_1.default.div.withConfig({ displayName: "brc-sc-MessageContainer", componentId: "brc-sc-hgqkn6" }) `
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
`;
const Grid = styled_components_1.default.div.withConfig({ displayName: "brc-sc-Grid", componentId: "brc-sc-hf93m9" }) `
  display: grid;
  grid-gap: 8px;
  max-width: 544px;
  width: 100%;
  position: absolute;
  top: 8px;
`;
const useToast = () => (0, react_1.useContext)(toastContext);
exports.useToast = useToast;
const Toast = ({ className }) => {
    const { clearMessage, getMessages } = (0, exports.useToast)();
    const messages = getMessages();
    return ((0, jsx_runtime_1.jsx)(MessageContainer, Object.assign({ className: className }, { children: (0, jsx_runtime_1.jsx)(Grid, { children: messages.map((_a = {}) => {
                var { id, isDismissible } = _a, message = __rest(_a, ["id", "isDismissible"]);
                return ((0, jsx_runtime_1.jsx)(banner_toast_js_1.default, Object.assign({ "data-testid": `global-message-${id}`, shouldNotTimeout: isDismissible, onDismiss: () => clearMessage(id) }, message), id));
            }) }) })));
};
exports.Toast = Toast;
//# sourceMappingURL=toast-hook.js.map