easy-file-system 1.5.24 → 1.5.26

package/src/constants.js

@@ -1,4 +1,6 @@
 "use strict";
 
+export const NONE = "none";
+export const PERIOD = ".";
 export const EMPTY_STRING = "";
 export const INLINE_BLOCK = "inline-block";

package/src/div/item/entry/directoryName.js

@@ -24,21 +24,18 @@ export default class DirectoryNameEntryItemDiv extends EntryItemDiv {
   }
 
   childElements() {
-    const { name, NameInput, NameButton, ToggleButton, DirectoryNameSVG, onNameChange, onNameCancel, onSVGButtonClick } = this.properties,
-          changeHandler = onNameChange, ///
-          cancelHandler = onNameCancel, ///
-          svgButtonClickHandler = onSVGButtonClick; ///
+    const { name, NameInput, NameButton, ToggleButton, DirectoryNameSVG } = this.properties;
 
     return ([
 
       <ToggleButton onMouseDown={this.toggleButtonMouseDownHandler} />,
-      <SVGButton onClick={svgButtonClickHandler} >
+      <SVGButton>
         <DirectoryNameSVG/>
       </SVGButton>,
       <NameButton onDoubleClick={this.nameButtonDoubleClickHandler} >
         {name}
       </NameButton>,
-      <NameInput onChange={changeHandler} onCancel={cancelHandler} >
+      <NameInput>
         {name}
       </NameInput>,
       <BackgroundDiv/>
@@ -51,10 +48,7 @@ export default class DirectoryNameEntryItemDiv extends EntryItemDiv {
     "NameInput",
     "NameButton",
     "ToggleButton",
-    "DirectoryNameSVG",
-    "onNameChange",
-    "onNameCancel",
-    "onSVGButtonClick"
+    "DirectoryNameSVG"
   ];
 
   static defaultProperties = {

package/src/div/item/entry/fileName.js

@@ -16,20 +16,17 @@ export default class FileNameEntryItemDiv extends EntryItemDiv {
   }
 
   childElements() {
-    const { name, NameInput, NameButton, FileNameSVG, onNameChange, onNameCancel, onSVGButtonClick } = this.properties,
-          changeHandler = onNameChange, ///
-          cancelHandler = onNameCancel, ///
-          svgButtonClickHandler = onSVGButtonClick; ///
+    const { name, NameInput, NameButton, FileNameSVG } = this.properties;
 
     return ([
 
-      <SVGButton onClick={svgButtonClickHandler} >
+      <SVGButton>
         <FileNameSVG/>
       </SVGButton>,
       <NameButton onDoubleClick={this.nameButtonDoubleClickHandler} >
         {name}
       </NameButton>,
-      <NameInput onChange={changeHandler} onCancel={cancelHandler} >
+      <NameInput>
         {name}
       </NameInput>,
       <BackgroundDiv/>
@@ -41,10 +38,7 @@ export default class FileNameEntryItemDiv extends EntryItemDiv {
     "name",
     "NameInput",
     "NameButton",
-    "FileNameSVG",
-    "onNameChange",
-    "onNameCancel",
-    "onSVGButtonClick"
+    "FileNameSVG"
   ];
 
   static defaultProperties = {

package/src/eventTypes.js

@@ -2,14 +2,20 @@
 
 export const OPEN_EVENT_TYPE = "open";
 export const MOVE_EVENT_TYPE = "move";
+export const CHANGE_EVENT_TYPE = "change";
+export const CANCEL_EVENT_TYPE = "cancel";
 export const RENAME_EVENT_TYPE = "rename";
 export const REMOVE_EVENT_TYPE = "remove";
 export const SELECT_EVENT_TYPE = "select";
+export const CREATE_EVENT_TYPE = "create";
 
 export default {
   OPEN_EVENT_TYPE,
   MOVE_EVENT_TYPE,
+  CHANGE_EVENT_TYPE,
+  CANCEL_EVENT_TYPE,
   RENAME_EVENT_TYPE,
   REMOVE_EVENT_TYPE,
-  SELECT_EVENT_TYPE
+  SELECT_EVENT_TYPE,
+  CREATE_EVENT_TYPE
 };

package/src/example/view/button.js

@@ -0,0 +1,14 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+import { Button } from "easy";
+
+export default withStyle(Button)`
+
+  border: 1px solid black;
+  cursor: pointer;
+  padding: 1rem;
+  margin-left: 1rem;
+  
+`;

package/src/example/view/explorer/first.js

@@ -8,7 +8,8 @@ export default class FirstExplorer extends Explorer {
 
     this.addFilePath("directory1/file1.txt");
     this.addFilePath("directory1/file2.txt");
-    this.addFilePath("directory1/file3.txt");
+
+    this.addDirectoryPath("directory1/directory3");
   }
 
   static defaultProperties = {

package/src/example/view.js

@@ -3,21 +3,30 @@
 import { Element } from "easy";
 import { arrayUtilities } from "necessary";
 
+import Button from "./view/button";
 import RubbishBin from "./view/rubbishBin";
 import FirstExplorer from "./view/explorer/first";
 import SecondExplorer from "./view/explorer/second";
-import EditSelectedButton from "./view/button/editSelected";
 
 const { first, second } = arrayUtilities;
 
 export default class View extends Element {
-  clickHandler = (event, element) => {
-    const firstExplorer = this.getFirstExplorer(),
-          secondExplorer = this.getSecondExplorer();
+  createFilePathButtonClickHandler = (event, element) => {
+    const firstExplorer = this.getFirstExplorer();
 
-    firstExplorer.editSelectedPath();
+    firstExplorer.createFilePath();
+  }
+
+  createDirectoryPathButtonClickHandler = (event, element) => {
+    const Explorer = this.getFirstExplorer();
+
+    Explorer.createDirectoryPath();
+  }
+
+  editSelectedPathButtonClickHandler = (event, element) => {
+    const firstExplorer = this.getFirstExplorer();
 
-    secondExplorer.editSelectedPath();
+    firstExplorer.editSelectedPath();
   }
 
   openHandler = (filePath) => {
@@ -30,14 +39,20 @@ export default class View extends Element {
     done();
   }
 
+  removeHandler = (pathMaps, done) => {
+    console.log("remove", JSON.stringify(pathMaps, null, "  "))
+
+    done();
+  }
+
   renameHandler = (pathMaps, done) => {
     console.log("rename", JSON.stringify(pathMaps, null, "  "))
 
     done();
   }
 
-  removeHandler = (pathMaps, done) => {
-    console.log("remove", JSON.stringify(pathMaps, null, "  "))
+  createHandler = (pathMaps, done) => {
+    console.log("create", JSON.stringify(pathMaps, null, "  "))
 
     done();
   }
@@ -67,9 +82,27 @@ export default class View extends Element {
     return ([
 
       <RubbishBin onRemove={this.removeHandler} />,
-      <FirstExplorer onMove={this.moveHandler} onOpen={this.openHandler} onRename={this.renameHandler} />,
-      <SecondExplorer onMove={this.moveHandler} onOpen={this.openHandler} onRename={this.renameHandler} />,
-      <EditSelectedButton onClick={this.clickHandler} />
+      <FirstExplorer onOpen={this.openHandler}
+                     onMove={this.moveHandler}
+                     onRemove={this.removeHandler}
+                     onRename={this.renameHandler}
+                     onCreate={this.createHandler}
+      />,
+      <SecondExplorer onOpen={this.openHandler}
+                      onMove={this.moveHandler}
+                      onRemove={this.removeHandler}
+                      onRename={this.renameHandler}
+                      onCreate={this.createHandler}
+      />,
+      <Button onClick={this.createFilePathButtonClickHandler}>
+        Create file path
+      </Button>,
+      <Button onClick={this.createDirectoryPathButtonClickHandler}>
+        Create directory path
+      </Button>,
+      <Button onClick={this.editSelectedPathButtonClickHandler}>
+        Edit selected path
+      </Button>
 
     ]);
   }

package/src/explorer.js

@@ -4,6 +4,7 @@ import withStyle from "easy-with-style";  ///
 
 import { Element } from "easy";
 import { dropMixins } from "easy-drag-and-drop";
+import { pathUtilities } from "necessary";
 
 import EntriesList from "./list/entries";
 import DragEntryItem from "./item/entry/drag";
@@ -13,11 +14,15 @@ import FileNameMarkerEntryItem from "./item/entry/marker/fileName";
 import DirectoryNameDragEntryItem from "./item/entry/drag/directoryName";
 import DirectoryNameMarkerEntryItem from "./item/entry/marker/directoryName";
 
+import { PERIOD } from "./constants";
 import { explorerPadding } from "./styles";
 import { DELETE_KEY_CODE, BACKSPACE_KEY_CODE } from "./keyCodes";
+import { nonNullPathWithoutBottommostNameFromPath } from "./utilities/path";
 import { FILE_NAME_DRAG_ENTRY_TYPE, DIRECTORY_NAME_DRAG_ENTRY_TYPE } from "./entryTypes";
 import { sourceEntryPathFromEntryItem, targetEntryPathFromEntryItem } from "./utilities/pathMap";
 
+const { concatenatePaths } = pathUtilities;
+
 class Explorer extends Element {
   constructor(selector, mounted) {
     super(selector);
@@ -98,7 +103,13 @@ class Explorer extends Element {
 
       if (selectedDragEntryItem !== null) {
         const dragEntryItem = selectedDragEntryItem,  ///
-              sourceEntryPath = sourceEntryPathFromEntryItem(dragEntryItem),
+              dragEntryItemEdited = dragEntryItem.isEdited();
+
+        if (dragEntryItemEdited) {
+          return;
+        }
+
+        const sourceEntryPath = sourceEntryPathFromEntryItem(dragEntryItem),
               targetEntryPath = null,
               pathMaps = dragEntryItem.getPathMaps(sourceEntryPath, targetEntryPath),
               explorer = this;  ///
@@ -106,6 +117,8 @@ class Explorer extends Element {
         this.removeDragEntryItems(pathMaps, explorer, () => {
           ///
         });
+
+        event.preventDefault();
       }
     }
   }
@@ -216,6 +229,57 @@ class Explorer extends Element {
     this.callOpenHandlers(filePath);
   }
 
+  createPath() {
+    let path;
+
+    const name = PERIOD,  ///
+          selectedDragEntryItem = this.retrieveSelectedDragEntryItem();
+
+    if (selectedDragEntryItem === null) {
+      path = name;  ///
+    } else {
+      const selectedDragEntryItemDirectoryDragEntryItem = selectedDragEntryItem.isDirectoryNameDragEntryItem();
+
+      if (selectedDragEntryItemDirectoryDragEntryItem) {
+        const directoryNameDragEntryItem = selectedDragEntryItem, ///
+              directoryNameDragEntryItemPath = directoryNameDragEntryItem.getPath();
+
+        path = concatenatePaths(directoryNameDragEntryItemPath, name);
+      } else {
+        const fileDragEntryItem = selectedDragEntryItem,  ///
+              fileDragEntryItemPath = fileDragEntryItem.getPath(),  ///
+              fileDragEntryItemPathWithoutBottommostName = nonNullPathWithoutBottommostNameFromPath(fileDragEntryItemPath);
+
+        path = concatenatePaths(fileDragEntryItemPathWithoutBottommostName, name);
+      }
+    }
+
+    return path;
+  }
+
+  createFilePath() {
+    const path = this.createPath(),
+          created = true,
+          filePath = path,  ///
+          fileNameDragEntryItem = this.addFilePath(filePath, created);
+
+    this.selectDragEntryItem(fileNameDragEntryItem);
+
+    this.editSelectedPath();
+  }
+
+  createDirectoryPath() {
+    const path = this.createPath(),
+          created = true,
+          collapsed = false,
+          directoryPath = path,  ///
+          directoryNameDragEntryItem = this.addDirectoryPath(directoryPath, collapsed, created);
+
+    this.selectDragEntryItem(directoryNameDragEntryItem);
+
+    this.editSelectedPath();
+  }
+
   editSelectedPath() {
     const selectedDragEntryItem = this.retrieveSelectedDragEntryItem();
 
@@ -243,17 +307,27 @@ class Explorer extends Element {
   }
 
   renameDragEntryItem(dragEntryItem, done) {
-    const dragEntryItemExplorer = dragEntryItem.getExplorer(),
-          sourceEntryPath = sourceEntryPathFromEntryItem(dragEntryItem),
+    const sourceEntryPath = sourceEntryPathFromEntryItem(dragEntryItem),
           targetEntryPath = targetEntryPathFromEntryItem(dragEntryItem),
           pathMaps = dragEntryItem.getPathMaps(sourceEntryPath, targetEntryPath),
-          explorer = dragEntryItemExplorer;  ///
+          explorer = this;  ///
 
     this.renameDragEntryItems(pathMaps, explorer, () => {
       done();
     });
   }
 
+  createDragEntryItem(dragEntryItem, done) {
+    const sourceEntryPath = sourceEntryPathFromEntryItem(dragEntryItem),
+          targetEntryPath = targetEntryPathFromEntryItem(dragEntryItem),
+          pathMaps = dragEntryItem.getPathMaps(sourceEntryPath, targetEntryPath),
+          explorer = this;  ///
+
+    this.createDragEntryItems(pathMaps, explorer, () => {
+      done();
+    });
+  }
+
   dropDragEntryItem(dragEntryItem, done) {
     const markerEntryItem = this.retrieveMarkerEntryItem(),
           dragEntryItemExplorer = dragEntryItem.getExplorer(),
@@ -297,6 +371,16 @@ class Explorer extends Element {
     });
   }
 
+  createDragEntryItems(pathMaps, explorer, done) {
+    this.callCreateHandlersAsync(pathMaps, () => {
+      pathMaps.forEach((pathMap) => this.removeDragEntryItem(pathMap, explorer));
+
+      pathMaps.forEach((pathMap) => this.addDragEntryItem(pathMap, explorer));
+
+      done();
+    });
+  }
+
   removeDragEntryItem(pathMap, explorer) {
     const { entryDirectory } = pathMap;
 
@@ -418,7 +502,7 @@ class Explorer extends Element {
   }
 
   childElements() {
-  	const explorer = this;
+  	const explorer = this;  ///
 
   	return (
 

package/src/input/name.js

@@ -4,7 +4,9 @@ import withStyle from "easy-with-style";  ///
 
 import { arrayUtilities } from "necessary";
 
-import { INLINE_BLOCK } from "../constants";
+import nameInputMixins from "../mixins/nameInput";
+
+import { NONE, INLINE_BLOCK } from "../constants";
 import { Element, window, document } from "easy";
 import { ENTER_KEY_CODE, ESCAPE_KEY_CODE } from "../keyCodes";
 
@@ -15,19 +17,13 @@ class NameInput extends Element {
     const { keyCode } = event;
 
     if (keyCode === ENTER_KEY_CODE) {
-      const { onChange } = this.properties,
-            changeHandler = onChange; ///
-
-      changeHandler();
+      this.callChangeHandlers();
 
       event.preventDefault();
     }
 
     if (keyCode === ESCAPE_KEY_CODE) {
-      const { onCancel } = this.properties,
-            cancelHandler = onCancel; ///
-
-      cancelHandler();
+      this.callCancelHandlers();
 
       event.preventDefault();
     }
@@ -41,9 +37,12 @@ class NameInput extends Element {
   }
 
   setName(name) {
-    const html = name;  ///
+    const domElement = this.getDOMElement(),
+          { childNodes } = domElement,
+          firstChildNode = first(childNodes),
+          textNode = firstChildNode;  ///
 
-    this.html(html);
+    textNode.nodeValue = name;  ///
   }
 
   show() {
@@ -72,7 +71,9 @@ class NameInput extends Element {
   }
 
   hide() {
-    super.hide();
+    const display = NONE;
+
+    this.display(display);
   }
 
   didMount() {
@@ -87,23 +88,28 @@ class NameInput extends Element {
     const showNameInput = this.show.bind(this), ///
           hideNameInput = this.hide.bind(this), ///
           getNameInputName = this.getName.bind(this), ///
-          setNameInputName = this.setName.bind(this); ///
+          setNameInputName = this.setName.bind(this), ///
+          onNameInputChange = this.onChange.bind(this), ///
+          onNameInputCancel = this.onCancel.bind(this), ///
+          offNameInputChange = this.offChange.bind(this), ///
+          offNameInputCancel = this.offCancel.bind(this), ///
+          isNameInputDisplayed = this.isDisplayed.bind(this); ///
 
     return ({
       showNameInput,
       hideNameInput,
       getNameInputName,
-      setNameInputName
+      setNameInputName,
+      onNameInputChange,
+      onNameInputCancel,
+      offNameInputChange,
+      offNameInputCancel,
+      isNameInputDisplayed
     });
   }
 
   static tagName = "span";  ///
 
-  static ignoredProperties = [
-    "onChange",
-    "onCancel"
-  ];
-
   static defaultProperties = {
     role: "textbox",
     className: "name",
@@ -111,10 +117,11 @@ class NameInput extends Element {
   };
 }
 
+Object.assign(NameInput.prototype, nameInputMixins);
+
 export default withStyle(NameInput)`
   
   outline: none;
-  display: inline-block;
   font-size: inherit;
   text-align: left;
   font-weight: inherit;

package/src/item/entry/drag/directoryName.js

@@ -114,12 +114,6 @@ export default class DirectoryNameDragEntryItem extends DragEntryItem {
 		return collapsed;
 	}
 
-  isEntryDirectory() {
-    const entryDirectory = true;
-
-    return entryDirectory;
-  }
-
 	retrievePathMaps(sourceEntryPath, targetEntryPath, pathMaps) {
 		const name = this.getName(),
 					pathMap = this.getPathMap(sourceEntryPath, targetEntryPath),
@@ -198,9 +192,6 @@ export default class DirectoryNameDragEntryItem extends DragEntryItem {
 																 NameButton={NameButton}
 																 ToggleButton={ToggleButton}
 																 DirectoryNameSVG={DirectoryNameSVG}
-                                 onNameChange={this.nameChangeHandler}
-                                 onNameCancel={this.nameCancelHandler}
-                                 onSVGButtonClick={this.svgButtonClickHandler}
 			/>,
 			<EntriesList explorer={explorer} />
 

package/src/item/entry/drag/fileName.js

@@ -46,12 +46,6 @@ export default class FileNameDragEntryItem extends DragEntryItem {
     return collapsed;
   }
 
-  isEntryDirectory() {
-    const entryDirectory = false;
-
-    return entryDirectory;
-  }
-
 	retrievePathMaps(sourceEntryPath, targetEntryPath, pathMaps) {
 		const pathMap = this.getPathMap(sourceEntryPath, targetEntryPath);
 
@@ -70,9 +64,6 @@ export default class FileNameDragEntryItem extends DragEntryItem {
                             NameInput={NameInput}
                             NameButton={NameButton}
                             FileNameSVG={FileNameSVG}
-                            onNameChange={this.nameChangeHandler}
-                            onNameCancel={this.nameCancelHandler}
-                            onSVGButtonClick={this.svgButtonClickHandler}
       />
 		);
   }