@kdcloudjs/table 1.2.1-canary.3 → 1.2.1-canary.5

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 (33) hide show
  1. package/dist/@kdcloudjs/table.css +1 -1
  2. package/dist/@kdcloudjs/table.js +168 -22
  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 +6 -6
  6. package/dist/@kdcloudjs/table.min.js.map +1 -1
  7. package/es/table/base/renderTemplates.js +2 -2
  8. package/es/table/base/styles.js +1 -1
  9. package/es/table/base/table.js +2 -2
  10. package/es/table/base/utils.js +3 -3
  11. package/es/table/pipeline/features/columnDrag.d.ts +1 -0
  12. package/es/table/pipeline/features/columnDrag.js +2 -0
  13. package/es/table/pipeline/features/rowDrag.js +16 -5
  14. package/es/table/utils/browserType.d.ts +8 -0
  15. package/es/table/utils/browserType.js +61 -5
  16. package/es/table/utils/index.d.ts +1 -0
  17. package/es/table/utils/index.js +2 -1
  18. package/es/table/utils/uiDegrade.d.ts +1 -0
  19. package/es/table/utils/uiDegrade.js +31 -0
  20. package/lib/table/base/renderTemplates.js +1 -1
  21. package/lib/table/base/styles.js +1 -1
  22. package/lib/table/base/table.js +1 -1
  23. package/lib/table/base/utils.js +2 -2
  24. package/lib/table/pipeline/features/columnDrag.d.ts +1 -0
  25. package/lib/table/pipeline/features/columnDrag.js +2 -0
  26. package/lib/table/pipeline/features/rowDrag.js +17 -4
  27. package/lib/table/utils/browserType.d.ts +8 -0
  28. package/lib/table/utils/browserType.js +63 -6
  29. package/lib/table/utils/index.d.ts +1 -0
  30. package/lib/table/utils/index.js +9 -1
  31. package/lib/table/utils/uiDegrade.d.ts +1 -0
  32. package/lib/table/utils/uiDegrade.js +40 -0
  33. package/package.json +1 -1
package/es/table/base/renderTemplates.js CHANGED
@@ -15,7 +15,7 @@ import cx from 'classnames';
15
15
  import { HtmlTable } from './html-table';
16
16
  import { Classes } from './styles';
17
17
  import { composeRowPropsGetter } from './utils';
18
- import { getTreeDepth, browserType } from '../utils';
18
+ import { getTreeDepth, isStickyUIDegrade } from '../utils';
19
19
  import TableHeader from './header';
20
20
  var TEMPLATES = new _Map();
21
21
 
@@ -346,7 +346,7 @@ function RowDetail(props) {
346
346
  }, renderDetail(row, rowIndex));
347
347
  }
348
348
 
