@kdcloudjs/table 1.2.2-canary.12 → 1.2.2-canary.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/@kdcloudjs/table.css +1 -1
- package/dist/@kdcloudjs/table.js +1050 -459
- package/dist/@kdcloudjs/table.js.map +1 -1
- package/dist/@kdcloudjs/table.min.css +1 -1
- package/dist/@kdcloudjs/table.min.js +8 -8
- package/dist/@kdcloudjs/table.min.js.map +1 -1
- package/es/table/base/BlankComponent.d.ts +11 -0
- package/es/table/base/BlankComponent.js +61 -0
- package/es/table/base/helpers/FastScrollManager.d.ts +96 -0
- package/es/table/base/helpers/FastScrollManager.js +167 -0
- package/es/table/base/table.d.ts +13 -0
- package/es/table/base/table.js +126 -73
- package/es/table/pipeline/features/columnDrag.js +220 -242
- package/es/table/pipeline/features/columnResizeWidth.js +40 -5
- package/es/table/pipeline/features/rowDrag.js +169 -80
- package/es/table/pipeline/features/utils/touchEventUtils.d.ts +15 -0
- package/es/table/pipeline/features/utils/touchEventUtils.js +65 -0
- package/lib/table/base/BlankComponent.d.ts +11 -0
- package/lib/table/base/BlankComponent.js +75 -0
- package/lib/table/base/helpers/FastScrollManager.d.ts +96 -0
- package/lib/table/base/helpers/FastScrollManager.js +175 -0
- package/lib/table/base/table.d.ts +13 -0
- package/lib/table/base/table.js +126 -73
- package/lib/table/pipeline/features/columnDrag.js +220 -242
- package/lib/table/pipeline/features/columnResizeWidth.js +40 -5
- package/lib/table/pipeline/features/rowDrag.js +169 -80
- package/lib/table/pipeline/features/utils/touchEventUtils.d.ts +15 -0
- package/lib/table/pipeline/features/utils/touchEventUtils.js +76 -0
- package/package.json +1 -1
package/dist/@kdcloudjs/table.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
*
|
|
3
|
-
* @kdcloudjs/table v1.2.2-canary.
|
|
3
|
+
* @kdcloudjs/table v1.2.2-canary.13
|
|
4
4
|
*
|
|
5
5
|
* Copyright 2020-present, Kingdee, Inc.
|
|
6
6
|
* All rights reserved.
|
|
@@ -806,6 +806,89 @@ var locale = {
|
|
|
806
806
|
|
|
807
807
|
/***/ }),
|
|
808
808
|
|
|
809
|
+
/***/ "./components/table/base/BlankComponent.tsx":
|
|
810
|
+
/*!**************************************************!*\
|
|
811
|
+
!*** ./components/table/base/BlankComponent.tsx ***!
|
|
812
|
+
\**************************************************/
|
|
813
|
+
/*! exports provided: TopBlank, BottomBlank */
|
|
814
|
+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
815
|
+
|
|
816
|
+
"use strict";
|
|
817
|
+
__webpack_require__.r(__webpack_exports__);
|
|
818
|
+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TopBlank", function() { return TopBlank; });
|
|
819
|
+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "BottomBlank", function() { return BottomBlank; });
|
|
820
|
+
/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "./node_modules/@babel/runtime/helpers/slicedToArray.js");
|
|
821
|
+
/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__);
|
|
822
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
|
|
823
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|
824
|
+
/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
|
|
825
|
+
/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_2__);
|
|
826
|
+
/* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./styles */ "./components/table/base/styles.ts");
|
|
827
|
+
|
|
828
|
+
|
|
829
|
+
|
|
830
|
+
|
|
831
|
+
var TopBlankComponent = /*#__PURE__*/Object(react__WEBPACK_IMPORTED_MODULE_1__["forwardRef"])(function (_ref, ref) {
|
|
832
|
+
var initialHeight = _ref.height;
|
|
833
|
+
var _useState = Object(react__WEBPACK_IMPORTED_MODULE_1__["useState"])(initialHeight),
|
|
834
|
+
_useState2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default()(_useState, 2),
|
|
835
|
+
height = _useState2[0],
|
|
836
|
+
setHeight = _useState2[1];
|
|
837
|
+
Object(react__WEBPACK_IMPORTED_MODULE_1__["useImperativeHandle"])(ref, function () {
|
|
838
|
+
return {
|
|
839
|
+
updateHeight: function updateHeight(newHeight) {
|
|
840
|
+
if (height !== newHeight) {
|
|
841
|
+
setHeight(newHeight);
|
|
842
|
+
}
|
|
843
|
+
}
|
|
844
|
+
};
|
|
845
|
+
}, [height]);
|
|
846
|
+
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", {
|
|
847
|
+
style: {
|
|
848
|
+
height: height
|
|
849
|
+
}
|
|
850
|
+
});
|
|
851
|
+
});
|
|
852
|
+
TopBlankComponent.displayName = 'TopBlank';
|
|
853
|
+
var BottomBlankComponent = /*#__PURE__*/Object(react__WEBPACK_IMPORTED_MODULE_1__["forwardRef"])(function (_ref2, ref) {
|
|
854
|
+
var initialHeight = _ref2.height,
|
|
855
|
+
className = _ref2.className;
|
|
856
|
+
var _useState3 = Object(react__WEBPACK_IMPORTED_MODULE_1__["useState"])(initialHeight),
|
|
857
|
+
_useState4 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default()(_useState3, 2),
|
|
858
|
+
height = _useState4[0],
|
|
859
|
+
setHeight = _useState4[1];
|
|
860
|
+
Object(react__WEBPACK_IMPORTED_MODULE_1__["useImperativeHandle"])(ref, function () {
|
|
861
|
+
return {
|
|
862
|
+
updateHeight: function updateHeight(newHeight) {
|
|
863
|
+
if (height !== newHeight) {
|
|
864
|
+
setHeight(newHeight);
|
|
865
|
+
}
|
|
866
|
+
}
|
|
867
|
+
};
|
|
868
|
+
}, [height]);
|
|
869
|
+
if (height <= 0) {
|
|
870
|
+
return null;
|
|
871
|
+
}
|
|
872
|
+
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", {
|
|
873
|
+
key: "bottom-blank",
|
|
874
|
+
className: classnames__WEBPACK_IMPORTED_MODULE_2___default()(_styles__WEBPACK_IMPORTED_MODULE_3__["Classes"].virtualBlank, 'bottom', className),
|
|
875
|
+
style: {
|
|
876
|
+
height: height
|
|
877
|
+
}
|
|
878
|
+
});
|
|
879
|
+
});
|
|
880
|
+
BottomBlankComponent.displayName = 'BottomBlank';
|
|
881
|
+
|
|
882
|
+
// 使用 memo 优化,只有当 height 或 className 改变时才重新渲染
|
|
883
|
+
var TopBlank = /*#__PURE__*/Object(react__WEBPACK_IMPORTED_MODULE_1__["memo"])(TopBlankComponent, function (prevProps, nextProps) {
|
|
884
|
+
return prevProps.height === nextProps.height && prevProps.className === nextProps.className;
|
|
885
|
+
});
|
|
886
|
+
var BottomBlank = /*#__PURE__*/Object(react__WEBPACK_IMPORTED_MODULE_1__["memo"])(BottomBlankComponent, function (prevProps, nextProps) {
|
|
887
|
+
return prevProps.height === nextProps.height && prevProps.className === nextProps.className;
|
|
888
|
+
});
|
|
889
|
+
|
|
890
|
+
/***/ }),
|
|
891
|
+
|
|
809
892
|
/***/ "./components/table/base/calculations.tsx":
|
|
810
893
|
/*!************************************************!*\
|
|
811
894
|
!*** ./components/table/base/calculations.tsx ***!
|
|
@@ -1733,6 +1816,246 @@ function TableHeader(_ref2) {
|
|
|
1733
1816
|
|
|
1734
1817
|
/***/ }),
|
|
1735
1818
|
|
|
1819
|
+
/***/ "./components/table/base/helpers/FastScrollManager.ts":
|
|
1820
|
+
/*!************************************************************!*\
|
|
1821
|
+
!*** ./components/table/base/helpers/FastScrollManager.ts ***!
|
|
1822
|
+
\************************************************************/
|
|
1823
|
+
/*! exports provided: FastScrollManager */
|
|
1824
|
+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
1825
|
+
|
|
1826
|
+
"use strict";
|
|
1827
|
+
__webpack_require__.r(__webpack_exports__);
|
|
1828
|
+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FastScrollManager", function() { return FastScrollManager; });
|
|
1829
|
+
/* harmony import */ var core_js_modules_es_object_keys_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.object.keys.js */ "./node_modules/core-js/modules/es.object.keys.js");
|
|
1830
|
+
/* harmony import */ var core_js_modules_es_object_keys_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_keys_js__WEBPACK_IMPORTED_MODULE_0__);
|
|
1831
|
+
/* harmony import */ var core_js_modules_es_symbol_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! core-js/modules/es.symbol.js */ "./node_modules/core-js/modules/es.symbol.js");
|
|
1832
|
+
/* harmony import */ var core_js_modules_es_symbol_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_symbol_js__WEBPACK_IMPORTED_MODULE_1__);
|
|
1833
|
+
/* harmony import */ var core_js_modules_es_array_filter_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core-js/modules/es.array.filter.js */ "./node_modules/core-js/modules/es.array.filter.js");
|
|
1834
|
+
/* harmony import */ var core_js_modules_es_array_filter_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_filter_js__WEBPACK_IMPORTED_MODULE_2__);
|
|
1835
|
+
/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! core-js/modules/es.object.to-string.js */ "./node_modules/core-js/modules/es.object.to-string.js");
|
|
1836
|
+
/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_3__);
|
|
1837
|
+
/* harmony import */ var core_js_modules_es_object_get_own_property_descriptor_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! core-js/modules/es.object.get-own-property-descriptor.js */ "./node_modules/core-js/modules/es.object.get-own-property-descriptor.js");
|
|
1838
|
+
/* harmony import */ var core_js_modules_es_object_get_own_property_descriptor_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_get_own_property_descriptor_js__WEBPACK_IMPORTED_MODULE_4__);
|
|
1839
|
+
/* harmony import */ var core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! core-js/modules/web.dom-collections.for-each.js */ "./node_modules/core-js/modules/web.dom-collections.for-each.js");
|
|
1840
|
+
/* harmony import */ var core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_5__);
|
|
1841
|
+
/* harmony import */ var core_js_modules_es_object_get_own_property_descriptors_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! core-js/modules/es.object.get-own-property-descriptors.js */ "./node_modules/core-js/modules/es.object.get-own-property-descriptors.js");
|
|
1842
|
+
/* harmony import */ var core_js_modules_es_object_get_own_property_descriptors_js__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_get_own_property_descriptors_js__WEBPACK_IMPORTED_MODULE_6__);
|
|
1843
|
+
/* harmony import */ var _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @babel/runtime/helpers/classCallCheck */ "./node_modules/@babel/runtime/helpers/classCallCheck.js");
|
|
1844
|
+
/* harmony import */ var _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_7__);
|
|
1845
|
+
/* harmony import */ var _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @babel/runtime/helpers/createClass */ "./node_modules/@babel/runtime/helpers/createClass.js");
|
|
1846
|
+
/* harmony import */ var _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_8__);
|
|
1847
|
+
/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "./node_modules/@babel/runtime/helpers/defineProperty.js");
|
|
1848
|
+
/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_9__);
|
|
1849
|
+
|
|
1850
|
+
|
|
1851
|
+
|
|
1852
|
+
|
|
1853
|
+
|
|
1854
|
+
|
|
1855
|
+
|
|
1856
|
+
|
|
1857
|
+
|
|
1858
|
+
|
|
1859
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
1860
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_9___default()(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
1861
|
+
/**
|
|
1862
|
+
* 快速滚动管理器
|
|
1863
|
+
* 抽取 BaseTable 中的快速滚动相关逻辑
|
|
1864
|
+
*/
|
|
1865
|
+
|
|
1866
|
+
var FastScrollManager = /*#__PURE__*/function () {
|
|
1867
|
+
// 快速滚动状态
|
|
1868
|
+
|
|
1869
|
+
// 快速滚动标志 - 作为私有属性立即更新
|
|
1870
|
+
|
|
1871
|
+
// 定时器句柄 - 作为私有属性管理
|
|
1872
|
+
|
|
1873
|
+
// 配置参数
|
|
1874
|
+
|
|
1875
|
+
function FastScrollManager(callbacks) {
|
|
1876
|
+
var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
1877
|
+
_babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_7___default()(this, FastScrollManager);
|
|
1878
|
+
_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_9___default()(this, "state", {
|
|
1879
|
+
lastScrollTime: 0,
|
|
1880
|
+
scrollVelocity: 0,
|
|
1881
|
+
lastOffsetY: 0
|
|
1882
|
+
});
|
|
1883
|
+
_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_9___default()(this, "isFastScrolling", false);
|
|
1884
|
+
_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_9___default()(this, "fastScrollEndTimer", void 0);
|
|
1885
|
+
_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_9___default()(this, "config", void 0);
|
|
1886
|
+
_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_9___default()(this, "callbacks", void 0);
|
|
1887
|
+
this.callbacks = callbacks;
|
|
1888
|
+
|
|
1889
|
+
// 合并默认配置
|
|
1890
|
+
this.config = _objectSpread({
|
|
1891
|
+
overscanSize: 100,
|
|
1892
|
+
velocityThreshold: 3,
|
|
1893
|
+
distanceMultiplier: 3,
|
|
1894
|
+
fastScrollEndDelayHigh: 200,
|
|
1895
|
+
fastScrollEndDelayNormal: 150,
|
|
1896
|
+
highVelocityThreshold: 5
|
|
1897
|
+
}, config);
|
|
1898
|
+
}
|
|
1899
|
+
|
|
1900
|
+
/**
|
|
1901
|
+
* 检测是否接近底部(剩余滚动距离少于两屏)
|
|
1902
|
+
*/
|
|
1903
|
+
_babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_8___default()(FastScrollManager, [{
|
|
1904
|
+
key: "isNearBottom",
|
|
1905
|
+
value: function isNearBottom(currentScrollTop, maxRenderHeight, totalScrollHeight) {
|
|
1906
|
+
var remainingScrollDistance = totalScrollHeight - currentScrollTop - maxRenderHeight;
|
|
1907
|
+
return remainingScrollDistance < maxRenderHeight;
|
|
1908
|
+
}
|
|
1909
|
+
|
|
1910
|
+
/**
|
|
1911
|
+
* 处理滚动事件 - 检测和处理快速滚动
|
|
1912
|
+
*/
|
|
1913
|
+
}, {
|
|
1914
|
+
key: "handleScrollEvent",
|
|
1915
|
+
value: function handleScrollEvent(sizeAndOffset, currentState, dataLength, totalScrollHeight) {
|
|
1916
|
+
var currentTime = performance.now();
|
|
1917
|
+
var deltaY = Math.abs(sizeAndOffset.offsetY - this.state.lastOffsetY);
|
|
1918
|
+
var deltaTime = currentTime - this.state.lastScrollTime;
|
|
1919
|
+
|
|
1920
|
+
// 计算滚动速度 (像素/毫秒)
|
|
1921
|
+
this.state.scrollVelocity = deltaTime > 0 ? deltaY / deltaTime : 0;
|
|
1922
|
+
|
|
1923
|
+
// 检测是否接近底部
|
|
1924
|
+
var isNearBottom = this.isNearBottom(sizeAndOffset.offsetY, sizeAndOffset.maxRenderHeight, totalScrollHeight);
|
|
1925
|
+
|
|
1926
|
+
// 如果正在快速滚动但接近底部,提前结束快速滚动
|
|
1927
|
+
if (this.isFastScrolling && isNearBottom) {
|
|
1928
|
+
this.endFastScrolling(sizeAndOffset);
|
|
1929
|
+
return; // 让正常渲染逻辑接管
|
|
1930
|
+
}
|
|
1931
|
+
|
|
1932
|
+
// 快速滚动判断条件:
|
|
1933
|
+
// 1. 滚动距离超过阈值 && 滚动速度超过阈值
|
|
1934
|
+
// 2. 当前未在快速滚动状态
|
|
1935
|
+
// 3. 未接近底部边界
|
|
1936
|
+
var isSignificantChange = deltaY > this.config.overscanSize * this.config.distanceMultiplier;
|
|
1937
|
+
var isHighVelocity = this.state.scrollVelocity > this.config.velocityThreshold;
|
|
1938
|
+
var shouldStartFastScroll = (isSignificantChange || isHighVelocity) && !this.isFastScrolling && !isNearBottom; // 接近底部时不启动快速滚动
|
|
1939
|
+
|
|
1940
|
+
if (shouldStartFastScroll) {
|
|
1941
|
+
this.startFastScrolling(currentState, dataLength);
|
|
1942
|
+
}
|
|
1943
|
+
|
|
1944
|
+
// 重置快速滚动结束定时器
|
|
1945
|
+
if (this.isFastScrolling) {
|
|
1946
|
+
this.resetFastScrollEndTimer(sizeAndOffset);
|
|
1947
|
+
}
|
|
1948
|
+
|
|
1949
|
+
// 更新记录
|
|
1950
|
+
this.state.lastOffsetY = sizeAndOffset.offsetY;
|
|
1951
|
+
this.state.lastScrollTime = currentTime;
|
|
1952
|
+
}
|
|
1953
|
+
|
|
1954
|
+
/**
|
|
1955
|
+
* 开始快速滚动
|
|
1956
|
+
*/
|
|
1957
|
+
}, {
|
|
1958
|
+
key: "startFastScrolling",
|
|
1959
|
+
value: function startFastScrolling(currentState, dataLength) {
|
|
1960
|
+
this.isFastScrolling = true;
|
|
1961
|
+
|
|
1962
|
+
// 获取当前渲染范围作为缓存
|
|
1963
|
+
var currentVerticalRange = this.callbacks.getCurrentRenderRange(currentState.offsetY, currentState.maxRenderHeight, dataLength);
|
|
1964
|
+
|
|
1965
|
+
// 通知外部开始快速滚动
|
|
1966
|
+
this.callbacks.onFastScrollStart({
|
|
1967
|
+
offsetY: currentState.offsetY,
|
|
1968
|
+
maxRenderHeight: currentState.maxRenderHeight,
|
|
1969
|
+
maxRenderWidth: currentState.maxRenderWidth,
|
|
1970
|
+
verticalRenderRange: currentVerticalRange
|
|
1971
|
+
});
|
|
1972
|
+
}
|
|
1973
|
+
|
|
1974
|
+
/**
|
|
1975
|
+
* 重置快速滚动结束定时器
|
|
1976
|
+
*/
|
|
1977
|
+
}, {
|
|
1978
|
+
key: "resetFastScrollEndTimer",
|
|
1979
|
+
value: function resetFastScrollEndTimer(sizeAndOffset) {
|
|
1980
|
+
var _this = this;
|
|
1981
|
+
if (this.fastScrollEndTimer) {
|
|
1982
|
+
clearTimeout(this.fastScrollEndTimer);
|
|
1983
|
+
}
|
|
1984
|
+
var waitTime = this.state.scrollVelocity > this.config.highVelocityThreshold ? this.config.fastScrollEndDelayHigh : this.config.fastScrollEndDelayNormal;
|
|
1985
|
+
this.fastScrollEndTimer = window.setTimeout(function () {
|
|
1986
|
+
_this.endFastScrolling(sizeAndOffset);
|
|
1987
|
+
}, waitTime);
|
|
1988
|
+
}
|
|
1989
|
+
|
|
1990
|
+
/**
|
|
1991
|
+
* 结束快速滚动
|
|
1992
|
+
*/
|
|
1993
|
+
}, {
|
|
1994
|
+
key: "endFastScrolling",
|
|
1995
|
+
value: function endFastScrolling(sizeAndOffset) {
|
|
1996
|
+
this.isFastScrolling = false;
|
|
1997
|
+
this.fastScrollEndTimer = undefined;
|
|
1998
|
+
|
|
1999
|
+
// 通知外部结束快速滚动
|
|
2000
|
+
this.callbacks.onFastScrollEnd(sizeAndOffset);
|
|
2001
|
+
}
|
|
2002
|
+
|
|
2003
|
+
/**
|
|
2004
|
+
* 清理资源
|
|
2005
|
+
*/
|
|
2006
|
+
}, {
|
|
2007
|
+
key: "cleanup",
|
|
2008
|
+
value: function cleanup() {
|
|
2009
|
+
if (this.fastScrollEndTimer) {
|
|
2010
|
+
clearTimeout(this.fastScrollEndTimer);
|
|
2011
|
+
}
|
|
2012
|
+
}
|
|
2013
|
+
|
|
2014
|
+
/**
|
|
2015
|
+
* 获取当前是否处于快速滚动状态
|
|
2016
|
+
*/
|
|
2017
|
+
}, {
|
|
2018
|
+
key: "getIsFastScrolling",
|
|
2019
|
+
value: function getIsFastScrolling() {
|
|
2020
|
+
return this.isFastScrolling;
|
|
2021
|
+
}
|
|
2022
|
+
|
|
2023
|
+
/**
|
|
2024
|
+
* 获取当前滚动速度
|
|
2025
|
+
*/
|
|
2026
|
+
}, {
|
|
2027
|
+
key: "getScrollVelocity",
|
|
2028
|
+
value: function getScrollVelocity() {
|
|
2029
|
+
return this.state.scrollVelocity;
|
|
2030
|
+
}
|
|
2031
|
+
|
|
2032
|
+
/**
|
|
2033
|
+
* 清理资源
|
|
2034
|
+
*/
|
|
2035
|
+
}, {
|
|
2036
|
+
key: "destroy",
|
|
2037
|
+
value: function destroy() {
|
|
2038
|
+
if (this.fastScrollEndTimer) {
|
|
2039
|
+
clearTimeout(this.fastScrollEndTimer);
|
|
2040
|
+
this.fastScrollEndTimer = undefined;
|
|
2041
|
+
}
|
|
2042
|
+
this.isFastScrolling = false;
|
|
2043
|
+
}
|
|
2044
|
+
|
|
2045
|
+
/**
|
|
2046
|
+
* 获取当前配置
|
|
2047
|
+
*/
|
|
2048
|
+
}, {
|
|
2049
|
+
key: "getConfig",
|
|
2050
|
+
value: function getConfig() {
|
|
2051
|
+
return _objectSpread({}, this.config);
|
|
2052
|
+
}
|
|
2053
|
+
}]);
|
|
2054
|
+
return FastScrollManager;
|
|
2055
|
+
}();
|
|
2056
|
+
|
|
2057
|
+
/***/ }),
|
|
2058
|
+
|
|
1736
2059
|
/***/ "./components/table/base/helpers/SpanManager.ts":
|
|
1737
2060
|
/*!******************************************************!*\
|
|
1738
2061
|
!*** ./components/table/base/helpers/SpanManager.ts ***!
|
|
@@ -3408,13 +3731,15 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
3408
3731
|
/* harmony import */ var _helpers_getRichVisibleRectsStream__WEBPACK_IMPORTED_MODULE_37__ = __webpack_require__(/*! ./helpers/getRichVisibleRectsStream */ "./components/table/base/helpers/getRichVisibleRectsStream.ts");
|
|
3409
3732
|
/* harmony import */ var _helpers_rowHeightManager__WEBPACK_IMPORTED_MODULE_38__ = __webpack_require__(/*! ./helpers/rowHeightManager */ "./components/table/base/helpers/rowHeightManager.ts");
|
|
3410
3733
|
/* harmony import */ var _helpers_TableDOMUtils__WEBPACK_IMPORTED_MODULE_39__ = __webpack_require__(/*! ./helpers/TableDOMUtils */ "./components/table/base/helpers/TableDOMUtils.tsx");
|
|
3411
|
-
/* harmony import */ var
|
|
3412
|
-
/* harmony import */ var
|
|
3413
|
-
/* harmony import */ var
|
|
3414
|
-
/* harmony import */ var
|
|
3415
|
-
/* harmony import */ var
|
|
3416
|
-
/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_45__ = __webpack_require__(/*!
|
|
3417
|
-
/* harmony import */ var
|
|
3734
|
+
/* harmony import */ var _helpers_FastScrollManager__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(/*! ./helpers/FastScrollManager */ "./components/table/base/helpers/FastScrollManager.ts");
|
|
3735
|
+
/* harmony import */ var _html_table__WEBPACK_IMPORTED_MODULE_41__ = __webpack_require__(/*! ./html-table */ "./components/table/base/html-table.tsx");
|
|
3736
|
+
/* harmony import */ var _loading__WEBPACK_IMPORTED_MODULE_42__ = __webpack_require__(/*! ./loading */ "./components/table/base/loading.tsx");
|
|
3737
|
+
/* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_43__ = __webpack_require__(/*! ./styles */ "./components/table/base/styles.ts");
|
|
3738
|
+
/* harmony import */ var _globalStyleComponent__WEBPACK_IMPORTED_MODULE_44__ = __webpack_require__(/*! ./globalStyleComponent */ "./components/table/base/globalStyleComponent.tsx");
|
|
3739
|
+
/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_45__ = __webpack_require__(/*! ./utils */ "./components/table/base/utils.tsx");
|
|
3740
|
+
/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_46__ = __webpack_require__(/*! ../utils */ "./components/table/utils/index.tsx");
|
|
3741
|
+
/* harmony import */ var _renderTemplates__WEBPACK_IMPORTED_MODULE_47__ = __webpack_require__(/*! ./renderTemplates */ "./components/table/base/renderTemplates.tsx");
|
|
3742
|
+
/* harmony import */ var _BlankComponent__WEBPACK_IMPORTED_MODULE_48__ = __webpack_require__(/*! ./BlankComponent */ "./components/table/base/BlankComponent.tsx");
|
|
3418
3743
|
|
|
3419
3744
|
|
|
3420
3745
|
|
|
@@ -3469,11 +3794,13 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
|
|
|
3469
3794
|
|
|
3470
3795
|
|
|
3471
3796
|
|
|
3797
|
+
|
|
3798
|
+
|
|
3472
3799
|
var propsDotEmptyContentDeprecatedWarned = false;
|
|
3473
3800
|
function warnPropsDotEmptyContentIsDeprecated() {
|
|
3474
3801
|
if (!propsDotEmptyContentDeprecatedWarned) {
|
|
3475
3802
|
propsDotEmptyContentDeprecatedWarned = true;
|
|
3476
|
-
|
|
3803
|
+
_utils__WEBPACK_IMPORTED_MODULE_46__["console"].warn('BaseTable props.emptyContent 已经过时,请使用 props.components.EmptyContent 来自定义数据为空时的表格表现');
|
|
3477
3804
|
}
|
|
3478
3805
|
}
|
|
3479
3806
|
var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
@@ -3493,6 +3820,9 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
3493
3820
|
_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_22___default()(_babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_18___default()(_this), "hasScrollY", false);
|
|
3494
3821
|
_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_22___default()(_babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_18___default()(_this), "resizeObserver", void 0);
|
|
3495
3822
|
_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_22___default()(_babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_18___default()(_this), "offsetY", 0);
|
|
3823
|
+
_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_22___default()(_babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_18___default()(_this), "fastScrollManager", void 0);
|
|
3824
|
+
_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_22___default()(_babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_18___default()(_this), "topBlankRef", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createRef());
|
|
3825
|
+
_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_22___default()(_babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_18___default()(_this), "bottomBlankRef", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createRef());
|
|
3496
3826
|
_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_22___default()(_babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_18___default()(_this), "handleRowMouseEnter", function (e) {
|
|
3497
3827
|
var nodeList = _this.domHelper.getRowNodeListByEvent(e);
|
|
3498
3828
|
nodeList && nodeList.forEach(function (node) {
|
|
@@ -3512,12 +3842,11 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
3512
3842
|
getRowProps = _this$props.getRowProps,
|
|
3513
3843
|
primaryKey = _this$props.primaryKey,
|
|
3514
3844
|
isLoading = _this$props.isLoading,
|
|
3515
|
-
emptyCellHeight = _this$props.emptyCellHeight
|
|
3516
|
-
|
|
3517
|
-
var tableBodyClassName = classnames__WEBPACK_IMPORTED_MODULE_30___default()(_styles__WEBPACK_IMPORTED_MODULE_42__["Classes"].tableBody, _styles__WEBPACK_IMPORTED_MODULE_42__["Classes"].horizontalScrollContainer);
|
|
3845
|
+
emptyCellHeight = _this$props.emptyCellHeight;
|
|
3846
|
+
var tableBodyClassName = classnames__WEBPACK_IMPORTED_MODULE_30___default()(_styles__WEBPACK_IMPORTED_MODULE_43__["Classes"].tableBody, _styles__WEBPACK_IMPORTED_MODULE_43__["Classes"].horizontalScrollContainer);
|
|
3518
3847
|
|
|
3519
3848
|
// 低版本Edge浏览器下也会出现双滚动条,这里设置overflow: 'hidden',先去掉edge的方向键控制滚动条的功能
|
|
3520
|
-
var virtualStyle =
|
|
3849
|
+
var virtualStyle = _utils__WEBPACK_IMPORTED_MODULE_46__["browserType"].isIE || _utils__WEBPACK_IMPORTED_MODULE_46__["browserType"].isEdge ? {
|
|
3521
3850
|
overflow: 'hidden'
|
|
3522
3851
|
} : {};
|
|
3523
3852
|
if (dataSource.length === 0) {
|
|
@@ -3534,7 +3863,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
3534
3863
|
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement("div", {
|
|
3535
3864
|
className: classnames__WEBPACK_IMPORTED_MODULE_30___default()(tableBodyClassName, 'empty')
|
|
3536
3865
|
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement("div", {
|
|
3537
|
-
className:
|
|
3866
|
+
className: _styles__WEBPACK_IMPORTED_MODULE_43__["Classes"].virtual,
|
|
3538
3867
|
tabIndex: -1,
|
|
3539
3868
|
style: virtualStyle
|
|
3540
3869
|
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement(_empty__WEBPACK_IMPORTED_MODULE_35__["EmptyHtmlTable"], {
|
|
@@ -3549,7 +3878,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
3549
3878
|
bottomBlank = _info$verticalRenderR.bottomBlank,
|
|
3550
3879
|
topBlank = _info$verticalRenderR.topBlank,
|
|
3551
3880
|
bottomIndex = _info$verticalRenderR.bottomIndex;
|
|
3552
|
-
var renderBody = Object(
|
|
3881
|
+
var renderBody = Object(_renderTemplates__WEBPACK_IMPORTED_MODULE_47__["default"])('body');
|
|
3553
3882
|
if (typeof renderBody === 'function') {
|
|
3554
3883
|
return renderBody(info, _this.props, {
|
|
3555
3884
|
rowProps: {
|
|
@@ -3561,33 +3890,30 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
3561
3890
|
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement("div", {
|
|
3562
3891
|
className: tableBodyClassName
|
|
3563
3892
|
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement("div", {
|
|
3564
|
-
className:
|
|
3893
|
+
className: _styles__WEBPACK_IMPORTED_MODULE_43__["Classes"].virtual,
|
|
3565
3894
|
tabIndex: -1,
|
|
3566
3895
|
style: virtualStyle
|
|
3567
|
-
},
|
|
3568
|
-
|
|
3569
|
-
|
|
3570
|
-
|
|
3571
|
-
height: topBlank
|
|
3572
|
-
}
|
|
3573
|
-
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement(_html_table__WEBPACK_IMPORTED_MODULE_40__["HtmlTable"], {
|
|
3896
|
+
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement(_BlankComponent__WEBPACK_IMPORTED_MODULE_48__["TopBlank"], {
|
|
3897
|
+
ref: _this.topBlankRef,
|
|
3898
|
+
height: topBlank // 直接使用
|
|
3899
|
+
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement(_html_table__WEBPACK_IMPORTED_MODULE_41__["HtmlTable"], {
|
|
3574
3900
|
tbodyHtmlTag: "tbody",
|
|
3575
3901
|
getRowProps: getRowProps,
|
|
3576
3902
|
primaryKey: primaryKey,
|
|
3577
|
-
data: dataSource.slice(topIndex, bottomIndex)
|
|
3903
|
+
data: dataSource.slice(topIndex, bottomIndex) // 直接使用
|
|
3904
|
+
,
|
|
3578
3905
|
horizontalRenderInfo: info,
|
|
3579
3906
|
verticalRenderInfo: {
|
|
3580
3907
|
first: 0,
|
|
3581
3908
|
offset: topIndex,
|
|
3909
|
+
// 直接使用
|
|
3582
3910
|
limit: bottomIndex,
|
|
3911
|
+
// 直接使用
|
|
3583
3912
|
last: dataSource.length - 1
|
|
3584
3913
|
}
|
|
3585
|
-
}),
|
|
3586
|
-
|
|
3587
|
-
|
|
3588
|
-
style: {
|
|
3589
|
-
height: bottomBlank
|
|
3590
|
-
}
|
|
3914
|
+
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement(_BlankComponent__WEBPACK_IMPORTED_MODULE_48__["BottomBlank"], {
|
|
3915
|
+
ref: _this.bottomBlankRef,
|
|
3916
|
+
height: bottomBlank // 直接使用
|
|
3591
3917
|
})));
|
|
3592
3918
|
});
|
|
3593
3919
|
_this.state = {
|
|
@@ -3602,6 +3928,27 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
3602
3928
|
maxRenderHeight: 600,
|
|
3603
3929
|
maxRenderWidth: 800
|
|
3604
3930
|
};
|
|
3931
|
+
|
|
3932
|
+
// 初始化快速滚动管理器
|
|
3933
|
+
var fastScrollCallbacks = {
|
|
3934
|
+
onFastScrollStart: function onFastScrollStart(renderData) {
|
|
3935
|
+
_this.setState({
|
|
3936
|
+
previousRenderData: renderData
|
|
3937
|
+
});
|
|
3938
|
+
},
|
|
3939
|
+
onFastScrollEnd: function onFastScrollEnd(scrollData) {
|
|
3940
|
+
_this.setState({
|
|
3941
|
+
previousRenderData: undefined,
|
|
3942
|
+
offsetY: scrollData.offsetY,
|
|
3943
|
+
maxRenderHeight: scrollData.maxRenderHeight,
|
|
3944
|
+
maxRenderWidth: scrollData.maxRenderWidth
|
|
3945
|
+
});
|
|
3946
|
+
},
|
|
3947
|
+
getCurrentRenderRange: function getCurrentRenderRange(offsetY, maxRenderHeight, dataLength) {
|
|
3948
|
+
return _this.rowHeightManager.getRenderRange(offsetY, maxRenderHeight, dataLength);
|
|
3949
|
+
}
|
|
3950
|
+
};
|
|
3951
|
+
_this.fastScrollManager = new _helpers_FastScrollManager__WEBPACK_IMPORTED_MODULE_40__["FastScrollManager"](fastScrollCallbacks);
|
|
3605
3952
|
return _this;
|
|
3606
3953
|
}
|
|
3607
3954
|
|
|
@@ -3611,9 +3958,13 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
3611
3958
|
value:
|
|
3612
3959
|
// 最近一次渲染的计算结果缓存
|
|
3613
3960
|
|
|
3961
|
+
// 快速滚动管理器
|
|
3962
|
+
|
|
3963
|
+
// Blank组件的引用,用于快速滚动时直接更新
|
|
3964
|
+
|
|
3614
3965
|
/** @deprecated BaseTable.getDoms() 已经过时,请勿调用 */
|
|
3615
3966
|
function getDoms() {
|
|
3616
|
-
|
|
3967
|
+
_utils__WEBPACK_IMPORTED_MODULE_46__["console"].warn('[kd-table] BaseTable.getDoms() 已经过时');
|
|
3617
3968
|
return this.domHelper;
|
|
3618
3969
|
}
|
|
3619
3970
|
}, {
|
|
@@ -3686,7 +4037,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
3686
4037
|
var _this$props4 = this.props,
|
|
3687
4038
|
stickyTop = _this$props4.stickyTop,
|
|
3688
4039
|
hasHeader = _this$props4.hasHeader;
|
|
3689
|
-
var renderHeader = Object(
|
|
4040
|
+
var renderHeader = Object(_renderTemplates__WEBPACK_IMPORTED_MODULE_47__["default"])('header');
|
|
3690
4041
|
var stickyRightOffset = this.hasScrollY ? this.getScrollBarWidth() : 0;
|
|
3691
4042
|
if (typeof renderHeader === 'function') {
|
|
3692
4043
|
return renderHeader(info, this.props, {
|
|
@@ -3694,7 +4045,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
3694
4045
|
});
|
|
3695
4046
|
}
|
|
3696
4047
|
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement("div", {
|
|
3697
|
-
className: classnames__WEBPACK_IMPORTED_MODULE_30___default()(
|
|
4048
|
+
className: classnames__WEBPACK_IMPORTED_MODULE_30___default()(_styles__WEBPACK_IMPORTED_MODULE_43__["Classes"].tableHeader, 'no-scrollbar'),
|
|
3698
4049
|
style: {
|
|
3699
4050
|
top: stickyTop === 0 ? undefined : stickyTop,
|
|
3700
4051
|
display: hasHeader ? undefined : 'none'
|
|
@@ -3703,7 +4054,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
3703
4054
|
info: info,
|
|
3704
4055
|
stickyRightOffset: stickyRightOffset
|
|
3705
4056
|
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement("div", {
|
|
3706
|
-
className:
|
|
4057
|
+
className: _styles__WEBPACK_IMPORTED_MODULE_43__["Classes"].verticalScrollPlaceholder,
|
|
3707
4058
|
style: this.hasScrollY ? {
|
|
3708
4059
|
width: this.getScrollBarWidth()
|
|
3709
4060
|
} : undefined
|
|
@@ -3713,7 +4064,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
3713
4064
|
key: "updateOffsetX",
|
|
3714
4065
|
value: function updateOffsetX(nextOffsetX) {
|
|
3715
4066
|
if (this.lastInfo.useVirtual.horizontal) {
|
|
3716
|
-
if (Math.abs(nextOffsetX - this.state.offsetX) >=
|
|
4067
|
+
if (Math.abs(nextOffsetX - this.state.offsetX) >= _utils__WEBPACK_IMPORTED_MODULE_45__["OVERSCAN_SIZE"] / 2) {
|
|
3717
4068
|
this.setState({
|
|
3718
4069
|
offsetX: nextOffsetX
|
|
3719
4070
|
});
|
|
@@ -3730,7 +4081,6 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
3730
4081
|
}, {
|
|
3731
4082
|
key: "syncHorizontalScroll",
|
|
3732
4083
|
value: function syncHorizontalScroll(x) {
|
|
3733
|
-
var direction = this.props.direction;
|
|
3734
4084
|
var _x = Math.abs(x);
|
|
3735
4085
|
this.updateOffsetX(_x);
|
|
3736
4086
|
var flat = this.lastInfo.flat;
|
|
@@ -3758,11 +4108,19 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
3758
4108
|
}, {
|
|
3759
4109
|
key: "getVerticalRenderRange",
|
|
3760
4110
|
value: function getVerticalRenderRange(useVirtual) {
|
|
3761
|
-
var
|
|
4111
|
+
var _this$props5 = this.props,
|
|
4112
|
+
dataSource = _this$props5.dataSource,
|
|
4113
|
+
isLowPerformance = _this$props5.isLowPerformance;
|
|
3762
4114
|
var _this$state = this.state,
|
|
3763
4115
|
offsetY = _this$state.offsetY,
|
|
3764
|
-
maxRenderHeight = _this$state.maxRenderHeight
|
|
4116
|
+
maxRenderHeight = _this$state.maxRenderHeight,
|
|
4117
|
+
previousRenderData = _this$state.previousRenderData;
|
|
3765
4118
|
var rowCount = dataSource.length;
|
|
4119
|
+
|
|
4120
|
+
// 只有在启用快速滚动时才使用 FastScrollManager 的判断
|
|
4121
|
+
if (isLowPerformance && this.fastScrollManager.getIsFastScrolling() && previousRenderData !== null && previousRenderData !== void 0 && previousRenderData.verticalRenderRange) {
|
|
4122
|
+
return previousRenderData.verticalRenderRange;
|
|
4123
|
+
}
|
|
3766
4124
|
if (useVirtual.vertical) {
|
|
3767
4125
|
return this.rowHeightManager.getRenderRange(offsetY, maxRenderHeight, rowCount);
|
|
3768
4126
|
} else {
|
|
@@ -3773,14 +4131,14 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
3773
4131
|
key: "renderTableFooter",
|
|
3774
4132
|
value: function renderTableFooter(info) {
|
|
3775
4133
|
// console.log('render footer')
|
|
3776
|
-
var _this$
|
|
3777
|
-
_this$
|
|
3778
|
-
footerDataSource = _this$
|
|
3779
|
-
getRowProps = _this$
|
|
3780
|
-
primaryKey = _this$
|
|
3781
|
-
stickyBottom = _this$
|
|
4134
|
+
var _this$props6 = this.props,
|
|
4135
|
+
_this$props6$footerDa = _this$props6.footerDataSource,
|
|
4136
|
+
footerDataSource = _this$props6$footerDa === void 0 ? [] : _this$props6$footerDa,
|
|
4137
|
+
getRowProps = _this$props6.getRowProps,
|
|
4138
|
+
primaryKey = _this$props6.primaryKey,
|
|
4139
|
+
stickyBottom = _this$props6.stickyBottom;
|
|
3782
4140
|
var stickyRightOffset = this.hasScrollY ? this.getScrollBarWidth() : 0;
|
|
3783
|
-
var renderFooter = Object(
|
|
4141
|
+
var renderFooter = Object(_renderTemplates__WEBPACK_IMPORTED_MODULE_47__["default"])('footer');
|
|
3784
4142
|
if (typeof renderFooter === 'function') {
|
|
3785
4143
|
return renderFooter(info, this.props, {
|
|
3786
4144
|
rowProps: {
|
|
@@ -3791,11 +4149,11 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
3791
4149
|
});
|
|
3792
4150
|
}
|
|
3793
4151
|
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement("div", {
|
|
3794
|
-
className: classnames__WEBPACK_IMPORTED_MODULE_30___default()(
|
|
4152
|
+
className: classnames__WEBPACK_IMPORTED_MODULE_30___default()(_styles__WEBPACK_IMPORTED_MODULE_43__["Classes"].tableFooter, _styles__WEBPACK_IMPORTED_MODULE_43__["Classes"].horizontalScrollContainer),
|
|
3795
4153
|
style: {
|
|
3796
4154
|
bottom: stickyBottom === 0 ? undefined : stickyBottom
|
|
3797
4155
|
}
|
|
3798
|
-
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement(
|
|
4156
|
+
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement(_html_table__WEBPACK_IMPORTED_MODULE_41__["HtmlTable"], {
|
|
3799
4157
|
tbodyHtmlTag: "tfoot",
|
|
3800
4158
|
data: footerDataSource,
|
|
3801
4159
|
horizontalRenderInfo: info,
|
|
@@ -3809,7 +4167,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
3809
4167
|
limit: Infinity
|
|
3810
4168
|
}
|
|
3811
4169
|
}), footerDataSource.length > 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement("div", {
|
|
3812
|
-
className:
|
|
4170
|
+
className: _styles__WEBPACK_IMPORTED_MODULE_43__["Classes"].verticalScrollPlaceholder,
|
|
3813
4171
|
style: this.hasScrollY ? {
|
|
3814
4172
|
width: this.getScrollBarWidth(),
|
|
3815
4173
|
visibility: 'initial'
|
|
@@ -3822,49 +4180,49 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
3822
4180
|
var _ref, _ref2;
|
|
3823
4181
|
var stickyRightOffset = this.hasScrollY ? this.getScrollBarWidth() : 0;
|
|
3824
4182
|
// console.log('render LockShadows')
|
|
3825
|
-
var leftLockShadowWidth = info.leftLockTotalWidth +
|
|
3826
|
-
var rightLockShadownWidth = info.rightLockTotalWidth +
|
|
4183
|
+
var leftLockShadowWidth = info.leftLockTotalWidth + _styles__WEBPACK_IMPORTED_MODULE_43__["LOCK_SHADOW_PADDING"];
|
|
4184
|
+
var rightLockShadownWidth = info.rightLockTotalWidth + _styles__WEBPACK_IMPORTED_MODULE_43__["LOCK_SHADOW_PADDING"] + stickyRightOffset;
|
|
3827
4185
|
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_31___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement("div", {
|
|
3828
|
-
className:
|
|
3829
|
-
style: (_ref = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_22___default()(_ref, Object(
|
|
4186
|
+
className: _styles__WEBPACK_IMPORTED_MODULE_43__["Classes"].lockShadowMask,
|
|
4187
|
+
style: (_ref = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_22___default()(_ref, Object(_utils__WEBPACK_IMPORTED_MODULE_45__["swapRTLDirection"])(info.direction, 'left'), 0), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_22___default()(_ref, "width", leftLockShadowWidth), _ref)
|
|
3830
4188
|
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement("div", {
|
|
3831
|
-
className: classnames__WEBPACK_IMPORTED_MODULE_30___default()(
|
|
4189
|
+
className: classnames__WEBPACK_IMPORTED_MODULE_30___default()(_styles__WEBPACK_IMPORTED_MODULE_43__["Classes"].lockShadow, _styles__WEBPACK_IMPORTED_MODULE_43__["Classes"].leftLockShadow)
|
|
3832
4190
|
})), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement("div", {
|
|
3833
|
-
className:
|
|
3834
|
-
style: (_ref2 = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_22___default()(_ref2, Object(
|
|
4191
|
+
className: _styles__WEBPACK_IMPORTED_MODULE_43__["Classes"].lockShadowMask,
|
|
4192
|
+
style: (_ref2 = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_22___default()(_ref2, Object(_utils__WEBPACK_IMPORTED_MODULE_45__["swapRTLDirection"])(info.direction, 'right'), 0), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_22___default()(_ref2, "width", rightLockShadownWidth), _ref2)
|
|
3835
4193
|
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement("div", {
|
|
3836
|
-
className: classnames__WEBPACK_IMPORTED_MODULE_30___default()(
|
|
4194
|
+
className: classnames__WEBPACK_IMPORTED_MODULE_30___default()(_styles__WEBPACK_IMPORTED_MODULE_43__["Classes"].lockShadow, _styles__WEBPACK_IMPORTED_MODULE_43__["Classes"].rightLockShadow)
|
|
3837
4195
|
})));
|
|
3838
4196
|
}
|
|
3839
4197
|
}, {
|
|
3840
4198
|
key: "renderStickyScroll",
|
|
3841
4199
|
value: function renderStickyScroll(info) {
|
|
3842
4200
|
// console.log('render stickyscroll')
|
|
3843
|
-
var _this$
|
|
3844
|
-
hasStickyScroll = _this$
|
|
3845
|
-
stickyBottom = _this$
|
|
4201
|
+
var _this$props7 = this.props,
|
|
4202
|
+
hasStickyScroll = _this$props7.hasStickyScroll,
|
|
4203
|
+
stickyBottom = _this$props7.stickyBottom;
|
|
3846
4204
|
var hasScroll = this.state.hasScroll;
|
|
3847
4205
|
var isScroll = hasStickyScroll && hasScroll;
|
|
3848
4206
|
var stickyScrollContainerStyle = this.getStickyScrollContainerStyle();
|
|
3849
4207
|
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement("div", {
|
|
3850
|
-
className: classnames__WEBPACK_IMPORTED_MODULE_30___default()(
|
|
4208
|
+
className: classnames__WEBPACK_IMPORTED_MODULE_30___default()(_styles__WEBPACK_IMPORTED_MODULE_43__["Classes"].horizontalScrollContainer, _styles__WEBPACK_IMPORTED_MODULE_43__["Classes"].horizontalStickyScrollContainer),
|
|
3851
4209
|
style: stickyScrollContainerStyle
|
|
3852
4210
|
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement("div", {
|
|
3853
|
-
className: classnames__WEBPACK_IMPORTED_MODULE_30___default()(
|
|
4211
|
+
className: classnames__WEBPACK_IMPORTED_MODULE_30___default()(_styles__WEBPACK_IMPORTED_MODULE_43__["Classes"].horizontalScrollLeftSpacer),
|
|
3854
4212
|
style: {
|
|
3855
4213
|
width: info.leftLockTotalWidth,
|
|
3856
4214
|
display: isScroll ? 'block' : 'none'
|
|
3857
4215
|
}
|
|
3858
4216
|
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement("div", {
|
|
3859
|
-
className: classnames__WEBPACK_IMPORTED_MODULE_30___default()(
|
|
4217
|
+
className: classnames__WEBPACK_IMPORTED_MODULE_30___default()(_styles__WEBPACK_IMPORTED_MODULE_43__["Classes"].stickyScroll),
|
|
3860
4218
|
style: {
|
|
3861
4219
|
display: isScroll ? 'block' : 'none',
|
|
3862
4220
|
bottom: stickyBottom
|
|
3863
4221
|
}
|
|
3864
4222
|
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement("div", {
|
|
3865
|
-
className:
|
|
4223
|
+
className: _styles__WEBPACK_IMPORTED_MODULE_43__["Classes"].stickyScrollItem
|
|
3866
4224
|
})), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement("div", {
|
|
3867
|
-
className: classnames__WEBPACK_IMPORTED_MODULE_30___default()(
|
|
4225
|
+
className: classnames__WEBPACK_IMPORTED_MODULE_30___default()(_styles__WEBPACK_IMPORTED_MODULE_43__["Classes"].horizontalScrollRightSpacer),
|
|
3868
4226
|
style: {
|
|
3869
4227
|
width: info.rightLockTotalWidth,
|
|
3870
4228
|
display: isScroll ? 'block' : 'none'
|
|
@@ -3874,14 +4232,14 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
3874
4232
|
}, {
|
|
3875
4233
|
key: "getScrollBarWidth",
|
|
3876
4234
|
value: function getScrollBarWidth() {
|
|
3877
|
-
return this.props.scrollbarWidth || Object(
|
|
4235
|
+
return this.props.scrollbarWidth || Object(_utils__WEBPACK_IMPORTED_MODULE_45__["getScrollbarSize"])().width;
|
|
3878
4236
|
}
|
|
3879
4237
|
}, {
|
|
3880
4238
|
key: "getStickyScrollContainerStyle",
|
|
3881
4239
|
value: function getStickyScrollContainerStyle() {
|
|
3882
|
-
var _this$
|
|
3883
|
-
hasStickyScroll = _this$
|
|
3884
|
-
stickyScrollHeight = _this$
|
|
4240
|
+
var _this$props8 = this.props,
|
|
4241
|
+
hasStickyScroll = _this$props8.hasStickyScroll,
|
|
4242
|
+
stickyScrollHeight = _this$props8.stickyScrollHeight;
|
|
3885
4243
|
var hasScroll = this.state.hasScroll;
|
|
3886
4244
|
var isScroll = hasStickyScroll && hasScroll;
|
|
3887
4245
|
var height = stickyScrollHeight === 'auto' ? this.getScrollBarWidth() : stickyScrollHeight;
|
|
@@ -3899,23 +4257,23 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
3899
4257
|
// console.log('render table')
|
|
3900
4258
|
var info = Object(_calculations__WEBPACK_IMPORTED_MODULE_34__["calculateRenderInfo"])(this);
|
|
3901
4259
|
this.lastInfo = info;
|
|
3902
|
-
var _this$
|
|
3903
|
-
dataSource = _this$
|
|
3904
|
-
className = _this$
|
|
3905
|
-
style = _this$
|
|
3906
|
-
hasHeader = _this$
|
|
3907
|
-
useOuterBorder = _this$
|
|
3908
|
-
isStickyHead = _this$
|
|
3909
|
-
isStickyHeader = _this$
|
|
3910
|
-
isStickyFooter = _this$
|
|
3911
|
-
isLoading = _this$
|
|
3912
|
-
getTableProps = _this$
|
|
3913
|
-
footerDataSource = _this$
|
|
3914
|
-
components = _this$
|
|
3915
|
-
bordered = _this$
|
|
3916
|
-
direction = _this$
|
|
4260
|
+
var _this$props9 = this.props,
|
|
4261
|
+
dataSource = _this$props9.dataSource,
|
|
4262
|
+
className = _this$props9.className,
|
|
4263
|
+
style = _this$props9.style,
|
|
4264
|
+
hasHeader = _this$props9.hasHeader,
|
|
4265
|
+
useOuterBorder = _this$props9.useOuterBorder,
|
|
4266
|
+
isStickyHead = _this$props9.isStickyHead,
|
|
4267
|
+
isStickyHeader = _this$props9.isStickyHeader,
|
|
4268
|
+
isStickyFooter = _this$props9.isStickyFooter,
|
|
4269
|
+
isLoading = _this$props9.isLoading,
|
|
4270
|
+
getTableProps = _this$props9.getTableProps,
|
|
4271
|
+
footerDataSource = _this$props9.footerDataSource,
|
|
4272
|
+
components = _this$props9.components,
|
|
4273
|
+
bordered = _this$props9.bordered,
|
|
4274
|
+
direction = _this$props9.direction;
|
|
3917
4275
|
info.direction = direction;
|
|
3918
|
-
var artTableWrapperClassName = classnames__WEBPACK_IMPORTED_MODULE_30___default()(
|
|
4276
|
+
var artTableWrapperClassName = classnames__WEBPACK_IMPORTED_MODULE_30___default()(_styles__WEBPACK_IMPORTED_MODULE_43__["Classes"].artTableWrapper, (_cx = {
|
|
3919
4277
|
'use-outer-border': useOuterBorder,
|
|
3920
4278
|
empty: dataSource.length === 0,
|
|
3921
4279
|
lock: info.hasLockColumn,
|
|
@@ -3923,30 +4281,30 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
3923
4281
|
'sticky-header': isStickyHeader !== null && isStickyHeader !== void 0 ? isStickyHeader : isStickyHead,
|
|
3924
4282
|
'has-footer': footerDataSource.length > 0,
|
|
3925
4283
|
'sticky-footer': isStickyFooter
|
|
3926
|
-
}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_22___default()(_cx,
|
|
4284
|
+
}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_22___default()(_cx, _styles__WEBPACK_IMPORTED_MODULE_43__["Classes"].artTableBordered, bordered), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_22___default()(_cx, 'ie-polyfill-wrapper', _utils__WEBPACK_IMPORTED_MODULE_46__["browserType"].isIE), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_22___default()(_cx, 'sticky-polyfill-wrapper', Object(_utils__WEBPACK_IMPORTED_MODULE_46__["isStickyUIDegrade"])()), _cx), className);
|
|
3927
4285
|
var artTableWrapperProps = _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_22___default()({
|
|
3928
4286
|
className: artTableWrapperClassName,
|
|
3929
4287
|
style: _objectSpread(_objectSpread({}, style), {}, {
|
|
3930
4288
|
direction: direction
|
|
3931
4289
|
})
|
|
3932
|
-
},
|
|
4290
|
+
}, _utils__WEBPACK_IMPORTED_MODULE_45__["STYLED_REF_PROP"], this.artTableWrapperRef);
|
|
3933
4291
|
var tableProps = getTableProps() || {};
|
|
3934
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_31___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement(
|
|
4292
|
+
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_31___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement(_globalStyleComponent__WEBPACK_IMPORTED_MODULE_44__["default"], {
|
|
3935
4293
|
direction: info.direction
|
|
3936
|
-
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement(
|
|
4294
|
+
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement(_styles__WEBPACK_IMPORTED_MODULE_43__["StyledArtTableWrapper"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_15___default()({}, artTableWrapperProps, {
|
|
3937
4295
|
direction: info.direction
|
|
3938
|
-
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement(
|
|
4296
|
+
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement(_loading__WEBPACK_IMPORTED_MODULE_42__["default"], {
|
|
3939
4297
|
visible: isLoading,
|
|
3940
4298
|
LoadingIcon: components.LoadingIcon,
|
|
3941
4299
|
LoadingContentWrapper: components.LoadingContentWrapper
|
|
3942
4300
|
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement("div", _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_15___default()({}, tableProps, {
|
|
3943
|
-
className: classnames__WEBPACK_IMPORTED_MODULE_30___default()(
|
|
4301
|
+
className: classnames__WEBPACK_IMPORTED_MODULE_30___default()(_styles__WEBPACK_IMPORTED_MODULE_43__["Classes"].artTable, tableProps.className)
|
|
3944
4302
|
}), this.renderTableHeader(info), this.renderTableBody(info), this.renderTableFooter(info), this.renderLockShadows(info)), this.renderStickyScroll(info))));
|
|
3945
4303
|
}
|
|
3946
4304
|
}, {
|
|
3947
4305
|
key: "componentDidMount",
|
|
3948
4306
|
value: function componentDidMount() {
|
|
3949
|
-
var _this$props$setTableW2, _this$
|
|
4307
|
+
var _this$props$setTableW2, _this$props11, _this$props$setTableD, _this$props12, _this$props$setRowHei, _this$props13;
|
|
3950
4308
|
this.rootSubscription = new rxjs__WEBPACK_IMPORTED_MODULE_32__["Subscription"]();
|
|
3951
4309
|
this.resizeSubject = new rxjs__WEBPACK_IMPORTED_MODULE_32__["Subject"]();
|
|
3952
4310
|
this.updateDOMHelper();
|
|
@@ -3954,30 +4312,30 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
3954
4312
|
this.initSubscriptions();
|
|
3955
4313
|
this.didMountOrUpdate();
|
|
3956
4314
|
// console.log('did mount end')
|
|
3957
|
-
var _this$
|
|
3958
|
-
cssVariables = _this$
|
|
3959
|
-
enableCSSVariables = _this$
|
|
3960
|
-
bordered = _this$
|
|
3961
|
-
Object(
|
|
4315
|
+
var _this$props10 = this.props,
|
|
4316
|
+
cssVariables = _this$props10.cssVariables,
|
|
4317
|
+
enableCSSVariables = _this$props10.enableCSSVariables,
|
|
4318
|
+
bordered = _this$props10.bordered;
|
|
4319
|
+
Object(_utils__WEBPACK_IMPORTED_MODULE_45__["cssPolifill"])({
|
|
3962
4320
|
variables: cssVariables || {},
|
|
3963
4321
|
enableCSSVariables: enableCSSVariables,
|
|
3964
4322
|
bordered: bordered
|
|
3965
4323
|
});
|
|
3966
|
-
(_this$props$setTableW2 = (_this$
|
|
3967
|
-
(_this$props$setTableD = (_this$
|
|
3968
|
-
(_this$props$setRowHei = (_this$
|
|
4324
|
+
(_this$props$setTableW2 = (_this$props11 = this.props).setTableWidth) === null || _this$props$setTableW2 === void 0 ? void 0 : _this$props$setTableW2.call(_this$props11, this.domHelper.tableBody.clientWidth);
|
|
4325
|
+
(_this$props$setTableD = (_this$props12 = this.props).setTableDomHelper) === null || _this$props$setTableD === void 0 ? void 0 : _this$props$setTableD.call(_this$props12, this.domHelper);
|
|
4326
|
+
(_this$props$setRowHei = (_this$props13 = this.props).setRowHeightManager) === null || _this$props$setRowHei === void 0 ? void 0 : _this$props$setRowHei.call(_this$props13, this.rowHeightManager);
|
|
3969
4327
|
}
|
|
3970
4328
|
}, {
|
|
3971
4329
|
key: "componentDidUpdate",
|
|
3972
4330
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
3973
|
-
var _this$
|
|
4331
|
+
var _this$props15;
|
|
3974
4332
|
// console.log('did update start')
|
|
3975
|
-
var _this$
|
|
3976
|
-
cssVariables = _this$
|
|
3977
|
-
enableCSSVariables = _this$
|
|
3978
|
-
bordered = _this$
|
|
3979
|
-
if (!Object(
|
|
3980
|
-
Object(
|
|
4333
|
+
var _this$props14 = this.props,
|
|
4334
|
+
cssVariables = _this$props14.cssVariables,
|
|
4335
|
+
enableCSSVariables = _this$props14.enableCSSVariables,
|
|
4336
|
+
bordered = _this$props14.bordered;
|
|
4337
|
+
if (!Object(_utils__WEBPACK_IMPORTED_MODULE_45__["shallowEqual"])(prevProps === null || prevProps === void 0 ? void 0 : prevProps.cssVariables, (_this$props15 = this.props) === null || _this$props15 === void 0 ? void 0 : _this$props15.cssVariables)) {
|
|
4338
|
+
Object(_utils__WEBPACK_IMPORTED_MODULE_45__["cssPolifill"])({
|
|
3981
4339
|
variables: cssVariables || {},
|
|
3982
4340
|
enableCSSVariables: enableCSSVariables,
|
|
3983
4341
|
bordered: bordered
|
|
@@ -3991,10 +4349,13 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
3991
4349
|
}, {
|
|
3992
4350
|
key: "didMountOrUpdate",
|
|
3993
4351
|
value: function didMountOrUpdate(prevProps, prevState) {
|
|
3994
|
-
this
|
|
3995
|
-
|
|
3996
|
-
|
|
3997
|
-
|
|
4352
|
+
var _this2 = this;
|
|
4353
|
+
window.requestAnimationFrame(function () {
|
|
4354
|
+
_this2.syncHorizontalScrollFromTableBody();
|
|
4355
|
+
_this2.updateStickyScroll();
|
|
4356
|
+
_this2.adjustNeedRenderLock();
|
|
4357
|
+
_this2.updateRowHeightManager();
|
|
4358
|
+
});
|
|
3998
4359
|
this.updateScrollLeftWhenLayoutChanged(prevProps, prevState);
|
|
3999
4360
|
}
|
|
4000
4361
|
}, {
|
|
@@ -4009,40 +4370,40 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
4009
4370
|
var prevHasFooter = prevProps.footerDataSource.length > 0;
|
|
4010
4371
|
var currentHasFooter = this.props.footerDataSource.length > 0;
|
|
4011
4372
|
if (!prevHasFooter && currentHasFooter) {
|
|
4012
|
-
Object(
|
|
4373
|
+
Object(_utils__WEBPACK_IMPORTED_MODULE_45__["getTableScrollFooterDOM"])(this.domHelper).scrollLeft = this.domHelper.virtual.scrollLeft;
|
|
4013
4374
|
}
|
|
4014
4375
|
}
|
|
4015
4376
|
}
|
|
4016
4377
|
}, {
|
|
4017
4378
|
key: "initSubscriptions",
|
|
4018
4379
|
value: function initSubscriptions() {
|
|
4019
|
-
var
|
|
4380
|
+
var _this3 = this;
|
|
4020
4381
|
var _this$domHelper2 = this.domHelper,
|
|
4021
4382
|
virtual = _this$domHelper2.virtual,
|
|
4022
4383
|
stickyScroll = _this$domHelper2.stickyScroll;
|
|
4023
|
-
this.rootSubscription.add(
|
|
4024
|
-
|
|
4025
|
-
|
|
4384
|
+
this.rootSubscription.add(_utils__WEBPACK_IMPORTED_MODULE_45__["throttledWindowResize$"].subscribe(function () {
|
|
4385
|
+
_this3.updateStickyScroll();
|
|
4386
|
+
_this3.adjustNeedRenderLock();
|
|
4026
4387
|
}));
|
|
4027
4388
|
this.resizeSubject.pipe(rxjs_operators__WEBPACK_IMPORTED_MODULE_33__["debounceTime"](100)).subscribe(function () {
|
|
4028
|
-
var
|
|
4029
|
-
(
|
|
4389
|
+
var _this3$props$setTable, _this3$props;
|
|
4390
|
+
(_this3$props$setTable = (_this3$props = _this3.props).setTableWidth) === null || _this3$props$setTable === void 0 ? void 0 : _this3$props$setTable.call(_this3$props, _this3.domHelper.tableBody.clientWidth);
|
|
4030
4391
|
});
|
|
4031
4392
|
var handleTableWrapperResize = function handleTableWrapperResize() {
|
|
4032
|
-
|
|
4393
|
+
_this3.resizeSubject.next();
|
|
4033
4394
|
};
|
|
4034
|
-
this.resizeObserver = Object(
|
|
4395
|
+
this.resizeObserver = Object(_utils__WEBPACK_IMPORTED_MODULE_45__["addResizeObserver"])(this.domHelper.artTableWrapper, handleTableWrapperResize);
|
|
4035
4396
|
|
|
4036
4397
|
// 滚动同步
|
|
4037
|
-
this.rootSubscription.add(Object(
|
|
4038
|
-
|
|
4398
|
+
this.rootSubscription.add(Object(_utils__WEBPACK_IMPORTED_MODULE_45__["syncScrollLeft"])([Object(_utils__WEBPACK_IMPORTED_MODULE_45__["getTableScrollHeaderDOM"])(this.domHelper), virtual, Object(_utils__WEBPACK_IMPORTED_MODULE_45__["getTableScrollFooterDOM"])(this.domHelper), stickyScroll], function (scrollLeft) {
|
|
4399
|
+
_this3.syncHorizontalScroll(scrollLeft);
|
|
4039
4400
|
}));
|
|
4040
4401
|
var richVisibleRects$ = Object(_helpers_getRichVisibleRectsStream__WEBPACK_IMPORTED_MODULE_37__["getRichVisibleRectsStream"])(this.domHelper.virtual, this.props$.pipe(rxjs_operators__WEBPACK_IMPORTED_MODULE_33__["skip"](1), rxjs_operators__WEBPACK_IMPORTED_MODULE_33__["mapTo"]('structure-may-change')), this.props.virtualDebugLabel).pipe(rxjs_operators__WEBPACK_IMPORTED_MODULE_33__["shareReplay"]());
|
|
4041
4402
|
|
|
4042
4403
|
// 每当可见部分发生变化的时候,调整 loading icon 的未知(如果 loading icon 存在的话)
|
|
4043
4404
|
this.rootSubscription.add(Object(rxjs__WEBPACK_IMPORTED_MODULE_32__["combineLatest"])([richVisibleRects$.pipe(rxjs_operators__WEBPACK_IMPORTED_MODULE_33__["map"](function (p) {
|
|
4044
4405
|
return p.clipRect;
|
|
4045
|
-
}), rxjs_operators__WEBPACK_IMPORTED_MODULE_33__["distinctUntilChanged"](
|
|
4406
|
+
}), rxjs_operators__WEBPACK_IMPORTED_MODULE_33__["distinctUntilChanged"](_utils__WEBPACK_IMPORTED_MODULE_45__["shallowEqual"])), this.props$.pipe(rxjs_operators__WEBPACK_IMPORTED_MODULE_33__["startWith"](null), rxjs_operators__WEBPACK_IMPORTED_MODULE_33__["pairwise"](), rxjs_operators__WEBPACK_IMPORTED_MODULE_33__["filter"](function (_ref3) {
|
|
4046
4407
|
var _ref4 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_14___default()(_ref3, 2),
|
|
4047
4408
|
prevProps = _ref4[0],
|
|
4048
4409
|
props = _ref4[1];
|
|
@@ -4050,7 +4411,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
4050
4411
|
}))]).subscribe(function (_ref5) {
|
|
4051
4412
|
var _ref6 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_14___default()(_ref5, 1),
|
|
4052
4413
|
clipRect = _ref6[0];
|
|
4053
|
-
var loadingIndicator =
|
|
4414
|
+
var loadingIndicator = _this3.domHelper.getLoadingIndicator();
|
|
4054
4415
|
if (!loadingIndicator) {
|
|
4055
4416
|
return;
|
|
4056
4417
|
}
|
|
@@ -4062,9 +4423,9 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
4062
4423
|
|
|
4063
4424
|
// 每当可见部分发生变化的时候,如果开启了虚拟滚动,则重新触发 render
|
|
4064
4425
|
this.rootSubscription.add(richVisibleRects$.pipe(rxjs_operators__WEBPACK_IMPORTED_MODULE_33__["filter"](function () {
|
|
4065
|
-
var
|
|
4066
|
-
horizontal =
|
|
4067
|
-
vertical =
|
|
4426
|
+
var _this3$lastInfo$useVi = _this3.lastInfo.useVirtual,
|
|
4427
|
+
horizontal = _this3$lastInfo$useVi.horizontal,
|
|
4428
|
+
vertical = _this3$lastInfo$useVi.vertical;
|
|
4068
4429
|
return horizontal || vertical;
|
|
4069
4430
|
}), rxjs_operators__WEBPACK_IMPORTED_MODULE_33__["map"](function (_ref7) {
|
|
4070
4431
|
var clipRect = _ref7.clipRect,
|
|
@@ -4080,9 +4441,32 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
4080
4441
|
return true;
|
|
4081
4442
|
}
|
|
4082
4443
|
// 因为 overscan 的存在,滚动较小的距离时不需要触发组件重渲染
|
|
4083
|
-
return Math.abs(x.maxRenderWidth - y.maxRenderWidth) <
|
|
4444
|
+
return Math.abs(x.maxRenderWidth - y.maxRenderWidth) < _utils__WEBPACK_IMPORTED_MODULE_45__["OVERSCAN_SIZE"] / 2 && Math.abs(x.maxRenderHeight - y.maxRenderHeight) < _utils__WEBPACK_IMPORTED_MODULE_45__["OVERSCAN_SIZE"] / 2 && Math.abs(x.offsetY - y.offsetY) < _utils__WEBPACK_IMPORTED_MODULE_45__["OVERSCAN_SIZE"] / 2;
|
|
4445
|
+
}),
|
|
4446
|
+
// 快速滚动检测和处理
|
|
4447
|
+
rxjs_operators__WEBPACK_IMPORTED_MODULE_33__["tap"](function (sizeAndOffset) {
|
|
4448
|
+
// 只有在启用快速滚动时才使用 FastScrollManager 处理滚动事件
|
|
4449
|
+
if (_this3.props.isLowPerformance) {
|
|
4450
|
+
_this3.fastScrollManager.handleScrollEvent(sizeAndOffset, {
|
|
4451
|
+
offsetY: _this3.state.offsetY,
|
|
4452
|
+
maxRenderHeight: _this3.state.maxRenderHeight,
|
|
4453
|
+
maxRenderWidth: _this3.state.maxRenderWidth
|
|
4454
|
+
}, _this3.props.dataSource.length, _this3.domHelper.virtual.scrollHeight);
|
|
4455
|
+
}
|
|
4084
4456
|
})).subscribe(function (sizeAndOffset) {
|
|
4085
|
-
|
|
4457
|
+
var _this3$topBlankRef$cu, _this3$bottomBlankRef;
|
|
4458
|
+
// 正常滚动时也需要实时更新 blank 高度,确保缓慢滚动时的视觉连续性
|
|
4459
|
+
var currentRange = _this3.rowHeightManager.getRenderRange(sizeAndOffset.offsetY, sizeAndOffset.maxRenderHeight, _this3.props.dataSource.length);
|
|
4460
|
+
|
|
4461
|
+
// 直接更新 DOM,避免等待下次渲染
|
|
4462
|
+
(_this3$topBlankRef$cu = _this3.topBlankRef.current) === null || _this3$topBlankRef$cu === void 0 ? void 0 : _this3$topBlankRef$cu.updateHeight(currentRange.topBlank);
|
|
4463
|
+
(_this3$bottomBlankRef = _this3.bottomBlankRef.current) === null || _this3$bottomBlankRef === void 0 ? void 0 : _this3$bottomBlankRef.updateHeight(currentRange.bottomBlank);
|
|
4464
|
+
|
|
4465
|
+
// 只有在启用快速滚动时才检查快速滚动状态
|
|
4466
|
+
if (_this3.props.isLowPerformance && _this3.fastScrollManager.getIsFastScrolling()) {
|
|
4467
|
+
return;
|
|
4468
|
+
}
|
|
4469
|
+
_this3.setState(sizeAndOffset);
|
|
4086
4470
|
}));
|
|
4087
4471
|
this.rootSubscription.add(richVisibleRects$.pipe(rxjs_operators__WEBPACK_IMPORTED_MODULE_33__["map"](function (_ref8) {
|
|
4088
4472
|
var clipRect = _ref8.clipRect,
|
|
@@ -4097,16 +4481,16 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
4097
4481
|
}),
|
|
4098
4482
|
// 计算得到当前行索引对应的数据块,blocks改成数组的形式,兼容快速拖动可视区域出现两个数据块的情况
|
|
4099
4483
|
rxjs_operators__WEBPACK_IMPORTED_MODULE_33__["map"](function (sizeAndOffset) {
|
|
4100
|
-
var
|
|
4484
|
+
var _this3$props$scrollLo;
|
|
4101
4485
|
var offsetY = sizeAndOffset.offsetY,
|
|
4102
4486
|
maxRenderHeight = sizeAndOffset.maxRenderHeight;
|
|
4103
|
-
var scrollDirection = offsetY -
|
|
4104
|
-
|
|
4105
|
-
var rowCount =
|
|
4106
|
-
var vertical =
|
|
4487
|
+
var scrollDirection = offsetY - _this3.offsetY >= 0 ? 'down' : 'up';
|
|
4488
|
+
_this3.offsetY = offsetY;
|
|
4489
|
+
var rowCount = _this3.props.dataSource.length;
|
|
4490
|
+
var vertical = _this3.rowHeightManager.getRenderRange(offsetY, maxRenderHeight, rowCount);
|
|
4107
4491
|
var topIndex = vertical.topIndex,
|
|
4108
4492
|
bottomIndex = vertical.bottomIndex;
|
|
4109
|
-
var blockSize = ((
|
|
4493
|
+
var blockSize = ((_this3$props$scrollLo = _this3.props.scrollLoad) === null || _this3$props$scrollLo === void 0 ? void 0 : _this3$props$scrollLo.blockSize) || 200;
|
|
4110
4494
|
var topBlockStartIndex = Math.floor(Math.max(topIndex - 1, 0) / blockSize) * blockSize;
|
|
4111
4495
|
var bottomBlockStartIndex = Math.floor((bottomIndex + 1) / blockSize) * blockSize;
|
|
4112
4496
|
return scrollDirection === 'down' ? [topBlockStartIndex, bottomBlockStartIndex] : [bottomBlockStartIndex, topBlockStartIndex];
|
|
@@ -4120,8 +4504,8 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
4120
4504
|
}),
|
|
4121
4505
|
// 过滤掉重复掉值
|
|
4122
4506
|
rxjs_operators__WEBPACK_IMPORTED_MODULE_33__["distinctUntilChanged"]()).subscribe(function (startIndex) {
|
|
4123
|
-
var
|
|
4124
|
-
(
|
|
4507
|
+
var _this3$props$scrollLo2;
|
|
4508
|
+
(_this3$props$scrollLo2 = _this3.props.scrollLoad) === null || _this3$props$scrollLo2 === void 0 ? void 0 : _this3$props$scrollLo2.callback(startIndex);
|
|
4125
4509
|
}));
|
|
4126
4510
|
}
|
|
4127
4511
|
}, {
|
|
@@ -4131,6 +4515,10 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
4131
4515
|
(_this$resizeObserver = this.resizeObserver) === null || _this$resizeObserver === void 0 ? void 0 : _this$resizeObserver.disconnect();
|
|
4132
4516
|
this.rootSubscription.unsubscribe();
|
|
4133
4517
|
this.resizeSubject.unsubscribe();
|
|
4518
|
+
// 只有在启用快速滚动时才清理快速滚动管理器
|
|
4519
|
+
if (this.props.isLowPerformance) {
|
|
4520
|
+
this.fastScrollManager.cleanup();
|
|
4521
|
+
}
|
|
4134
4522
|
}
|
|
4135
4523
|
|
|
4136
4524
|
/** 更新 DOM 节点的引用,方便其他方法直接操作 DOM */
|
|
@@ -4196,7 +4584,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
4196
4584
|
flat = _this$lastInfo2.flat,
|
|
4197
4585
|
hasLockColumn = _this$lastInfo2.hasLockColumn;
|
|
4198
4586
|
if (hasLockColumn) {
|
|
4199
|
-
var sumOfColWidth = Object(
|
|
4587
|
+
var sumOfColWidth = Object(_utils__WEBPACK_IMPORTED_MODULE_45__["sum"])(flat.full.map(function (col) {
|
|
4200
4588
|
return col.width;
|
|
4201
4589
|
}));
|
|
4202
4590
|
var nextNeedRenderLock = sumOfColWidth > this.domHelper.artTable.clientWidth;
|
|
@@ -4227,6 +4615,7 @@ _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_22___default()(Ba
|
|
|
4227
4615
|
stickyScrollHeight: 'auto',
|
|
4228
4616
|
useVirtual: 'auto',
|
|
4229
4617
|
estimatedRowHeight: 48,
|
|
4618
|
+
isLowPerformance: false,
|
|
4230
4619
|
isLoading: false,
|
|
4231
4620
|
components: {},
|
|
4232
4621
|
getTableProps: rxjs__WEBPACK_IMPORTED_MODULE_32__["noop"],
|
|
@@ -5360,6 +5749,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
5360
5749
|
/* harmony import */ var core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_9__);
|
|
5361
5750
|
/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../utils */ "./components/table/utils/index.tsx");
|
|
5362
5751
|
/* harmony import */ var _autoFill__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./autoFill */ "./components/table/pipeline/features/autoFill.tsx");
|
|
5752
|
+
/* harmony import */ var _utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./utils/touchEventUtils */ "./components/table/pipeline/features/utils/touchEventUtils.tsx");
|
|
5363
5753
|
|
|
5364
5754
|
|
|
5365
5755
|
|
|
@@ -5374,6 +5764,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
5374
5764
|
|
|
5375
5765
|
|
|
5376
5766
|
|
|
5767
|
+
|
|
5377
5768
|
var stateKey = 'columnDrag';
|
|
5378
5769
|
var SCROLL_SIZE = 30;
|
|
5379
5770
|
function disableSelect(event) {
|
|
@@ -5432,255 +5823,240 @@ function columnDrag() {
|
|
|
5432
5823
|
style: style
|
|
5433
5824
|
});
|
|
5434
5825
|
},
|
|
5435
|
-
headerCellProps: Object(_utils__WEBPACK_IMPORTED_MODULE_10__["mergeCellProps"])(col.headerCellProps, {
|
|
5436
|
-
onMouseDown:
|
|
5826
|
+
headerCellProps: Object(_utils__WEBPACK_IMPORTED_MODULE_10__["mergeCellProps"])(col.headerCellProps, _objectSpread(_objectSpread({}, isLeaf && path.length === 1 ? {
|
|
5827
|
+
onMouseDown: function onMouseDown(e) {
|
|
5437
5828
|
if (e.button !== 0 || !e.currentTarget.contains(e.target)) {
|
|
5438
5829
|
return;
|
|
5439
5830
|
}
|
|
5440
|
-
|
|
5441
|
-
|
|
5442
|
-
|
|
5443
|
-
//
|
|
5444
|
-
|
|
5445
|
-
|
|
5446
|
-
|
|
5447
|
-
|
|
5448
|
-
|
|
5449
|
-
|
|
5450
|
-
|
|
5451
|
-
|
|
5452
|
-
|
|
5453
|
-
var cloumnsSortData = {};
|
|
5454
|
-
columns.forEach(function (item, index) {
|
|
5455
|
-
cloumnsSortData[item.code] = index;
|
|
5456
|
-
});
|
|
5457
|
-
var currentTarget = e.currentTarget;
|
|
5458
|
-
var rect = e.currentTarget.parentElement.getClientRects()[0];
|
|
5459
|
-
var startX = direction === 'rtl' ? rect.right : rect.left;
|
|
5460
|
-
var mouseDownClientX = e.clientX;
|
|
5461
|
-
var mouseDownClientY = e.clientY;
|
|
5462
|
-
var moveData = [];
|
|
5463
|
-
var allColumns = Object(_utils__WEBPACK_IMPORTED_MODULE_10__["collectNodes"])(columns);
|
|
5464
|
-
var tableBodyClientRect = tableBody.getBoundingClientRect();
|
|
5465
|
-
var startScrollLeft = pipeline.ref.current.domHelper.virtual.scrollLeft;
|
|
5466
|
-
var updateScrollPosition = function updateScrollPosition(client) {
|
|
5467
|
-
var clientX = client.clientX;
|
|
5468
|
-
var left = tableBodyClientRect.left,
|
|
5469
|
-
width = tableBodyClientRect.width;
|
|
5470
|
-
if (clientX + SCROLL_SIZE >= left + width) {
|
|
5471
|
-
pipeline.ref.current.domHelper.virtual.scrollLeft += SCROLL_SIZE;
|
|
5472
|
-
}
|
|
5473
|
-
if (clientX - SCROLL_SIZE <= left) {
|
|
5474
|
-
pipeline.ref.current.domHelper.virtual.scrollLeft -= SCROLL_SIZE;
|
|
5475
|
-
}
|
|
5476
|
-
};
|
|
5477
|
-
function handleMouseMove(e) {
|
|
5478
|
-
var client = {
|
|
5479
|
-
clientX: e.clientX,
|
|
5480
|
-
clientY: e.clientY
|
|
5481
|
-
};
|
|
5482
|
-
var scrollDistance = pipeline.ref.current.domHelper.virtual.scrollLeft - startScrollLeft;
|
|
5483
|
-
var startPosition = startX - scrollDistance; // 表头最左边起点
|
|
5484
|
-
var offsetDistance = direction === 'rtl' ? startPosition - e.clientX : e.clientX - startPosition;
|
|
5485
|
-
updateScrollPosition(client);
|
|
5486
|
-
if (offsetDistance < 20) {
|
|
5487
|
-
return;
|
|
5488
|
-
} else {
|
|
5489
|
-
e.stopPropagation();
|
|
5490
|
-
}
|
|
5491
|
-
document.body.style.userSelect = 'none';
|
|
5492
|
-
currentTarget.style.cursor = 'move';
|
|
5493
|
-
|
|
5494
|
-
// 循环计算每一个的位置
|
|
5495
|
-
// if (startIndex !== replaceIndex) {
|
|
5496
|
-
// const optionColumn = columns[startIndex]
|
|
5497
|
-
// const move = startIndex > replaceIndex ? 1 : -1
|
|
5498
|
-
// let index = Math.min(startIndex, replaceIndex)
|
|
5499
|
-
// while (index < Math.max(startIndex, replaceIndex)) {
|
|
5500
|
-
// const code = columns[index].code
|
|
5501
|
-
// cloumnsTranslateData[code] += move * optionColumn.width
|
|
5502
|
-
// cloumnsTranslateData[optionColumn.code] -= move * optionColumn.width
|
|
5503
|
-
// index += move
|
|
5504
|
-
// }
|
|
5505
|
-
// }
|
|
5506
|
-
|
|
5507
|
-
// const opColumn = columns[startIndex]
|
|
5508
|
-
// let index = Math.min(startIndex, replaceIndex)
|
|
5509
|
-
// while (index <= Math.max(startIndex, replaceIndex)) {
|
|
5510
|
-
// const code = columns[index].code
|
|
5511
|
-
// if (index !== startIndex && index !== replaceIndex) {
|
|
5512
|
-
// cloumnsTranslateData[code] += opColumn.width * (index > startIndex ? -1 : 1)
|
|
5513
|
-
// cloumnsTranslateData[opColumn.code] += columns[index].width * (index < startIndex ? -1 : 1)
|
|
5514
|
-
// }
|
|
5515
|
-
// index++
|
|
5516
|
-
// }
|
|
5517
|
-
|
|
5518
|
-
// 重置位置信息
|
|
5519
|
-
cloumnsTranslateData = {};
|
|
5520
|
-
allColumns.forEach(function (item) {
|
|
5521
|
-
cloumnsTranslateData[item.code] = 0;
|
|
5522
|
-
});
|
|
5831
|
+
handlePointerDown(e.nativeEvent, false, e.currentTarget);
|
|
5832
|
+
},
|
|
5833
|
+
onTouchStart: function onTouchStart(e) {
|
|
5834
|
+
// 阻止触摸事件的默认行为
|
|
5835
|
+
if (e.cancelable) {
|
|
5836
|
+
e.preventDefault();
|
|
5837
|
+
}
|
|
5838
|
+
handlePointerDown(e.nativeEvent, true, e.currentTarget);
|
|
5839
|
+
}
|
|
5840
|
+
} : {}), {}, {
|
|
5841
|
+
style: style
|
|
5842
|
+
}))
|
|
5843
|
+
});
|
|
5523
5844
|
|
|
5524
|
-
|
|
5525
|
-
|
|
5526
|
-
|
|
5527
|
-
|
|
5528
|
-
|
|
5529
|
-
|
|
5530
|
-
|
|
5845
|
+
// 统一的拖拽处理函数
|
|
5846
|
+
function handlePointerDown(startEvent, isTouch, currentTarget) {
|
|
5847
|
+
var _currentTarget$parent;
|
|
5848
|
+
window.addEventListener('selectstart', disableSelect);
|
|
5849
|
+
var columnMoved = false;
|
|
5850
|
+
var columns = pipeline.getColumns();
|
|
5851
|
+
var _pipeline$getStateAtK2 = pipeline.getStateAtKey(stateKey, {}),
|
|
5852
|
+
cloumnsTranslateData = _pipeline$getStateAtK2.cloumnsTranslateData;
|
|
5853
|
+
var cloumnsSortData = {};
|
|
5854
|
+
columns.forEach(function (item, index) {
|
|
5855
|
+
cloumnsSortData[item.code] = index;
|
|
5856
|
+
});
|
|
5857
|
+
var rect = (_currentTarget$parent = currentTarget.parentElement) === null || _currentTarget$parent === void 0 ? void 0 : _currentTarget$parent.getClientRects()[0];
|
|
5858
|
+
if (!rect) return;
|
|
5859
|
+
var startX = direction === 'rtl' ? rect.right : rect.left;
|
|
5860
|
+
var startCoordinates = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_12__["getEventCoordinates"])(startEvent);
|
|
5861
|
+
var mouseDownClientX = startCoordinates.clientX;
|
|
5862
|
+
var mouseDownClientY = startCoordinates.clientY;
|
|
5863
|
+
var moveData = [];
|
|
5864
|
+
var allColumns = Object(_utils__WEBPACK_IMPORTED_MODULE_10__["collectNodes"])(columns);
|
|
5865
|
+
var tableBodyClientRect = tableBody.getBoundingClientRect();
|
|
5866
|
+
var startScrollLeft = pipeline.ref.current.domHelper.virtual.scrollLeft;
|
|
5867
|
+
var updateScrollPosition = function updateScrollPosition(client) {
|
|
5868
|
+
var clientX = client.clientX;
|
|
5869
|
+
var left = tableBodyClientRect.left,
|
|
5870
|
+
width = tableBodyClientRect.width;
|
|
5871
|
+
if (clientX + SCROLL_SIZE >= left + width) {
|
|
5872
|
+
pipeline.ref.current.domHelper.virtual.scrollLeft += SCROLL_SIZE;
|
|
5873
|
+
}
|
|
5874
|
+
if (clientX - SCROLL_SIZE <= left) {
|
|
5875
|
+
pipeline.ref.current.domHelper.virtual.scrollLeft -= SCROLL_SIZE;
|
|
5876
|
+
}
|
|
5877
|
+
};
|
|
5878
|
+
function handlePointerMove(e) {
|
|
5879
|
+
// 触摸事件需要阻止默认行为,防止页面滚动
|
|
5880
|
+
if (isTouch && e.cancelable) {
|
|
5881
|
+
e.preventDefault();
|
|
5882
|
+
}
|
|
5883
|
+
var coordinates = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_12__["getEventCoordinates"])(e);
|
|
5884
|
+
var client = {
|
|
5885
|
+
clientX: coordinates.clientX,
|
|
5886
|
+
clientY: coordinates.clientY
|
|
5887
|
+
};
|
|
5888
|
+
var scrollDistance = pipeline.ref.current.domHelper.virtual.scrollLeft - startScrollLeft;
|
|
5889
|
+
var startPosition = startX - scrollDistance; // 表头最左边起点
|
|
5890
|
+
var offsetDistance = direction === 'rtl' ? startPosition - coordinates.clientX : coordinates.clientX - startPosition;
|
|
5891
|
+
updateScrollPosition(client);
|
|
5892
|
+
if (offsetDistance < 20) {
|
|
5893
|
+
return;
|
|
5894
|
+
} else {
|
|
5895
|
+
e.stopPropagation();
|
|
5896
|
+
}
|
|
5897
|
+
document.body.style.userSelect = 'none';
|
|
5898
|
+
currentTarget.style.cursor = 'move';
|
|
5531
5899
|
|
|
5532
|
-
|
|
5533
|
-
|
|
5534
|
-
|
|
5535
|
-
|
|
5536
|
-
|
|
5537
|
-
|
|
5538
|
-
|
|
5539
|
-
|
|
5540
|
-
|
|
5541
|
-
|
|
5542
|
-
|
|
5543
|
-
|
|
5544
|
-
|
|
5545
|
-
|
|
5546
|
-
|
|
5547
|
-
|
|
5548
|
-
|
|
5549
|
-
|
|
5550
|
-
|
|
5551
|
-
|
|
5552
|
-
|
|
5553
|
-
|
|
5554
|
-
|
|
5555
|
-
|
|
5556
|
-
|
|
5557
|
-
|
|
5558
|
-
|
|
5559
|
-
|
|
5560
|
-
|
|
5561
|
-
|
|
5562
|
-
|
|
5563
|
-
|
|
5564
|
-
|
|
5565
|
-
|
|
5566
|
-
|
|
5567
|
-
|
|
5568
|
-
|
|
5569
|
-
|
|
5570
|
-
|
|
5571
|
-
|
|
5572
|
-
|
|
5573
|
-
code: _code,
|
|
5574
|
-
lock: _lock
|
|
5575
|
-
})) {
|
|
5576
|
-
cloumnsTranslateData[_code] -= _adjustTranslation(optionColumn.width);
|
|
5577
|
-
if (Object(_utils__WEBPACK_IMPORTED_MODULE_10__["isLeafNode"])(columns[index])) {
|
|
5578
|
-
cloumnsTranslateData[optionColumn.code] += _adjustTranslation(_width);
|
|
5579
|
-
} else {
|
|
5580
|
-
cloumnsTranslateData[optionColumn.code] += _adjustTranslation(getColumnWidth(columns[index]));
|
|
5581
|
-
moveAllChildren(_children, cloumnsTranslateData, _adjustTranslation(optionColumn.width), true);
|
|
5582
|
-
}
|
|
5583
|
-
columnMoved = true;
|
|
5584
|
-
}
|
|
5585
|
-
index--;
|
|
5900
|
+
// 重置位置信息
|
|
5901
|
+
cloumnsTranslateData = {};
|
|
5902
|
+
allColumns.forEach(function (item) {
|
|
5903
|
+
cloumnsTranslateData[item.code] = 0;
|
|
5904
|
+
});
|
|
5905
|
+
|
|
5906
|
+
// 计算平移位置
|
|
5907
|
+
var replaceIndex = 0;
|
|
5908
|
+
var totalWitdth = getColumnWidth(columns[replaceIndex]);
|
|
5909
|
+
while (totalWitdth < offsetDistance && replaceIndex < columns.length - 1) {
|
|
5910
|
+
replaceIndex++;
|
|
5911
|
+
totalWitdth += getColumnWidth(columns[replaceIndex]);
|
|
5912
|
+
}
|
|
5913
|
+
|
|
5914
|
+
// 需要取最新startIndex, 不能直接用makeRecursiveMapper提供的startIndex(因为map时还没添加选择列、充满列等后面use添加的列)
|
|
5915
|
+
var startIndex;
|
|
5916
|
+
columns.forEach(function (column, index) {
|
|
5917
|
+
if (column.code === col.code) {
|
|
5918
|
+
startIndex = index;
|
|
5919
|
+
}
|
|
5920
|
+
});
|
|
5921
|
+
var optionColumn = columns[startIndex];
|
|
5922
|
+
var index = replaceIndex;
|
|
5923
|
+
if (startIndex > replaceIndex) {
|
|
5924
|
+
// 左移
|
|
5925
|
+
while (index < startIndex) {
|
|
5926
|
+
var _columns$index = columns[index],
|
|
5927
|
+
code = _columns$index.code,
|
|
5928
|
+
lock = _columns$index.lock,
|
|
5929
|
+
width = _columns$index.width,
|
|
5930
|
+
children = _columns$index.children;
|
|
5931
|
+
if (enableMove({
|
|
5932
|
+
code: code,
|
|
5933
|
+
lock: lock
|
|
5934
|
+
})) {
|
|
5935
|
+
cloumnsTranslateData[code] += _adjustTranslation(optionColumn.width);
|
|
5936
|
+
if (Object(_utils__WEBPACK_IMPORTED_MODULE_10__["isLeafNode"])(columns[index])) {
|
|
5937
|
+
cloumnsTranslateData[optionColumn.code] -= _adjustTranslation(width);
|
|
5938
|
+
} else {
|
|
5939
|
+
cloumnsTranslateData[optionColumn.code] -= _adjustTranslation(getColumnWidth(columns[index]));
|
|
5940
|
+
moveAllChildren(children, cloumnsTranslateData, _adjustTranslation(optionColumn.width));
|
|
5586
5941
|
}
|
|
5942
|
+
columnMoved = true;
|
|
5587
5943
|
}
|
|
5588
|
-
|
|
5589
|
-
pipeline.setStateAtKey(stateKey, {
|
|
5590
|
-
cloumnsTranslateData: cloumnsTranslateData
|
|
5591
|
-
});
|
|
5592
|
-
moveData = [startIndex, replaceIndex];
|
|
5593
|
-
});
|
|
5944
|
+
index++;
|
|
5594
5945
|
}
|
|
5595
|
-
|
|
5596
|
-
|
|
5597
|
-
|
|
5598
|
-
|
|
5599
|
-
|
|
5600
|
-
|
|
5601
|
-
|
|
5946
|
+
} else if (startIndex < replaceIndex) {
|
|
5947
|
+
// 右移
|
|
5948
|
+
while (startIndex < index) {
|
|
5949
|
+
var _columns$index2 = columns[index],
|
|
5950
|
+
_code = _columns$index2.code,
|
|
5951
|
+
_lock = _columns$index2.lock,
|
|
5952
|
+
_width = _columns$index2.width,
|
|
5953
|
+
_children = _columns$index2.children;
|
|
5954
|
+
if (enableMove({
|
|
5955
|
+
code: _code,
|
|
5956
|
+
lock: _lock
|
|
5957
|
+
})) {
|
|
5958
|
+
cloumnsTranslateData[_code] -= _adjustTranslation(optionColumn.width);
|
|
5959
|
+
if (Object(_utils__WEBPACK_IMPORTED_MODULE_10__["isLeafNode"])(columns[index])) {
|
|
5960
|
+
cloumnsTranslateData[optionColumn.code] += _adjustTranslation(_width);
|
|
5961
|
+
} else {
|
|
5962
|
+
cloumnsTranslateData[optionColumn.code] += _adjustTranslation(getColumnWidth(columns[index]));
|
|
5963
|
+
moveAllChildren(_children, cloumnsTranslateData, _adjustTranslation(optionColumn.width), true);
|
|
5964
|
+
}
|
|
5965
|
+
columnMoved = true;
|
|
5602
5966
|
}
|
|
5967
|
+
index--;
|
|
5968
|
+
}
|
|
5969
|
+
}
|
|
5970
|
+
window.requestAnimationFrame(function () {
|
|
5971
|
+
pipeline.setStateAtKey(stateKey, {
|
|
5972
|
+
cloumnsTranslateData: cloumnsTranslateData
|
|
5973
|
+
});
|
|
5974
|
+
moveData = [startIndex, replaceIndex];
|
|
5975
|
+
});
|
|
5976
|
+
}
|
|
5977
|
+
function handlePointerUp(e) {
|
|
5978
|
+
Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_12__["removePointerEventListeners"])(document.body, {
|
|
5979
|
+
onPointerMove: handlePointerMove,
|
|
5980
|
+
onPointerUp: handlePointerUp
|
|
5981
|
+
}, isTouch);
|
|
5982
|
+
window.removeEventListener('selectstart', disableSelect);
|
|
5983
|
+
var endCoordinates = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_12__["getEventCoordinates"])(e);
|
|
5984
|
+
if (Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_12__["hasMovedEnough"])(mouseDownClientX, mouseDownClientY, endCoordinates.clientX, endCoordinates.clientY)) {
|
|
5985
|
+
e.stopPropagation(); // 存在移动就阻止冒泡
|
|
5986
|
+
currentTarget.addEventListener('click', stopClickPropagation); // 阻止列头点击事件,防止拖动后触发列头过滤事件
|
|
5987
|
+
}
|
|
5603
5988
|
|
|
5604
|
-
|
|
5605
|
-
|
|
5606
|
-
|
|
5607
|
-
|
|
5608
|
-
|
|
5609
|
-
|
|
5610
|
-
|
|
5611
|
-
|
|
5612
|
-
|
|
5613
|
-
|
|
5614
|
-
|
|
5615
|
-
|
|
5616
|
-
|
|
5617
|
-
|
|
5618
|
-
|
|
5619
|
-
|
|
5620
|
-
|
|
5621
|
-
|
|
5622
|
-
|
|
5623
|
-
|
|
5624
|
-
|
|
5625
|
-
|
|
5626
|
-
|
|
5627
|
-
lock = _columns$index3.lock;
|
|
5628
|
-
if (enableMove({
|
|
5629
|
-
code: code,
|
|
5630
|
-
lock: lock
|
|
5631
|
-
})) {
|
|
5632
|
-
cloumnsSortData[code] += 1;
|
|
5633
|
-
cloumnsSortData[optionColumn.code] -= 1;
|
|
5634
|
-
columnMoved = true;
|
|
5635
|
-
}
|
|
5636
|
-
index++;
|
|
5637
|
-
}
|
|
5638
|
-
} else if (startIndex < replaceIndex) {
|
|
5639
|
-
// 右移
|
|
5640
|
-
while (index > startIndex) {
|
|
5641
|
-
var _columns$index4 = columns[index],
|
|
5642
|
-
_code2 = _columns$index4.code,
|
|
5643
|
-
_lock2 = _columns$index4.lock;
|
|
5644
|
-
if (enableMove({
|
|
5645
|
-
code: _code2,
|
|
5646
|
-
lock: _lock2
|
|
5647
|
-
})) {
|
|
5648
|
-
cloumnsSortData[_code2] -= 1;
|
|
5649
|
-
cloumnsSortData[optionColumn.code] += 1;
|
|
5650
|
-
columnMoved = true;
|
|
5651
|
-
}
|
|
5652
|
-
index--;
|
|
5653
|
-
}
|
|
5989
|
+
window.requestAnimationFrame(function () {
|
|
5990
|
+
// 取消阻止列头点击事件
|
|
5991
|
+
currentTarget.removeEventListener('click', stopClickPropagation);
|
|
5992
|
+
currentTarget = null;
|
|
5993
|
+
var _moveData = moveData,
|
|
5994
|
+
_moveData2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_4___default()(_moveData, 2),
|
|
5995
|
+
startIndex = _moveData2[0],
|
|
5996
|
+
replaceIndex = _moveData2[1];
|
|
5997
|
+
var optionColumn = columns[startIndex];
|
|
5998
|
+
var index = replaceIndex;
|
|
5999
|
+
if (startIndex > replaceIndex) {
|
|
6000
|
+
// 左移
|
|
6001
|
+
while (index < startIndex) {
|
|
6002
|
+
var _columns$index3 = columns[index],
|
|
6003
|
+
code = _columns$index3.code,
|
|
6004
|
+
lock = _columns$index3.lock;
|
|
6005
|
+
if (enableMove({
|
|
6006
|
+
code: code,
|
|
6007
|
+
lock: lock
|
|
6008
|
+
})) {
|
|
6009
|
+
cloumnsSortData[code] += 1;
|
|
6010
|
+
cloumnsSortData[optionColumn.code] -= 1;
|
|
6011
|
+
columnMoved = true;
|
|
5654
6012
|
}
|
|
5655
|
-
|
|
5656
|
-
|
|
5657
|
-
|
|
5658
|
-
|
|
5659
|
-
|
|
5660
|
-
|
|
5661
|
-
|
|
5662
|
-
|
|
5663
|
-
|
|
5664
|
-
|
|
5665
|
-
|
|
5666
|
-
|
|
6013
|
+
index++;
|
|
6014
|
+
}
|
|
6015
|
+
} else if (startIndex < replaceIndex) {
|
|
6016
|
+
// 右移
|
|
6017
|
+
while (index > startIndex) {
|
|
6018
|
+
var _columns$index4 = columns[index],
|
|
6019
|
+
_code2 = _columns$index4.code,
|
|
6020
|
+
_lock2 = _columns$index4.lock;
|
|
6021
|
+
if (enableMove({
|
|
6022
|
+
code: _code2,
|
|
6023
|
+
lock: _lock2
|
|
6024
|
+
})) {
|
|
6025
|
+
cloumnsSortData[_code2] -= 1;
|
|
6026
|
+
cloumnsSortData[optionColumn.code] += 1;
|
|
6027
|
+
columnMoved = true;
|
|
5667
6028
|
}
|
|
5668
|
-
|
|
5669
|
-
|
|
5670
|
-
|
|
6029
|
+
index--;
|
|
6030
|
+
}
|
|
6031
|
+
}
|
|
6032
|
+
var onColumnDragStopped = opts.onColumnDragStopped;
|
|
6033
|
+
// 拖拽结束返回列顺序
|
|
6034
|
+
if (onColumnDragStopped) {
|
|
6035
|
+
var isRowDragColumn = function isRowDragColumn(code) {
|
|
6036
|
+
var rowDragColumnKey = pipeline.getFeatureOptions('rowDragColumnKey');
|
|
6037
|
+
return code === rowDragColumnKey;
|
|
6038
|
+
};
|
|
6039
|
+
var newColumns = sortColumns(columns, cloumnsSortData).filter(function (column) {
|
|
6040
|
+
return column.code !== _autoFill__WEBPACK_IMPORTED_MODULE_11__["FILL_COLUMN_CODE"] && !isRowDragColumn(column.code) && !Object(_utils__WEBPACK_IMPORTED_MODULE_10__["isSelectColumn"])(column);
|
|
5671
6041
|
});
|
|
5672
|
-
|
|
5673
|
-
|
|
5674
|
-
currentTarget.style.cursor = '';
|
|
6042
|
+
// TODO drag需要在resize之后use,否则这里返回的列对应的宽度不是拖拽后的
|
|
6043
|
+
onColumnDragStopped(columnMoved, newColumns);
|
|
5675
6044
|
}
|
|
5676
|
-
|
|
5677
|
-
|
|
5678
|
-
|
|
5679
|
-
|
|
5680
|
-
|
|
5681
|
-
style
|
|
5682
|
-
|
|
5683
|
-
|
|
6045
|
+
pipeline.setStateAtKey(stateKey, {
|
|
6046
|
+
cloumnsTranslateData: null
|
|
6047
|
+
});
|
|
6048
|
+
});
|
|
6049
|
+
document.body.style.userSelect = '';
|
|
6050
|
+
currentTarget.style.opacity = '';
|
|
6051
|
+
currentTarget.style.cursor = '';
|
|
6052
|
+
}
|
|
6053
|
+
var onColumnDragStart = opts.onColumnDragStart;
|
|
6054
|
+
onColumnDragStart && onColumnDragStart(col);
|
|
6055
|
+
Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_12__["addPointerEventListeners"])(document.body, {
|
|
6056
|
+
onPointerMove: handlePointerMove,
|
|
6057
|
+
onPointerUp: handlePointerUp
|
|
6058
|
+
}, isTouch);
|
|
6059
|
+
}
|
|
5684
6060
|
}));
|
|
5685
6061
|
};
|
|
5686
6062
|
}
|
|
@@ -5709,15 +6085,6 @@ function moveAllChildren(cols, cloumnsTranslateData, width, isMinus) {
|
|
|
5709
6085
|
}
|
|
5710
6086
|
});
|
|
5711
6087
|
}
|
|
5712
|
-
function _isMoveWhenClicking(mouseDownClientX, mouseDownClientY, mouseUpClientX, mouseUpClientY) {
|
|
5713
|
-
var xDiff = mouseUpClientX - mouseDownClientX;
|
|
5714
|
-
var yDiff = mouseUpClientY - mouseDownClientY;
|
|
5715
|
-
// 鼠标点按和松开的偏移量大于5px,认为存在移动
|
|
5716
|
-
if (Math.sqrt(xDiff * xDiff + yDiff * yDiff) > 5) {
|
|
5717
|
-
return true;
|
|
5718
|
-
}
|
|
5719
|
-
return false;
|
|
5720
|
-
}
|
|
5721
6088
|
|
|
5722
6089
|
/***/ }),
|
|
5723
6090
|
|
|
@@ -6204,6 +6571,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
6204
6571
|
/* harmony import */ var _internals__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../../internals */ "./components/table/internals.ts");
|
|
6205
6572
|
/* harmony import */ var _base_styles__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ../../base/styles */ "./components/table/base/styles.ts");
|
|
6206
6573
|
/* harmony import */ var _base_utils__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ../../base/utils */ "./components/table/base/utils.tsx");
|
|
6574
|
+
/* harmony import */ var _utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ./utils/touchEventUtils */ "./components/table/pipeline/features/utils/touchEventUtils.tsx");
|
|
6207
6575
|
|
|
6208
6576
|
|
|
6209
6577
|
|
|
@@ -6229,6 +6597,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
6229
6597
|
|
|
6230
6598
|
|
|
6231
6599
|
|
|
6600
|
+
|
|
6232
6601
|
var TableHeaderCellResize = styled_components__WEBPACK_IMPORTED_MODULE_15__["default"].div(_templateObject || (_templateObject = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_5___default()(["\n position: absolute;\n top: 0;\n ", ": -5px;\n height: 100%;\n width: 10px;\n cursor: ew-resize;\n display: flex;\n flex-direction: column;\n align-items: center;\n z-index:1;\n\n &:after {\n content: \"\";\n position: absolute;\n display: block;\n ", ": calc(50% - 1px);\n width: 1px;\n height: calc(100% - 14px);\n top: 7px;\n }\n"])), function (props) {
|
|
6233
6602
|
return Object(_base_utils__WEBPACK_IMPORTED_MODULE_21__["swapRTLDirection"])(props.direction, 'right');
|
|
6234
6603
|
}, function (props) {
|
|
@@ -6283,10 +6652,13 @@ function columnResize() {
|
|
|
6283
6652
|
var _opts$doubleClickCall;
|
|
6284
6653
|
(_opts$doubleClickCall = opts.doubleClickCallback) === null || _opts$doubleClickCall === void 0 ? void 0 : _opts$doubleClickCall.call(opts, e, col);
|
|
6285
6654
|
};
|
|
6286
|
-
|
|
6655
|
+
|
|
6656
|
+
// 通用的拖拽处理逻辑
|
|
6657
|
+
var handleResize = function handleResize(startEvent, col, eventType) {
|
|
6287
6658
|
window.addEventListener('selectstart', disableSelect);
|
|
6288
6659
|
var changedColumnSize = {};
|
|
6289
|
-
var
|
|
6660
|
+
var startCoordinates = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_22__["getEventCoordinates"])(startEvent);
|
|
6661
|
+
var startX = startCoordinates.clientX;
|
|
6290
6662
|
var children = col.children,
|
|
6291
6663
|
code = col.code,
|
|
6292
6664
|
_col$features = col.features,
|
|
@@ -6297,9 +6669,23 @@ function columnResize() {
|
|
|
6297
6669
|
var realMaxSize = typeof maxWidth === 'number' ? maxWidth : maxSize;
|
|
6298
6670
|
var columnSize = pipeline.getFeatureOptions(COLUMN_SIZE_KEY);
|
|
6299
6671
|
var recordColumnSize = columnSize;
|
|
6300
|
-
|
|
6301
|
-
|
|
6302
|
-
|
|
6672
|
+
|
|
6673
|
+
// 根据事件类型选择不同的事件监听器
|
|
6674
|
+
var moveEventName = eventType === 'mouse' ? 'mousemove' : 'touchmove';
|
|
6675
|
+
var endEventName = eventType === 'mouse' ? 'mouseup' : 'touchend';
|
|
6676
|
+
var moveEventOptions = eventType === 'touch' ? {
|
|
6677
|
+
passive: false
|
|
6678
|
+
} : undefined;
|
|
6679
|
+
var endEventOptions = eventType === 'touch' ? {
|
|
6680
|
+
passive: false
|
|
6681
|
+
} : undefined;
|
|
6682
|
+
var nextSize$ = Object(rxjs__WEBPACK_IMPORTED_MODULE_16__["fromEvent"])(window, moveEventName, moveEventOptions).pipe(rxjs_operators__WEBPACK_IMPORTED_MODULE_17__["takeUntil"](Object(rxjs__WEBPACK_IMPORTED_MODULE_16__["fromEvent"])(window, endEventName, endEventOptions)), rxjs_operators__WEBPACK_IMPORTED_MODULE_17__["map"](function (e) {
|
|
6683
|
+
// 触摸事件需要阻止默认行为,防止页面滚动
|
|
6684
|
+
if (eventType === 'touch' && e.cancelable) {
|
|
6685
|
+
e.preventDefault();
|
|
6686
|
+
}
|
|
6687
|
+
var coordinates = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_22__["getEventCoordinates"])(e);
|
|
6688
|
+
var movingX = coordinates.clientX;
|
|
6303
6689
|
var nextColumnSize = _objectSpread({}, columnSize);
|
|
6304
6690
|
var deltaSum = pipeline.ctx.direction === 'rtl' ? startX - movingX : movingX - startX;
|
|
6305
6691
|
var deltaRemaining = deltaSum;
|
|
@@ -6356,6 +6742,20 @@ function columnResize() {
|
|
|
6356
6742
|
}
|
|
6357
6743
|
});
|
|
6358
6744
|
};
|
|
6745
|
+
var handleMouseDown = function handleMouseDown(e, col) {
|
|
6746
|
+
e.stopPropagation();
|
|
6747
|
+
handleResize(e.nativeEvent, col, 'mouse');
|
|
6748
|
+
};
|
|
6749
|
+
|
|
6750
|
+
// 触摸事件处理函数
|
|
6751
|
+
var handleTouchStart = function handleTouchStart(e, col) {
|
|
6752
|
+
// 阻止触摸事件的默认行为
|
|
6753
|
+
if (e.cancelable) {
|
|
6754
|
+
e.preventDefault();
|
|
6755
|
+
}
|
|
6756
|
+
e.stopPropagation();
|
|
6757
|
+
handleResize(e.nativeEvent, col, 'touch');
|
|
6758
|
+
};
|
|
6359
6759
|
var isGroup = Object(_utils__WEBPACK_IMPORTED_MODULE_18__["isGroupColumn"])(pipeline.getColumns());
|
|
6360
6760
|
return pipeline.mapColumns(Object(_utils__WEBPACK_IMPORTED_MODULE_18__["makeRecursiveMapper"])(function (col) {
|
|
6361
6761
|
var _columnSize$code;
|
|
@@ -6373,6 +6773,9 @@ function columnResize() {
|
|
|
6373
6773
|
},
|
|
6374
6774
|
onMouseDown: function onMouseDown(e) {
|
|
6375
6775
|
return handleMouseDown(e, col);
|
|
6776
|
+
},
|
|
6777
|
+
onTouchStart: function onTouchStart(e) {
|
|
6778
|
+
return handleTouchStart(e, col);
|
|
6376
6779
|
}
|
|
6377
6780
|
}) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_14___default.a.createElement(TableHeaderCellResize, {
|
|
6378
6781
|
direction: pipeline.ctx.direction,
|
|
@@ -6382,6 +6785,9 @@ function columnResize() {
|
|
|
6382
6785
|
},
|
|
6383
6786
|
onMouseDown: function onMouseDown(e) {
|
|
6384
6787
|
return handleMouseDown(e, col);
|
|
6788
|
+
},
|
|
6789
|
+
onTouchStart: function onTouchStart(e) {
|
|
6790
|
+
return handleTouchStart(e, col);
|
|
6385
6791
|
}
|
|
6386
6792
|
}))),
|
|
6387
6793
|
headerCellProps: Object(_utils__WEBPACK_IMPORTED_MODULE_18__["mergeCellProps"])(col.headerCellProps, {
|
|
@@ -8944,6 +9350,8 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
8944
9350
|
/* harmony import */ var _base_styles__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../base/styles */ "./components/table/base/styles.ts");
|
|
8945
9351
|
/* harmony import */ var _const__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../const */ "./components/table/pipeline/const.ts");
|
|
8946
9352
|
/* harmony import */ var _internals__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../../internals */ "./components/table/internals.ts");
|
|
9353
|
+
/* harmony import */ var _utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./utils/touchEventUtils */ "./components/table/pipeline/features/utils/touchEventUtils.tsx");
|
|
9354
|
+
|
|
8947
9355
|
|
|
8948
9356
|
|
|
8949
9357
|
|
|
@@ -8985,8 +9393,7 @@ var defaultRowDragColumn = {
|
|
|
8985
9393
|
width: "16",
|
|
8986
9394
|
height: "16"
|
|
8987
9395
|
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_8___default.a.createElement("path", {
|
|
8988
|
-
d: "M298.688 192a64 64 0 1 0 128 0 64 64 0 0 0-128 0z m298.624 0a64 64 0 1 0 128 0 64 64 0 0 0-128 0zM298.688 512a64 64 0 1 0 128 0 64 64 0 0 0-128 0z m298.624 0a64 64 0 1 0 128 0 64 64 0 0 0-128 0z m-298.624 320a64 64 0 1 0 128 0 64 64 0 0 0-128 0z m298.624 0a64 64 0 1 0 128 0 64 64 0 0 0-128 0z"
|
|
8989
|
-
"p-id": "4278"
|
|
9396
|
+
d: "M298.688 192a64 64 0 1 0 128 0 64 64 0 0 0-128 0z m298.624 0a64 64 0 1 0 128 0 64 64 0 0 0-128 0zM298.688 512a64 64 0 1 0 128 0 64 64 0 0 0-128 0z m298.624 0a64 64 0 1 0 128 0 64 64 0 0 0-128 0z m-298.624 320a64 64 0 1 0 128 0 64 64 0 0 0-128 0z m298.624 0a64 64 0 1 0 128 0 64 64 0 0 0-128 0z"
|
|
8990
9397
|
}));
|
|
8991
9398
|
}
|
|
8992
9399
|
};
|
|
@@ -9015,19 +9422,19 @@ function rowDrag(opt) {
|
|
|
9015
9422
|
var treeModeOptions = getTreeModeOptions();
|
|
9016
9423
|
var rowDragOptions = getRowDragOptions();
|
|
9017
9424
|
var allowDragIntoRow = !!treeModeOptions && (rowDragOptions === null || rowDragOptions === void 0 ? void 0 : rowDragOptions.allowDragIntoRow);
|
|
9018
|
-
var isLeave = !
|
|
9425
|
+
var isLeave = !isPointerOnDropTarget(event, dropZoneTarget);
|
|
9019
9426
|
var overIndex = -1;
|
|
9020
9427
|
var direction = 'bottom';
|
|
9021
9428
|
if (!isLeave && dataSource.length > 0) {
|
|
9022
|
-
var overDragItem = getDragRowItem(event
|
|
9429
|
+
var overDragItem = getDragRowItem(Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventTarget"])(event), dropZoneTarget, dataSource);
|
|
9023
9430
|
if (overDragItem) {
|
|
9024
9431
|
var _rowIndex = overDragItem.rowIndex,
|
|
9025
9432
|
cell = overDragItem.cell;
|
|
9026
9433
|
overIndex = _rowIndex;
|
|
9027
|
-
direction = getDirection(cell, event.clientY, allowDragIntoRow);
|
|
9434
|
+
direction = getDirection(cell, Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventCoordinates"])(event).clientY, allowDragIntoRow);
|
|
9028
9435
|
}
|
|
9029
9436
|
}
|
|
9030
|
-
if (overIndex === -1 && dataSource.length > 0 && dropZoneTarget.contains(event
|
|
9437
|
+
if (overIndex === -1 && dataSource.length > 0 && dropZoneTarget.contains(Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventTarget"])(event))) {
|
|
9031
9438
|
overIndex = dataSource.length - 1;
|
|
9032
9439
|
direction = 'bottom';
|
|
9033
9440
|
}
|
|
@@ -9103,9 +9510,27 @@ function rowDrag(opt) {
|
|
|
9103
9510
|
}
|
|
9104
9511
|
};
|
|
9105
9512
|
var onMouseDown = function onMouseDown(event) {
|
|
9513
|
+
handlePointerDown(event.nativeEvent);
|
|
9514
|
+
};
|
|
9515
|
+
|
|
9516
|
+
// PC 单据移动端显示,兼容移动端的拖拽事件
|
|
9517
|
+
var onTouchStart = function onTouchStart(event) {
|
|
9518
|
+
// 尝试阻止触摸事件的默认行为,防止页面滚动
|
|
9519
|
+
try {
|
|
9520
|
+
if (event.cancelable) {
|
|
9521
|
+
event.preventDefault();
|
|
9522
|
+
}
|
|
9523
|
+
} catch (error) {
|
|
9524
|
+
// 忽略passive event listener错误
|
|
9525
|
+
console.warn('preventDefault failed in passive touch event listener');
|
|
9526
|
+
}
|
|
9527
|
+
handlePointerDown(event.nativeEvent);
|
|
9528
|
+
};
|
|
9529
|
+
|
|
9530
|
+
// 统一的拖拽处理函数
|
|
9531
|
+
var handlePointerDown = function handlePointerDown(startEvent) {
|
|
9106
9532
|
var _opt$isDisabled;
|
|
9107
|
-
var
|
|
9108
|
-
var startDataItem = getDragRowItem(mouseDownEvent.target, tableBody, dataSource);
|
|
9533
|
+
var startDataItem = getDragRowItem(Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventTarget"])(startEvent), tableBody, dataSource);
|
|
9109
9534
|
if (!startDataItem || startDataItem.code !== rowDragColumn.code) return;
|
|
9110
9535
|
if (opt !== null && opt !== void 0 && (_opt$isDisabled = opt.isDisabled) !== null && _opt$isDisabled !== void 0 && _opt$isDisabled.call(opt, startDataItem.row, startDataItem.rowIndex)) return;
|
|
9111
9536
|
var isValidDrag = false;
|
|
@@ -9117,7 +9542,7 @@ function rowDrag(opt) {
|
|
|
9117
9542
|
var intervalId = null;
|
|
9118
9543
|
var expandRowTimeoutId = null;
|
|
9119
9544
|
var expandRowCallBackList = [];
|
|
9120
|
-
var updateScrollPosition = function updateScrollPosition(tableBody,
|
|
9545
|
+
var updateScrollPosition = function updateScrollPosition(tableBody, moveEvent) {
|
|
9121
9546
|
if (opt !== null && opt !== void 0 && opt.suppressScrollMove) return;
|
|
9122
9547
|
if (timeoutId) {
|
|
9123
9548
|
clearTimeout(timeoutId);
|
|
@@ -9126,7 +9551,7 @@ function rowDrag(opt) {
|
|
|
9126
9551
|
clearInterval(intervalId);
|
|
9127
9552
|
}
|
|
9128
9553
|
if (!tableBody) return;
|
|
9129
|
-
var moveOffset = getScrollMoveOffset(tableBody,
|
|
9554
|
+
var moveOffset = getScrollMoveOffset(tableBody, moveEvent);
|
|
9130
9555
|
if (moveOffset === 0) {
|
|
9131
9556
|
return;
|
|
9132
9557
|
}
|
|
@@ -9136,29 +9561,53 @@ function rowDrag(opt) {
|
|
|
9136
9561
|
}, 50);
|
|
9137
9562
|
}, 500);
|
|
9138
9563
|
};
|
|
9139
|
-
var handleDragStart = function handleDragStart(
|
|
9564
|
+
var handleDragStart = function handleDragStart(event) {
|
|
9140
9565
|
var _opt$rowDragText;
|
|
9141
|
-
|
|
9566
|
+
// 屏蔽默认事件,防止文本选择、框选等
|
|
9567
|
+
try {
|
|
9568
|
+
if (event.cancelable) {
|
|
9569
|
+
event.preventDefault();
|
|
9570
|
+
}
|
|
9571
|
+
} catch (error) {
|
|
9572
|
+
// 忽略passive event listener错误
|
|
9573
|
+
console.warn('preventDefault failed in passive event listener');
|
|
9574
|
+
}
|
|
9575
|
+
// 禁用页面的文本选择
|
|
9576
|
+
document.body.style.userSelect = 'none';
|
|
9577
|
+
document.body.style.webkitUserSelect = 'none';
|
|
9578
|
+
|
|
9579
|
+
// 添加拖拽状态的CSS类,可以在样式中进一步控制
|
|
9580
|
+
document.body.classList.add('row-dragging');
|
|
9581
|
+
dragElement = createDragElement(event, tableBody); // 创建拖拽悬浮框
|
|
9142
9582
|
var isTreeTable = !!pipeline.getFeatureOptions('treeModeOptions');
|
|
9143
9583
|
dragLine = createDragLine(isTreeTable); // 创建拖拽插入指示线
|
|
9144
9584
|
var dragText = opt !== null && opt !== void 0 && opt.rowDragText ? opt === null || opt === void 0 ? void 0 : (_opt$rowDragText = opt.rowDragText) === null || _opt$rowDragText === void 0 ? void 0 : _opt$rowDragText.call(opt, startDataItem.row, startDataItem.rowIndex) : "\u7B2C".concat(startDataItem.rowIndex, "\u884C\u5185\u5BB9");
|
|
9145
9585
|
setDragText(dragElement, dragText); // 设置悬浮框显示文本
|
|
9146
9586
|
artTable.classList.add(classnames__WEBPACK_IMPORTED_MODULE_11___default()(_base_styles__WEBPACK_IMPORTED_MODULE_12__["Classes"].rowDragging));
|
|
9147
9587
|
rowDragApi.setDragStatus('start');
|
|
9148
|
-
var dragEvent = createDropTargetEvent(currentDropZone,
|
|
9588
|
+
var dragEvent = createDropTargetEvent(currentDropZone, event, startDataItem, currentDropZone);
|
|
9149
9589
|
onDragStart(dragEvent);
|
|
9150
9590
|
};
|
|
9151
|
-
var handleDragMove = function handleDragMove(
|
|
9591
|
+
var handleDragMove = function handleDragMove(moveEvent) {
|
|
9592
|
+
// 尝试屏蔽默认事件,在passive监听器中可能会失败
|
|
9593
|
+
try {
|
|
9594
|
+
if (moveEvent.cancelable) {
|
|
9595
|
+
moveEvent.preventDefault();
|
|
9596
|
+
}
|
|
9597
|
+
} catch (error) {
|
|
9598
|
+
// 忽略passive event listener错误
|
|
9599
|
+
console.warn('preventDefault failed in passive event listener');
|
|
9600
|
+
}
|
|
9152
9601
|
var isRTL = pipeline.ctx.direction === 'rtl';
|
|
9153
|
-
positionDragElemment(dragElement,
|
|
9602
|
+
positionDragElemment(dragElement, moveEvent, isRTL); // 更新拖拽悬浮框位置
|
|
9154
9603
|
rowDragApi.setDragStatus('dragging');
|
|
9155
9604
|
setDragElementIcon(dragElement, 'move');
|
|
9156
9605
|
var rowDropZones = rowDragApi.getRowDropZone();
|
|
9157
9606
|
var validDropZones = rowDropZones.concat(currentDropZone); // 可放置区域加上自身
|
|
9158
9607
|
var dropTarget = validDropZones.find(function (zone) {
|
|
9159
|
-
return
|
|
9608
|
+
return isPointerOnDropTarget(moveEvent, zone.getContainer());
|
|
9160
9609
|
}) || null;
|
|
9161
|
-
updateScrollPosition(dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.getContainer(),
|
|
9610
|
+
updateScrollPosition(dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.getContainer(), moveEvent); // 拖拽到底时让滚动条可以滚动
|
|
9162
9611
|
|
|
9163
9612
|
if (dropTarget !== lastDropTarget) {
|
|
9164
9613
|
// 拖拽离开表格
|
|
@@ -9167,7 +9616,7 @@ function rowDrag(opt) {
|
|
|
9167
9616
|
setDragElementIcon(dragElement, 'notAllowed');
|
|
9168
9617
|
hiddenDragLine(dragLine);
|
|
9169
9618
|
lastDropTarget.getContainer().classList.remove(_base_styles__WEBPACK_IMPORTED_MODULE_12__["Classes"].rowDragNoData);
|
|
9170
|
-
var dragEvent = createDropTargetEvent(lastDropTarget,
|
|
9619
|
+
var dragEvent = createDropTargetEvent(lastDropTarget, moveEvent, startDataItem, currentDropZone);
|
|
9171
9620
|
lastDropTarget.onDragLeave(dragEvent);
|
|
9172
9621
|
}
|
|
9173
9622
|
}
|
|
@@ -9188,7 +9637,7 @@ function rowDrag(opt) {
|
|
|
9188
9637
|
dragLine.classList.remove(_base_styles__WEBPACK_IMPORTED_MODULE_12__["Classes"].treeTableRowDragLine);
|
|
9189
9638
|
}
|
|
9190
9639
|
}
|
|
9191
|
-
var _dragEvent = createDropTargetEvent(dropTarget,
|
|
9640
|
+
var _dragEvent = createDropTargetEvent(dropTarget, moveEvent, startDataItem, currentDropZone);
|
|
9192
9641
|
dropTarget.onDragEnter(_dragEvent);
|
|
9193
9642
|
}
|
|
9194
9643
|
}
|
|
@@ -9201,7 +9650,7 @@ function rowDrag(opt) {
|
|
|
9201
9650
|
positionDragLine({
|
|
9202
9651
|
lineElement: dragLine,
|
|
9203
9652
|
dragZone: dropTarget,
|
|
9204
|
-
event:
|
|
9653
|
+
event: moveEvent,
|
|
9205
9654
|
isRTL: isRTL
|
|
9206
9655
|
});
|
|
9207
9656
|
}
|
|
@@ -9219,7 +9668,7 @@ function rowDrag(opt) {
|
|
|
9219
9668
|
onCollapse = treeModeOptions.onCollapse;
|
|
9220
9669
|
// 鼠标悬停所在的拖拽行信息
|
|
9221
9670
|
var dataSource = dropTarget.tableParams.getDataSource();
|
|
9222
|
-
var dragItem = getDragRowItem(
|
|
9671
|
+
var dragItem = getDragRowItem(Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventTarget"])(moveEvent), dropTarget.getContainer(), dataSource);
|
|
9223
9672
|
if (!dragItem) return;
|
|
9224
9673
|
var row = dragItem.row;
|
|
9225
9674
|
var _row$treeMetaKey = row[treeMetaKey],
|
|
@@ -9234,15 +9683,22 @@ function rowDrag(opt) {
|
|
|
9234
9683
|
}, 1000);
|
|
9235
9684
|
}
|
|
9236
9685
|
if (dropTarget.onDragging) {
|
|
9237
|
-
var _dragEvent2 = createDropTargetEvent(dropTarget,
|
|
9686
|
+
var _dragEvent2 = createDropTargetEvent(dropTarget, moveEvent, startDataItem, currentDropZone);
|
|
9238
9687
|
dropTarget.onDragging(_dragEvent2);
|
|
9239
9688
|
}
|
|
9240
9689
|
}
|
|
9241
9690
|
};
|
|
9242
|
-
var handleDragStop = function handleDragStop(
|
|
9691
|
+
var handleDragStop = function handleDragStop(endEvent) {
|
|
9243
9692
|
if (!isValidDrag) {
|
|
9244
9693
|
return;
|
|
9245
9694
|
}
|
|
9695
|
+
|
|
9696
|
+
// 恢复默认的文本选择功能
|
|
9697
|
+
document.body.style.userSelect = '';
|
|
9698
|
+
document.body.style.webkitUserSelect = '';
|
|
9699
|
+
|
|
9700
|
+
// 移除拖拽状态的CSS类
|
|
9701
|
+
document.body.classList.remove('row-dragging');
|
|
9246
9702
|
removeElement(dragElement);
|
|
9247
9703
|
removeElement(dragLine);
|
|
9248
9704
|
artTable.classList.remove(classnames__WEBPACK_IMPORTED_MODULE_11___default()(_base_styles__WEBPACK_IMPORTED_MODULE_12__["Classes"].rowDragging));
|
|
@@ -9257,10 +9713,10 @@ function rowDrag(opt) {
|
|
|
9257
9713
|
});
|
|
9258
9714
|
var validDropZones = rowDropZones.concat(currentDropZone);
|
|
9259
9715
|
var dropTarget = validDropZones.find(function (zone) {
|
|
9260
|
-
return
|
|
9716
|
+
return isPointerOnDropTarget(endEvent, zone.getContainer());
|
|
9261
9717
|
});
|
|
9262
9718
|
if (dropTarget && dropTarget.onDragStop) {
|
|
9263
|
-
var dragEvent = createDropTargetEvent(dropTarget,
|
|
9719
|
+
var dragEvent = createDropTargetEvent(dropTarget, endEvent, startDataItem, currentDropZone);
|
|
9264
9720
|
dropTarget.onDragStop(dragEvent);
|
|
9265
9721
|
}
|
|
9266
9722
|
while (expandRowCallBackList.length > 0) {
|
|
@@ -9268,32 +9724,74 @@ function rowDrag(opt) {
|
|
|
9268
9724
|
callback();
|
|
9269
9725
|
}
|
|
9270
9726
|
};
|
|
9271
|
-
|
|
9272
|
-
|
|
9273
|
-
var
|
|
9274
|
-
|
|
9275
|
-
|
|
9276
|
-
|
|
9277
|
-
|
|
9278
|
-
|
|
9279
|
-
|
|
9280
|
-
|
|
9281
|
-
|
|
9282
|
-
|
|
9283
|
-
|
|
9284
|
-
|
|
9285
|
-
|
|
9286
|
-
|
|
9287
|
-
|
|
9288
|
-
|
|
9289
|
-
|
|
9290
|
-
|
|
9291
|
-
|
|
9292
|
-
|
|
9293
|
-
|
|
9294
|
-
|
|
9295
|
-
|
|
9296
|
-
|
|
9727
|
+
|
|
9728
|
+
// 判断是鼠标事件还是触摸事件,分别监听对应的移动和结束事件
|
|
9729
|
+
var isTouchEvent = ('touches' in startEvent);
|
|
9730
|
+
if (isTouchEvent) {
|
|
9731
|
+
// 触摸事件处理
|
|
9732
|
+
var touchmove$ = Object(rxjs__WEBPACK_IMPORTED_MODULE_9__["fromEvent"])(window, 'touchmove', {
|
|
9733
|
+
passive: false
|
|
9734
|
+
});
|
|
9735
|
+
var touchend$ = Object(rxjs__WEBPACK_IMPORTED_MODULE_9__["fromEvent"])(window, 'touchend', {
|
|
9736
|
+
passive: false
|
|
9737
|
+
});
|
|
9738
|
+
var touchDragMove$ = touchmove$.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_10__["filter"])(function (moveEvent) {
|
|
9739
|
+
var coordinates = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventCoordinates"])(moveEvent);
|
|
9740
|
+
var startCoordinates = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventCoordinates"])(startEvent);
|
|
9741
|
+
var moveClientY = coordinates.clientY;
|
|
9742
|
+
var startClientY = startCoordinates.clientY;
|
|
9743
|
+
// 上下移动偏移量大于5才是有效的拖拽
|
|
9744
|
+
if (Math.abs(moveClientY - startClientY) > 5) {
|
|
9745
|
+
isValidDrag = true;
|
|
9746
|
+
}
|
|
9747
|
+
return isValidDrag;
|
|
9748
|
+
}), Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_10__["map"])(function (moveEvent) {
|
|
9749
|
+
if (!isDragging) {
|
|
9750
|
+
isDragging = true;
|
|
9751
|
+
handleDragStart(startEvent);
|
|
9752
|
+
handleDragMove(startEvent);
|
|
9753
|
+
}
|
|
9754
|
+
handleDragMove(moveEvent);
|
|
9755
|
+
}), Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_10__["takeUntil"])(touchend$));
|
|
9756
|
+
touchDragMove$.subscribe();
|
|
9757
|
+
var touchDragEnd$ = touchend$.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_10__["map"])(function (endEvent) {
|
|
9758
|
+
handleDragStop(endEvent);
|
|
9759
|
+
})).subscribe({
|
|
9760
|
+
next: function next() {
|
|
9761
|
+
touchDragEnd$.unsubscribe();
|
|
9762
|
+
}
|
|
9763
|
+
});
|
|
9764
|
+
} else {
|
|
9765
|
+
// 鼠标事件处理
|
|
9766
|
+
var mousemove$ = Object(rxjs__WEBPACK_IMPORTED_MODULE_9__["fromEvent"])(window, 'mousemove');
|
|
9767
|
+
var mouseup$ = Object(rxjs__WEBPACK_IMPORTED_MODULE_9__["fromEvent"])(window, 'mouseup');
|
|
9768
|
+
var rowDragMove$ = mousemove$.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_10__["filter"])(function (moveEvent) {
|
|
9769
|
+
var coordinates = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventCoordinates"])(moveEvent);
|
|
9770
|
+
var startCoordinates = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventCoordinates"])(startEvent);
|
|
9771
|
+
var moveClientY = coordinates.clientY;
|
|
9772
|
+
var startClientY = startCoordinates.clientY;
|
|
9773
|
+
// 上下移动偏移量大于5才是有效的拖拽
|
|
9774
|
+
if (Math.abs(moveClientY - startClientY) > 5) {
|
|
9775
|
+
isValidDrag = true;
|
|
9776
|
+
}
|
|
9777
|
+
return isValidDrag;
|
|
9778
|
+
}), Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_10__["map"])(function (moveEvent) {
|
|
9779
|
+
if (!isDragging) {
|
|
9780
|
+
isDragging = true;
|
|
9781
|
+
handleDragStart(startEvent);
|
|
9782
|
+
handleDragMove(startEvent);
|
|
9783
|
+
}
|
|
9784
|
+
handleDragMove(moveEvent);
|
|
9785
|
+
}), Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_10__["takeUntil"])(mouseup$));
|
|
9786
|
+
rowDragMove$.subscribe();
|
|
9787
|
+
var rowDragEnd$ = mouseup$.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_10__["map"])(function (endEvent) {
|
|
9788
|
+
handleDragStop(endEvent);
|
|
9789
|
+
})).subscribe({
|
|
9790
|
+
next: function next() {
|
|
9791
|
+
rowDragEnd$.unsubscribe();
|
|
9792
|
+
}
|
|
9793
|
+
});
|
|
9794
|
+
}
|
|
9297
9795
|
};
|
|
9298
9796
|
var rowDragColumn = (opt === null || opt === void 0 ? void 0 : opt.rowDragColumn) || defaultRowDragColumn;
|
|
9299
9797
|
pipeline.setFeatureOptions('rowDragColumnKey', rowDragColumn.code);
|
|
@@ -9302,7 +9800,8 @@ function rowDrag(opt) {
|
|
|
9302
9800
|
nextColumns.unshift(rowDragColumn);
|
|
9303
9801
|
pipeline.columns(nextColumns);
|
|
9304
9802
|
pipeline.addTableProps({
|
|
9305
|
-
onMouseDown: onMouseDown
|
|
9803
|
+
onMouseDown: onMouseDown,
|
|
9804
|
+
onTouchStart: onTouchStart
|
|
9306
9805
|
});
|
|
9307
9806
|
pipeline.appendRowPropsGetter(function (row, rowIndex) {
|
|
9308
9807
|
var _cx;
|
|
@@ -9371,12 +9870,12 @@ function isEleInFooter(target) {
|
|
|
9371
9870
|
}
|
|
9372
9871
|
return false;
|
|
9373
9872
|
}
|
|
9374
|
-
function createDragElement(
|
|
9873
|
+
function createDragElement(event, tableBody) {
|
|
9375
9874
|
var ELEMENT_TEMPLATE = "<div class='".concat(_base_styles__WEBPACK_IMPORTED_MODULE_12__["Classes"].rowDragElement, "'>\n <span class='").concat(_base_styles__WEBPACK_IMPORTED_MODULE_12__["Classes"].rowDragElementIcon, "'></span>\n <div class='").concat(_base_styles__WEBPACK_IMPORTED_MODULE_12__["Classes"].rowDragElementLabel, "'></div>\n </div>");
|
|
9376
9875
|
var element = document.createElement('div');
|
|
9377
9876
|
element.innerHTML = ELEMENT_TEMPLATE;
|
|
9378
9877
|
var dragElement = element.firstChild;
|
|
9379
|
-
var targetRow = findTargetRow(
|
|
9878
|
+
var targetRow = findTargetRow(Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventTarget"])(event), tableBody);
|
|
9380
9879
|
if (targetRow) {
|
|
9381
9880
|
var rect = targetRow.getBoundingClientRect();
|
|
9382
9881
|
dragElement.style.height = rect.height + 'px';
|
|
@@ -9420,9 +9919,9 @@ function positionDragLine(_ref) {
|
|
|
9420
9919
|
lineElement.style.display = 'block';
|
|
9421
9920
|
}
|
|
9422
9921
|
// 鼠标悬停所在的拖拽行信息
|
|
9423
|
-
var dragItem = getDragRowItem(event
|
|
9922
|
+
var dragItem = getDragRowItem(Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventTarget"])(event), tableContainer, dataSource);
|
|
9424
9923
|
if (!dragItem) {
|
|
9425
|
-
if (dataSource.length > 0 && tableContainer.contains(event
|
|
9924
|
+
if (dataSource.length > 0 && tableContainer.contains(Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventTarget"])(event))) {
|
|
9426
9925
|
var _rowIndex3 = dataSource.length - 1;
|
|
9427
9926
|
var _row2 = dataSource[_rowIndex3];
|
|
9428
9927
|
var _direction = 'bottom';
|
|
@@ -9450,7 +9949,7 @@ function positionDragLine(_ref) {
|
|
|
9450
9949
|
rowIndex = dragItem.rowIndex,
|
|
9451
9950
|
row = dragItem.row;
|
|
9452
9951
|
var allowDragInto = isTreeTable && allowDragIntoRow;
|
|
9453
|
-
var direction = getDirection(cell, event.clientY, allowDragInto);
|
|
9952
|
+
var direction = getDirection(cell, Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventCoordinates"])(event).clientY, allowDragInto);
|
|
9454
9953
|
var targetCell = isTreeTable ? tableContainer.querySelector("tr[data-rowindex=\"".concat(rowIndex, "\"] .").concat(_base_styles__WEBPACK_IMPORTED_MODULE_12__["Classes"].tableExtendCell)) : cell;
|
|
9455
9954
|
if (!targetCell) return;
|
|
9456
9955
|
var _getLinePosition2 = getLinePosition({
|
|
@@ -9488,8 +9987,9 @@ function positionDragElemment(element, event, isRTL) {
|
|
|
9488
9987
|
var browserWidth = (_document$body$client = (_document$body = document.body) === null || _document$body === void 0 ? void 0 : _document$body.clientWidth) !== null && _document$body$client !== void 0 ? _document$body$client : window.innerHeight || ((_document$documentEle = document.documentElement) === null || _document$documentEle === void 0 ? void 0 : _document$documentEle.clientWidth) || 0;
|
|
9489
9988
|
var browserHeight = (_document$body$client2 = (_document$body2 = document.body) === null || _document$body2 === void 0 ? void 0 : _document$body2.clientHeight) !== null && _document$body$client2 !== void 0 ? _document$body$client2 : window.innerHeight || ((_document$documentEle2 = document.documentElement) === null || _document$documentEle2 === void 0 ? void 0 : _document$documentEle2.clientHeight) || 0;
|
|
9490
9989
|
var offsetParentSize = getElementRectWithOffset(element.offsetParent);
|
|
9491
|
-
var
|
|
9492
|
-
|
|
9990
|
+
var _getEventCoordinates = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventCoordinates"])(event),
|
|
9991
|
+
clientX = _getEventCoordinates.clientX,
|
|
9992
|
+
clientY = _getEventCoordinates.clientY;
|
|
9493
9993
|
var top = clientY - offsetParentSize.top - eleHeight / 2;
|
|
9494
9994
|
var left = clientX - offsetParentSize.left;
|
|
9495
9995
|
var right = Math.max(browserWidth - clientX, 0);
|
|
@@ -9505,11 +10005,11 @@ function positionDragElemment(element, event, isRTL) {
|
|
|
9505
10005
|
right = Math.max(browserWidth + windowScrollX - element.clientWidth, 0);
|
|
9506
10006
|
}
|
|
9507
10007
|
if (isRTL) {
|
|
9508
|
-
element.style.
|
|
9509
|
-
|
|
10008
|
+
element.style.right = right + 'px';
|
|
10009
|
+
} else {
|
|
10010
|
+
element.style.left = left + 'px';
|
|
9510
10011
|
}
|
|
9511
|
-
element.style.
|
|
9512
|
-
element.style.top = "".concat(top, "px");
|
|
10012
|
+
element.style.top = top + 'px';
|
|
9513
10013
|
}
|
|
9514
10014
|
function getElementRectWithOffset(el) {
|
|
9515
10015
|
var offsetElementRect = el.getBoundingClientRect();
|
|
@@ -9576,12 +10076,13 @@ function setDragElementIcon(element, iconName) {
|
|
|
9576
10076
|
elementIcon.appendChild(iconElement);
|
|
9577
10077
|
}
|
|
9578
10078
|
function clearElementChildren(element) {
|
|
9579
|
-
while (element && element.firstChild) {
|
|
10079
|
+
while (element !== null && element !== void 0 && element.firstChild) {
|
|
9580
10080
|
element.removeChild(element.firstChild);
|
|
9581
10081
|
}
|
|
9582
10082
|
}
|
|
9583
|
-
function getScrollMoveOffset(tableBody,
|
|
9584
|
-
var
|
|
10083
|
+
function getScrollMoveOffset(tableBody, moveEvent) {
|
|
10084
|
+
var _getEventCoordinates2 = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventCoordinates"])(moveEvent),
|
|
10085
|
+
clientY = _getEventCoordinates2.clientY;
|
|
9585
10086
|
var tableBodyClientRect = tableBody.getBoundingClientRect();
|
|
9586
10087
|
var top = tableBodyClientRect.top,
|
|
9587
10088
|
height = tableBodyClientRect.height;
|
|
@@ -9599,15 +10100,19 @@ function setDragText(element, dragText) {
|
|
|
9599
10100
|
var stringNode = document.createTextNode(dragTextString);
|
|
9600
10101
|
elementIcon.appendChild(stringNode);
|
|
9601
10102
|
}
|
|
9602
|
-
function
|
|
9603
|
-
|
|
10103
|
+
function isPointerOnDropTarget(pointerEvent, target) {
|
|
10104
|
+
var eventTarget = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventTarget"])(pointerEvent);
|
|
10105
|
+
return target.contains(eventTarget);
|
|
9604
10106
|
}
|
|
9605
10107
|
function createDropTargetEvent(dropZone, event, dragItem, startDropZone) {
|
|
9606
10108
|
var dropZoneTarget = dropZone.getContainer();
|
|
9607
10109
|
var startDropZoneTagret = startDropZone.getContainer();
|
|
9608
10110
|
var rect = dropZoneTarget.getBoundingClientRect();
|
|
9609
|
-
var
|
|
9610
|
-
|
|
10111
|
+
var _getEventCoordinates3 = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventCoordinates"])(event),
|
|
10112
|
+
clientX = _getEventCoordinates3.clientX,
|
|
10113
|
+
clientY = _getEventCoordinates3.clientY;
|
|
10114
|
+
var x = clientX - rect.left;
|
|
10115
|
+
var y = clientY - rect.top;
|
|
9611
10116
|
var startDropZoneOptions = startDropZone.tableParams.getRowDragOptions();
|
|
9612
10117
|
var startCommonParams = startDropZoneOptions === null || startDropZoneOptions === void 0 ? void 0 : startDropZoneOptions.commonParams;
|
|
9613
10118
|
var targetEvent = {
|
|
@@ -9664,10 +10169,8 @@ var getLinePosition = function getLinePosition(_ref2) {
|
|
|
9664
10169
|
paddingRight = _getElementSize3.paddingRight;
|
|
9665
10170
|
var expandCellRect = cell.getBoundingClientRect();
|
|
9666
10171
|
var _row$treeMetaKey2 = row[treeMetaKey],
|
|
9667
|
-
rowKey = _row$treeMetaKey2.rowKey,
|
|
9668
10172
|
depth = _row$treeMetaKey2.depth,
|
|
9669
|
-
isLeaf = _row$treeMetaKey2.isLeaf
|
|
9670
|
-
expanded = _row$treeMetaKey2.expanded;
|
|
10173
|
+
isLeaf = _row$treeMetaKey2.isLeaf;
|
|
9671
10174
|
var addWidth = isLeaf ? iconWidth + iconGap : 0;
|
|
9672
10175
|
var indent = iconIndent + depth * indentSize + addWidth;
|
|
9673
10176
|
var x = expandCellRect.x,
|
|
@@ -11054,6 +11557,94 @@ function treeSelect(opts) {
|
|
|
11054
11557
|
|
|
11055
11558
|
/***/ }),
|
|
11056
11559
|
|
|
11560
|
+
/***/ "./components/table/pipeline/features/utils/touchEventUtils.tsx":
|
|
11561
|
+
/*!**********************************************************************!*\
|
|
11562
|
+
!*** ./components/table/pipeline/features/utils/touchEventUtils.tsx ***!
|
|
11563
|
+
\**********************************************************************/
|
|
11564
|
+
/*! exports provided: getEventCoordinates, getEventTarget, isTouchEvent, addPointerEventListeners, removePointerEventListeners, hasMovedEnough */
|
|
11565
|
+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
11566
|
+
|
|
11567
|
+
"use strict";
|
|
11568
|
+
__webpack_require__.r(__webpack_exports__);
|
|
11569
|
+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getEventCoordinates", function() { return getEventCoordinates; });
|
|
11570
|
+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getEventTarget", function() { return getEventTarget; });
|
|
11571
|
+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isTouchEvent", function() { return isTouchEvent; });
|
|
11572
|
+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "addPointerEventListeners", function() { return addPointerEventListeners; });
|
|
11573
|
+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "removePointerEventListeners", function() { return removePointerEventListeners; });
|
|
11574
|
+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hasMovedEnough", function() { return hasMovedEnough; });
|
|
11575
|
+
// 统一获取事件坐标的函数
|
|
11576
|
+
function getEventCoordinates(event) {
|
|
11577
|
+
if ('touches' in event && event.touches.length > 0) {
|
|
11578
|
+
return {
|
|
11579
|
+
clientX: event.touches[0].clientX,
|
|
11580
|
+
clientY: event.touches[0].clientY
|
|
11581
|
+
};
|
|
11582
|
+
} else if ('changedTouches' in event && event.changedTouches.length > 0) {
|
|
11583
|
+
return {
|
|
11584
|
+
clientX: event.changedTouches[0].clientX,
|
|
11585
|
+
clientY: event.changedTouches[0].clientY
|
|
11586
|
+
};
|
|
11587
|
+
} else {
|
|
11588
|
+
return {
|
|
11589
|
+
clientX: event.clientX,
|
|
11590
|
+
clientY: event.clientY
|
|
11591
|
+
};
|
|
11592
|
+
}
|
|
11593
|
+
}
|
|
11594
|
+
|
|
11595
|
+
// 获取事件目标元素
|
|
11596
|
+
function getEventTarget(event) {
|
|
11597
|
+
if ('touches' in event && event.touches.length > 0) {
|
|
11598
|
+
return document.elementFromPoint(event.touches[0].clientX, event.touches[0].clientY);
|
|
11599
|
+
}
|
|
11600
|
+
// 处理touchend事件,此时touches为空,需要使用changedTouches
|
|
11601
|
+
if ('changedTouches' in event && event.changedTouches.length > 0) {
|
|
11602
|
+
return document.elementFromPoint(event.changedTouches[0].clientX, event.changedTouches[0].clientY);
|
|
11603
|
+
}
|
|
11604
|
+
return event.target;
|
|
11605
|
+
}
|
|
11606
|
+
|
|
11607
|
+
// 判断是否为触摸事件
|
|
11608
|
+
function isTouchEvent(event) {
|
|
11609
|
+
return 'touches' in event;
|
|
11610
|
+
}
|
|
11611
|
+
|
|
11612
|
+
// 为元素添加统一的指针事件监听器
|
|
11613
|
+
function addPointerEventListeners(element, handlers, isTouchStart) {
|
|
11614
|
+
if (isTouchStart) {
|
|
11615
|
+
element.addEventListener('touchmove', handlers.onPointerMove, {
|
|
11616
|
+
passive: false
|
|
11617
|
+
});
|
|
11618
|
+
element.addEventListener('touchend', handlers.onPointerUp, {
|
|
11619
|
+
passive: false
|
|
11620
|
+
});
|
|
11621
|
+
} else {
|
|
11622
|
+
element.addEventListener('mousemove', handlers.onPointerMove);
|
|
11623
|
+
element.addEventListener('mouseup', handlers.onPointerUp);
|
|
11624
|
+
}
|
|
11625
|
+
}
|
|
11626
|
+
|
|
11627
|
+
// 移除统一的指针事件监听器
|
|
11628
|
+
function removePointerEventListeners(element, handlers, isTouchStart) {
|
|
11629
|
+
if (isTouchStart) {
|
|
11630
|
+
element.removeEventListener('touchmove', handlers.onPointerMove);
|
|
11631
|
+
element.removeEventListener('touchend', handlers.onPointerUp);
|
|
11632
|
+
} else {
|
|
11633
|
+
element.removeEventListener('mousemove', handlers.onPointerMove);
|
|
11634
|
+
element.removeEventListener('mouseup', handlers.onPointerUp);
|
|
11635
|
+
}
|
|
11636
|
+
}
|
|
11637
|
+
|
|
11638
|
+
// 检查是否移动了足够的距离(用于区分点击和拖拽)
|
|
11639
|
+
function hasMovedEnough(startX, startY, endX, endY) {
|
|
11640
|
+
var threshold = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 5;
|
|
11641
|
+
var xDiff = endX - startX;
|
|
11642
|
+
var yDiff = endY - startY;
|
|
11643
|
+
return Math.sqrt(xDiff * xDiff + yDiff * yDiff) > threshold;
|
|
11644
|
+
}
|
|
11645
|
+
|
|
11646
|
+
/***/ }),
|
|
11647
|
+
|
|
11057
11648
|
/***/ "./components/table/pipeline/index.ts":
|
|
11058
11649
|
/*!********************************************!*\
|
|
11059
11650
|
!*** ./components/table/pipeline/index.ts ***!
|