componentDidUpdate()

in src/layer/tether.ts [40:80]

• 31 lines of code
• 12 McCabe index (conditional complexity)

  componentDidUpdate(prevProps: TetherProps, prevState: TetherState) {
    // Handles the case where popover content changes size and creates a gap between the anchor and
    // the popover. Popper.js only schedules updates on resize and scroll events. In the case of
    // the Select component, when options were filtered in the dropdown menu it creates a gap
    // between it and the input element.

    if (this.props.anchorRef) {
      const { height, width } = this.props.anchorRef.getBoundingClientRect();

      if (this.anchorHeight !== height || this.anchorWidth !== width) {
        this.anchorHeight = height;
        this.anchorWidth = width;
        this.popper && this.popper.scheduleUpdate();
      }
    }

    if (this.props.popperRef) {
      const { height, width } = this.props.popperRef.getBoundingClientRect();

      if (this.popperHeight !== height || this.popperWidth !== width) {
        this.popperHeight = height;
        this.popperWidth = width;
        this.popper && this.popper.scheduleUpdate();
      }

      if (this.state.isMounted !== prevState.isMounted) {
        if (!this.props.anchorRef) {
          if (__DEV__) {
            // eslint-disable-next-line no-console
            console.warn(
              `[baseui][TetherBehavior] ref has not been passed to the Popper's anchor element.
              See how to pass the ref to an anchor element in the Popover example
              https://baseweb.design/components/popover/#anchor-ref-handling-example`
            );
          }
        } else {
          this.initializePopper();
        }
      }
    }
  }