quiz-interactions/lib/components/file_upload/Edit/index.js

A React UI component Library for quiz interaction types.

"use strict";

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

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

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

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

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

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 _getPrototypeOf3 = _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 _uiForms = require("@instructure/ui-forms");

var _uiFormField = require("@instructure/ui-form-field");

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

var _file_upload = _interopRequireDefault(require("../../../records/interactions/file_upload"));

var _QuestionContainer = _interopRequireDefault(require("../../common/edit/components/QuestionContainer"));

var _QuestionSettingsContainer = _interopRequireDefault(require("../../common/edit/components/QuestionSettingsContainer"));

var _withEditTools = _interopRequireDefault(require("../../../util/withEditTools"));

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

var _QuestionSettingsPanel = _interopRequireDefault(require("../../common/edit/components/QuestionSettingsPanel"));

var _CalculatorOptionWithOqaatAlert = _interopRequireDefault(require("../../common/edit/components/CalculatorOptionWithOqaatAlert"));

var _class, _class2, _temp;

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

var FileUploadEdit =
/**
---
category: FileUpload
---

  File Upload Edit component

  ```jsx_example
  function Example (props) {
    const exampleProps = {
      itemBody: 'Give two examples of tortoises',
      interactionData: {
        restrictCount: true,
        filesCount: '2'
      },
      overrideEditableForRegrading: false,
      properties: {
        restrictTypes: true,
        allowedTypes: 'media/*'
      }
    }

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

  <SettingsSwitcher locales={LOCALES}>
    <EditStateProvider>
      <Example />
    </EditStateProvider>
  </SettingsSwitcher>
  ```
**/
(0, _withEditTools.default)(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(FileUploadEdit, _Component);

  function FileUploadEdit() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, FileUploadEdit);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(FileUploadEdit)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _this.handleCalculatorTypeChange = function (e, value) {
      _this.props.changeItemState({
        calculatorType: value
      });
    };

    _this.handleRestrictCountChange = function () {
      return _this.props.changeItemState({
        interactionData: _objectSpread({}, _this.props.interactionData, {
          restrictCount: !_this.props.interactionData.restrictCount
        })
      });
    };

    _this.handleFilesCountChange = function (event, countString, normalizedCountString) {
      return _this.props.changeItemState({
        interactionData: _objectSpread({}, _this.props.interactionData, {
          filesCount: normalizedCountString
        })
      });
    };

    _this.handleRestrictTypesChange = function (event) {
      return _this.props.changeItemState({
        properties: _objectSpread({}, _this.props.properties, {
          restrictTypes: event.target.checked
        })
      });
    };

    _this.handleAllowedTypesChange = function (event) {
      return _this.props.changeItemState({
        properties: _objectSpread({}, _this.props.properties, {
          allowedTypes: event.target.value
        })
      });
    };

    return _this;
  }

  (0, _createClass2.default)(FileUploadEdit, [{
    key: "renderOptions",
    value: function renderOptions() {
      var _this$props$propertie = this.props.properties,
          restrictTypes = _this$props$propertie.restrictTypes,
          allowedTypes = _this$props$propertie.allowedTypes;
      var _this$props$interacti = this.props.interactionData,
          restrictCount = _this$props$interacti.restrictCount,
          filesCount = _this$props$interacti.filesCount;
      var allowedTypesDescription = (0, _formatMessage.default)('File extensions');
      var filesCountDescription = (0, _formatMessage.default)('Max number of files');

      var description = _react.default.createElement(_uiA11y.ScreenReaderContent, null, (0, _formatMessage.default)('File upload options'));

      var fieldGroup = _react.default.createElement(_uiFormField.FormFieldGroup, {
        rowSpacing: "small",
        description: description
      }, !this.props.hiddenOptions.calculator && _react.default.createElement(_CalculatorOptionWithOqaatAlert.default, {
        disabled: this.props.overrideEditableForRegrading,
        calculatorValue: this.props.calculatorType,
        onCalculatorTypeChange: this.handleCalculatorTypeChange,
        oqaatChecked: this.props.oneQuestionAtATime,
        onOqaatChange: this.props.setOneQuestionAtATime
      }), _react.default.createElement(_uiForms.Checkbox, {
        disabled: this.props.overrideEditableForRegrading,
        checked: restrictCount,
        label: (0, _formatMessage.default)('Limit File number'),
        onChange: this.handleRestrictCountChange,
        value: "restrictCount"
      }), restrictCount && _react.default.createElement(_quizNumberInput.default, {
        disabled: this.props.overrideEditableForRegrading,
        label: _react.default.createElement(_uiA11y.ScreenReaderContent, null, filesCountDescription),
        messages: this.props.getErrors('interactionData.filesCount'),
        min: 1,
        onChange: this.handleFilesCountChange,
        placeholder: filesCountDescription,
        value: filesCount
      }), _react.default.createElement(_uiForms.Checkbox, {
        checked: restrictTypes,
        disabled: this.props.overrideEditableForRegrading,
        label: (0, _formatMessage.default)('Restrict File Types'),
        onChange: this.handleRestrictTypesChange,
        value: "restrictTypes"
      }), restrictTypes && _react.default.createElement(_uiForms.TextInput, {
        disabled: this.props.overrideEditableForRegrading,
        label: _react.default.createElement(_uiA11y.ScreenReaderContent, null, allowedTypesDescription),
        messages: [].concat((0, _toConsumableArray2.default)(this.props.getErrors('properties.allowedTypes')), [{
          text: (0, _formatMessage.default)('Enter file extensions separated by a comma'),
          type: 'hint'
        }]),
        onChange: this.handleAllowedTypesChange,
        placeholder: allowedTypesDescription,
        type: "text",
        value: allowedTypes
      }));

      return _react.default.createElement(_QuestionSettingsContainer.default, {
        additionalOptions: this.props.additionalOptions
      }, _react.default.createElement(_QuestionSettingsPanel.default, {
        label: (0, _formatMessage.default)('Options'),
        defaultExpanded: true
      }, fieldGroup));
    }
  }, {
    key: "render",
    value: function render() {
      return _react.default.createElement("div", null, _react.default.createElement(_QuestionContainer.default, {
        disabled: this.props.overrideEditableForRegrading,
        enableRichContentEditor: this.props.enableRichContentEditor,
        itemBody: this.props.itemBody,
        onDescriptionChange: this.props.onDescriptionChange,
        onModalClose: this.props.onModalClose,
        onModalOpen: this.props.onModalOpen,
        openImportModal: this.props.openImportModal,
        renderImportModal: this.props.renderImportModal,
        stemErrors: this.props.getErrors('itemBody')
      }), this.renderOptions());
    }
  }]);
  FileUploadEdit.displayName = "FileUploadEdit";
  return FileUploadEdit;
}(_react.Component), _class2.interactionType = _file_upload.default, _class2.propTypes = _objectSpread({
  additionalOptions: _propTypes.default.array,
  calculatorType: _propTypes.default.string,
  changeItemState: _propTypes.default.func,
  enableRichContentEditor: _propTypes.default.bool,
  hiddenOptions: _propTypes.default.shape({
    calculator: _propTypes.default.bool
  }),
  interactionData: _propTypes.default.shape({
    restrictCount: _propTypes.default.bool.isRequired,
    filesCount: _propTypes.default.string.isRequired
  }).isRequired,
  itemBody: _propTypes.default.string.isRequired,
  onModalClose: _propTypes.default.func,
  onModalOpen: _propTypes.default.func,
  oneQuestionAtATime: _propTypes.default.bool,
  openImportModal: _propTypes.default.func,
  overrideEditableForRegrading: _propTypes.default.bool,
  properties: _propTypes.default.shape({
    restrictTypes: _propTypes.default.bool.isRequired,
    allowedTypes: _propTypes.default.string.isRequired
  }).isRequired,
  renderImportModal: _propTypes.default.func,
  setOneQuestionAtATime: _propTypes.default.func
}, _withEditTools.default.injectedProps), _class2.defaultProps = {
  additionalOptions: [],
  calculatorType: 'none',
  enableRichContentEditor: true,
  hiddenOptions: {
    calculator: true
  },
  oneQuestionAtATime: false,
  overrideEditableForRegrading: false,
  setOneQuestionAtATime: Function.prototype,
  changeItemState: void 0,
  onModalClose: void 0,
  onModalOpen: void 0,
  openImportModal: void 0,
  renderImportModal: void 0
}, _temp)) || _class;

exports.default = FileUploadEdit;