zarm/lib/utils/dom/renderImperatively.js

基于 React 的移动端UI库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.renderImperatively = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var React = _interopRequireWildcard(require("react"));

var _configProvider = require("../../config-provider");

var _renderTo = require("./renderTo");

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 && {}.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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }

function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // 移植自 antd-mobile: https://github1s.com/ant-design/ant-design-mobile/blob/HEAD/src/utils/render-imperatively.tsx


var renderImperatively = function renderImperatively(element) {
  var _element$props$mountC;

  var Wrapper = /*#__PURE__*/React.forwardRef(function (_, ref) {
    var _React$useState = React.useState(false),
        _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
        visible = _React$useState2[0],
        setVisible = _React$useState2[1];

    var closedRef = React.useRef(false);

    var _React$useState3 = React.useState(element),
        _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
        elementToRender = _React$useState4[0],
        setElementToRender = _React$useState4[1];

    var keyRef = React.useRef(0);
    React.useEffect(function () {
      if (!closedRef.current) {
        setVisible(true);
      } else {
        afterClose();
      }
    }, []);

    var onClose = function onClose() {
      var _elementToRender$prop, _elementToRender$prop2;

      closedRef.current = true;
      setVisible(false);
      (_elementToRender$prop = (_elementToRender$prop2 = elementToRender.props).onClose) === null || _elementToRender$prop === void 0 ? void 0 : _elementToRender$prop.call(_elementToRender$prop2);
    };

    var afterClose = function afterClose() {
      var _elementToRender$prop3, _elementToRender$prop4;

      unmount();
      (_elementToRender$prop3 = (_elementToRender$prop4 = elementToRender.props).afterClose) === null || _elementToRender$prop3 === void 0 ? void 0 : _elementToRender$prop3.call(_elementToRender$prop4);
    };

    React.useImperativeHandle(ref, function () {
      return {
        close: onClose,
        replace: function replace(replacedElement) {
          var _elementToRender$prop5, _elementToRender$prop6;

          keyRef.current += 1;
          (_elementToRender$prop5 = (_elementToRender$prop6 = elementToRender.props).afterClose) === null || _elementToRender$prop5 === void 0 ? void 0 : _elementToRender$prop5.call(_elementToRender$prop6);
          setElementToRender(replacedElement);
        }
      };
    });
    return /*#__PURE__*/React.cloneElement(elementToRender, _objectSpread(_objectSpread({}, elementToRender.props), {}, {
      key: keyRef.current,
      mountContainer: false,
      visible: visible,
      onClose: onClose,
      afterClose: afterClose
    }));
  });
  var wrapperRef = /*#__PURE__*/React.createRef();
  var unmount = (0, _renderTo.renderTo)( /*#__PURE__*/React.createElement(_configProvider.RuntimeConfigProvider, null, /*#__PURE__*/React.createElement(Wrapper, {
    ref: wrapperRef
  })), (_element$props$mountC = element.props.mountContainer) !== null && _element$props$mountC !== void 0 ? _element$props$mountC : (0, _configProvider.getRuntimeConfig)().mountContainer);
  return {
    close: function close() {
      if (wrapperRef.current) {
        var _wrapperRef$current;

        (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.close();
      } else {
        unmount();
      }
    },
    replace: function replace(replacedElement) {
      var _wrapperRef$current2;

      (_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : _wrapperRef$current2.replace(replacedElement);
    }
  };
};

exports.renderImperatively = renderImperatively;