@instructure/quiz-interactions/es/components/numeric/Edit/NumericTypeSelect.js

A React UI component Library for quiz interaction types.

import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
var _dec, _class, _NumericTypeSelect;
function _callSuper(_this, derived, args) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;
    try {
      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
    } catch (e) {
      return false;
    }
  }
  derived = _getPrototypeOf(derived);
  return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));
}
/** @jsx jsx */
import { Component } from 'react';
import PropTypes from 'prop-types';
import { IconButton } from '@instructure/ui-buttons';
import { IconQuestionLine } from '@instructure/ui-icons';
import { jsx } from '@instructure/emotion';
import t from '@instructure/quiz-i18n/es/format-message';
import { EXACT_RESPONSE, MARGIN_OF_ERROR, PRECISE_RESPONSE, WITHIN_A_RANGE } from './constants';
import generateStyle from './styles';
import { SimpleSelect, withStyleOverrides } from '@instructure/quiz-common';
var NumericTypeSelect = (_dec = withStyleOverrides(generateStyle, null), _dec(_class = (_NumericTypeSelect = /*#__PURE__*/function (_Component) {
  function NumericTypeSelect() {
    var _this2;
    _classCallCheck(this, NumericTypeSelect);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this2 = _callSuper(this, NumericTypeSelect, [].concat(args));
    _defineProperty(_this2, "setTypeSelectInputRef", function (node) {
      _this2.props.inputRef(_this2.props.id, node);
    });
    _defineProperty(_this2, "handleChange", function (event, _ref) {
      var value = _ref.value;
      _this2.props.onChange(event, {
        id: _this2.props.id,
        type: value
      });
    });
    return _this2;
  }
  _inherits(NumericTypeSelect, _Component);
  return _createClass(NumericTypeSelect, [{
    key: "renderLabel",
    value: function renderLabel() {
      var label = t('Requirement');

      // TODO: find a way to do this without custom styles
      return this.props.onClickHelp ? jsx("div", {
        css: this.props.styles.labelWithHelp
      }, label, jsx("div", {
        css: this.props.styles.helpButton
      }, jsx(IconButton, {
        renderIcon: IconQuestionLine,
        onClick: this.props.onClickHelp,
        size: "small",
        screenReaderLabel: t('Display help dialog for numeric requirement'),
        withBackground: false,
        withBorder: false
      }))) : label;
    }
  }, {
    key: "render",
    value: function render() {
      return jsx(SimpleSelect, {
        renderLabel: this.renderLabel(),
        onChange: this.handleChange,
        value: this.props.value,
        "data-automation": "sdk-numeric-type",
        inputRef: this.setTypeSelectInputRef
      }, jsx(SimpleSelect.Option, {
        id: "numeric-type-select-option-exact-response",
        value: EXACT_RESPONSE
      }, t('Exact response')), jsx(SimpleSelect.Option, {
        id: "numeric-type-select-option-margin-of-error",
        value: MARGIN_OF_ERROR
      }, t('Margin of error')), jsx(SimpleSelect.Option, {
        id: "numeric-type-select-option-within-a-range",
        value: WITHIN_A_RANGE
      }, t('Within a range')), jsx(SimpleSelect.Option, {
        id: "numeric-type-select-option-precise-response",
        value: PRECISE_RESPONSE
      }, t('Precise response')));
    }
  }]);
}(Component), _defineProperty(_NumericTypeSelect, "displayName", 'NumericTypeSelect'), _defineProperty(_NumericTypeSelect, "componentId", "Quizzes".concat(_NumericTypeSelect.displayName)), _defineProperty(_NumericTypeSelect, "propTypes", {
  id: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
  onClickHelp: PropTypes.func,
  inputRef: PropTypes.func,
  value: PropTypes.oneOf([EXACT_RESPONSE, MARGIN_OF_ERROR, WITHIN_A_RANGE, PRECISE_RESPONSE]).isRequired,
  styles: PropTypes.object
}), _defineProperty(_NumericTypeSelect, "defaultProps", {
  onClickHelp: null,
  inputRef: void 0
}), _NumericTypeSelect)) || _class);
export { NumericTypeSelect as default };