@deephaven/file-explorer 0.5.1 → 0.5.2-allpackages.16

package/dist/NewItemModal.js

@@ -1,29 +1,7 @@
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import React, { PureComponent } from 'react';
@@ -33,496 +11,455 @@ import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import { BasicModal } from '@deephaven/components';
 import { Pending, PromiseUtils, ValidationError } from '@deephaven/utils';
 import Log from '@deephaven/log';
-import FileExplorer from './FileExplorer';
-import FileUtils from './FileUtils';
+import FileExplorer from "./FileExplorer.js";
+import FileUtils from "./FileUtils.js";
 import "./NewItemModal.css";
-import FileExistsError from './FileExistsError';
-import FileNotFoundError from './FileNotFoundError';
+import FileExistsError from "./FileExistsError.js";
+import FileNotFoundError from "./FileNotFoundError.js";
 var log = Log.module('NewItemModal');
 
-var NewItemModal = /*#__PURE__*/function (_PureComponent) {
-  _inherits(NewItemModal, _PureComponent);
-
-  var _super = _createSuper(NewItemModal);
+class NewItemModal extends PureComponent {
+  static getValidationMessage(err) {
+    if (err instanceof FileExistsError && err.info.type === 'directory') {
+      return 'Error: Cannot overwrite existing directory';
+    }
 
-  function NewItemModal(props) {
-    var _this;
+    return "".concat(err);
+  }
 
-    _classCallCheck(this, NewItemModal);
+  static handleError(err) {
+    if (!PromiseUtils.isCanceled(err)) {
+      log.error(err);
+    }
+  }
 
-    _this = _super.call(this, props);
+  constructor(props) {
+    super(props);
 
-    _defineProperty(_assertThisInitialized(_this), "inputRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "inputRef", /*#__PURE__*/React.createRef());
 
-    _defineProperty(_assertThisInitialized(_this), "cancelableValidatePromise", void 0);
+    _defineProperty(this, "cancelableValidatePromise", void 0);
 
-    _defineProperty(_assertThisInitialized(_this), "cancelableExistingItemPromise", void 0);
+    _defineProperty(this, "cancelableExistingItemPromise", void 0);
 
-    _defineProperty(_assertThisInitialized(_this), "pending", new Pending());
+    _defineProperty(this, "pending", new Pending());
 
-    _defineProperty(_assertThisInitialized(_this), "pathMap", new Map());
+    _defineProperty(this, "pathMap", new Map());
 
-    _this.handleModalSubmit = _this.handleModalSubmit.bind(_assertThisInitialized(_this));
-    _this.handleModalOpened = _this.handleModalOpened.bind(_assertThisInitialized(_this));
-    _this.handleSelect = _this.handleSelect.bind(_assertThisInitialized(_this));
-    _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_this));
-    _this.handleKeyDown = _this.handleKeyDown.bind(_assertThisInitialized(_this));
-    _this.handleValidationError = _this.handleValidationError.bind(_assertThisInitialized(_this));
-    _this.handleOverwriteCancel = _this.handleOverwriteCancel.bind(_assertThisInitialized(_this));
-    _this.handleOverwriteConfirm = _this.handleOverwriteConfirm.bind(_assertThisInitialized(_this));
-    _this.handleExtensionChangeCancel = _this.handleExtensionChangeCancel.bind(_assertThisInitialized(_this));
-    _this.handleExtensionChangeConfirm = _this.handleExtensionChangeConfirm.bind(_assertThisInitialized(_this));
-    var defaultValue = props.defaultValue;
+    this.handleModalSubmit = this.handleModalSubmit.bind(this);
+    this.handleModalOpened = this.handleModalOpened.bind(this);
+    this.handleSelect = this.handleSelect.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleValidationError = this.handleValidationError.bind(this);
+    this.handleOverwriteCancel = this.handleOverwriteCancel.bind(this);
+    this.handleOverwriteConfirm = this.handleOverwriteConfirm.bind(this);
+    this.handleExtensionChangeCancel = this.handleExtensionChangeCancel.bind(this);
+    this.handleExtensionChangeConfirm = this.handleExtensionChangeConfirm.bind(this);
+    var {
+      defaultValue
+    } = props;
     var path = FileUtils.hasPath(defaultValue) ? FileUtils.getPath(defaultValue) : '/';
-    _this.state = {
+    this.state = {
       isSubmitting: false,
-      path: path,
+      path,
       prevExtension: FileUtils.getExtension(defaultValue),
       showExtensionChangeModal: false,
       showOverwriteModal: false,
       value: FileUtils.getBaseName(defaultValue)
     };
-    return _this;
   }
 
-  _createClass(NewItemModal, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      var isOpen = this.props.isOpen;
-      var prevIsOpen = prevProps.isOpen;
-      var _this$state = this.state,
-          value = _this$state.value,
-          path = _this$state.path;
-
-      if (!prevIsOpen && isOpen) {
-        this.resetValue();
-      }
+  componentDidUpdate(prevProps, prevState) {
+    var {
+      isOpen
+    } = this.props;
+    var {
+      isOpen: prevIsOpen
+    } = prevProps;
+    var {
+      value,
+      path
+    } = this.state;
+
+    if (!prevIsOpen && isOpen) {
+      this.resetValue();
+    }
 
-      if (path !== prevState.path || value !== prevState.value) {
-        this.updateValidationStatus(path, value);
-      }
+    if (path !== prevState.path || value !== prevState.value) {
+      this.updateValidationStatus(path, value);
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.pending.cancel();
+  }
 
-      if (this.cancelableValidatePromise) {
-        this.cancelableValidatePromise.cancel();
-      }
+  componentWillUnmount() {
+    this.pending.cancel();
 
-      if (this.cancelableExistingItemPromise) {
-        this.cancelableExistingItemPromise.cancel();
-      }
+    if (this.cancelableValidatePromise) {
+      this.cancelableValidatePromise.cancel();
     }
-  }, {
-    key: "resetValue",
-    value: function resetValue() {
-      var _ref = this.props,
-          defaultValue = _ref.defaultValue;
-      var path = FileUtils.hasPath(defaultValue) ? FileUtils.getPath(defaultValue) : '/';
-      this.setState({
-        path: path,
-        value: FileUtils.getBaseName(defaultValue),
-        validationError: undefined,
-        prevExtension: FileUtils.getExtension(defaultValue),
-        isSubmitting: false
-      });
+
+    if (this.cancelableExistingItemPromise) {
+      this.cancelableExistingItemPromise.cancel();
     }
-  }, {
-    key: "getValidationPromise",
-    value: function getValidationPromise(path, name) {
-      var checkExisting = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  }
 
-      if (this.cancelableValidatePromise) {
-        this.cancelableValidatePromise.cancel();
-      }
+  resetValue() {
+    var {
+      defaultValue
+    } = this.props;
+    var path = FileUtils.hasPath(defaultValue) ? FileUtils.getPath(defaultValue) : '/';
+    this.setState({
+      path,
+      value: FileUtils.getBaseName(defaultValue),
+      validationError: undefined,
+      prevExtension: FileUtils.getExtension(defaultValue),
+      isSubmitting: false
+    });
+  }
+
+  getValidationPromise(path, name) {
+    var checkExisting = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
 
-      this.cancelableValidatePromise = PromiseUtils.makeCancelable(this.validateName(path, name, checkExisting));
-      return this.cancelableValidatePromise;
+    if (this.cancelableValidatePromise) {
+      this.cancelableValidatePromise.cancel();
     }
-  }, {
-    key: "validateName",
-    value: function () {
-      var _validateName = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(path, name, checkExisting) {
-        var _this$props, defaultValue, storage, value, existingFile;
-
-        return regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                FileUtils.validateName(name);
-                _this$props = this.props, defaultValue = _this$props.defaultValue, storage = _this$props.storage;
-
-                if (!checkExisting) {
-                  _context.next = 16;
-                  break;
-                }
-
-                value = "".concat(path).concat(name);
-
-                if (!(value !== defaultValue)) {
-                  _context.next = 16;
-                  break;
-                }
-
-                _context.prev = 5;
-                _context.next = 8;
-                return storage.info(value);
-
-              case 8:
-                existingFile = _context.sent;
-                throw new FileExistsError(existingFile);
-
-              case 12:
-                _context.prev = 12;
-                _context.t0 = _context["catch"](5);
-
-                if (_context.t0 instanceof FileNotFoundError) {
-                  _context.next = 16;
-                  break;
-                }
-
-                throw _context.t0;
-
-              case 16:
-                return _context.abrupt("return", name);
-
-              case 17:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee, this, [[5, 12]]);
-      }));
 
-      function validateName(_x, _x2, _x3) {
-        return _validateName.apply(this, arguments);
-      }
+    this.cancelableValidatePromise = PromiseUtils.makeCancelable(this.validateName(path, name, checkExisting));
+    return this.cancelableValidatePromise;
+  }
 
-      return validateName;
-    }()
-  }, {
-    key: "updateValidationStatus",
-    value: function updateValidationStatus(path, newName) {
-      var _this2 = this;
-
-      this.getValidationPromise(path, newName).then(function () {
-        _this2.setState({
-          validationError: undefined
-        });
-      })["catch"](this.handleValidationError)["catch"](NewItemModal.handleError);
-    }
-  }, {
-    key: "handleModalOpened",
-    value: function handleModalOpened() {
-      this.focusRenameInput();
-    }
-  }, {
-    key: "handleModalSubmit",
-    value: function handleModalSubmit() {
-      this.submitModal();
-    }
-  }, {
-    key: "handleChange",
-    value: function handleChange(event) {
-      var value = event.target.value;
-      this.setState({
-        value: value
-      });
-    }
-  }, {
-    key: "handleSelect",
-    value: function handleSelect(item) {
-      var _this3 = this;
-
-      log.debug('handleSelect', item);
-
-      if (item.type === 'directory') {
-        this.setState({
-          path: FileUtils.makePath(item.filename)
-        });
-      } else {
-        // Use selected item name and folder and focus the input
-        var value = item.basename;
-        var path = FileUtils.getPath(item.filename);
-        this.setState({
-          value: value,
-          path: path
-        }, function () {
-          _this3.focusRenameInput();
-        });
-      }
-    } // eslint-disable-next-line class-methods-use-this
-
-  }, {
-    key: "handleKeyDown",
-    value: function handleKeyDown(e) {
-      var key = e.key;
-      e.stopPropagation();
-
-      switch (key) {
-        case 'Enter':
-          {
-            // Prevent form submit event
-            e.preventDefault();
-            this.submitModal();
-            break;
-          }
+  validateName(path, name, checkExisting) {
+    var _this = this;
 
-        case 'Escape':
-          {
-            e.preventDefault();
-            var onCancel = this.props.onCancel;
-            onCancel();
-            break;
-          }
+    return _asyncToGenerator(function* () {
+      FileUtils.validateName(name);
+      var {
+        defaultValue,
+        storage
+      } = _this.props;
 
-        default:
-      }
-    }
-  }, {
-    key: "handleValidationError",
-    value: function handleValidationError(err) {
-      if (!(err instanceof ValidationError)) {
-        throw err;
+      if (checkExisting) {
+        var value = "".concat(path).concat(name);
+
+        if (value !== defaultValue) {
+          try {
+            var existingFile = yield storage.info(value);
+            throw new FileExistsError(existingFile);
+          } catch (e) {
+            if (!(e instanceof FileNotFoundError)) {
+              throw e;
+            } // There is no existing file, ignore
+
+          }
+        }
       }
 
-      log.debug('Validation error', err);
+      return name;
+    })();
+  }
+
+  updateValidationStatus(path, newName) {
+    this.getValidationPromise(path, newName).then(() => {
       this.setState({
-        validationError: err
+        validationError: undefined
       });
-    }
-  }, {
-    key: "handleOverwriteCancel",
-    value: function handleOverwriteCancel() {
+    }).catch(this.handleValidationError).catch(NewItemModal.handleError);
+  }
+
+  handleModalOpened() {
+    this.focusRenameInput();
+  }
+
+  handleModalSubmit() {
+    this.submitModal();
+  }
+
+  handleChange(event) {
+    var {
+      value
+    } = event.target;
+    this.setState({
+      value
+    });
+  }
+
+  handleSelect(item) {
+    log.debug('handleSelect', item);
+
+    if (item.type === 'directory') {
       this.setState({
-        showOverwriteModal: false,
-        isSubmitting: false
+        path: FileUtils.makePath(item.filename)
       });
-    }
-  }, {
-    key: "handleOverwriteConfirm",
-    value: function handleOverwriteConfirm() {
+    } else {
+      // Use selected item name and folder and focus the input
+      var value = item.basename;
+      var path = FileUtils.getPath(item.filename);
       this.setState({
-        showOverwriteModal: false
-      });
-      var onSubmit = this.props.onSubmit;
-      var _this$state2 = this.state,
-          path = _this$state2.path,
-          value = _this$state2.value;
-      log.debug('handleOverwriteConfirm', path, value);
-      onSubmit("".concat(path).concat(value));
-    }
-  }, {
-    key: "handleExtensionChangeCancel",
-    value: function handleExtensionChangeCancel() {
-      log.debug('handleExtensionChangeCancel');
-      this.setState(function (_ref2) {
-        var value = _ref2.value,
-            prevExtension = _ref2.prevExtension;
-        var newValue = FileUtils.replaceExtension(value, prevExtension);
-        return {
-          showExtensionChangeModal: false,
-          value: newValue
-        };
+        value,
+        path
+      }, () => {
+        this.focusRenameInput();
       });
-      this.submitModal(true);
     }
-  }, {
-    key: "handleExtensionChangeConfirm",
-    value: function handleExtensionChangeConfirm() {
-      log.debug('handleExtensionChangeConfirm');
-      this.setState({
-        showExtensionChangeModal: false
-      });
-      this.submitModal(true);
+  } // eslint-disable-next-line class-methods-use-this
+
+
+  handleKeyDown(e) {
+    var {
+      key
+    } = e;
+    e.stopPropagation();
+
+    switch (key) {
+      case 'Enter':
+        {
+          // Prevent form submit event
+          e.preventDefault();
+          this.submitModal();
+          break;
+        }
+
+      case 'Escape':
+        {
+          e.preventDefault();
+          var {
+            onCancel
+          } = this.props;
+          onCancel();
+          break;
+        }
+
+      default:
     }
-    /**
-     * Focus rename input and select name part for files, select all text for folders
-     */
-
-  }, {
-    key: "focusRenameInput",
-    value: function focusRenameInput() {
-      var input = this.inputRef.current;
-
-      if (input) {
-        var type = this.props.type;
-        var value = input.value;
-        var selectionEnd = type === 'directory' ? value.length : value.lastIndexOf('.');
-        input.focus();
-        input.setSelectionRange(0, selectionEnd > 0 ? selectionEnd : value.length);
-      }
+  }
+
+  handleValidationError(err) {
+    if (!(err instanceof ValidationError)) {
+      throw err;
     }
-  }, {
-    key: "submitModal",
-    value: function submitModal() {
-      var _this4 = this;
-
-      var skipExtensionCheck = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      this.setState(function (_ref3) {
-        var prevExtension = _ref3.prevExtension,
-            value = _ref3.value,
-            path = _ref3.path;
-        var _this4$props = _this4.props,
-            notifyOnExtensionChange = _this4$props.notifyOnExtensionChange,
-            type = _this4$props.type;
-        log.debug('submitModal', prevExtension, value);
-        var newExtension = FileUtils.getExtension(value);
-
-        if (notifyOnExtensionChange && !skipExtensionCheck && prevExtension !== null && prevExtension !== newExtension) {
-          return {
-            isSubmitting: false,
-            showExtensionChangeModal: true,
-            newExtension: newExtension
-          };
-        }
 
-        _this4.getValidationPromise(path, value, true).then(function (newItemName) {
-          var onSubmit = _this4.props.onSubmit;
-          onSubmit("".concat(path).concat(value));
-        })["catch"](function (e) {
-          // Don't allow using existing names for folders
-          // For files, prompt if they want to overwrite existing file
-          if (e instanceof FileExistsError) {
-            if (type !== 'directory' && e.info.type !== 'directory') {
-              _this4.setState({
-                showOverwriteModal: true
-              });
-
-              return;
-            }
-          }
+    log.debug('Validation error', err);
+    this.setState({
+      validationError: err
+    });
+  }
 
-          throw e;
-        })["catch"](function (e) {
-          if (PromiseUtils.isCanceled(e)) {
-            _this4.setState({
-              isSubmitting: false
-            });
-          }
+  handleOverwriteCancel() {
+    this.setState({
+      showOverwriteModal: false,
+      isSubmitting: false
+    });
+  }
 
-          throw e;
-        })["catch"](_this4.handleValidationError)["catch"](NewItemModal.handleError);
+  handleOverwriteConfirm() {
+    this.setState({
+      showOverwriteModal: false
+    });
+    var {
+      onSubmit
+    } = this.props;
+    var {
+      path,
+      value
+    } = this.state;
+    log.debug('handleOverwriteConfirm', path, value);
+    onSubmit("".concat(path).concat(value));
+  }
 
+  handleExtensionChangeCancel() {
+    log.debug('handleExtensionChangeCancel');
+    this.setState((_ref) => {
+      var {
+        value,
+        prevExtension
+      } = _ref;
+      var newValue = FileUtils.replaceExtension(value, prevExtension);
+      return {
+        showExtensionChangeModal: false,
+        value: newValue
+      };
+    });
+    this.submitModal(true);
+  }
+
+  handleExtensionChangeConfirm() {
+    log.debug('handleExtensionChangeConfirm');
+    this.setState({
+      showExtensionChangeModal: false
+    });
+    this.submitModal(true);
+  }
+  /**
+   * Focus rename input and select name part for files, select all text for folders
+   */
+
+
+  focusRenameInput() {
+    var input = this.inputRef.current;
+
+    if (input) {
+      var {
+        type
+      } = this.props;
+      var {
+        value
+      } = input;
+      var selectionEnd = type === 'directory' ? value.length : value.lastIndexOf('.');
+      input.focus();
+      input.setSelectionRange(0, selectionEnd > 0 ? selectionEnd : value.length);
+    }
+  }
+
+  submitModal() {
+    var skipExtensionCheck = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    this.setState((_ref2) => {
+      var {
+        prevExtension,
+        value,
+        path
+      } = _ref2;
+      var {
+        notifyOnExtensionChange,
+        type
+      } = this.props;
+      log.debug('submitModal', prevExtension, value);
+      var newExtension = FileUtils.getExtension(value);
+
+      if (notifyOnExtensionChange && !skipExtensionCheck && prevExtension !== null && prevExtension !== newExtension) {
         return {
-          isSubmitting: true,
-          showExtensionChangeModal: false,
-          newExtension: undefined
+          isSubmitting: false,
+          showExtensionChangeModal: true,
+          newExtension
         };
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          storage = _this$props2.storage,
-          isOpen = _this$props2.isOpen,
-          onCancel = _this$props2.onCancel,
-          placeholder = _this$props2.placeholder,
-          title = _this$props2.title,
-          type = _this$props2.type;
-      var _this$state3 = this.state,
-          isSubmitting = _this$state3.isSubmitting,
-          path = _this$state3.path,
-          showExtensionChangeModal = _this$state3.showExtensionChangeModal,
-          showOverwriteModal = _this$state3.showOverwriteModal,
-          validationError = _this$state3.validationError,
-          value = _this$state3.value,
-          prevExtension = _this$state3.prevExtension,
-          newExtension = _this$state3.newExtension;
-      var isDirectory = type === 'directory';
-      var prevExtensionText = FileUtils.fileExtensionToString(prevExtension);
-      var newExtensionText = FileUtils.fileExtensionToString(newExtension);
-      var submitBtnLabel = isDirectory ? 'Create' : 'Save';
-      var nameInputLabel = isDirectory ? 'New folder name' : 'Save file as';
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Modal, {
-        isOpen: isOpen,
-        toggle: onCancel,
-        onOpened: this.handleModalOpened,
-        className: "modal-dialog-centered new-file-modal theme-bg-dark"
-      }, /*#__PURE__*/React.createElement(ModalHeader, {
-        toggle: onCancel
-      }, title), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("form", null, /*#__PURE__*/React.createElement("div", {
-        className: "d-flex flex-column new-file-modal-content"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "flex-grow-0 mb-4"
-      }, /*#__PURE__*/React.createElement("label", {
-        htmlFor: "file-name-input"
-      }, nameInputLabel), /*#__PURE__*/React.createElement("input", {
-        id: "file-name-input",
-        type: "text",
-        autoComplete: "off",
-        autoCapitalize: "none",
-        autoCorrect: "off",
-        spellCheck: "false",
-        className: classNames('form-control', {
-          'is-invalid': validationError
-        }),
-        value: value,
-        placeholder: placeholder,
-        ref: this.inputRef,
-        onKeyDown: this.handleKeyDown,
-        onChange: this.handleChange
-      }), validationError && /*#__PURE__*/React.createElement("div", {
-        className: "invalid-feedback"
-      }, NewItemModal.getValidationMessage(validationError))), /*#__PURE__*/React.createElement("div", {
-        className: "flex-grow-0"
-      }, /*#__PURE__*/React.createElement("label", null, "Directory: ", /*#__PURE__*/React.createElement("span", {
-        className: "new-item-parentId"
-      }, path))), /*#__PURE__*/React.createElement("div", {
-        className: "flex-grow-1 file-explorer-container"
-      }, /*#__PURE__*/React.createElement(FileExplorer, {
-        onSelect: this.handleSelect,
-        storage: storage
-      }))))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement("button", {
-        className: "btn btn-outline-primary",
-        onClick: onCancel,
-        type: "button"
-      }, "Cancel"), /*#__PURE__*/React.createElement("button", {
-        className: "btn btn-primary",
-        disabled: isSubmitting,
-        onClick: this.handleModalSubmit,
-        type: "button"
-      }, submitBtnLabel))), /*#__PURE__*/React.createElement(BasicModal, {
-        isOpen: showOverwriteModal,
-        headerText: "Confirm overwrite",
-        bodyText: "File with this name already exists, are you sure you want to overwrite it?",
-        onCancel: this.handleOverwriteCancel,
-        onConfirm: this.handleOverwriteConfirm,
-        cancelButtonText: "Cancel",
-        confirmButtonText: "Overwrite"
-      }), /*#__PURE__*/React.createElement(BasicModal, {
-        isOpen: showExtensionChangeModal,
-        headerText: "Confirm extension change",
-        bodyText: "Are you sure you want to change extension from \"".concat(prevExtensionText, "\" to \"").concat(newExtensionText, "\"?"),
-        onCancel: this.handleExtensionChangeCancel,
-        onConfirm: this.handleExtensionChangeConfirm,
-        cancelButtonText: "Keep \"".concat(prevExtensionText, "\""),
-        confirmButtonText: "Use \"".concat(newExtensionText, "\"")
-      }));
-    }
-  }], [{
-    key: "getValidationMessage",
-    value: function getValidationMessage(err) {
-      if (err instanceof FileExistsError && err.info.type === 'directory') {
-        return 'Error: Cannot overwrite existing directory';
       }
 
-      return "".concat(err);
-    }
-  }, {
-    key: "handleError",
-    value: function handleError(err) {
-      if (!PromiseUtils.isCanceled(err)) {
-        log.error(err);
-      }
-    }
-  }]);
+      this.getValidationPromise(path, value, true).then(newItemName => {
+        var {
+          onSubmit
+        } = this.props;
+        onSubmit("".concat(path).concat(value));
+      }).catch(e => {
+        // Don't allow using existing names for folders
+        // For files, prompt if they want to overwrite existing file
+        if (e instanceof FileExistsError) {
+          if (type !== 'directory' && e.info.type !== 'directory') {
+            this.setState({
+              showOverwriteModal: true
+            });
+            return;
+          }
+        }
 
-  return NewItemModal;
-}(PureComponent);
+        throw e;
+      }).catch(e => {
+        if (PromiseUtils.isCanceled(e)) {
+          this.setState({
+            isSubmitting: false
+          });
+        }
+
+        throw e;
+      }).catch(this.handleValidationError).catch(NewItemModal.handleError);
+      return {
+        isSubmitting: true,
+        showExtensionChangeModal: false,
+        newExtension: undefined
+      };
+    });
+  }
+
+  render() {
+    var {
+      storage,
+      isOpen,
+      onCancel,
+      placeholder,
+      title,
+      type
+    } = this.props;
+    var {
+      isSubmitting,
+      path,
+      showExtensionChangeModal,
+      showOverwriteModal,
+      validationError,
+      value,
+      prevExtension,
+      newExtension
+    } = this.state;
+    var isDirectory = type === 'directory';
+    var prevExtensionText = FileUtils.fileExtensionToString(prevExtension);
+    var newExtensionText = FileUtils.fileExtensionToString(newExtension);
+    var submitBtnLabel = isDirectory ? 'Create' : 'Save';
+    var nameInputLabel = isDirectory ? 'New folder name' : 'Save file as';
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Modal, {
+      isOpen: isOpen,
+      toggle: onCancel,
+      onOpened: this.handleModalOpened,
+      className: "modal-dialog-centered new-file-modal theme-bg-dark"
+    }, /*#__PURE__*/React.createElement(ModalHeader, {
+      toggle: onCancel
+    }, title), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("form", null, /*#__PURE__*/React.createElement("div", {
+      className: "d-flex flex-column new-file-modal-content"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "flex-grow-0 mb-4"
+    }, /*#__PURE__*/React.createElement("label", {
+      htmlFor: "file-name-input"
+    }, nameInputLabel), /*#__PURE__*/React.createElement("input", {
+      id: "file-name-input",
+      type: "text",
+      autoComplete: "off",
+      autoCapitalize: "none",
+      autoCorrect: "off",
+      spellCheck: "false",
+      className: classNames('form-control', {
+        'is-invalid': validationError
+      }),
+      value: value,
+      placeholder: placeholder,
+      ref: this.inputRef,
+      onKeyDown: this.handleKeyDown,
+      onChange: this.handleChange
+    }), validationError && /*#__PURE__*/React.createElement("div", {
+      className: "invalid-feedback"
+    }, NewItemModal.getValidationMessage(validationError))), /*#__PURE__*/React.createElement("div", {
+      className: "flex-grow-0"
+    }, /*#__PURE__*/React.createElement("label", null, "Directory: ", /*#__PURE__*/React.createElement("span", {
+      className: "new-item-parentId"
+    }, path))), /*#__PURE__*/React.createElement("div", {
+      className: "flex-grow-1 file-explorer-container"
+    }, /*#__PURE__*/React.createElement(FileExplorer, {
+      onSelect: this.handleSelect,
+      storage: storage
+    }))))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement("button", {
+      className: "btn btn-outline-primary",
+      onClick: onCancel,
+      type: "button"
+    }, "Cancel"), /*#__PURE__*/React.createElement("button", {
+      className: "btn btn-primary",
+      disabled: isSubmitting,
+      onClick: this.handleModalSubmit,
+      type: "button"
+    }, submitBtnLabel))), /*#__PURE__*/React.createElement(BasicModal, {
+      isOpen: showOverwriteModal,
+      headerText: "Confirm overwrite",
+      bodyText: "File with this name already exists, are you sure you want to overwrite it?",
+      onCancel: this.handleOverwriteCancel,
+      onConfirm: this.handleOverwriteConfirm,
+      cancelButtonText: "Cancel",
+      confirmButtonText: "Overwrite"
+    }), /*#__PURE__*/React.createElement(BasicModal, {
+      isOpen: showExtensionChangeModal,
+      headerText: "Confirm extension change",
+      bodyText: "Are you sure you want to change extension from \"".concat(prevExtensionText, "\" to \"").concat(newExtensionText, "\"?"),
+      onCancel: this.handleExtensionChangeCancel,
+      onConfirm: this.handleExtensionChangeConfirm,
+      cancelButtonText: "Keep \"".concat(prevExtensionText, "\""),
+      confirmButtonText: "Use \"".concat(newExtensionText, "\"")
+    }));
+  }
+
+}
 
 _defineProperty(NewItemModal, "propTypes", {
   isOpen: PropTypes.bool,
@@ -541,12 +478,8 @@ _defineProperty(NewItemModal, "defaultProps", {
   defaultValue: '/',
   notifyOnExtensionChange: false,
   placeholder: '',
-  onSubmit: function onSubmit(name) {
-    return undefined;
-  },
-  onCancel: function onCancel() {
-    return undefined;
-  }
+  onSubmit: name => undefined,
+  onCancel: () => undefined
 });
 
 export default NewItemModal;