@instructure/quiz-interactions/src/components/numeric/Edit/WithinARange.js

A React UI component Library for quiz interaction types.

import React, {useState} from 'react'
import PropTypes from 'prop-types'

import {Decimal} from '@instructure/quiz-i18n/util/Decimal'
import {Flex} from '@instructure/quiz-common/components/Flex/index'
import {ScientificNumberInput} from '@instructure/quiz-number-input/components/ScientificNumberInput'

import t from '@instructure/quiz-i18n/format-message'

function WithinARange({
  end: propEnd = undefined,
  id,
  locale,
  messages = undefined,
  numericTypeSelect,
  onChange,
  start: propStart = undefined,
}) {
  const [start, setStart] = useState(() => {
    if (!propStart) return ''

    try {
      return Decimal.toLocaleString(propStart, locale)
    } catch {
      return propStart
    }
  })

  const [end, setEnd] = useState(() => {
    if (!propEnd) return ''

    try {
      return Decimal.toLocaleString(propEnd, locale)
    } catch {
      return propEnd
    }
  })

  const handleStartChange = (event, value, normalized) => {
    setStart(value)
    onChange(event, {id, start: normalized})
  }

  const handleEndChange = (event, value, normalized) => {
    setEnd(value)
    onChange(event, {id, end: normalized})
  }

  return (
    <Flex alignItems="start">
      <Flex.Item shouldGrow shouldShrink margin="0 xx-small">
        {numericTypeSelect}
      </Flex.Item>
      <Flex.Item shouldGrow shouldShrink margin="0 xx-small">
        <ScientificNumberInput
          renderLabel={t('Range start')}
          messages={messages.start}
          onChange={handleStartChange}
          value={start}
          aria-valuetext={`${start} ${t('Range start')}`}
          isRequired={true}
        />
      </Flex.Item>
      <Flex.Item shouldGrow shouldShrink margin="0 xx-small">
        <ScientificNumberInput
          renderLabel={t('Range end')}
          messages={messages.end}
          onChange={handleEndChange}
          value={end}
          aria-valuetext={`${end} ${t('Range end')}`}
          isRequired={true}
        />
      </Flex.Item>
    </Flex>
  )
}

WithinARange.propTypes = {
  end: PropTypes.string,
  id: PropTypes.string.isRequired,
  locale: PropTypes.string.isRequired,
  messages: PropTypes.objectOf(PropTypes.array),
  numericTypeSelect: PropTypes.node.isRequired,
  onChange: PropTypes.func.isRequired,
  start: PropTypes.string,
}

WithinARange.defaultProps = {
  end: void 0,
  messages: void 0,
  start: void 0,
}

export default WithinARange