@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.
Files changed (23) hide show
  1. package/dist/@kdcloudjs/table.css +1 -1
  2. package/dist/@kdcloudjs/table.js +540 -333
  3. package/dist/@kdcloudjs/table.js.map +1 -1
  4. package/dist/@kdcloudjs/table.min.css +1 -1
  5. package/dist/@kdcloudjs/table.min.js +4 -4
  6. package/dist/@kdcloudjs/table.min.js.map +1 -1
  7. package/es/table/base/styles.js +8 -4
  8. package/es/table/base/table.d.ts +1 -0
  9. package/es/table/base/table.js +5 -3
  10. package/es/table/pipeline/features/columnDrag.js +220 -242
  11. package/es/table/pipeline/features/columnResizeWidth.js +40 -5
  12. package/es/table/pipeline/features/rowDrag.js +169 -80
  13. package/es/table/pipeline/features/utils/touchEventUtils.d.ts +15 -0
  14. package/es/table/pipeline/features/utils/touchEventUtils.js +65 -0
  15. package/lib/table/base/styles.js +8 -4
  16. package/lib/table/base/table.d.ts +1 -0
  17. package/lib/table/base/table.js +5 -3
  18. package/lib/table/pipeline/features/columnDrag.js +220 -242
  19. package/lib/table/pipeline/features/columnResizeWidth.js +40 -5
  20. package/lib/table/pipeline/features/rowDrag.js +169 -80
  21. package/lib/table/pipeline/features/utils/touchEventUtils.d.ts +15 -0
  22. package/lib/table/pipeline/features/utils/touchEventUtils.js +76 -0
  23. package/package.json +1 -1
package/es/table/base/styles.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime-corejs3/helpers/taggedTemplateLiteral";
2
2
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
3
- import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
4
3
  import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
4
+ import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
5
5
  import styled, { css, createGlobalStyle } from 'styled-components';
6
6
  import { swapRTLDirection } from './utils';
7
7
  export var LOCK_SHADOW_PADDING = 20;
@@ -156,7 +156,11 @@ export var defaultCSSVariables = {
156
156
  export var variableConst = getCssVariableText(defaultCSSVariables);
157
157
  var notBorderedStyleMixin = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n --cell-border-vertical: none;\n --header-cell-border-vertical: none;\n"])));
158
158
  var borderedStyleMixin = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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);
