@kdcloudjs/table 1.2.2-canary.13 → 1.2.2-canary.15
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 +540 -333
- package/dist/@kdcloudjs/table.js.map +1 -1
- package/dist/@kdcloudjs/table.min.css +1 -1
- package/dist/@kdcloudjs/table.min.js +4 -4
- package/dist/@kdcloudjs/table.min.js.map +1 -1
- package/es/table/base/styles.js +8 -4
- package/es/table/base/table.d.ts +1 -0
- package/es/table/base/table.js +5 -3
- 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/styles.js +8 -4
- package/lib/table/base/table.d.ts +1 -0
- package/lib/table/base/table.js +5 -3
- 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.14
|
|
4
4
|
*
|
|
5
5
|
* Copyright 2020-present, Kingdee, Inc.
|
|
6
6
|
* All rights reserved.
|
|
@@ -3427,12 +3427,12 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
3427
3427
|
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ButtonCSS", function() { return ButtonCSS; });
|
|
3428
3428
|
/* harmony import */ var _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteral */ "./node_modules/@babel/runtime/helpers/taggedTemplateLiteral.js");
|
|
3429
3429
|
/* harmony import */ var _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_0__);
|
|
3430
|
-
/* harmony import */ var
|
|
3431
|
-
/* harmony import */ var
|
|
3432
|
-
/* harmony import */ var
|
|
3433
|
-
/* harmony import */ var
|
|
3434
|
-
/* harmony import */ var
|
|
3435
|
-
/* harmony import */ var
|
|
3430
|
+
/* harmony import */ var core_js_modules_es_array_concat_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! core-js/modules/es.array.concat.js */ "./node_modules/core-js/modules/es.array.concat.js");
|
|
3431
|
+
/* harmony import */ var core_js_modules_es_array_concat_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_concat_js__WEBPACK_IMPORTED_MODULE_1__);
|
|
3432
|
+
/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core-js/modules/es.object.to-string.js */ "./node_modules/core-js/modules/es.object.to-string.js");
|
|
3433
|
+
/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_2__);
|
|
3434
|
+
/* harmony import */ var core_js_modules_es_object_keys_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! core-js/modules/es.object.keys.js */ "./node_modules/core-js/modules/es.object.keys.js");
|
|
3435
|
+
/* harmony import */ var core_js_modules_es_object_keys_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_keys_js__WEBPACK_IMPORTED_MODULE_3__);
|
|
3436
3436
|
/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! styled-components */ "./node_modules/styled-components/dist/styled-components.browser.esm.js");
|
|
3437
3437
|
/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./utils */ "./components/table/base/utils.tsx");
|
|
3438
3438
|
|
|
@@ -3594,7 +3594,10 @@ var defaultCSSVariables = {
|
|
|
3594
3594
|
var variableConst = getCssVariableText(defaultCSSVariables);
|
|
3595
3595
|
var notBorderedStyleMixin = Object(styled_components__WEBPACK_IMPORTED_MODULE_4__["css"])(_templateObject3 || (_templateObject3 = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_0___default()(["\n --cell-border-vertical: none;\n --header-cell-border-vertical: none;\n"])));
|
|
3596
3596
|
var borderedStyleMixin = Object(styled_components__WEBPACK_IMPORTED_MODULE_4__["css"])(_templateObject4 || (_templateObject4 = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_0___default()(["\n //th\u9690\u85CF\u5217\u5BBD\u62D6\u62FD\u7684\u80CC\u666F\u8272\uFF0C\u4F7F\u7528th\u7684\u53F3\u8FB9\u6846\u4EE3\u66FF\n .", "::after{\n background-color: inherit;\n }\n"])), Classes.tableHeaderCellResize);
|
|
3597
|
-
var StyledArtTableWrapper = styled_components__WEBPACK_IMPORTED_MODULE_4__["default"].div(_templateObject5 || (_templateObject5 = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_0___default()(["\n :root {\n ", "\n }\n ", "\n\n box-sizing: border-box;\n * {\n box-sizing: border-box;\n }\n cursor: default;\n color: var(--color);\n font-size: var(--font-size);\n line-height: var(--line-height);\n position: relative;\n\n // \u8868\u683C\u5916\u8FB9\u6846\u7531 art-table-wrapper \u63D0\u4F9B\uFF0C\u800C\u4E0D\u662F\u7531\u5355\u5143\u683C\u63D0\u4F9B\n &.use-outer-border {\n ", ";\n }\n\n // \u8868\u683C\u4E0D\u542F\u7528\u8FB9\u6846\u7EBF\uFF0C\u9690\u85CFth\u3001td\u7684\u5355\u5143\u683C\u5DE6\u53F3\u8FB9\u6846\u7EBF\n &:not(.", ") {\n ", "\n }\n &.", "{\n ", "\n }\n\n .no-scrollbar {\n ::-webkit-scrollbar {\n display: none;\n }\n }\n\n .", " {\n overflow: auto;\n flex-shrink: 1;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n }\n\n .", " {\n overflow: hidden;\n background: var(--header-bgcolor);\n display: flex;\n flex-shrink: 0;\n border-bottom: var(--header-cell-border-horizontal);\n }\n\n .", " {\n display: flex;\n // justify-content: flex-start;\n align-items: center;\n height: inherit;\n }\n\n .", " {\n overflow-x:auto;\n flex-shrink: 0;\n flex-grow: 0;\n scrollbar-width: none; // \u517C\u5BB9\u706B\u72D0\n & {\n ::-webkit-scrollbar {\n display:none;\n }\n }\n }\n\n .", " {\n display: flex;\n flex: none;\n }\n .", "{\n flex-grow:1;\n }\n .", ", .", " {\n background: var(--bgcolor);\n overflow: auto;\n overflow-x: hidden;\n overflow-anchor: none;\n position:relative;\n &.empty {\n position: relative;\n }\n }\n\n .", " {\n position: relative;\n }\n .", ", .", " {\n .", "{\n background-color: #e6effb !important;\n }\n .", "{\n border-top: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-", ": 1px solid #0E5FD8 !important;\n }\n .", "{\n border-bottom: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-", ": 1px solid #0E5FD8 !important;\n }\n }\n\n .", " {\n user-select:none;\n }\n\n .", " {\n user-select:none;\n // .", " .", " >td{\n // cursor:move;\n // }\n\n // .", " .", " >td{\n // cursor:no-drop;\n // }\n \n }\n\n .", "{\n opacity: 0.5;\n }\n .", "{\n border: 1px solid var(--primary-color)\n }\n\n .", " td{\n border-top: 1px solid var(--primary-color) !important;\n border-bottom: 1px solid var(--primary-color) !important;\n \n }\n .", " td:first-child{\n border-", ": 1px solid var(--primary-color) !important;\n \n }\n .", " td:last-child{\n border-", ": 1px solid var(--primary-color) !important;\n \n }\n\n\n // .", " td{\n // border-top: 1px solid var(--primary-color) !important;\n // }\n\n .", " td{\n border-top: 1px solid var(--primary-color) !important;\n border-bottom: 1px solid var(--primary-color) !important;\n }\n\n .", " td:first-child{\n border-", ": 1px solid var(--primary-color) !important;\n }\n\n .", " td:last-child{\n border-", ": 1px solid var(--primary-color) !important;\n }\n\n // .", " td{\n // border-bottom: 1px solid var(--primary-color) !important;\n // }\n\n .", " {\n cursor:pointer;\n }\n\n\n &.sticky-header .", " {\n position: sticky;\n top: 0;\n z-index: ", ";\n }\n\n &.sticky-footer .", " {\n position: sticky;\n bottom: 0;\n z-index: ", ";\n }\n\n table {\n width: 0;\n table-layout: fixed;\n border-collapse: separate;\n border-spacing: 0;\n display: table;\n margin: 0;\n padding: 0;\n flex-shrink: 0;\n flex-grow: 0;\n position:relative;\n }\n\n // \u5728 tr \u4E0A\u8BBE\u7F6E .no-hover \u53EF\u4EE5\u7981\u7528\u9F20\u6807\u60AC\u505C\u6548\u679C\n tr:not(.no-hover):hover > td {\n background: var(--hover-bgcolor);\n }\n // \u4F7F\u7528 js \u6DFB\u52A0\u60AC\u6D6E\u6548\u679C\n tr:not(.no-hover).row-hover > td {\n background: var(--hover-bgcolor);\n }\n // \u5728 tr \u8BBE\u7F6E highlight \u53EF\u4EE5\u4E3A\u5E95\u4E0B\u7684 td \u8BBE\u7F6E\u4E3A\u9AD8\u4EAE\u8272\n // \u800C\u8BBE\u7F6E .no-highlight \u7684\u8BDD\u5219\u53EF\u4EE5\u7981\u7528\u9AD8\u4EAE\u6548\u679C\uFF1B\n tr:not(.no-highlight).highlight > td {\n background: var(--highlight-bgcolor);\n }\n\n th {\n font-weight: normal;\n text-align: ", ";\n padding: var(--cell-padding);\n height: var(--header-row-height);\n color: var(--header-color);\n background: var(--header-bgcolor);\n border:1px solid transparent;\n border-", ": var(--header-cell-border-vertical);\n border-bottom: var(--header-cell-border-horizontal);\n position: relative;\n }\n\n th.resizeable{\n border-", ": var(--header-cell-border-vertical)\n }\n\n th.", " {\n border-", ": var(--header-cell-border-vertical);\n border-bottom: none;\n }\n\n tr.", " th {\n border-top: var(--header-cell-border-horizontal);\n }\n th.", " {\n border-", ": var(--header-cell-border-vertical);\n }\n\n td {\n padding: var(--cell-padding);\n background: var(--bgcolor);\n height: var(--row-height);\n border:1px solid transparent;\n border-", ": var(--cell-border-vertical);\n border-bottom: var(--cell-border-horizontal);\n word-break: break-all;\n }\n td.", " {\n border-", ": var(--cell-border-vertical);\n }\n tr.", " td {\n border-top: var(--cell-border-horizontal);\n }\n &.has-header tbody tr.", " td {\n border-top: none;\n }\n &.has-footer tbody tr.", " td {\n border-bottom: none;\n }\n\n .", ",\n .", " {\n z-index: ", ";\n }\n\n //#region \u9501\u5217\u9634\u5F71\n .", " {\n position: absolute;\n top: 0;\n bottom: 0;\n z-index: ", ";\n pointer-events: none;\n overflow: hidden;\n\n .", " {\n height: 100%;\n }\n\n .", " {\n margin-", ": ", "px;\n \n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-", ": var(--cell-border-vertical);\n }\n }\n\n .", " {\n margin-", ": ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-", ": var(--cell-border-vertical);\n }\n }\n }\n //#endregion\n\n //#region \u7A7A\u8868\u683C\u5C55\u73B0\n .", " {\n pointer-events: none;\n color: #99a3b3;\n font-size: 12px;\n text-align: center;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n\n .empty-image {\n width: 50px;\n height: 50px;\n }\n\n .empty-tips {\n margin-top: 16px;\n line-height: 1.5;\n }\n }\n //#endregion\n\n //#region sticky\u517C\u5BB9\n &.sticky-polyfill-wrapper{\n //\u9501\u5B9A\u5217\u517C\u5BB9 \u4EC5\u5728\u9501\u5B9A\u5217\u7684\u60C5\u51B5\u4E0B\u751F\u6548\n .", " {\n overflow-x: hidden;\n }\n .", ", .", " {\n position:relative;\n }\n .", " {\n overflow: hidden;\n display: flex;\n }\n .", " {\n position: relative;\n }\n\n .", " {\n display: flex;\n overflow: auto;\n overflow-x: hidden;\n overflow-anchor: none;\n }\n\n .", ", .", "{\n position: absolute;\n z-index: ", ";\n top: 0;\n }\n .", "{\n ", ":0;\n }\n .", "{\n rig", "ht:0;\n }\n\n .", "{\n .", "{\n position: absolute;\n top: 0;\n width: 100%;\n z-index: ", ";\n }\n }\n\n tr:not(.no-hover).row-hover > td {\n background: var(--hover-bgcolor);\n }\n }\n //#endregion sticky\u517C\u5BB9\n\n //#region \u7C98\u6027\u6EDA\u52A8\u6761\n .", "{\n display:flex;\n background: var(--bgcolor);\n }\n .", "{\n height: 1px;\n flex-shrink: 0;\n border-top: 1px solid var(--border-color);\n }\n\n .", "{\n height: 1px;\n flex-shrink: 0;\n border-top: 1px solid var(--border-color);\n }\n .", " {\n overflow-y: hidden;\n overflow-x: auto;\n z-index: ", ";\n flex-shrink: 1;\n flex-grow: 0;\n border-top: 1px solid var(--border-color);\n }\n\n .", " {\n // \u5FC5\u987B\u6709\u9AD8\u5EA6\u624D\u80FD\u51FA\u73B0\u6EDA\u52A8\u6761\n height: 1px;\n visibility: hidden;\n }\n //#endregion\n\n //#region \u52A0\u8F7D\u6837\u5F0F\n .", " {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: auto;\n\n .", " {\n filter: none;\n width: 100%;\n height: 100%;\n overflow: hidden;//\u5217\u5168\u90E8\u56FA\u5B9A\u65F6\uFF0C\u5B58\u5728\u53CC\u6A2A\u5411\u6EDA\u52A8\u6761\n display: flex;\n position: relative;\n flex-direction: column;\n }\n\n .", " {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n pointer-events: none;\n }\n\n .", " {\n position: sticky;\n z-index: ", ";\n transform: translateY(-50%);\n }\n }\n //#endregion\n\n //#region \u8868\u683C\u8FC7\u6EE4\n .", " {\n color:var(--icon-color);\n &.active{\n color:var(--primary-color);\n }\n padding: 6px 4px;\n &:hover{\n background-color: #e5e5e5;\n }\n &:focus {\n outline: none\n }\n }\n //#endregion\n\n //#region \u8868\u683C\u6392\u5E8F\n .", " {\n color:var(--icon-color);\n &.active{\n color:var(--primary-color);\n }\n }\n .", " {\n color:var(--icon-color);\n &.active{\n color:var(--primary-color);\n }\n }\n //#endregion\n\n //#region \u6EDA\u52A8\u6761\u5360\u4F4D\n .", " {\n // visibility: hidden;\n background: var(--header-bgcolor);\n position:sticky;\n z-index:5;\n ", ":0px;\n flex-shrink: 0;\n }\n .", " .", " {\n border-top: var(--cell-border-horizontal);\n }\n //#endregion\n\n //#region \u62D6\u62FD\u5217\u5BBD\u5927\u5C0F\n .", "::after{\n background-color: var(--border-color);\n }\n //\u89E3\u51B3\u90E8\u5206\u6D4F\u89C8\u5668(chrome109)\u6700\u540E\u4E00\u4E2A\u5355\u5143\u683C\u7684\u5217\u5BBD\u62D6\u62FD\u533A\u57DF\u7EDD\u5BF9\u5B9A\u4F4D\u8D85\u51FA\u8868\u683C\uFF0C\u5BFC\u81F4\u8868\u683C\u7AD6\u5206\u5272\u7EBF\u65E0\u6CD5\u5BF9\u9F50\n .", " th.", " .", "{\n ", ": 0;\n width: 5px;\n &::after{\n ", ": 4px;\n }\n }\n"])), variableConst, variableConst, outerBorderStyleMixin, Classes.artTableBordered, notBorderedStyleMixin, Classes.artTableBordered, borderedStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableFooter, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, function (props) {
|
|
3597
|
+
var StyledArtTableWrapper = styled_components__WEBPACK_IMPORTED_MODULE_4__["default"].div(_templateObject5 || (_templateObject5 = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_0___default()(["\n ", "\n box-sizing: border-box;\n * {\n box-sizing: border-box;\n }\n cursor: default;\n color: var(--color);\n font-size: var(--font-size);\n line-height: var(--line-height);\n position: relative;\n\n // \u8868\u683C\u5916\u8FB9\u6846\u7531 art-table-wrapper \u63D0\u4F9B\uFF0C\u800C\u4E0D\u662F\u7531\u5355\u5143\u683C\u63D0\u4F9B\n &.use-outer-border {\n ", ";\n }\n\n // \u8868\u683C\u4E0D\u542F\u7528\u8FB9\u6846\u7EBF\uFF0C\u9690\u85CFth\u3001td\u7684\u5355\u5143\u683C\u5DE6\u53F3\u8FB9\u6846\u7EBF\n &:not(.", ") {\n ", "\n }\n &.", "{\n ", "\n }\n\n .no-scrollbar {\n ::-webkit-scrollbar {\n display: none;\n }\n }\n\n .", " {\n overflow: auto;\n flex-shrink: 1;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n }\n\n .", " {\n overflow: hidden;\n background: var(--header-bgcolor);\n display: flex;\n flex-shrink: 0;\n border-bottom: var(--header-cell-border-horizontal);\n }\n\n .", " {\n display: flex;\n // justify-content: flex-start;\n align-items: center;\n height: inherit;\n }\n\n .", " {\n overflow-x:auto;\n flex-shrink: 0;\n flex-grow: 0;\n scrollbar-width: none; // \u517C\u5BB9\u706B\u72D0\n & {\n ::-webkit-scrollbar {\n display:none;\n }\n }\n }\n\n .", " {\n display: flex;\n flex: none;\n }\n .", "{\n flex-grow:1;\n }\n .", ", .", " {\n background: var(--bgcolor);\n overflow: auto;\n overflow-x: hidden;\n overflow-anchor: none;\n position:relative;\n &.empty {\n position: relative;\n }\n }\n\n .", " {\n position: relative;\n }\n .", ", .", " {\n .", "{\n background-color: #e6effb !important;\n }\n .", "{\n border-top: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-", ": 1px solid #0E5FD8 !important;\n }\n .", "{\n border-bottom: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-", ": 1px solid #0E5FD8 !important;\n }\n }\n\n .", " {\n user-select:none;\n }\n\n .", " {\n user-select:none;\n // .", " .", " >td{\n // cursor:move;\n // }\n\n // .", " .", " >td{\n // cursor:no-drop;\n // }\n \n }\n\n .", "{\n opacity: 0.5;\n }\n .", "{\n border: 1px solid var(--primary-color)\n }\n\n .", " td{\n border-top: 1px solid var(--primary-color) !important;\n border-bottom: 1px solid var(--primary-color) !important;\n \n }\n .", " td:first-child{\n border-", ": 1px solid var(--primary-color) !important;\n \n }\n .", " td:last-child{\n border-", ": 1px solid var(--primary-color) !important;\n \n }\n\n\n // .", " td{\n // border-top: 1px solid var(--primary-color) !important;\n // }\n\n .", " td{\n border-top: 1px solid var(--primary-color) !important;\n border-bottom: 1px solid var(--primary-color) !important;\n }\n\n .", " td:first-child{\n border-", ": 1px solid var(--primary-color) !important;\n }\n\n .", " td:last-child{\n border-", ": 1px solid var(--primary-color) !important;\n }\n\n // .", " td{\n // border-bottom: 1px solid var(--primary-color) !important;\n // }\n\n .", " {\n cursor:pointer;\n }\n\n\n &.sticky-header .", " {\n position: sticky;\n top: 0;\n z-index: ", ";\n }\n\n &.sticky-footer .", " {\n position: sticky;\n bottom: 0;\n z-index: ", ";\n }\n\n table {\n width: 0;\n table-layout: fixed;\n border-collapse: separate;\n border-spacing: 0;\n display: table;\n margin: 0;\n padding: 0;\n flex-shrink: 0;\n flex-grow: 0;\n position:relative;\n }\n\n // \u5728 tr \u4E0A\u8BBE\u7F6E .no-hover \u53EF\u4EE5\u7981\u7528\u9F20\u6807\u60AC\u505C\u6548\u679C\n tr:not(.no-hover):hover > td {\n background: var(--hover-bgcolor);\n }\n // \u4F7F\u7528 js \u6DFB\u52A0\u60AC\u6D6E\u6548\u679C\n tr:not(.no-hover).row-hover > td {\n background: var(--hover-bgcolor);\n }\n // \u5728 tr \u8BBE\u7F6E highlight \u53EF\u4EE5\u4E3A\u5E95\u4E0B\u7684 td \u8BBE\u7F6E\u4E3A\u9AD8\u4EAE\u8272\n // \u800C\u8BBE\u7F6E .no-highlight \u7684\u8BDD\u5219\u53EF\u4EE5\u7981\u7528\u9AD8\u4EAE\u6548\u679C\uFF1B\n tr:not(.no-highlight).highlight > td {\n background: var(--highlight-bgcolor);\n }\n\n th {\n font-weight: normal;\n text-align: ", ";\n padding: var(--cell-padding);\n height: var(--header-row-height);\n color: var(--header-color);\n background: var(--header-bgcolor);\n border:1px solid transparent;\n border-", ": var(--header-cell-border-vertical);\n border-bottom: var(--header-cell-border-horizontal);\n position: relative;\n }\n\n th.resizeable{\n border-", ": var(--header-cell-border-vertical)\n }\n\n th.", " {\n border-", ": var(--header-cell-border-vertical);\n border-bottom: none;\n }\n\n tr.", " th {\n border-top: var(--header-cell-border-horizontal);\n }\n th.", " {\n border-", ": var(--header-cell-border-vertical);\n }\n\n td {\n padding: var(--cell-padding);\n background: var(--bgcolor);\n height: var(--row-height);\n border:1px solid transparent;\n border-", ": var(--cell-border-vertical);\n border-bottom: var(--cell-border-horizontal);\n word-break: break-all;\n }\n td.", " {\n border-", ": var(--cell-border-vertical);\n }\n tr.", " td {\n border-top: var(--cell-border-horizontal);\n }\n &.has-header tbody tr.", " td {\n border-top: none;\n }\n &.has-footer tbody tr.", " td {\n border-bottom: none;\n }\n\n .", ",\n .", " {\n z-index: ", ";\n }\n\n //#region \u9501\u5217\u9634\u5F71\n .", " {\n position: absolute;\n top: 0;\n bottom: 0;\n z-index: ", ";\n pointer-events: none;\n overflow: hidden;\n\n .", " {\n height: 100%;\n }\n\n .", " {\n margin-", ": ", "px;\n \n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-", ": var(--cell-border-vertical);\n }\n }\n\n .", " {\n margin-", ": ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-", ": var(--cell-border-vertical);\n }\n }\n }\n //#endregion\n\n //#region \u7A7A\u8868\u683C\u5C55\u73B0\n .", " {\n pointer-events: none;\n color: #99a3b3;\n font-size: 12px;\n text-align: center;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n\n .empty-image {\n width: 50px;\n height: 50px;\n }\n\n .empty-tips {\n margin-top: 16px;\n line-height: 1.5;\n }\n }\n //#endregion\n\n //#region sticky\u517C\u5BB9\n &.sticky-polyfill-wrapper{\n //\u9501\u5B9A\u5217\u517C\u5BB9 \u4EC5\u5728\u9501\u5B9A\u5217\u7684\u60C5\u51B5\u4E0B\u751F\u6548\n .", " {\n overflow-x: hidden;\n }\n .", ", .", " {\n position:relative;\n }\n .", " {\n overflow: hidden;\n display: flex;\n }\n .", " {\n position: relative;\n }\n\n .", " {\n display: flex;\n overflow: auto;\n overflow-x: hidden;\n overflow-anchor: none;\n }\n\n .", ", .", "{\n position: absolute;\n z-index: ", ";\n top: 0;\n }\n .", "{\n ", ":0;\n }\n .", "{\n rig", "ht:0;\n }\n\n .", "{\n .", "{\n position: absolute;\n top: 0;\n width: 100%;\n z-index: ", ";\n }\n }\n\n tr:not(.no-hover).row-hover > td {\n background: var(--hover-bgcolor);\n }\n }\n //#endregion sticky\u517C\u5BB9\n\n //#region \u7C98\u6027\u6EDA\u52A8\u6761\n .", "{\n display:flex;\n background: var(--bgcolor);\n }\n .", "{\n height: 1px;\n flex-shrink: 0;\n border-top: 1px solid var(--border-color);\n }\n\n .", "{\n height: 1px;\n flex-shrink: 0;\n border-top: 1px solid var(--border-color);\n }\n .", " {\n overflow-y: hidden;\n overflow-x: auto;\n z-index: ", ";\n flex-shrink: 1;\n flex-grow: 0;\n border-top: 1px solid var(--border-color);\n }\n\n .", " {\n // \u5FC5\u987B\u6709\u9AD8\u5EA6\u624D\u80FD\u51FA\u73B0\u6EDA\u52A8\u6761\n height: 1px;\n visibility: hidden;\n }\n //#endregion\n\n //#region \u52A0\u8F7D\u6837\u5F0F\n .", " {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: auto;\n\n .", " {\n filter: none;\n width: 100%;\n height: 100%;\n overflow: hidden;//\u5217\u5168\u90E8\u56FA\u5B9A\u65F6\uFF0C\u5B58\u5728\u53CC\u6A2A\u5411\u6EDA\u52A8\u6761\n display: flex;\n position: relative;\n flex-direction: column;\n }\n\n .", " {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n pointer-events: none;\n }\n\n .", " {\n position: sticky;\n z-index: ", ";\n transform: translateY(-50%);\n }\n }\n //#endregion\n\n //#region \u8868\u683C\u8FC7\u6EE4\n .", " {\n color:var(--icon-color);\n &.active{\n color:var(--primary-color);\n }\n padding: 6px 4px;\n &:hover{\n background-color: #e5e5e5;\n }\n &:focus {\n outline: none\n }\n }\n //#endregion\n\n //#region \u8868\u683C\u6392\u5E8F\n .", " {\n color:var(--icon-color);\n &.active{\n color:var(--primary-color);\n }\n }\n .", " {\n color:var(--icon-color);\n &.active{\n color:var(--primary-color);\n }\n }\n //#endregion\n\n //#region \u6EDA\u52A8\u6761\u5360\u4F4D\n .", " {\n // visibility: hidden;\n background: var(--header-bgcolor);\n position:sticky;\n z-index:5;\n ", ":0px;\n flex-shrink: 0;\n }\n .", " .", " {\n border-top: var(--cell-border-horizontal);\n }\n //#endregion\n\n //#region \u62D6\u62FD\u5217\u5BBD\u5927\u5C0F\n .", "::after{\n background-color: var(--border-color);\n }\n //\u89E3\u51B3\u90E8\u5206\u6D4F\u89C8\u5668(chrome109)\u6700\u540E\u4E00\u4E2A\u5355\u5143\u683C\u7684\u5217\u5BBD\u62D6\u62FD\u533A\u57DF\u7EDD\u5BF9\u5B9A\u4F4D\u8D85\u51FA\u8868\u683C\uFF0C\u5BFC\u81F4\u8868\u683C\u7AD6\u5206\u5272\u7EBF\u65E0\u6CD5\u5BF9\u9F50\n .", " th.", " .", "{\n ", ": 0;\n width: 5px;\n &::after{\n ", ": 4px;\n }\n }\n"])), function (_ref) {
|
|
3598
|
+
var prefixCls = _ref.prefixCls;
|
|
3599
|
+
return prefixCls ? "&.".concat(prefixCls, "-table {:root {").concat(variableConst, "} ").concat(variableConst, "}") : ":root {".concat(variableConst, "} ").concat(variableConst);
|
|
3600
|
+
}, outerBorderStyleMixin, Classes.artTableBordered, notBorderedStyleMixin, Classes.artTableBordered, borderedStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableFooter, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, function (props) {
|
|
3598
3601
|
return Object(_utils__WEBPACK_IMPORTED_MODULE_5__["swapRTLDirection"])(props.direction, 'left');
|
|
3599
3602
|
}, Classes.tableCellRangeBottom, Classes.tableCellRangeRight, function (props) {
|
|
3600
3603
|
return Object(_utils__WEBPACK_IMPORTED_MODULE_5__["swapRTLDirection"])(props.direction, 'right');
|
|
@@ -4271,7 +4274,8 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
4271
4274
|
footerDataSource = _this$props9.footerDataSource,
|
|
4272
4275
|
components = _this$props9.components,
|
|
4273
4276
|
bordered = _this$props9.bordered,
|
|
4274
|
-
direction = _this$props9.direction
|
|
4277
|
+
direction = _this$props9.direction,
|
|
4278
|
+
prefixCls = _this$props9.prefixCls;
|
|
4275
4279
|
info.direction = direction;
|
|
4276
4280
|
var artTableWrapperClassName = classnames__WEBPACK_IMPORTED_MODULE_30___default()(_styles__WEBPACK_IMPORTED_MODULE_43__["Classes"].artTableWrapper, (_cx = {
|
|
4277
4281
|
'use-outer-border': useOuterBorder,
|
|
@@ -4281,7 +4285,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
4281
4285
|
'sticky-header': isStickyHeader !== null && isStickyHeader !== void 0 ? isStickyHeader : isStickyHead,
|
|
4282
4286
|
'has-footer': footerDataSource.length > 0,
|
|
4283
4287
|
'sticky-footer': isStickyFooter
|
|
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);
|
|
4288
|
+
}, _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"])()), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_22___default()(_cx, "".concat(prefixCls, "-table"), prefixCls), _cx), className);
|
|
4285
4289
|
var artTableWrapperProps = _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_22___default()({
|
|
4286
4290
|
className: artTableWrapperClassName,
|
|
4287
4291
|
style: _objectSpread(_objectSpread({}, style), {}, {
|
|
@@ -4292,7 +4296,8 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
4292
4296
|
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"], {
|
|
4293
4297
|
direction: info.direction
|
|
4294
4298
|
}), /*#__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, {
|
|
4295
|
-
direction: info.direction
|
|
4299
|
+
direction: info.direction,
|
|
4300
|
+
prefixCls: this.props.prefixCls
|
|
4296
4301
|
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_31___default.a.createElement(_loading__WEBPACK_IMPORTED_MODULE_42__["default"], {
|
|
4297
4302
|
visible: isLoading,
|
|
4298
4303
|
LoadingIcon: components.LoadingIcon,
|
|
@@ -5749,6 +5754,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
5749
5754
|
/* 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__);
|
|
5750
5755
|
/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../utils */ "./components/table/utils/index.tsx");
|
|
5751
5756
|
/* harmony import */ var _autoFill__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./autoFill */ "./components/table/pipeline/features/autoFill.tsx");
|
|
5757
|
+
/* harmony import */ var _utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./utils/touchEventUtils */ "./components/table/pipeline/features/utils/touchEventUtils.tsx");
|
|
5752
5758
|
|
|
5753
5759
|
|
|
5754
5760
|
|
|
@@ -5763,6 +5769,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
5763
5769
|
|
|
5764
5770
|
|
|
5765
5771
|
|
|
5772
|
+
|
|
5766
5773
|
var stateKey = 'columnDrag';
|
|
5767
5774
|
var SCROLL_SIZE = 30;
|
|
5768
5775
|
function disableSelect(event) {
|
|
@@ -5821,255 +5828,240 @@ function columnDrag() {
|
|
|
5821
5828
|
style: style
|
|
5822
5829
|
});
|
|
5823
5830
|
},
|
|
5824
|
-
headerCellProps: Object(_utils__WEBPACK_IMPORTED_MODULE_10__["mergeCellProps"])(col.headerCellProps, {
|
|
5825
|
-
onMouseDown:
|
|
5831
|
+
headerCellProps: Object(_utils__WEBPACK_IMPORTED_MODULE_10__["mergeCellProps"])(col.headerCellProps, _objectSpread(_objectSpread({}, isLeaf && path.length === 1 ? {
|
|
5832
|
+
onMouseDown: function onMouseDown(e) {
|
|
5826
5833
|
if (e.button !== 0 || !e.currentTarget.contains(e.target)) {
|
|
5827
5834
|
return;
|
|
5828
5835
|
}
|
|
5829
|
-
|
|
5830
|
-
|
|
5831
|
-
|
|
5832
|
-
//
|
|
5833
|
-
|
|
5834
|
-
|
|
5835
|
-
|
|
5836
|
-
|
|
5837
|
-
|
|
5838
|
-
|
|
5839
|
-
|
|
5840
|
-
|
|
5841
|
-
|
|
5842
|
-
var cloumnsSortData = {};
|
|
5843
|
-
columns.forEach(function (item, index) {
|
|
5844
|
-
cloumnsSortData[item.code] = index;
|
|
5845
|
-
});
|
|
5846
|
-
var currentTarget = e.currentTarget;
|
|
5847
|
-
var rect = e.currentTarget.parentElement.getClientRects()[0];
|
|
5848
|
-
var startX = direction === 'rtl' ? rect.right : rect.left;
|
|
5849
|
-
var mouseDownClientX = e.clientX;
|
|
5850
|
-
var mouseDownClientY = e.clientY;
|
|
5851
|
-
var moveData = [];
|
|
5852
|
-
var allColumns = Object(_utils__WEBPACK_IMPORTED_MODULE_10__["collectNodes"])(columns);
|
|
5853
|
-
var tableBodyClientRect = tableBody.getBoundingClientRect();
|
|
5854
|
-
var startScrollLeft = pipeline.ref.current.domHelper.virtual.scrollLeft;
|
|
5855
|
-
var updateScrollPosition = function updateScrollPosition(client) {
|
|
5856
|
-
var clientX = client.clientX;
|
|
5857
|
-
var left = tableBodyClientRect.left,
|
|
5858
|
-
width = tableBodyClientRect.width;
|
|
5859
|
-
if (clientX + SCROLL_SIZE >= left + width) {
|
|
5860
|
-
pipeline.ref.current.domHelper.virtual.scrollLeft += SCROLL_SIZE;
|
|
5861
|
-
}
|
|
5862
|
-
if (clientX - SCROLL_SIZE <= left) {
|
|
5863
|
-
pipeline.ref.current.domHelper.virtual.scrollLeft -= SCROLL_SIZE;
|
|
5864
|
-
}
|
|
5865
|
-
};
|
|
5866
|
-
function handleMouseMove(e) {
|
|
5867
|
-
var client = {
|
|
5868
|
-
clientX: e.clientX,
|
|
5869
|
-
clientY: e.clientY
|
|
5870
|
-
};
|
|
5871
|
-
var scrollDistance = pipeline.ref.current.domHelper.virtual.scrollLeft - startScrollLeft;
|
|
5872
|
-
var startPosition = startX - scrollDistance; // 表头最左边起点
|
|
5873
|
-
var offsetDistance = direction === 'rtl' ? startPosition - e.clientX : e.clientX - startPosition;
|
|
5874
|
-
updateScrollPosition(client);
|
|
5875
|
-
if (offsetDistance < 20) {
|
|
5876
|
-
return;
|
|
5877
|
-
} else {
|
|
5878
|
-
e.stopPropagation();
|
|
5879
|
-
}
|
|
5880
|
-
document.body.style.userSelect = 'none';
|
|
5881
|
-
currentTarget.style.cursor = 'move';
|
|
5882
|
-
|
|
5883
|
-
// 循环计算每一个的位置
|
|
5884
|
-
// if (startIndex !== replaceIndex) {
|
|
5885
|
-
// const optionColumn = columns[startIndex]
|
|
5886
|
-
// const move = startIndex > replaceIndex ? 1 : -1
|
|
5887
|
-
// let index = Math.min(startIndex, replaceIndex)
|
|
5888
|
-
// while (index < Math.max(startIndex, replaceIndex)) {
|
|
5889
|
-
// const code = columns[index].code
|
|
5890
|
-
// cloumnsTranslateData[code] += move * optionColumn.width
|
|
5891
|
-
// cloumnsTranslateData[optionColumn.code] -= move * optionColumn.width
|
|
5892
|
-
// index += move
|
|
5893
|
-
// }
|
|
5894
|
-
// }
|
|
5895
|
-
|
|
5896
|
-
// const opColumn = columns[startIndex]
|
|
5897
|
-
// let index = Math.min(startIndex, replaceIndex)
|
|
5898
|
-
// while (index <= Math.max(startIndex, replaceIndex)) {
|
|
5899
|
-
// const code = columns[index].code
|
|
5900
|
-
// if (index !== startIndex && index !== replaceIndex) {
|
|
5901
|
-
// cloumnsTranslateData[code] += opColumn.width * (index > startIndex ? -1 : 1)
|
|
5902
|
-
// cloumnsTranslateData[opColumn.code] += columns[index].width * (index < startIndex ? -1 : 1)
|
|
5903
|
-
// }
|
|
5904
|
-
// index++
|
|
5905
|
-
// }
|
|
5906
|
-
|
|
5907
|
-
// 重置位置信息
|
|
5908
|
-
cloumnsTranslateData = {};
|
|
5909
|
-
allColumns.forEach(function (item) {
|
|
5910
|
-
cloumnsTranslateData[item.code] = 0;
|
|
5911
|
-
});
|
|
5836
|
+
handlePointerDown(e.nativeEvent, false, e.currentTarget);
|
|
5837
|
+
},
|
|
5838
|
+
onTouchStart: function onTouchStart(e) {
|
|
5839
|
+
// 阻止触摸事件的默认行为
|
|
5840
|
+
if (e.cancelable) {
|
|
5841
|
+
e.preventDefault();
|
|
5842
|
+
}
|
|
5843
|
+
handlePointerDown(e.nativeEvent, true, e.currentTarget);
|
|
5844
|
+
}
|
|
5845
|
+
} : {}), {}, {
|
|
5846
|
+
style: style
|
|
5847
|
+
}))
|
|
5848
|
+
});
|
|
5912
5849
|
|
|
5913
|
-
|
|
5914
|
-
|
|
5915
|
-
|
|
5916
|
-
|
|
5917
|
-
|
|
5918
|
-
|
|
5919
|
-
|
|
5850
|
+
// 统一的拖拽处理函数
|
|
5851
|
+
function handlePointerDown(startEvent, isTouch, currentTarget) {
|
|
5852
|
+
var _currentTarget$parent;
|
|
5853
|
+
window.addEventListener('selectstart', disableSelect);
|
|
5854
|
+
var columnMoved = false;
|
|
5855
|
+
var columns = pipeline.getColumns();
|
|
5856
|
+
var _pipeline$getStateAtK2 = pipeline.getStateAtKey(stateKey, {}),
|
|
5857
|
+
cloumnsTranslateData = _pipeline$getStateAtK2.cloumnsTranslateData;
|
|
5858
|
+
var cloumnsSortData = {};
|
|
5859
|
+
columns.forEach(function (item, index) {
|
|
5860
|
+
cloumnsSortData[item.code] = index;
|
|
5861
|
+
});
|
|
5862
|
+
var rect = (_currentTarget$parent = currentTarget.parentElement) === null || _currentTarget$parent === void 0 ? void 0 : _currentTarget$parent.getClientRects()[0];
|
|
5863
|
+
if (!rect) return;
|
|
5864
|
+
var startX = direction === 'rtl' ? rect.right : rect.left;
|
|
5865
|
+
var startCoordinates = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_12__["getEventCoordinates"])(startEvent);
|
|
5866
|
+
var mouseDownClientX = startCoordinates.clientX;
|
|
5867
|
+
var mouseDownClientY = startCoordinates.clientY;
|
|
5868
|
+
var moveData = [];
|
|
5869
|
+
var allColumns = Object(_utils__WEBPACK_IMPORTED_MODULE_10__["collectNodes"])(columns);
|
|
5870
|
+
var tableBodyClientRect = tableBody.getBoundingClientRect();
|
|
5871
|
+
var startScrollLeft = pipeline.ref.current.domHelper.virtual.scrollLeft;
|
|
5872
|
+
var updateScrollPosition = function updateScrollPosition(client) {
|
|
5873
|
+
var clientX = client.clientX;
|
|
5874
|
+
var left = tableBodyClientRect.left,
|
|
5875
|
+
width = tableBodyClientRect.width;
|
|
5876
|
+
if (clientX + SCROLL_SIZE >= left + width) {
|
|
5877
|
+
pipeline.ref.current.domHelper.virtual.scrollLeft += SCROLL_SIZE;
|
|
5878
|
+
}
|
|
5879
|
+
if (clientX - SCROLL_SIZE <= left) {
|
|
5880
|
+
pipeline.ref.current.domHelper.virtual.scrollLeft -= SCROLL_SIZE;
|
|
5881
|
+
}
|
|
5882
|
+
};
|
|
5883
|
+
function handlePointerMove(e) {
|
|
5884
|
+
// 触摸事件需要阻止默认行为,防止页面滚动
|
|
5885
|
+
if (isTouch && e.cancelable) {
|
|
5886
|
+
e.preventDefault();
|
|
5887
|
+
}
|
|
5888
|
+
var coordinates = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_12__["getEventCoordinates"])(e);
|
|
5889
|
+
var client = {
|
|
5890
|
+
clientX: coordinates.clientX,
|
|
5891
|
+
clientY: coordinates.clientY
|
|
5892
|
+
};
|
|
5893
|
+
var scrollDistance = pipeline.ref.current.domHelper.virtual.scrollLeft - startScrollLeft;
|
|
5894
|
+
var startPosition = startX - scrollDistance; // 表头最左边起点
|
|
5895
|
+
var offsetDistance = direction === 'rtl' ? startPosition - coordinates.clientX : coordinates.clientX - startPosition;
|
|
5896
|
+
updateScrollPosition(client);
|
|
5897
|
+
if (offsetDistance < 20) {
|
|
5898
|
+
return;
|
|
5899
|
+
} else {
|
|
5900
|
+
e.stopPropagation();
|
|
5901
|
+
}
|
|
5902
|
+
document.body.style.userSelect = 'none';
|
|
5903
|
+
currentTarget.style.cursor = 'move';
|
|
5920
5904
|
|
|
5921
|
-
|
|
5922
|
-
|
|
5923
|
-
|
|
5924
|
-
|
|
5925
|
-
|
|
5926
|
-
|
|
5927
|
-
|
|
5928
|
-
|
|
5929
|
-
|
|
5930
|
-
|
|
5931
|
-
|
|
5932
|
-
|
|
5933
|
-
|
|
5934
|
-
|
|
5935
|
-
|
|
5936
|
-
|
|
5937
|
-
|
|
5938
|
-
|
|
5939
|
-
|
|
5940
|
-
|
|
5941
|
-
|
|
5942
|
-
|
|
5943
|
-
|
|
5944
|
-
|
|
5945
|
-
|
|
5946
|
-
|
|
5947
|
-
|
|
5948
|
-
|
|
5949
|
-
|
|
5950
|
-
|
|
5951
|
-
|
|
5952
|
-
|
|
5953
|
-
|
|
5954
|
-
|
|
5955
|
-
|
|
5956
|
-
|
|
5957
|
-
|
|
5958
|
-
|
|
5959
|
-
|
|
5960
|
-
|
|
5961
|
-
|
|
5962
|
-
code: _code,
|
|
5963
|
-
lock: _lock
|
|
5964
|
-
})) {
|
|
5965
|
-
cloumnsTranslateData[_code] -= _adjustTranslation(optionColumn.width);
|
|
5966
|
-
if (Object(_utils__WEBPACK_IMPORTED_MODULE_10__["isLeafNode"])(columns[index])) {
|
|
5967
|
-
cloumnsTranslateData[optionColumn.code] += _adjustTranslation(_width);
|
|
5968
|
-
} else {
|
|
5969
|
-
cloumnsTranslateData[optionColumn.code] += _adjustTranslation(getColumnWidth(columns[index]));
|
|
5970
|
-
moveAllChildren(_children, cloumnsTranslateData, _adjustTranslation(optionColumn.width), true);
|
|
5971
|
-
}
|
|
5972
|
-
columnMoved = true;
|
|
5973
|
-
}
|
|
5974
|
-
index--;
|
|
5905
|
+
// 重置位置信息
|
|
5906
|
+
cloumnsTranslateData = {};
|
|
5907
|
+
allColumns.forEach(function (item) {
|
|
5908
|
+
cloumnsTranslateData[item.code] = 0;
|
|
5909
|
+
});
|
|
5910
|
+
|
|
5911
|
+
// 计算平移位置
|
|
5912
|
+
var replaceIndex = 0;
|
|
5913
|
+
var totalWitdth = getColumnWidth(columns[replaceIndex]);
|
|
5914
|
+
while (totalWitdth < offsetDistance && replaceIndex < columns.length - 1) {
|
|
5915
|
+
replaceIndex++;
|
|
5916
|
+
totalWitdth += getColumnWidth(columns[replaceIndex]);
|
|
5917
|
+
}
|
|
5918
|
+
|
|
5919
|
+
// 需要取最新startIndex, 不能直接用makeRecursiveMapper提供的startIndex(因为map时还没添加选择列、充满列等后面use添加的列)
|
|
5920
|
+
var startIndex;
|
|
5921
|
+
columns.forEach(function (column, index) {
|
|
5922
|
+
if (column.code === col.code) {
|
|
5923
|
+
startIndex = index;
|
|
5924
|
+
}
|
|
5925
|
+
});
|
|
5926
|
+
var optionColumn = columns[startIndex];
|
|
5927
|
+
var index = replaceIndex;
|
|
5928
|
+
if (startIndex > replaceIndex) {
|
|
5929
|
+
// 左移
|
|
5930
|
+
while (index < startIndex) {
|
|
5931
|
+
var _columns$index = columns[index],
|
|
5932
|
+
code = _columns$index.code,
|
|
5933
|
+
lock = _columns$index.lock,
|
|
5934
|
+
width = _columns$index.width,
|
|
5935
|
+
children = _columns$index.children;
|
|
5936
|
+
if (enableMove({
|
|
5937
|
+
code: code,
|
|
5938
|
+
lock: lock
|
|
5939
|
+
})) {
|
|
5940
|
+
cloumnsTranslateData[code] += _adjustTranslation(optionColumn.width);
|
|
5941
|
+
if (Object(_utils__WEBPACK_IMPORTED_MODULE_10__["isLeafNode"])(columns[index])) {
|
|
5942
|
+
cloumnsTranslateData[optionColumn.code] -= _adjustTranslation(width);
|
|
5943
|
+
} else {
|
|
5944
|
+
cloumnsTranslateData[optionColumn.code] -= _adjustTranslation(getColumnWidth(columns[index]));
|
|
5945
|
+
moveAllChildren(children, cloumnsTranslateData, _adjustTranslation(optionColumn.width));
|
|
5975
5946
|
}
|
|
5947
|
+
columnMoved = true;
|
|
5976
5948
|
}
|
|
5977
|
-
|
|
5978
|
-
pipeline.setStateAtKey(stateKey, {
|
|
5979
|
-
cloumnsTranslateData: cloumnsTranslateData
|
|
5980
|
-
});
|
|
5981
|
-
moveData = [startIndex, replaceIndex];
|
|
5982
|
-
});
|
|
5949
|
+
index++;
|
|
5983
5950
|
}
|
|
5984
|
-
|
|
5985
|
-
|
|
5986
|
-
|
|
5987
|
-
|
|
5988
|
-
|
|
5989
|
-
|
|
5990
|
-
|
|
5951
|
+
} else if (startIndex < replaceIndex) {
|
|
5952
|
+
// 右移
|
|
5953
|
+
while (startIndex < index) {
|
|
5954
|
+
var _columns$index2 = columns[index],
|
|
5955
|
+
_code = _columns$index2.code,
|
|
5956
|
+
_lock = _columns$index2.lock,
|
|
5957
|
+
_width = _columns$index2.width,
|
|
5958
|
+
_children = _columns$index2.children;
|
|
5959
|
+
if (enableMove({
|
|
5960
|
+
code: _code,
|
|
5961
|
+
lock: _lock
|
|
5962
|
+
})) {
|
|
5963
|
+
cloumnsTranslateData[_code] -= _adjustTranslation(optionColumn.width);
|
|
5964
|
+
if (Object(_utils__WEBPACK_IMPORTED_MODULE_10__["isLeafNode"])(columns[index])) {
|
|
5965
|
+
cloumnsTranslateData[optionColumn.code] += _adjustTranslation(_width);
|
|
5966
|
+
} else {
|
|
5967
|
+
cloumnsTranslateData[optionColumn.code] += _adjustTranslation(getColumnWidth(columns[index]));
|
|
5968
|
+
moveAllChildren(_children, cloumnsTranslateData, _adjustTranslation(optionColumn.width), true);
|
|
5969
|
+
}
|
|
5970
|
+
columnMoved = true;
|
|
5991
5971
|
}
|
|
5972
|
+
index--;
|
|
5973
|
+
}
|
|
5974
|
+
}
|
|
5975
|
+
window.requestAnimationFrame(function () {
|
|
5976
|
+
pipeline.setStateAtKey(stateKey, {
|
|
5977
|
+
cloumnsTranslateData: cloumnsTranslateData
|
|
5978
|
+
});
|
|
5979
|
+
moveData = [startIndex, replaceIndex];
|
|
5980
|
+
});
|
|
5981
|
+
}
|
|
5982
|
+
function handlePointerUp(e) {
|
|
5983
|
+
Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_12__["removePointerEventListeners"])(document.body, {
|
|
5984
|
+
onPointerMove: handlePointerMove,
|
|
5985
|
+
onPointerUp: handlePointerUp
|
|
5986
|
+
}, isTouch);
|
|
5987
|
+
window.removeEventListener('selectstart', disableSelect);
|
|
5988
|
+
var endCoordinates = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_12__["getEventCoordinates"])(e);
|
|
5989
|
+
if (Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_12__["hasMovedEnough"])(mouseDownClientX, mouseDownClientY, endCoordinates.clientX, endCoordinates.clientY)) {
|
|
5990
|
+
e.stopPropagation(); // 存在移动就阻止冒泡
|
|
5991
|
+
currentTarget.addEventListener('click', stopClickPropagation); // 阻止列头点击事件,防止拖动后触发列头过滤事件
|
|
5992
|
+
}
|
|
5992
5993
|
|
|
5993
|
-
|
|
5994
|
-
|
|
5995
|
-
|
|
5996
|
-
|
|
5997
|
-
|
|
5998
|
-
|
|
5999
|
-
|
|
6000
|
-
|
|
6001
|
-
|
|
6002
|
-
|
|
6003
|
-
|
|
6004
|
-
|
|
6005
|
-
|
|
6006
|
-
|
|
6007
|
-
|
|
6008
|
-
|
|
6009
|
-
|
|
6010
|
-
|
|
6011
|
-
|
|
6012
|
-
|
|
6013
|
-
|
|
6014
|
-
|
|
6015
|
-
|
|
6016
|
-
lock = _columns$index3.lock;
|
|
6017
|
-
if (enableMove({
|
|
6018
|
-
code: code,
|
|
6019
|
-
lock: lock
|
|
6020
|
-
})) {
|
|
6021
|
-
cloumnsSortData[code] += 1;
|
|
6022
|
-
cloumnsSortData[optionColumn.code] -= 1;
|
|
6023
|
-
columnMoved = true;
|
|
6024
|
-
}
|
|
6025
|
-
index++;
|
|
6026
|
-
}
|
|
6027
|
-
} else if (startIndex < replaceIndex) {
|
|
6028
|
-
// 右移
|
|
6029
|
-
while (index > startIndex) {
|
|
6030
|
-
var _columns$index4 = columns[index],
|
|
6031
|
-
_code2 = _columns$index4.code,
|
|
6032
|
-
_lock2 = _columns$index4.lock;
|
|
6033
|
-
if (enableMove({
|
|
6034
|
-
code: _code2,
|
|
6035
|
-
lock: _lock2
|
|
6036
|
-
})) {
|
|
6037
|
-
cloumnsSortData[_code2] -= 1;
|
|
6038
|
-
cloumnsSortData[optionColumn.code] += 1;
|
|
6039
|
-
columnMoved = true;
|
|
6040
|
-
}
|
|
6041
|
-
index--;
|
|
6042
|
-
}
|
|
5994
|
+
window.requestAnimationFrame(function () {
|
|
5995
|
+
// 取消阻止列头点击事件
|
|
5996
|
+
currentTarget.removeEventListener('click', stopClickPropagation);
|
|
5997
|
+
currentTarget = null;
|
|
5998
|
+
var _moveData = moveData,
|
|
5999
|
+
_moveData2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_4___default()(_moveData, 2),
|
|
6000
|
+
startIndex = _moveData2[0],
|
|
6001
|
+
replaceIndex = _moveData2[1];
|
|
6002
|
+
var optionColumn = columns[startIndex];
|
|
6003
|
+
var index = replaceIndex;
|
|
6004
|
+
if (startIndex > replaceIndex) {
|
|
6005
|
+
// 左移
|
|
6006
|
+
while (index < startIndex) {
|
|
6007
|
+
var _columns$index3 = columns[index],
|
|
6008
|
+
code = _columns$index3.code,
|
|
6009
|
+
lock = _columns$index3.lock;
|
|
6010
|
+
if (enableMove({
|
|
6011
|
+
code: code,
|
|
6012
|
+
lock: lock
|
|
6013
|
+
})) {
|
|
6014
|
+
cloumnsSortData[code] += 1;
|
|
6015
|
+
cloumnsSortData[optionColumn.code] -= 1;
|
|
6016
|
+
columnMoved = true;
|
|
6043
6017
|
}
|
|
6044
|
-
|
|
6045
|
-
|
|
6046
|
-
|
|
6047
|
-
|
|
6048
|
-
|
|
6049
|
-
|
|
6050
|
-
|
|
6051
|
-
|
|
6052
|
-
|
|
6053
|
-
|
|
6054
|
-
|
|
6055
|
-
|
|
6018
|
+
index++;
|
|
6019
|
+
}
|
|
6020
|
+
} else if (startIndex < replaceIndex) {
|
|
6021
|
+
// 右移
|
|
6022
|
+
while (index > startIndex) {
|
|
6023
|
+
var _columns$index4 = columns[index],
|
|
6024
|
+
_code2 = _columns$index4.code,
|
|
6025
|
+
_lock2 = _columns$index4.lock;
|
|
6026
|
+
if (enableMove({
|
|
6027
|
+
code: _code2,
|
|
6028
|
+
lock: _lock2
|
|
6029
|
+
})) {
|
|
6030
|
+
cloumnsSortData[_code2] -= 1;
|
|
6031
|
+
cloumnsSortData[optionColumn.code] += 1;
|
|
6032
|
+
columnMoved = true;
|
|
6056
6033
|
}
|
|
6057
|
-
|
|
6058
|
-
|
|
6059
|
-
|
|
6034
|
+
index--;
|
|
6035
|
+
}
|
|
6036
|
+
}
|
|
6037
|
+
var onColumnDragStopped = opts.onColumnDragStopped;
|
|
6038
|
+
// 拖拽结束返回列顺序
|
|
6039
|
+
if (onColumnDragStopped) {
|
|
6040
|
+
var isRowDragColumn = function isRowDragColumn(code) {
|
|
6041
|
+
var rowDragColumnKey = pipeline.getFeatureOptions('rowDragColumnKey');
|
|
6042
|
+
return code === rowDragColumnKey;
|
|
6043
|
+
};
|
|
6044
|
+
var newColumns = sortColumns(columns, cloumnsSortData).filter(function (column) {
|
|
6045
|
+
return column.code !== _autoFill__WEBPACK_IMPORTED_MODULE_11__["FILL_COLUMN_CODE"] && !isRowDragColumn(column.code) && !Object(_utils__WEBPACK_IMPORTED_MODULE_10__["isSelectColumn"])(column);
|
|
6060
6046
|
});
|
|
6061
|
-
|
|
6062
|
-
|
|
6063
|
-
currentTarget.style.cursor = '';
|
|
6047
|
+
// TODO drag需要在resize之后use,否则这里返回的列对应的宽度不是拖拽后的
|
|
6048
|
+
onColumnDragStopped(columnMoved, newColumns);
|
|
6064
6049
|
}
|
|
6065
|
-
|
|
6066
|
-
|
|
6067
|
-
|
|
6068
|
-
|
|
6069
|
-
|
|
6070
|
-
style
|
|
6071
|
-
|
|
6072
|
-
|
|
6050
|
+
pipeline.setStateAtKey(stateKey, {
|
|
6051
|
+
cloumnsTranslateData: null
|
|
6052
|
+
});
|
|
6053
|
+
});
|
|
6054
|
+
document.body.style.userSelect = '';
|
|
6055
|
+
currentTarget.style.opacity = '';
|
|
6056
|
+
currentTarget.style.cursor = '';
|
|
6057
|
+
}
|
|
6058
|
+
var onColumnDragStart = opts.onColumnDragStart;
|
|
6059
|
+
onColumnDragStart && onColumnDragStart(col);
|
|
6060
|
+
Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_12__["addPointerEventListeners"])(document.body, {
|
|
6061
|
+
onPointerMove: handlePointerMove,
|
|
6062
|
+
onPointerUp: handlePointerUp
|
|
6063
|
+
}, isTouch);
|
|
6064
|
+
}
|
|
6073
6065
|
}));
|
|
6074
6066
|
};
|
|
6075
6067
|
}
|
|
@@ -6098,15 +6090,6 @@ function moveAllChildren(cols, cloumnsTranslateData, width, isMinus) {
|
|
|
6098
6090
|
}
|
|
6099
6091
|
});
|
|
6100
6092
|
}
|
|
6101
|
-
function _isMoveWhenClicking(mouseDownClientX, mouseDownClientY, mouseUpClientX, mouseUpClientY) {
|
|
6102
|
-
var xDiff = mouseUpClientX - mouseDownClientX;
|
|
6103
|
-
var yDiff = mouseUpClientY - mouseDownClientY;
|
|
6104
|
-
// 鼠标点按和松开的偏移量大于5px,认为存在移动
|
|
6105
|
-
if (Math.sqrt(xDiff * xDiff + yDiff * yDiff) > 5) {
|
|
6106
|
-
return true;
|
|
6107
|
-
}
|
|
6108
|
-
return false;
|
|
6109
|
-
}
|
|
6110
6093
|
|
|
6111
6094
|
/***/ }),
|
|
6112
6095
|
|
|
@@ -6593,6 +6576,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
6593
6576
|
/* harmony import */ var _internals__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../../internals */ "./components/table/internals.ts");
|
|
6594
6577
|
/* harmony import */ var _base_styles__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ../../base/styles */ "./components/table/base/styles.ts");
|
|
6595
6578
|
/* harmony import */ var _base_utils__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ../../base/utils */ "./components/table/base/utils.tsx");
|
|
6579
|
+
/* harmony import */ var _utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ./utils/touchEventUtils */ "./components/table/pipeline/features/utils/touchEventUtils.tsx");
|
|
6596
6580
|
|
|
6597
6581
|
|
|
6598
6582
|
|
|
@@ -6618,6 +6602,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
6618
6602
|
|
|
6619
6603
|
|
|
6620
6604
|
|
|
6605
|
+
|
|
6621
6606
|
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) {
|
|
6622
6607
|
return Object(_base_utils__WEBPACK_IMPORTED_MODULE_21__["swapRTLDirection"])(props.direction, 'right');
|
|
6623
6608
|
}, function (props) {
|
|
@@ -6672,10 +6657,13 @@ function columnResize() {
|
|
|
6672
6657
|
var _opts$doubleClickCall;
|
|
6673
6658
|
(_opts$doubleClickCall = opts.doubleClickCallback) === null || _opts$doubleClickCall === void 0 ? void 0 : _opts$doubleClickCall.call(opts, e, col);
|
|
6674
6659
|
};
|
|
6675
|
-
|
|
6660
|
+
|
|
6661
|
+
// 通用的拖拽处理逻辑
|
|
6662
|
+
var handleResize = function handleResize(startEvent, col, eventType) {
|
|
6676
6663
|
window.addEventListener('selectstart', disableSelect);
|
|
6677
6664
|
var changedColumnSize = {};
|
|
6678
|
-
var
|
|
6665
|
+
var startCoordinates = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_22__["getEventCoordinates"])(startEvent);
|
|
6666
|
+
var startX = startCoordinates.clientX;
|
|
6679
6667
|
var children = col.children,
|
|
6680
6668
|
code = col.code,
|
|
6681
6669
|
_col$features = col.features,
|
|
@@ -6686,9 +6674,23 @@ function columnResize() {
|
|
|
6686
6674
|
var realMaxSize = typeof maxWidth === 'number' ? maxWidth : maxSize;
|
|
6687
6675
|
var columnSize = pipeline.getFeatureOptions(COLUMN_SIZE_KEY);
|
|
6688
6676
|
var recordColumnSize = columnSize;
|
|
6689
|
-
|
|
6690
|
-
|
|
6691
|
-
|
|
6677
|
+
|
|
6678
|
+
// 根据事件类型选择不同的事件监听器
|
|
6679
|
+
var moveEventName = eventType === 'mouse' ? 'mousemove' : 'touchmove';
|
|
6680
|
+
var endEventName = eventType === 'mouse' ? 'mouseup' : 'touchend';
|
|
6681
|
+
var moveEventOptions = eventType === 'touch' ? {
|
|
6682
|
+
passive: false
|
|
6683
|
+
} : undefined;
|
|
6684
|
+
var endEventOptions = eventType === 'touch' ? {
|
|
6685
|
+
passive: false
|
|
6686
|
+
} : undefined;
|
|
6687
|
+
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) {
|
|
6688
|
+
// 触摸事件需要阻止默认行为,防止页面滚动
|
|
6689
|
+
if (eventType === 'touch' && e.cancelable) {
|
|
6690
|
+
e.preventDefault();
|
|
6691
|
+
}
|
|
6692
|
+
var coordinates = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_22__["getEventCoordinates"])(e);
|
|
6693
|
+
var movingX = coordinates.clientX;
|
|
6692
6694
|
var nextColumnSize = _objectSpread({}, columnSize);
|
|
6693
6695
|
var deltaSum = pipeline.ctx.direction === 'rtl' ? startX - movingX : movingX - startX;
|
|
6694
6696
|
var deltaRemaining = deltaSum;
|
|
@@ -6745,6 +6747,20 @@ function columnResize() {
|
|
|
6745
6747
|
}
|
|
6746
6748
|
});
|
|
6747
6749
|
};
|
|
6750
|
+
var handleMouseDown = function handleMouseDown(e, col) {
|
|
6751
|
+
e.stopPropagation();
|
|
6752
|
+
handleResize(e.nativeEvent, col, 'mouse');
|
|
6753
|
+
};
|
|
6754
|
+
|
|
6755
|
+
// 触摸事件处理函数
|
|
6756
|
+
var handleTouchStart = function handleTouchStart(e, col) {
|
|
6757
|
+
// 阻止触摸事件的默认行为
|
|
6758
|
+
if (e.cancelable) {
|
|
6759
|
+
e.preventDefault();
|
|
6760
|
+
}
|
|
6761
|
+
e.stopPropagation();
|
|
6762
|
+
handleResize(e.nativeEvent, col, 'touch');
|
|
6763
|
+
};
|
|
6748
6764
|
var isGroup = Object(_utils__WEBPACK_IMPORTED_MODULE_18__["isGroupColumn"])(pipeline.getColumns());
|
|
6749
6765
|
return pipeline.mapColumns(Object(_utils__WEBPACK_IMPORTED_MODULE_18__["makeRecursiveMapper"])(function (col) {
|
|
6750
6766
|
var _columnSize$code;
|
|
@@ -6762,6 +6778,9 @@ function columnResize() {
|
|
|
6762
6778
|
},
|
|
6763
6779
|
onMouseDown: function onMouseDown(e) {
|
|
6764
6780
|
return handleMouseDown(e, col);
|
|
6781
|
+
},
|
|
6782
|
+
onTouchStart: function onTouchStart(e) {
|
|
6783
|
+
return handleTouchStart(e, col);
|
|
6765
6784
|
}
|
|
6766
6785
|
}) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_14___default.a.createElement(TableHeaderCellResize, {
|
|
6767
6786
|
direction: pipeline.ctx.direction,
|
|
@@ -6771,6 +6790,9 @@ function columnResize() {
|
|
|
6771
6790
|
},
|
|
6772
6791
|
onMouseDown: function onMouseDown(e) {
|
|
6773
6792
|
return handleMouseDown(e, col);
|
|
6793
|
+
},
|
|
6794
|
+
onTouchStart: function onTouchStart(e) {
|
|
6795
|
+
return handleTouchStart(e, col);
|
|
6774
6796
|
}
|
|
6775
6797
|
}))),
|
|
6776
6798
|
headerCellProps: Object(_utils__WEBPACK_IMPORTED_MODULE_18__["mergeCellProps"])(col.headerCellProps, {
|
|
@@ -9333,6 +9355,8 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
9333
9355
|
/* harmony import */ var _base_styles__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../base/styles */ "./components/table/base/styles.ts");
|
|
9334
9356
|
/* harmony import */ var _const__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../const */ "./components/table/pipeline/const.ts");
|
|
9335
9357
|
/* harmony import */ var _internals__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../../internals */ "./components/table/internals.ts");
|
|
9358
|
+
/* harmony import */ var _utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./utils/touchEventUtils */ "./components/table/pipeline/features/utils/touchEventUtils.tsx");
|
|
9359
|
+
|
|
9336
9360
|
|
|
9337
9361
|
|
|
9338
9362
|
|
|
@@ -9374,8 +9398,7 @@ var defaultRowDragColumn = {
|
|
|
9374
9398
|
width: "16",
|
|
9375
9399
|
height: "16"
|
|
9376
9400
|
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_8___default.a.createElement("path", {
|
|
9377
|
-
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"
|
|
9378
|
-
"p-id": "4278"
|
|
9401
|
+
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"
|
|
9379
9402
|
}));
|
|
9380
9403
|
}
|
|
9381
9404
|
};
|
|
@@ -9404,19 +9427,19 @@ function rowDrag(opt) {
|
|
|
9404
9427
|
var treeModeOptions = getTreeModeOptions();
|
|
9405
9428
|
var rowDragOptions = getRowDragOptions();
|
|
9406
9429
|
var allowDragIntoRow = !!treeModeOptions && (rowDragOptions === null || rowDragOptions === void 0 ? void 0 : rowDragOptions.allowDragIntoRow);
|
|
9407
|
-
var isLeave = !
|
|
9430
|
+
var isLeave = !isPointerOnDropTarget(event, dropZoneTarget);
|
|
9408
9431
|
var overIndex = -1;
|
|
9409
9432
|
var direction = 'bottom';
|
|
9410
9433
|
if (!isLeave && dataSource.length > 0) {
|
|
9411
|
-
var overDragItem = getDragRowItem(event
|
|
9434
|
+
var overDragItem = getDragRowItem(Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventTarget"])(event), dropZoneTarget, dataSource);
|
|
9412
9435
|
if (overDragItem) {
|
|
9413
9436
|
var _rowIndex = overDragItem.rowIndex,
|
|
9414
9437
|
cell = overDragItem.cell;
|
|
9415
9438
|
overIndex = _rowIndex;
|
|
9416
|
-
direction = getDirection(cell, event.clientY, allowDragIntoRow);
|
|
9439
|
+
direction = getDirection(cell, Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventCoordinates"])(event).clientY, allowDragIntoRow);
|
|
9417
9440
|
}
|
|
9418
9441
|
}
|
|
9419
|
-
if (overIndex === -1 && dataSource.length > 0 && dropZoneTarget.contains(event
|
|
9442
|
+
if (overIndex === -1 && dataSource.length > 0 && dropZoneTarget.contains(Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventTarget"])(event))) {
|
|
9420
9443
|
overIndex = dataSource.length - 1;
|
|
9421
9444
|
direction = 'bottom';
|
|
9422
9445
|
}
|
|
@@ -9492,9 +9515,27 @@ function rowDrag(opt) {
|
|
|
9492
9515
|
}
|
|
9493
9516
|
};
|
|
9494
9517
|
var onMouseDown = function onMouseDown(event) {
|
|
9518
|
+
handlePointerDown(event.nativeEvent);
|
|
9519
|
+
};
|
|
9520
|
+
|
|
9521
|
+
// PC 单据移动端显示,兼容移动端的拖拽事件
|
|
9522
|
+
var onTouchStart = function onTouchStart(event) {
|
|
9523
|
+
// 尝试阻止触摸事件的默认行为,防止页面滚动
|
|
9524
|
+
try {
|
|
9525
|
+
if (event.cancelable) {
|
|
9526
|
+
event.preventDefault();
|
|
9527
|
+
}
|
|
9528
|
+
} catch (error) {
|
|
9529
|
+
// 忽略passive event listener错误
|
|
9530
|
+
console.warn('preventDefault failed in passive touch event listener');
|
|
9531
|
+
}
|
|
9532
|
+
handlePointerDown(event.nativeEvent);
|
|
9533
|
+
};
|
|
9534
|
+
|
|
9535
|
+
// 统一的拖拽处理函数
|
|
9536
|
+
var handlePointerDown = function handlePointerDown(startEvent) {
|
|
9495
9537
|
var _opt$isDisabled;
|
|
9496
|
-
var
|
|
9497
|
-
var startDataItem = getDragRowItem(mouseDownEvent.target, tableBody, dataSource);
|
|
9538
|
+
var startDataItem = getDragRowItem(Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventTarget"])(startEvent), tableBody, dataSource);
|
|
9498
9539
|
if (!startDataItem || startDataItem.code !== rowDragColumn.code) return;
|
|
9499
9540
|
if (opt !== null && opt !== void 0 && (_opt$isDisabled = opt.isDisabled) !== null && _opt$isDisabled !== void 0 && _opt$isDisabled.call(opt, startDataItem.row, startDataItem.rowIndex)) return;
|
|
9500
9541
|
var isValidDrag = false;
|
|
@@ -9506,7 +9547,7 @@ function rowDrag(opt) {
|
|
|
9506
9547
|
var intervalId = null;
|
|
9507
9548
|
var expandRowTimeoutId = null;
|
|
9508
9549
|
var expandRowCallBackList = [];
|
|
9509
|
-
var updateScrollPosition = function updateScrollPosition(tableBody,
|
|
9550
|
+
var updateScrollPosition = function updateScrollPosition(tableBody, moveEvent) {
|
|
9510
9551
|
if (opt !== null && opt !== void 0 && opt.suppressScrollMove) return;
|
|
9511
9552
|
if (timeoutId) {
|
|
9512
9553
|
clearTimeout(timeoutId);
|
|
@@ -9515,7 +9556,7 @@ function rowDrag(opt) {
|
|
|
9515
9556
|
clearInterval(intervalId);
|
|
9516
9557
|
}
|
|
9517
9558
|
if (!tableBody) return;
|
|
9518
|
-
var moveOffset = getScrollMoveOffset(tableBody,
|
|
9559
|
+
var moveOffset = getScrollMoveOffset(tableBody, moveEvent);
|
|
9519
9560
|
if (moveOffset === 0) {
|
|
9520
9561
|
return;
|
|
9521
9562
|
}
|
|
@@ -9525,29 +9566,53 @@ function rowDrag(opt) {
|
|
|
9525
9566
|
}, 50);
|
|
9526
9567
|
}, 500);
|
|
9527
9568
|
};
|
|
9528
|
-
var handleDragStart = function handleDragStart(
|
|
9569
|
+
var handleDragStart = function handleDragStart(event) {
|
|
9529
9570
|
var _opt$rowDragText;
|
|
9530
|
-
|
|
9571
|
+
// 屏蔽默认事件,防止文本选择、框选等
|
|
9572
|
+
try {
|
|
9573
|
+
if (event.cancelable) {
|
|
9574
|
+
event.preventDefault();
|
|
9575
|
+
}
|
|
9576
|
+
} catch (error) {
|
|
9577
|
+
// 忽略passive event listener错误
|
|
9578
|
+
console.warn('preventDefault failed in passive event listener');
|
|
9579
|
+
}
|
|
9580
|
+
// 禁用页面的文本选择
|
|
9581
|
+
document.body.style.userSelect = 'none';
|
|
9582
|
+
document.body.style.webkitUserSelect = 'none';
|
|
9583
|
+
|
|
9584
|
+
// 添加拖拽状态的CSS类,可以在样式中进一步控制
|
|
9585
|
+
document.body.classList.add('row-dragging');
|
|
9586
|
+
dragElement = createDragElement(event, tableBody); // 创建拖拽悬浮框
|
|
9531
9587
|
var isTreeTable = !!pipeline.getFeatureOptions('treeModeOptions');
|
|
9532
9588
|
dragLine = createDragLine(isTreeTable); // 创建拖拽插入指示线
|
|
9533
9589
|
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");
|
|
9534
9590
|
setDragText(dragElement, dragText); // 设置悬浮框显示文本
|
|
9535
9591
|
artTable.classList.add(classnames__WEBPACK_IMPORTED_MODULE_11___default()(_base_styles__WEBPACK_IMPORTED_MODULE_12__["Classes"].rowDragging));
|
|
9536
9592
|
rowDragApi.setDragStatus('start');
|
|
9537
|
-
var dragEvent = createDropTargetEvent(currentDropZone,
|
|
9593
|
+
var dragEvent = createDropTargetEvent(currentDropZone, event, startDataItem, currentDropZone);
|
|
9538
9594
|
onDragStart(dragEvent);
|
|
9539
9595
|
};
|
|
9540
|
-
var handleDragMove = function handleDragMove(
|
|
9596
|
+
var handleDragMove = function handleDragMove(moveEvent) {
|
|
9597
|
+
// 尝试屏蔽默认事件,在passive监听器中可能会失败
|
|
9598
|
+
try {
|
|
9599
|
+
if (moveEvent.cancelable) {
|
|
9600
|
+
moveEvent.preventDefault();
|
|
9601
|
+
}
|
|
9602
|
+
} catch (error) {
|
|
9603
|
+
// 忽略passive event listener错误
|
|
9604
|
+
console.warn('preventDefault failed in passive event listener');
|
|
9605
|
+
}
|
|
9541
9606
|
var isRTL = pipeline.ctx.direction === 'rtl';
|
|
9542
|
-
positionDragElemment(dragElement,
|
|
9607
|
+
positionDragElemment(dragElement, moveEvent, isRTL); // 更新拖拽悬浮框位置
|
|
9543
9608
|
rowDragApi.setDragStatus('dragging');
|
|
9544
9609
|
setDragElementIcon(dragElement, 'move');
|
|
9545
9610
|
var rowDropZones = rowDragApi.getRowDropZone();
|
|
9546
9611
|
var validDropZones = rowDropZones.concat(currentDropZone); // 可放置区域加上自身
|
|
9547
9612
|
var dropTarget = validDropZones.find(function (zone) {
|
|
9548
|
-
return
|
|
9613
|
+
return isPointerOnDropTarget(moveEvent, zone.getContainer());
|
|
9549
9614
|
}) || null;
|
|
9550
|
-
updateScrollPosition(dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.getContainer(),
|
|
9615
|
+
updateScrollPosition(dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.getContainer(), moveEvent); // 拖拽到底时让滚动条可以滚动
|
|
9551
9616
|
|
|
9552
9617
|
if (dropTarget !== lastDropTarget) {
|
|
9553
9618
|
// 拖拽离开表格
|
|
@@ -9556,7 +9621,7 @@ function rowDrag(opt) {
|
|
|
9556
9621
|
setDragElementIcon(dragElement, 'notAllowed');
|
|
9557
9622
|
hiddenDragLine(dragLine);
|
|
9558
9623
|
lastDropTarget.getContainer().classList.remove(_base_styles__WEBPACK_IMPORTED_MODULE_12__["Classes"].rowDragNoData);
|
|
9559
|
-
var dragEvent = createDropTargetEvent(lastDropTarget,
|
|
9624
|
+
var dragEvent = createDropTargetEvent(lastDropTarget, moveEvent, startDataItem, currentDropZone);
|
|
9560
9625
|
lastDropTarget.onDragLeave(dragEvent);
|
|
9561
9626
|
}
|
|
9562
9627
|
}
|
|
@@ -9577,7 +9642,7 @@ function rowDrag(opt) {
|
|
|
9577
9642
|
dragLine.classList.remove(_base_styles__WEBPACK_IMPORTED_MODULE_12__["Classes"].treeTableRowDragLine);
|
|
9578
9643
|
}
|
|
9579
9644
|
}
|
|
9580
|
-
var _dragEvent = createDropTargetEvent(dropTarget,
|
|
9645
|
+
var _dragEvent = createDropTargetEvent(dropTarget, moveEvent, startDataItem, currentDropZone);
|
|
9581
9646
|
dropTarget.onDragEnter(_dragEvent);
|
|
9582
9647
|
}
|
|
9583
9648
|
}
|
|
@@ -9590,7 +9655,7 @@ function rowDrag(opt) {
|
|
|
9590
9655
|
positionDragLine({
|
|
9591
9656
|
lineElement: dragLine,
|
|
9592
9657
|
dragZone: dropTarget,
|
|
9593
|
-
event:
|
|
9658
|
+
event: moveEvent,
|
|
9594
9659
|
isRTL: isRTL
|
|
9595
9660
|
});
|
|
9596
9661
|
}
|
|
@@ -9608,7 +9673,7 @@ function rowDrag(opt) {
|
|
|
9608
9673
|
onCollapse = treeModeOptions.onCollapse;
|
|
9609
9674
|
// 鼠标悬停所在的拖拽行信息
|
|
9610
9675
|
var dataSource = dropTarget.tableParams.getDataSource();
|
|
9611
|
-
var dragItem = getDragRowItem(
|
|
9676
|
+
var dragItem = getDragRowItem(Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventTarget"])(moveEvent), dropTarget.getContainer(), dataSource);
|
|
9612
9677
|
if (!dragItem) return;
|
|
9613
9678
|
var row = dragItem.row;
|
|
9614
9679
|
var _row$treeMetaKey = row[treeMetaKey],
|
|
@@ -9623,15 +9688,22 @@ function rowDrag(opt) {
|
|
|
9623
9688
|
}, 1000);
|
|
9624
9689
|
}
|
|
9625
9690
|
if (dropTarget.onDragging) {
|
|
9626
|
-
var _dragEvent2 = createDropTargetEvent(dropTarget,
|
|
9691
|
+
var _dragEvent2 = createDropTargetEvent(dropTarget, moveEvent, startDataItem, currentDropZone);
|
|
9627
9692
|
dropTarget.onDragging(_dragEvent2);
|
|
9628
9693
|
}
|
|
9629
9694
|
}
|
|
9630
9695
|
};
|
|
9631
|
-
var handleDragStop = function handleDragStop(
|
|
9696
|
+
var handleDragStop = function handleDragStop(endEvent) {
|
|
9632
9697
|
if (!isValidDrag) {
|
|
9633
9698
|
return;
|
|
9634
9699
|
}
|
|
9700
|
+
|
|
9701
|
+
// 恢复默认的文本选择功能
|
|
9702
|
+
document.body.style.userSelect = '';
|
|
9703
|
+
document.body.style.webkitUserSelect = '';
|
|
9704
|
+
|
|
9705
|
+
// 移除拖拽状态的CSS类
|
|
9706
|
+
document.body.classList.remove('row-dragging');
|
|
9635
9707
|
removeElement(dragElement);
|
|
9636
9708
|
removeElement(dragLine);
|
|
9637
9709
|
artTable.classList.remove(classnames__WEBPACK_IMPORTED_MODULE_11___default()(_base_styles__WEBPACK_IMPORTED_MODULE_12__["Classes"].rowDragging));
|
|
@@ -9646,10 +9718,10 @@ function rowDrag(opt) {
|
|
|
9646
9718
|
});
|
|
9647
9719
|
var validDropZones = rowDropZones.concat(currentDropZone);
|
|
9648
9720
|
var dropTarget = validDropZones.find(function (zone) {
|
|
9649
|
-
return
|
|
9721
|
+
return isPointerOnDropTarget(endEvent, zone.getContainer());
|
|
9650
9722
|
});
|
|
9651
9723
|
if (dropTarget && dropTarget.onDragStop) {
|
|
9652
|
-
var dragEvent = createDropTargetEvent(dropTarget,
|
|
9724
|
+
var dragEvent = createDropTargetEvent(dropTarget, endEvent, startDataItem, currentDropZone);
|
|
9653
9725
|
dropTarget.onDragStop(dragEvent);
|
|
9654
9726
|
}
|
|
9655
9727
|
while (expandRowCallBackList.length > 0) {
|
|
@@ -9657,32 +9729,74 @@ function rowDrag(opt) {
|
|
|
9657
9729
|
callback();
|
|
9658
9730
|
}
|
|
9659
9731
|
};
|
|
9660
|
-
|
|
9661
|
-
|
|
9662
|
-
var
|
|
9663
|
-
|
|
9664
|
-
|
|
9665
|
-
|
|
9666
|
-
|
|
9667
|
-
|
|
9668
|
-
|
|
9669
|
-
|
|
9670
|
-
|
|
9671
|
-
|
|
9672
|
-
|
|
9673
|
-
|
|
9674
|
-
|
|
9675
|
-
|
|
9676
|
-
|
|
9677
|
-
|
|
9678
|
-
|
|
9679
|
-
|
|
9680
|
-
|
|
9681
|
-
|
|
9682
|
-
|
|
9683
|
-
|
|
9684
|
-
|
|
9685
|
-
|
|
9732
|
+
|
|
9733
|
+
// 判断是鼠标事件还是触摸事件,分别监听对应的移动和结束事件
|
|
9734
|
+
var isTouchEvent = ('touches' in startEvent);
|
|
9735
|
+
if (isTouchEvent) {
|
|
9736
|
+
// 触摸事件处理
|
|
9737
|
+
var touchmove$ = Object(rxjs__WEBPACK_IMPORTED_MODULE_9__["fromEvent"])(window, 'touchmove', {
|
|
9738
|
+
passive: false
|
|
9739
|
+
});
|
|
9740
|
+
var touchend$ = Object(rxjs__WEBPACK_IMPORTED_MODULE_9__["fromEvent"])(window, 'touchend', {
|
|
9741
|
+
passive: false
|
|
9742
|
+
});
|
|
9743
|
+
var touchDragMove$ = touchmove$.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_10__["filter"])(function (moveEvent) {
|
|
9744
|
+
var coordinates = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventCoordinates"])(moveEvent);
|
|
9745
|
+
var startCoordinates = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventCoordinates"])(startEvent);
|
|
9746
|
+
var moveClientY = coordinates.clientY;
|
|
9747
|
+
var startClientY = startCoordinates.clientY;
|
|
9748
|
+
// 上下移动偏移量大于5才是有效的拖拽
|
|
9749
|
+
if (Math.abs(moveClientY - startClientY) > 5) {
|
|
9750
|
+
isValidDrag = true;
|
|
9751
|
+
}
|
|
9752
|
+
return isValidDrag;
|
|
9753
|
+
}), Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_10__["map"])(function (moveEvent) {
|
|
9754
|
+
if (!isDragging) {
|
|
9755
|
+
isDragging = true;
|
|
9756
|
+
handleDragStart(startEvent);
|
|
9757
|
+
handleDragMove(startEvent);
|
|
9758
|
+
}
|
|
9759
|
+
handleDragMove(moveEvent);
|
|
9760
|
+
}), Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_10__["takeUntil"])(touchend$));
|
|
9761
|
+
touchDragMove$.subscribe();
|
|
9762
|
+
var touchDragEnd$ = touchend$.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_10__["map"])(function (endEvent) {
|
|
9763
|
+
handleDragStop(endEvent);
|
|
9764
|
+
})).subscribe({
|
|
9765
|
+
next: function next() {
|
|
9766
|
+
touchDragEnd$.unsubscribe();
|
|
9767
|
+
}
|
|
9768
|
+
});
|
|
9769
|
+
} else {
|
|
9770
|
+
// 鼠标事件处理
|
|
9771
|
+
var mousemove$ = Object(rxjs__WEBPACK_IMPORTED_MODULE_9__["fromEvent"])(window, 'mousemove');
|
|
9772
|
+
var mouseup$ = Object(rxjs__WEBPACK_IMPORTED_MODULE_9__["fromEvent"])(window, 'mouseup');
|
|
9773
|
+
var rowDragMove$ = mousemove$.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_10__["filter"])(function (moveEvent) {
|
|
9774
|
+
var coordinates = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventCoordinates"])(moveEvent);
|
|
9775
|
+
var startCoordinates = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventCoordinates"])(startEvent);
|
|
9776
|
+
var moveClientY = coordinates.clientY;
|
|
9777
|
+
var startClientY = startCoordinates.clientY;
|
|
9778
|
+
// 上下移动偏移量大于5才是有效的拖拽
|
|
9779
|
+
if (Math.abs(moveClientY - startClientY) > 5) {
|
|
9780
|
+
isValidDrag = true;
|
|
9781
|
+
}
|
|
9782
|
+
return isValidDrag;
|
|
9783
|
+
}), Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_10__["map"])(function (moveEvent) {
|
|
9784
|
+
if (!isDragging) {
|
|
9785
|
+
isDragging = true;
|
|
9786
|
+
handleDragStart(startEvent);
|
|
9787
|
+
handleDragMove(startEvent);
|
|
9788
|
+
}
|
|
9789
|
+
handleDragMove(moveEvent);
|
|
9790
|
+
}), Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_10__["takeUntil"])(mouseup$));
|
|
9791
|
+
rowDragMove$.subscribe();
|
|
9792
|
+
var rowDragEnd$ = mouseup$.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_10__["map"])(function (endEvent) {
|
|
9793
|
+
handleDragStop(endEvent);
|
|
9794
|
+
})).subscribe({
|
|
9795
|
+
next: function next() {
|
|
9796
|
+
rowDragEnd$.unsubscribe();
|
|
9797
|
+
}
|
|
9798
|
+
});
|
|
9799
|
+
}
|
|
9686
9800
|
};
|
|
9687
9801
|
var rowDragColumn = (opt === null || opt === void 0 ? void 0 : opt.rowDragColumn) || defaultRowDragColumn;
|
|
9688
9802
|
pipeline.setFeatureOptions('rowDragColumnKey', rowDragColumn.code);
|
|
@@ -9691,7 +9805,8 @@ function rowDrag(opt) {
|
|
|
9691
9805
|
nextColumns.unshift(rowDragColumn);
|
|
9692
9806
|
pipeline.columns(nextColumns);
|
|
9693
9807
|
pipeline.addTableProps({
|
|
9694
|
-
onMouseDown: onMouseDown
|
|
9808
|
+
onMouseDown: onMouseDown,
|
|
9809
|
+
onTouchStart: onTouchStart
|
|
9695
9810
|
});
|
|
9696
9811
|
pipeline.appendRowPropsGetter(function (row, rowIndex) {
|
|
9697
9812
|
var _cx;
|
|
@@ -9760,12 +9875,12 @@ function isEleInFooter(target) {
|
|
|
9760
9875
|
}
|
|
9761
9876
|
return false;
|
|
9762
9877
|
}
|
|
9763
|
-
function createDragElement(
|
|
9878
|
+
function createDragElement(event, tableBody) {
|
|
9764
9879
|
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>");
|
|
9765
9880
|
var element = document.createElement('div');
|
|
9766
9881
|
element.innerHTML = ELEMENT_TEMPLATE;
|
|
9767
9882
|
var dragElement = element.firstChild;
|
|
9768
|
-
var targetRow = findTargetRow(
|
|
9883
|
+
var targetRow = findTargetRow(Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventTarget"])(event), tableBody);
|
|
9769
9884
|
if (targetRow) {
|
|
9770
9885
|
var rect = targetRow.getBoundingClientRect();
|
|
9771
9886
|
dragElement.style.height = rect.height + 'px';
|
|
@@ -9809,9 +9924,9 @@ function positionDragLine(_ref) {
|
|
|
9809
9924
|
lineElement.style.display = 'block';
|
|
9810
9925
|
}
|
|
9811
9926
|
// 鼠标悬停所在的拖拽行信息
|
|
9812
|
-
var dragItem = getDragRowItem(event
|
|
9927
|
+
var dragItem = getDragRowItem(Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventTarget"])(event), tableContainer, dataSource);
|
|
9813
9928
|
if (!dragItem) {
|
|
9814
|
-
if (dataSource.length > 0 && tableContainer.contains(event
|
|
9929
|
+
if (dataSource.length > 0 && tableContainer.contains(Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventTarget"])(event))) {
|
|
9815
9930
|
var _rowIndex3 = dataSource.length - 1;
|
|
9816
9931
|
var _row2 = dataSource[_rowIndex3];
|
|
9817
9932
|
var _direction = 'bottom';
|
|
@@ -9839,7 +9954,7 @@ function positionDragLine(_ref) {
|
|
|
9839
9954
|
rowIndex = dragItem.rowIndex,
|
|
9840
9955
|
row = dragItem.row;
|
|
9841
9956
|
var allowDragInto = isTreeTable && allowDragIntoRow;
|
|
9842
|
-
var direction = getDirection(cell, event.clientY, allowDragInto);
|
|
9957
|
+
var direction = getDirection(cell, Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventCoordinates"])(event).clientY, allowDragInto);
|
|
9843
9958
|
var targetCell = isTreeTable ? tableContainer.querySelector("tr[data-rowindex=\"".concat(rowIndex, "\"] .").concat(_base_styles__WEBPACK_IMPORTED_MODULE_12__["Classes"].tableExtendCell)) : cell;
|
|
9844
9959
|
if (!targetCell) return;
|
|
9845
9960
|
var _getLinePosition2 = getLinePosition({
|
|
@@ -9877,8 +9992,9 @@ function positionDragElemment(element, event, isRTL) {
|
|
|
9877
9992
|
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;
|
|
9878
9993
|
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;
|
|
9879
9994
|
var offsetParentSize = getElementRectWithOffset(element.offsetParent);
|
|
9880
|
-
var
|
|
9881
|
-
|
|
9995
|
+
var _getEventCoordinates = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventCoordinates"])(event),
|
|
9996
|
+
clientX = _getEventCoordinates.clientX,
|
|
9997
|
+
clientY = _getEventCoordinates.clientY;
|
|
9882
9998
|
var top = clientY - offsetParentSize.top - eleHeight / 2;
|
|
9883
9999
|
var left = clientX - offsetParentSize.left;
|
|
9884
10000
|
var right = Math.max(browserWidth - clientX, 0);
|
|
@@ -9894,11 +10010,11 @@ function positionDragElemment(element, event, isRTL) {
|
|
|
9894
10010
|
right = Math.max(browserWidth + windowScrollX - element.clientWidth, 0);
|
|
9895
10011
|
}
|
|
9896
10012
|
if (isRTL) {
|
|
9897
|
-
element.style.
|
|
9898
|
-
|
|
10013
|
+
element.style.right = right + 'px';
|
|
10014
|
+
} else {
|
|
10015
|
+
element.style.left = left + 'px';
|
|
9899
10016
|
}
|
|
9900
|
-
element.style.
|
|
9901
|
-
element.style.top = "".concat(top, "px");
|
|
10017
|
+
element.style.top = top + 'px';
|
|
9902
10018
|
}
|
|
9903
10019
|
function getElementRectWithOffset(el) {
|
|
9904
10020
|
var offsetElementRect = el.getBoundingClientRect();
|
|
@@ -9965,12 +10081,13 @@ function setDragElementIcon(element, iconName) {
|
|
|
9965
10081
|
elementIcon.appendChild(iconElement);
|
|
9966
10082
|
}
|
|
9967
10083
|
function clearElementChildren(element) {
|
|
9968
|
-
while (element && element.firstChild) {
|
|
10084
|
+
while (element !== null && element !== void 0 && element.firstChild) {
|
|
9969
10085
|
element.removeChild(element.firstChild);
|
|
9970
10086
|
}
|
|
9971
10087
|
}
|
|
9972
|
-
function getScrollMoveOffset(tableBody,
|
|
9973
|
-
var
|
|
10088
|
+
function getScrollMoveOffset(tableBody, moveEvent) {
|
|
10089
|
+
var _getEventCoordinates2 = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventCoordinates"])(moveEvent),
|
|
10090
|
+
clientY = _getEventCoordinates2.clientY;
|
|
9974
10091
|
var tableBodyClientRect = tableBody.getBoundingClientRect();
|
|
9975
10092
|
var top = tableBodyClientRect.top,
|
|
9976
10093
|
height = tableBodyClientRect.height;
|
|
@@ -9988,15 +10105,19 @@ function setDragText(element, dragText) {
|
|
|
9988
10105
|
var stringNode = document.createTextNode(dragTextString);
|
|
9989
10106
|
elementIcon.appendChild(stringNode);
|
|
9990
10107
|
}
|
|
9991
|
-
function
|
|
9992
|
-
|
|
10108
|
+
function isPointerOnDropTarget(pointerEvent, target) {
|
|
10109
|
+
var eventTarget = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventTarget"])(pointerEvent);
|
|
10110
|
+
return target.contains(eventTarget);
|
|
9993
10111
|
}
|
|
9994
10112
|
function createDropTargetEvent(dropZone, event, dragItem, startDropZone) {
|
|
9995
10113
|
var dropZoneTarget = dropZone.getContainer();
|
|
9996
10114
|
var startDropZoneTagret = startDropZone.getContainer();
|
|
9997
10115
|
var rect = dropZoneTarget.getBoundingClientRect();
|
|
9998
|
-
var
|
|
9999
|
-
|
|
10116
|
+
var _getEventCoordinates3 = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventCoordinates"])(event),
|
|
10117
|
+
clientX = _getEventCoordinates3.clientX,
|
|
10118
|
+
clientY = _getEventCoordinates3.clientY;
|
|
10119
|
+
var x = clientX - rect.left;
|
|
10120
|
+
var y = clientY - rect.top;
|
|
10000
10121
|
var startDropZoneOptions = startDropZone.tableParams.getRowDragOptions();
|
|
10001
10122
|
var startCommonParams = startDropZoneOptions === null || startDropZoneOptions === void 0 ? void 0 : startDropZoneOptions.commonParams;
|
|
10002
10123
|
var targetEvent = {
|
|
@@ -10053,10 +10174,8 @@ var getLinePosition = function getLinePosition(_ref2) {
|
|
|
10053
10174
|
paddingRight = _getElementSize3.paddingRight;
|
|
10054
10175
|
var expandCellRect = cell.getBoundingClientRect();
|
|
10055
10176
|
var _row$treeMetaKey2 = row[treeMetaKey],
|
|
10056
|
-
rowKey = _row$treeMetaKey2.rowKey,
|
|
10057
10177
|
depth = _row$treeMetaKey2.depth,
|
|
10058
|
-
isLeaf = _row$treeMetaKey2.isLeaf
|
|
10059
|
-
expanded = _row$treeMetaKey2.expanded;
|
|
10178
|
+
isLeaf = _row$treeMetaKey2.isLeaf;
|
|
10060
10179
|
var addWidth = isLeaf ? iconWidth + iconGap : 0;
|
|
10061
10180
|
var indent = iconIndent + depth * indentSize + addWidth;
|
|
10062
10181
|
var x = expandCellRect.x,
|
|
@@ -11443,6 +11562,94 @@ function treeSelect(opts) {
|
|
|
11443
11562
|
|
|
11444
11563
|
/***/ }),
|
|
11445
11564
|
|
|
11565
|
+
/***/ "./components/table/pipeline/features/utils/touchEventUtils.tsx":
|
|
11566
|
+
/*!**********************************************************************!*\
|
|
11567
|
+
!*** ./components/table/pipeline/features/utils/touchEventUtils.tsx ***!
|
|
11568
|
+
\**********************************************************************/
|
|
11569
|
+
/*! exports provided: getEventCoordinates, getEventTarget, isTouchEvent, addPointerEventListeners, removePointerEventListeners, hasMovedEnough */
|
|
11570
|
+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
11571
|
+
|
|
11572
|
+
"use strict";
|
|
11573
|
+
__webpack_require__.r(__webpack_exports__);
|
|
11574
|
+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getEventCoordinates", function() { return getEventCoordinates; });
|
|
11575
|
+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getEventTarget", function() { return getEventTarget; });
|
|
11576
|
+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isTouchEvent", function() { return isTouchEvent; });
|
|
11577
|
+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "addPointerEventListeners", function() { return addPointerEventListeners; });
|
|
11578
|
+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "removePointerEventListeners", function() { return removePointerEventListeners; });
|
|
11579
|
+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hasMovedEnough", function() { return hasMovedEnough; });
|
|
11580
|
+
// 统一获取事件坐标的函数
|
|
11581
|
+
function getEventCoordinates(event) {
|
|
11582
|
+
if ('touches' in event && event.touches.length > 0) {
|
|
11583
|
+
return {
|
|
11584
|
+
clientX: event.touches[0].clientX,
|
|
11585
|
+
clientY: event.touches[0].clientY
|
|
11586
|
+
};
|
|
11587
|
+
} else if ('changedTouches' in event && event.changedTouches.length > 0) {
|
|
11588
|
+
return {
|
|
11589
|
+
clientX: event.changedTouches[0].clientX,
|
|
11590
|
+
clientY: event.changedTouches[0].clientY
|
|
11591
|
+
};
|
|
11592
|
+
} else {
|
|
11593
|
+
return {
|
|
11594
|
+
clientX: event.clientX,
|
|
11595
|
+
clientY: event.clientY
|
|
11596
|
+
};
|
|
11597
|
+
}
|
|
11598
|
+
}
|
|
11599
|
+
|
|
11600
|
+
// 获取事件目标元素
|
|
11601
|
+
function getEventTarget(event) {
|
|
11602
|
+
if ('touches' in event && event.touches.length > 0) {
|
|
11603
|
+
return document.elementFromPoint(event.touches[0].clientX, event.touches[0].clientY);
|
|
11604
|
+
}
|
|
11605
|
+
// 处理touchend事件,此时touches为空,需要使用changedTouches
|
|
11606
|
+
if ('changedTouches' in event && event.changedTouches.length > 0) {
|
|
11607
|
+
return document.elementFromPoint(event.changedTouches[0].clientX, event.changedTouches[0].clientY);
|
|
11608
|
+
}
|
|
11609
|
+
return event.target;
|
|
11610
|
+
}
|
|
11611
|
+
|
|
11612
|
+
// 判断是否为触摸事件
|
|
11613
|
+
function isTouchEvent(event) {
|
|
11614
|
+
return 'touches' in event;
|
|
11615
|
+
}
|
|
11616
|
+
|
|
11617
|
+
// 为元素添加统一的指针事件监听器
|
|
11618
|
+
function addPointerEventListeners(element, handlers, isTouchStart) {
|
|
11619
|
+
if (isTouchStart) {
|
|
11620
|
+
element.addEventListener('touchmove', handlers.onPointerMove, {
|
|
11621
|
+
passive: false
|
|
11622
|
+
});
|
|
11623
|
+
element.addEventListener('touchend', handlers.onPointerUp, {
|
|
11624
|
+
passive: false
|
|
11625
|
+
});
|
|
11626
|
+
} else {
|
|
11627
|
+
element.addEventListener('mousemove', handlers.onPointerMove);
|
|
11628
|
+
element.addEventListener('mouseup', handlers.onPointerUp);
|
|
11629
|
+
}
|
|
11630
|
+
}
|
|
11631
|
+
|
|
11632
|
+
// 移除统一的指针事件监听器
|
|
11633
|
+
function removePointerEventListeners(element, handlers, isTouchStart) {
|
|
11634
|
+
if (isTouchStart) {
|
|
11635
|
+
element.removeEventListener('touchmove', handlers.onPointerMove);
|
|
11636
|
+
element.removeEventListener('touchend', handlers.onPointerUp);
|
|
11637
|
+
} else {
|
|
11638
|
+
element.removeEventListener('mousemove', handlers.onPointerMove);
|
|
11639
|
+
element.removeEventListener('mouseup', handlers.onPointerUp);
|
|
11640
|
+
}
|
|
11641
|
+
}
|
|
11642
|
+
|
|
11643
|
+
// 检查是否移动了足够的距离(用于区分点击和拖拽)
|
|
11644
|
+
function hasMovedEnough(startX, startY, endX, endY) {
|
|
11645
|
+
var threshold = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 5;
|
|
11646
|
+
var xDiff = endX - startX;
|
|
11647
|
+
var yDiff = endY - startY;
|
|
11648
|
+
return Math.sqrt(xDiff * xDiff + yDiff * yDiff) > threshold;
|
|
11649
|
+
}
|
|
11650
|
+
|
|
11651
|
+
/***/ }),
|
|
11652
|
+
|
|
11446
11653
|
/***/ "./components/table/pipeline/index.ts":
|
|
11447
11654
|
/*!********************************************!*\
|
|
11448
11655
|
!*** ./components/table/pipeline/index.ts ***!
|