quiz-interactions/lib/components/numeric/Take/index.js

A React UI component Library for quiz interaction types.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _uiA11y = require("@instructure/ui-a11y");

var _quizNumberInput = require("@instructure/quiz-number-input");

var _quizRce = require("@instructure/quiz-rce");

var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/lib/format-message"));

/**
---
category: Numeric
---
  Numeric Take component

  ```jsx_example
  function Example (props) {
    const exampleProps = {
      itemBody: 'x is an integer and 9 < x^2 < 99. What\'s the max value of x, minus the minimum value of x',
      userResponse: { value: '18' }
    }

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

  <SettingsSwitcher locales={LOCALES}>
    <TakeStateProvider>
      <Example />
    </TakeStateProvider>
  </SettingsSwitcher>
  ```
**/
var invalidMessage = {
  text: (0, _formatMessage.default)('Answer must be a number. Remove any symbols or units.'),
  type: 'error'
};

var NumericTake =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(NumericTake, _Component);

  function NumericTake(props) {
    var _this;

    (0, _classCallCheck2.default)(this, NumericTake);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(NumericTake).call(this, props));

    _this.checkInvalid = function (value, normalized) {
      var warn = _this.props.displayValidationWarning;

      if (warn && value && normalized == null) {
        _this.setState({
          messages: [invalidMessage]
        });
      }
    };

    _this.checkInvalidOnce = function () {
      var checked = false;
      return function (value, normalized) {
        if (!checked) {
          checked = true;

          _this.checkInvalid(value, normalized);

          if (_this.props.displayValidationWarning && value && normalized == null) {
            var update = normalized == null ? value : normalized;

            _this.props.handleResponseUpdate(update, true);
          }
        }
      };
    };

    _this.setNormalized = function (normalized) {
      _this.setState({
        normalized: normalized
      }, function () {
        _this.markInvalidOnMount(_this.state.value, normalized);
      });
    };

    _this.handleResponseChange = function (e, value, normalized) {
      _this.setState({
        value: value,
        normalized: normalized,
        messages: []
      });

      _this.updateLogs(value, normalized);
    };

    _this.handleResponseBlur = function () {
      var _this$state = _this.state,
          value = _this$state.value,
          normalized = _this$state.normalized;

      _this.checkInvalid(value, normalized);

      _this.updateLogs(value, normalized);
    };

    _this.updateLogs = function (value, normalized) {
      // If the response isn't a number, call the handler with the raw response
      var invalid = _this.props.displayValidationWarning && value && normalized == null;
      var update = normalized == null ? value : normalized;

      if (update !== _this.props.userResponse.value) {
        _this.props.handleResponseUpdate(update, invalid);
      }
    };

    _this.state = {
      value: props.userResponse.value
    };
    _this.markInvalidOnMount = _this.checkInvalidOnce();
    return _this;
  }

  (0, _createClass2.default)(NumericTake, [{
    key: "render",
    value: function render() {
      var itemBody = this.props.itemBody;
      return _react.default.createElement(_quizRce.ItemBodyWrapper, {
        itemBody: itemBody
      }, _react.default.createElement(_quizNumberInput.ScientificNumberInput, {
        inputType: "text",
        messages: this.state.messages,
        label: _react.default.createElement(_uiA11y.ScreenReaderContent, null, (0, _formatMessage.default)('Answer value')),
        placeholder: (0, _formatMessage.default)('Type your answer...'),
        onChange: this.handleResponseChange,
        onBlur: this.handleResponseBlur,
        value: this.state.value,
        onInitialNormalization: this.setNormalized
      }));
    }
  }]);
  NumericTake.displayName = "NumericTake";
  return NumericTake;
}(_react.Component);

exports.default = NumericTake;
NumericTake.propTypes = {
  displayValidationWarning: _propTypes.default.bool,
  itemBody: _propTypes.default.string.isRequired,
  handleResponseUpdate: _propTypes.default.func.isRequired,
  userResponse: _propTypes.default.shape({
    value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
  })
};
NumericTake.defaultProps = {
  displayValidationWarning: false,
  userResponse: {
    value: null
  }
};