easy-file-system 1.5.6 → 1.5.7

package/src/example/view/button/editSelected.js

@@ -0,0 +1,23 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+import { Button } from "easy";
+
+class EditSelectedButton extends Button {
+  childElements() {
+    return "Edit selected";
+  }
+
+  static defaultProperties = {
+    className: "edit-selected"
+  };
+}
+
+export default withStyle(EditSelectedButton)`
+
+  border: 1px solid black;
+  cursor: pointer;
+  padding: 1rem;
+  
+`;

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

@@ -0,0 +1,18 @@
+"use strict";
+
+import { Explorer } from "../../../index";  ///
+
+export default class FirstExplorer extends Explorer {
+  initialise() {
+    super.initialise();
+
+    this.addFilePath("directory1/file1.txt");
+    this.addFilePath("directory1/file2.txt");
+    this.addFilePath("directory1/file3.txt");
+  }
+
+  static defaultProperties = {
+    className: "first",
+    reference: "first-explorer"
+  };
+}

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

@@ -0,0 +1,18 @@
+"use strict";
+
+import { Explorer } from "../../../index";  ///
+
+export default class SecondExplorer extends Explorer {
+  initialise() {
+    super.initialise();
+
+    this.addFilePath("directory2/file4.txt");
+    this.addFilePath("directory2/directory3/file5.txt");
+  }
+
+  static defaultProperties = {
+    className: "first",
+    reference: "second-explorer",
+    ignoredReferences: [ "first-explorer" ]
+  };
+}

package/src/example/view/rubbishBin.js

@@ -0,0 +1,9 @@
+"use strict";
+
+import { RubbishBin } from "../../index"; ///
+
+export default class extends RubbishBin {
+  static defaultProperties = {
+    ignoredReferences: [ "second-explorer" ]
+  };
+}

package/src/example/view.js

@@ -1,46 +1,74 @@
 "use strict";
 
 import { Element } from "easy";
+import { arrayUtilities } from "necessary";
 
