adui
Version:
<div> <img src="https://wxa.wxs.qq.com/mpweb/delivery/legacy/wxadtouch/upload/t1/od834zef_52939fc6.png" style="margin:40px 0 0 -8px; background-color: #fcfcfc; box-shadow: none;" /> </div>
1,003 lines (1,002 loc) • 251 kB
JavaScript
"use strict";
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var React = _interopRequireWildcard(require("react"));
var _reactWindow = require("react-window");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _shallowequal = _interopRequireDefault(require("shallowequal"));
var _addEventListener = _interopRequireDefault(require("rc-util/lib/Dom/addEventListener"));
var _debounce = require("debounce");
var _classnames = _interopRequireDefault(require("classnames"));
var _omit = _interopRequireDefault(require("../_util/omit"));
var _Column = _interopRequireDefault(require("./Column"));
var _affix = _interopRequireDefault(require("../affix"));
var _checkbox = _interopRequireDefault(require("../checkbox"));
var _icon = _interopRequireDefault(require("../icon"));
var _popover = _interopRequireDefault(require("../popover"));
var _radio = _interopRequireDefault(require("../radio"));
var _resizeObserver = _interopRequireDefault(require("../resize-observer"));
var _TableSort = _interopRequireDefault(require("./TableSort"));
var _TableFilter = _interopRequireDefault(require("./TableFilter"));
var _ColumnManager = _interopRequireDefault(require("./ColumnManager"));
require("./style");
var _excluded = ["rowSpan", "colSpan"],
_excluded2 = ["className", "dataSource", "emptyText", "headerAffixed", "headerAffixedOffsetTop", "headerAffixGetTarget", "headerEmphasized", "height", "loading", "size", "virtualScroll"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function _readOnlyError(r) { throw new TypeError('"' + r + '" is read-only'); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
var noop = function noop() {};
var prefix = "adui-table";
var TD_MIN_WIDTH = 100;
var SELECT_TD_WIDTH = 50;
var SELECT_AND_EXPAND_TD_WIDTH = 80;
var TD_HEIGHT = {
large: 60,
medium: 50,
mini: 40,
small: 40
};
var HORIZONTAL_ALIGN = {
center: "center",
left: "flex-start",
right: "flex-end"
};
var VERTICAL_ALIGN = {
bottom: "flex-end",
center: "center",
top: "flex-start"
};
var isFixedLeft = function isFixedLeft(col) {
return col.fixed === "left" || col.fixed === true;
};
var isFixedRight = function isFixedRight(col) {
return col.fixed === "right";
};
var Table = function (_React$Component) {
function Table(_props) {
var _this;
_classCallCheck(this, Table);
_this = _callSuper(this, Table, [_props]);
_this.combinedCellsInfo = [];
_this.affixHeader = void 0;
_this.affixScrollbar = void 0;
_this.mainTable = void 0;
_this.mainTableBody = void 0;
_this.mainThead = void 0;
_this.wrapper = void 0;
_this.virtualList = void 0;
_this.debouncedWindowResize = void 0;
_this.resizeEvent = void 0;
_this.columnManager = void 0;
_this.fixedColumnsInfosRef = [];
_this.shouldComponentUpdate = function (nextProps, nextState) {
return !(0, _shallowequal["default"])(_this.props, nextProps) || !(0, _shallowequal["default"])(_this.state, nextState);
};
_this.componentDidMount = function () {
var _this2 = _this,
columnManager = _this2.columnManager,
combinedCellsInfo = _this2.combinedCellsInfo,
debouncedWindowResize = _this2.debouncedWindowResize,
props = _this2.props;
var isAnyColumnsFixed = columnManager.isAnyColumnsFixed;
var headerAffixed = props.headerAffixed,
height = props.height,
virtualScroll = props.virtualScroll;
if (headerAffixed || height || isAnyColumnsFixed) {
_this.handleWindowResize();
_this.resizeEvent = (0, _addEventListener["default"])(window, "resize", debouncedWindowResize);
}
if (combinedCellsInfo.length) {
_this.setState({
combinedCellsInfo: combinedCellsInfo
});
}
setTimeout(function () {
var _this$virtualList;
var virtualWrapper = (_this$virtualList = _this.virtualList) === null || _this$virtualList === void 0 ? void 0 : _this$virtualList._outerRef;
if (virtualScroll && virtualWrapper) {
_this.mainThead.style.paddingRight = "14px";
virtualWrapper.addEventListener("scroll", function () {
_this.mainThead.scrollLeft = virtualWrapper.scrollLeft;
}, true);
}
}, 0);
};
_this.componentDidUpdate = function (_ref) {
var dataSourceOld = _ref.dataSource,
getCellPropsOld = _ref.getCellProps,
columnsOld = _ref.columns;
var _this$props = _this.props,
dataSource = _this$props.dataSource,
getCellProps = _this$props.getCellProps,
columns = _this$props.columns;
if (!(0, _shallowequal["default"])(dataSourceOld, dataSource)) {
setTimeout(_this.handleWindowResize, 0);
}
if (!(0, _shallowequal["default"])(columnsOld, columns)) {
columns === null || columns === void 0 || columns.forEach(function (_ref2, index) {
var dataIndex = _ref2.dataIndex,
fixed = _ref2.fixed,
width = _ref2.width;
if (typeof width === "number" && fixed) {
_this.handleThResize(columns.length, width, dataIndex, index, fixed);
}
});
}
if (!(0, _shallowequal["default"])(getCellPropsOld, getCellProps) && getCellProps) {
_this.forceUpdate();
}
};
_this.componentWillUnmount = function () {
if (_this.resizeEvent) {
_this.resizeEvent.remove();
}
if (_this.debouncedWindowResize) {
_this.debouncedWindowResize.clear();
}
};
_this.resizeColumnStart = function (e, col) {
e.stopPropagation();
document.body.style.cursor = "col-resize";
_this.setState({
currentlyResizing: {
col: col,
dataIndex: col.dataIndex,
parentWidth: e.currentTarget.parentElement && e.currentTarget.parentElement.parentElement && e.currentTarget.parentElement.parentElement.getBoundingClientRect().width,
startX: e.pageX
}
});
setTimeout(function () {
window.addEventListener("mousemove", _this.resizeColumnMoving);
window.addEventListener("mouseup", _this.resizeColumnEnd);
window.addEventListener("mouseleave", _this.resizeColumnEnd);
}, 0);
};
_this.resizeColumnMoving = function (e) {
e.stopPropagation();
var _this$state = _this.state,
resized = _this$state.resized,
currentlyResizing = _this$state.currentlyResizing;
var col = currentlyResizing.col,
dataIndex = currentlyResizing.dataIndex,
parentWidth = currentlyResizing.parentWidth,
startX = currentlyResizing.startX;
var title = col.title || "";
var baseWidth = Math.ceil(title.length > 4 ? title.length / 2 : title.length) * 13 + 2;
if (!baseWidth) {
baseWidth = 100;
}
var newResized = resized.filter(function (o) {
return o.dataIndex !== dataIndex;
});
var newWidth = Math.max(Math.ceil(parentWidth + e.pageX - startX), !!col.onSort || !!col.onFilter ? baseWidth + 36 : baseWidth + 16);
newResized.push({
dataIndex: dataIndex,
value: newWidth
});
_this.setState({
resized: newResized
});
_this.debouncedWindowResize();
};
_this.resizeColumnEnd = function (e) {
var _this3 = _this,
mainTable = _this3.mainTable;
document.body.style.cursor = "";
e.stopPropagation();
window.removeEventListener("mousemove", _this.resizeColumnMoving);
window.removeEventListener("mouseup", _this.resizeColumnEnd);
window.removeEventListener("mouseleave", _this.resizeColumnEnd);
_this.setState({
currentlyResizing: {},
isMainTableOverflowX: mainTable && mainTable.scrollWidth > mainTable.offsetWidth,
isMainTableOverflowY: mainTable && mainTable.scrollHeight > mainTable.offsetHeight,
isResizerShow: false
});
};
_this.handleWindowResize = function () {
var _this4 = _this,
columnManager = _this4.columnManager,
mainTable = _this4.mainTable,
props = _this4.props;
var isAnyColumnsFixed = columnManager.isAnyColumnsFixed;
var headerAffixed = props.headerAffixed,
height = props.height;
if ((headerAffixed || height || isAnyColumnsFixed) && mainTable) {
var oldStyle = _this.state.mainTableStyle;
var rect = mainTable.getBoundingClientRect();
var mainTableStyle = {};
mainTableStyle.left = rect.left;
mainTableStyle.width = rect.width;
if (!(0, _shallowequal["default"])(mainTableStyle, oldStyle)) {
_this.setState({
mainTableStyle: mainTableStyle
});
}
_this.setState({
isMainTableOverflowX: mainTable && mainTable.scrollWidth > mainTable.offsetWidth,
isMainTableOverflowY: mainTable && mainTable.scrollHeight > mainTable.offsetHeight
});
}
};
_this.handleMainTableScroll = function (e) {
var _this5 = _this,
affixHeader = _this5.affixHeader,
mainTable = _this5.mainTable;
var onScroll = _this.props.onScroll;
var affixedTop = _this.state.affixedTop;
if (onScroll && e) {
var target = e.target;
if (target.getAttribute("role") === "table") {
onScroll(e);
}
}
if (affixedTop && affixHeader && mainTable && affixHeader.fixedNode) {
affixHeader.fixedNode.scrollLeft = mainTable.scrollLeft;
}
_this.syncTableScrollPosition(mainTable.scrollLeft);
};
_this.syncTableScrollPosition = function (value) {
var _this6 = _this,
affixScrollbar = _this6.affixScrollbar,
mainTable = _this6.mainTable,
mainThead = _this6.mainThead;
var height = _this.props.height;
if (mainTable && affixScrollbar && affixScrollbar.fixedNode) {
if (mainTable.scrollLeft !== value) {
mainTable.scrollLeft = value;
}
if (affixScrollbar.fixedNode.scrollLeft !== value) {
affixScrollbar.fixedNode.scrollLeft = value;
}
}
if (height && mainThead) {
mainThead.scrollLeft = value;
}
};
_this.handleRowClick = function (row, i, e) {
var _this$props2 = _this.props,
expandOnRowClick = _this$props2.expandOnRowClick,
getSelectProps = _this$props2.getSelectProps,
onRowClick = _this$props2.onRowClick,
selectOnRowClick = _this$props2.selectOnRowClick;
var selectedRowKeys = _this.state.selectedRowKeys;
var key = row.key;
if (selectOnRowClick && typeof key !== "undefined" && !(getSelectProps && getSelectProps(row, i) && getSelectProps(row, i).disabled)) {
_this.handleSelect(key, !selectedRowKeys.includes(key));
}
if (expandOnRowClick) {
_this.handleExpand(key);
}
if (onRowClick) {
onRowClick(row, i, e);
}
};
_this.handleThResize = function (columnsLength, width, dataIndex, index, fixedPosition) {
var getColumns = _this.columnManager.getColumns;
var _this7 = _this,
fixedColumnsInfos = _this7.fixedColumnsInfosRef;
var columns = getColumns();
fixedColumnsInfos = fixedColumnsInfos.filter(function (o) {
return columns.find(function (p) {
return p.dataIndex === o.dataIndex && !!p.fixed;
});
});
var i = fixedColumnsInfos.findIndex(function (o) {
return o.dataIndex === dataIndex;
});
var fixed = fixedPosition === "right" ? "right" : "left";
if (i > -1) {
if (fixedColumnsInfos[i].width === width && fixedColumnsInfos[i].columnsLength === columnsLength && fixedColumnsInfos[i].index === index) {
return;
}
fixedColumnsInfos.splice(i, 1);
}
fixedColumnsInfos.push({
width: width,
dataIndex: dataIndex,
index: index,
fixed: fixed,
columnsLength: columnsLength
});
fixedColumnsInfos.sort(function (a, b) {
return a.index - b.index;
});
var fixedColumnsInfosLeft = fixedColumnsInfos.filter(function (o) {
return o.fixed === "left";
});
var fixedColumnsInfosRight = fixedColumnsInfos.filter(function (o) {
return o.fixed === "right";
}).sort(function (a, b) {
return b.index - a.index;
});
fixedColumnsInfos.forEach(function (col) {
var colIndex;
if (col.fixed === "left") {
colIndex = fixedColumnsInfosLeft.findIndex(function (o) {
return o.dataIndex === col.dataIndex;
});
if (colIndex === fixedColumnsInfosLeft.length - 1) {
col.isLastLeft = true;
} else {
col.isLastLeft = false;
}
col.offset = colIndex === -1 ? 0 : fixedColumnsInfosLeft.slice(0, colIndex).reduce(function (acc, cur) {
return acc + cur.width;
}, 0);
} else {
colIndex = fixedColumnsInfosRight.findIndex(function (o) {
return o.dataIndex === col.dataIndex;
});
if (colIndex === fixedColumnsInfosRight.length - 1) {
col.isFirstRight = true;
} else {
col.isFirstRight = false;
}
col.offset = colIndex === -1 ? 0 : fixedColumnsInfosRight.slice(0, colIndex).reduce(function (acc, cur) {
return acc + cur.width;
}, 0);
}
});
_this.fixedColumnsInfosRef = fixedColumnsInfos;
_this.setState({
fixedColumnsInfos: fixedColumnsInfos
});
};
_this.handleTheadMouseEnter = function () {
var isResizerShow = _this.state.isResizerShow;
if (!isResizerShow) {
_this.setState({
isResizerShow: true
});
}
};
_this.handleTheadMouseLeave = function () {
var currentlyResizing = _this.state.currentlyResizing;
if (Object.keys(currentlyResizing).length === 0) {
_this.setState({
isResizerShow: false
});
}
};
_this.handleExpand = function (key) {
if (typeof key === "undefined") {
return;
}
var _this$props3 = _this.props,
expandedRowKeysProp = _this$props3.expandedRowKeys,
onExpandChange = _this$props3.onExpandChange;
var expandedRowKeys = _this.state.expandedRowKeys;
var keys = _toConsumableArray(expandedRowKeys);
var index = keys.indexOf(key);
if (index > -1) {
keys.splice(index, 1);
} else {
keys.push(key);
}
if (expandedRowKeysProp === null) {
_this.setState({
expandedRowKeys: keys
});
}
if (onExpandChange) {
onExpandChange(keys);
}
};
_this.handleSelect = function (key, selected) {
var _this$props4 = _this.props,
onSelectChange = _this$props4.onSelectChange,
selectedRowKeysProp = _this$props4.selectedRowKeys,
selectMultiple = _this$props4.selectMultiple,
dataSource = _this$props4.dataSource;
var currentRow = dataSource === null || dataSource === void 0 ? void 0 : dataSource.find(function (o) {
return o.key === key;
});
if (typeof key === "undefined" || !(dataSource !== null && dataSource !== void 0 && dataSource.length) || !currentRow) {
return;
}
var selectedRowKeys = _this.state.selectedRowKeys;
var keys = _toConsumableArray(selectedRowKeys);
if (selectMultiple) {
if (selected) {
keys.push(key);
} else {
keys.splice(selectedRowKeys.indexOf(key), 1);
}
} else {
keys = [key];
}
if (selectedRowKeysProp === null) {
_this.setState({
selectedRowKeys: keys
});
}
if (onSelectChange) {
onSelectChange(keys, {
selected: !selectMultiple || selected,
currentRowKey: key,
selectedRows: dataSource.filter(function (o) {
return keys.includes(o.key);
}),
currentRow: currentRow
});
}
};
_this.handleSelectAll = function (checked) {
var _this$props5 = _this.props,
onSelectChange = _this$props5.onSelectChange,
selectedRowKeysProp = _this$props5.selectedRowKeys;
var selectedRowKeys = _this.state.selectedRowKeys;
var keys = _toConsumableArray(selectedRowKeys);
var availableKeys = _this.getAvailableRowsKeys();
if (checked) {
availableKeys.forEach(function (key) {
if (!selectedRowKeys.includes(key)) {
keys.push(key);
}
});
} else {
selectedRowKeys.forEach(function (key) {
if (availableKeys.includes(key)) {
keys.splice(keys.indexOf(key), 1);
}
});
}
if (selectedRowKeysProp === null) {
_this.setState({
selectedRowKeys: keys
});
}
if (onSelectChange) {
onSelectChange(keys);
}
};
_this.hasSelected = function (mode) {
var keys = _this.getAvailableRowsKeys();
var dataSource = _this.props.dataSource;
var selectedRowKeys = _this.state.selectedRowKeys;
if (dataSource && dataSource.length && keys.length && (mode === "all" ? keys.every(function (key) {
return selectedRowKeys.includes(key);
}) : keys.some(function (key) {
return selectedRowKeys.includes(key);
}))) {
return true;
}
return false;
};
_this.getAvailableRowsKeys = function () {
var _this$props6 = _this.props,
dataSource = _this$props6.dataSource,
getSelectProps = _this$props6.getSelectProps;
var keys = [];
if (!dataSource) {
return [];
}
dataSource.forEach(function (row, i) {
var key = row.key;
if (typeof key !== "undefined" && !(getSelectProps && getSelectProps(row, i) && getSelectProps(row, i).disabled)) {
keys.push(key);
}
});
return keys;
};
_this.generateTable = function () {
var _this$mainTable;
var _this$props7 = _this.props,
dataSource = _this$props7.dataSource,
expandIconVisible = _this$props7.expandIconVisible,
expandedRowRender = _this$props7.expandedRowRender,
expandOnRowClick = _this$props7.expandOnRowClick,
getHeadClassName = _this$props7.getHeadClassName,
getHeadStyle = _this$props7.getHeadStyle,
getRowClassName = _this$props7.getRowClassName,
getRowProps = _this$props7.getRowProps,
getRowStyle = _this$props7.getRowStyle,
getSelectProps = _this$props7.getSelectProps,
grow = _this$props7.grow,
headerAffixed = _this$props7.headerAffixed,
headerAffixedOffsetTop = _this$props7.headerAffixedOffsetTop,
headerAffixGetTarget = _this$props7.headerAffixGetTarget,
scrollXAffixedOffsetBottom = _this$props7.scrollXAffixedOffsetBottom,
height = _this$props7.height,
onExpandChange = _this$props7.onExpandChange,
onRowMouseEnter = _this$props7.onRowMouseEnter,
onRowMouseLeave = _this$props7.onRowMouseLeave,
onSelectChange = _this$props7.onSelectChange,
selectMultiple = _this$props7.selectMultiple,
selectOnRowClick = _this$props7.selectOnRowClick,
size = _this$props7.size,
verticalAlign = _this$props7.verticalAlign,
virtualListProps = _this$props7.virtualListProps,
virtualListStyle = _this$props7.virtualListStyle,
virtualScroll = _this$props7.virtualScroll;
var _this$state2 = _this.state,
affixedTop = _this$state2.affixedTop,
affixedBottom = _this$state2.affixedBottom,
expandedRowKeys = _this$state2.expandedRowKeys,
fixedColumnsInfos = _this$state2.fixedColumnsInfos,
isMainTableOverflowX = _this$state2.isMainTableOverflowX,
isMainTableOverflowY = _this$state2.isMainTableOverflowY,
mainTableStyle = _this$state2.mainTableStyle,
resized = _this$state2.resized,
selectedRowKeys = _this$state2.selectedRowKeys;
var _this$columnManager = _this.columnManager,
getColumns = _this$columnManager.getColumns,
getGroupColumnsDepth = _this$columnManager.getGroupColumnsDepth,
isAnyColumnsLeftFixed = _this$columnManager.isAnyColumnsLeftFixed;
var columns = getColumns();
var theadStyle = _objectSpread({
height: "".concat(TD_HEIGHT[size || "small"] * getGroupColumnsDepth(), "px")
}, getHeadStyle && getHeadStyle() || {});
var selectAndExpand = !!onSelectChange && !!onExpandChange;
var theadPlaceholderVisible = expandIconVisible && (!!onSelectChange || !!onExpandChange);
var thead = React.createElement("div", {
key: 0,
className: (0, _classnames["default"])("".concat(prefix, "-thead"), getHeadClassName && getHeadClassName()),
onMouseEnter: _this.handleTheadMouseEnter,
onMouseLeave: _this.handleTheadMouseLeave,
ref: _this.saveRef("mainThead"),
style: theadStyle
}, theadPlaceholderVisible && React.createElement("div", {
className: (0, _classnames["default"])("".concat(prefix, "-th"), "".concat(prefix, "-th_functional"), _defineProperty(_defineProperty({}, "".concat(prefix, "-th_left"), isAnyColumnsLeftFixed()), "".concat(prefix, "-th_functional_both"), selectAndExpand)),
key: "functional-all"
}, selectMultiple && !!onSelectChange && function () {
var hasSelectedAll = _this.hasSelected("all");
var hasSelectedOne = _this.hasSelected("one");
return React.createElement("div", {
className: "".concat(prefix, "-cell")
}, React.createElement(_checkbox["default"], {
disabled: !_this.getAvailableRowsKeys().length,
onChange: _this.handleSelectAll,
checked: hasSelectedAll,
indeterminate: !hasSelectedAll && hasSelectedOne,
className: "".concat(prefix, "-selectComponent")
}));
}()), columns.map(function (col, index) {
var _fixedColumnsInfos$fi, _fixedColumnsInfos$fi2, _fixedColumnsInfos$fi3, _fixedColumnsInfos$fi4;
var align = col.align,
dataIndex = col.dataIndex,
filters = col.filters,
fixed = col.fixed,
colGrow = col.grow,
onFilter = col.onFilter,
onSort = col.onSort,
sortOrder = col.sortOrder,
title = col.title,
width = col.width;
var isGrow = colGrow !== undefined ? colGrow : grow;
var resizedCol = resized.find(function (o) {
return o.dataIndex === dataIndex;
});
var clickable = !!onSort || sortOrder !== null && sortOrder !== undefined || !!onFilter || !!filters;
var sortableAndFilterable = (!!onSort || sortOrder !== null && sortOrder !== undefined) && (!!onFilter || !!filters);
var minWidth = 0;
if (typeof title === "string") {
minWidth = Math.ceil(title.length > 4 ? title.length / 2 : title.length) * 13 + 16;
if (clickable) {
minWidth += 20;
}
}
var flexValue;
if (typeof width === "number") {
flexValue = "".concat(width, " 0 auto");
} else if (typeof width === "string") {
if (width.length - width.lastIndexOf("px") === 2) {
flexValue = "".concat(width.slice(0, -2), " 0 auto");
} else {
flexValue = "0 0 ".concat(width);
}
} else {
flexValue = "".concat(Math.max(TD_MIN_WIDTH, minWidth), " 0 auto");
}
return React.createElement(_resizeObserver["default"], {
onResize: function onResize(_ref3) {
var widthResize = _ref3.width;
_this.handleThResize(columns.length, widthResize, dataIndex, index, fixed);
},
disabled: !fixed,
key: "".concat(dataIndex || index, "_").concat(columns.length)
}, React.createElement("div", {
className: (0, _classnames["default"])("".concat(prefix, "-th"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefix, "-th_clickable"), clickable && !sortableAndFilterable), "".concat(prefix, "-th_sortableAndFilterable"), sortableAndFilterable), "".concat(prefix, "-th_left"), isFixedLeft(col)), "".concat(prefix, "-th_right"), isFixedRight(col)), "".concat(prefix, "-th_leftLast"), (_fixedColumnsInfos$fi = fixedColumnsInfos.find(function (o) {
return o.dataIndex === dataIndex;
})) === null || _fixedColumnsInfos$fi === void 0 ? void 0 : _fixedColumnsInfos$fi.isLastLeft), "".concat(prefix, "-th_rightFirst"), (_fixedColumnsInfos$fi2 = fixedColumnsInfos.find(function (o) {
return o.dataIndex === dataIndex;
})) === null || _fixedColumnsInfos$fi2 === void 0 ? void 0 : _fixedColumnsInfos$fi2.isFirstRight)),
key: dataIndex ? "".concat(dataIndex, "_").concat(index) : index,
style: {
left: isFixedLeft(col) ? (((_fixedColumnsInfos$fi3 = fixedColumnsInfos.find(function (o) {
return o.dataIndex === dataIndex;
})) === null || _fixedColumnsInfos$fi3 === void 0 ? void 0 : _fixedColumnsInfos$fi3.offset) || 0) + (theadPlaceholderVisible ? selectAndExpand ? SELECT_AND_EXPAND_TD_WIDTH : SELECT_TD_WIDTH : 0) : undefined,
right: isFixedRight(col) ? (((_fixedColumnsInfos$fi4 = fixedColumnsInfos.find(function (o) {
return o.dataIndex === dataIndex;
})) === null || _fixedColumnsInfos$fi4 === void 0 ? void 0 : _fixedColumnsInfos$fi4.offset) || 0) + (isMainTableOverflowY && height ? 14 : 0) : undefined,
flex: resizedCol ? "".concat(resizedCol.value, " 0 auto") : flexValue,
maxWidth: isGrow ? undefined : resizedCol ? resizedCol.value : width || "",
textAlign: align || undefined,
width: resizedCol ? resizedCol.value : width || Math.max(TD_MIN_WIDTH, minWidth)
},
"data-column": index,
"data-column-key": dataIndex ? "".concat(dataIndex, "_").concat(index) : index
}, _this.generateThCell(col, {
index: index,
columns: columns
}), col.children && React.createElement("div", {
className: "".concat(prefix, "-thGroup")
}, col.children.map(function (childCol, childColIndex) {
return React.createElement("div", {
className: (0, _classnames["default"])("".concat(prefix, "-th"), _defineProperty({}, "".concat(prefix, "-th_clickable"), !!childCol.onSort || childCol.sortOrder !== null && childCol.sortOrder !== undefined || !!childCol.onFilter || !!childCol.filters)),
key: childCol.dataIndex || childColIndex,
style: {
flex: "100 0 auto",
width: "100px",
textAlign: childCol.align || undefined
}
}, _this.generateThCell(childCol), childCol.children && React.createElement("div", {
className: "".concat(prefix, "-thGroup")
}, childCol.children.map(function (grandCol, grandColIndex) {
return React.createElement("div", {
className: (0, _classnames["default"])("".concat(prefix, "-th"), _defineProperty({}, "".concat(prefix, "-th_clickable"), !!grandCol.onSort || grandCol.sortOrder !== null && grandCol.sortOrder !== undefined || !!grandCol.onFilter || !!grandCol.filters)),
key: grandCol.dataIndex || grandColIndex,
style: {
flex: "100 0 auto",
width: "100px",
textAlign: grandCol.align || undefined
}
}, _this.generateThCell(grandCol));
})));
}))));
}));
var generateTrs = function generateTrs(row, rowIndex, style) {
var _selectPropsGetted$po;
var key = row.key;
var colArray = [];
var selectPropsGetted = getSelectProps && getSelectProps(row, rowIndex);
var allSelectProps = _objectSpread({
checked: selectedRowKeys.includes(key),
className: "".concat(prefix, "-selectComponent"),
onChange: function onChange(checked) {
return _this.handleSelect(key, checked);
},
onClick: function onClick(e) {
return e.stopPropagation();
}
}, selectPropsGetted || {});
var selectProps = (0, _omit["default"])(allSelectProps, ["popoverProps"]);
var selectContent = selectMultiple ? React.createElement(_checkbox["default"], selectProps) : React.createElement(_radio["default"], selectProps);
var expandContent = React.createElement("div", {
className: "".concat(prefix, "-selectComponent"),
style: {
cursor: "pointer"
},
onClick: function onClick() {
return _this.handleExpand(key);
},
role: "none"
}, React.createElement(_icon["default"], {
className: "".concat(prefix, "-expandIcon"),
icon: "arrow-down"
}));
var selectCell = onExpandChange ? expandContent : selectContent;
if (selectAndExpand) {
selectCell = React.createElement("div", {
className: "".concat(prefix, "-selectComponent-wrapper")
}, selectContent, expandContent);
}
var _generateTr = function generateTr(columnsParam, parentIndex) {
columnsParam.forEach(function (col, colIndexParam) {
var colIndex = colIndexParam;
if (parentIndex) {
for (var i = 0; i < parentIndex; i += 1) {
var _columns$i$children;
var childrenCount = ((_columns$i$children = columns[i].children) === null || _columns$i$children === void 0 ? void 0 : _columns$i$children.length) || 1;
if (childrenCount) {
colIndex += childrenCount;
}
}
}
if (!col.children) {
colArray.push(_this.generateTbodyCell(row, col, rowIndex, colIndex));
} else {
_generateTr(col.children, colIndexParam);
}
});
};
_generateTr(columns);
var tr = React.createElement("div", _extends({
className: (0, _classnames["default"])("".concat(prefix, "-tr"), getRowClassName && getRowClassName(row, rowIndex), _defineProperty(_defineProperty(_defineProperty({}, "".concat(prefix, "-tr_clickable"), expandOnRowClick || selectOnRowClick), "".concat(prefix, "-tr_expanded"), expandedRowKeys.includes(key)), "".concat(prefix, "-tr_selected"), selectedRowKeys.includes(key))),
key: key !== undefined ? key : rowIndex,
role: "row",
"data-row": rowIndex,
onMouseEnter: onRowMouseEnter ? function (e) {
return onRowMouseEnter(row, rowIndex, e);
} : undefined,
onMouseLeave: onRowMouseLeave ? function (e) {
return onRowMouseLeave(row, rowIndex, e);
} : undefined,
onClick: function onClick(e) {
return _this.handleRowClick(row, rowIndex, e);
},
onKeyDown: noop,
style: _objectSpread(_objectSpread({}, getRowStyle && getRowStyle(row, rowIndex) || {}), style || {})
}, (0, _omit["default"])(getRowProps && getRowProps(row, rowIndex) || {}, ["popover"])), theadPlaceholderVisible && React.createElement("div", {
className: (0, _classnames["default"])("".concat(prefix, "-td"), "".concat(prefix, "-td_functional"), _defineProperty(_defineProperty({}, "".concat(prefix, "-td_left"), isAnyColumnsLeftFixed()), "".concat(prefix, "-td_functional_both"), selectAndExpand)),
key: "functional",
role: "cell"
}, React.createElement("div", {
className: "".concat(prefix, "-cell"),
style: {
alignItems: verticalAlign && VERTICAL_ALIGN[verticalAlign]
}
}, selectPropsGetted !== null && selectPropsGetted !== void 0 && (_selectPropsGetted$po = selectPropsGetted.popoverProps) !== null && _selectPropsGetted$po !== void 0 && _selectPropsGetted$po.popup ? React.createElement(_popover["default"], _extends({
mouseEnterDelay: 0.1,
alignEdge: false,
placement: "right"
}, (getSelectProps && getSelectProps(row, rowIndex) || {}).popoverProps), selectCell) : selectCell)), colArray);
if (getRowProps) {
var _getRowProps = getRowProps(row, rowIndex),
popover = _getRowProps.popover;
if (popover !== null && popover !== void 0 && popover.popup) {
tr = React.createElement(_popover["default"], popover, tr);
}
}
if (onExpandChange) {
return React.createElement(React.Fragment, {
key: key !== undefined ? key : rowIndex
}, tr, expandedRowKeys.includes(key) ? React.createElement("div", {
className: "".concat(prefix, "-expandRow"),
style: {
maxWidth: mainTableStyle.width
}
}, React.createElement("div", {
className: "".concat(prefix, "-expandRow-inner"),
style: isMainTableOverflowX ? {
width: mainTableStyle.width
} : undefined
}, !!expandedRowRender && expandedRowRender(row, rowIndex))) : null);
}
return tr;
};
return [headerAffixed ? React.createElement(_affix["default"], {
key: 0,
offsetTop: headerAffixedOffsetTop,
getContainer: function getContainer() {
return _this.wrapper;
},
getTarget: headerAffixGetTarget,
width: mainTableStyle.width,
onChange: function onChange(bool) {
_this.setState({
affixedTop: bool
}, function () {
if (bool) {
_this.handleWindowResize();
_this.handleMainTableScroll();
}
});
},
className: affixedTop ? "".concat(prefix, "-affix") : "",
style: _objectSpread({
display: "flex",
zIndex: 2,
alignItems: "baseline",
flexDirection: "column"
}, affixedTop ? mainTableStyle : {}),
ref: _this.saveRef("affixHeader")
}, thead) : thead, React.createElement("div", {
key: 1,
className: "".concat(prefix, "-tbody"),
ref: _this.saveRef("mainTableBody")
}, !virtualScroll && dataSource && !!dataSource.length && dataSource.map(function (row, rowIndex) {
return generateTrs(row, rowIndex);
}), virtualScroll && dataSource && !!dataSource.length && React.createElement(_reactWindow.VariableSizeList, _extends({
height: (height || 400) - 40,
itemCount: dataSource.length,
itemSize: function itemSize() {
return 42;
},
className: "".concat(prefix, "-virtual-wrapper"),
style: _objectSpread({}, virtualListStyle),
ref: function ref(o) {
_this.virtualList = o;
}
}, virtualListProps, {
onScroll: function onScroll(options) {
if (virtualListProps !== null && virtualListProps !== void 0 && virtualListProps.onScroll) {
virtualListProps.onScroll(options);
}
}
}), function (_ref4) {
var index = _ref4.index,
style = _ref4.style;
return generateTrs(dataSource[index], index, style);
})), isMainTableOverflowX && headerAffixed && React.createElement(_affix["default"], {
key: 2,
offsetBottom: scrollXAffixedOffsetBottom,
getContainer: function getContainer() {
return _this.mainTableBody;
},
getTarget: headerAffixGetTarget,
ref: _this.saveRef("affixScrollbar"),
className: (0, _classnames["default"])("".concat(prefix, "-affixScrollbar"), _defineProperty({}, "".concat(prefix, "-affixScrollbar_show"), affixedBottom)),
style: _objectSpread({
zIndex: 2
}, mainTableStyle),
onScroll: function onScroll(e) {
return _this.syncTableScrollPosition(e.currentTarget.scrollLeft);
},
onChange: function onChange(bool) {
return _this.setState({
affixedBottom: bool
});
}
}, React.createElement("div", {
style: {
width: (_this$mainTable = _this.mainTable) === null || _this$mainTable === void 0 ? void 0 : _this$mainTable.scrollWidth
}
}))];
};
_this.generateThCell = function (col, options) {
var _this$props8 = _this.props,
align = _this$props8.align,
columnsResizable = _this$props8.columnsResizable,
getHeadCellClassNameProp = _this$props8.getHeadCellClassName,
getHeadCellStyleProp = _this$props8.getHeadCellStyle;
var colResizable = col.resizable,
getHeadCellClassName = col.getHeadCellClassName,
getHeadCellStyle = col.getHeadCellStyle,
onSort = col.onSort,
sortOrder = col.sortOrder,
onFilter = col.onFilter,
filters = col.filters;
var clickable = !!onSort || sortOrder !== null && sortOrder !== undefined || !!onFilter || !!filters;
var sortableAndFilterable = (!!onSort || sortOrder !== null && sortOrder !== undefined) && (!!onFilter || !!filters);
var resizable = true;
if (typeof colResizable === "boolean") {
resizable = colResizable;
} else if (typeof columnsResizable === "boolean") {
resizable = columnsResizable;
}
var _this$state3 = _this.state,
currentlyResizing = _this$state3.currentlyResizing,
isResizerShow = _this$state3.isResizerShow;
var isLastTh = options && options.index === options.columns.length - 1;
var thCell = React.createElement("div", {
className: (0, _classnames["default"])("".concat(prefix, "-cell"), getHeadCellClassName && getHeadCellClassName(), getHeadCellClassNameProp && getHeadCellClassNameProp(col, options ? options.index : undefined)),
style: _objectSpread(_objectSpread({
justifyContent: col.align && HORIZONTAL_ALIGN[col.align] || align && HORIZONTAL_ALIGN[align] || undefined
}, getHeadCellStyle && getHeadCellStyle() || {}), getHeadCellStyleProp && getHeadCellStyleProp(col, options ? options.index : undefined) || {})
}, (!clickable || sortableAndFilterable) && col.title, (!!col.onSort || col.sortOrder !== null && col.sortOrder !== undefined) && React.createElement(_TableSort["default"], {
sortableAndFilterable: sortableAndFilterable,
onSort: function onSort(order) {
return col.onSort ? col.onSort(order) : {};
},
sortOrder: col.sortOrder,
title: col.title
}), (!!col.onFilter || !!col.filters) && React.createElement(_TableFilter["default"], {
sortableAndFilterable: sortableAndFilterable,
filteredValue: col.filteredValue,
filterVisible: col.filterVisible,
filterMultiple: col.filterMultiple,
filterSearchable: col.filterSearchable,
filterSearchPlaceholder: col.filterSearchPlaceholder,
filterSearchCaseSensitive: col.filterSearchCaseSensitive,
filterSearchFunc: col.filterSearchFunc,
filterPopoverProps: col.filterPopoverProps,
filters: col.filters,
onFilter: function onFilter(filter) {
if (col.onFilter) {
col.onFilter(filter);
}
},
onFilterVisibleChange: function onFilterVisibleChange(visible) {
if (col.onFilterVisibleChange) {
col.onFilterVisibleChange(visible);
}
},
title: col.title
}), resizable && !isLastTh && React.createElement("div", {
className: (0, _classnames["default"])("".concat(prefix, "-resizer"), _defineProperty(_defineProperty({}, "".concat(prefix, "-resizer_show"), isResizerShow), "".concat(prefix, "-resizer_current"), currentlyResizing.dataIndex === col.dataIndex)),
onMouseDown: function onMouseDown(e) {
return _this.resizeColumnStart(e, col);
},
role: "none"
}));
if (col.popover) {
return React.createElement(_popover["default"], {
mouseEnterDelay: 0.3,
placement: col.align === "center" ? "top" : col.align === "right" ? "topRight" : "topLeft",
alignEdge: true,
arrowed: true,
popup: col.popover
}, thCell);
}
return thCell;
};
_this.generateTbodyCell = function (row, cell, rowIndex, cellIndex) {
var _fixedColumnsInfos$fi5, _fixedColumnsInfos$fi6, _fixedColumnsInfos$fi7, _fixedColumnsInfos$fi8;
var _this$props9 = _this.props,
alignProp = _this$props9.align,
expandIconVisible = _this$props9.expandIconVisible,
getCellClassNameProp = _this$props9.getCellClassName,
getCellPropsProp = _this$props9.getCellProps,
getCellStyleProp = _this$props9.getCellStyle,
grow = _this$props9.grow,
onExpandChange = _this$props9.onExpandChange,
onSelectChange = _this$props9.onSelectChange,
verticalAlignProp = _this$props9.verticalAlign;
var selectAndExpand = !!onSelectChange && !!onExpandChange;
var theadPlaceholderVisible = expandIconVisible && (!!onSelectChange || !!onExpandChange);
var _this$state4 = _this.state,
currentlyResizing = _this$state4.currentlyResizing,
fixedColumnsInfos = _this$state4.fixedColumnsInfos,
resized = _this$state4.resized;
var align = cell.align,
dataIndex = cell.dataIndex,
filters = cell.filters,
colGrow = cell.grow,
onFilter = cell.onFilter,
onSort = cell.onSort,
render = cell.render,
sortOrder = cell.sortOrder,
title = cell.title,
verticalAlign = cell.verticalAlign,
width = cell.width,
getCellClassName = cell.getCellClassName,
getCellProps = cell.getCellProps,
getCellStyle = cell.getCellStyle;
var isGrow = colGrow !== undefined ? colGrow : grow;
var clickable = !!onSort || sortOrder !== null && sortOrder !== undefined || !!onFilter || !!filters;
var minWidth = 0;
if (typeof title === "string") {
minWidth = Math.ceil(title.length > 4 ? title.length / 2 : title.length) * 13 + 16;
if (clickable) {
minWidth += 20;
}
}
var flexValue;
if (typeof width === "number") {
flexValue = "".concat(width, " 0 auto");
} else if (typeof width === "string") {
if (width.length - width.lastIndexOf("px") === 2) {
flexValue = "".concat(width.slice(0, -2), " 0 auto");
} else {
flexValue = "0 0 ".concat(width);
}
} else {
flexValue = "".concat(Math.max(TD_MIN_WIDTH, minWidth), " 0 auto");
}
var resizedCol = resized.find(function (o) {
return o.dataIndex === dataIndex;
});
var cellClassName = getCellClassName && getCellClassName(row, rowIndex) || getCellClassNameProp && getCellClassNameProp(row, cell, rowIndex, cellIndex);
var cellProps = getCellProps && getCellProps(row, rowIndex) || getCellPropsProp && getCellPropsProp(row, cell, rowIndex, cellIndex) || {};
var cellStyle = getCellStyle && getCellStyle(row, rowIndex) || getCellStyleProp && getCellStyleProp(row, cell, rowIndex, cellIndex) || {};
var rowSpan = cellPr