UNPKG

rc-mutate-observer-modern

Version:
48 lines (45 loc) 1.98 kB
"use strict"; 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;