quiz-interactions/lib/components/formula/Edit/VariableInput.js

A React UI component Library for quiz interaction types.

"use strict";

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 = _interopRequireDefault(require("react"));

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

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

var _uiReactUtils = require("@instructure/ui-react-utils");

// Wraps ScientificNumberInput, replacing the onChange and onBlur
// props with a single onUpdate handler that only fires on blur.
var VariableInput =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(VariableInput, _React$Component);

  function VariableInput(props) {
    var _this;

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

    _this.handleBlur = function () {
      if (_this.state.normalized === null) {
        _this.setState(_this.stateFromProps());
      } else if (_this.state.normalized != _this.props.value) {
        // intentional double-equals
        _this.props.onUpdate(_this.state.normalized);
      }
    };

    _this.handleChange = function (event, value, normalized) {
      _this.setState({
        value: value,
        normalized: normalized
      });
    };

    _this.state = _this.stateFromProps(props);
    return _this;
  }

  (0, _createClass2.default)(VariableInput, [{
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      this.setState(this.stateFromProps(nextProps));
    }
  }, {
    key: "stateFromProps",
    value: function stateFromProps() {
      var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : this.props;
      return {
        value: props.value,
        normalized: props.value
      };
    }
  }, {
    key: "render",
    value: function render() {
      return _react.default.createElement(_quizNumberInput.ScientificNumberInput, Object.assign({}, (0, _uiReactUtils.omitProps)(this.props, this.constructor.propTypes), {
        onBlur: this.handleBlur,
        onChange: this.handleChange,
        showArrows: false,
        value: this.state.value
      }));
    }
  }]);
  VariableInput.displayName = "VariableInput";
  return VariableInput;
}(_react.default.Component);

exports.default = VariableInput;
VariableInput.propTypes = {
  onUpdate: _propTypes.default.func.isRequired,
  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
};
VariableInput.defaultProps = {
  value: void 0
};