@instructure/quiz-interactions/es/components/file_upload/Edit/index.js

A React UI component Library for quiz interaction types.

import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
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 _class, _FileUploadEdit;
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(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
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));
}
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { ScreenReaderContent } from '@instructure/ui-a11y-content';
import { Checkbox } from '@instructure/ui-checkbox';
import { TextInput, FormFieldGroup } from '@instructure/quiz-common';
import NumberInput from '@instructure/quiz-number-input';
import FileUploadInteractionType from '../../../records/interactions/file_upload';
import QuestionContainer from '../../common/edit/components/QuestionContainer';
import QuestionSettingsContainer from '../../common/edit/components/QuestionSettingsContainer';
import withEditTools from '../../../util/withEditTools';
import t from '@instructure/quiz-i18n/es/format-message';
import QuestionSettingsPanel from '../../common/edit/components/QuestionSettingsPanel';
import CalculatorOptionWithOqaatAlert from '../../common/edit/components/CalculatorOptionWithOqaatAlert';

/**
---
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>
  ```
**/
var FileUploadEdit = withEditTools(_class = (_FileUploadEdit = /*#__PURE__*/function (_Component) {
  function FileUploadEdit() {
    var _this2;
    _classCallCheck(this, FileUploadEdit);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this2 = _callSuper(this, FileUploadEdit, [].concat(args));
    _defineProperty(_this2, "handleCalculatorTypeChange", function (e, value) {
      _this2.props.changeItemState({
        calculatorType: value
      });
    });
    _defineProperty(_this2, "handleRestrictCountChange", function () {
      return _this2.props.changeItemState({
        interactionData: _objectSpread(_objectSpread({}, _this2.props.interactionData), {}, {
          restrictCount: !_this2.props.interactionData.restrictCount
        })
      });
    });
    _defineProperty(_this2, "handleFilesCountChange", function (event, countString, normalizedCountString) {
      return _this2.props.changeItemState({
        interactionData: _objectSpread(_objectSpread({}, _this2.props.interactionData), {}, {
          filesCount: normalizedCountString
        })
      });
    });
    _defineProperty(_this2, "handleRestrictTypesChange", function (event) {
      return _this2.props.changeItemState({
        properties: _objectSpread(_objectSpread({}, _this2.props.properties), {}, {
          restrictTypes: event.target.checked
        })
      });
    });
    _defineProperty(_this2, "handleAllowedTypesChange", function (event) {
      return _this2.props.changeItemState({
        properties: _objectSpread(_objectSpread({}, _this2.props.properties), {}, {
          allowedTypes: event.target.value
        })
      });
    });
    return _this2;
  }
  _inherits(FileUploadEdit, _Component);
  return _createClass(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 = t('File extensions');
      var filesCountDescription = t('Max number of files');
      var description = /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('File upload options'));
      var fieldGroup = /*#__PURE__*/React.createElement(FormFieldGroup, {
        rowSpacing: "small",
        description: description
      }, this.props.showCalculatorOption && /*#__PURE__*/React.createElement(CalculatorOptionWithOqaatAlert, {
        disabled: this.props.overrideEditableForRegrading,
        calculatorValue: this.props.calculatorType,
        onCalculatorTypeChange: this.handleCalculatorTypeChange,
        oqaatChecked: this.props.oneQuestionAtATime,
        onOqaatChange: this.props.setOneQuestionAtATime
      }), /*#__PURE__*/React.createElement(Checkbox, {
        disabled: this.props.overrideEditableForRegrading,
        checked: restrictCount,
        label: t('Limit File number'),
        onChange: this.handleRestrictCountChange,
        value: "restrictCount",
        "data-automation": "sdk-limit-file-number-checkbox"
      }), restrictCount && /*#__PURE__*/React.createElement(NumberInput, {
        disabled: this.props.overrideEditableForRegrading,
        renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, filesCountDescription),
        messages: this.props.getErrors('interactionData.filesCount'),
        min: 1,
        onChange: this.handleFilesCountChange,
        placeholder: filesCountDescription,
        value: filesCount,
        "data-automation": "sdk-limit-file-number-input"
      }), /*#__PURE__*/React.createElement(Checkbox, {
        checked: restrictTypes,
        disabled: this.props.overrideEditableForRegrading,
        label: t('Restrict File Types'),
        onChange: this.handleRestrictTypesChange,
        value: "restrictTypes",
        "data-automation": "sdk-restrict-file-type-checkbox"
      }), restrictTypes && /*#__PURE__*/React.createElement(TextInput, {
        interaction: this.props.overrideEditableForRegrading ? 'disabled' : 'enabled',
        renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, allowedTypesDescription),
        messages: [].concat(_toConsumableArray(this.props.getErrors('properties.allowedTypes')), [{
          text: t('Enter file extensions separated by a comma'),
          type: 'hint'
        }]),
        onChange: this.handleAllowedTypesChange,
        placeholder: allowedTypesDescription,
        type: "text",
        value: allowedTypes,
        "data-automation": "sdk-file-extensions-input"
      }));
      return /*#__PURE__*/React.createElement(QuestionSettingsContainer, {
        additionalOptions: this.props.additionalOptions
      }, /*#__PURE__*/React.createElement(QuestionSettingsPanel, {
        label: t('Options'),
        defaultExpanded: true
      }, fieldGroup));
    }
  }, {
    key: "render",
    value: function render() {
      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(QuestionContainer, {
        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,
        stemErrors: this.props.getErrors('itemBody')
      }), this.renderOptions());
    }
  }]);
}(Component), _defineProperty(_FileUploadEdit, "interactionType", FileUploadInteractionType), _defineProperty(_FileUploadEdit, "propTypes", _objectSpread(_objectSpread({
  additionalOptions: PropTypes.array,
  calculatorType: PropTypes.string,
  changeItemState: PropTypes.func,
  enableRichContentEditor: PropTypes.bool,
  interactionData: PropTypes.shape({
    restrictCount: PropTypes.bool.isRequired,
    filesCount: PropTypes.string.isRequired
  }).isRequired,
  itemBody: PropTypes.string.isRequired,
  onModalClose: PropTypes.func,
  onModalOpen: PropTypes.func,
  oneQuestionAtATime: PropTypes.bool,
  openImportModal: PropTypes.func,
  overrideEditableForRegrading: PropTypes.bool,
  properties: PropTypes.shape({
    restrictTypes: PropTypes.bool.isRequired,
    allowedTypes: PropTypes.string
  }).isRequired,
  setOneQuestionAtATime: PropTypes.func
}, withEditTools.injectedProps), {}, {
  showCalculatorOption: PropTypes.bool
})), _defineProperty(_FileUploadEdit, "defaultProps", {
  additionalOptions: [],
  calculatorType: 'none',
  enableRichContentEditor: true,
  oneQuestionAtATime: false,
  overrideEditableForRegrading: false,
  setOneQuestionAtATime: Function.prototype,
  changeItemState: void 0,
  onModalClose: void 0,
  onModalOpen: void 0,
  openImportModal: void 0,
  showCalculatorOption: true
}), _FileUploadEdit)) || _class;
export { FileUploadEdit as default };