rc-mutate-observer-modern
Version:
React MutateObserver Component
48 lines (45 loc) • 1.98 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
var _ref = require("rc-util/lib/ref");
var _findDOMNode = _interopRequireDefault(require("rc-util/lib/Dom/findDOMNode"));
var _useEvent = _interopRequireDefault(require("rc-util/lib/hooks/useEvent"));
var _wrapper = _interopRequireDefault(require("./wrapper"));
var _useMutateObserver = _interopRequireDefault(require("./useMutateObserver"));
const MutateObserver = props => {
const {
children,
options,
onMutate = () => {}
} = props;
const callback = (0, _useEvent.default)(onMutate);
const wrapperRef = _react.default.useRef(null);
const elementRef = _react.default.useRef(null);
const canRef = /*#__PURE__*/_react.default.isValidElement(children) && (0, _ref.supportRef)(children);
const mergedRef = (0, _ref.useComposeRef)(elementRef, canRef ? children.ref : null);
const [target, setTarget] = _react.default.useState(null);
(0, _useMutateObserver.default)(target, callback, options);
// =========================== Effect ===========================
// Bind target
(0, _useLayoutEffect.default)(() => {
setTarget((0, _findDOMNode.default)(elementRef.current) || (0, _findDOMNode.default)(wrapperRef.current));
});
// =========================== Render ===========================
if (!children) {
if (process.env.NODE_ENV !== 'production') {
console.error('MutationObserver need children props');
}
return null;
}
return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
ref: wrapperRef
}, canRef ? /*#__PURE__*/_react.default.cloneElement(children, {
ref: mergedRef
}) : children);
};
var _default = exports.default = MutateObserver;