@elliemae/ds-wysiwygeditor/cjs/components/CustomImageUploader.js

Ellie Mae - Dim Sum - WYSIWYG Editor

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var _regeneratorRuntime = require('@babel/runtime/regenerator');
var React = require('react');
var Image = require('@elliemae/ds-icons/Image');
var DSUploader = require('@elliemae/ds-uploader');
var DSModal = require('@elliemae/ds-modal');
var components_CustomToolbar = require('./CustomToolbar.js');
require('@babel/runtime/helpers/extends');
require('@babel/runtime/helpers/objectWithoutProperties');
require('@elliemae/ds-basic/Button');
require('@elliemae/ds-icons/ArrowheadDown');
require('@elliemae/ds-dropdownmenu');
require('@elliemae/ds-basic/Tooltip');
require('../constants.js');
require('@babel/runtime/helpers/toConsumableArray');
require('./colors.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var Image__default = /*#__PURE__*/_interopDefaultLegacy(Image);
var DSUploader__default = /*#__PURE__*/_interopDefaultLegacy(DSUploader);
var DSModal__default = /*#__PURE__*/_interopDefaultLegacy(DSModal);

var ALLOWED_TYPES_TEXT = 'JPG, JPEG, PNG, GIF, BMP, TIFF';
var ALLOWED_TYPES = /image\/(jpeg|jpg|png|gif|bmp|tiff)/;
var DEFAULT_MAX_SIZE = 1024 * 1024; // 1 MB

var CustomImageUploader = function CustomImageUploader(_ref) {
  var quillRef = _ref.quillRef,
      editorFieldName = _ref.editorFieldName,
      _ref$allowedImageType = _ref.allowedImageTypes,
      allowedImageTypes = _ref$allowedImageType === void 0 ? ALLOWED_TYPES_TEXT : _ref$allowedImageType,
      _ref$uploadAsset = _ref.uploadAsset,
      uploadAsset = _ref$uploadAsset === void 0 ? function () {
    return null;
  } : _ref$uploadAsset;

  var _useState = React.useState(false),
      _useState2 = _slicedToArray__default['default'](_useState, 2),
      isOpen = _useState2[0],
      setIsOpen = _useState2[1];

  var _useState3 = React.useState(null),
      _useState4 = _slicedToArray__default['default'](_useState3, 2),
      error = _useState4[0],
      setError = _useState4[1];

  var _useState5 = React.useState(false),
      _useState6 = _slicedToArray__default['default'](_useState5, 2),
      inProgress = _useState6[0],
      setInProgress = _useState6[1];

  var _useState7 = React.useState({
    index: 0,
    length: 0
  }),
      _useState8 = _slicedToArray__default['default'](_useState7, 2),
      lastSelection = _useState8[0],
      setLastSelection = _useState8[1];

  var elementId = "uploadImage".concat(editorFieldName); // eslint-disable-next-line consistent-return

  var handleFileChange = /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee2(files) {
      var selectedFile, fr;
      return _regeneratorRuntime__default['default'].wrap(function _callee2$(_context2) {
        while (1) {
          switch (_context2.prev = _context2.next) {
            case 0:
              if (inProgress) {
                _context2.next = 7;
                break;
              }

              setError(null);
              selectedFile = files[0];

              if (selectedFile) {
                _context2.next = 6;
                break;
              }

              setError('Please select a file.');
              return _context2.abrupt("return", false);

            case 6:
              if (!selectedFile.type.match(ALLOWED_TYPES)) {
                setError('File must be an image.');
              } else if (selectedFile.size > DEFAULT_MAX_SIZE) {
                setError('File is too large.');
              } else {
                fr = new FileReader();
                fr.onload = /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee() {
                  var url;
                  return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
                    while (1) {
                      switch (_context.prev = _context.next) {
                        case 0:
                          setInProgress(true);
                          _context.prev = 1;
                          _context.next = 4;
                          return uploadAsset({
                            name: selectedFile.name,
                            type: selectedFile.type,
                            description: selectedFile.name,
                            isSystemAsset: false,
                            file: fr.result
                          });

                        case 4:
                          url = _context.sent;
                          setIsOpen(false);
                          quillRef === null || quillRef === void 0 ? void 0 : quillRef.getEditor().insertEmbed((lastSelection === null || lastSelection === void 0 ? void 0 : lastSelection.index) || 0, 'image', url);
                          _context.next = 12;
                          break;

                        case 9:
                          _context.prev = 9;
                          _context.t0 = _context["catch"](1);
                          setError('An error has occurred, try again');

                        case 12:
                          setInProgress(false);

                        case 13:
                        case "end":
                          return _context.stop();
                      }
                    }
                  }, _callee, null, [[1, 9]]);
                }));
                fr.readAsArrayBuffer(selectedFile);
              }

            case 7:
            case "end":
              return _context2.stop();
          }
        }
      }, _callee2);
    }));

    return function handleFileChange(_x) {
      return _ref2.apply(this, arguments);
    };
  }();

  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(components_CustomToolbar.TippedButton, {
    tip: "Insert Image",
    onClick: function onClick() {
      setLastSelection(quillRef === null || quillRef === void 0 ? void 0 : quillRef.getEditor().getSelection());
      setIsOpen(true);
    }
  }, /*#__PURE__*/React__default['default'].createElement(Image__default['default'], {
    color: ['neutral', 500],
    size: "s"
  })), /*#__PURE__*/React__default['default'].createElement(DSModal__default['default'], {
    isOpen: isOpen,
    title: "",
    onConfirm: function onConfirm() {
      setIsOpen(false);
    },
    onClose: function onClose() {
      setIsOpen(false);
    },
    showClose: true,
    version: 2,
    size: "xsmall",
    modalType: DSModal.MODAL_TYPE_V2.DECISION,
    confirmLabel: "Cancel",
    message: ""
  }, !inProgress && /*#__PURE__*/React__default['default'].createElement(DSUploader__default['default'], {
    containerProps: {
      id: elementId
    },
    showAltAction: false,
    acceptedTypesText: allowedImageTypes,
    onDrop: handleFileChange
  }), inProgress && 'Upload in progress...', error && /*#__PURE__*/React__default['default'].createElement("div", {
    style: {
      color: 'red',
      marginTop: '10px'
    }
  }, error)));
};

exports.CustomImageUploader = CustomImageUploader;
//# sourceMappingURL=CustomImageUploader.js.map