tandem-front-end
Version:
Visual editor for web components
174 lines • 11.5 kB
JavaScript
;
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
t[p[i]] = s[p[i]];
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
require("./index.scss");
var React = require("react");
var cx = require("classnames");
var lodash_1 = require("lodash");
var recompose_1 = require("recompose");
var tandem_common_1 = require("tandem-common");
var react_dnd_1 = require("react-dnd");
var focus_1 = require("../focus");
var DEFAULT_NODE_EXPAND_ATTRIBUTE = function (node) { return node.expanded; };
var DEFAULT_NODE_LABEL_ATTRIBUTE = function (node) { return node.label; };
var DEFAULT_NODE_EDITING_LABEL_ATTRIBUTE = function (node) { return node.editingLabel; };
exports.defaultChildRender = function (Base) { return function (_a) {
var node = _a.node, hoveringNodeIds = _a.hoveringNodeIds, selectedNodeIds = _a.selectedNodeIds, depth = _a.depth, dispatch = _a.dispatch, rest = __rest(_a, ["node", "hoveringNodeIds", "selectedNodeIds", "depth", "dispatch"]);
return node.children.map(function (child) {
return (React.createElement(Base, __assign({ hoveringNodeIds: hoveringNodeIds, selectedNodeIds: selectedNodeIds, key: child.id, node: child, depth: depth + 1, dispatch: dispatch }, rest)));
});
}; };
var defaultLayerRenderer = function (Base) { return function (props) { return React.createElement(Base, props); }; };
var defaultShowChildren = function (node) { return node.children.length; };
exports.createTreeLayerComponents = function (_a) {
var _b = _a.attributeOptions, _c = _b === void 0 ? {} : _b, _d = _c.nodeLabelAttr, nodeLabelAttr = _d === void 0 ? DEFAULT_NODE_LABEL_ATTRIBUTE : _d, _e = _c.expandAttr, expandAttr = _e === void 0 ? DEFAULT_NODE_EXPAND_ATTRIBUTE : _e, _f = _c.editingLabelAttr, editingLabelAttr = _f === void 0 ? DEFAULT_NODE_EDITING_LABEL_ATTRIBUTE : _f, _g = _a.childRenderer, childRenderer = _g === void 0 ? exports.defaultChildRender : _g, _h = _a.hasChildren, hasChildren = _h === void 0 ? defaultShowChildren : _h, _j = _a.layerRenderer, layerRenderer = _j === void 0 ? defaultLayerRenderer : _j, _k = _a.canDrop, canDrop = _k === void 0 ? function () { return true; } : _k, _l = _a.canDrag, canDrag = _l === void 0 ? function () { return true; } : _l, _m = _a.getLabelProps, getLabelProps = _m === void 0 ? lodash_1.identity : _m, _o = _a.depthOffset, depthOffset = _o === void 0 ? 30 : _o, _p = _a.actionCreators, treeLayerDroppedNode = _p.treeLayerDroppedNode, treeLayerMouseOver = _p.treeLayerMouseOver, treeLayerEditLabelBlur = _p.treeLayerEditLabelBlur, treeLayerLabelChanged = _p.treeLayerLabelChanged, treeLayerClick = _p.treeLayerClick, treeLayerDoubleClick = _p.treeLayerDoubleClick, treeLayerMouseOut = _p.treeLayerMouseOut, treeLayerExpandToggleClick = _p.treeLayerExpandToggleClick, dragType = _a.dragType, _q = _a.reorganizable, reorganizable = _q === void 0 ? true : _q;
var DRAG_TYPE = dragType;
var DEPTH_PADDING = 8;
var DEPTH_OFFSET = depthOffset;
var renderChildren;
var BaseInsertComponent = function (_a) {
var depth = _a.depth, isOver = _a.isOver, canDrop = _a.canDrop, connectDropTarget = _a.connectDropTarget;
var style = {
width: "calc(100% - " + (DEPTH_OFFSET + depth * DEPTH_PADDING) + "px)"
};
return connectDropTarget(React.createElement("div", { style: style, className: cx("insert-line", { hovering: isOver && canDrop }) }));
};
var withNodeDropTarget = function (offset) {
return react_dnd_1.DropTarget(DRAG_TYPE, {
canDrop: function (props, monitor) {
var draggingNode = monitor.getItem();
return (props.node.id !== draggingNode.id &&
tandem_common_1.getNestedTreeNodeById(props.node.id, draggingNode) == null &&
canDrop(draggingNode, props, offset));
},
drop: function (_a, monitor) {
var dispatch = _a.dispatch, node = _a.node;
dispatch(treeLayerDroppedNode(monitor.getItem(), node, offset));
}
}, function (connect, monitor) {
return {
connectDropTarget: connect.dropTarget(),
isOver: !!monitor.isOver(),
canDrop: !!monitor.canDrop()
};
});
};
var InsertBeforeComponent = recompose_1.compose(recompose_1.pure, withNodeDropTarget(tandem_common_1.TreeMoveOffset.BEFORE))(BaseInsertComponent);
var InsertAfterComponent = recompose_1.compose(recompose_1.pure, withNodeDropTarget(tandem_common_1.TreeMoveOffset.AFTER))(BaseInsertComponent);
var BaseTreeNodeLayerLabelComponent = function (props) {
var connectDropTarget = props.connectDropTarget, connectDragSource = props.connectDragSource, node = props.node, canDrop = props.canDrop, isOver = props.isOver, depth = props.depth, editingLabel = props.editingLabel, expanded = props.expanded, selected = props.selected, hovering = props.hovering, onLabelClick = props.onLabelClick, onLabelMouseOut = props.onLabelMouseOut, onLabelMouseOver = props.onLabelMouseOver, onLabelDoubleClick = props.onLabelDoubleClick, onLabelKeyDown = props.onLabelKeyDown, onLabelBlur = props.onLabelBlur, onExpandToggleButtonClick = props.onExpandToggleButtonClick;
var labelProps = getLabelProps({
style: {
paddingLeft: DEPTH_OFFSET + depth * DEPTH_PADDING
},
className: cx("label", { selected: selected, hovering: hovering || (isOver && canDrop) }, props)
}, props);
var label = nodeLabelAttr(node);
return connectDropTarget(connectDragSource(React.createElement("div", __assign({}, labelProps, { onMouseOver: onLabelMouseOver, onMouseOut: onLabelMouseOut, onClick: onLabelClick, onDoubleClick: onLabelDoubleClick }), editingLabel ? (React.createElement(focus_1.FocusComponent, null,
React.createElement("input", { onKeyDown: onLabelKeyDown, onBlur: onLabelBlur, defaultValue: label }))) : (React.createElement("span", null,
React.createElement("span", { onClick: onExpandToggleButtonClick }, hasChildren(node) ? (expanded ? (React.createElement("i", { className: "ion-arrow-down-b" })) : (React.createElement("i", { className: "ion-arrow-right-b" }))) : null),
label || "Untitled")))));
};
var TreeNodeLayerLabelComponent = recompose_1.compose(recompose_1.pure, recompose_1.withHandlers({
onLabelMouseOver: function (_a) {
var dispatch = _a.dispatch, document = _a.document, node = _a.node;
return function () {
treeLayerMouseOver && dispatch(treeLayerMouseOver(node));
};
},
onLabelMouseOut: function (_a) {
var dispatch = _a.dispatch, document = _a.document, node = _a.node;
return function () {
treeLayerMouseOut && dispatch(treeLayerMouseOut(node));
};
},
onLabelClick: function (_a) {
var dispatch = _a.dispatch, document = _a.document, node = _a.node;
return function (event) {
treeLayerClick && dispatch(treeLayerClick(node, event));
};
},
onLabelDoubleClick: function (_a) {
var dispatch = _a.dispatch, document = _a.document, node = _a.node;
return function () {
treeLayerDoubleClick && dispatch(treeLayerDoubleClick(node));
};
},
onExpandToggleButtonClick: function (_a) {
var dispatch = _a.dispatch, document = _a.document, node = _a.node;
return function (event) {
treeLayerExpandToggleClick &&
dispatch(treeLayerExpandToggleClick(node));
event.stopPropagation();
};
},
onLabelKeyDown: function (_a) {
var dispatch = _a.dispatch, node = _a.node;
return function (event) {
if (event.key === "Enter" && treeLayerLabelChanged) {
dispatch(treeLayerLabelChanged(event.target.value, node));
}
};
},
onLabelBlur: function (_a) {
var dispatch = _a.dispatch, node = _a.node;
return function (event) {
treeLayerEditLabelBlur && dispatch(treeLayerEditLabelBlur(node));
};
}
}), react_dnd_1.DragSource(DRAG_TYPE, {
beginDrag: function (_a) {
var node = _a.node;
return node;
},
canDrag: function (props) {
return canDrag(props);
}
}, function (connect, monitor) { return ({
connectDragSource: connect.dragSource(),
connectDragPreview: connect.dragPreview(),
isDragging: monitor.isDragging()
}); }), withNodeDropTarget(tandem_common_1.TreeMoveOffset.PREPEND))(BaseTreeNodeLayerLabelComponent);
var BaseTreeNodeLayerComponent = function (_a) {
var hoveringNodeIds = _a.hoveringNodeIds, selectedNodeIds = _a.selectedNodeIds, node = _a.node, depth = _a.depth, dispatch = _a.dispatch, root = _a.root, rest = __rest(_a, ["hoveringNodeIds", "selectedNodeIds", "node", "depth", "dispatch", "root"]);
var selected = selectedNodeIds.indexOf(node.id) !== -1;
var hovering = hoveringNodeIds.indexOf(node.id) !== -1;
var expanded = expandAttr(node);
var editingLabel = editingLabelAttr(node);
if (!root) {
root = node;
}
return (React.createElement("div", { className: "m-tree-node-layer" },
!reorganizable ? null : (React.createElement(InsertBeforeComponent, { node: node, depth: depth, root: root, dispatch: dispatch })),
React.createElement(TreeNodeLayerLabelComponent, __assign({ root: root, editingLabel: editingLabel, node: node, selected: selected, hovering: hovering, dispatch: dispatch, depth: depth, expanded: expanded }, rest)),
React.createElement("div", { className: "children" }, !node.children.length || expanded
? renderChildren(__assign({ hoveringNodeIds: hoveringNodeIds,
selectedNodeIds: selectedNodeIds,
node: node,
depth: depth,
dispatch: dispatch, root: root || node }, rest))
: null),
!reorganizable ? null : (React.createElement(InsertAfterComponent, { node: node, root: root, depth: depth, dispatch: dispatch }))));
};
var TreeNodeLayerComponent = recompose_1.compose(recompose_1.pure, layerRenderer)(BaseTreeNodeLayerComponent);
renderChildren = childRenderer(TreeNodeLayerComponent);
var RootNodeLayerComponent = recompose_1.compose(recompose_1.pure)(BaseTreeNodeLayerComponent);
return { RootNodeLayerComponent: RootNodeLayerComponent, TreeNodeLayerComponent: TreeNodeLayerComponent };
};
//# sourceMappingURL=index.js.map