349
- if (browserType.isIE) {
349
+ if (isStickyUIDegrade()) {
350
350
  TEMPLATES.set('header', renderTableHeaderInIE);
351
351
  TEMPLATES.set('body', renderTableBodyInIE);
352
352
  TEMPLATES.set('footer', renderTableFooterInIE);
package/es/table/base/styles.js CHANGED
@@ -141,7 +141,7 @@ export var defaultCSSVariables = {
141
141
  export var variableConst = getCssVariableText(defaultCSSVariables);
142
142
  var notBorderedStyleMixin = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n --cell-border-vertical: none;\n --header-cell-border-vertical: none;\n"])));
143
143
  var borderedStyleMixin = css(_templateObject3 || (_templateObject3 = _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);
144
- export var StyledArtTableWrapper = styled.div(_templateObject4 || (_templateObject4 = _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 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-left: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-bottom: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-right: 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\n .", " td{\n border-top: 1px solid var(--primary-color) !important;\n }\n\n .", " td{\n border-bottom: 1px solid var(--primary-color) !important;\n \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: left;\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-right: var(--header-cell-border-vertical);\n border-bottom: var(--header-cell-border-horizontal);\n position: relative;\n }\n\n th.resizeable{\n border-right: var(--header-cell-border-vertical)\n }\n\n th.", " {\n border-right: 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-left: 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-right: var(--cell-border-vertical);\n border-bottom: var(--cell-border-horizontal);\n word-break: break-all;\n }\n td.", " {\n border-left: 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-right: ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-right: var(--cell-border-vertical);\n }\n }\n\n .", " {\n margin-left: ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-left: 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 IE\u517C\u5BB9\n &.ie-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 left:0;\n }\n .", "{\n right: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\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 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 right: 0;\n width: 5px;\n &::after{\n left: 4px;\n }\n }\n //#endregion\n\n "])), variableConst, variableConst, outerBorderStyleMixin, Classes.artTableBordered, notBorderedStyleMixin, Classes.artTableBordered, borderedStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableFooter, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, Classes.tableCellRangeBottom, Classes.tableCellRangeRight, Classes.rangeSelection, Classes.rowDragging, Classes.tableBody, Classes.tableRow, Classes.tableFooter, Classes.tableRow, Classes.rowDragStart, Classes.rowDragEndToTop, Classes.rowDragEndToBottom, Classes.rowDragCell, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.leaf, Classes.first, Classes.first, Classes.first, Classes.first, Classes.first, Classes.last, Classes.lockLeft, Classes.lockRight, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.virtual, Classes.tableBody, Classes.tableFooter, Classes.tableHeaderMain, Classes.tableHeader, Classes.tableFooterMain, Classes.fixedLeft, Classes.fixedRight, Z.lock, Classes.fixedLeft, Classes.fixedRight, Classes.rowDetailContainer, Classes.rowDetailItem, Z.rowDetail, Classes.horizontalStickyScrollContainer, Classes.horizontalScrollLeftSpacer, Classes.horizontalScrollRightSpacer, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingContentWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator, Classes.tableFilterTrigger, Classes.tableSortIcon, Classes.tableExtendIcon, Classes.verticalScrollPlaceholder, Classes.tableFooter, Classes.verticalScrollPlaceholder, Classes.tableHeaderCellResize, Classes.tableHeaderRow, Classes.last, Classes.tableHeaderCellResize);
144
+ export var StyledArtTableWrapper = styled.div(_templateObject4 || (_templateObject4 = _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 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-left: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-bottom: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-right: 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\n .", " td{\n border-top: 1px solid var(--primary-color) !important;\n }\n\n .", " td{\n border-bottom: 1px solid var(--primary-color) !important;\n \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: left;\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-right: var(--header-cell-border-vertical);\n border-bottom: var(--header-cell-border-horizontal);\n position: relative;\n }\n\n th.resizeable{\n border-right: var(--header-cell-border-vertical)\n }\n\n th.", " {\n border-right: 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-left: 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-right: var(--cell-border-vertical);\n border-bottom: var(--cell-border-horizontal);\n word-break: break-all;\n }\n td.", " {\n border-left: 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-right: ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-right: var(--cell-border-vertical);\n }\n }\n\n .", " {\n margin-left: ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-left: 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 left:0;\n }\n .", "{\n right: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 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 right: 0;\n width: 5px;\n &::after{\n left: 4px;\n }\n }\n //#endregion\n\n "])), variableConst, variableConst, outerBorderStyleMixin, Classes.artTableBordered, notBorderedStyleMixin, Classes.artTableBordered, borderedStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableFooter, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, Classes.tableCellRangeBottom, Classes.tableCellRangeRight, Classes.rangeSelection, Classes.rowDragging, Classes.tableBody, Classes.tableRow, Classes.tableFooter, Classes.tableRow, Classes.rowDragStart, Classes.rowDragEndToTop, Classes.rowDragEndToBottom, Classes.rowDragCell, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.leaf, Classes.first, Classes.first, Classes.first, Classes.first, Classes.first, Classes.last, Classes.lockLeft, Classes.lockRight, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.virtual, Classes.tableBody, Classes.tableFooter, Classes.tableHeaderMain, Classes.tableHeader, Classes.tableFooterMain, Classes.fixedLeft, Classes.fixedRight, Z.lock, Classes.fixedLeft, Classes.fixedRight, Classes.rowDetailContainer, Classes.rowDetailItem, Z.rowDetail, Classes.horizontalStickyScrollContainer, Classes.horizontalScrollLeftSpacer, Classes.horizontalScrollRightSpacer, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingContentWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator, Classes.tableFilterTrigger, Classes.tableSortIcon, Classes.tableExtendIcon, Classes.verticalScrollPlaceholder, Classes.tableFooter, Classes.verticalScrollPlaceholder, Classes.tableHeaderCellResize, Classes.tableHeaderRow, Classes.last, Classes.tableHeaderCellResize);
145
145
  export var ButtonCSS = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n ", "\n //#region \u6309\u94AE\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//#endregion\n"])), variableConst, Classes.button, Classes.buttonPrimary);
146
146
 
147
147
  function getCssVariableText(obj) {
package/es/table/base/table.js CHANGED
@@ -39,7 +39,7 @@ import { HtmlTable } from './html-table';
39
39
  import Loading from './loading';
40
40
  import { Classes, LOCK_SHADOW_PADDING, StyledArtTableWrapper } from './styles';
41
41
  import { addResizeObserver, getScrollbarSize, OVERSCAN_SIZE, shallowEqual, STYLED_REF_PROP, sum, syncScrollLeft, throttledWindowResize$, getTableScrollFooterDOM, getTableScrollHeaderDOM, cssPolifill } from './utils';
42
- import { console, browserType } from '../utils';
42
+ import { console, browserType, isStickyUIDegrade } from '../utils';
43
43
  import getTableRenderTemplate from './renderTemplates';
44
44
  var propsDotEmptyContentDeprecatedWarned = false;
45
45
 
@@ -521,7 +521,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
521
521
  'sticky-header': isStickyHeader !== null && isStickyHeader !== void 0 ? isStickyHeader : isStickyHead,
522
522
  'has-footer': footerDataSource.length > 0,
523
523
  'sticky-footer': isStickyFooter
524
- }, _defineProperty(_cx, Classes.artTableBordered, bordered), _defineProperty(_cx, 'ie-polyfill-wrapper', browserType.isIE), _cx), className);
524
+ }, _defineProperty(_cx, Classes.artTableBordered, bordered), _defineProperty(_cx, 'ie-polyfill-wrapper', browserType.isIE), _defineProperty(_cx, 'sticky-polyfill-wrapper', isStickyUIDegrade()), _cx), className);
525
525
 
526
526
  var artTableWrapperProps = _defineProperty({
527
527
  className: artTableWrapperClassName,
package/es/table/base/utils.js CHANGED
@@ -20,7 +20,7 @@ import ResizeObserver from 'resize-observer-polyfill';
20
20
  import * as styledComponents from 'styled-components';
21
21
  import cssVars from 'css-vars-ponyfill';
22
22
  import mergeCellProps from '../utils/mergeCellProps';
23
- import { browserType } from '../utils';
23
+ import { isStickyUIDegrade } from '../utils';
24
24
  import { defaultCSSVariables } from './styles';
25
25
  import { hasScroll } from '../utils/element';
26
26
  /** styled-components 类库的版本，ali-react-table 同时支持 v3 和 v5 */
@@ -215,10 +215,10 @@ export function composeRowPropsGetter(getRowProps, pendingRowProps) {
215
215
  return getRowProps;
216
216
  }
217
217
  export function getTableScrollHeaderDOM(domHelper) {
218
- return browserType.isIE ? domHelper.tableHeaderMain : domHelper.tableHeader;
218
+ return isStickyUIDegrade() ? domHelper.tableHeaderMain : domHelper.tableHeader;
219
219
  }
220
220
  export function getTableScrollFooterDOM(domHelper) {
221
- return browserType.isIE ? domHelper.tableFooterMain : domHelper.tableFooter;
221
+ return isStickyUIDegrade() ? domHelper.tableFooterMain : domHelper.tableFooter;
222
222
  }
223
223
  export var cssPolifill = function cssPolifill(_ref) {
224
224
  var variables = _ref.variables,
package/es/table/pipeline/features/columnDrag.d.ts CHANGED
@@ -2,5 +2,6 @@ import { TablePipeline } from '../pipeline';
2
2
  import { ArtColumn } from '../../interfaces';
3
3
  export interface ColumnDragOptions {
4
4
  onColumnDragStopped?: (columnMoved: boolean, columns: ArtColumn[]) => void;
5
+ onColumnDragStart?: (startColumn: ArtColumn) => void;
5
6
  }
6
7
  export declare function columnDrag(opts?: ColumnDragOptions): (pipeline: TablePipeline) => TablePipeline;
package/es/table/pipeline/features/columnDrag.js CHANGED
@@ -337,6 +337,8 @@ export function columnDrag() {
337
337
  currentTarget.style.cursor = '';
338
338
  }
339
339
 
340
+ var onColumnDragStart = opts.onColumnDragStart;
341
+ onColumnDragStart && onColumnDragStart(col);
340
342
  document.body.addEventListener('mousemove', handleMouseMove);
341
343
  document.body.addEventListener('mouseup', handleMouseUp);
342
344
  },
package/es/table/pipeline/features/rowDrag.js CHANGED
@@ -3,7 +3,7 @@ import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instan
3
3
  import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
4
4
  import React from 'react';
5
5
  import { fromEvent } from 'rxjs';
6
- import { map, takeUntil } from 'rxjs/operators';
6
+ import { map, takeUntil, filter } from 'rxjs/operators';
7
7
  import cx from 'classnames';
8
8
  import { Classes } from '../../base/styles';
9
9
  export var ROW_DRAG_COLUMN_CODE = '$_row_drag_column_&';
@@ -60,13 +60,13 @@ export function rowDrag(opt) {
60
60
  pipeline.setStateAtKey(rowDragKey, event);
61
61
  };
62
62
 
63
- var handleDragEnd = function handleDragEnd(event, isOutOfRange) {
63
+ var handleDragEnd = function handleDragEnd(event, isValid) {
64
64
  var _a;
65
65
 
66
66
  artTable.classList.remove(cx(Classes.rowDragging));
67
67
  pipeline.setStateAtKey(rowDragKey, event); // 超出拖拽范围不触发dragend事件
68
68
 
69
- if (!isOutOfRange) {
69
+ if (isValid) {
70
70
  (_a = opt === null || opt === void 0 ? void 0 : opt.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(opt, event);
71
71
  }
72
72
  };
@@ -111,6 +111,7 @@ export function rowDrag(opt) {
111
111
 
112
112
  var dragPosition = 'bottom';
113
113
  var isOutOfRange = false;
114
+ var isValidDrag = false;
114
115
  var dragStartEvent = getDragEvent(startRowInfo, endRowInfo, {
115
116
  isFinished: false,
116
117
  dragPosition: 'bottom'
@@ -119,6 +120,7 @@ export function rowDrag(opt) {
119
120
  var tableWidth = tableBody.clientWidth;
120
121
  var startRowRects = startRowInfo.cell.getBoundingClientRect(); // 光标位置距离初始拖拽行的偏移量
121
122
 
123
+ var mouseDownClientY = mouseDownEvent.clientY;
122
124
  var startOffset = mouseDownEvent.clientY - startRowRects.top;
123
125
  var dragElement = createDragElement(startRowRects, tableWidth, rowHeight); // 可拖拽的范围
124
126
 
@@ -145,7 +147,15 @@ export function rowDrag(opt) {
145
147
  };
146
148
 
147
149
  document.addEventListener('scroll', scrollCallback, true);
148
- var rowDrag$ = mousemove$.pipe(map(function (mouseMoveEvent) {
150
+ var rowDrag$ = mousemove$.pipe(filter(function (mouseMoveEvent) {
151
+ var mouseMoveClientY = mouseMoveEvent.clientY; // 上下移动偏移量大于5才是有效的拖拽
152
+
153
+ if (Math.abs(mouseMoveClientY - mouseDownClientY) > 5) {
154
+ isValidDrag = true;
155
+ }
156
+
157
+ return isValidDrag;
158
+ }), map(function (mouseMoveEvent) {
149
159
  var clientX = mouseMoveEvent.clientX,
150
160
  clientY = mouseMoveEvent.clientY;
151
161
  var tagretRow = getTargetRowInfo(mouseMoveEvent.target, tableBody, dataSource);
@@ -196,7 +206,8 @@ export function rowDrag(opt) {
196
206
  isFinished: true,
197
207
  dragPosition: dragPosition
198
208
  });
199
- handleDragEnd(dragEndEvent, isOutOfRange);
209
+ var isValid = isValidDrag && !isOutOfRange;
210
+ handleDragEnd(dragEndEvent, isValid);
200
211
  removeDragElement(dragElement);
201
212
  removeCurSorStyle();
202
213
  document.removeEventListener('scroll', scrollCallback, true);
package/es/table/utils/browserType.d.ts CHANGED
@@ -1,6 +1,14 @@
1
+ declare type IBrowserData = {
2
+ name?: string;
3
+ version?: string;
4
+ };
5
+ export declare const browserData: IBrowserData;
1
6
  export declare const browserType: {
2
7
  isEdge: boolean;
8
+ isNewEdge: boolean;
3
9
  isIE: boolean;
4
10
  isFireFox: boolean;
5
11
  isChrome: boolean;
12
+ isSafari: boolean;
6
13
  };
14
+ export {};
package/es/table/utils/browserType.js CHANGED
@@ -1,6 +1,62 @@
1
+ export var browserData = getBrowserData();
1
2
  export var browserType = {
2
- isEdge: !!window.navigator.userAgent.match(/Edge\/(\d+)/),
3
- isIE: !!window.navigator.userAgent.match(/Trident\/(\d+)/),
4
- isFireFox: !!window.navigator.userAgent.match(/Firefox\/(\d+)/),
5
- isChrome: !!window.navigator.userAgent.match(/Chrome\/(\d+)/)
6
- };
3
+ isEdge: browserData.name === 'Edge',
4
+ isNewEdge: browserData.name === 'NewEdge',
5
+ isIE: browserData.name === 'IE',
6
+ isFireFox: browserData.name === 'Firefox',
7
+ isChrome: browserData.name === 'Chrome',
8
+ isSafari: browserData.name === 'Safari'
9
+ };
10
+
11
+ function getBrowserData() {
12
+ var ua = navigator.userAgent;
13
+ var browser = {};
14
+ var match; // 旧Edge浏览器可能隐藏其版本号，因此我们需要特别处理
15
+
16
+ if (match = ua.match(/Edge\/(.*?)(?=\s|$)/)) {
17
+ browser.name = 'Edge';
18
+ browser.version = match[1];
19
+ } // 新Edge浏览器
20
+
21
+
22
+ if (!browser.name) {
23
+ if (match = ua.match(/Edg\/(.*?)(?=\s|$)/)) {
24
+ browser.name = 'NewEdge';
25
+ browser.version = match[1];
26
+ }
27
+ } // 如果未找到Edge版本，尝试Chrome
28
+
29
+
30
+ if (!browser.name) {
31
+ if (match = ua.match(/Chrome\/(.*?)(?=\s|$)/)) {
32
+ browser.name = 'Chrome';
33
+ browser.version = match[1];
34
+ }
35
+ } // 如果未找到Chrome版本，尝试Safari
36
+
37
+
38
+ if (!browser.name) {
39
+ if (match = ua.match(/Safari\/(.*?)(?=\s|$)/)) {
40
+ browser.name = 'Safari';
41
+ browser.version = match[1];
42
+ }
43
+ } // 如果未找到Safari版本，尝试Firefox
44
+
45
+
46
+ if (!browser.name) {
47
+ if (match = ua.match(/Firefox\/(.*?)(?=\s|$)/)) {
48
+ browser.name = 'Firefox';
49
+ browser.version = match[1];
50
+ }
51
+ } // 如果未找到Firefox版本，尝试IE
52
+
53
+
54
+ if (!browser.name) {
55
+ if (match = ua.match(/MSIE\s(.*?);/)) {
56
+ browser.name = 'IE';
57
+ browser.version = match[1];
58
+ }
59
+ }
60
+
61
+ return browser;
62
+ }
package/es/table/utils/index.d.ts CHANGED
@@ -18,3 +18,4 @@ export { getEventPath, isElementInEventPath, getTargetEleInEventPath, calculateP
18
18
  export { default as console } from './console';
19
19
  export { browserType } from './browserType';
20
20
  export { MULTI_SELECT_MARK_PROPNAME, SINGLE_SELECT_MARK_PROPNAME, isSelectColumn } from './selectColumn';
21
+ export { isStickyUIDegrade } from './uiDegrade';
package/es/table/utils/index.js CHANGED
@@ -17,4 +17,5 @@ export { default as layeredFilter } from './layeredFilter';
17
17
  export { getEventPath, isElementInEventPath, getTargetEleInEventPath, calculatePointerRelative, calculatePopupRelative, keepWithinBounds } from './element';
18
18
  export { default as console } from './console';
19
19
  export { browserType } from './browserType';
20
- export { MULTI_SELECT_MARK_PROPNAME, SINGLE_SELECT_MARK_PROPNAME, isSelectColumn } from './selectColumn';
20
+ export { MULTI_SELECT_MARK_PROPNAME, SINGLE_SELECT_MARK_PROPNAME, isSelectColumn } from './selectColumn';
21
+ export { isStickyUIDegrade } from './uiDegrade';
package/es/table/utils/uiDegrade.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare function isStickyUIDegrade(): boolean;
package/es/table/utils/uiDegrade.js ADDED
@@ -0,0 +1,31 @@
1
+ /*
2
+ * @Author: wqhui
3
+ * @Date: 2024-05-06 16:16:16
4
+ * @LastEditTime: 2024-05-06 16:41:24
5
+ * @Description:
6
+ */
7
+ import { browserData, browserType } from './browserType';
8
+ var isStickyUIDegradeFlag;
9
+ export function isStickyUIDegrade() {
10
+ if (typeof isStickyUIDegradeFlag === 'undefined') {
11
+ isStickyUIDegradeFlag = browserType.isIE || isFirefoxOfLowerPerf(browserData.name, browserData.version);
12
+ }
13
+
14
+ return isStickyUIDegradeFlag;
15
+ }
16
+
17
+ function isFirefoxOfLowerPerf(name, version) {
18
+ return name === 'Firefox' && getVersionNum(version) <= 52;
19
+ }
20
+
21
+ function getVersionNum(version) {
22
+ if (typeof version === 'number') {
23
+ return version;
24
+ }
25
+
26
+ if (typeof version === 'string') {
27
+ return Number(version.split('.')[0]);
28
+ }
29
+
30
+ return Number(undefined);
31
+ }
package/lib/table/base/renderTemplates.js CHANGED
@@ -372,7 +372,7 @@ function RowDetail(props) {
372
372
  }, renderDetail(row, rowIndex));
373
373
  }
374
374
 
375
- if (_utils2.browserType.isIE) {
375
+ if ((0, _utils2.isStickyUIDegrade)()) {
376
376
  TEMPLATES.set('header', renderTableHeaderInIE);
377
377
  TEMPLATES.set('body', renderTableBodyInIE);
378
378
  TEMPLATES.set('footer', renderTableFooterInIE);
package/lib/table/base/styles.js CHANGED
@@ -169,7 +169,7 @@ exports.variableConst = variableConst;
169
169
  var notBorderedStyleMixin = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n --cell-border-vertical: none;\n --header-cell-border-vertical: none;\n"])));
170
170
  var borderedStyleMixin = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.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);
171
171
 
172
- var StyledArtTableWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.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 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-left: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-bottom: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-right: 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\n .", " td{\n border-top: 1px solid var(--primary-color) !important;\n }\n\n .", " td{\n border-bottom: 1px solid var(--primary-color) !important;\n \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: left;\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-right: var(--header-cell-border-vertical);\n border-bottom: var(--header-cell-border-horizontal);\n position: relative;\n }\n\n th.resizeable{\n border-right: var(--header-cell-border-vertical)\n }\n\n th.", " {\n border-right: 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-left: 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-right: var(--cell-border-vertical);\n border-bottom: var(--cell-border-horizontal);\n word-break: break-all;\n }\n td.", " {\n border-left: 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-right: ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-right: var(--cell-border-vertical);\n }\n }\n\n .", " {\n margin-left: ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-left: 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 IE\u517C\u5BB9\n &.ie-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 left:0;\n }\n .", "{\n right: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\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 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 right: 0;\n width: 5px;\n &::after{\n left: 4px;\n }\n }\n //#endregion\n\n "])), variableConst, variableConst, outerBorderStyleMixin, Classes.artTableBordered, notBorderedStyleMixin, Classes.artTableBordered, borderedStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableFooter, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, Classes.tableCellRangeBottom, Classes.tableCellRangeRight, Classes.rangeSelection, Classes.rowDragging, Classes.tableBody, Classes.tableRow, Classes.tableFooter, Classes.tableRow, Classes.rowDragStart, Classes.rowDragEndToTop, Classes.rowDragEndToBottom, Classes.rowDragCell, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.leaf, Classes.first, Classes.first, Classes.first, Classes.first, Classes.first, Classes.last, Classes.lockLeft, Classes.lockRight, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.virtual, Classes.tableBody, Classes.tableFooter, Classes.tableHeaderMain, Classes.tableHeader, Classes.tableFooterMain, Classes.fixedLeft, Classes.fixedRight, Z.lock, Classes.fixedLeft, Classes.fixedRight, Classes.rowDetailContainer, Classes.rowDetailItem, Z.rowDetail, Classes.horizontalStickyScrollContainer, Classes.horizontalScrollLeftSpacer, Classes.horizontalScrollRightSpacer, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingContentWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator, Classes.tableFilterTrigger, Classes.tableSortIcon, Classes.tableExtendIcon, Classes.verticalScrollPlaceholder, Classes.tableFooter, Classes.verticalScrollPlaceholder, Classes.tableHeaderCellResize, Classes.tableHeaderRow, Classes.last, Classes.tableHeaderCellResize);
172
+ var StyledArtTableWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.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 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-left: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-bottom: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-right: 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\n .", " td{\n border-top: 1px solid var(--primary-color) !important;\n }\n\n .", " td{\n border-bottom: 1px solid var(--primary-color) !important;\n \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: left;\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-right: var(--header-cell-border-vertical);\n border-bottom: var(--header-cell-border-horizontal);\n position: relative;\n }\n\n th.resizeable{\n border-right: var(--header-cell-border-vertical)\n }\n\n th.", " {\n border-right: 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-left: 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-right: var(--cell-border-vertical);\n border-bottom: var(--cell-border-horizontal);\n word-break: break-all;\n }\n td.", " {\n border-left: 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-right: ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-right: var(--cell-border-vertical);\n }\n }\n\n .", " {\n margin-left: ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-left: 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 left:0;\n }\n .", "{\n right: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 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 right: 0;\n width: 5px;\n &::after{\n left: 4px;\n }\n }\n //#endregion\n\n "])), variableConst, variableConst, outerBorderStyleMixin, Classes.artTableBordered, notBorderedStyleMixin, Classes.artTableBordered, borderedStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableFooter, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, Classes.tableCellRangeBottom, Classes.tableCellRangeRight, Classes.rangeSelection, Classes.rowDragging, Classes.tableBody, Classes.tableRow, Classes.tableFooter, Classes.tableRow, Classes.rowDragStart, Classes.rowDragEndToTop, Classes.rowDragEndToBottom, Classes.rowDragCell, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.leaf, Classes.first, Classes.first, Classes.first, Classes.first, Classes.first, Classes.last, Classes.lockLeft, Classes.lockRight, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.virtual, Classes.tableBody, Classes.tableFooter, Classes.tableHeaderMain, Classes.tableHeader, Classes.tableFooterMain, Classes.fixedLeft, Classes.fixedRight, Z.lock, Classes.fixedLeft, Classes.fixedRight, Classes.rowDetailContainer, Classes.rowDetailItem, Z.rowDetail, Classes.horizontalStickyScrollContainer, Classes.horizontalScrollLeftSpacer, Classes.horizontalScrollRightSpacer, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingContentWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator, Classes.tableFilterTrigger, Classes.tableSortIcon, Classes.tableExtendIcon, Classes.verticalScrollPlaceholder, Classes.tableFooter, Classes.verticalScrollPlaceholder, Classes.tableHeaderCellResize, Classes.tableHeaderRow, Classes.last, Classes.tableHeaderCellResize);
173
173
 
174
174
  exports.StyledArtTableWrapper = StyledArtTableWrapper;
175
175
  var ButtonCSS = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n //#region \u6309\u94AE\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//#endregion\n"])), variableConst, Classes.button, Classes.buttonPrimary);
package/lib/table/base/table.js CHANGED
@@ -570,7 +570,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
570
570
  'sticky-header': isStickyHeader !== null && isStickyHeader !== void 0 ? isStickyHeader : isStickyHead,
571
571
  'has-footer': footerDataSource.length > 0,
572
572
  'sticky-footer': isStickyFooter
573
- }, (0, _defineProperty2.default)(_cx, _styles.Classes.artTableBordered, bordered), (0, _defineProperty2.default)(_cx, 'ie-polyfill-wrapper', _utils2.browserType.isIE), _cx), className);
573
+ }, (0, _defineProperty2.default)(_cx, _styles.Classes.artTableBordered, bordered), (0, _defineProperty2.default)(_cx, 'ie-polyfill-wrapper', _utils2.browserType.isIE), (0, _defineProperty2.default)(_cx, 'sticky-polyfill-wrapper', (0, _utils2.isStickyUIDegrade)()), _cx), className);
574
574
  var artTableWrapperProps = (0, _defineProperty2.default)({
575
575
  className: artTableWrapperClassName,
576
576
  style: style
package/lib/table/base/utils.js CHANGED
@@ -275,11 +275,11 @@ function composeRowPropsGetter(getRowProps, pendingRowProps) {
275
275
  }
276
276
 
277
277
  function getTableScrollHeaderDOM(domHelper) {
278
- return _utils.browserType.isIE ? domHelper.tableHeaderMain : domHelper.tableHeader;
278
+ return (0, _utils.isStickyUIDegrade)() ? domHelper.tableHeaderMain : domHelper.tableHeader;
279
279
  }
280
280
 
281
281
  function getTableScrollFooterDOM(domHelper) {
282
- return _utils.browserType.isIE ? domHelper.tableFooterMain : domHelper.tableFooter;
282
+ return (0, _utils.isStickyUIDegrade)() ? domHelper.tableFooterMain : domHelper.tableFooter;
283
283
  }
284
284
 
285
285
  var cssPolifill = function cssPolifill(_ref) {
package/lib/table/pipeline/features/columnDrag.d.ts CHANGED
@@ -2,5 +2,6 @@ import { TablePipeline } from '../pipeline';
2
2
  import { ArtColumn } from '../../interfaces';
3
3
  export interface ColumnDragOptions {
4
4
  onColumnDragStopped?: (columnMoved: boolean, columns: ArtColumn[]) => void;
5
+ onColumnDragStart?: (startColumn: ArtColumn) => void;
5
6
  }
6
7
  export declare function columnDrag(opts?: ColumnDragOptions): (pipeline: TablePipeline) => TablePipeline;
package/lib/table/pipeline/features/columnDrag.js CHANGED
@@ -350,6 +350,8 @@ function columnDrag() {
350
350
  currentTarget.style.cursor = '';
351
351
  }
352
352
 
353
+ var onColumnDragStart = opts.onColumnDragStart;
354
+ onColumnDragStart && onColumnDragStart(col);
353
355
  document.body.addEventListener('mousemove', handleMouseMove);
354
356
  document.body.addEventListener('mouseup', handleMouseUp);
355
357
  },
package/lib/table/pipeline/features/rowDrag.js CHANGED
@@ -1,5 +1,7 @@
1
1
  "use strict";
2
2
 
3
+ var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
4
+
3
5
  var _mapInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/map");
4
6
 
5
7
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
@@ -84,13 +86,13 @@ function rowDrag(opt) {
84
86
  pipeline.setStateAtKey(rowDragKey, event);
85
87
  };
86
88
 
87
- var handleDragEnd = function handleDragEnd(event, isOutOfRange) {
89
+ var handleDragEnd = function handleDragEnd(event, isValid) {
88
90
  var _a;
89
91
 
90
92
  artTable.classList.remove((0, _classnames.default)(_styles.Classes.rowDragging));
91
93
  pipeline.setStateAtKey(rowDragKey, event); // 超出拖拽范围不触发dragend事件
92
94
 
93
- if (!isOutOfRange) {
95
+ if (isValid) {
94
96
  (_a = opt === null || opt === void 0 ? void 0 : opt.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(opt, event);
95
97
  }
96
98
  };
@@ -135,6 +137,7 @@ function rowDrag(opt) {
135
137
 
136
138
  var dragPosition = 'bottom';
137
139
  var isOutOfRange = false;
140
+ var isValidDrag = false;
138
141
  var dragStartEvent = getDragEvent(startRowInfo, endRowInfo, {
139
142
  isFinished: false,
140
143
  dragPosition: 'bottom'
@@ -143,6 +146,7 @@ function rowDrag(opt) {
143
146
  var tableWidth = tableBody.clientWidth;
144
147
  var startRowRects = startRowInfo.cell.getBoundingClientRect(); // 光标位置距离初始拖拽行的偏移量
145
148
 
149
+ var mouseDownClientY = mouseDownEvent.clientY;
146
150
  var startOffset = mouseDownEvent.clientY - startRowRects.top;
147
151
  var dragElement = createDragElement(startRowRects, tableWidth, rowHeight); // 可拖拽的范围
148
152
 
@@ -169,7 +173,15 @@ function rowDrag(opt) {
169
173
  };
170
174
 
171
175
  document.addEventListener('scroll', scrollCallback, true);
172
- var rowDrag$ = mousemove$.pipe((0, _mapInstanceProperty(_operators))(function (mouseMoveEvent) {
176
+ var rowDrag$ = mousemove$.pipe((0, _filterInstanceProperty(_operators))(function (mouseMoveEvent) {
177
+ var mouseMoveClientY = mouseMoveEvent.clientY; // 上下移动偏移量大于5才是有效的拖拽
178
+
179
+ if (Math.abs(mouseMoveClientY - mouseDownClientY) > 5) {
180
+ isValidDrag = true;
181
+ }
182
+
183
+ return isValidDrag;
184
+ }), (0, _mapInstanceProperty(_operators))(function (mouseMoveEvent) {
173
185
  var clientX = mouseMoveEvent.clientX,
174
186
  clientY = mouseMoveEvent.clientY;
175
187
  var tagretRow = getTargetRowInfo(mouseMoveEvent.target, tableBody, dataSource);
@@ -220,7 +232,8 @@ function rowDrag(opt) {
220
232
  isFinished: true,
221
233
  dragPosition: dragPosition
222
234
  });
223
- handleDragEnd(dragEndEvent, isOutOfRange);
235
+ var isValid = isValidDrag && !isOutOfRange;
236
+ handleDragEnd(dragEndEvent, isValid);
224
237
  removeDragElement(dragElement);
225
238
  removeCurSorStyle();
226
239
  document.removeEventListener('scroll', scrollCallback, true);
package/lib/table/utils/browserType.d.ts CHANGED
@@ -1,6 +1,14 @@
1
+ declare type IBrowserData = {
2
+ name?: string;
3
+ version?: string;
4
+ };
5
+ export declare const browserData: IBrowserData;
1
6
  export declare const browserType: {
2
7
  isEdge: boolean;
8
+ isNewEdge: boolean;
3
9
  isIE: boolean;
4
10
  isFireFox: boolean;
5
11
  isChrome: boolean;
12
+ isSafari: boolean;
6
13
  };
14
+ export {};
package/lib/table/utils/browserType.js CHANGED
@@ -3,11 +3,68 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.browserType = void 0;
6
+ exports.browserType = exports.browserData = void 0;
7
+ var browserData = getBrowserData();
8
+ exports.browserData = browserData;
7
9
  var browserType = {
8
- isEdge: !!window.navigator.userAgent.match(/Edge\/(\d+)/),
9
- isIE: !!window.navigator.userAgent.match(/Trident\/(\d+)/),
10
- isFireFox: !!window.navigator.userAgent.match(/Firefox\/(\d+)/),
11
- isChrome: !!window.navigator.userAgent.match(/Chrome\/(\d+)/)
10
+ isEdge: browserData.name === 'Edge',
11
+ isNewEdge: browserData.name === 'NewEdge',
12
+ isIE: browserData.name === 'IE',
13
+ isFireFox: browserData.name === 'Firefox',
14
+ isChrome: browserData.name === 'Chrome',
15
+ isSafari: browserData.name === 'Safari'
12
16
  };
13
- exports.browserType = browserType;
17
+ exports.browserType = browserType;
18
+
19
+ function getBrowserData() {
20
+ var ua = navigator.userAgent;
21
+ var browser = {};
22
+ var match; // 旧Edge浏览器可能隐藏其版本号，因此我们需要特别处理
23
+
24
+ if (match = ua.match(/Edge\/(.*?)(?=\s|$)/)) {
25
+ browser.name = 'Edge';
26
+ browser.version = match[1];
27
+ } // 新Edge浏览器
28
+
29
+
30
+ if (!browser.name) {
31
+ if (match = ua.match(/Edg\/(.*?)(?=\s|$)/)) {
32
+ browser.name = 'NewEdge';
33
+ browser.version = match[1];
34
+ }
35
+ } // 如果未找到Edge版本，尝试Chrome
36
+
37
+
38
+ if (!browser.name) {
39
+ if (match = ua.match(/Chrome\/(.*?)(?=\s|$)/)) {
40
+ browser.name = 'Chrome';
41
+ browser.version = match[1];
42
+ }
43
+ } // 如果未找到Chrome版本，尝试Safari
44
+
45
+
46
+ if (!browser.name) {
47
+ if (match = ua.match(/Safari\/(.*?)(?=\s|$)/)) {
48
+ browser.name = 'Safari';
49
+ browser.version = match[1];
50
+ }
51
+ } // 如果未找到Safari版本，尝试Firefox
52
+
53
+
54
+ if (!browser.name) {
55
+ if (match = ua.match(/Firefox\/(.*?)(?=\s|$)/)) {
56
+ browser.name = 'Firefox';
57
+ browser.version = match[1];
58
+ }
59
+ } // 如果未找到Firefox版本，尝试IE
60
+
61
+
62
+ if (!browser.name) {
63
+ if (match = ua.match(/MSIE\s(.*?);/)) {
64
+ browser.name = 'IE';
65
+ browser.version = match[1];
66
+ }
67
+ }
68
+
69
+ return browser;
70
+ }
package/lib/table/utils/index.d.ts CHANGED
@@ -18,3 +18,4 @@ export { getEventPath, isElementInEventPath, getTargetEleInEventPath, calculateP
18
18
  export { default as console } from './console';
19
19
  export { browserType } from './browserType';
20
20
  export { MULTI_SELECT_MARK_PROPNAME, SINGLE_SELECT_MARK_PROPNAME, isSelectColumn } from './selectColumn';
21
+ export { isStickyUIDegrade } from './uiDegrade';