easy-file-system 1.3.152 → 1.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/example.js +537 -144
- package/lib/button/svg.js +135 -0
- package/lib/div/background.js +1 -1
- package/lib/div/item/entry/directoryName.js +12 -4
- package/lib/div/item/entry/fileName.js +12 -4
- package/lib/div/item/entry.js +81 -3
- package/lib/eventTypes.js +39 -0
- package/lib/example/view.js +7 -1
- package/lib/explorer.js +52 -17
- package/lib/index.js +5 -1
- package/lib/item/entry/drag/directoryName.js +6 -5
- package/lib/item/entry/drag.js +6 -6
- package/lib/list/entries.js +64 -3
- package/lib/rubbishBin.js +11 -10
- package/lib/svg/directoryName.js +1 -1
- package/lib/svg/fileName.js +1 -1
- package/lib/svg/marker.js +1 -1
- package/lib/svg/rubbishBin/closed.js +1 -1
- package/lib/svg/rubbishBin/open.js +1 -1
- package/lib/svg/toggle/down.js +1 -1
- package/lib/svg/toggle/up.js +1 -1
- package/package.json +4 -4
- package/src/button/svg.js +17 -0
- package/src/div/background.js +1 -1
- package/src/div/item/entry/directoryName.js +16 -3
- package/src/div/item/entry/fileName.js +16 -3
- package/src/div/item/entry.js +26 -1
- package/src/eventTypes.js +13 -0
- package/src/example/view.js +9 -1
- package/src/explorer.js +49 -13
- package/src/index.js +2 -0
- package/src/item/entry/drag/directoryName.js +5 -4
- package/src/item/entry/drag.js +6 -6
- package/src/list/entries.js +78 -11
- package/src/rubbishBin.js +7 -7
- package/src/svg/directoryName.js +1 -1
- package/src/svg/fileName.js +1 -1
- package/src/svg/marker.js +1 -1
- package/src/svg/rubbishBin/closed.js +1 -1
- package/src/svg/rubbishBin/open.js +1 -1
- package/src/svg/toggle/down.js +1 -1
- package/src/svg/toggle/up.js +1 -1
package/lib/svg/toggle/down.js
CHANGED
|
@@ -231,4 +231,4 @@ _defineProperty(DownToggleSVG, "defaultProperties", {
|
|
|
231
231
|
});
|
|
232
232
|
var _default = (0, _easyWithStyle.default)(DownToggleSVG)(_templateObject(), _styles.toggleSVGHeight, _styles.toggleSVGPaddingRight);
|
|
233
233
|
|
|
234
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
234
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9zdmcvdG9nZ2xlL2Rvd24uanMiXSwic291cmNlc0NvbnRlbnQiOlsiXCJ1c2Ugc3RyaWN0XCI7XG5cbmltcG9ydCB3aXRoU3R5bGUgZnJvbSBcImVhc3ktd2l0aC1zdHlsZVwiOyAgLy8vXG5cbmltcG9ydCB7IEVsZW1lbnQgfSBmcm9tIFwiZWFzeVwiO1xuXG5pbXBvcnQgeyB0b2dnbGVTVkdIZWlnaHQsIHRvZ2dsZVNWR1BhZGRpbmdSaWdodCB9IGZyb20gXCIuLi8uLi9zdHlsZXNcIjtcblxuY2xhc3MgRG93blRvZ2dsZVNWRyBleHRlbmRzIEVsZW1lbnQge1xuICBjaGlsZEVsZW1lbnRzKCkge1xuICAgIHJldHVybiAoXG5cbiAgICAgIDxnPlxuICAgICAgICA8cGF0aCBzdHlsZT1cInN0cm9rZS13aWR0aDoxcHhcIiBkPVwibSAyMjIsNTQgLTcsLTE0IGggMTQgelwiIC8+XG4gICAgICA8L2c+XG5cbiAgICApO1xuICB9XG5cbiAgcGFyZW50Q29udGV4dCgpIHtcbiAgICBjb25zdCBzaG93RG93blRvZ2dsZVNWRyA9IHRoaXMuc2hvdy5iaW5kKHRoaXMpLCAvLy9cbiAgICAgICAgICBoaWRlRG93blRvZ2dsZVNWRyA9IHRoaXMuaGlkZS5iaW5kKHRoaXMpOyAvLy9cblxuICAgIHJldHVybiAoe1xuICAgICAgc2hvd0Rvd25Ub2dnbGVTVkcsXG4gICAgICBoaWRlRG93blRvZ2dsZVNWR1xuICAgIH0pO1xuICB9XG5cbiAgc3RhdGljIHRhZ05hbWUgPSBcInN2Z1wiO1xuXG4gIHN0YXRpYyBkZWZhdWx0UHJvcGVydGllcyA9IHtcbiAgICB3aWR0aDogXCIzMlwiLFxuICAgIGhlaWdodDogXCIzMlwiLFxuICAgIHZpZXdCb3g6IFwiMjA2IDI2IDMyIDMyXCIsXG4gICAgY2xhc3NOYW1lOiBcImRvd24tdG9nZ2xlXCJcbiAgfTtcbn1cblxuZXhwb3J0IGRlZmF1bHQgd2l0aFN0eWxlKERvd25Ub2dnbGVTVkcpYFxuXG4gIGZpbGw6ICMwMDAwMDA7XG4gIHdpZHRoOiBhdXRvO1xuICBoZWlnaHQ6ICR7dG9nZ2xlU1ZHSGVpZ2h0fTtcbiAgc3Ryb2tlOiAjMDAwMDAwO1xuICBwYWRkaW5nLXJpZ2h0OiAke3RvZ2dsZVNWR1BhZGRpbmdSaWdodH07XG4gIHZlcnRpY2FsLWFsaWduOiBib3R0b207XG4gIFxuYDtcblxuIl0sIm5hbWVzIjpbIkRvd25Ub2dnbGVTVkciLCJjaGlsZEVsZW1lbnRzIiwiZyIsInBhdGgiLCJzdHlsZSIsImQiLCJwYXJlbnRDb250ZXh0Iiwic2hvd0Rvd25Ub2dnbGVTVkciLCJzaG93IiwiYmluZCIsImhpZGVEb3duVG9nZ2xlU1ZHIiwiaGlkZSIsIkVsZW1lbnQiLCJ0YWdOYW1lIiwiZGVmYXVsdFByb3BlcnRpZXMiLCJ3aWR0aCIsImhlaWdodCIsInZpZXdCb3giLCJjbGFzc05hbWUiLCJ3aXRoU3R5bGUiLCJ0b2dnbGVTVkdIZWlnaHQiLCJ0b2dnbGVTVkdQYWRkaW5nUmlnaHQiXSwibWFwcGluZ3MiOiJBQUFBOzs7OytCQXVDQTs7O2VBQUE7OztrRUFyQ3NCO29CQUVFO3NCQUUrQjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFFdkQsSUFBQSxBQUFNQSw4QkErQkgsQUEvQkg7Y0FBTUE7OEJBQUFBO2FBQUFBOzhCQUFBQTs7O2lCQUFBQTs7WUFDSkMsS0FBQUE7bUJBQUFBLFNBQUFBLGdCQUFnQjtnQkFDZCxxQkFFRSxvQkFBQ0MseUJBQ0Msb0JBQUNDO29CQUFLQyxPQUFNO29CQUFtQkMsR0FBRTs7WUFJdkM7OztZQUVBQyxLQUFBQTttQkFBQUEsU0FBQUEsZ0JBQWdCO2dCQUNkLElBQU1DLG9CQUFvQixJQUFJLENBQUNDLElBQUksQ0FBQ0MsSUFBSSxDQUFDLElBQUksR0FDdkNDLG9CQUFvQixJQUFJLENBQUNDLElBQUksQ0FBQ0YsSUFBSSxDQUFDLElBQUksR0FBRyxHQUFHO2dCQUVuRCxPQUFRO29CQUNORixtQkFBQUE7b0JBQ0FHLG1CQUFBQTtnQkFDRjtZQUNGOzs7V0FuQklWO21CQUFzQlksYUFBTztBQXFCakMsZ0JBckJJWixlQXFCR2EsV0FBVTtBQUVqQixnQkF2QkliLGVBdUJHYyxxQkFBb0I7SUFDekJDLE9BQU87SUFDUEMsUUFBUTtJQUNSQyxTQUFTO0lBQ1RDLFdBQVc7QUFDYjtJQUdGLFdBQWVDLElBQUFBLHNCQUFTLEVBQUNuQixrQ0FJYm9CLHVCQUFlLEVBRVJDLDZCQUFxQiJ9
|
package/lib/svg/toggle/up.js
CHANGED
|
@@ -231,4 +231,4 @@ _defineProperty(UpToggleSVG, "defaultProperties", {
|
|
|
231
231
|
});
|
|
232
232
|
var _default = (0, _easyWithStyle.default)(UpToggleSVG)(_templateObject(), _styles.toggleSVGHeight, _styles.toggleSVGPaddingRight);
|
|
233
233
|
|
|
234
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
234
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9zdmcvdG9nZ2xlL3VwLmpzIl0sInNvdXJjZXNDb250ZW50IjpbIlwidXNlIHN0cmljdFwiO1xuXG5pbXBvcnQgd2l0aFN0eWxlIGZyb20gXCJlYXN5LXdpdGgtc3R5bGVcIjsgIC8vL1xuXG5pbXBvcnQgeyBFbGVtZW50IH0gZnJvbSBcImVhc3lcIjtcblxuaW1wb3J0IHsgdG9nZ2xlU1ZHSGVpZ2h0LCB0b2dnbGVTVkdQYWRkaW5nUmlnaHQgfSBmcm9tIFwiLi4vLi4vc3R5bGVzXCI7XG5cbmNsYXNzIFVwVG9nZ2xlU1ZHIGV4dGVuZHMgRWxlbWVudCB7XG4gIGNoaWxkRWxlbWVudHMoKSB7XG4gICAgcmV0dXJuIChcblxuICAgICAgPGc+XG4gICAgICAgIDxwYXRoIHN0eWxlPVwic3Ryb2tlLXdpZHRoOjFweFwiIGQ9XCJtIDI2NCw1MCAtMTQsNyBWIDQ0IFpcIiAvPlxuICAgICAgPC9nPlxuXG4gICAgKTtcbiAgfVxuXG4gIHBhcmVudENvbnRleHQoKSB7XG4gICAgY29uc3Qgc2hvd1VwVG9nZ2xlU1ZHID0gdGhpcy5zaG93LmJpbmQodGhpcyksIC8vL1xuICAgICAgICAgIGhpZGVVcFRvZ2dsZVNWRyA9IHRoaXMuaGlkZS5iaW5kKHRoaXMpOyAvLy9cblxuICAgIHJldHVybiAoe1xuICAgICAgc2hvd1VwVG9nZ2xlU1ZHLFxuICAgICAgaGlkZVVwVG9nZ2xlU1ZHXG4gICAgfSk7XG4gIH1cblxuICBzdGF0aWMgdGFnTmFtZSA9IFwic3ZnXCI7XG5cbiAgc3RhdGljIGRlZmF1bHRQcm9wZXJ0aWVzID0ge1xuICAgIHdpZHRoOiBcIjMyXCIsXG4gICAgaGVpZ2h0OiBcIjMyXCIsXG4gICAgdmlld0JveDogXCIyNDAgMzAgMzIgMzJcIixcbiAgICBjbGFzc05hbWU6IFwidXAtdG9nZ2xlXCJcbiAgfTtcbn1cblxuZXhwb3J0IGRlZmF1bHQgd2l0aFN0eWxlKFVwVG9nZ2xlU1ZHKWBcblxuICBmaWxsOiAjMDAwMDAwO1xuICB3aWR0aDogYXV0bztcbiAgaGVpZ2h0OiAke3RvZ2dsZVNWR0hlaWdodH07XG4gIHN0cm9rZTogIzAwMDAwMDtcbiAgbWFyZ2luLXJpZ2h0OiAke3RvZ2dsZVNWR1BhZGRpbmdSaWdodH07XG4gIHZlcnRpY2FsLWFsaWduOiBib3R0b207XG4gIFxuYDtcbiJdLCJuYW1lcyI6WyJVcFRvZ2dsZVNWRyIsImNoaWxkRWxlbWVudHMiLCJnIiwicGF0aCIsInN0eWxlIiwiZCIsInBhcmVudENvbnRleHQiLCJzaG93VXBUb2dnbGVTVkciLCJzaG93IiwiYmluZCIsImhpZGVVcFRvZ2dsZVNWRyIsImhpZGUiLCJFbGVtZW50IiwidGFnTmFtZSIsImRlZmF1bHRQcm9wZXJ0aWVzIiwid2lkdGgiLCJoZWlnaHQiLCJ2aWV3Qm94IiwiY2xhc3NOYW1lIiwid2l0aFN0eWxlIiwidG9nZ2xlU1ZHSGVpZ2h0IiwidG9nZ2xlU1ZHUGFkZGluZ1JpZ2h0Il0sIm1hcHBpbmdzIjoiQUFBQTs7OzsrQkF1Q0E7OztlQUFBOzs7a0VBckNzQjtvQkFFRTtzQkFFK0I7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBRXZELElBQUEsQUFBTUEsNEJBK0JILEFBL0JIO2NBQU1BOzhCQUFBQTthQUFBQTs4QkFBQUE7OztpQkFBQUE7O1lBQ0pDLEtBQUFBO21CQUFBQSxTQUFBQSxnQkFBZ0I7Z0JBQ2QscUJBRUUsb0JBQUNDLHlCQUNDLG9CQUFDQztvQkFBS0MsT0FBTTtvQkFBbUJDLEdBQUU7O1lBSXZDOzs7WUFFQUMsS0FBQUE7bUJBQUFBLFNBQUFBLGdCQUFnQjtnQkFDZCxJQUFNQyxrQkFBa0IsSUFBSSxDQUFDQyxJQUFJLENBQUNDLElBQUksQ0FBQyxJQUFJLEdBQ3JDQyxrQkFBa0IsSUFBSSxDQUFDQyxJQUFJLENBQUNGLElBQUksQ0FBQyxJQUFJLEdBQUcsR0FBRztnQkFFakQsT0FBUTtvQkFDTkYsaUJBQUFBO29CQUNBRyxpQkFBQUE7Z0JBQ0Y7WUFDRjs7O1dBbkJJVjttQkFBb0JZLGFBQU87QUFxQi9CLGdCQXJCSVosYUFxQkdhLFdBQVU7QUFFakIsZ0JBdkJJYixhQXVCR2MscUJBQW9CO0lBQ3pCQyxPQUFPO0lBQ1BDLFFBQVE7SUFDUkMsU0FBUztJQUNUQyxXQUFXO0FBQ2I7SUFHRixXQUFlQyxJQUFBQSxzQkFBUyxFQUFDbkIsZ0NBSWJvQix1QkFBZSxFQUVUQyw2QkFBcUIifQ==
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "easy-file-system",
|
|
3
3
|
"author": "James Smith",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.5.1",
|
|
5
5
|
"license": "MIT, Anti-996",
|
|
6
6
|
"homepage": "https://github.com/djalbat/easy-file-system",
|
|
7
7
|
"description": "A file system explorer and a rubbish bin.",
|
|
@@ -10,9 +10,9 @@
|
|
|
10
10
|
"url": "https://github.com/djalbat/easy-file-system"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"easy": "^
|
|
14
|
-
"easy-drag-and-drop": "^1.
|
|
15
|
-
"easy-with-style": "^3.0.
|
|
13
|
+
"easy": "^14.0.1",
|
|
14
|
+
"easy-drag-and-drop": "^1.3.1",
|
|
15
|
+
"easy-with-style": "^3.0.185",
|
|
16
16
|
"necessary": "^11.0.40"
|
|
17
17
|
},
|
|
18
18
|
"devDependencies": {
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import withStyle from "easy-with-style"; ///
|
|
4
|
+
|
|
5
|
+
import { Button } from "easy";
|
|
6
|
+
|
|
7
|
+
class SVGButton extends Button {
|
|
8
|
+
static defaultProperties = {
|
|
9
|
+
className: "svg"
|
|
10
|
+
};
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export default withStyle(SVGButton)`
|
|
14
|
+
|
|
15
|
+
background: transparent;
|
|
16
|
+
|
|
17
|
+
`;
|
package/src/div/background.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
import SVGButton from "../../../button/svg";
|
|
3
4
|
import EntryItemDiv from "../../../div/item/entry";
|
|
4
5
|
import BackgroundDiv from "../../../div/background";
|
|
5
6
|
|
|
@@ -13,7 +14,7 @@ export default class DirectoryNameEntryItemDiv extends EntryItemDiv {
|
|
|
13
14
|
event.stopPropagation();
|
|
14
15
|
}
|
|
15
16
|
|
|
16
|
-
|
|
17
|
+
nameButtonDoubleClickHandler = (event, element) => {
|
|
17
18
|
const parentElement = this.getParentElement(),
|
|
18
19
|
directoryNameDragEntryItem = parentElement; ///
|
|
19
20
|
|
|
@@ -22,6 +23,16 @@ export default class DirectoryNameEntryItemDiv extends EntryItemDiv {
|
|
|
22
23
|
event.stopPropagation();
|
|
23
24
|
}
|
|
24
25
|
|
|
26
|
+
svgButtonClickHandler = (event, element) => {
|
|
27
|
+
const explorer = this.getExplorer(),
|
|
28
|
+
parentElement = this.getParentElement(),
|
|
29
|
+
dragEntryItem = parentElement; ///
|
|
30
|
+
|
|
31
|
+
explorer.selectDragEntryItem(dragEntryItem);
|
|
32
|
+
|
|
33
|
+
event.stopPropagation();
|
|
34
|
+
}
|
|
35
|
+
|
|
25
36
|
getExplorer() {
|
|
26
37
|
const { explorer } = this.properties;
|
|
27
38
|
|
|
@@ -34,8 +45,10 @@ export default class DirectoryNameEntryItemDiv extends EntryItemDiv {
|
|
|
34
45
|
return ([
|
|
35
46
|
|
|
36
47
|
<ToggleButton onMouseDown={this.toggleButtonMouseDownHandler} />,
|
|
37
|
-
<
|
|
38
|
-
|
|
48
|
+
<SVGButton onClick={this.svgButtonClickHandler} >
|
|
49
|
+
<DirectoryNameSVG/>
|
|
50
|
+
</SVGButton>,
|
|
51
|
+
<NameButton onDoubleClick={this.nameButtonDoubleClickHandler} >
|
|
39
52
|
{name}
|
|
40
53
|
</NameButton>,
|
|
41
54
|
<BackgroundDiv/>
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
import SVGButton from "../../../button/svg";
|
|
3
4
|
import EntryItemDiv from "../../../div/item/entry";
|
|
4
5
|
import BackgroundDiv from "../../../div/background";
|
|
5
6
|
|
|
6
7
|
export default class FileNameEntryItemDiv extends EntryItemDiv {
|
|
7
|
-
|
|
8
|
+
nameButtonDoubleClickHandler = (event, element) => {
|
|
8
9
|
const explorer = this.getExplorer(),
|
|
9
10
|
parentElement = this.getParentElement(),
|
|
10
11
|
fileNameDragEntryItem = parentElement; ///
|
|
@@ -14,6 +15,16 @@ export default class FileNameEntryItemDiv extends EntryItemDiv {
|
|
|
14
15
|
event.stopPropagation();
|
|
15
16
|
}
|
|
16
17
|
|
|
18
|
+
svgButtonClickHandler = (event, element) => {
|
|
19
|
+
const explorer = this.getExplorer(),
|
|
20
|
+
parentElement = this.getParentElement(),
|
|
21
|
+
dragEntryItem = parentElement; ///
|
|
22
|
+
|
|
23
|
+
explorer.selectDragEntryItem(dragEntryItem);
|
|
24
|
+
|
|
25
|
+
event.stopPropagation();
|
|
26
|
+
}
|
|
27
|
+
|
|
17
28
|
getExplorer() {
|
|
18
29
|
const { explorer } = this.properties;
|
|
19
30
|
|
|
@@ -25,8 +36,10 @@ export default class FileNameEntryItemDiv extends EntryItemDiv {
|
|
|
25
36
|
|
|
26
37
|
return ([
|
|
27
38
|
|
|
28
|
-
<
|
|
29
|
-
|
|
39
|
+
<SVGButton onClick={this.svgButtonClickHandler} >
|
|
40
|
+
<FileNameSVG/>
|
|
41
|
+
</SVGButton>,
|
|
42
|
+
<NameButton onDoubleClick={this.nameButtonDoubleClickHandler} >
|
|
30
43
|
{name}
|
|
31
44
|
</NameButton>,
|
|
32
45
|
<BackgroundDiv/>
|
package/src/div/item/entry.js
CHANGED
|
@@ -7,10 +7,31 @@ import { Element } from "easy";
|
|
|
7
7
|
import { entryItemDivMinHeight, entryItemDivPaddingTop } from "../../styles";
|
|
8
8
|
|
|
9
9
|
class EntryItemDiv extends Element {
|
|
10
|
+
deselect() {
|
|
11
|
+
this.removeClass("selected");
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
select() {
|
|
15
|
+
this.addClass("selected");
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
parentContext() {
|
|
19
|
+
const context = this.getContext(),
|
|
20
|
+
select = this.select.bind(this),
|
|
21
|
+
deselect = this.deselect.bind(this);
|
|
22
|
+
|
|
23
|
+
return ({
|
|
24
|
+
...context,
|
|
25
|
+
select,
|
|
26
|
+
deselect
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
|
|
10
30
|
static tagName = "div";
|
|
11
31
|
|
|
12
32
|
static ignoredProperties = [
|
|
13
|
-
"name"
|
|
33
|
+
"name",
|
|
34
|
+
"explorer"
|
|
14
35
|
];
|
|
15
36
|
|
|
16
37
|
static defaultProperties = {
|
|
@@ -22,5 +43,9 @@ export default withStyle(EntryItemDiv)`
|
|
|
22
43
|
|
|
23
44
|
min-height: ${entryItemDivMinHeight};
|
|
24
45
|
padding-top: ${entryItemDivPaddingTop};
|
|
46
|
+
|
|
47
|
+
.selected {
|
|
48
|
+
background-color: #c0c0c0;
|
|
49
|
+
}
|
|
25
50
|
|
|
26
51
|
`;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
export const OPEN_EVENT_TYPE = "open";
|
|
4
|
+
export const MOVE_EVENT_TYPE = "move";
|
|
5
|
+
export const REMOVE_EVENT_TYPE = "remove";
|
|
6
|
+
export const SELECT_EVENT_TYPE = "select";
|
|
7
|
+
|
|
8
|
+
export default {
|
|
9
|
+
OPEN_EVENT_TYPE,
|
|
10
|
+
MOVE_EVENT_TYPE,
|
|
11
|
+
REMOVE_EVENT_TYPE,
|
|
12
|
+
SELECT_EVENT_TYPE
|
|
13
|
+
};
|
package/src/example/view.js
CHANGED
|
@@ -24,7 +24,15 @@ export default class View extends Element {
|
|
|
24
24
|
explorer2.addFilePath("directory2/file4.txt");
|
|
25
25
|
explorer2.addFilePath("directory2/directory3/file5.txt");
|
|
26
26
|
|
|
27
|
-
explorer2.removeFilePath("directory2/directory3/file4.txt", true)
|
|
27
|
+
explorer2.removeFilePath("directory2/directory3/file4.txt", true);
|
|
28
|
+
|
|
29
|
+
explorer1.onSelect((path) => {
|
|
30
|
+
explorer2.deselectAllPaths();
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
explorer2.onSelect((path) => {
|
|
34
|
+
explorer1.deselectAllPaths();
|
|
35
|
+
});
|
|
28
36
|
|
|
29
37
|
return ([
|
|
30
38
|
|
package/src/explorer.js
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
import withStyle from "easy-with-style"; ///
|
|
4
4
|
|
|
5
|
+
import { Element } from "easy";
|
|
5
6
|
import { dropMixins } from "easy-drag-and-drop";
|
|
6
|
-
import { Element, eventTypes } from "easy";
|
|
7
7
|
import { asynchronousUtilities } from "necessary";
|
|
8
8
|
|
|
9
9
|
import EntriesList from "./list/entries";
|
|
@@ -14,11 +14,11 @@ import DirectoryNameDragEntryItem from "./item/entry/drag/directoryName";
|
|
|
14
14
|
import DirectoryNameMarkerEntryItem from "./item/entry/marker/directoryName";
|
|
15
15
|
|
|
16
16
|
import { explorerPadding } from "./styles";
|
|
17
|
+
import { OPEN_EVENT_TYPE, MOVE_EVENT_TYPE, SELECT_EVENT_TYPE } from "./eventTypes";
|
|
17
18
|
import { FILE_NAME_DRAG_ENTRY_TYPE, DIRECTORY_NAME_DRAG_ENTRY_TYPE } from "./entryTypes";
|
|
18
19
|
import { sourceEntryPathFromDragEntryItemPath, targetEntryPathFromMarkerEntryItemPath } from "./utilities/pathMap";
|
|
19
20
|
|
|
20
|
-
const { forEach } = asynchronousUtilities
|
|
21
|
-
{ OPEN_EVENT_TYPE, MOVE_EVENT_TYPE } = eventTypes;
|
|
21
|
+
const { forEach } = asynchronousUtilities;
|
|
22
22
|
|
|
23
23
|
class Explorer extends Element {
|
|
24
24
|
constructor(selector, mounted) {
|
|
@@ -157,6 +157,20 @@ class Explorer extends Element {
|
|
|
157
157
|
return DirectoryNameMarkerEntryItem;
|
|
158
158
|
}
|
|
159
159
|
|
|
160
|
+
onMove(moveHandler, element) {
|
|
161
|
+
const eventType = MOVE_EVENT_TYPE,
|
|
162
|
+
handler = moveHandler; ///
|
|
163
|
+
|
|
164
|
+
this.addEventListener(eventType, handler, element);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
offMove(moveHandler, element) {
|
|
168
|
+
const eventType = MOVE_EVENT_TYPE,
|
|
169
|
+
handler = moveHandler; ///
|
|
170
|
+
|
|
171
|
+
this.removeEventListener(eventType, handler, element);
|
|
172
|
+
}
|
|
173
|
+
|
|
160
174
|
onOpen(openHandler, element) {
|
|
161
175
|
const eventType = OPEN_EVENT_TYPE,
|
|
162
176
|
handler = openHandler; ///
|
|
@@ -171,16 +185,16 @@ class Explorer extends Element {
|
|
|
171
185
|
this.removeEventListener(eventType, handler, element);
|
|
172
186
|
}
|
|
173
187
|
|
|
174
|
-
|
|
175
|
-
const eventType =
|
|
176
|
-
handler =
|
|
188
|
+
onSelect(selectHandler, element) {
|
|
189
|
+
const eventType = SELECT_EVENT_TYPE,
|
|
190
|
+
handler = selectHandler; ///
|
|
177
191
|
|
|
178
192
|
this.addEventListener(eventType, handler, element);
|
|
179
193
|
}
|
|
180
194
|
|
|
181
|
-
|
|
182
|
-
const eventType =
|
|
183
|
-
handler =
|
|
195
|
+
offSelect(selectHandler, element) {
|
|
196
|
+
const eventType = SELECT_EVENT_TYPE,
|
|
197
|
+
handler = selectHandler; ///
|
|
184
198
|
|
|
185
199
|
this.removeEventListener(eventType, handler, element);
|
|
186
200
|
}
|
|
@@ -226,6 +240,16 @@ class Explorer extends Element {
|
|
|
226
240
|
this.callOpenHandlers(filePath);
|
|
227
241
|
}
|
|
228
242
|
|
|
243
|
+
selectDragEntryItem(dragEntryItem) {
|
|
244
|
+
const path = dragEntryItem.getPath();
|
|
245
|
+
|
|
246
|
+
this.callSelectHandlers(path);
|
|
247
|
+
|
|
248
|
+
this.deselectAllPaths();
|
|
249
|
+
|
|
250
|
+
this.selectPath(path);
|
|
251
|
+
}
|
|
252
|
+
|
|
229
253
|
dropDragEntryItem(dragEntryItem, done) {
|
|
230
254
|
const markerEntryItem = this.retrieveMarkerEntryItem(),
|
|
231
255
|
dragEntryItemPath = dragEntryItem.getPath(),
|
|
@@ -340,6 +364,18 @@ class Explorer extends Element {
|
|
|
340
364
|
}, done);
|
|
341
365
|
}
|
|
342
366
|
|
|
367
|
+
callSelectHandlers(path) {
|
|
368
|
+
const eventType = SELECT_EVENT_TYPE,
|
|
369
|
+
eventListeners = this.findEventListeners(eventType);
|
|
370
|
+
|
|
371
|
+
eventListeners.forEach((eventListener) => {
|
|
372
|
+
const { handler, element } = eventListener,
|
|
373
|
+
selectHandler = handler; ///
|
|
374
|
+
|
|
375
|
+
selectHandler.call(element, path, this); ///
|
|
376
|
+
});
|
|
377
|
+
}
|
|
378
|
+
|
|
343
379
|
callOpenHandlers(filePath) {
|
|
344
380
|
const eventType = OPEN_EVENT_TYPE,
|
|
345
381
|
eventListeners = this.findEventListeners(eventType);
|
|
@@ -361,9 +397,9 @@ class Explorer extends Element {
|
|
|
361
397
|
|
|
362
398
|
this.enableDrop();
|
|
363
399
|
|
|
364
|
-
this.onDrop(this.dropHandler
|
|
400
|
+
this.onDrop(this.dropHandler);
|
|
365
401
|
|
|
366
|
-
this.onDragOver(this.dragOverHandler
|
|
402
|
+
this.onDragOver(this.dragOverHandler);
|
|
367
403
|
|
|
368
404
|
moveHandler && this.onMove(moveHandler);
|
|
369
405
|
openHandler && this.onOpen(openHandler);
|
|
@@ -378,9 +414,9 @@ class Explorer extends Element {
|
|
|
378
414
|
|
|
379
415
|
this.disableDrop();
|
|
380
416
|
|
|
381
|
-
this.offDrop(this.dropHandler
|
|
417
|
+
this.offDrop(this.dropHandler);
|
|
382
418
|
|
|
383
|
-
this.offDragOver(this.dragOverHandler
|
|
419
|
+
this.offDragOver(this.dragOverHandler);
|
|
384
420
|
|
|
385
421
|
moveHandler && this.offMove(moveHandler);
|
|
386
422
|
openHandler && this.offOpen(openHandler);
|
package/src/index.js
CHANGED
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
export { default as Explorer } from "./explorer";
|
|
4
4
|
export { default as RubbishBin } from "./rubbishBin";
|
|
5
5
|
|
|
6
|
+
export { default as eventTypes } from "./eventTypes";
|
|
7
|
+
|
|
6
8
|
export { default as NameButton } from "./button/name";
|
|
7
9
|
export { default as EntriesList } from "./list/entries";
|
|
8
10
|
export { default as ToggleButton } from "./button/toggle";
|
|
@@ -176,9 +176,9 @@ export default class DirectoryNameDragEntryItem extends DragEntryItem {
|
|
|
176
176
|
|
|
177
177
|
this.enableDrop();
|
|
178
178
|
|
|
179
|
-
this.onDrop(this.dropHandler
|
|
179
|
+
this.onDrop(this.dropHandler);
|
|
180
180
|
|
|
181
|
-
this.onDragOver(this.dragOverHandler
|
|
181
|
+
this.onDragOver(this.dragOverHandler);
|
|
182
182
|
|
|
183
183
|
super.didMount();
|
|
184
184
|
}
|
|
@@ -186,9 +186,9 @@ export default class DirectoryNameDragEntryItem extends DragEntryItem {
|
|
|
186
186
|
willUnmount() {
|
|
187
187
|
this.disableDrop();
|
|
188
188
|
|
|
189
|
-
this.offDrop(this.dropHandler
|
|
189
|
+
this.offDrop(this.dropHandler);
|
|
190
190
|
|
|
191
|
-
this.offDragOver(this.dragOverHandler
|
|
191
|
+
this.offDragOver(this.dragOverHandler);
|
|
192
192
|
|
|
193
193
|
super.willUnmount();
|
|
194
194
|
}
|
|
@@ -202,6 +202,7 @@ export default class DirectoryNameDragEntryItem extends DragEntryItem {
|
|
|
202
202
|
return ([
|
|
203
203
|
|
|
204
204
|
<DirectoryNameEntryItemDiv name={name}
|
|
205
|
+
explorer={explorer}
|
|
205
206
|
NameButton={NameButton}
|
|
206
207
|
ToggleButton={ToggleButton}
|
|
207
208
|
DirectoryNameSVG={DirectoryNameSVG}
|
package/src/item/entry/drag.js
CHANGED
|
@@ -74,17 +74,17 @@ class DragEntryItem extends EntryItem {
|
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
didMount() {
|
|
77
|
-
this.onStartDrag(this.startDragHandler
|
|
77
|
+
this.onStartDrag(this.startDragHandler);
|
|
78
78
|
|
|
79
|
-
this.onStopDrag(this.stopDragHandler
|
|
79
|
+
this.onStopDrag(this.stopDragHandler);
|
|
80
80
|
|
|
81
|
-
|
|
81
|
+
this.enableDrag();
|
|
82
82
|
}
|
|
83
83
|
|
|
84
84
|
willUnmount() {
|
|
85
|
-
this.offStartDrag(this.startDragHandler
|
|
85
|
+
this.offStartDrag(this.startDragHandler);
|
|
86
86
|
|
|
87
|
-
this.offStopDrag(this.stopDragHandler
|
|
87
|
+
this.offStopDrag(this.stopDragHandler);
|
|
88
88
|
|
|
89
89
|
this.disableDrag();
|
|
90
90
|
}
|
|
@@ -110,5 +110,5 @@ export default withStyle(DragEntryItem)`
|
|
|
110
110
|
position: fixed;
|
|
111
111
|
pointer-events: none;
|
|
112
112
|
}
|
|
113
|
-
|
|
113
|
+
|
|
114
114
|
`;
|
package/src/list/entries.js
CHANGED
|
@@ -3,12 +3,13 @@
|
|
|
3
3
|
import withStyle from "easy-with-style"; ///
|
|
4
4
|
|
|
5
5
|
import { Element } from "easy";
|
|
6
|
-
import { pathUtilities } from "necessary";
|
|
6
|
+
import { pathUtilities, arrayUtilities } from "necessary";
|
|
7
7
|
|
|
8
8
|
import { entriesListPaddingLeft } from "../styles";
|
|
9
9
|
import { FILE_NAME_DRAG_ENTRY_TYPE, DIRECTORY_NAME_DRAG_ENTRY_TYPE } from "../entryTypes";
|
|
10
10
|
|
|
11
|
-
const {
|
|
11
|
+
const { filter } = arrayUtilities,
|
|
12
|
+
{ topmostDirectoryNameFromPath, pathWithoutTopmostDirectoryNameFromPath } = pathUtilities;
|
|
12
13
|
|
|
13
14
|
const markerEntryItem = null;
|
|
14
15
|
|
|
@@ -78,6 +79,31 @@ class EntriesList extends Element {
|
|
|
78
79
|
this.removeMarkerEntryItem();
|
|
79
80
|
}
|
|
80
81
|
|
|
82
|
+
selectPath(path) {
|
|
83
|
+
const topmostDirectoryName = topmostDirectoryNameFromPath(path);
|
|
84
|
+
|
|
85
|
+
if (topmostDirectoryName === null) {
|
|
86
|
+
const name = path, ///
|
|
87
|
+
dragEntryItem = this.findDragEntryItem(name);
|
|
88
|
+
|
|
89
|
+
if (dragEntryItem !== null) {
|
|
90
|
+
dragEntryItem.select();
|
|
91
|
+
}
|
|
92
|
+
} else {
|
|
93
|
+
let topmostDirectoryNameDragEntryItem = this.findDirectoryNameDragEntryItem(topmostDirectoryName);
|
|
94
|
+
|
|
95
|
+
if (topmostDirectoryNameDragEntryItem !== null) {
|
|
96
|
+
const filePathWithoutTopmostDirectoryName = pathWithoutTopmostDirectoryNameFromPath(path);
|
|
97
|
+
|
|
98
|
+
path = filePathWithoutTopmostDirectoryName; ///
|
|
99
|
+
|
|
100
|
+
topmostDirectoryNameDragEntryItem.expand();
|
|
101
|
+
|
|
102
|
+
topmostDirectoryNameDragEntryItem.selectPath(path);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
81
107
|
addFilePath(filePath) {
|
|
82
108
|
let fileNameDragEntryItem;
|
|
83
109
|
|
|
@@ -149,6 +175,14 @@ class EntriesList extends Element {
|
|
|
149
175
|
this.removeEntryItems();
|
|
150
176
|
}
|
|
151
177
|
|
|
178
|
+
deselectAllPaths() {
|
|
179
|
+
const dragEntryItems = this.retrieveDragEntryItems();
|
|
180
|
+
|
|
181
|
+
dragEntryItems.forEach((dragEntryItem) => {
|
|
182
|
+
dragEntryItem.deselect();
|
|
183
|
+
});
|
|
184
|
+
}
|
|
185
|
+
|
|
152
186
|
addDirectoryPath(directoryPath, collapsed = true) {
|
|
153
187
|
let directoryNameDragEntryItem;
|
|
154
188
|
|
|
@@ -413,22 +447,37 @@ class EntriesList extends Element {
|
|
|
413
447
|
|
|
414
448
|
findEntryItemByTypes(callback, ...types) {
|
|
415
449
|
const entryItems = this.getEntryItems(),
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
450
|
+
entryItem = entryItems.find((entryItem) => {
|
|
451
|
+
const entryItemType = entryItem.getType(),
|
|
452
|
+
typesIncludesEntryItemType = types.includes(entryItemType);
|
|
419
453
|
|
|
420
|
-
|
|
421
|
-
|
|
454
|
+
if (typesIncludesEntryItemType) {
|
|
455
|
+
const result = callback(entryItem);
|
|
422
456
|
|
|
423
|
-
|
|
424
|
-
|
|
457
|
+
if (result) {
|
|
458
|
+
return true;
|
|
459
|
+
}
|
|
425
460
|
}
|
|
426
|
-
}
|
|
427
|
-
}) || null; ///;
|
|
461
|
+
}) || null; ///;
|
|
428
462
|
|
|
429
463
|
return entryItem;
|
|
430
464
|
}
|
|
431
465
|
|
|
466
|
+
findEntryItemsByTypes(...types) {
|
|
467
|
+
const entryItems = this.getEntryItems();
|
|
468
|
+
|
|
469
|
+
filter(entryItems, (entryItem) => {
|
|
470
|
+
const entryItemType = entryItem.getType(),
|
|
471
|
+
typesIncludesEntryItemType = types.includes(entryItemType);
|
|
472
|
+
|
|
473
|
+
if (typesIncludesEntryItemType) {
|
|
474
|
+
return true;
|
|
475
|
+
}
|
|
476
|
+
});
|
|
477
|
+
|
|
478
|
+
return entryItems;
|
|
479
|
+
}
|
|
480
|
+
|
|
432
481
|
findEntryItemByNameAndTypes(name, ...types) {
|
|
433
482
|
const entryItem = this.findEntryItemByTypes((entryItem) => {
|
|
434
483
|
const entryItemName = entryItem.getName();
|
|
@@ -441,6 +490,20 @@ class EntriesList extends Element {
|
|
|
441
490
|
return entryItem;
|
|
442
491
|
}
|
|
443
492
|
|
|
493
|
+
findDragEntryItem(name) {
|
|
494
|
+
const entryItem = this.findEntryItemByNameAndTypes(name, FILE_NAME_DRAG_ENTRY_TYPE, DIRECTORY_NAME_DRAG_ENTRY_TYPE),
|
|
495
|
+
dragEntryItem = entryItem; ///
|
|
496
|
+
|
|
497
|
+
return dragEntryItem;
|
|
498
|
+
}
|
|
499
|
+
|
|
500
|
+
findDragEntryItems() {
|
|
501
|
+
const entryItems = this.findEntryItemsByTypes(FILE_NAME_DRAG_ENTRY_TYPE, DIRECTORY_NAME_DRAG_ENTRY_TYPE),
|
|
502
|
+
dragEntryItems = entryItems; ///
|
|
503
|
+
|
|
504
|
+
return dragEntryItems;
|
|
505
|
+
}
|
|
506
|
+
|
|
444
507
|
findFileNameDragEntryItem(fileName) {
|
|
445
508
|
const name = fileName, ///
|
|
446
509
|
entryItem = this.findEntryItemByNameAndTypes(name, FILE_NAME_DRAG_ENTRY_TYPE),
|
|
@@ -506,10 +569,12 @@ class EntriesList extends Element {
|
|
|
506
569
|
isEntriesListCollapsed = this.isCollapsed.bind(this), ///
|
|
507
570
|
isEmpty = this.isEmpty.bind(this),
|
|
508
571
|
addMarker = this.addMarker.bind(this),
|
|
572
|
+
selectPath = this.selectPath.bind(this),
|
|
509
573
|
addFilePath = this.addFilePath.bind(this),
|
|
510
574
|
removeMarker = this.removeMarker.bind(this),
|
|
511
575
|
removeFilePath = this.removeFilePath.bind(this),
|
|
512
576
|
removeAllPaths = this.removeAllPaths.bind(this),
|
|
577
|
+
deselectAllPaths = this.deselectAllPaths.bind(this),
|
|
513
578
|
addDirectoryPath = this.addDirectoryPath.bind(this),
|
|
514
579
|
removeDirectoryPath = this.removeDirectoryPath.bind(this),
|
|
515
580
|
forEachDragEntryItem = this.forEachDragEntryItem.bind(this),
|
|
@@ -522,10 +587,12 @@ class EntriesList extends Element {
|
|
|
522
587
|
isEntriesListCollapsed,
|
|
523
588
|
isEmpty,
|
|
524
589
|
addMarker,
|
|
590
|
+
selectPath,
|
|
525
591
|
addFilePath,
|
|
526
592
|
removeMarker,
|
|
527
593
|
removeFilePath,
|
|
528
594
|
removeAllPaths,
|
|
595
|
+
deselectAllPaths,
|
|
529
596
|
addDirectoryPath,
|
|
530
597
|
removeDirectoryPath,
|
|
531
598
|
forEachDragEntryItem,
|
package/src/rubbishBin.js
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
import withStyle from "easy-with-style"; ///
|
|
4
4
|
|
|
5
|
+
import { Element } from "easy";
|
|
5
6
|
import { dropMixins } from "easy-drag-and-drop";
|
|
6
|
-
import { Element, eventTypes } from "easy";
|
|
7
7
|
import { asynchronousUtilities } from "necessary";
|
|
8
8
|
|
|
9
9
|
import DragEntryItem from "./item/entry/drag";
|
|
@@ -12,12 +12,12 @@ import ClosedRubbishBinSVG from "./svg/rubbishBin/closed";
|
|
|
12
12
|
import FileNameMarkerEntryItem from "./item/entry/marker/fileName";
|
|
13
13
|
import DirectoryNameMarkerEntryItem from "./item/entry/marker/directoryName";
|
|
14
14
|
|
|
15
|
+
import { REMOVE_EVENT_TYPE } from "./eventTypes";
|
|
15
16
|
import { nonNullPathFromName } from "./utilities/pathMap";
|
|
16
17
|
import { sourceEntryPathFromDragEntryItemPath } from "./utilities/pathMap";
|
|
17
18
|
import { DIRECTORY_NAME_DRAG_ENTRY_TYPE, FILE_NAME_DRAG_ENTRY_TYPE } from "./entryTypes";
|
|
18
19
|
|
|
19
|
-
const { forEach } = asynchronousUtilities
|
|
20
|
-
{ REMOVE_EVENT_TYPE } = eventTypes;
|
|
20
|
+
const { forEach } = asynchronousUtilities;
|
|
21
21
|
|
|
22
22
|
class RubbishBin extends Element {
|
|
23
23
|
dropHandler = (dragElement, aborted, element, done) => {
|
|
@@ -259,9 +259,9 @@ class RubbishBin extends Element {
|
|
|
259
259
|
|
|
260
260
|
this.enableDrop();
|
|
261
261
|
|
|
262
|
-
this.onDrop(this.dropHandler
|
|
262
|
+
this.onDrop(this.dropHandler);
|
|
263
263
|
|
|
264
|
-
this.onDragOver(this.dragOverHandler
|
|
264
|
+
this.onDragOver(this.dragOverHandler);
|
|
265
265
|
|
|
266
266
|
removeHandler && this.onRemove(removeHandler);
|
|
267
267
|
|
|
@@ -274,9 +274,9 @@ class RubbishBin extends Element {
|
|
|
274
274
|
|
|
275
275
|
this.disableDrop();
|
|
276
276
|
|
|
277
|
-
this.offDrop(this.dropHandler
|
|
277
|
+
this.offDrop(this.dropHandler);
|
|
278
278
|
|
|
279
|
-
this.offDragOver(this.dragOverHandler
|
|
279
|
+
this.offDragOver(this.dragOverHandler);
|
|
280
280
|
|
|
281
281
|
removeHandler && this.offRemove(removeHandler);
|
|
282
282
|
}
|
package/src/svg/directoryName.js
CHANGED