@instructure/quiz-interactions/src/components/numeric/Edit/ExactResponse.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 ExactResponse({
  id,
  locale,
  messages = {},
  numericTypeSelect,
  onChange,
  value: propValue = undefined,
}) {
  const [value, setValue] = useState(() => {
    if (!propValue) return ''

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

  const handleValueChange = (event, newValue, normalized) => {
    setValue(newValue)
    onChange(event, {id, value: normalized})
  }

  return (
    <Flex alignItems="start" gap="small">
      <Flex.Item shouldGrow shouldShrink>
        {numericTypeSelect}
      </Flex.Item>
      <Flex.Item shouldGrow shouldShrink>
        <ScientificNumberInput
          renderLabel={t('Answer')}
          isRequired={true}
          locale={locale}
          messages={messages.value}
          value={value}
          onChange={handleValueChange}
          data-automation="sdk-numeric-exact-response-number-input"
          aria-valuetext={`${value} ${t('Answer')}`}
        />
      </Flex.Item>
    </Flex>
  )
}

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

ExactResponse.defaultProps = {
  messages: {},
  value: void 0,
}

export default ExactResponse