react-toast-master 1.0.0 → 1.1.1

package/src/Toast.jsx

@@ -1,669 +0,0 @@
-import { CheckCheck, CircleDashed, Info, PinIcon, X, XCircle } from "lucide-react";
-import { createContext, useContext, useEffect, useRef, useState } from "react";
-
-import "./components/styles/background.css";
-import "./components/styles/border.css";
-import "./components/styles/button.css";
-import "./components/styles/shadows.css";
-import "./components/styles/textAlign.css";
-import "./components/styles/textColor.css";
-import "./components/styles/toastPosition.css";
-import "./components/styles/animation.css";
-import "./components/styles/breakPoints.css";
-import "./components/styles/skew.css";
-
-import Footer from "./components/footer/Footer";
-import InnerFooter from "./components/footer/InnerFooter";
-import LoadFooter from "./components/footer/LoadFooter";
-import { getAnimation } from "./components/functions/animation";
-
-const ToastContext = createContext();
-
-export const useToast = () => useContext(ToastContext);
-
-export const Toast = ({ children }) => {
-	const [toastType, setToastType] = useState("");
-	const [toastMessage, setToastMessage] = useState("");
-	const [confirmResolve, setConfirmResolve] = useState(null);
-	const [toastTimeout, setToastTimeout] = useState(null);
-	const [showCloseButton, setShowCloseButton] = useState(true);
-	const [showButton, setShowButton] = useState(null);
-
-	const [toastBackground, setToastBackground] = useState("");
-	const [toastPosition, setToastPosition] = useState("");
-	const [toastSkew, setToastSkew] = useState("");
-	const [toastAnimation, setToastAnimation] = useState("");
-	const [toastShadow, setToastShadow] = useState("");
-	const [toastRadius, setToastRadius] = useState("");
-	const [toastAlignment, setToastAlignment] = useState("");
-	const [showOverlay, setShowOverlay] = useState(false);
-
-	const [footer, setFooter] = useState(null);
-	const [showLoadFooter, setShowLoadFooter] = useState(false);
-	const [loadFooter, setLoadFooter] = useState(null);
-
-	const confirmButtonRef = useRef(null);
-
-	const toastBackgroundClasses = {
-		white: "bg_white",
-		dark: "bg_dark",
-		gray: "bg_gray",
-		success: "bg_success",
-		error: "bg_error",
-		warning: "bg_warning",
-		info: "bg_info",
-		glass: "bg_glass",
-		transparent: "bg_transparent",
-	};
-
-	const toastPositionClasses = {
-		top: "top",
-		topFull: "topFull",
-		topLeft: "topLeft",
-		topRight: "topRight",
-
-		bottom: "bottom",
-		bottomFull: "bottomFull",
-		bottomLeft: "bottomLeft",
-		bottomRight: "bottomRight",
-
-		center: "middle",
-	};
-	const toastRevealAnimation = {
-		down: "ani_down",
-		top: "ani_top",
-		left: "ani_left",
-		right: "ani_right",
-		fade: "ani_fade",
-		zoom: "ani_zoom",
-		jelly: "ani_jelly",
-	};
-
-	const toastAwesomeAlignment = {
-		left: "text_start",
-		right: "text_end",
-		center: "text_center",
-	};
-	const toastAwesomeSkew = {
-		right3: "right3",
-		right6: "right6",
-		right12: "right12",
-		left3: "left3",
-		left6: "left6",
-		left12: "left12",
-	};
-	const toastAwesomeShadow = {
-		none: "",
-		gray: "box_shadow",
-		block: "box_shadow_block",
-		error: "shadow_error",
-		white: "shadow_white",
-		dark: "shadow_dark",
-		success: "shadow_success",
-		info: "shadow_info",
-		warning: "shadow_warning",
-		around: "shadow_around",
-	};
-	const toastAwesomeRadius = {
-		none: "rounded_none",
-		sm: "rounded_sm",
-		md: "rounded_md",
-		lg: "rounded_lg",
-		xl: "rounded_xl",
-		twoXl: "rounded_2xl",
-		full: "rounded_full",
-	};
-
-	/**
-	 * Find the position class key from the toastPositionClasses object
-	 * that matches the toastPosition prop value.~
-	 * @param {Object} toastPositionClasses - the object containing all the
-	 * position classes as keys and their corresponding values
-	 * @param {string} toastPosition - the position to be matched
-	 * @returns {string} the key of the matching position class
-	 */
-	const toastPG = Object.keys(toastPositionClasses).find(
-		(key) => toastPositionClasses[key] === toastPosition
-	);
-
-	/**
-	 * Find the background class key from the toastBackgroundClasses object
-	 * that matches the toastBackground prop value.
-	 * @param {Object} toastBackgroundClasses - the object containing all the
-	 * background classes as keys and their corresponding values
-	 * @param {string} toastBackground - the background color to be matched
-	 * @returns {string} the key of the matching background class
-	 */
-	const toastBG = Object.keys(toastBackgroundClasses).find(
-		(key) => toastBackgroundClasses[key] === toastBackground
-	);
-
-	const animation = getAnimation(toastAnimation, toastPG);
-
-	const hideToast = () => {
-		setToastAnimation(animation);
-
-		const timeoutId = setTimeout(() => {
-			setToastType("");
-			setToastMessage("");
-			clearTimeout(toastTimeout);
-			setToastAnimation("");
-		}, 300);
-
-		return () => clearTimeout(timeoutId);
-	};
-
-	/**
-	 * Displays a toast message.
-	 *
-	 * @param {Object} toast The toast object with the following properties:
-	 *     @param {string} type The type of the toast (e.g. success, error, etc.)
-	 *     @param {string} message The message to be displayed in the toast
-	 *     @param {string} bg The background color of the toast
-	 *     @param {string} position The position of the toast
-	 *     @param {string} transition The transition animation of the toast
-	 *     @param {*} loadFooter The footer will display after 7 seconds
-	 *     @param {*} footer The footer of the toast when it's not a "loading" and "confirm" toast
-	 *     @param {string} skew The skew of the toast
-	 *     @param {boolean} cancelButton Whether or not to display a cancel button
-	 *     @param {string} shadow The shadow of the toast
-	 *     @param {string} radius The border radius of the toast
-	 *     @param {string} align The alignment of the toasts text
-	 * @returns {Promise} A promise that resolves when the toast is confirmed/rejected
-	 */
-	const toastMaster = (toast) => {
-		if (toastTimeout) {
-			clearTimeout(toastTimeout);
-		}
-		return new Promise((resolve) => {
-			setToastAnimation(animation);
-
-			const openToast = () => {
-				openNewToast(toast, resolve);
-			};
-
-			if (toastType) {
-				setTimeout(openToast, 300);
-			} else {
-				openToast();
-			}
-		});
-	};
-
-	const openNewToast = (toast, resolve) => {
-		const {
-			type = "success",
-			message = "",
-			bg = "white",
-			position = "top",
-			transition = "zoom",
-			loadFooter = null,
-			footer = null,
-			skew = "",
-			cancelButton = false,
-			shadow = "gray",
-			radius = "lg",
-			align = "center",
-		} = toast;
-
-		setToastType(type);
-		setToastMessage(message);
-		setLoadFooter(loadFooter);
-		setFooter(footer);
-		setShowButton(cancelButton);
-
-		const toastBackground = toastBackgroundClasses[bg] || "";
-		const toastPosition = toastPositionClasses[position] || "";
-		const revealAnimation = toastRevealAnimation[transition] || "";
-		const toastSkew = toastAwesomeSkew[skew] || "";
-		const toastShadow = toastAwesomeShadow[shadow] || "";
-		const toastRadius = toastAwesomeRadius[radius] || "";
-		const toastAlignment = toastAwesomeAlignment[align] || "";
-
-		setToastBackground(toastBackground);
-		setToastPosition(toastPosition);
-		setToastAnimation(revealAnimation);
-		setToastSkew(toastSkew);
-		setToastShadow(toastShadow);
-		setToastRadius(toastRadius);
-		setToastAlignment(toastAlignment);
-
-		if (
-			type === "success" ||
-			type === "successWhite" ||
-			type === "successDark" ||
-			type === "error" ||
-			type === "errorWhite" ||
-			type === "errorDark" ||
-			type === "warning" ||
-			type === "warningWhite" ||
-			type === "warningDark" ||
-			type === "info" ||
-			type === "infoWhite" ||
-			type === "infoDark" ||
-			type === "basic" ||
-			type === "basicDark"
-		) {
-			setToastTimeout(setTimeout(() => hideToast(), 4500));
-		}
-
-		if (type === "confirm" || type === "confirmDark") {
-			setConfirmResolve(() => resolve);
-		}
-
-		if (type === "loading" || type === "loadingWhite" || type === "loadingDark") {
-			setShowLoadFooter(false);
-			setTimeout(() => setShowLoadFooter(true), 7330);
-		}
-		if (type === "loading" || type === "loadingWhite" || type === "loadingDark") {
-			setToastType("");
-			setToastMessage("");
-			setLoadFooter("");
-			setFooter("");
-			setShowButton("");
-
-			setTimeout(() => {
-				setToastType(type);
-				setToastMessage(message);
-				setLoadFooter(loadFooter);
-				setFooter(footer);
-				setShowButton(cancelButton);
-			}, 330);
-
-			return;
-		}
-	};
-
-	/**
-	 * Handles the show/hide of the close button of the toast.
-	 *
-	 * The close button is hidden when the loading toast initially appears,
-	 * after 7 seconds the close button is shown.
-	 */
-	useEffect(() => {
-		if (toastType === "loading" || toastType === "loadingWhite" || toastType === "loadingDark") {
-			setShowCloseButton(false);
-			setTimeout(() => setShowCloseButton(true), 7000);
-		} else {
-			setShowCloseButton(true);
-		}
-	}, [toastType]); // eslint-disable-line react-hooks/exhaustive-deps
-
-	useEffect(() => {
-		/**
-		 * Handles the key down event and hides the toast if the escape key is pressed.
-		 *
-		 * @param {Object} event - the key down event object
-		 */
-		const handleKeyDown = (event) => {
-			if (event.key === "Escape") {
-				hideToast();
-			}
-		};
-		document.addEventListener("keydown", handleKeyDown);
-		return () => {
-			document.removeEventListener("keydown", handleKeyDown);
-		};
-	}, []);
-
-	/**
-	 * Handles the confirmation of "confirm" tost type.
-	 *
-	 * @returns {Function} a function to clear the timeout
-	 */
-	const handleConfirm = () => {
-		setToastAnimation(animation);
-
-		const timeoutId = setTimeout(() => {
-			if (confirmResolve) {
-				confirmResolve(true);
-			}
-			setToastAnimation("");
-			hideToast();
-			setShowOverlay(false);
-		}, 330);
-
-		return () => clearTimeout(timeoutId);
-	};
-	/**
-	 * Sets focus to the confirm button when toastType is "confirm" or "confirmDark"
-	 */
-	useEffect(() => {
-		if (toastType === "confirm" || toastType === "confirmDark") {
-			confirmButtonRef.current.focus();
-		}
-	}, [toastType]);
-
-	/**
-	 * Handles the cancellation of "confirm" and "confirmDark" tost types.
-	 */
-	const handleCancel = () => {
-		if (confirmResolve) {
-			confirmResolve(false);
-		}
-		hideToast();
-		setShowOverlay(false);
-	};
-
-	const toastClasses = {
-		success: "text_success",
-		error: "text_error",
-		loading: "text_warning",
-		warning: "text_warning",
-		warningStay: "text_warning",
-		info: "text_info",
-		infoStay: "text_info",
-		confirm: "text_white",
-		basic: "text_white",
-
-		successWhite: "text_white",
-		errorWhite: "text_white",
-		loadingWhite: "text_white",
-		warningWhite: "text_white",
-		warningStayWhite: "text_white",
-		infoWhite: "text_white",
-		infoStayWhite: "text_white",
-
-		successDark: "text_dark",
-		errorDark: "text_dark",
-		loadingDark: "text_dark",
-		warningDark: "text_dark",
-		warningStayDark: "text_dark",
-		infoDark: "text_dark",
-		infoStayDark: "text_dark ",
-		confirmDark: "text_dark ",
-		basicDark: "text_dark ",
-	};
-
-	/**
-	 * Create a proxy that will return the appropriate icon component based on
-	 * the prop name passed to it.
-	 * @returns {React.Component} Icon component
-	 */
-	const iconComponent = new Proxy(
-		{},
-		{
-			/**
-			 * Get the icon component based on the prop name.
-			 * @param {Object} target - The target object
-			 * @param {string} prop - The prop name
-			 * @returns {React.Component} Icon component
-			 */
-			get(target, prop) {
-				switch (prop) {
-					case "success":
-					case "successWhite":
-					case "successDark":
-						return <CheckCheck />;
-
-					case "error":
-					case "errorWhite":
-					case "errorDark":
-						return <XCircle />;
-
-					case "loading":
-					case "loadingWhite":
-					case "loadingDark":
-						return <CircleDashed className="animate_spin" />;
-
-					case "warning":
-					case "warningWhite":
-					case "warningDark":
-					case "warningStay":
-					case "warningStayWhite":
-					case "warningStayDark":
-						return <Info />;
-
-					case "info":
-					case "infoWhite":
-					case "infoDark":
-					case "infoStay":
-					case "infoStayWhite":
-					case "infoStayDark":
-						return <PinIcon className="rotate_deg" />;
-
-					default:
-						return undefined;
-				}
-			},
-		}
-	);
-
-	/**
-	 * Set of toast types that are not auto-hidden
-	 *
-	 * These are toast types that do not hide automatically, instead they require
-	 * manual dismissal, hence we clear the timeout when the user hovers over the
-	 * toast and set it again when the user leaves the toast.
-	 */
-	const nonAutoHideTypesSet = new Set([
-		"confirm",
-		"confirmWhite",
-		"confirmDark",
-		"infoStay",
-		"infoStayWhite",
-		"infoStayDark",
-		"loading",
-		"loadingWhite",
-		"loadingDark",
-		"warningStay",
-		"warningStayWhite",
-		"warningStayDark",
-	]);
-
-	/**
-	 * Handle the mouseenter event on the toast
-	 *
-	 * If the toast type is not in the nonAutoHideTypesSet, then we clear the
-	 * toast timeout, so that the toast does not get hidden automatically.
-	 */
-	const handleMouseEnter = () => {
-		if (!nonAutoHideTypesSet.has(toastType)) {
-			clearTimeout(toastTimeout);
-		}
-	};
-
-	/**
-	 * Handle the mouseleave event on the toast
-	 *
-	 * If the toast type is not in the nonAutoHideTypesSet, then we set the
-	 * toast timeout again, so that the toast gets hidden after the timeout
-	 * duration.
-	 */
-	const handleMouseLeave = () => {
-		if (!nonAutoHideTypesSet.has(toastType)) {
-			setToastTimeout(setTimeout(hideToast, 1500));
-		}
-	};
-
-	/**
-	 * Sets the showOverlay state based on the type of the toast
-	 *
-	 * ShowOverlay is using class "overlay" to show a semi transparent overlay
-	 * and blur on beneath of "confirm" and "confirmDark" toast
-	 *
-	 * If the toast type is either confirm or confirmDark, then set
-	 * showOverlay to true, else set it to false
-	 */
-	useEffect(() => {
-		setShowOverlay(toastType === "confirm" || toastType === "confirmDark");
-	}, [toastType]);
-
-	return (
-		<ToastContext.Provider value={{ toastMaster, hideToast }}>
-			<>
-				{children}
-				{toastType && (
-					<>
-						{(toastType === "confirm" || toastType === "confirmDark") && (
-							<div className={`overlay ${showOverlay ? "show" : ""}`} />
-						)}
-						<div
-							className={`outer_container ${toastPosition} ${toastAnimation}`}
-							style={{ zIndex: "9999" }}
-						>
-							<div
-								className={`inner_container ${toastClasses[toastType]} ${toastBackground} ${toastSkew} ${toastShadow} ${toastRadius}`}
-								onMouseEnter={handleMouseEnter}
-								onMouseLeave={handleMouseLeave}
-							>
-								<div
-									className={`
-								${
-									toastPG === "bottomFull" || toastPG === "topFull"
-										? "toast_width_full"
-										: toastType === "confirm" || toastType === "confirmDark"
-										? "toast_width_confirm"
-										: "toast_width"
-								}`}
-								>
-									<div className={`toast_message ${toastAlignment}`}>
-										{toastType !== "confirm" &&
-											toastType !== "confirmDark" &&
-											toastType !== "basic" &&
-											toastType !== "basicDark" && (
-												<div>
-													<span className="sr_only">toast icon</span>
-													<span aria-hidden="true">{iconComponent[toastType]}</span>
-												</div>
-											)}
-										<>{toastMessage}</>
-
-										{/* close button below */}
-										<div
-											className={`closeDiv ${
-												showCloseButton &&
-												showButton &&
-												toastType !== "confirm" &&
-												toastType !== "confirmDark" &&
-												toastPG !== "bottomFull" &&
-												toastPG !== "topFull"
-													? `div_flex`
-													: "div_hidden"
-											}`}
-										>
-											<div>
-												<button
-													onClick={hideToast}
-													id="close"
-													className={`closeButton 
-													${
-														toastBG === "white"
-															? "bg_whiter"
-															: toastBG === "glass" || toastBG === "transparent"
-															? "bg_glass_close"
-															: "bg_darker"
-													}`}
-												>
-													{/* This span is just for accessibility purposes so that screen
-													readers will know what the close button does. */}
-													<span className="sr_only">close toast</span>
-													{/* This is the close icon. */}
-													<X
-														aria-hidden="true"
-														size={18}
-													/>
-												</button>
-											</div>
-										</div>
-									</div>
-
-									{["confirm", "confirmDark"].includes(toastType) && footer && (
-										<InnerFooter
-											footer={footer}
-											toastBG={toastBG}
-											toastAlignment={toastAlignment}
-											toastType={toastType}
-										/>
-									)}
-
-									<>
-										{(toastType === "confirm" || toastType === "confirmDark") && (
-											<div
-												className={`confirm_div  
-												${
-													toastAlignment === "text_start"
-														? "justify_end"
-														: toastAlignment === "text_end"
-														? "justify_start"
-														: toastAlignment === "text_center"
-														? "justify_center"
-														: null
-												}
-											`}
-											>
-												<button
-													className={`cancel_button ${
-														toastBG === "white"
-															? "cancel_button_dark"
-															: toastBG === "success" ||
-															  toastBG === "warning" ||
-															  toastBG === "error" ||
-															  toastBG === "info" ||
-															  toastBG === "grWarning" ||
-															  toastBG === "grError" ||
-															  toastBG === "dark"
-															? "cancel_button_all"
-															: "cancel_button_glass"
-													}`}
-													onClick={handleCancel}
-												>
-													<span className="sr_only">close toast</span>
-													Cancel
-												</button>
-
-												<button
-													ref={confirmButtonRef}
-													className={`confirm_button
-													${toastBG === "dark" ? "confirm_button_dark" : "confirm_button_white"}`}
-													onClick={handleConfirm}
-												>
-													<span className="sr_only">confirm action</span>
-													Confirm
-												</button>
-											</div>
-										)}
-									</>
-								</div>
-
-								<>
-									{!(
-										toastType === "confirmDark" ||
-										toastType === "confirm" ||
-										toastPG === "bottomFull" ||
-										toastPG === "topFull"
-									) && (
-										<div>
-											{footer && (
-												<Footer
-													footer={footer}
-													toastBG={toastBG}
-													toastAlignment={toastAlignment}
-												/>
-											)}
-										</div>
-									)}
-
-									{!(
-										toastPG === "bottomFull" ||
-										toastPG === "topFull" ||
-										toastType === "confirmDark" ||
-										toastType === "confirm"
-									) &&
-										showLoadFooter &&
-										loadFooter && (
-											<LoadFooter
-												toastAlignment={toastAlignment}
-												toastBG={toastBG}
-												loadFooter={loadFooter}
-											/>
-										)}
-								</>
-							</div>
-						</div>
-					</>
-				)}
-			</>
-		</ToastContext.Provider>
-	);
-};

