chowa
Version:
UI component library based on React
122 lines (121 loc) • 4.52 kB
JavaScript
/**
* @license chowa v1.1.3
*
* Copyright (c) Chowa Techonlogies Co.,Ltd.(http://www.chowa.cn).
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const react_dom_1 = require("react-dom");
const classnames_1 = require("classnames");
const react_dnd_1 = require("react-dnd");
const utils_1 = require("../utils");
const DragType = utils_1.preClass('tree-node');
function getDropPosition(dragOffsetY, dropOffsetY, size) {
const half = size / 2;
const selfFix = size / 5;
const offset = dropOffsetY - dragOffsetY;
if (offset < half - selfFix) {
return 'top';
}
else if (offset > half + selfFix) {
return 'bottom';
}
return 'self';
}
const sourceSpec = {
beginDrag(props) {
const { selfIndexs, node, expandIndexs, onExpandHandler } = props;
if (expandIndexs.includes(node.index)) {
onExpandHandler(node);
}
return { selfIndexs };
}
};
const sourceCollect = (connect) => {
return {
connectDragSource: connect.dragSource()
};
};
const targetSpec = {
canDrop(props, monitor) {
const item = monitor.getItem();
return !utils_1.isEqual(props.selfIndexs, item.selfIndexs);
},
hover(props, monitor, component) {
if (!props.node || !component) {
return;
}
component.setState({
dragOffset: monitor.getClientOffset()
});
},
drop(props, monitor, component) {
const dragSelfIndexs = monitor.getItem().selfIndexs;
const dropSelfIndexs = props.selfIndexs;
const { y: dragOffsetY } = monitor.getClientOffset();
const { y: dropOffsetY, height } = utils_1.doms.rect(react_dom_1.findDOMNode(component));
const dropPosition = getDropPosition(dropOffsetY, dragOffsetY, height);
props.dragSorter(dragSelfIndexs, dropSelfIndexs, dropPosition);
}
};
const targetCollect = (connect, monitor) => {
const item = monitor.getItem();
const dragSelfIndexs = item ? item.selfIndexs : undefined;
return {
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver(),
dragSelfIndexs
};
};
class TreeNodeDragWrapper extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
dragOffset: undefined,
dropPosition: undefined
};
}
componentDidUpdate(preProps, preState) {
if (preProps.isOver !== this.props.isOver
&& this.props.isOver
&& this.props.node.children.length > 0
&& !this.props.expandIndexs.includes(this.props.node.index)
&& !utils_1.isEqual(this.props.dragSelfIndexs, this.props.selfIndexs)) {
this.props.onExpandHandler(this.props.node);
}
if (this.props.isOver && this.state.dragOffset && !utils_1.isEqual(preState.dragOffset, this.state.dragOffset)) {
const { y: dragOffsetY } = this.state.dragOffset;
const { y: dropOffsetY, height } = utils_1.doms.rect(react_dom_1.findDOMNode(this));
const dropPosition = getDropPosition(dropOffsetY, dragOffsetY, height);
this.setState({ dropPosition });
}
}
render() {
const { children, connectDragSource, connectDropTarget, className, isOver, dragSelfIndexs, selfIndexs } = this.props;
const { dropPosition } = this.state;
const attr = utils_1.omitProps(this.props, [
'children',
'connectDragSource',
'connectDropTarget',
'className',
'isOver',
'node',
'dragSelfIndexs',
'selfIndexs',
'dragSorter',
'onExpandHandler',
'expandIndexs'
]);
const isSameNode = utils_1.isEqual(dragSelfIndexs, selfIndexs);
const rowClass = classnames_1.default({
[utils_1.preClass(`tree-node-drop-${dropPosition}`)]: !isSameNode && isOver,
[className]: utils_1.isExist(className)
});
return connectDropTarget(connectDragSource(React.createElement("div", Object.assign({}, attr, { className: rowClass }), children)));
}
}
exports.default = react_dnd_1.DropTarget(DragType, targetSpec, targetCollect)(react_dnd_1.DragSource(DragType, sourceSpec, sourceCollect)(TreeNodeDragWrapper));