How to use @instructure/ui-react-utils - 10 common examples

// consolidating the label and aria-valuetext to put in aria-label because
    // NVDA does not read aria-valuetext: https://github.com/nvaccess/nvda/issues/913
    // But leaving aria-valuetext because JAWS ignores aria-label
    const labelAndValueText = `${label} ${valueText}`

    const value = (typeof formatDisplayedValue === 'function') && formatDisplayedValue(valueNow, valueMax)

    const style = this.state.animateOnMount ? null : {
      strokeDashoffset: `${this.dashOffset()}em`
    }

    const radius = this.radius()

    const passthroughProps = View.omitViewProps(
      omitProps(this.props, ProgressCircle.propTypes, ['animateOnMount']),
      ProgressCircle
    )

    return (

render () {
    const ElementType = getElementType(Dialog, this.props)
    return this.props.open ? (
      
        {this.props.children}
      
    ) : null
  }
}

elementRef,
      focused,
      href,
      margin,
      onClick,
      role,
      shape,
      className, // eslint-disable-line react/prop-types
      to,  // eslint-disable-line react/prop-types
      width,
      tabIndex,
      ...props
    } = this.props

    const passthroughProps = View.omitViewProps(
      omitProps(props, FocusableView.propTypes),
      FocusableView
    )

    return (

if (process.env.NODE_ENV !== 'production') {
      // show warning if icon is added as a child
      if (this.hasVisibleChildren) {
        React.Children.forEach(children, (child) => {
          const icon = child && child.type && typeof child.type.glyphName !== 'undefined'
          warn(
            !icon,
            `[Button] Icons as children is deprecated. Please use the 'icon' prop instead.`
          )
        })
      }
    }

    // warn for unallowed view props
    const passthroughProps = View.omitViewProps(
      omitProps(this.props, Button.propTypes),
      Button
    )

    return (

const { allowMultiple, disabled, readOnly, interaction } = this.props
    const id = this.props.id || this.defaultId

    // make readonly input functionally disabled
    const functionallyDisabled = disabled || readOnly ||
      interaction === 'disabled' || interaction === 'readonly'

    const classes = {
      [styles.label]: true,
      [styles.functionallyDisabled]: functionallyDisabled,
      [styles.visuallyDisabled]: interaction === 'disabled' || disabled,
      [styles.dragRejected]: this.state.isDragRejected || this.invalid,
      [styles.dragAccepted]: this.state.isDragAccepted,
      [styles.focused]: this.state.isFocused
    }
    const props = omitProps(this.props, FileDrop.propTypes)

    return (
      <div>
        <label>
          <span>
            <span>
              {this.renderLabel()}
            </span>
          </span></label></div>

}
                

                  {/*
                    The input and content after input should not wrap, so they're in their own
                    Flex container
                  */}
                  
                    
                      {this.renderInput()}
                    
                    {(renderAfterInput || icon) &&
                      
                        {renderAfterInput ?
                          callRenderProp(renderAfterInput) :
                          callRenderProp(icon)
                        }
                      
                    }
                  

                
              

              /* If no prepended or appended content, don't render Flex layout */
              : this.renderInput()
          }
        
      
    )
  }

renderChildren (truncated, data, width) {
    if (!truncated) {
      return this._text
    }

    let childElements = []
    // iterate over each node used in the truncated string
    for (let i = 0; i < data.length; i++) {
      const item = data[i]
      const element = this._text.props.children[i]
      const nodeText = item.join('')

      if (element && element.props) {
        // if node is an html element and not just a string
        childElements.push(safeCloneElement(element, element.props, nodeText))
      } else {
        childElements.push(nodeText)
      }
    }
    // this spacer element is set to the max width the full text could potentially be
    // without this, text in `width: auto` elements won't expand to accomodate more text, once truncated
    childElements.push(<span width="" style="{{width:">)

    const children = React.Children.map(childElements, child =&gt; child)
    return (
      this._text.props
        ? safeCloneElement(this._text, this._text.props, children)
        : children
    )
  }
</span>

{isShowingOptions ? Children.map(children, (child, index) => {
            if (!child || !matchComponentTypes(child, [Group, Option])) {
              return // ignore invalid children
            }
            if (matchComponentTypes(child, [Option])) {
              lastWasGroup = false
              return this.renderOption(child, {
                getOptionProps,
                getDisabledOptionProps
              })
            }
            if (matchComponentTypes(child, [Group])) {
              const afterGroup = lastWasGroup ? true : false
              lastWasGroup = true
              return this.renderGroup(child, {
                getOptionProps,
                getDisabledOptionProps,
                // for rendering separators appropriately

return Children.map(children, (child) => {
      if (!matchComponentTypes(child, ['MenuItemSeparator', 'MenuItem', 'MenuItemGroup', 'Menu'])) {
        return
      }

      count += 1

      const isTabbable = !this.state.hasFocus && count === 1

      if (matchComponentTypes(child, ['MenuItemSeparator'])) {
        return <li role="none">{child}</li>
      }

      const controls = (
        child.props['aria-controls'] ||
        child.props.controls ||
        this.props['aria-controls'] || // eslint-disable-line react/prop-types
        this.props.controls // eslint-disable-line react/prop-types

const {
      open,
      insertAt,
      onOpen,
      onClose,
      mountNode,
      children,
      elementRef,
      ...props
    } = this.props

    // Create node if it doesn't already exist
    if (!this.DOMNode) {
      const node = document.createElement('span')
      const attributes = {
        ...passthroughProps(props),
        dir: this.dir
      }

      Object.keys(attributes).forEach((name) => {
        node.setAttribute(name, attributes[name])
      })

      elementRef(node)

      this.DOMNode = node
    }

    // Append node to container if it isn't already
    if (this.DOMNode.parentNode !== this.state.mountNode) {
      if (insertAt === 'bottom') {
        this.state.mountNode.appendChild(this.DOMNode)