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

Ellie Mae - Dim Sum - WYSIWYG Editor

import _asyncToGenerator from '@babel/runtime/helpers/esm/asyncToGenerator';
import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
import _regeneratorRuntime from '@babel/runtime/regenerator';
import React, { useState } from 'react';
import Image from '@elliemae/ds-icons/Image';
import DSUploader from '@elliemae/ds-uploader';
import DSModal, { MODAL_TYPE_V2 } from '@elliemae/ds-modal';
import { TippedButton } from './CustomToolbar.js';
import '@babel/runtime/helpers/esm/extends';
import '@babel/runtime/helpers/esm/objectWithoutProperties';
import '@elliemae/ds-basic/Button';
import '@elliemae/ds-icons/ArrowheadDown';
import '@elliemae/ds-dropdownmenu';
import '@elliemae/ds-basic/Tooltip';
import '../constants.js';
import '@babel/runtime/helpers/esm/toConsumableArray';
import './colors.js';

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 = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      isOpen = _useState2[0],
      setIsOpen = _useState2[1];

  var _useState3 = useState(null),
      _useState4 = _slicedToArray(_useState3, 2),
      error = _useState4[0],
      setError = _useState4[1];

  var _useState5 = useState(false),
      _useState6 = _slicedToArray(_useState5, 2),
      inProgress = _useState6[0],
      setInProgress = _useState6[1];

  var _useState7 = useState({
    index: 0,
    length: 0
  }),
      _useState8 = _slicedToArray(_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( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(files) {
      var selectedFile, fr;
      return _regeneratorRuntime.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( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
                  var url;
                  return _regeneratorRuntime.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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TippedButton, {
    tip: "Insert Image",
    onClick: function onClick() {
      setLastSelection(quillRef === null || quillRef === void 0 ? void 0 : quillRef.getEditor().getSelection());
      setIsOpen(true);
    }
  }, /*#__PURE__*/React.createElement(Image, {
    color: ['neutral', 500],
    size: "s"
  })), /*#__PURE__*/React.createElement(DSModal, {
    isOpen: isOpen,
    title: "",
    onConfirm: function onConfirm() {
      setIsOpen(false);
    },
    onClose: function onClose() {
      setIsOpen(false);
    },
    showClose: true,
    version: 2,
    size: "xsmall",
    modalType: MODAL_TYPE_V2.DECISION,
    confirmLabel: "Cancel",
    message: ""
  }, !inProgress && /*#__PURE__*/React.createElement(DSUploader, {
    containerProps: {
      id: elementId
    },
    showAltAction: false,
    acceptedTypesText: allowedImageTypes,
    onDrop: handleFileChange
  }), inProgress && 'Upload in progress...', error && /*#__PURE__*/React.createElement("div", {
    style: {
      color: 'red',
      marginTop: '10px'
    }
  }, error)));
};

export { CustomImageUploader };
//# sourceMappingURL=CustomImageUploader.js.map