package/src/components/footer/Footer.jsx

@@ -1,22 +0,0 @@
-import "../styles/textColor.css";
-import "../styles/breakPoints.css";
-
-const Footer = ({ footer, toastAlignment, toastBG }) => (
-	<div className={`_footer toast_width ${toastAlignment} ${toastBGClasses[toastBG]}`}>{footer}</div>
-);
-
-const toastBGClasses = {
-	dark: "footer_dark",
-	warning: "footer_dark",
-	white: "footer_white",
-	info: "footer_info",
-	error: "footer_error",
-	success: "footer_success",
-	gray: "footer_success",
-	glass: "footer_success",
-	transparent: "footer_success",
-	grWarning: "footer_success",
-	grError: "footer_success",
-};
-
-export default Footer;

package/src/components/footer/InnerFooter.jsx

@@ -1,22 +0,0 @@
-import "../styles/textColor.css";
-import "../styles/breakPoints.css";
-
-const InnerFooter = ({ footer, toastAlignment, toastBG }) => (
-	<div className={`innerFooter ${toastAlignment} ${toastBGClasses[toastBG]}`}>{footer}</div>
-);
-
-const toastBGClasses = {
-	dark: "footer_dark",
-	warning: "footer_dark",
-	white: "footer_white",
-	info: "footer_info",
-	error: "footer_error",
-	success: "footer_success",
-	gray: "footer_success",
-	glass: "footer_success",
-	transparent: "footer_success",
-	grWarning: "footer_success",
-	grError: "footer_success",
-};
-
-export default InnerFooter;