How to use the @instructure/ui-dom-utils.addResizeListener function in @instructure/ui-dom-utils

To help you get started, we’ve selected a few @instructure/ui-dom-utils examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github instructure / instructure-ui / packages / ui-layout / src / DrawerLayout / DrawerContent / index.js View on Github external
componentDidMount () {
    const rect = getBoundingClientRect(this._content)
    // set initial size
    this.props.onSizeChange({width: rect.width, height: rect.height})
    // listen for changes to size
    this._debounced = debounce(this.props.onSizeChange, 100, {leading: false, trailing: true})
    this._resizeListener = addResizeListener(this._content, this._debounced)
  }
github instructure / instructure-ui / packages / ui-layout / src / addElementQueryMatchListener.js View on Github external
.map(key => key)

    // we only call back if the matches have changed
    if (matches.length !== newMatches.length) {
      matches = newMatches
      cb(matches)
    }

    if (matches.filter(match => newMatches.indexOf(match) === -1).length > 0) {
      matches = newMatches
      cb(matches)
    }
  }

  const debounced = debounce(updateElementMatches, 100, { leading: false, trailing: true })
  const elementResizeListener = addResizeListener(node, debounced)
  const { width, height } = getBoundingClientRect(node)

  updateElementMatches({ width, height })

  return {
    remove () {
      if (elementResizeListener) {
        elementResizeListener.remove()
      }

      if (debounced) {
        debounced.cancel()
      }
    }
  }
}
github instructure / instructure-ui / packages / ui-navigation / src / AppNav / index.js View on Github external
componentDidMount () {
    this._debounced = debounce(this.handleResize, this.props.debounce, { leading: true, trailing: true })
    this._resizeListener = addResizeListener(this._list, this._debounced)

    this.handleResize()
  }
github instructure / instructure-ui / packages / ui-elements / src / TruncateText / index.js View on Github external
componentDidMount () {
    const { children } = this.props

    if (children) {
      this.checkChildren()
      this._text = ensureSingleChild(children)

      this.truncate()

      if (this.props.debounce === 0) {
        this._resizeListener = addResizeListener(this._ref, this.update)
      } else {
        this._debounced = debounce(this.update, this.props.debounce, { leading: true, trailing: true })
        this._resizeListener = addResizeListener(this._ref, this._debounced)
      }
    }
  }
github instructure / instructure-ui / packages / ui-elements / src / TruncateText / index.js View on Github external
componentDidMount () {
    const { children } = this.props

    if (children) {
      this.checkChildren()
      this._text = ensureSingleChild(children)

      this.truncate()

      if (this.props.debounce === 0) {
        this._resizeListener = addResizeListener(this._ref, this.update)
      } else {
        this._debounced = debounce(this.update, this.props.debounce, { leading: true, trailing: true })
        this._resizeListener = addResizeListener(this._ref, this._debounced)
      }
    }
  }