quiz-interactions/lib/components/file_upload/common/FilesList/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 _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 _uiThemeable = require("@instructure/ui-themeable");

var _uiButtons = require("@instructure/ui-buttons");

var _uiElements = require("@instructure/ui-elements");

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

var _uiIcons = require("@instructure/ui-icons");

var _quizCommon = require("@instructure/quiz-common");

var _theme = _interopRequireDefault(require("./theme"));

var _isImage = _interopRequireDefault(require("../isImage"));

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

var _dec, _class, _class2, _temp;

var styles = {
  componentId: 'baDOS',
  template: function template(theme) {
    return "\n\n.baDOS_evhB{padding:".concat(theme.entryWrapperPadding || 'inherit', " 0;width:100%}\n\n.baDOS_bLsK p{margin:0;padding-left:").concat(theme.userResponsePaddingLeft || 'inherit', ";word-wrap:break-word}\n\n.baDOS_bLsK a[target=_blank]{line-height:0}\n\n.baDOS_bSHd{align-items:center;border:solid ").concat(theme.previewBoxBorderWidth || 'inherit', " ").concat(theme.previewBoxColor || 'inherit', ";color:").concat(theme.fileIconColor || 'inherit', ";display:flex;height:8rem;justify-content:center;width:8rem}\n\n.baDOS_cImq{flex:0 0 auto;max-height:100%;max-width:100%}\n\n.baDOS_bAtv{display:flex}\n\n.baDOS_bkFK{color:inherit;cursor:pointer;flex:1;text-decoration:none}\n\n.baDOS_bkFK:focus{border:1px solid ").concat(theme.focusBorderColor || 'inherit', ";box-shadow:none;outline:0.1875rem solid ").concat(theme.focusOutlineColor || 'inherit', ";outline-offset:-0.1875rem}\n\n.baDOS_dxSv{margin-left:").concat(theme.removeButtonMargin || 'inherit', "}\n\n.baDOS_boUa{min-width:10rem}\n\n.baDOS_dJEx{max-width:100%}");
  },
  'entryWrapper': 'baDOS_evhB',
  'userResponse': 'baDOS_bLsK',
  'previewContainer': 'baDOS_bSHd',
  'previewImg': 'baDOS_cImq',
  'fileLinkWrapper': 'baDOS_bAtv',
  'fileLink': 'baDOS_bkFK',
  'removeButton': 'baDOS_dxSv',
  'nameContainer': 'baDOS_boUa',
  'modalImage': 'baDOS_dJEx'
};
var SPACE_KEY = 0x20;
var ENTER_KEY = 0x0D;

var _ref =
/*#__PURE__*/
_react.default.createElement(_uiIcons.IconDocumentLine, {
  size: "medium"
});

var _ref2 =
/*#__PURE__*/
_react.default.createElement(_uiIcons.IconTrashLine, null);

