MutateObserver.js 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  2. import React from 'react';
  3. import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
  4. import { supportRef, useComposeRef } from "rc-util/es/ref";
  5. import findDOMNode from "rc-util/es/Dom/findDOMNode";
  6. import useEvent from "rc-util/es/hooks/useEvent";
  7. import DomWrapper from "./wrapper";
  8. import useMutateObserver from "./useMutateObserver";
  9. var MutateObserver = function MutateObserver(props) {
  10. var children = props.children,
  11. options = props.options,
  12. _props$onMutate = props.onMutate,
  13. onMutate = _props$onMutate === void 0 ? function () {} : _props$onMutate;
  14. var callback = useEvent(onMutate);
  15. var wrapperRef = React.useRef(null);
  16. var elementRef = React.useRef(null);
  17. var canRef = /*#__PURE__*/React.isValidElement(children) && supportRef(children);
  18. var mergedRef = useComposeRef(elementRef, canRef ? children.ref : null);
  19. var _React$useState = React.useState(null),
  20. _React$useState2 = _slicedToArray(_React$useState, 2),
  21. target = _React$useState2[0],
  22. setTarget = _React$useState2[1];
  23. useMutateObserver(target, callback, options);
  24. // =========================== Effect ===========================
  25. // Bind target
  26. useLayoutEffect(function () {
  27. setTarget(findDOMNode(elementRef.current) || findDOMNode(wrapperRef.current));
  28. });
  29. // =========================== Render ===========================
  30. if (!children) {
  31. if (process.env.NODE_ENV !== 'production') {
  32. console.error('MutationObserver need children props');
  33. }
  34. return null;
  35. }
  36. return /*#__PURE__*/React.createElement(DomWrapper, {
  37. ref: wrapperRef
  38. }, canRef ? /*#__PURE__*/React.cloneElement(children, {
  39. ref: mergedRef
  40. }) : children);
  41. };
  42. export default MutateObserver;