@fluentui/react-component-ref/dist/es/Ref.js

A set of components and utils to deal with React refs.

import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
var _excluded = ["children", "innerRef"];
import * as React from 'react';
import * as ReactIs from 'react-is';
import * as ReactDOM from 'react-dom';
import { handleRef } from './utils';

// ========================================================
// react/packages/react-reconciler/src/ReactFiber.js
// ========================================================
/**
 * Detects if a passed element is a Fiber object instead of an element. Is needed as `ReactDOM.findDOMNode()` returns
 * a Fiber in `react-test-renderer` that can cause issues with tests. Is used only in non-production env.
 *
 * @see https://github.com/facebook/react/issues/7371#issuecomment-317396864
 * @see https://github.com/Semantic-Org/Semantic-UI-React/issues/4061#issuecomment-694895617
 */
function isFiberRef(node) {
  if (node === null) {
    return false;
  }
  if (node instanceof Element || node instanceof Text) {
    return false;
  }
  return !!(node.type && node.tag);
}
export var Ref = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(Ref, _React$Component);
  function Ref() {
    var _this;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.prevNode = void 0;
    _this.currentNode = void 0;
    _this.state = {
      kind: null
    };
    _this.handleForwardRefOverride = function (node) {
      var _this$props = _this.props,
        children = _this$props.children,
        innerRef = _this$props.innerRef;
      handleRef(children.ref, node);
      handleRef(innerRef, node);
      _this.currentNode = node;
    };
    _this.handleSelfOverride = function (node) {
      var _this$props2 = _this.props,
        children = _this$props2.children,
        innerRef = _this$props2.innerRef;
      handleRef(children.props.innerRef, node);
      handleRef(innerRef, node);
    };
    return _this;
  }
  Ref.getDerivedStateFromProps = function getDerivedStateFromProps(props) {
    var child = React.Children.only(props.children);
    if (child.type === Ref) {
      return {
        kind: 'self'
      };
    }
    if (ReactIs.isForwardRef(child)) {
      return {
        kind: 'forward'
      };
    }
    return {
      kind: 'find'
    };
  };
  var _proto = Ref.prototype;
  _proto.componentDidMount = function componentDidMount() {
    if (this.state.kind === 'find') {
      var currentNode = ReactDOM.findDOMNode(this);
      if (process.env.NODE_ENV !== 'production') {
        if (isFiberRef(currentNode)) {
          currentNode = null;
        }
      }
      this.prevNode = currentNode;
      handleRef(this.props.innerRef, currentNode);
    }
  };
  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    if (this.state.kind === 'forward') {
      if (prevProps.innerRef !== this.props.innerRef) {
        handleRef(this.props.innerRef, this.currentNode);
      }
    } else if (this.state.kind === 'find') {
      var currentNode = ReactDOM.findDOMNode(this);
      if (process.env.NODE_ENV !== 'production') {
        if (isFiberRef(currentNode)) {
          currentNode = null;
        }
      }
      var isNodeChanged = this.prevNode !== currentNode;
      var isRefChanged = prevProps.innerRef !== this.props.innerRef;
      if (isNodeChanged) {
        this.prevNode = currentNode;
      }
      if (isNodeChanged || isRefChanged) {
        handleRef(this.props.innerRef, currentNode);
      }
    }
  };
  _proto.componentWillUnmount = function componentWillUnmount() {
    if (this.state.kind === 'forward') {
      delete this.currentNode;
    } else if (this.state.kind === 'find') {
      handleRef(this.props.innerRef, null);
      delete this.prevNode;
    }
  };
  _proto.render = function render() {
    var _this$props3 = this.props,
      children = _this$props3.children,
      innerRef = _this$props3.innerRef,
      rest = _objectWithoutPropertiesLoose(_this$props3, _excluded);
    var childWithProps = rest && Object.keys(rest).length > 0 ? /*#__PURE__*/React.cloneElement(children, rest) : children;
    if (this.state.kind === 'find') {
      return childWithProps;
    }
    if (this.state.kind === 'forward') {
      return /*#__PURE__*/React.cloneElement(childWithProps, {
        ref: this.handleForwardRefOverride
      });
    }
    if (this.state.kind === 'self') {
      return /*#__PURE__*/React.cloneElement(childWithProps, {
        innerRef: this.handleSelfOverride
      });
    }
    return null;
  };
  return Ref;
}(React.Component);
//# sourceMappingURL=Ref.js.map