zarm/es/utils/dom/renderImperatively.js

基于 React 的移动端UI库

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";

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) { _defineProperty(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
import * as React from 'react';
import { getRuntimeConfig, RuntimeConfigProvider } from '../../config-provider';
import { renderTo } from './renderTo';
export var renderImperatively = function renderImperatively(element) {
  var _element$props$mountC;

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

    var closedRef = React.useRef(false);

    var _React$useState3 = React.useState(element),
        _React$useState4 = _slicedToArray(_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 = renderTo( /*#__PURE__*/React.createElement(RuntimeConfigProvider, null, /*#__PURE__*/React.createElement(Wrapper, {
    ref: wrapperRef
  })), (_element$props$mountC = element.props.mountContainer) !== null && _element$props$mountC !== void 0 ? _element$props$mountC : 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);
    }
  };
};