How to use dom-helpers - 10 common examples

subscribe(listener) {
    const onHashChange = () => {
      // Ignore hash change events triggered by our own navigation.
      if (this._numExpectedHashChanges > 0) {
        --this._numExpectedHashChanges;
        return;
      }

      listener(this.init());
    };

    on(window, 'hashchange', onHashChange);
    return () => off(window, 'hashchange', onHashChange);
  }

handleClickAway = event => {
    // Ignore events that have been `event.preventDefault()` marked.
    if (event.defaultPrevented) {
      return;
    }

    // IE11 support, which trigger the handleClickAway even after the unbind
    if (!this.mounted) {
      return;
    }

    const el = ReactDOM.findDOMNode(this);
    const doc = ownerDocument(el);

    if (
      doc.documentElement &&
      doc.documentElement.contains(event.target) &&
      !isDescendant(el, event.target)
    ) {
      this.props.onClickAway(event);
    }
  };

onUpdate = () => {
    if (!this._isMounted) {
      return
    }

    const { offsetTop, viewportOffsetTop } = this.props
    const scrollTop = getScrollTop(ownerWindow(this))
    const positionTopMin = scrollTop + (viewportOffsetTop || 0)

    if (positionTopMin <= offsetTop) {
      this.updateState('top', null, null)
      return
    }

    if (positionTopMin > this.getPositionTopMax()) {
      if (this.state.affixed === 'bottom') {
        this.updateStateAtBottom()
      } else {
        // Setting position away from `fixed` can change the offset parent of
        // the affix, so we can't calculate the correct position until after
        // we've updated its position.
        this.setState(
          {

if (typeof target === 'string') {
      const targetElement =
        document.getElementById(target) ||
        document.getElementsByName(target)[0];
      if (targetElement) {
        targetElement.scrollIntoView();
        return;
      }

      // Fallback to scrolling to top when target fragment doesn't exist.
      target = [0, 0]; // eslint-disable-line no-param-reassign
    }

    const [left, top] = target;
    scrollLeft(element, left);
    scrollTop(element, top);
  }
}

componentWillMount () {
    // If this component is being rendered server-side, getScrollbarSize() will return undefined.
    // We handle this case in componentDidMount()
    this._scrollbarSize = getScrollbarSize()
    if (this._scrollbarSize === undefined) {
      this._scrollbarSizeMeasured = false
      this._scrollbarSize = 0
    } else {
      this._scrollbarSizeMeasured = true
    }

    this._calculateChildrenToRender()
  }

({ offset, rowHeight }) => ({
      posStyle: {
        top: offset,
        height: rowHeight,
        paddingRight: scrollbarSize(), // memoized in lib
      },
    })
  ),

getContentAnchorOffset(element) {
    const { getContentAnchorEl, anchorReference } = this.props;
    let contentAnchorOffset = 0;

    if (getContentAnchorEl && anchorReference === 'anchorEl') {
      const contentAnchorEl = getContentAnchorEl(element);

      if (contentAnchorEl && contains(element, contentAnchorEl)) {
        const scrollTop = getScrollParent(element, contentAnchorEl);
        contentAnchorOffset = contentAnchorEl.offsetTop + contentAnchorEl.clientHeight / 2 - scrollTop || 0;
      }

      // != the default value
      process.env.NODE_ENV !== "production" ? warning(this.props.anchorOrigin.vertical === 'top', ['Material-UI: you can not change the default `anchorOrigin.vertical` value ', 'when also providing the `getContentAnchorEl` property to the popover component.', 'Only use one of the two properties.', 'Set `getContentAnchorEl` to null or left `anchorOrigin.vertical` unchanged.'].join('\n')) : void 0;
    }

    return contentAnchorOffset;
  }

addEventListeners() {
        const { event } = this.props;
        const doc = ownerDocument(ReactDOM.findDOMNode(this));

        // Use capture for this listener so it fires before React's listener, to
        // avoid false positives in the contains() check below if the target DOM
        // element is removed in the React mouse callback.
        addEventListener(doc, event, this.handleMouseCapture, true);
        addEventListener(doc, event, this.handleMouse);
        addEventListener(doc, 'keyup', this.handleKeyUp);
    }

} else {
      this._oldScrollRestoration = null;
    }

    this._saveWindowPositionHandle = null;
    this._checkWindowScrollHandle = null;
    this._windowScrollTarget = null;
    this._numWindowScrollAttempts = 0;
    this._ignoreScrollEvents = false;

    this._scrollElements = {};

    // We have to listen to each window scroll update rather than to just
    // location updates, because some browsers will update scroll position
    // before emitting the location change.
    on(window, 'scroll', this._onWindowScroll);

    this._removeTransitionHook = addTransitionHook(() => {
      requestAnimationFrame.cancel(this._saveWindowPositionHandle);
      this._saveWindowPositionHandle = null;

      Object.keys(this._scrollElements).forEach(key => {
        const scrollElement = this._scrollElements[key];
        requestAnimationFrame.cancel(scrollElement.savePositionHandle);
        scrollElement.savePositionHandle = null;

        // It's fine to save element scroll positions here, though; the browser
        // won't modify them.
        if (!this._ignoreScrollEvents) {
          this._saveElementPosition(key);
        }
      });

if (
      'scrollRestoration' in window.history &&
      // Unfortunately, Safari on iOS freezes for 2-6s after the user swipes to
      // navigate through history with scrollRestoration being 'manual', so we
      // need to detect this browser and exclude it from the following code
      // until this bug is fixed by Apple.
      !isMobileSafari()
    ) {
      this._oldScrollRestoration = window.history.scrollRestoration;
      try {
        window.history.scrollRestoration = 'manual';

        // Scroll restoration persists across page reloads. We want to reset
        // this to the original value, so that we can let the browser handle
        // restoring the initial scroll position on server-rendered pages.
        on(window, 'beforeunload', this._restoreScrollRestoration);
      } catch (e) {
        this._oldScrollRestoration = null;
      }
    } else {
      this._oldScrollRestoration = null;
    }

    this._saveWindowPositionHandle = null;
    this._checkWindowScrollHandle = null;
    this._windowScrollTarget = null;
    this._numWindowScrollAttempts = 0;
    this._ignoreScrollEvents = false;

    this._scrollElements = {};

    // We have to listen to each window scroll update rather than to just