159
- export var StyledArtTableWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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) {
159
+ export var StyledArtTableWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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) {
160
+ var _context, _context2, _context3;
161
+ var prefixCls = _ref.prefixCls;
162
+ return prefixCls ? _concatInstanceProperty(_context = _concatInstanceProperty(_context2 = "&.".concat(prefixCls, "-table {:root {")).call(_context2, variableConst, "} ")).call(_context, variableConst, "}") : _concatInstanceProperty(_context3 = ":root {".concat(variableConst, "} ")).call(_context3, variableConst);
163
+ }, 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) {
160
164
  return swapRTLDirection(props.direction, 'left');
161
165
  }, Classes.tableCellRangeBottom, Classes.tableCellRangeRight, function (props) {
162
166
  return swapRTLDirection(props.direction, 'right');
@@ -204,8 +208,8 @@ export var StyledArtTableWrapper = styled.div(_templateObject5 || (_templateObje
204
208
  export var ButtonCSS = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n ", "\n .", "{\n color: var(--color);\n background:#ffffff;\n border:1px solid var(--strong-border-color);\n border-radius: 2px;\n cursor: pointer;\n &:hover{\n color: var(--primary-color);\n border:1px solid var(--primary-color);\n }\n }\n .", " {\n color:#ffffff;\n background-color: var(--primary-color);\n border:none;\n &:hover{\n color:#ffffff;\n background-color: var(--primary-color-level2);\n border:none;\n }\n }\n"])), variableConst, Classes.button, Classes.buttonPrimary);
205
209
  function getCssVariableText(obj) {
206
210
  return _Object$keys(obj).reduce(function (acc, key) {
207
- var _context;
208
- acc += _concatInstanceProperty(_context = "".concat(key, ":")).call(_context, obj[key], ";");
211
+ var _context4;
212
+ acc += _concatInstanceProperty(_context4 = "".concat(key, ":")).call(_context4, obj[key], ";");
209
213
  return acc;
210
214
  }, '');
211
215
  }
package/es/table/base/table.d.ts CHANGED
@@ -91,6 +91,7 @@ export interface BaseTableProps {
91
91
  blockSize?: number;
92
92
  };
93
93
  direction?: string;
94
+ prefixCls?: string;
94
95
  }
95
96
  export interface BaseTableState {
96
97
  /** 是否要展示自定义滚动条(stickyScroll) */
package/es/table/base/table.js CHANGED
@@ -489,7 +489,8 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
489
489
  footerDataSource = _this$props8.footerDataSource,
490
490
  components = _this$props8.components,
491
491
  bordered = _this$props8.bordered,
492
- direction = _this$props8.direction;
492
+ direction = _this$props8.direction,
493
+ prefixCls = _this$props8.prefixCls;
493
494
  info.direction = direction;
494
495
  var artTableWrapperClassName = cx(Classes.artTableWrapper, (_cx = {
495
496
  'use-outer-border': useOuterBorder,
@@ -499,7 +500,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
499
500
  'sticky-header': isStickyHeader !== null && isStickyHeader !== void 0 ? isStickyHeader : isStickyHead,
500
501
  'has-footer': footerDataSource.length > 0,
501
502
  'sticky-footer': isStickyFooter
502
- }, _defineProperty(_cx, Classes.artTableBordered, bordered), _defineProperty(_cx, 'ie-polyfill-wrapper', browserType.isIE), _defineProperty(_cx, 'sticky-polyfill-wrapper', isStickyUIDegrade()), _cx), className);
503
+ }, _defineProperty(_cx, Classes.artTableBordered, bordered), _defineProperty(_cx, 'ie-polyfill-wrapper', browserType.isIE), _defineProperty(_cx, 'sticky-polyfill-wrapper', isStickyUIDegrade()), _defineProperty(_cx, "".concat(prefixCls, "-table"), prefixCls), _cx), className);
503
504
  var artTableWrapperProps = _defineProperty({
504
505
  className: artTableWrapperClassName,
505
506
  style: _extends(_extends({}, style), {
@@ -510,7 +511,8 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
510
511
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GlobalStyleComponent, {
511
512
  direction: info.direction
512
513
  }), /*#__PURE__*/React.createElement(StyledArtTableWrapper, _extends({}, artTableWrapperProps, {
513
- direction: info.direction
514
+ direction: info.direction,
515
+ prefixCls: this.props.prefixCls
514
516
  }), /*#__PURE__*/React.createElement(Loading, {
515
517
  visible: isLoading,
516
518
  LoadingIcon: components.LoadingIcon,
package/es/table/pipeline/features/columnDrag.js CHANGED
@@ -4,6 +4,7 @@ import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray
4
4
  import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
5
5
  import { makeRecursiveMapper, mergeCellProps, collectNodes, isLeafNode, isSelectColumn } from '../../utils';
6
6
  import { FILL_COLUMN_CODE } from './autoFill';
7
+ import { getEventCoordinates, hasMovedEnough, addPointerEventListeners, removePointerEventListeners } from './utils/touchEventUtils';
7
8
  var stateKey = 'columnDrag';
8
9
  var SCROLL_SIZE = 30;
9
10
  function disableSelect(event) {
@@ -61,251 +62,237 @@ export function columnDrag() {
61
62
  style: style
62
63
  });
63
64
  },
64
- headerCellProps: mergeCellProps(col.headerCellProps, {
65
- onMouseDown: !isLeaf || path.length > 1 ? undefined : function (e) {
65
+ headerCellProps: mergeCellProps(col.headerCellProps, _extends(_extends({}, isLeaf && path.length === 1 ? {
66
+ onMouseDown: function onMouseDown(e) {
66
67
  if (e.button !== 0 || !e.currentTarget.contains(e.target)) {
67
68
  return;
68
69
  }
69
- window.addEventListener('selectstart', disableSelect);
70
- // const cx = e.clientX
71
- // const width = col.width
72
- // const a = startIndex
73
- // const b = endIndex
74
- // const newColumnDragData = [...columnDragData]
75
- // let newColumn = [...columns]
76
- // let newStartIndex = startIndex
77
- // let endIdx = endIndex
78
- var columnMoved = false;
79
- var columns = pipeline.getColumns();
80
- var _pipeline$getStateAtK2 = pipeline.getStateAtKey(stateKey, {}),
81
- cloumnsTranslateData = _pipeline$getStateAtK2.cloumnsTranslateData;
82
- var cloumnsSortData = {};
83
- columns.forEach(function (item, index) {
84
- cloumnsSortData[item.code] = index;
85
- });
86
- var currentTarget = e.currentTarget;
87
- var rect = e.currentTarget.parentElement.getClientRects()[0];
88
- var startX = direction === 'rtl' ? rect.right : rect.left;
89
- var mouseDownClientX = e.clientX;
90
- var mouseDownClientY = e.clientY;
91
- var moveData = [];
92
- var allColumns = collectNodes(columns);
93
- var tableBodyClientRect = tableBody.getBoundingClientRect();
94
- var startScrollLeft = pipeline.ref.current.domHelper.virtual.scrollLeft;
95
- var updateScrollPosition = function updateScrollPosition(client) {
96
- var clientX = client.clientX;
97
- var left = tableBodyClientRect.left,
98
- width = tableBodyClientRect.width;
99
- if (clientX + SCROLL_SIZE >= left + width) {
100
- pipeline.ref.current.domHelper.virtual.scrollLeft += SCROLL_SIZE;
101
- }
102
- if (clientX - SCROLL_SIZE <= left) {
103
- pipeline.ref.current.domHelper.virtual.scrollLeft -= SCROLL_SIZE;
104
- }
105
- };
106
- function handleMouseMove(e) {
107
- var client = {
108
- clientX: e.clientX,
109
- clientY: e.clientY
110
- };
111
- var scrollDistance = pipeline.ref.current.domHelper.virtual.scrollLeft - startScrollLeft;
112
- var startPosition = startX - scrollDistance; // 表头最左边起点
113
- var offsetDistance = direction === 'rtl' ? startPosition - e.clientX : e.clientX - startPosition;
114
- updateScrollPosition(client);
115
- if (offsetDistance < 20) {
116
- return;
117
- } else {
118
- e.stopPropagation();
119
- }
120
- document.body.style.userSelect = 'none';
121
- currentTarget.style.cursor = 'move';
122
- // 循环计算每一个的位置
123
- // if (startIndex !== replaceIndex) {
124
- // const optionColumn = columns[startIndex]
125
- // const move = startIndex > replaceIndex ? 1 : -1
126
- // let index = Math.min(startIndex, replaceIndex)
127
- // while (index < Math.max(startIndex, replaceIndex)) {
128
- // const code = columns[index].code
129
- // cloumnsTranslateData[code] += move * optionColumn.width
130
- // cloumnsTranslateData[optionColumn.code] -= move * optionColumn.width
131
- // index += move
132
- // }
133
- // }
134
- // const opColumn = columns[startIndex]
135
- // let index = Math.min(startIndex, replaceIndex)
136
- // while (index <= Math.max(startIndex, replaceIndex)) {
137
- // const code = columns[index].code
138
- // if (index !== startIndex && index !== replaceIndex) {
139
- // cloumnsTranslateData[code] += opColumn.width * (index > startIndex ? -1 : 1)
140
- // cloumnsTranslateData[opColumn.code] += columns[index].width * (index < startIndex ? -1 : 1)
141
- // }
142
- // index++
143
- // }
144
- // 重置位置信息
145
- cloumnsTranslateData = {};
146
- allColumns.forEach(function (item) {
147
- cloumnsTranslateData[item.code] = 0;
148
- });
149
- // 计算平移位置
150
- var replaceIndex = 0;
151
- var totalWitdth = getColumnWidth(columns[replaceIndex]);
152
- while (totalWitdth < offsetDistance && replaceIndex < columns.length - 1) {
153
- replaceIndex++;
154
- totalWitdth += getColumnWidth(columns[replaceIndex]);
155
- }
156
- // 需要取最新startIndex, 不能直接用makeRecursiveMapper提供的startIndex（因为map时还没添加选择列、充满列等后面use添加的列）
157
- var startIndex;
158
- columns.forEach(function (column, index) {
159
- if (column.code === col.code) {
160
- startIndex = index;
161
- }
162
- });
163
- var optionColumn = columns[startIndex];
164
- var index = replaceIndex;
165
- if (startIndex > replaceIndex) {
166
- // 左移
167
- while (index < startIndex) {
168
- var _columns$index = columns[index],
169
- code = _columns$index.code,
170
- lock = _columns$index.lock,
171
- width = _columns$index.width,
172
- children = _columns$index.children;
173
- if (enableMove({
174
- code: code,
175
- lock: lock
176
- })) {
177
- cloumnsTranslateData[code] += _adjustTranslation(optionColumn.width);
178
- if (isLeafNode(columns[index])) {
179
- cloumnsTranslateData[optionColumn.code] -= _adjustTranslation(width);
180
- } else {
181
- cloumnsTranslateData[optionColumn.code] -= _adjustTranslation(getColumnWidth(columns[index]));
182
- moveAllChildren(children, cloumnsTranslateData, _adjustTranslation(optionColumn.width));
183
- }
184
- columnMoved = true;
185
- }
186
- index++;
187
- }
188
- } else if (startIndex < replaceIndex) {
189
- // 右移
190
- while (startIndex < index) {
191
- var _columns$index2 = columns[index],
192
- _code = _columns$index2.code,
193
- _lock = _columns$index2.lock,
194
- _width = _columns$index2.width,
195
- _children = _columns$index2.children;
196
- if (enableMove({
197
- code: _code,
198
- lock: _lock
199
- })) {
200
- cloumnsTranslateData[_code] -= _adjustTranslation(optionColumn.width);
201
- if (isLeafNode(columns[index])) {
202
- cloumnsTranslateData[optionColumn.code] += _adjustTranslation(_width);
203
- } else {
204
- cloumnsTranslateData[optionColumn.code] += _adjustTranslation(getColumnWidth(columns[index]));
205
- moveAllChildren(_children, cloumnsTranslateData, _adjustTranslation(optionColumn.width), true);
206
- }
207
- columnMoved = true;
208
- }
209
- index--;
70
+ handlePointerDown(e.nativeEvent, false, e.currentTarget);
71
+ },
72
+ onTouchStart: function onTouchStart(e) {
73
+ // 阻止触摸事件的默认行为
74
+ if (e.cancelable) {
75
+ e.preventDefault();
76
+ }
77
+ handlePointerDown(e.nativeEvent, true, e.currentTarget);
78
+ }
79
+ } : {}), {
80
+ style: style
81
+ }))
82
+ });
83
+ // 统一的拖拽处理函数
84
+ function handlePointerDown(startEvent, isTouch, currentTarget) {
85
+ var _a;
86
+ window.addEventListener('selectstart', disableSelect);
87
+ var columnMoved = false;
88
+ var columns = pipeline.getColumns();
89
+ var _pipeline$getStateAtK2 = pipeline.getStateAtKey(stateKey, {}),
90
+ cloumnsTranslateData = _pipeline$getStateAtK2.cloumnsTranslateData;
91
+ var cloumnsSortData = {};
92
+ columns.forEach(function (item, index) {
93
+ cloumnsSortData[item.code] = index;
94
+ });
95
+ var rect = (_a = currentTarget.parentElement) === null || _a === void 0 ? void 0 : _a.getClientRects()[0];
96
+ if (!rect) return;
97
+ var startX = direction === 'rtl' ? rect.right : rect.left;
98
+ var startCoordinates = getEventCoordinates(startEvent);
99
+ var mouseDownClientX = startCoordinates.clientX;
100
+ var mouseDownClientY = startCoordinates.clientY;
101
+ var moveData = [];
102
+ var allColumns = collectNodes(columns);
103
+ var tableBodyClientRect = tableBody.getBoundingClientRect();
104
+ var startScrollLeft = pipeline.ref.current.domHelper.virtual.scrollLeft;
105
+ var updateScrollPosition = function updateScrollPosition(client) {
106
+ var clientX = client.clientX;
107
+ var left = tableBodyClientRect.left,
108
+ width = tableBodyClientRect.width;
109
+ if (clientX + SCROLL_SIZE >= left + width) {
110
+ pipeline.ref.current.domHelper.virtual.scrollLeft += SCROLL_SIZE;
111
+ }
112
+ if (clientX - SCROLL_SIZE <= left) {
113
+ pipeline.ref.current.domHelper.virtual.scrollLeft -= SCROLL_SIZE;
114
+ }
115
+ };
116
+ function handlePointerMove(e) {
117
+ // 触摸事件需要阻止默认行为，防止页面滚动
118
+ if (isTouch && e.cancelable) {
119
+ e.preventDefault();
120
+ }
121
+ var coordinates = getEventCoordinates(e);
122
+ var client = {
123
+ clientX: coordinates.clientX,
124
+ clientY: coordinates.clientY
125
+ };
126
+ var scrollDistance = pipeline.ref.current.domHelper.virtual.scrollLeft - startScrollLeft;
127
+ var startPosition = startX - scrollDistance; // 表头最左边起点
128
+ var offsetDistance = direction === 'rtl' ? startPosition - coordinates.clientX : coordinates.clientX - startPosition;
129
+ updateScrollPosition(client);
130
+ if (offsetDistance < 20) {
131
+ return;
132
+ } else {
133
+ e.stopPropagation();
134
+ }
135
+ document.body.style.userSelect = 'none';
136
+ currentTarget.style.cursor = 'move';
137
+ // 重置位置信息
138
+ cloumnsTranslateData = {};
139
+ allColumns.forEach(function (item) {
140
+ cloumnsTranslateData[item.code] = 0;
141
+ });
142
+ // 计算平移位置
143
+ var replaceIndex = 0;
144
+ var totalWitdth = getColumnWidth(columns[replaceIndex]);
145
+ while (totalWitdth < offsetDistance && replaceIndex < columns.length - 1) {
146
+ replaceIndex++;
147
+ totalWitdth += getColumnWidth(columns[replaceIndex]);
148
+ }
149
+ // 需要取最新startIndex, 不能直接用makeRecursiveMapper提供的startIndex（因为map时还没添加选择列、充满列等后面use添加的列）
150
+ var startIndex;
151
+ columns.forEach(function (column, index) {
152
+ if (column.code === col.code) {
153
+ startIndex = index;
154
+ }
155
+ });
156
+ var optionColumn = columns[startIndex];
157
+ var index = replaceIndex;
158
+ if (startIndex > replaceIndex) {
159
+ // 左移
160
+ while (index < startIndex) {
161
+ var _columns$index = columns[index],
162
+ code = _columns$index.code,
163
+ lock = _columns$index.lock,
164
+ width = _columns$index.width,
165
+ children = _columns$index.children;
166
+ if (enableMove({
167
+ code: code,
168
+ lock: lock
169
+ })) {
170
+ cloumnsTranslateData[code] += _adjustTranslation(optionColumn.width);
171
+ if (isLeafNode(columns[index])) {
172
+ cloumnsTranslateData[optionColumn.code] -= _adjustTranslation(width);
173
+ } else {
174
+ cloumnsTranslateData[optionColumn.code] -= _adjustTranslation(getColumnWidth(columns[index]));
175
+ moveAllChildren(children, cloumnsTranslateData, _adjustTranslation(optionColumn.width));
210
176
  }
177
+ columnMoved = true;
211
178
  }
212
- window.requestAnimationFrame(function () {
213
- pipeline.setStateAtKey(stateKey, {
214
- cloumnsTranslateData: cloumnsTranslateData
215
- });
216
- moveData = [startIndex, replaceIndex];
217
- });
179
+ index++;
218
180
  }
219
- function handleMouseUp(e) {
220
- document.body.removeEventListener('mousemove', handleMouseMove);
221
- document.body.removeEventListener('mouseup', handleMouseUp);
222
- window.removeEventListener('selectstart', disableSelect);
223
- if (_isMoveWhenClicking(mouseDownClientX, mouseDownClientY, e.clientX, e.clientY)) {
224
- e.stopPropagation(); // 存在移动就阻止冒泡
225
- currentTarget.addEventListener('click', stopClickPropagation); // 阻止列头点击事件，防止拖动后触发列头过滤事件
181
+ } else if (startIndex < replaceIndex) {
182
+ // 右移
183
+ while (startIndex < index) {
184
+ var _columns$index2 = columns[index],
185
+ _code = _columns$index2.code,
186
+ _lock = _columns$index2.lock,
187
+ _width = _columns$index2.width,
188
+ _children = _columns$index2.children;
189
+ if (enableMove({
190
+ code: _code,
191
+ lock: _lock
192
+ })) {
193
+ cloumnsTranslateData[_code] -= _adjustTranslation(optionColumn.width);
194
+ if (isLeafNode(columns[index])) {
195
+ cloumnsTranslateData[optionColumn.code] += _adjustTranslation(_width);
196
+ } else {
197
+ cloumnsTranslateData[optionColumn.code] += _adjustTranslation(getColumnWidth(columns[index]));
198
+ moveAllChildren(_children, cloumnsTranslateData, _adjustTranslation(optionColumn.width), true);
199
+ }
200
+ columnMoved = true;
226
201
  }
202
+ index--;
203
+ }
204
+ }
205
+ window.requestAnimationFrame(function () {
206
+ pipeline.setStateAtKey(stateKey, {
207
+ cloumnsTranslateData: cloumnsTranslateData
208
+ });
209
+ moveData = [startIndex, replaceIndex];
210
+ });
211
+ }
212
+ function handlePointerUp(e) {
213
+ removePointerEventListeners(document.body, {
214
+ onPointerMove: handlePointerMove,
215
+ onPointerUp: handlePointerUp
216
+ }, isTouch);
217
+ window.removeEventListener('selectstart', disableSelect);
218
+ var endCoordinates = getEventCoordinates(e);
219
+ if (hasMovedEnough(mouseDownClientX, mouseDownClientY, endCoordinates.clientX, endCoordinates.clientY)) {
220
+ e.stopPropagation(); // 存在移动就阻止冒泡
221
+ currentTarget.addEventListener('click', stopClickPropagation); // 阻止列头点击事件，防止拖动后触发列头过滤事件
222
+ }
227
223
 
228
- window.requestAnimationFrame(function () {
229
- // 取消阻止列头点击事件
230
- currentTarget.removeEventListener('click', stopClickPropagation);
231
- currentTarget = null;
232
- var _moveData = moveData,
233
- _moveData2 = _slicedToArray(_moveData, 2),
234
- startIndex = _moveData2[0],
235
- replaceIndex = _moveData2[1];
236
- var optionColumn = columns[startIndex];
237
- // const move = startIndex > replaceIndex ? 1 : -1
238
- // let index = Math.min(startIndex, replaceIndex)
239
- // while (index < Math.max(startIndex, replaceIndex) && index > 0) {
240
- // const code = columns[index].code
241
- // cloumnsSortData[optionColumn.code] -= move
242
- // cloumnsSortData[code] += move
243
- // index += move
244
- // }
245
- var index = replaceIndex;
246
- if (startIndex > replaceIndex) {
247
- // 左移
248
- while (index < startIndex) {
249
- var _columns$index3 = columns[index],
250
- code = _columns$index3.code,
251
- lock = _columns$index3.lock;
252
- if (enableMove({
253
- code: code,
254
- lock: lock
255
- })) {
256
- cloumnsSortData[code] += 1;
257
- cloumnsSortData[optionColumn.code] -= 1;
258
- columnMoved = true;
259
- }
260
- index++;
261
- }
262
- } else if (startIndex < replaceIndex) {
263
- // 右移
264
- while (index > startIndex) {
265
- var _columns$index4 = columns[index],
266
- _code2 = _columns$index4.code,
267
- _lock2 = _columns$index4.lock;
268
- if (enableMove({
269
- code: _code2,
270
- lock: _lock2
271
- })) {
272
- cloumnsSortData[_code2] -= 1;
273
- cloumnsSortData[optionColumn.code] += 1;
274
- columnMoved = true;
275
- }
276
- index--;
277
- }
224
+ window.requestAnimationFrame(function () {
225
+ // 取消阻止列头点击事件
226
+ currentTarget.removeEventListener('click', stopClickPropagation);
227
+ currentTarget = null;
228
+ var _moveData = moveData,
229
+ _moveData2 = _slicedToArray(_moveData, 2),
230
+ startIndex = _moveData2[0],
231
+ replaceIndex = _moveData2[1];
232
+ var optionColumn = columns[startIndex];
233
+ var index = replaceIndex;
234
+ if (startIndex > replaceIndex) {
235
+ // 左移
236
+ while (index < startIndex) {
237
+ var _columns$index3 = columns[index],
238
+ code = _columns$index3.code,
239
+ lock = _columns$index3.lock;
240
+ if (enableMove({
241
+ code: code,
242
+ lock: lock
243
+ })) {
244
+ cloumnsSortData[code] += 1;
245
+ cloumnsSortData[optionColumn.code] -= 1;
246
+ columnMoved = true;
278
247
  }
279
- var onColumnDragStopped = opts.onColumnDragStopped;
280
- // 拖拽结束返回列顺序
281
- if (onColumnDragStopped) {
282
- var _context;
283
- var isRowDragColumn = function isRowDragColumn(code) {
284
- var rowDragColumnKey = pipeline.getFeatureOptions('rowDragColumnKey');
285
- return code === rowDragColumnKey;
286
- };
287
- var newColumns = _filterInstanceProperty(_context = sortColumns(columns, cloumnsSortData)).call(_context, function (column) {
288
- return column.code !== FILL_COLUMN_CODE && !isRowDragColumn(column.code) && !isSelectColumn(column);
289
- });
290
- // TODO drag需要在resize之后use,否则这里返回的列对应的宽度不是拖拽后的
291
- onColumnDragStopped(columnMoved, newColumns);
248
+ index++;
249
+ }
250
+ } else if (startIndex < replaceIndex) {
251
+ // 右移
252
+ while (index > startIndex) {
253
+ var _columns$index4 = columns[index],
254
+ _code2 = _columns$index4.code,
255
+ _lock2 = _columns$index4.lock;
256
+ if (enableMove({
257
+ code: _code2,
258
+ lock: _lock2
259
+ })) {
260
+ cloumnsSortData[_code2] -= 1;
261
+ cloumnsSortData[optionColumn.code] += 1;
262
+ columnMoved = true;
292
263
  }
293
- pipeline.setStateAtKey(stateKey, {
294
- cloumnsTranslateData: null
295
- });
264
+ index--;
265
+ }
266
+ }
267
+ var onColumnDragStopped = opts.onColumnDragStopped;
268
+ // 拖拽结束返回列顺序
269
+ if (onColumnDragStopped) {
270
+ var _context;
271
+ var isRowDragColumn = function isRowDragColumn(code) {
272
+ var rowDragColumnKey = pipeline.getFeatureOptions('rowDragColumnKey');
273
+ return code === rowDragColumnKey;
274
+ };
275
+ var newColumns = _filterInstanceProperty(_context = sortColumns(columns, cloumnsSortData)).call(_context, function (column) {
276
+ return column.code !== FILL_COLUMN_CODE && !isRowDragColumn(column.code) && !isSelectColumn(column);
296
277
  });
297
- document.body.style.userSelect = '';
298
- currentTarget.style.opacity = '';
299
- currentTarget.style.cursor = '';
278
+ // TODO drag需要在resize之后use,否则这里返回的列对应的宽度不是拖拽后的
279
+ onColumnDragStopped(columnMoved, newColumns);
300
280
  }
301
- var onColumnDragStart = opts.onColumnDragStart;
302
- onColumnDragStart && onColumnDragStart(col);
303
- document.body.addEventListener('mousemove', handleMouseMove);
304
- document.body.addEventListener('mouseup', handleMouseUp);
305
- },
306
- style: style
307
- })
308
- });
281
+ pipeline.setStateAtKey(stateKey, {
282
+ cloumnsTranslateData: null
283
+ });
284
+ });
285
+ document.body.style.userSelect = '';
286
+ currentTarget.style.opacity = '';
287
+ currentTarget.style.cursor = '';
288
+ }
289
+ var onColumnDragStart = opts.onColumnDragStart;
290
+ onColumnDragStart && onColumnDragStart(col);
291
+ addPointerEventListeners(document.body, {
292
+ onPointerMove: handlePointerMove,
293
+ onPointerUp: handlePointerUp
294
+ }, isTouch);
295
+ }
309
296
  }));
310
297
  };
311
298
  }
@@ -333,13 +320,4 @@ function moveAllChildren(cols, cloumnsTranslateData, width, isMinus) {
333
320
  moveAllChildren(children, cloumnsTranslateData, width);
334
321
  }
335
322
  });
336
- }
337
- function _isMoveWhenClicking(mouseDownClientX, mouseDownClientY, mouseUpClientX, mouseUpClientY) {
338
- var xDiff = mouseUpClientX - mouseDownClientX;
339
- var yDiff = mouseUpClientY - mouseDownClientY;
340
- // 鼠标点按和松开的偏移量大于5px，认为存在移动
341
- if (Math.sqrt(xDiff * xDiff + yDiff * yDiff) > 5) {
342
- return true;
343
- }
344
- return false;
345
323
  }