bee-table/build/TableHeader.js

644 lines
25 KiB
JavaScript
Raw Normal View History

"use strict";
2017-01-12 08:53:51 +08:00
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _react = require("react");
2017-01-12 08:53:51 +08:00
var _react2 = _interopRequireDefault(_react);
var _propTypes = require("prop-types");
var _propTypes2 = _interopRequireDefault(_propTypes);
var _shallowequal = require("shallowequal");
2017-01-12 08:53:51 +08:00
var _shallowequal2 = _interopRequireDefault(_shallowequal);
var _throttleDebounce = require("throttle-debounce");
var _utils = require("./utils");
2018-05-11 11:30:56 +08:00
var _FilterType = require("./FilterType");
var _FilterType2 = _interopRequireDefault(_FilterType);
2017-01-12 08:53:51 +08:00
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 propTypes = {
clsPrefix: _propTypes2["default"].string,
rowStyle: _propTypes2["default"].object,
rows: _propTypes2["default"].array
2017-01-12 08:53:51 +08:00
};
var grap = 16; //偏移数值
2017-01-12 08:53:51 +08:00
var TableHeader = function (_Component) {
_inherits(TableHeader, _Component);
function TableHeader(props) {
_classCallCheck(this, TableHeader);
2018-05-11 09:29:43 +08:00
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.onDragStart = function (event, data) {
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("Text", data.key);
_this.currentObj = data;
event.dataTransfer.setDragImage(event.target, 0, 0);
_this.props.onDragStart(event, data);
};
_this.onDragOver = function (event, data) {
var dragAbleOrBordStart = _this.state.dragAbleOrBordStart;
_this.setState({
dragAbleOrBordStart: ""
});
if (!_this.currentObj || _this.currentObj.key == data.key) return;
2018-05-11 09:29:43 +08:00
event.preventDefault();
_this.props.onDragOver(event, data);
};
_this.onDragEnter = function (event, data) {
if (!_this.currentObj || _this.currentObj.key == data.key) return;
2018-05-11 09:29:43 +08:00
_this.props.onDragEnter(event, data);
};
_this.onDrop = function (event, data) {
if (!_this.currentObj || _this.currentObj.key == data.key) return;
2018-05-11 09:29:43 +08:00
_this.props.onDrop(event, data);
};
_this.onMouseOver = function (event, data) {
//如果是固定列没有拖拽功能
if (_this.border || data.fixed) return;
2018-05-11 11:30:56 +08:00
var clsPrefix = _this.props.clsPrefix;
2018-11-26 20:42:18 +08:00
if (event.target.id != 'th-online') {
event.target.className = clsPrefix + "-thead-th-drag-gap th-drag-gap-hover";
}
2018-05-11 11:30:56 +08:00
};
_this.ableOnMouseMove = function (event, data) {
var dragAbleOrBord = _this.state.dragAbleOrBord;
if (dragAbleOrBord === "borderStart" || dragAbleOrBord === "ableStart") return;
if (dragAbleOrBord === "able") return;
_this.setState({
dragAbleOrBord: "able"
});
};
_this.onMouseMove = function (event, data) {
var dragAbleOrBord = _this.state.dragAbleOrBord;
if (dragAbleOrBord === "borderStart" || dragAbleOrBord === "ableStart") return;
if (dragAbleOrBord != "border") {
_this.setState({
dragAbleOrBord: "border"
});
}
//如果是固定列没有拖拽功能
if (_this.border || data.fixed) return;
// const {clsPrefix} = this.props;
// event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`;
};
2018-05-11 11:30:56 +08:00
_this.onMouseOut = function (event, data) {
if (_this.border) return;
var clsPrefix = _this.props.clsPrefix;
2018-11-26 20:42:18 +08:00
if (event.target.id != 'th-online') {
event.target.className = clsPrefix + "-thead-th-drag-gap th-drag-gap";
}
2018-05-11 11:30:56 +08:00
};
_this.onMouseDown = function (event, data) {
var _this$state = _this.state,
dragAbleOrBord = _this$state.dragAbleOrBord,
dragAbleOrBordStart = _this$state.dragAbleOrBordStart;
_this.setState({
dragAbleOrBordStart: dragAbleOrBord === "border" ? "borderStart" : ""
});
// console.log("-改变宽-----度--",dragAbleOrBordStart);
2018-05-11 11:30:56 +08:00
_this.border = true;
var _this$props = _this.props,
clsPrefix = _this$props.clsPrefix,
contentTable = _this$props.contentTable;
2018-05-11 11:30:56 +08:00
_this.drag.initPageLeftX = event.pageX;
_this.drag.initLeft = (0, _utils.tryParseInt)(event.target.style.left);
_this.drag.x = _this.drag.initLeft;
2018-05-14 10:01:06 +08:00
_this.drag.currIndex = _this.props.rows[0].findIndex(function (da) {
return da.key == data.key;
});
var contentTableDom = document.getElementById("u-table-drag-thead-" + _this.theadKey).parentNode;
var styleWidth = contentTableDom.style.width;
if (styleWidth && (typeof styleWidth == "number" || styleWidth.includes("px"))) {
_this.contentTableWidth = parseInt(styleWidth);
} else {
_this.contentTableWidth = parseInt(contentTableDom.scrollWidth);
}
var dragColWidth = _this.drag.data[_this.drag.currIndex].width;
if (typeof dragColWidth == "string" && dragColWidth.indexOf("%") > -1) {
_this.drag.width = _this.contentTableWidth * parseInt(dragColWidth) / 100;
} else {
_this.drag.width = parseInt(_this.drag.data[_this.drag.currIndex].width);
}
2018-05-11 11:30:56 +08:00
};
_this.onMouseUp = function (event, data) {
_this.setState({
dragAbleOrBordStart: ""
});
2018-05-11 11:30:56 +08:00
_this.border = false;
var clsPrefix = _this.props.clsPrefix;
event.target.className = clsPrefix + "-thead-th-drag-gap th-drag-gap";
2018-05-14 10:01:06 +08:00
};
_this.onThMouseUp = function (event, data) {
_this.border = false;
2018-10-25 19:21:05 +08:00
var _this$props2 = _this.props,
clsPrefix = _this$props2.clsPrefix,
rows = _this$props2.rows,
columns = _this$props2.columns;
var eventDom = event.target;
var optDom = void 0;
if (eventDom.classList.contains(".th-drag-gap-hover")) {
optDom = eventDom;
} else {
optDom = eventDom.querySelector("." + clsPrefix + "-thead-th-drag-gap");
}
if (optDom) {
optDom.classList.remove("th-drag-gap-hover");
optDom.classList.add("th-drag-gap");
}
// columns[this.drag.currIndex].width = data.width;
2018-10-25 19:21:05 +08:00
//宽度拖拽后,增加回调函数,外部可以记录宽度
if (typeof _this.props.afterDragColWidth == "function" && rows && rows[0] && _this.drag.currIndex) {
_this.props.afterDragColWidth(rows[0][_this.drag.currIndex], _this.drag.currIndex);
2018-10-25 19:21:05 +08:00
}
2018-05-14 10:01:06 +08:00
};
_this.onThMouseMove = function (event, data) {
if (!_this.border) return;
//固定表头拖拽
2018-10-25 19:21:05 +08:00
var _this$props3 = _this.props,
dragborderKey = _this$props3.dragborderKey,
2018-11-22 23:09:53 +08:00
contentTable = _this$props3.contentTable,
headerScroll = _this$props3.headerScroll,
contentDomWidth = _this$props3.contentDomWidth,
scrollbarWidth = _this$props3.scrollbarWidth,
bordered = _this$props3.bordered;
2018-05-14 10:01:06 +08:00
var x = event.pageX - _this.drag.initPageLeftX + _this.drag.initLeft - 0;
var contentTableDom = document.getElementById("u-table-drag-thead-" + _this.theadKey).parentNode;
if (!_this.contentTableWidth) {
var styleWidth = contentTableDom.style.width;
if (styleWidth && (typeof styleWidth == "number" || styleWidth.includes("px"))) {
_this.contentTableWidth = parseInt(styleWidth);
} else {
_this.contentTableWidth = parseInt(contentTableDom.scrollWidth);
}
}
var newTableWidth = _this.contentTableWidth + x;
var newWidth = _this.drag.width + x;
if (newWidth < _this.props.minColumnWidth) {
//清楚样式
var moveDom = event.target.querySelector(".th-drag-gap-hover");
moveDom && moveDom.classList.remove("th-drag-gap-hover");
// event.target.classList.remove('th-drag-gap-hover');
return;
}
2018-05-14 10:01:06 +08:00
//设置hiden的left
//"u-table-drag-hide-table"
var currentHideDom = document.getElementById("u-table-drag-hide-table-" + dragborderKey).getElementsByTagName("div")[_this.drag.currIndex];
currentHideDom.style.left = _this.drag.initPageLeftX + x - grap + "px";
//获取最小宽度,不让拖动
// let minWidth = 0;
// for(let i=0;i<=this.drag.currIndex;i++){
// minWidth += this.drag.data[i].width;
// }
// //判断最小值后在赋值 todo
// let currLeft = this.drag.initPageLeftX+x-grap;
// console.log("currLeft minWidth ",currLeft + " "+minWidth);
// if(currLeft <= minWidth){
// return;
// }
// currentHideDom.style.left = currLeft+"px";
//设置当前的宽度
2018-05-14 10:01:06 +08:00
var currentData = _this.drag.data[_this.drag.currIndex];
currentData.width = newWidth;
2018-05-14 10:01:06 +08:00
var currentDom = document.getElementById("u-table-drag-thead-" + _this.theadKey).getElementsByTagName("th")[_this.drag.currIndex];
currentDom.style.width = newWidth + "px";
// this.contentTableWidth = newTableWidth;
contentTableDom.style.width = newTableWidth + "px";
2018-10-25 19:21:05 +08:00
data.width = newWidth;
2018-05-14 10:01:06 +08:00
_this.drag.x = x;
var contentColDomArr = contentTableDom.querySelectorAll("colgroup col");
contentColDomArr[_this.drag.currIndex].style.width = newWidth + "px";
//固定表头时,表头和表体分开,拖拽时表体的宽度也需要一起联动
var siblingDom = contentTableDom.parentNode.nextElementSibling;
if (siblingDom) {
var bodyTableDom = siblingDom.querySelector("table");
//2、是的话将表头对应的表格的宽度给表体对应的表格的宽度
bodyTableDom.style.width = newTableWidth + "px";
//3、对应的col也要跟这变
var colDomArr = bodyTableDom.querySelectorAll("colgroup col");
colDomArr[_this.drag.currIndex].style.width = newWidth + "px";
//4、设置overflow属性
}
2018-11-22 23:09:53 +08:00
//表头需要显示滚动条时,需兼容含有固定列
if (headerScroll) {
var showScroll = contentDomWidth - newTableWidth - scrollbarWidth;
if (bordered) {
showScroll = showScroll - 1;
}
var fixedLeftTable = contentTable.querySelector('.u-table-fixed-left .u-table-header');
var fixedRightTable = contentTable.querySelector('.u-table-fixed-rigth .u-table-header');
if (showScroll < 0) {
//找到固定列表格设置表头的marginBottom值为scrollbarWidth;
fixedLeftTable && (fixedLeftTable.style.marginBottom = scrollbarWidth + "px");
fixedRightTable && (fixedRightTable.style.marginBottom = scrollbarWidth + "px");
} else {
fixedLeftTable && (fixedLeftTable.style.marginBottom = '0px');
fixedRightTable && (fixedRightTable.style.marginBottom = '0px');
}
}
};
_this.handlerFilterTextChange = function (key, val) {
var onFilterRowsChange = _this.props.onFilterRowsChange;
if (onFilterRowsChange) {
onFilterRowsChange(key, val);
}
};
_this.handlerFilterDropChange = function (key, val) {
var onFilterRowsDropChange = _this.props.onFilterRowsDropChange;
if (onFilterRowsDropChange) {
onFilterRowsDropChange(key, val.key);
}
};
_this.filterRenderType = function (type, dataIndex, index) {
2018-10-25 19:21:05 +08:00
var _this$props4 = _this.props,
clsPrefix = _this$props4.clsPrefix,
rows = _this$props4.rows,
2018-11-01 14:35:46 +08:00
filterDelay = _this$props4.filterDelay,
locale = _this$props4.locale;
switch (type) {
//文本输入
case "text":
return _react2["default"].createElement(_FilterType2["default"], {
2018-11-01 14:35:46 +08:00
locale: locale,
rendertype: type,
clsPrefix: clsPrefix,
className: clsPrefix + " filter-text",
onChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this.handlerFilterTextChange.bind(_this, dataIndex))
// onChange={this.handlerFilterTextChange.bind(this, dataIndex)}
, onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex),
2018-11-26 20:42:18 +08:00
filterDropdown: rows[1][index]["filterdropdown"],
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
});
//数值输入
case "number":
return _react2["default"].createElement(_FilterType2["default"], {
locale: locale,
rendertype: type,
clsPrefix: clsPrefix,
className: clsPrefix + " filter-text",
onChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this.handlerFilterTextChange.bind(_this, dataIndex)),
onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex),
filterDropdown: rows[1][index]["filterdropdown"],
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
});
//下拉框选择
case "dropdown":
var selectDataSource = [];
if (rows.length > 0 && (rows[1][index]["filterdropdownauto"] || "auto") == "auto") {
var hash = {};
//处理下拉重复对象组装dropdown
selectDataSource = Array.from(rows[1][0].datasource, function (x) {
return {
key: x[dataIndex],
value: x[dataIndex]
};
});
selectDataSource = selectDataSource.reduceRight(function (item, next) {
hash[next.key] ? "" : hash[next.key] = true && item.push(next);
return item;
}, []);
2018-10-11 22:53:27 +08:00
} else {
selectDataSource = rows[1][index]["filterdropdowndata"];
}
return _react2["default"].createElement(_FilterType2["default"], {
2018-11-01 14:35:46 +08:00
locale: locale,
rendertype: type,
className: clsPrefix + " filter-dropdown",
data: selectDataSource,
onChange: _this.handlerFilterTextChange.bind(_this, dataIndex),
onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex),
filterDropdown: rows[1][index]["filterdropdown"],
2018-11-26 20:42:18 +08:00
onFocus: rows[1][index]["filterdropdownfocus"],
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
});
//日期
case "date":
return _react2["default"].createElement(_FilterType2["default"], {
2018-11-01 14:35:46 +08:00
locale: locale,
rendertype: type,
className: "filter-date",
onClick: function onClick() {},
format: rows[1][index]["format"] || "YYYY-MM-DD",
onChange: _this.handlerFilterTextChange.bind(_this, dataIndex),
onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex),
2018-11-26 20:42:18 +08:00
filterDropdown: rows[1][index]["filterdropdown"],
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
});
default:
//不匹配类型默认文本输入
return _react2["default"].createElement("div", null);
}
2018-05-11 11:30:56 +08:00
};
2018-05-11 09:29:43 +08:00
_this.currentObj = null;
2018-05-14 10:01:06 +08:00
_this.state = {
border: false,
dragAbleOrBord: props.draggable ? "able" : "", //border 拖拽列宽able 交换列,
dragAbleOrBordStart: "" // borderStart 开始拖拽宽度 ableStart 开始交换列
// draggable:props.draggable?props.draggable:false,
};
//拖拽宽度处理
if (!props.dragborder) return _possibleConstructorReturn(_this);
2018-05-11 11:30:56 +08:00
_this.border = false;
2018-05-14 10:01:06 +08:00
_this.theadKey = new Date().getTime();
2018-05-11 11:30:56 +08:00
_this.drag = {
initPageLeftX: 0,
initLeft: 0,
2018-05-14 10:01:06 +08:00
x: 0,
width: 0
};
// let _da = {};
// Object.assign(_da,this.props.rows[0]);
// this.drag.data = JSON.parse(JSON.stringify(this.props.rows[0]));
// let a = this.props.rows[0];
var _row = [];
2018-10-11 22:53:27 +08:00
_this.props.rows[0] && _this.props.rows[0].forEach(function (item) {
var newItem = item.key != "checkbox" ? (0, _utils.ObjectAssign)(item) : item;
_row.push(newItem);
});
_this.drag.data = _row; //JSON.parse(JSON.stringify(this.props.rows[0]));
2018-05-11 09:29:43 +08:00
return _this;
2017-01-12 08:53:51 +08:00
}
TableHeader.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
if (this.props.draggable != nextProps.draggable) {
this.setState({
dragAbleOrBord: nextProps.draggable ? "able" : "" //border 拖拽列宽able 交换列
// draggable:nextProps.draggable,
});
}
if (this.props.dragborder != nextProps.dragborder) {
this.setState({
dragAbleOrBord: nextProps.dragborder ? "border" : "" //border 拖拽列宽able 交换列
});
}
2017-01-12 08:53:51 +08:00
};
// shouldComponentUpdate(nextProps) {
// return !shallowequal(nextProps, this.props);
// }
/**
* @description 过滤输入后的回调函数
*/
/**
* @description 过滤输入后的回调函数
*/
/**
* @description 过滤渲染的组件类型
*/
2017-01-12 08:53:51 +08:00
TableHeader.prototype.render = function render() {
2018-11-21 22:38:32 +08:00
var _this2 = this;
2018-05-11 09:29:43 +08:00
var _state = this.state,
dragAbleOrBord = _state.dragAbleOrBord,
dragAbleOrBordStart = _state.dragAbleOrBordStart;
2017-01-12 08:53:51 +08:00
var _props = this.props,
clsPrefix = _props.clsPrefix,
rowStyle = _props.rowStyle,
2018-05-11 09:29:43 +08:00
onDragStart = _props.onDragStart,
onDragOver = _props.onDragOver,
onDrop = _props.onDrop,
draggable = _props.draggable,
dragborder = _props.dragborder,
2018-05-11 09:29:43 +08:00
rows = _props.rows,
filterable = _props.filterable,
onFilterRowsChange = _props.onFilterRowsChange,
2018-05-11 09:29:43 +08:00
onMouseDown = _props.onMouseDown,
onMouseMove = _props.onMouseMove,
onMouseUp = _props.onMouseUp,
onMouseOut = _props.onMouseOut,
contentWidthDiff = _props.contentWidthDiff,
2018-09-13 10:28:28 +08:00
fixed = _props.fixed,
2018-11-21 22:38:32 +08:00
lastShowIndex = _props.lastShowIndex,
contentTable = _props.contentTable;
2017-01-12 08:53:51 +08:00
var attr = dragborder ? { id: "u-table-drag-thead-" + this.theadKey } : {};
2017-01-12 08:53:51 +08:00
return _react2["default"].createElement(
"thead",
_extends({ className: clsPrefix + "-thead" }, attr),
2017-01-12 08:53:51 +08:00
rows.map(function (row, index) {
return _react2["default"].createElement(
"tr",
{ key: index, style: rowStyle, className: filterable && index == rows.length - 1 ? 'filterable' : '' },
row.map(function (da, i, arr) {
var thHover = da.drgHover ? " " + clsPrefix + "-thead th-drag-hover" : "";
delete da.drgHover;
var fixedStyle = "";
var canDotDrag = "";
if (!fixed && da.fixed) {
fixedStyle = clsPrefix + "-row-fixed-columns-in-body";
}
2018-11-21 22:38:32 +08:00
if (typeof da.width == "string" && da.width.indexOf("%") > -1 && _this2.props.contentWidth) {
da.width = parseInt(_this2.props.contentWidth * parseInt(da.width) / 100);
} else if (da.width) {
da.width = parseInt(da.width);
}
2018-09-13 10:28:28 +08:00
if (lastShowIndex == i) {
da.width = parseInt(da.width) + contentWidthDiff;
canDotDrag = "th-can-not-drag";
}
2018-10-11 14:12:19 +08:00
if (filterable && index == rows.length - 1) {
2018-11-21 22:38:32 +08:00
da.children = _this2.filterRenderType(da["filtertype"], da.dataindex, i);
delete da.filterdropdownfocus;
2018-10-11 14:12:19 +08:00
}
var thAbleObj = {},
thBorObj = {},
thDefaultObj = {},
thLineObj = {};
var thClassName = "" + da.className;
if (draggable || dragborder) {
if (draggable && dragAbleOrBordStart != "borderStart") {
thAbleObj = _extends({}, da, {
onDragStart: function onDragStart(e) {
2018-11-21 22:38:32 +08:00
_this2.onDragStart(e, da);
2018-05-14 10:01:06 +08:00
},
onDragOver: function onDragOver(e) {
2018-11-21 22:38:32 +08:00
_this2.onDragOver(e, da);
2018-05-14 10:01:06 +08:00
},
onDrop: function onDrop(e) {
2018-11-21 22:38:32 +08:00
_this2.onDrop(e, da);
2018-05-11 11:30:56 +08:00
},
onDragEnter: function onDragEnter(e) {
2018-11-21 22:38:32 +08:00
_this2.onDragEnter(e, da);
2018-05-11 11:30:56 +08:00
},
onMouseMove: function onMouseMove(e) {
2018-11-21 22:38:32 +08:00
_this2.ableOnMouseMove(e, da);
2018-05-11 11:30:56 +08:00
},
onMouseDown: function onMouseDown(e) {
//避免表头其他元素对其影响
2018-11-21 22:38:32 +08:00
var filterDom = contentTable.querySelector('.filterable');
//是否是过滤行元素,是的话不触发
var isFilterDom = filterDom ? filterDom.contains(e.target) : false;
if (e.target.classList.contains('uf') || isFilterDom) {
return;
}
if (e.target.classList.contains('uf')) {
return;
}
2018-11-21 22:38:32 +08:00
var _state2 = _this2.state,
dragAbleOrBord = _state2.dragAbleOrBord,
dragAbleOrBordStart = _state2.dragAbleOrBordStart;
2018-11-21 22:38:32 +08:00
_this2.setState({
dragAbleOrBordStart: dragAbleOrBord === "able" ? "ableStart" : ""
});
2018-05-11 11:30:56 +08:00
},
draggable: draggable,
// className:thObj.className+`${clsPrefix}-thead th-drag ${thHover}`,
key: da.key
});
thClassName += clsPrefix + "-thead th-drag " + thHover + " ";
}
// if (dragborder && dragAbleOrBord === "border") {
if (dragborder && dragAbleOrBordStart != "ableStart") {
thBorObj.style = { 'width': da.width
// thObj.className= thObj.className+`${clsPrefix}-thead-th ${canDotDrag}`,
};thBorObj.onMouseMove = function (e) {
if (draggable) {
2018-11-21 22:38:32 +08:00
_this2.ableOnMouseMove(e, da);
}
2018-11-21 22:38:32 +08:00
_this2.onThMouseMove(e, da);
};
thBorObj.onMouseUp = function (e) {
2018-11-21 22:38:32 +08:00
_this2.onThMouseUp(e, da);
};
thClassName += clsPrefix + "-thead-th " + canDotDrag;
thBorObj.style = { width: da.width
// key:i
};
}
// thObj.className = thObj.className+`${fixedStyle}`;
thClassName += "" + fixedStyle;
if (!da.fixed) {
thLineObj = {
2018-11-26 20:42:18 +08:00
//----------------
onMouseMove: function onMouseMove(e) {
2018-11-21 22:38:32 +08:00
e.stopPropagation();_this2.onMouseMove(e, da);
2018-05-11 11:30:56 +08:00
},
onMouseOut: function onMouseOut(e) {
2018-11-21 22:38:32 +08:00
_this2.onMouseOut(e, da);
},
onMouseDown: function onMouseDown(e) {
2018-11-21 22:38:32 +08:00
e.stopPropagation();_this2.onMouseDown(e, da);
},
onMouseUp: function onMouseUp(e) {
2018-11-21 22:38:32 +08:00
_this2.onMouseUp(e, da);
},
onMouseOver: function onMouseOver(e) {
2018-11-21 22:38:32 +08:00
_this2.onMouseOver(e, da);
},
2018-11-26 20:42:18 +08:00
className: clsPrefix + "-thead-th-drag-gap th-drag-gap"
};
}
return _react2["default"].createElement(
"th",
_extends({ key: Math.random() }, thAbleObj, thBorObj, { className: thClassName }),
da.children,
2018-11-26 20:42:18 +08:00
da.fixed ? "" : _react2["default"].createElement(
"div",
_extends({ ref: function ref(el) {
return _this2.gap = el;
} }, thLineObj),
_react2["default"].createElement("div", { id: "th-online", className: "online" })
)
2018-05-11 11:30:56 +08:00
);
2018-05-11 09:29:43 +08:00
} else {
thDefaultObj = _extends({}, da, {
className: da.className + " " + fixedStyle,
key: i
});
da.onClick ? thDefaultObj.onClick = function (e) {
da.onClick(da, e);
} : "";
return _react2["default"].createElement("th", thDefaultObj);
2018-05-11 09:29:43 +08:00
}
2017-01-12 08:53:51 +08:00
})
);
})
);
};
return TableHeader;
}(_react.Component);
TableHeader.defaultProps = {
contentWidthDiff: 0
};
2017-01-12 08:53:51 +08:00
TableHeader.propTypes = propTypes;
exports["default"] = TableHeader;
module.exports = exports["default"];