easy-file-system 1.5.24 → 1.5.26

package/src/item/entry/drag.js

@@ -3,16 +3,15 @@
 import withStyle from "easy-with-style";  ///
 
 import { dragMixins } from "easy-drag-and-drop";
-import { pathUtilities } from "necessary";
 
 import EntryItem from "../../item/entry";
 import NameInput from "../../input/name";
 import NameButton from "../../button/name";
 
+import { EMPTY_STRING } from "../../constants";
+import { DIRECTORY_NAME_DRAG_ENTRY_TYPE } from "../../entryTypes";
 import { adjustSourceEntryPath, adjustTargetEntryPath } from "../../utilities/pathMap";
 
-const { concatenatePaths, pathWithoutBottommostNameFromPath } = pathUtilities;
-
 class DragEntryItem extends EntryItem {
   svgButtonClickHandler = (event, element) => {
     const explorer = this.getExplorer(),
@@ -23,24 +22,36 @@ class DragEntryItem extends EntryItem {
     event.stopPropagation();
   }
 
-  nameChangeHandler = () => {
-    const nameChanged = this.hasNameChanged();
+  nameInputChangeHandler = () => {
+    const created = this.isCreated(),
+          explorer = this.getExplorer(),
+          nameChanged = this.hasNameChanged(),
+          dragEntryItem = this; ///
 
     if (!nameChanged) {
-      this.cancel();
-
       return;
     }
 
-    const explorer = this.getExplorer(),
-          dragEntryItem = this; ///
+    if (created) {
+      explorer.createDragEntryItem(dragEntryItem, () => {
+        this.cancel();
+      });
+
+      return;
+    }
 
     explorer.renameDragEntryItem(dragEntryItem, () => {
       this.cancel();
     });
   }
 
-  nameCancelHandler = () => {
+  nameInputCancelHandler = () => {
+    const created = this.isCreated();
+
+    created ?
+      this.remove() :
+        this.cancel();
+
     this.cancel();
   }
 
@@ -77,29 +88,17 @@ class DragEntryItem extends EntryItem {
     markerEntryItemExplorer.dropDragEntryItem(dragEntryItem, done);
   }
 
-  getInputName() {
-    const nameInputName = this.getNameInputName(),
-          inputName = nameInputName;  ///
-
-    return inputName;
-  }
+  isCreated() {
+    const { created } = this.properties;
 
-  getInputPath() {
-    const path = this.getPath(),
-          inputName = this.getInputName(),
-          pathWithoutBottommostName = pathWithoutBottommostNameFromPath(path),
-          inputPath = (pathWithoutBottommostName === null) ?
-                        inputName :
-                          concatenatePaths(pathWithoutBottommostName, inputName);
-
-    return inputPath;
+    return created;
   }
 
   getPathMap(sourceEntryPath, targetEntryPath) {
     const name = this.getName(),
           collapsed = this.isCollapsed(),
           nameInputName = this.getNameInputName(),
-          entryDirectory = this.isEntryDirectory();
+          entryDirectory = this.getEntryDirectory();
 
     sourceEntryPath = adjustSourceEntryPath(sourceEntryPath, name);	///
 
@@ -126,25 +125,47 @@ class DragEntryItem extends EntryItem {
   }
 
   hasNameChanged() {
-    const name = this.getName(),
-          inputName = this.getInputName(),
-          nameChanged = (inputName !== name);
+    const nameInputName = this.getNameInputName(),
+          nameButtonName = this.getNameButtonName(),
+          nameChanged = (nameInputName !== nameButtonName);
 
     return nameChanged;
   }
 
+  getEntryDirectory() {
+    const directoryNameDragEntryItem = this.isDirectoryNameDragEntryItem(),
+          entryDirectory = directoryNameDragEntryItem;  ///
+
+    return entryDirectory;
+  }
+
   retrieveMarkerEntryItem() {
     const { markerEntryItem } = globalThis;
 
     return markerEntryItem;
   }
 
+  isDirectoryNameDragEntryItem() {
+    const type = this.getType(),
+          typeDirectoryNameDragEntryItemType = (type === DIRECTORY_NAME_DRAG_ENTRY_TYPE),
+          directoryNameDragEntryItem = typeDirectoryNameDragEntryItemType;  ///
+
+    return directoryNameDragEntryItem;
+  }
+
   isSelected() {
     const selected = this.hasClass("selected"); ///
 
     return selected;
   }
 
+  isEdited() {
+    const nameInputDisplayed = this.isNameInputDisplayed(),
+          edited = nameInputDisplayed;  ///
+
+    return edited;
+  }
+
   deselect() {
     this.removeClass("selected");
   }
@@ -154,7 +175,20 @@ class DragEntryItem extends EntryItem {
   }
 
   edit() {
+    const created = this.isCreated();
+
+    if (created) {
+      const name = EMPTY_STRING,
+            nameInputName = name, ///
+            nameButtonName = name;  ///
+
+      this.setNameInputName(nameInputName);
+
+      this.setNameButtonName(nameButtonName);
+    }
+
     this.hideNameButton();
+
     this.showNameInput();
   }
 
@@ -171,17 +205,29 @@ class DragEntryItem extends EntryItem {
   didMount() {
     this.hideNameInput();
 
-	  this.onStartDrag(this.startDragHandler);
-
     this.onStopDrag(this.stopDragHandler);
 
+    this.onStartDrag(this.startDragHandler);
+
+    this.onSVGButtonClick(this.svgButtonClickHandler);
+
+    this.onNameInputChange(this.nameInputChangeHandler);
+
+    this.onNameInputCancel(this.nameInputCancelHandler);
+
     this.enableDrag();
 	}
 
 	willUnmount() {
+    this.offStopDrag(this.stopDragHandler);
+
     this.offStartDrag(this.startDragHandler);
 
-    this.offStopDrag(this.stopDragHandler);
+    this.offSVGButtonClick(this.svgButtonClickHandler);
+
+    this.offNameInputChange(this.nameInputChangeHandler);
+
+    this.offNameInputCancel(this.nameInputCancelHandler);
 
     this.disableDrag();
 	}
@@ -206,6 +252,10 @@ class DragEntryItem extends EntryItem {
 
   static NameButton = NameButton;
 
+  static ignoredProperties = [
+    "created"
+  ];
+
   static defaultProperties = {
 		className: "drag"
 	};

package/src/list/entries.js

@@ -104,7 +104,7 @@ class EntriesList extends Element {
     }
   }
 
-  addFilePath(filePath) {
+  addFilePath(filePath, created = false) {
 		let fileNameDragEntryItem;
 
     const topmostDirectoryName = topmostDirectoryNameFromPath(filePath);
@@ -115,7 +115,7 @@ class EntriesList extends Element {
       fileNameDragEntryItem = this.findFileNameDragEntryItem(fileName);
 
       if (fileNameDragEntryItem === null) {
-        fileNameDragEntryItem = this.createFileNameDragEntryItem(fileName);
+        fileNameDragEntryItem = this.createFileNameDragEntryItem(fileName, created);
 
         this.addEntryItem(fileNameDragEntryItem);
       }
@@ -123,9 +123,10 @@ class EntriesList extends Element {
       let topmostDirectoryNameDragEntryItem = this.findDirectoryNameDragEntryItem(topmostDirectoryName);
 
       if (topmostDirectoryNameDragEntryItem === null) {
-        const collapsed = true;
+        const created = false,
+              collapsed = true;
 
-        topmostDirectoryNameDragEntryItem = this.createDirectoryNameDragEntryItem(topmostDirectoryName, collapsed);
+        topmostDirectoryNameDragEntryItem = this.createDirectoryNameDragEntryItem(topmostDirectoryName, collapsed, created);
 
         this.addEntryItem(topmostDirectoryNameDragEntryItem);
       }
@@ -134,7 +135,7 @@ class EntriesList extends Element {
 
       filePath = filePathWithoutTopmostDirectoryName; ///
 
-      fileNameDragEntryItem = topmostDirectoryNameDragEntryItem.addFilePath(filePath);
+      fileNameDragEntryItem = topmostDirectoryNameDragEntryItem.addFilePath(filePath, created);
     }
 
 		return fileNameDragEntryItem;
@@ -183,7 +184,7 @@ class EntriesList extends Element {
     });
   }
 
-  addDirectoryPath(directoryPath, collapsed = true) {
+  addDirectoryPath(directoryPath, collapsed = true, created = false) {
     let directoryNameDragEntryItem;
 
     const topmostDirectoryName = topmostDirectoryNameFromPath(directoryPath);
@@ -194,7 +195,9 @@ class EntriesList extends Element {
       directoryNameDragEntryItem = this.findDirectoryNameDragEntryItem(directoryName);
 
       if (directoryNameDragEntryItem === null) {
-        directoryNameDragEntryItem = this.createDirectoryNameDragEntryItem(directoryName, collapsed);
+        const created = false;
+
+        directoryNameDragEntryItem = this.createDirectoryNameDragEntryItem(directoryName, collapsed, created);
 
         this.addEntryItem(directoryNameDragEntryItem);
       } else {
@@ -206,7 +209,7 @@ class EntriesList extends Element {
       let topmostDirectoryNameDragEntryItem = this.findDirectoryNameDragEntryItem(topmostDirectoryName);
 
       if (topmostDirectoryNameDragEntryItem === null) {
-        topmostDirectoryNameDragEntryItem = this.createDirectoryNameDragEntryItem(topmostDirectoryName, collapsed);
+        topmostDirectoryNameDragEntryItem = this.createDirectoryNameDragEntryItem(topmostDirectoryName, collapsed, created);
 
         this.addEntryItem(topmostDirectoryNameDragEntryItem);
       }
@@ -215,7 +218,7 @@ class EntriesList extends Element {
 
       directoryPath = directoryPathWithoutTopmostDirectoryName; ///
 
-      directoryNameDragEntryItem = topmostDirectoryNameDragEntryItem.addDirectoryPath(directoryPath, collapsed);
+      directoryNameDragEntryItem = topmostDirectoryNameDragEntryItem.addDirectoryPath(directoryPath, collapsed, created);
     }
 
     return directoryNameDragEntryItem;
@@ -364,26 +367,26 @@ class EntriesList extends Element {
     });
   }
 
-  createFileNameDragEntryItem(fileName) {
+  createFileNameDragEntryItem(fileName, created) {
 		const name = fileName,	///
 					explorer = this.getExplorer(),
 					FileNameDragEntryItem = explorer.getFileNameDragEntryItem(),
 					fileNameDragEntryItem =
 
-						<FileNameDragEntryItem name={name} explorer={explorer} />
+						<FileNameDragEntryItem name={name} explorer={explorer} created={created} />
 
 					;
 
 		return fileNameDragEntryItem;
 	}
 
-	createDirectoryNameDragEntryItem(directoryName, collapsed) {
+	createDirectoryNameDragEntryItem(directoryName, collapsed, created) {
 		const name = directoryName,	///
 					explorer = this.getExplorer(),
 					DirectoryNameDragEntryItem = explorer.getDirectoryNameDragEntryItem(),
 					directoryNameDragEntryItem =
 
-						<DirectoryNameDragEntryItem name={name} collapsed={collapsed} explorer={explorer} />
+						<DirectoryNameDragEntryItem name={name} explorer={explorer} collapsed={collapsed} created={created} />
 
 					;
 
@@ -525,8 +528,6 @@ class EntriesList extends Element {
             const selected = dragEntryItem.isSelected();
 
             if (selected) {
-              dragEntryItem.edit();
-
               return true;
             }
           }) || null;
@@ -595,7 +596,7 @@ class EntriesList extends Element {
           forEachDragEntryItem = this.forEachDragEntryItem.bind(this),
           retrieveDragEntryItems = this.retrieveDragEntryItems.bind(this),
           retrieveMarkerEntryItem = this.retrieveMarkerEntryItem.bind(this),
-          retrieveSelectedDragEntryItem = this.retrieveSelectedDragEntryItem.bind(this);;
+          retrieveSelectedDragEntryItem = this.retrieveSelectedDragEntryItem.bind(this);
 
 		return ({
       expandEntriesList,

package/src/mixins/explorer.js

@@ -2,7 +2,7 @@
 
 import { asynchronousUtilities } from "necessary";
 
-import { MOVE_EVENT_TYPE, OPEN_EVENT_TYPE, REMOVE_EVENT_TYPE, RENAME_EVENT_TYPE, SELECT_EVENT_TYPE } from "../eventTypes";
+import { MOVE_EVENT_TYPE, OPEN_EVENT_TYPE, REMOVE_EVENT_TYPE, RENAME_EVENT_TYPE, SELECT_EVENT_TYPE, CREATE_EVENT_TYPE } from "../eventTypes";
 
 const { forEach } = asynchronousUtilities;
 
@@ -62,6 +62,20 @@ function offRename(renameHandler, element) {
   this.removeEventListener(eventType, handler, element);
 }
 
+function onCreate(createHandler, element) {
+  const eventType = CREATE_EVENT_TYPE,
+        handler = createHandler;  ///
+
+  this.addEventListener(eventType, handler, element);
+}
+
+function offCreate(createHandler, element) {
+  const eventType = CREATE_EVENT_TYPE,
+        handler = createHandler;  ///
+
+  this.removeEventListener(eventType, handler, element);
+}
+
 function onSelect(selectHandler, element) {
   const eventType = SELECT_EVENT_TYPE,
         handler = selectHandler;  ///
@@ -94,7 +108,7 @@ function callSelectHandlers(path, selected) {
 
   eventListeners.forEach((eventListener) => {
     const { handler, element } = eventListener,
-        selectHandler = handler;  ///
+          selectHandler = handler;  ///
 
     selectHandler.call(element, path, selected, this);  ///
   });
@@ -115,12 +129,12 @@ function callMoveHandlersAsync(pathMaps, done) {
 
 function callRemoveHandlersAsync(pathMaps, done) {
   const eventType = REMOVE_EVENT_TYPE,
-      eventListeners = this.findEventListeners(eventType);
+        eventListeners = this.findEventListeners(eventType);
 
   forEach(eventListeners, (eventListener, next) => {
     const { handler, element } = eventListener,
-        removeHandler = handler,  ///
-        done = next;  ///
+          removeHandler = handler,  ///
+          done = next;  ///
 
     removeHandler.call(element, pathMaps, done);
   }, done);
@@ -139,7 +153,20 @@ function callRenameHandlersAsync(pathMaps, done) {
   }, done);
 }
 
-const eventMixins = {
+function callCreateHandlersAsync(pathMaps, done) {
+  const eventType = CREATE_EVENT_TYPE,
+        eventListeners = this.findEventListeners(eventType);
+
+  forEach(eventListeners, (eventListener, next) => {
+    const { handler, element } = eventListener,
+          createHandler = handler,  ///
+          done = next;  ///
+
+    createHandler.call(element, pathMaps, done);
+  }, done);
+}
+
+const explorerMixins = {
   onOpen,
   offOpen,
   onMove,
@@ -148,13 +175,16 @@ const eventMixins = {
   offRemove,
   onRename,
   offRename,
+  onCreate,
+  offCreate,
   onSelect,
   offSelect,
   callOpenHandlers,
   callSelectHandlers,
   callMoveHandlersAsync,
   callRemoveHandlersAsync,
-  callRenameHandlersAsync
+  callRenameHandlersAsync,
+  callCreateHandlersAsync
 };
 
-export default eventMixins;
+export default explorerMixins;

package/src/mixins/nameInput.js

@@ -0,0 +1,66 @@
+"use strict";
+
+import { CHANGE_EVENT_TYPE, CANCEL_EVENT_TYPE } from "../eventTypes";
+
+function onChange(changeHandler, element) {
+  const eventType = CHANGE_EVENT_TYPE,
+        handler = changeHandler;  ///
+
+  this.addEventListener(eventType, handler, element);
+}
+
+function offChange(changeHandler, element) {
+  const eventType = CHANGE_EVENT_TYPE,
+        handler = changeHandler;  ///
+
+  this.removeEventListener(eventType, handler, element);
+}
+
+function onCancel(cancelHandler, element) {
+    const eventType = CANCEL_EVENT_TYPE,
+          handler = cancelHandler;  ///
+
+  this.addEventListener(eventType, handler, element);
+}
+
+function offCancel(cancelHandler, element) {
+    const eventType = CANCEL_EVENT_TYPE,
+          handler = cancelHandler;  ///
+
+  this.removeEventListener(eventType, handler, element);
+}
+
+function callChangeHandlers() {
+  const eventType = CHANGE_EVENT_TYPE,
+        eventListeners = this.findEventListeners(eventType);
+
+  eventListeners.forEach((eventListener) => {
+    const { handler, element } = eventListener,
+          changeHandler = handler;  ///
+
+    changeHandler.call(element);
+  });
+}
+
+function callCancelHandlers() {
+    const eventType = CANCEL_EVENT_TYPE,
+          eventListeners = this.findEventListeners(eventType);
+
+  eventListeners.forEach((eventListener) => {
+    const { handler, element } = eventListener,
+          cancelHandler = handler;  ///
+
+    cancelHandler.call(element);
+  });
+}
+
+const nameInputMixins = {
+  onChange,
+  offChange,
+  onCancel,
+  offCancel,
+  callChangeHandlers,
+  callCancelHandlers
+};
+
+export default nameInputMixins;

package/src/utilities/path.js

@@ -0,0 +1,16 @@
+"use strict";
+
+import { pathUtilities } from "necessary";
+
+import { EMPTY_STRING } from "../constants";
+
+const { pathWithoutBottommostNameFromPath } = pathUtilities;
+
+export function nonNullPathWithoutBottommostNameFromPath(path) {
+  const pathWithoutBottommostName = pathWithoutBottommostNameFromPath(path),
+        nonNullPathWithoutBottommostName = (pathWithoutBottommostName !== null) ?
+                                              pathWithoutBottommostName :  ///
+                                                EMPTY_STRING;
+
+  return nonNullPathWithoutBottommostName;
+}

package/src/utilities/pathMap.js

@@ -3,21 +3,22 @@
 import { pathUtilities } from "necessary";
 
 import { EMPTY_STRING } from "../constants";
+import { nonNullPathWithoutBottommostNameFromPath } from "../utilities/path";
 
-const { concatenatePaths, pathWithoutBottommostNameFromPath } = pathUtilities;
+const { concatenatePaths } = pathUtilities;
 
 export function sourceEntryPathFromEntryItem(entryItem) {
-  const entryItemPath = entryItem.getPath(),
-        entryItemPathWithoutBottommostName = pathWithoutBottommostNameFromPath(entryItemPath),
-        sourceEntryPath = nonNullPathFromName(entryItemPathWithoutBottommostName); ///
+  const path = entryItem.getPath(),
+        nonNullPathWithoutBottommostName = nonNullPathWithoutBottommostNameFromPath(path),
+        sourceEntryPath = nonNullPathWithoutBottommostName; ///
 
   return sourceEntryPath;
 }
 
 export function targetEntryPathFromEntryItem(entryItem) {
-  const entryItemPath = entryItem.getPath(),
-        entryItemPathWithoutBottommostName = pathWithoutBottommostNameFromPath(entryItemPath),
-        targetEntryPath = nonNullPathFromName(entryItemPathWithoutBottommostName); ///
+  const path = entryItem.getPath(),
+        nonNullPathWithoutBottommostName = nonNullPathWithoutBottommostNameFromPath(path),
+        targetEntryPath = nonNullPathWithoutBottommostName; ///
 
   return targetEntryPath;
 }
@@ -25,6 +26,8 @@ export function targetEntryPathFromEntryItem(entryItem) {
 export function adjustSourceEntryPath(sourceEntryPath, name) {
   if (false) {
     ///
+  } else if (sourceEntryPath === null) {
+    sourceEntryPath = null;
   } else if (sourceEntryPath === EMPTY_STRING) {
     sourceEntryPath = name;  ///
   } else {
@@ -47,11 +50,3 @@ export function adjustTargetEntryPath(targetEntryPath, nameInputName) {
 
   return targetEntryPath;
 }
-
-function nonNullPathFromName(name) {
-  const path = (name !== null) ?
-                  name :  ///
-                    EMPTY_STRING;
-
-  return path;
-}