@fluentui/react-component-ref
Version:
A set of components and utils to deal with React refs.
148 lines (146 loc) • 6.33 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.Ref = void 0;
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var React = _interopRequireWildcard(require("react"));
var ReactIs = _interopRequireWildcard(require("react-is"));
var ReactDOM = _interopRequireWildcard(require("react-dom"));
var _utils = require("./utils");
var _excluded = ["children", "innerRef"];
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
// ========================================================
// 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);
}
var Ref = /*#__PURE__*/function (_React$Component) {
(0, _inheritsLoose2.default)(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;
(0, _utils.handleRef)(children.ref, node);
(0, _utils.handleRef)(innerRef, node);
_this.currentNode = node;
};
_this.handleSelfOverride = function (node) {
var _this$props2 = _this.props,
children = _this$props2.children,
innerRef = _this$props2.innerRef;
(0, _utils.handleRef)(children.props.innerRef, node);
(0, _utils.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;
(0, _utils.handleRef)(this.props.innerRef, currentNode);
}
};
_proto.componentDidUpdate = function componentDidUpdate(prevProps) {
if (this.state.kind === 'forward') {
if (prevProps.innerRef !== this.props.innerRef) {
(0, _utils.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) {
(0, _utils.handleRef)(this.props.innerRef, currentNode);
}
}
};
_proto.componentWillUnmount = function componentWillUnmount() {
if (this.state.kind === 'forward') {
delete this.currentNode;
} else if (this.state.kind === 'find') {
(0, _utils.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 = (0, _objectWithoutPropertiesLoose2.default)(_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);
exports.Ref = Ref;
//# sourceMappingURL=Ref.js.map