-import { Explorer, RubbishBin } from "../index";  ///
+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 {
-  childElements() {
-  	const explorer1 =
+  clickHandler = (event, element) => {
+    const firstExplorer = this.getFirstExplorer(),
+          secondExplorer = this.getSecondExplorer();
 
-            <Explorer onMove={moveHandler} onOpen={openHandler} reference="explorer-1" />
+    firstExplorer.editSelectedPath();
+    secondExplorer.editSelectedPath();
+  }
 
-          ,
-          explorer2 =
+  openHandler = (filePath) => {
+    console.log("open", filePath)
+  }
 
-            <Explorer onMove={moveHandler} onOpen={openHandler} reference="explorer-2" ignoredReferences={[ "explorer-1" ]} />
+  moveHandler = (pathMaps, done) => {
+    console.log("move", JSON.stringify(pathMaps, null, "  "))
 
-          ;
+    done();
+  }
 
-    explorer1.addFilePath("directory1/file1.txt");
-    explorer1.addFilePath("directory1/file2.txt");
-    explorer1.addFilePath("directory1/file3.txt");
+  removeHandler = (pathMaps, done) => {
+    console.log("remove", JSON.stringify(pathMaps, null, "  "))
 
-    explorer2.addFilePath("directory2/file4.txt");
-    explorer2.addFilePath("directory2/directory3/file5.txt");
+    done();
+  }
 
-    explorer2.removeFilePath("directory2/directory3/file4.txt", true);
+  pathChangeHandler = (path, callback) => {
+    const success = true;
 
-    explorer1.onSelect((path, selected) => {
-      explorer2.deselectAllPaths();
-    });
+    callback(success);
+  }
 
-    explorer2.onSelect((path, selected) => {
-      explorer1.deselectAllPaths();
-    });
+  getExplorers() {
+    const explorerDivChildElements = this.getChildElements("div.explorer"),
+          explorers = explorerDivChildElements; ///
 
-    return ([
+    return explorers;
+  }
+
+  getFirstExplorer() {
+    const explorers = this.getExplorers(),
+          firstExplorer = first(explorers);
 
-        <RubbishBin onRemove={removeHandler} ignoredReferences={[ "explorer-2" ]} />
+    return firstExplorer;
+  }
+
+  getSecondExplorer() {
+    const explorers = this.getExplorers(),
+          secondExplorer = second(explorers);
 
-      ,
-      explorer1,
-      explorer2
+    return secondExplorer;
+  }
+
+  childElements() {
+    return ([
+
+      <RubbishBin onRemove={this.removeHandler} />,
+      <FirstExplorer onMove={this.moveHandler} onOpen={this.openHandler} onPathChange={this.pathChangeHandler} />,
+      <SecondExplorer onMove={this.moveHandler} onOpen={this.openHandler} onPathChange={this.pathChangeHandler} />,
+      <EditSelectedButton onClick={this.clickHandler} />
 
     ]);
   }
@@ -51,19 +79,3 @@ export default class View extends Element {
     className: "view"
   };
 }
-
-function openHandler(filePath) {
-  console.log("open", filePath)
-}
-
-function moveHandler(pathMaps, done) {
-  console.log("move", JSON.stringify(pathMaps, null, "  "))
-
-  done();
-}
-
-function removeHandler(pathMaps, done) {
-  console.log("remove", JSON.stringify(pathMaps, null, "  "))
-
-  done();
-}

package/src/explorer.js

@@ -4,8 +4,8 @@ import withStyle from "easy-with-style";  ///
 
 import { Element } from "easy";
 import { dropMixins } from "easy-drag-and-drop";
-import { asynchronousUtilities } from "necessary";
 
+import eventMixins from "./mixins/event";
 import EntriesList from "./list/entries";
 import DragEntryItem from "./item/entry/drag";
 import FileNameDragEntryItem from "./item/entry/drag/fileName";
@@ -14,12 +14,9 @@ import DirectoryNameDragEntryItem from "./item/entry/drag/directoryName";
 import DirectoryNameMarkerEntryItem from "./item/entry/marker/directoryName";
 
 import { explorerPadding } from "./styles";
-import { OPEN_EVENT_TYPE, MOVE_EVENT_TYPE, SELECT_EVENT_TYPE } from "./eventTypes";
 import { FILE_NAME_DRAG_ENTRY_TYPE, DIRECTORY_NAME_DRAG_ENTRY_TYPE } from "./entryTypes";
 import { sourceEntryPathFromDragEntryItemPath, targetEntryPathFromMarkerEntryItemPath } from "./utilities/pathMap";
 
-const { forEach } = asynchronousUtilities;
-
 class Explorer extends Element {
   constructor(selector, mounted) {
     super(selector);
@@ -157,48 +154,6 @@ class Explorer extends Element {
     return DirectoryNameMarkerEntryItem;
   }
 
-  onMove(moveHandler, element) {
-    const eventType = MOVE_EVENT_TYPE,
-          handler = moveHandler;  ///
-
-    this.addEventListener(eventType, handler, element);
-  }
-
-  offMove(moveHandler, element) {
-    const eventType = MOVE_EVENT_TYPE,
-          handler = moveHandler;  ///
-
-    this.removeEventListener(eventType, handler, element);
-  }
-
-  onOpen(openHandler, element) {
-    const eventType = OPEN_EVENT_TYPE,
-          handler = openHandler;  ///
-
-    this.addEventListener(eventType, handler, element);
-  }
-
-  offOpen(openHandler, element) {
-    const eventType = OPEN_EVENT_TYPE,
-          handler = openHandler;  ///
-
-    this.removeEventListener(eventType, handler, element);
-  }
-
-  onSelect(selectHandler, element) {
-    const eventType = SELECT_EVENT_TYPE,
-          handler = selectHandler;  ///
-
-    this.addEventListener(eventType, handler, element);
-  }
-
-  offSelect(selectHandler, element) {
-    const eventType = SELECT_EVENT_TYPE,
-          handler = selectHandler;  ///
-
-    this.removeEventListener(eventType, handler, element);
-  }
-
   retrievePaths(type) {
     const dragEntryItems = this.retrieveDragEntryItems(),
           paths = dragEntryItems.reduce((paths, dragEntryItem) => {
@@ -359,43 +314,6 @@ class Explorer extends Element {
     this.addDirectoryPath(directoryPath, collapsed);
   }
 
-  callMoveHandlersAsync(pathMaps, done) {
-    const eventType = MOVE_EVENT_TYPE,
-          eventListeners = this.findEventListeners(eventType);
-
-    forEach(eventListeners, (eventListener, next) => {
-      const { handler, element } = eventListener,
-            moveHandler = handler,  ///
-            done = next;  ///
-
-      moveHandler.call(element, pathMaps, done);
-    }, done);
-  }
-
-  callSelectHandlers(path, selected) {
-    const eventType = SELECT_EVENT_TYPE,
-          eventListeners = this.findEventListeners(eventType);
-
-    eventListeners.forEach((eventListener) => {
-      const { handler, element } = eventListener,
-            selectHandler = handler;  ///
-
-      selectHandler.call(element, path, selected, this);  ///
-    });
-  }
-
-  callOpenHandlers(filePath) {
-    const eventType = OPEN_EVENT_TYPE,
-          eventListeners = this.findEventListeners(eventType);
-
-    eventListeners.forEach((eventListener) => {
-      const { handler, element } = eventListener,
-          openHandler = handler;  ///
-
-      openHandler.call(element, filePath, this);  ///
-    });
-  }
-
   didMount() {
     const { onMove, onOpen, onSelect } = this.properties,
           moveHandler = onMove, ///
@@ -497,6 +415,7 @@ class Explorer extends Element {
 }
 
 Object.assign(Explorer.prototype, dropMixins);
+Object.assign(Explorer.prototype, eventMixins);
 
 export default withStyle(Explorer)`
   

package/src/index.js

@@ -5,6 +5,7 @@ export { default as RubbishBin } from "./rubbishBin";
 
 export { default as eventTypes } from "./eventTypes";
 
+export { default as NameInput } from "./input/name";
 export { default as NameButton } from "./button/name";
 export { default as EntriesList } from "./list/entries";
 export { default as ToggleButton } from "./button/toggle";

package/src/input/name.js

@@ -0,0 +1,90 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+import { Element } from "easy";
+import { INLINE_BLOCK } from "../constants";
+import { ENTER_KEY_CODE, ESCAPE_KEY_CODE } from "../keyCodes";
+
+class NameInput extends Element {
+  keyDownHandler = (event, element) => {
+    const { keyCode } = event;
+
+    if (keyCode === ENTER_KEY_CODE) {
+      const { onChange } = this.properties,
+            changeHandler = onChange, ///
+            html = this.html(),
+            name = html;  ///
+
+      changeHandler(name);
+
+      event.preventDefault();
+    }
+
+    if (keyCode === ESCAPE_KEY_CODE) {
+      const { onCancel } = this.properties,
+            cancelHandler = onCancel; ///
+
+      cancelHandler();
+
+      event.preventDefault();
+    }
+  }
+
+  setName(name) {
+    const html = name;  ///
+
+    this.html(html);
+  }
+
+  show() {
+    const display = INLINE_BLOCK;
+
+    this.display(display);
+
+    this.focus();
+  }
+
+  hide() {
+    super.hide();
+  }
+
+  didMount() {
+    this.onKeyDown(this.keyDownHandler);
+  }
+
+  willUnmount() {
+    this.offKeyDown(this.keyDownHandler);
+  }
+
+  parentContext() {
+    const showNameInput = this.show.bind(this), ///
+          hideNameInput = this.hide.bind(this), ///
+          setNameInputName = this.setName.bind(this); ///
+
+    return ({
+      showNameInput,
+      hideNameInput,
+      setNameInputName
+    });
+  }
+
+  static tagName = "span";  ///
+
+  static ignoredProperties = [
+    "onChange",
+    "onCancel"
+  ];
+
+  static defaultProperties = {
+    role: "textbox",
+    className: "name",
+    contentEditable: "true"
+  };
+}
+
+export default withStyle(NameInput)`
+  
+  display: inline-block;
+  
+`;

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

@@ -2,7 +2,6 @@
 
 import { dropMixins } from "easy-drag-and-drop";
 
-import NameButton from "../../../button/name";
 import ToggleButton from "../../../button/toggle";
 import DragEntryItem from "../../../item/entry/drag";
 import DirectoryNameSVG from "../../../svg/directoryName";
@@ -189,7 +188,7 @@ export default class DirectoryNameDragEntryItem extends DragEntryItem {
 
   childElements() {
 		const { name } = this.properties,
-          { NameButton, ToggleButton, DirectoryNameSVG } = this.constructor,
+          { NameInput, NameButton, ToggleButton, DirectoryNameSVG } = this.constructor,
           explorer = this.getExplorer(),
           EntriesList = explorer.getEntriesList();
 
@@ -197,17 +196,19 @@ export default class DirectoryNameDragEntryItem extends DragEntryItem {
 
 			<DirectoryNameEntryItemDiv name={name}
                                  explorer={explorer}
+                                 NameInput={NameInput}
 																 NameButton={NameButton}
 																 ToggleButton={ToggleButton}
 																 DirectoryNameSVG={DirectoryNameSVG}
+                                 onNameChange={this.nameChangeHandler}
+                                 onNameCancel={this.nameCancelHandler}
+                                 onSVGButtonClick={this.svgButtonClickHandler}
 			/>,
 			<EntriesList explorer={explorer} />
 
 		]);
 	}
 
-	static NameButton = NameButton;
-
 	static ToggleButton = ToggleButton;
 
 	static DirectoryNameSVG = DirectoryNameSVG;

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

@@ -1,6 +1,5 @@
 "use strict";
 
-import NameButton from "../../../button/name";
 import FileNameSVG from "../../../svg/fileName";
 import DragEntryItem from "../../../item/entry/drag";
 import FileNameEntryItemDiv from "../../../div/item/entry/fileName";
@@ -58,18 +57,23 @@ export default class FileNameDragEntryItem extends DragEntryItem {
 
 	childElements() {
     const { name } = this.properties,
-          { NameButton, FileNameSVG } = this.constructor,
+          { NameInput, NameButton, FileNameSVG } = this.constructor,
 					explorer = this.getExplorer();
 
 		return (
 
-			<FileNameEntryItemDiv name={name} explorer={explorer} NameButton={NameButton} FileNameSVG={FileNameSVG} />
-
+			<FileNameEntryItemDiv name={name}
+                            explorer={explorer}
+                            NameInput={NameInput}
+                            NameButton={NameButton}
+                            FileNameSVG={FileNameSVG}
+                            onNameChange={this.nameChangeHandler}
+                            onNameCancel={this.nameCancelHandler}
+                            onSVGButtonClick={this.svgButtonClickHandler}
+      />
 		);
   }
 
-  static NameButton = NameButton;
-
 	static FileNameSVG = FileNameSVG;
 
   static type = FILE_NAME_DRAG_ENTRY_TYPE;

package/src/item/entry/drag.js

@@ -5,11 +5,36 @@ import withStyle from "easy-with-style";  ///
 import { dragMixins } from "easy-drag-and-drop";
 
 import EntryItem from "../../item/entry";
+import NameInput from "../../input/name";
+import NameButton from "../../button/name";
 
-import { dragEntryItemFontSize } from "../../styles";
 import { adjustSourceEntryPath, adjustTargetEntryPath } from "../../utilities/pathMap";
 
 class DragEntryItem extends EntryItem {
+  svgButtonClickHandler = (event, element) => {
+    const explorer = this.getExplorer(),
+          dragEntryItem = this; ///
+
+    explorer.selectDragEntryItem(dragEntryItem);
+
+    event.stopPropagation();
+  }
+
+  nameChangeHandler = (name) => {
+    const path = this.getPath(),
+          explorer = this.getExplorer();
+
+    explorer.callPathChangeHandlersAsync(path, (success) => {
+      success ?
+        this.update(name) :
+          this.cancel();
+    });
+  }
+
+  nameCancelHandler = () => {
+    this.cancel();
+  }
+
   startDragHandler = (element) => {
     const path = this.getPath(),
           type = this.getType(),
@@ -49,35 +74,35 @@ class DragEntryItem extends EntryItem {
     return markerEntryItem;
   }
 
-  isSelected() {
-    const selected = this.hasClass("selected"); ///
+  getPathMaps(sourceEntryPath, targetEntryPath) {
+    let pathMaps = [];
 
-    return selected;
-  }
+    this.retrievePathMaps(sourceEntryPath, targetEntryPath, pathMaps);
 
-  getPathMap(sourceEntryPath, targetEntryPath) {
-		const name = this.getName();
+    pathMaps.reverse();
 
-		sourceEntryPath = adjustSourceEntryPath(sourceEntryPath, name);	///
-		targetEntryPath = adjustTargetEntryPath(targetEntryPath, name);	///
+    return pathMaps;
+  }
 
-		const pathMap = {
-			sourceEntryPath,
-			targetEntryPath
-		};
+  getPathMap(sourceEntryPath, targetEntryPath) {
+    const name = this.getName();
 
-		return pathMap;
-	}
+    sourceEntryPath = adjustSourceEntryPath(sourceEntryPath, name);	///
+    targetEntryPath = adjustTargetEntryPath(targetEntryPath, name);	///
 
-	getPathMaps(sourceEntryPath, targetEntryPath) {
-		let pathMaps = [];
+    const pathMap = {
+      sourceEntryPath,
+      targetEntryPath
+    };
 
-		this.retrievePathMaps(sourceEntryPath, targetEntryPath, pathMaps);
+    return pathMap;
+  }
 
-		pathMaps.reverse();
+  isSelected() {
+    const selected = this.hasClass("selected"); ///
 
-		return pathMaps;
-	}
+    return selected;
+  }
 
   deselect() {
     this.removeClass("selected");
@@ -87,7 +112,33 @@ class DragEntryItem extends EntryItem {
     this.addClass("selected");
   }
 
+  edit() {
+    this.hideNameButton();
+    this.showNameInput();
+  }
+
+  cancel() {
+    const nameButtonName = this.getNameButtonName(),
+          nameInputName = nameButtonName; ///
+
+    this.setNameInputName(nameInputName);
+
+    this.showNameButton();
+    this.hideNameInput();
+  }
+
+  update(name) {
+    const nameButtonName = name;  ///
+
+    this.setNameButtonName(nameButtonName);
+
+    this.showNameButton();
+    this.hideNameInput();
+  }
+
   didMount() {
+    this.hideNameInput();
+
 	  this.onStartDrag(this.startDragHandler);
 
     this.onStopDrag(this.stopDragHandler);
@@ -119,7 +170,11 @@ class DragEntryItem extends EntryItem {
 		this.assignContext();
 	}
 
-	static defaultProperties = {
+  static NameInput = NameInput;
+
+  static NameButton = NameButton;
+
+  static defaultProperties = {
 		className: "drag"
 	};
 }
@@ -128,7 +183,6 @@ Object.assign(EntryItem.prototype, dragMixins);
 
 export default withStyle(DragEntryItem)`
 
-	font-size: ${dragEntryItemFontSize};
   user-select: none;
   
   font-weight: normal;

package/src/keyCodes.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export const ENTER_KEY_CODE = 13;
+export const ESCAPE_KEY_CODE = 27;

package/src/list/entries.js

@@ -183,6 +183,20 @@ class EntriesList extends Element {
     });
   }
 
+  editSelectedPath() {
+    const dragEntryItems = this.retrieveDragEntryItems();
+
+    dragEntryItems.some((dragEntryItem) => {
+      const selected = dragEntryItem.isSelected();
+
+      if (selected) {
+        dragEntryItem.edit();
+
+        return true;
+      }
+    });
+  }
+
   addDirectoryPath(directoryPath, collapsed = true) {
     let directoryNameDragEntryItem;
 
@@ -576,6 +590,7 @@ class EntriesList extends Element {
           removeAllPaths = this.removeAllPaths.bind(this),
           deselectAllPaths = this.deselectAllPaths.bind(this),
           addDirectoryPath = this.addDirectoryPath.bind(this),
+          editSelectedPath = this.editSelectedPath.bind(this),
           removeDirectoryPath = this.removeDirectoryPath.bind(this),
           forEachDragEntryItem = this.forEachDragEntryItem.bind(this),
           retrieveDragEntryItems = this.retrieveDragEntryItems.bind(this),
@@ -594,6 +609,7 @@ class EntriesList extends Element {
       removeAllPaths,
       deselectAllPaths,
       addDirectoryPath,
+      editSelectedPath,
       removeDirectoryPath,
       forEachDragEntryItem,
       retrieveDragEntryItems,