kurts350-modal-component/dist/ModalComponent.js

Composant React converti depuis un plugin jQuery pour HRnet

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
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; }
// Composants stylisés
var ModalOverlay = _styledComponents["default"].div.withConfig({
  displayName: "ModalComponent__ModalOverlay",
  componentId: "sc-1x59kmn-0"
})(["position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);display:flex;justify-content:center;align-items:center;z-index:1000;opacity:", ";transition:opacity ", "s ease;"], function (props) {
  return props.$isVisible ? 1 : 0;
}, function (props) {
  return props.$fadeDuration / 1000;
});
var ModalContent = _styledComponents["default"].div.withConfig({
  displayName: "ModalComponent__ModalContent",
  componentId: "sc-1x59kmn-1"
})(["background-color:white;color:black;padding:20px;border-radius:5px;max-width:", ";width:90%;text-align:center;box-shadow:0 4px 8px rgba(0,0,0,0.2);transform:", ";opacity:", ";transition:opacity ", "s ease,transform ", "s ease;"], function (props) {
  return props.$maxWidth ? "".concat(props.$maxWidth, "px") : '400px';
}, function (props) {
  return props.$isVisible ? 'translateY(0)' : 'translateY(-20px)';
}, function (props) {
  return props.$isVisible ? 1 : 0;
}, function (props) {
  return props.$fadeDuration / 1000;
}, function (props) {
  return props.$fadeDuration / 1000;
});
var ModalButton = _styledComponents["default"].button.withConfig({
  displayName: "ModalComponent__ModalButton",
  componentId: "sc-1x59kmn-2"
})(["padding:8px 16px;margin-top:15px;background-color:#009879;color:white;border:none;border-radius:4px;cursor:pointer;font-weight:500;&:hover{background-color:#008068;}&:focus{outline:2px solid #00634f;outline-offset:2px;}"]);

// Version simplifiée du Modal
var Modal = /*#__PURE__*/_react["default"].memo(function (_ref) {
  var isOpen = _ref.isOpen,
    onClose = _ref.onClose,
    children = _ref.children,
    _ref$title = _ref.title,
    title = _ref$title === void 0 ? "Success!" : _ref$title,
    _ref$closeText = _ref.closeText,
    closeText = _ref$closeText === void 0 ? "Close" : _ref$closeText,
    _ref$maxWidth = _ref.maxWidth,
    maxWidth = _ref$maxWidth === void 0 ? null : _ref$maxWidth,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? "" : _ref$className,
    _ref$fadeDuration = _ref.fadeDuration,
    fadeDuration = _ref$fadeDuration === void 0 ? 300 : _ref$fadeDuration;
  var _React$useState = _react["default"].useState(false),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    isVisible = _React$useState2[0],
    setIsVisible = _React$useState2[1];
  var _React$useState3 = _react["default"].useState(false),
    _React$useState4 = _slicedToArray(_React$useState3, 2),
    isAnimating = _React$useState4[0],
    setIsAnimating = _React$useState4[1];
  var overlayRef = _react["default"].useRef(null);

  // Effet pour gérer l'animation d'ouverture/fermeture
  _react["default"].useEffect(function () {
    if (isOpen) {
      setIsVisible(true);
      document.body.style.overflow = 'hidden'; // Empêcher le défilement du body

      // Ajouter la classe après un court délai pour l'animation
      var timer = setTimeout(function () {
        setIsAnimating(true);
      }, 10);
      return function () {
        return clearTimeout(timer);
      };
    } else {
      // Retirer la classe pour démarrer l'animation de fermeture
      setIsAnimating(false);

      // Attendre la fin de l'animation avant de masquer complètement
      var _timer = setTimeout(function () {
        setIsVisible(false);
        document.body.style.overflow = ''; // Rétablir le défilement
      }, fadeDuration);
      return function () {
        return clearTimeout(_timer);
      };
    }
  }, [isOpen, fadeDuration]);

  // Gestion de la touche ESC
  _react["default"].useEffect(function () {
    var handleEscKey = function handleEscKey(e) {
      if (e.key === 'Escape' && isOpen) {
        onClose();
      }
    };
    if (isOpen) {
      document.addEventListener('keydown', handleEscKey);
    }
    return function () {
      document.removeEventListener('keydown', handleEscKey);
    };
  }, [isOpen, onClose]);

  // Gestion du clic sur l'overlay
  var handleOverlayClick = function handleOverlayClick(e) {
    if (e.target === overlayRef.current) {
      onClose();
    }
  };
  if (!isVisible) return null;
  return /*#__PURE__*/_react["default"].createElement(ModalOverlay, {
    ref: overlayRef,
    onClick: handleOverlayClick,
    role: "dialog",
    "aria-modal": "true",
    "aria-labelledby": "modal-title",
    $fadeDuration: fadeDuration,
    $isVisible: isAnimating
  }, /*#__PURE__*/_react["default"].createElement(ModalContent, {
    className: className,
    $maxWidth: maxWidth,
    $fadeDuration: fadeDuration,
    $isVisible: isAnimating
  }, title && /*#__PURE__*/_react["default"].createElement("h2", {
    id: "modal-title"
  }, title), children, /*#__PURE__*/_react["default"].createElement(ModalButton, {
    onClick: onClose,
    "aria-label": "Close modal"
  }, closeText)));
});
Modal.displayName = "Modal";
Modal.propTypes = {
  isOpen: _propTypes["default"].bool.isRequired,
  onClose: _propTypes["default"].func.isRequired,
  children: _propTypes["default"].node,
  title: _propTypes["default"].string,
  closeText: _propTypes["default"].string,
  maxWidth: _propTypes["default"].number,
  className: _propTypes["default"].string,
  fadeDuration: _propTypes["default"].number
};
var _default = exports["default"] = Modal;