bee-table
Version:
Table ui component for react
206 lines (169 loc) • 8.53 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _reactDom = require("react-dom");
var _propTypes = require("prop-types");
var _propTypes2 = _interopRequireDefault(_propTypes);
var _utils = require("./lib/utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
//拖拽的尺表线
var DragResizerLine = function (_Component) {
_inherits(DragResizerLine, _Component);
function DragResizerLine(props) {
_classCallCheck(this, DragResizerLine);
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.handleResizerMove = function (event) {
var _this$props = _this.props,
visible = _this$props.visible,
left = _this$props.left,
dataSource = _this$props.dataSource,
onChange = _this$props.onChange,
defaultWidth = _this$props.defaultWidth,
minWidth = _this$props.minWidth;
var _this$state = _this.state,
x = _this$state.x,
moveX = _this$state.moveX;
// console.log(`AAA---resizer--line--move`,event)
if (visible) {
var newmoveX = moveX + (event.clientX - x); //计算出移动的距离，向左移动则值小于0，右右移动则值大于0
// console.log(`AAA---resizer--line--移动距离：${newmoveX}`)
if (defaultWidth + newmoveX < minWidth) {
newmoveX = minWidth - defaultWidth;
}
_this.setState({
left: left + newmoveX,
x: event.clientX,
moveX: newmoveX
});
onChange && onChange(event, moveX, dataSource);
_utils.Event.stopPropagation(event);
}
};
_this.handleResizerDown = function (event) {
// console.log(`AAA---resizer--line--down`,event)
var visible = _this.props.visible;
if (visible) {
// console.log(`AAA---resizer--line--down-finish`,event)
_this.setState({ moveX: 0, x: event.clientX });
_utils.Event.stopPropagation(event);
}
};
_this.handleResizerUp = function (event) {
var _this$props2 = _this.props,
visible = _this$props2.visible,
dataSource = _this$props2.dataSource,
onResizeEnd = _this$props2.onResizeEnd;
var moveX = _this.state.moveX;
if (visible) {
// console.log(`AAA---resizer--line--up`,event)
onResizeEnd && onResizeEnd(event, moveX, dataSource);
}
};
_this.handleResizerCancel = function (event) {
var _this$props3 = _this.props,
visible = _this$props3.visible,
dataSource = _this$props3.dataSource,
onResizeCancel = _this$props3.onResizeCancel;
if (visible) {
onResizeCancel && onResizeCancel(event, 0, dataSource);
}
};
_this.state = {
left: props.left
// width: props.width||0
};
return _this;
}
DragResizerLine.prototype.componentDidMount = function componentDidMount() {
this.initEvent(this.props.container);
};
DragResizerLine.prototype.componentWillUnmount = function componentWillUnmount() {
this.removeEvent(this.props.container);
};
//初始化事件
DragResizerLine.prototype.initEvent = function initEvent(container) {
// console.log("AAA---Line--->initEvent",container);
if (container) {
var domElem = (0, _reactDom.findDOMNode)(container);
_utils.Event.addHandler(domElem, 'mousedown', this.handleResizerDown);
_utils.Event.addHandler(domElem, 'mousemove', this.handleResizerMove);
_utils.Event.addHandler(domElem, 'mouseup', this.handleResizerUp);
if (domElem !== document.body) {
_utils.Event.addHandler(document.body, 'mouseup', this.handleResizerCancel);
}
}
};
//移除事件
DragResizerLine.prototype.removeEvent = function removeEvent(container) {
// console.log("AAA---Line--->removeEvent",container);
if (container) {
var domElem = (0, _reactDom.findDOMNode)(container);
_utils.Event.removeHandler(domElem, 'mousedown', this.handleResizerDown);
_utils.Event.removeHandler(domElem, 'mousemove', this.handleResizerMove);
_utils.Event.removeHandler(domElem, 'mouseup', this.handleResizerUp);
if (domElem !== document.body) {
_utils.Event.removeHandler(document.body, 'mouseup', this.handleResizerCancel);
}
}
};
DragResizerLine.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
if ('left' in nextProps) {
this.setState({ left: nextProps.left });
}
};
DragResizerLine.prototype.start = function start(event) {
this.setState({ moveX: 0, x: event.clientX });
_utils.Event.stopPropagation(event);
};
DragResizerLine.prototype.render = function render() {
var _props = this.props,
clsPrefix = _props.clsPrefix,
height = _props.height,
visible = _props.visible;
var left = this.state.left;
var style = { left: left, height: height, display: visible ? 'block' : 'none' };
// console.log(`AAA---resizer--line:left${style.left}`)
return _react2["default"].createElement(
"div",
{ style: style, className: clsPrefix + "-drag-resizer" },
_react2["default"].createElement("div", { className: clsPrefix + "-drag-resizer-line" })
);
};
return DragResizerLine;
}(_react.Component);
DragResizerLine.propTypes = {
clsPrefix: _propTypes2["default"].string,
container: _propTypes2["default"].any,
dataSource: _propTypes2["default"].any,
onResizeEnd: _propTypes2["default"].func,
onResizeCancel: _propTypes2["default"].func,
onChange: _propTypes2["default"].func,
visible: _propTypes2["default"].bool,
left: _propTypes2["default"].number,
height: _propTypes2["default"].number,
defaultWidth: _propTypes2["default"].number,
minWidth: _propTypes2["default"].number
};
DragResizerLine.defaultProps = {
clsPrefix: '', //样式名前缀
container: null, //所属容器
onResizeEnd: null, //当释放resizer时出发，接收参数当前的宽度
onResizeCancel: null, //当释放resizer时在容器以外区域则触发取消回调
onChange: null, //当移动resizer时出发，接收参数相对位移
visible: false, //是否可见
left: null, //左侧距离
height: null, //高度
defaultWidth: null, //当前矩阵宽度
minWidth: null, //最小宽度
// maxWidth:null,//最大宽度
dataSource: null //当前对象信息
};
exports["default"] = DragResizerLine;
module.exports = exports["default"];