var FilesList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(FilesList, _Component);

  function FilesList() {
    var _getPrototypeOf2;

    var _this;

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

    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)(FilesList)).call.apply(_getPrototypeOf2, [this].concat(args)));
    _this.state = {
      isModalOpen: false,
      modalContent: {
        name: 'empty',
        url: ''
      }
    };

    _this.handleCloseModal = function () {
      _this.setState({
        isModalOpen: false
      });
    };

    _this.handleOpenModal = function (modalContent) {
      _this.setState({
        isModalOpen: true,
        modalContent: modalContent
      });
    };

    _this.handleOpenUrl = function (url) {
      window.open(url, '_blank');
    };

    _this.spinnerTheme = function () {
      return {
        backgroundColor: _this.theme.spinnerColor
      };
    };

    _this.renderImagePreview = function (url, name) {
      return _react.default.createElement("div", {
        className: styles.previewContainer
      }, _react.default.createElement("img", {
        src: url,
        alt: name,
        className: styles.previewImg
      }));
    };

    _this.renderFilePreview = function () {
      return _react.default.createElement("div", {
        className: styles.previewContainer
      }, _ref);
    };

    _this.renderPreview = function (file) {
      var url = file.url,
          size = file.size,
          name = file.name,
          isUploading = file.isUploading;

      if (!url && !isUploading) {
        return _react.default.createElement("div", {
          className: styles.userResponse
        }, _react.default.createElement(_uiElements.Text, {
          color: "primary"
        }, (0, _formatMessage.default)('(no answer)')));
      }

      var isImage = (0, _isImage.default)(name);
      var onClick = isImage ? function () {
        return _this.handleOpenModal(file);
      } : function () {
        return _this.handleOpenUrl(url);
      };
      var containerProps = _this.props.readOnly ? {} : {
        tabIndex: '0',
        role: 'button'
      };
      return _react.default.createElement("div", {
        className: styles.fileLinkWrapper
      }, _react.default.createElement("div", Object.assign({}, containerProps, {
        onClick: onClick,
        className: styles.fileLink,
        onKeyPress: _this.makeKeyPressHandler(onClick)
      }), _react.default.createElement("div", {
        className: styles.userResponse
      }, isImage ? _this.renderImagePreview(url, name) : _this.renderFilePreview(), _react.default.createElement("div", {
        className: styles.nameContainer
      }, _react.default.createElement("div", null, _react.default.createElement(_uiElements.Text, {
        color: "brand"
      }, name)), _react.default.createElement("div", null, _react.default.createElement(_uiElements.Text, {
        color: "primary"
      }, (0, _formatMessage.default)('{size, number}Kb', {
        size: Math.round(size * 0.001),
        description: 'size of file in kilobytes'
      }))), !isUploading ? null : _react.default.createElement(_uiElements.Spinner, {
        theme: _this.spinnerTheme(),
        renderTitle: (0, _formatMessage.default)('Loading'),
        size: "small"
      })))), _this.props.makeRemoveHandler && _react.default.createElement("div", {
        className: styles.removeButton,
        "data-role": "removeButton"
      }, _react.default.createElement(_uiButtons.Button, {
        onClick: _this.props.makeRemoveHandler(file),
        name: "Close",
        size: "small",
        variant: "icon",
        readOnly: _this.props.readOnly
      }, _ref2, _react.default.createElement(_uiA11y.ScreenReaderContent, null, (0, _formatMessage.default)('Remove File Named {name}', {
        name: name
      })))));
    };

    _this.renderPreviews = function () {
      var _this$props = _this.props,
          files = _this$props.files,
          showIfEmpty = _this$props.showIfEmpty;

      if (typeof files === 'undefined') {
        return _react.default.createElement("div", {
          className: styles.entryWrapper
        }, _react.default.createElement(_uiElements.Text, {
          color: "primary"
        }, (0, _formatMessage.default)('(response not displayed)')));
      }

      if (showIfEmpty && (!files || files.length === 0)) {
        return _react.default.createElement("div", {
          className: styles.entryWrapper
        }, _react.default.createElement(_uiElements.Text, {
          color: "primary"
        }, (0, _formatMessage.default)('(no answer)')));
      }

      return files.map(function (file) {
        return _react.default.createElement("div", {
          className: styles.entryWrapper,
          key: file.id
        }, _this.renderPreview(file));
      });
    };

    return _this;
  }

  (0, _createClass2.default)(FilesList, [{
    key: "makeKeyPressHandler",
    value: function makeKeyPressHandler(callback) {
      return function (event) {
        if (event.charCode === SPACE_KEY || event.charCode === ENTER_KEY) {
          event.preventDefault();
          callback();
        }
      };
    }
  }, {
    key: "render",
    value: function render() {
      var _this$state = this.state,
          modalContent = _this$state.modalContent,
          isModalOpen = _this$state.isModalOpen;
      return _react.default.createElement("div", null, _react.default.createElement("div", null, this.renderPreviews()), _react.default.createElement(_quizCommon.SimpleModal, {
        isModalOpen: isModalOpen,
        title: modalContent.name,
        label: modalContent.name,
        onModalDismiss: this.handleCloseModal
      }, _react.default.createElement("img", {
        className: styles.modalImage,
        src: modalContent.url,
        alt: modalContent.name
      })));
    }
  }]);
  FilesList.displayName = "FilesList";
  return FilesList;
}(_react.Component), _class2.propTypes = {
  files: _propTypes.default.arrayOf(_propTypes.default.shape({
    id: _propTypes.default.number.isRequired,
    name: _propTypes.default.string.isRequired,
    url: _propTypes.default.string,
    size: _propTypes.default.number.isRequired,
    isUploading: _propTypes.default.bool
  })),
  makeRemoveHandler: _propTypes.default.func,
  showIfEmpty: _propTypes.default.bool,
  readOnly: _propTypes.default.bool
}, _class2.defaultProps = {
  files: void 0,
  makeRemoveHandler: void 0,
  showIfEmpty: false,
  readOnly: false
}, _temp)) || _class);
exports.default = FilesList;