@alifd/meet-react/lib/modal/mask.js

Fusion Mobile React UI System Component

"use strict";

exports.__esModule = true;
exports.default = void 0;
var _tslib = require("tslib");
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireWildcard(require("react"));
var _env = require("@uni/env");
var _view = _interopRequireDefault(require("../view"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var Mask = function (props, ref) {
  var _classNames;
  var _props$prefix = props.prefix,
    prefix = _props$prefix === void 0 ? 'mt-' : _props$prefix,
    className = props.className,
    visible = props.visible,
    view = props.view,
    others = (0, _tslib.__rest)(props, ["prefix", "className", "visible", "view"]);
  var _useState = (0, _react.useState)(visible),
    show = _useState[0],
    setShow = _useState[1];
  var clsPrefix = prefix + "modal";
  var clsDisableScroll = clsPrefix + "-mask--disable-scroll";
  (0, _react.useEffect)(function () {
    if (!visible && show) {
      var t1 = setTimeout(function () {
        setShow(false);
      }, 100);
      return function () {
        clearTimeout(t1);
      };
    } else {
      setShow(visible);
    }
    var tryRemoveDisableScrollCls = function () {
      var activeMasks = document.getElementsByClassName(clsPrefix + "-mask--active");
      if (activeMasks.length === 0) {
        document.body.classList.remove(clsDisableScroll);
      }
    };
    if (_env.isWeb) {
      if (visible) {
        document.body.classList.add(clsDisableScroll);
      } else {
        tryRemoveDisableScrollCls();
      }
      return function () {
        tryRemoveDisableScrollCls();
      };
    }
  }, [visible]);
  if (!show) {
    return null;
  }
  return /*#__PURE__*/(0, _react.createElement)(_view.default, _extends({
    ref: ref
  }, others, {
    "disable-scroll": true,
    catchTouchMove: true,
    className: (0, _classnames.default)(className, clsPrefix + "-mask", (_classNames = {}, _classNames[clsPrefix + "-mask--active"] = visible, _classNames[clsPrefix + "-mask--inactive"] = !visible, _classNames))
  }));
};
Mask.displayName = 'Modal.Mask';
var _default = exports.default = /*#__PURE__*/(0, _react.forwardRef)(Mask);