@instructure/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");
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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _emotion = require("@instructure/emotion");
var _uiButtons = require("@instructure/ui-buttons");
var _uiText = require("@instructure/ui-text");
var _uiSpinner = require("@instructure/ui-spinner");
var _uiIcons = require("@instructure/ui-icons");
var _quizCommon = require("@instructure/quiz-common");
var _styles = _interopRequireDefault(require("./styles"));
var _theme = _interopRequireDefault(require("./theme"));
var _isImage = _interopRequireDefault(require("../isImage"));
var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
var _dec, _class, _FilesList;
/** @jsx jsx */
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 = (0, _getPrototypeOf2["default"])(derived);
  return (0, _possibleConstructorReturn2["default"])(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], (0, _getPrototypeOf2["default"])(_this).constructor) : derived.apply(_this, args));
}
var SPACE_KEY = 0x20;
var ENTER_KEY = 0x0d;
var FilesList = exports["default"] = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_FilesList = /*#__PURE__*/function (_Component) {
  function FilesList() {
    var _this2;
    (0, _classCallCheck2["default"])(this, FilesList);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this2 = _callSuper(this, FilesList, [].concat(args));
    (0, _defineProperty2["default"])(_this2, "state", {
      isModalOpen: false,
      modalContent: {
        name: 'empty',
        url: ''
      }
    });
    (0, _defineProperty2["default"])(_this2, "handleCloseModal", function () {
      _this2.setState({
        isModalOpen: false
      });
    });
    (0, _defineProperty2["default"])(_this2, "handleOpenModal", function (modalContent) {
      _this2.setState({
        isModalOpen: true,
        modalContent: modalContent
      });
    });
    (0, _defineProperty2["default"])(_this2, "handleOpenUrl", function (url) {
      window.open(url, '_blank');
    });
    (0, _defineProperty2["default"])(_this2, "renderImagePreview", function (url, name) {
      return (0, _emotion.jsx)("div", {
        css: _this2.props.styles.previewContainer
      }, (0, _emotion.jsx)("img", {
        src: url,
        alt: name,
        css: _this2.props.styles.previewImg
      }));
    });
    (0, _defineProperty2["default"])(_this2, "renderFilePreview", function () {
      return (0, _emotion.jsx)("div", {
        css: _this2.props.styles.previewContainer
      }, (0, _emotion.jsx)(_uiIcons.IconDocumentLine, {
        size: "medium"
      }));
    });
    (0, _defineProperty2["default"])(_this2, "renderPreview", function (file) {
      var url = file.url,
        size = file.size,
        name = file.name,
        isUploading = file.isUploading;
      if (!url && !isUploading) {
        return (0, _emotion.jsx)("div", {
          css: _this2.props.styles.userResponse
        }, (0, _emotion.jsx)(_uiText.Text, {
          color: "primary"
        }, (0, _formatMessage["default"])('(no answer)')));
      }
      var isImage = (0, _isImage["default"])(name);
      var onClick = isImage ? function () {
        return _this2.handleOpenModal(file);
      } : function () {
        return _this2.handleOpenUrl(url);
      };
      var containerProps = _this2.props.readOnly ? {} : {
        tabIndex: '0',
        role: 'button'
      };
      return (0, _emotion.jsx)("div", {
        css: _this2.props.styles.fileLinkWrapper
      }, (0, _emotion.jsx)("div", Object.assign({}, containerProps, {
        "data-testid": "button-container",
        onClick: onClick,
        css: _this2.props.styles.fileLink,
        onKeyPress: _this2.makeKeyPressHandler(onClick)
      }), (0, _emotion.jsx)("div", {
        css: _this2.props.styles.userResponse
      }, isImage ? _this2.renderImagePreview(url, name) : _this2.renderFilePreview(), (0, _emotion.jsx)("div", {
        css: _this2.props.styles.nameContainer
      }, (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_uiText.Text, {
        color: "brand"
      }, name)), (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_uiText.Text, {
        color: "primary"
      }, (0, _formatMessage["default"])('{size, number}Kb', {
        size: Math.round(size * 0.001),
        description: 'size of file in kilobytes'
      }))), !isUploading ? null : (0, _emotion.jsx)(_uiSpinner.Spinner, {
        themeOverride: _this2.props.styles.spinner,
        renderTitle: (0, _formatMessage["default"])('Loading'),
        size: "small"
      })))), _this2.props.makeRemoveHandler && (0, _emotion.jsx)("div", {
        css: _this2.props.styles.removeButton,
        "data-role": "removeButton"
      }, (0, _emotion.jsx)(_uiButtons.IconButton, {
        onClick: _this2.props.makeRemoveHandler(file),
        name: "Close",
        size: "small",
        renderIcon: _uiIcons.IconTrashLine,
        withBackground: false,
        withBorder: false,
        readOnly: _this2.props.readOnly,
        screenReaderLabel: (0, _formatMessage["default"])('Remove File Named {name}', {
          name: name
        })
      })));
    });
    (0, _defineProperty2["default"])(_this2, "renderPreviews", function () {
      var _this2$props = _this2.props,
        files = _this2$props.files,
        showIfEmpty = _this2$props.showIfEmpty;
      if (typeof files === 'undefined') {
        return (0, _emotion.jsx)("div", {
          css: _this2.props.styles.entryWrapper
        }, (0, _emotion.jsx)(_uiText.Text, {
          color: "primary"
        }, (0, _formatMessage["default"])('(response not displayed)')));
      }
      if (showIfEmpty && (!files || files.length === 0)) {
        return (0, _emotion.jsx)("div", {
          css: _this2.props.styles.entryWrapper
        }, (0, _emotion.jsx)(_uiText.Text, {
          color: "primary"
        }, (0, _formatMessage["default"])('(no answer)')));
      }
      return files.map(function (file) {
        return (0, _emotion.jsx)("div", {
          css: _this2.props.styles.entryWrapper,
          key: file.id
        }, _this2.renderPreview(file));
      });
    });
    return _this2;
  }
  (0, _inherits2["default"])(FilesList, _Component);
  return (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 (0, _emotion.jsx)("div", null, (0, _emotion.jsx)("div", {
        className: "fs-mask"
      }, this.renderPreviews()), (0, _emotion.jsx)(_quizCommon.SimpleModal, {
        isModalOpen: isModalOpen,
        title: modalContent.name,
        label: modalContent.name,
        onModalDismiss: this.handleCloseModal
      }, (0, _emotion.jsx)("img", {
        css: this.props.styles.modalImage,
        className: "fs-mask",
        src: modalContent.url,
        alt: modalContent.name
      })));
    }
  }]);
}(_react.Component), (0, _defineProperty2["default"])(_FilesList, "displayName", 'FilesList'), (0, _defineProperty2["default"])(_FilesList, "componentId", "Quizzes".concat(_FilesList.displayName)), (0, _defineProperty2["default"])(_FilesList, "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,
  styles: _propTypes["default"].object
}), (0, _defineProperty2["default"])(_FilesList, "defaultProps", {
  files: void 0,
  makeRemoveHandler: void 0,
  showIfEmpty: false,
  readOnly: false
}), _FilesList)) || _class);