@instructure/quiz-interactions/src/components/formula/Take/index.js

A React UI component Library for quiz interaction types.

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

import {withI18nSupport} from '@instructure/quiz-common/with-i18n-support'

import NumericTake from '../../numeric/Take'
import {substituteVars} from '../common/util'

/**
---
category: Formula
---
  Formula Take component

  ```jsx_example
  function Example (props) {
    const exampleProps = {
      itemBody: 'Solve the equation \\(y = `m` \\cdot x + `b`\\) where x = `x`',
      interactionData: {
        variables: [{
          name: 'm',
          value: 2
        }, {
          name: 'b',
          value: 17.23456
        }, {
          name: 'x',
          value: 1000
        }]
      }
    }

    return (
      <FormulaTake {...exampleProps} {...props} />
    )
  }

  <SettingsSwitcher locales={LOCALES}>
    <TakeStateProvider>
      <Example />
    </TakeStateProvider>
  </SettingsSwitcher>
  ```
**/
export default class FormulaTake extends withI18nSupport(Component) {
  static propTypes = {
    itemBody: PropTypes.string.isRequired,
    interactionData: PropTypes.object.isRequired,
    handleResponseUpdate: PropTypes.func.isRequired,
    locale: PropTypes.string,
    separatorConfig: PropTypes.shape({
      decimalSeparator: PropTypes.string,
      thousandSeparator: PropTypes.string,
    }),
  }

  static defaultProps = {
    locale: null,
  }

  static contextTypes = {
    locale: PropTypes.string,
  }

  render() {
    const {itemBody, interactionData, ...props} = this.props
    const transformedBody = substituteVars(itemBody, interactionData.variables, this.locale)

    return <NumericTake {...props} itemBody={transformedBody} />
  }
}