How to use @instructure/console - 10 common examples

setSelected (index) {
    let selectedIndex

    // Check index boundary
    error(this.isValidIndex(index), `[Tabs] Invalid tab index: '${index}'.`)

    const handleChange = () => {
      if (typeof selectedIndex !== 'undefined' && typeof this.props.onChange === 'function') {
        this.props.onChange(index, selectedIndex)
      }
    }

    if (typeof this.props.selectedIndex === 'undefined') {
      this.setState((state, props) => {
        selectedIndex = state.selectedIndex

        if (index !== selectedIndex) {
          handleChange()
          return { selectedIndex: index, focus: true }
        } else {
          return state

get containsTruncateText () {
    let truncateText = false

    React.Children.forEach(this.props.children, (child) => {
      if (child && matchComponentTypes(child, ['TruncateText'])) {
        truncateText = true
      }
    })

    warn( // if display prop is used, warn about icon or TruncateText
      !truncateText || this.props.display === undefined,
      '[Link] Using the display property with TruncateText may cause layout issues.'
    )

    return truncateText
  }

renderIcon () {
    warn( // if display prop is used, warn about icon or TruncateText
      this.props.display === undefined,
      '[Link] Using the display property with an icon may cause layout issues.'
    )

    return <span>{callRenderProp(this.props.renderIcon)}</span>
  }

constructor (props) {
    super(props)
    const options = parseOptions(props.children)

    error(
      !(props.allowCustom && props.multiple),
      `[Select] The 'allowCustom' and 'multiple' props are mutually exclusive.`
    )

    this.state = { options }
  }

initLiveRegion (liveRegion) {
    error(
      liveRegion.getAttribute('role') === 'alert',
      `[Alert] live region must have role='alert' set on page load in order to announce content`
    )

    if (liveRegion) {
      liveRegion.setAttribute('aria-live', this.props.liveRegionPoliteness)
      liveRegion.setAttribute('aria-relevant', 'additions text')
      liveRegion.setAttribute('aria-atomic', this.props.isLiveRegionAtomic)
    }
  }

blur () {
    error(!this._active, `[FocusRegion] Cannot call '.blur()' on a region that is currently active.`)
    this._keyboardFocusRegion.blur()
  }
}

focus () {
    if (!this.props.open || !this.contentElement) {
      error(false, '[Dialog] Can\'t focus a Dialog that isn\'t open.')
      return
    }

    if (this._focusRegion) {
      FocusRegionManager.focusRegion(this.contentElement, this._focusRegion.id)
    }
  }

_validateDateProp (dateStr, fallbackDateStr, propName, locale, timezone) {
    const parsedDate = this._parseDate(dateStr, locale, timezone)
    const isEmpty = !dateStr
    const isValid = parsedDate.isValid()

    error(isEmpty || isValid, `[DatePicker] Unexpected date format received for '${propName}' prop: '${dateStr}'.`)

    return (isEmpty || !isValid) ? fallbackDateStr : dateStr
  }

function getRegisteredTheme (themeKey, defaultTheme = {}) {
  if (!themeKey) return defaultTheme

  const theme = getRegistry().themes[themeKey]
  if (theme) {
    return theme
  } else {
    if (themeKey !== DEFAULT_THEME_KEY) {
      error(theme, `[themeable] Could not find theme: '${themeKey}' in the registry.`)
    }
    return defaultTheme
  }
}

function generateTheme (themeKey, overrides) {
  const registry = getRegistry()

  error((registry.registered.length > 0), '[themeable] No themes have been registered. ' +
    'Import a theme from @instructure/ui-themes or register a custom theme with registerTheme ' +
    '(see @instructure/ui-themeable).'
  )

  const components = getRegisteredComponents(themeKey)
  const theme = {}

  const variables = mergeWithDefaultThemeVariables(themeKey, overrides)

  if (isEmpty(variables)) {
    return
  }

  Object.getOwnPropertySymbols(components)
    .forEach((componentKey) => {
      theme[componentKey] = components[componentKey](variables)