tandem-front-end
Version:
Visual editor for web components
93 lines • 4.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
require("./index.scss");
var path = require("path");
var React = require("react");
var recompose_1 = require("recompose");
var pane_1 = require("../../../../pane");
var tandem_common_1 = require("tandem-common");
var actions_1 = require("../../../../../actions");
var layers_1 = require("../../../../layers");
var focus_1 = require("../../../../focus");
var BaseFileInputComponent = function (_a) {
var depth = _a.depth, onKeyDown = _a.onKeyDown;
var style = {
marginLeft: depth * 8
};
return (React.createElement("div", { style: style, className: "new-file-input" },
React.createElement(focus_1.FocusComponent, null,
React.createElement("input", { type: "text", onKeyDown: onKeyDown }))));
};
var FileInputComponent = recompose_1.compose(recompose_1.pure, recompose_1.withHandlers({
onKeyDown: function (_a) {
var dispatch = _a.dispatch;
return function (event) {
if (event.key === "Enter") {
dispatch(actions_1.fileNavigatorNewFileEntered(event.target.value));
}
};
}
}))(BaseFileInputComponent);
var TreeNodeLayerComponent = layers_1.createTreeLayerComponents({
actionCreators: {
treeLayerClick: actions_1.fileNavigatorItemClicked,
treeLayerDoubleClick: actions_1.fileNavigatorItemDoubleClicked,
treeLayerDroppedNode: actions_1.fileNavigatorDroppedItem,
treeLayerExpandToggleClick: actions_1.fileNavigatorToggleDirectoryClicked
},
dragType: "FILE",
reorganizable: false,
depthOffset: 0,
attributeOptions: {
nodeLabelAttr: function (node) { return path.basename(node.uri); },
expandAttr: function (node) { return node.expanded; }
},
hasChildren: function (node) {
return node.name === "directory";
},
childRenderer: function (Base) { return function (_a) {
var node = _a.node, hoveringNodeIds = _a.hoveringNodeIds, selectedNodeIds = _a.selectedNodeIds, depth = _a.depth, dispatch = _a.dispatch, insertFileInfo = _a.insertFileInfo;
return [
insertFileInfo != null && node.id === insertFileInfo.directoryId ? (React.createElement(FileInputComponent, { dispatch: dispatch, depth: depth })) : null
].concat(node.children.map(function (child) {
return (React.createElement(Base, { hoveringNodeIds: hoveringNodeIds, selectedNodeIds: selectedNodeIds, key: child.id, node: child, depth: depth + 1, dispatch: dispatch, insertFileInfo: insertFileInfo }));
}));
}; }
}).TreeNodeLayerComponent;
var BaseFileNavigatorHeaderComponent = function (_a) {
var onAddFileButtonClick = _a.onAddFileButtonClick, onAddDirectoryButtonClick = _a.onAddDirectoryButtonClick;
return (React.createElement("div", { className: "header" },
"Files",
" ",
React.createElement("span", { className: "controls" },
React.createElement("i", { className: "ion-document", onClick: onAddFileButtonClick }),
React.createElement("i", { className: "ion-folder", onClick: onAddDirectoryButtonClick }))));
};
var FileNavigatorHeaderComponent = BaseFileNavigatorHeaderComponent;
var BaseFileNavigatorPaneComponent = function (_a) {
var insertFileInfo = _a.insertFileInfo, selectedFileNodeIds = _a.selectedFileNodeIds, rootDirectory = _a.rootDirectory, dispatch = _a.dispatch, onAddDirectoryButtonClick = _a.onAddDirectoryButtonClick, onAddFileButtonClick = _a.onAddFileButtonClick;
if (!rootDirectory) {
return null;
}
return (React.createElement(pane_1.PaneComponent, { header: React.createElement(FileNavigatorHeaderComponent, { onAddDirectoryButtonClick: onAddDirectoryButtonClick, onAddFileButtonClick: onAddFileButtonClick }), className: "m-file-navigator-pane" },
insertFileInfo != null &&
rootDirectory.id === insertFileInfo.directoryId ? (React.createElement(FileInputComponent, { dispatch: dispatch, depth: 1 })) : null,
rootDirectory.children.map(function (file) {
return (React.createElement(TreeNodeLayerComponent, { key: file.id, insertFileInfo: insertFileInfo, hoveringNodeIds: tandem_common_1.EMPTY_ARRAY, selectedNodeIds: selectedFileNodeIds, node: file, depth: 1, dispatch: dispatch }));
})));
};
exports.FileNavigatorPaneComponent = recompose_1.compose(recompose_1.pure, recompose_1.withHandlers({
onAddDirectoryButtonClick: function (_a) {
var dispatch = _a.dispatch;
return function () {
dispatch(actions_1.fileNavigatorNewDirectoryClicked());
};
},
onAddFileButtonClick: function (_a) {
var dispatch = _a.dispatch;
return function () {
dispatch(actions_1.fileNavigatorNewFileClicked());
};
}
}))(BaseFileNavigatorPaneComponent);
//# sourceMappingURL=index.js.map