@fruits-chain/react-native-xiaoshu/lib/commonjs/portal/portal-host.js

🌈 React Native UI library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.portal = exports.default = exports.PortalContext = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _portalManager = _interopRequireDefault(require("./portal-manager.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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; }
/* eslint-disable react/jsx-no-constructed-context-values */
/* eslint-disable no-unmodified-loop-condition */
/* eslint-disable @typescript-eslint/explicit-member-accessibility */
/* eslint-disable @typescript-eslint/consistent-type-definitions */

const PortalContext = exports.PortalContext = /*#__PURE__*/(0, _react.createContext)(null);
// events
const addType = 'REACT_NATIVE_XIAOSHU_ADD_PORTAL';
const removeType = 'REACT_NATIVE_XIAOSHU_REMOVE_PORTAL';
// fix react native web does not support DeviceEventEmitter
const TopViewEventEmitter = _reactNative.DeviceEventEmitter || new _reactNative.NativeEventEmitter();
class PortalGuard {
  nextKey = 10000;
  add = e => {
    const key = this.nextKey++;
    TopViewEventEmitter.emit(addType, e, key);
    return key;
  };
  remove = key => TopViewEventEmitter.emit(removeType, key);
}
/**
 * portal
 */
const portal = exports.portal = new PortalGuard();
/**
 * Portal host renders all of its children `Portal` elements.
 * For example, you can wrap a screen in `Portal.Host` to render items above the screen.
 * If you're using the `Provider` component, it already includes `Portal.Host`.
 *
 * ## Usage
 * ```js
 * import * as React from 'react';
 * import { Text } from 'react-native';
 * import { Portal } from '@fruits-chain/react-native-xiaoshu';
 *
 * export default class MyComponent extends React.Component {
 *   render() {
 *     return (
 *       <Portal.Host>
 *         <Text>Content of the app</Text>
 *       </Portal.Host>
 *     );
 *   }
 * }
 * ```
 *
 * Here any `Portal` elements under `<App />` are rendered alongside `<App />` and will appear above `<App />` like a `Modal`.
 */
class PortalHost extends _react.Component {
  static displayName = 'Portal.Host';
  nextKey = 0;
  queue = [];
  componentDidMount() {
    const manager = this.manager;
    const queue = this.queue;
    this.addTypeEmitter = TopViewEventEmitter.addListener(addType, this.mount);
    this.removeTypeEmitter = TopViewEventEmitter.addListener(removeType, this.unmount);
    while (queue.length && manager) {
      const action = queue.pop();
      if (!action) {
        continue;
      }
      // tslint:disable-next-line:switch-default
      switch (action.type) {
        case 'mount':
          manager.mount(action.key, action.children);
          break;
        case 'update':
          manager.update(action.key, action.children);
          break;
        case 'unmount':
          manager.unmount(action.key);
          break;
      }
    }
  }
  componentWillUnmount() {
    if (this.addTypeEmitter.remove) {
      this.addTypeEmitter.remove();
    } else {
      // TODO 旧版本如何做兼容
      // @ts-ignore
      TopViewEventEmitter.removeListener?.(addType, this.mount);
    }
    if (this.removeTypeEmitter.remove) {
      this.removeTypeEmitter.remove();
    } else {
      // TODO 旧版本如何做兼容
      // @ts-ignore
      TopViewEventEmitter.removeListener?.(removeType, this.unmount);
    }
  }
  setManager = manager => {
    this.manager = manager;
  };
  mount = (children, _key) => {
    const key = _key || this.nextKey++;
    if (this.manager) {
      this.manager.mount(key, children);
    } else {
      this.queue.push({
        type: 'mount',
        key,
        children
      });
    }
    return key;
  };
  update = (key, children) => {
    if (this.manager) {
      this.manager.update(key, children);
    } else {
      const op = {
        type: 'mount',
        key,
        children
      };
      const index = this.queue.findIndex(o => o.type === 'mount' || o.type === 'update' && o.key === key);
      if (index > -1) {
        this.queue[index] = op;
      } else {
        this.queue.push(op);
      }
    }
  };
  unmount = key => {
    if (this.manager) {
      this.manager.unmount(key);
    } else {
      this.queue.push({
        type: 'unmount',
        key
      });
    }
  };
  render() {
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PortalContext.Provider, {
      value: {
        mount: this.mount,
        update: this.update,
        unmount: this.unmount
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: styles.container,
        collapsable: false,
        children: this.props.children
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_portalManager.default, {
        ref: this.setManager
      })]
    });
  }
}
exports.default = PortalHost;
const styles = _reactNative.StyleSheet.create({
  container: {
    flex: 1
  }
});
//# sourceMappingURL=portal-host.js.map