How to use @instructure/ui-i18n - 10 common examples

*
     * See [List of tz database time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) for the list
     * of possible options.
     *
     * This property can also be set via a context property and if both are set then the component property takes
     * precedence over the context property.
     *
     * The web browser's timezone will be used if no value is set via a component property or a context
     * property.
     */
    timezone: PropTypes.string,
    /**
     * An ISO 8601 formatted date string representing the current selected value
     * (must be accompanied by an onChange prop).
     */
    value: controllable(I18nPropTypes.iso8601),
    /**
     * Whether or not to disable the select
     */
    disabled: PropTypes.bool,
    /**
     * Works just like disabled but keeps the same styles as if it were active
     */
    readOnly: PropTypes.bool
  }
  /* eslint-enable react/require-default-props */

  static defaultProps = {
    defaultToFirstOption: false,
    format: 'LT',
    step: 30
  }

---
**/
@testable()
@themeable(theme, styles)
@deprecated('7.0.0', null, 'Use @instructure/ui-select instead')
class TimeInput extends Component {
  /* eslint-disable react/require-default-props */
  static propTypes = {
    /**
     * Whether to default to the first option when `defaultValue` hasn't been specified.
     */
    defaultToFirstOption: PropTypes.bool,
    /**
     * An ISO 8601 formatted date string to use if `value` isn't provided.
     */
    defaultValue: I18nPropTypes.iso8601,
    /**
     * The format to use when displaying the possible and currently selected options.
     *
     * See [moment.js formats](https://momentjs.com/docs/#/displaying/format/) for the list of available formats.
     */
    format: PropTypes.string,
    /**
     * The label associated with the underlying [TextInput](#TextInput).
     */
    label: PropTypes.node.isRequired,
    /**
     * A standard language identifier.
     *
     * See [moment.js i18n](https://momentjs.com/docs/#/i18n/) for more details.
     *
     * This property can also be set via a context property and if both are set then the component property takes

componentWillReceiveProps (nextProps, nextContext) {
    if (!this._input.value) return

    // If the locale or precision props change, update the input value accordingly
    const currentLocale = this.getLocale(this.props, this.context)
    const nextLocale = this.getLocale(nextProps, nextContext)
    const currentPrecision = this.getPrecision(this.props)
    const nextPrecision = this.getPrecision(nextProps)
    if (currentLocale === nextLocale && deepEqual(currentPrecision, nextPrecision)) return

    const decimalValue = Decimal.parse(this._input.value, currentLocale)
    if (decimalValue.isNaN()) return

    const formattedString = this.formatValue(decimalValue, nextLocale, nextPrecision)
    this.setState({ value: formattedString })
    nextProps.onChange(null, formattedString, this.normalizeValue(decimalValue, nextPrecision))
  }

getDecimalFromNormalizedString (value) {
    // For some reason Decimal.parse treats null as 0, so we have to check for it here
    return Decimal.parse(value === null ? NaN : value, Locale.defaultLocale)
  }

applyStep = (dir) => {
    let d = Decimal.parse(this._input.value || '0', this.locale)
    if (this.step.isNaN()) return d

    if (!d.mod(this.step).equals(0)) {
      // case when value is between steps, so we snap to the next step
      const steps = d.div(this.step)

      if (dir > 0) {
        d = steps.floor().times(this.step)
      } else {
        d = steps.ceil().times(this.step)
      }
    }

    // then we add the step
    if (dir > 0) {
      d = d.plus(this.step)

import { passthroughProps } from '@instructure/ui-react-utils'
import { bidirectional } from '@instructure/ui-i18n'
import { element } from '@instructure/ui-prop-types'
import { shallowEqual } from '@instructure/ui-utils'

/* istanbul ignore file */


/**
---
private: true
---
@module SubtreePortal
**/
@bidirectional()
class SubtreePortal extends Component {
  static propTypes = {
    /**
     * Wheter or not the `` is open
     */
    open: PropTypes.bool,

    /**
     * Callback fired when `` content has been mounted in the DOM
     */
    onOpen: PropTypes.func,

    /**
     * Callback fired when `` has been unmounted from the DOM
     */
    onClose: PropTypes.func,

parseISO (iso = '', locale = this.locale, timezone = this.timezone) {
    const parsed = DateTime.parse(iso, locale, timezone)

    if (parsed.isValid()) {
      return {
        iso: parsed.toISOString(true),
        message: {
          type: 'success',
          text: parsed.format(this.props.messageFormat),
        },
      }
    }
    return {
      iso: undefined,
      message: iso ? this.getErrorMessage(...iso.split('T')) : null,
    }
  }

_parseDate (dateStr, locale, timezone) {
    return DateTime.parse(dateStr, locale, timezone)
  }

getBaseDateForRendering (defaultValue, locale, timezone, value) {
    let baseDate
    const baseValue = value || defaultValue
    if (baseValue) {
      baseDate = DateTime.parse(baseValue, locale, timezone)
    } else {
      baseDate = DateTime.now(locale, timezone)
    }
    return baseDate.second(0).millisecond(0)
  }

_parseDate (dateStr, locale, timezone) {
    return DateTime.parse(dateStr, locale, timezone)
  }