react-modals-kit/dist/components/ToastMain/ToastMain.js

A lightweight and customizable modal library for React, providing various types of modals with simple API

"use strict";

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = ToastMain;
var _react = _interopRequireWildcard(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _ToastMainModule = _interopRequireDefault(require("./ToastMain.module.css"));
var _propTypes = _interopRequireDefault(require("prop-types"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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); }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
function ToastMain(_ref) {
  var setToast = _ref.setToast,
    message = _ref.message,
    _ref$duration = _ref.duration,
    duration = _ref$duration === void 0 ? 3000 : _ref$duration,
    _ref$type = _ref.type,
    type = _ref$type === void 0 ? "default" : _ref$type,
    _ref$position = _ref.position,
    position = _ref$position === void 0 ? "bottom-right" : _ref$position,
    _ref$showCloseButton = _ref.showCloseButton,
    showCloseButton = _ref$showCloseButton === void 0 ? true : _ref$showCloseButton,
    _ref$showProgressBar = _ref.showProgressBar,
    showProgressBar = _ref$showProgressBar === void 0 ? true : _ref$showProgressBar,
    _ref$pauseOnHover = _ref.pauseOnHover,
    pauseOnHover = _ref$pauseOnHover === void 0 ? true : _ref$pauseOnHover,
    backgroundColor = _ref.backgroundColor,
    textColor = _ref.textColor,
    progressColor = _ref.progressColor,
    closeBtnColor = _ref.closeBtnColor;
  var _useState = (0, _react.useState)(true),
    _useState2 = _slicedToArray(_useState, 2),
    visible = _useState2[0],
    setVisible = _useState2[1];
  var _useState3 = (0, _react.useState)(0),
    _useState4 = _slicedToArray(_useState3, 2),
    progress = _useState4[0],
    setProgress = _useState4[1];
  var _useState5 = (0, _react.useState)(false),
    _useState6 = _slicedToArray(_useState5, 2),
    exiting = _useState6[0],
    setExiting = _useState6[1];
  var _useState7 = (0, _react.useState)(false),
    _useState8 = _slicedToArray(_useState7, 2),
    isPaused = _useState8[0],
    setIsPaused = _useState8[1];
  var intervalRef = (0, _react.useRef)(null);

  // تحديد الأنماط حسب النوع
  var getTypeStyles = function getTypeStyles() {
    var types = {
      "default": {
        bg: "#333",
        color: "#fff",
        progressColor: "#000",
        closeColor: "#fff"
      },
      success: {
        bg: "#10b981",
        color: "#fff",
        progressColor: "#059669",
        closeColor: "#fff"
      },
      error: {
        bg: "#ef4444",
        color: "#fff",
        progressColor: "#dc2626",
        closeColor: "#fff"
      },
      warning: {
        bg: "#f59e0b",
        color: "#fff",
        progressColor: "#d97706",
        closeColor: "#fff"
      },
      info: {
        bg: "#3b82f6",
        color: "#fff",
        progressColor: "#2563eb",
        closeColor: "#fff"
      }
    };
    return types[type] || types["default"];
  };

  // الحصول على النمط النهائي مع مراعاة التخصيصات المخصصة
  var getStyles = function getStyles() {
    var baseStyles = getTypeStyles();
    return {
      bg: backgroundColor || baseStyles.bg,
      color: textColor || baseStyles.color,
      progressColor: progressColor || baseStyles.progressColor,
      closeColor: closeBtnColor || baseStyles.closeColor
    };
  };
  var finalStyles = getStyles();

  // تحديد الموضع
  var getPositionClass = function getPositionClass() {
    var positions = {
      "top-right": _ToastMainModule["default"].positionTopRight,
      "top-left": _ToastMainModule["default"].positionTopLeft,
      "bottom-right": _ToastMainModule["default"].positionBottomRight,
      "bottom-left": _ToastMainModule["default"].positionBottomLeft,
      "top-center": _ToastMainModule["default"].positionTopCenter,
      "bottom-center": _ToastMainModule["default"].positionBottomCenter
    };
    return positions[position] || positions["bottom-right"];
  };

  // بدء شريط التقدم وتحديثه
  (0, _react.useEffect)(function () {
    if (!showProgressBar) return;
    var startDelay = setTimeout(function () {
      intervalRef.current = setInterval(function () {
        if (!isPaused) {
          setProgress(function (prevProgress) {
            var newProgress = prevProgress + 100 / (duration / 100);
            if (newProgress >= 100) {
              clearInterval(intervalRef.current);
              handleClose();
              return 100;
            }
            return newProgress;
          });
        }
      }, 100);
    }, 300);
    return function () {
      clearTimeout(startDelay);
      if (intervalRef.current) clearInterval(intervalRef.current);
    };
  }, [duration, isPaused, showProgressBar]);

  // التعامل مع إغلاق الإشعار
  var handleClose = function handleClose() {
    if (intervalRef.current) clearInterval(intervalRef.current);
    setExiting(true);
    setTimeout(function () {
      setVisible(false);
      setTimeout(function () {
        setToast(false);
      }, 100);
    }, 250);
  };

  // التعامل مع إيقاف التقدم مؤقتًا
  var handlePause = function handlePause() {
    if (pauseOnHover) {
      setIsPaused(true);
    }
  };

  // استئناف التقدم
  var handleResume = function handleResume() {
    if (pauseOnHover) {
      setIsPaused(false);
    }
  };
  if (!visible) return null;
  return /*#__PURE__*/_reactDom["default"].createPortal(/*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(_ToastMainModule["default"].toastContainer, " ").concat(getPositionClass(), " ").concat(exiting ? _ToastMainModule["default"].exit : _ToastMainModule["default"].enter)
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: _ToastMainModule["default"].toastBody,
    style: {
      backgroundColor: finalStyles.bg,
      color: finalStyles.color
    },
    onMouseEnter: handlePause,
    onMouseLeave: handleResume
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: _ToastMainModule["default"].messageContainer
  }, message), showCloseButton && /*#__PURE__*/_react["default"].createElement("span", {
    onClick: handleClose,
    className: _ToastMainModule["default"].closeBtn,
    style: {
      color: finalStyles.closeColor
    },
    onMouseEnter: function onMouseEnter(e) {
      e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.2)";
    },
    onMouseLeave: function onMouseLeave(e) {
      e.currentTarget.style.backgroundColor = "";
    }
  }, /*#__PURE__*/_react["default"].createElement("svg", {
    width: "24",
    height: "24",
    viewBox: "0 0 24 24",
    className: _ToastMainModule["default"].icon
  }, /*#__PURE__*/_react["default"].createElement("path", {
    fill: "currentColor",
    d: "M 4.7070312 3.2929688 L 3.2929688 4.7070312 L 10.585938 12 \r L 3.2929688 19.292969 L 4.7070312 20.707031 L 12 13.414062 \r L 19.292969 20.707031 L 20.707031 19.292969 L 13.414062 12 \r L 20.707031 4.7070312 L 19.292969 3.2929688 L 12 10.585938 \r L 4.7070312 3.2929688 z"
  })))), showProgressBar && /*#__PURE__*/_react["default"].createElement("div", {
    className: _ToastMainModule["default"].progressBarContainer
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: _ToastMainModule["default"].progressBar,
    style: {
      width: "".concat(progress, "%"),
      backgroundColor: finalStyles.progressColor
    }
  }))), document.body);
}
ToastMain.propTypes = {
  setToast: _propTypes["default"].func.isRequired,
  message: _propTypes["default"].string.isRequired,
  duration: _propTypes["default"].number,
  type: _propTypes["default"].oneOf(["default", "success", "error", "warning", "info"]),
  position: _propTypes["default"].oneOf(["top-right", "top-left", "bottom-right", "bottom-left", "top-center", "bottom-center"]),
  showCloseButton: _propTypes["default"].bool,
  showProgressBar: _propTypes["default"].bool,
  pauseOnHover: _propTypes["default"].bool,
  backgroundColor: _propTypes["default"].string,
  textColor: _propTypes["default"].string,
  progressColor: _propTypes["default"].string,
  closeBtnColor: _propTypes["default"].string
};