@kdcloudjs/table 1.2.0-canary.16 → 1.2.0-canary.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/@kdcloudjs/table.css +1 -1
- package/dist/@kdcloudjs/table.js +84 -38
- package/dist/@kdcloudjs/table.js.map +1 -1
- package/dist/@kdcloudjs/table.min.css +1 -1
- package/dist/@kdcloudjs/table.min.js +6 -6
- package/dist/@kdcloudjs/table.min.js.map +1 -1
- package/es/table/base/header.d.ts +2 -1
- package/es/table/base/header.js +4 -2
- package/es/table/base/helpers/TableDOMUtils.js +3 -1
- package/es/table/base/html-table.js +1 -1
- package/es/table/base/renderTemplates.js +24 -10
- package/es/table/base/styles.js +1 -1
- package/es/table/base/table.js +19 -13
- package/es/table/pipeline/features/rowDrag.js +31 -9
- package/lib/table/base/header.d.ts +2 -1
- package/lib/table/base/header.js +4 -2
- package/lib/table/base/helpers/TableDOMUtils.js +3 -1
- package/lib/table/base/html-table.js +1 -1
- package/lib/table/base/renderTemplates.js +24 -10
- package/lib/table/base/styles.js +1 -1
- package/lib/table/base/table.js +19 -13
- package/lib/table/pipeline/features/rowDrag.js +31 -9
- package/package.json +1 -1
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 }\n .", " {\n position: relative;\n }\n\n .", " {\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 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);
|
|
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
|
@@ -180,7 +180,6 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
180
180
|
bottomBlank = _info$verticalRenderR.bottomBlank,
|
|
181
181
|
topBlank = _info$verticalRenderR.topBlank,
|
|
182
182
|
bottomIndex = _info$verticalRenderR.bottomIndex;
|
|
183
|
-
var stickyRightOffset = _this.hasScrollY ? _this.getScrollBarWidth() : 0;
|
|
184
183
|
var renderBody = (0, _renderTemplates.default)('body');
|
|
185
184
|
|
|
186
185
|
if (typeof renderBody === 'function') {
|
|
@@ -188,8 +187,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
188
187
|
rowProps: {
|
|
189
188
|
onMouseEnter: _this.handleRowMouseEnter,
|
|
190
189
|
onMouseLeave: _this.handleRowMouseLeave
|
|
191
|
-
}
|
|
192
|
-
stickyRightOffset: stickyRightOffset
|
|
190
|
+
}
|
|
193
191
|
});
|
|
194
192
|
}
|
|
195
193
|
|
|
@@ -210,7 +208,6 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
210
208
|
getRowProps: getRowProps,
|
|
211
209
|
primaryKey: primaryKey,
|
|
212
210
|
data: (0, _slice.default)(dataSource).call(dataSource, topIndex, bottomIndex),
|
|
213
|
-
stickyRightOffset: stickyRightOffset,
|
|
214
211
|
horizontalRenderInfo: info,
|
|
215
212
|
verticalRenderInfo: {
|
|
216
213
|
first: 0,
|
|
@@ -303,10 +300,10 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
303
300
|
// }
|
|
304
301
|
this.hasScrollY = true;
|
|
305
302
|
} else {
|
|
306
|
-
stickyScroll.style.paddingRight =
|
|
303
|
+
// stickyScroll.style.paddingRight = `${stickyScrollHeight}px`
|
|
304
|
+
// this.setState({
|
|
307
305
|
// hasScrollY: false
|
|
308
306
|
// })
|
|
309
|
-
|
|
310
307
|
this.hasScrollY = false;
|
|
311
308
|
}
|
|
312
309
|
|
|
@@ -317,9 +314,10 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
317
314
|
var _this$lastInfo = this.lastInfo,
|
|
318
315
|
leftLockTotalWidth = _this$lastInfo.leftLockTotalWidth,
|
|
319
316
|
rightLockTotalWidth = _this$lastInfo.rightLockTotalWidth;
|
|
320
|
-
var lockTotalWidth = leftLockTotalWidth + rightLockTotalWidth;
|
|
317
|
+
var lockTotalWidth = leftLockTotalWidth + rightLockTotalWidth;
|
|
318
|
+
var stickyRightOffset = this.hasScrollY ? this.getScrollBarWidth() : 0; // 设置子节点宽度
|
|
321
319
|
|
|
322
|
-
stickyScrollItem.style.width = "".concat(innerTableWidth - lockTotalWidth, "px");
|
|
320
|
+
stickyScrollItem.style.width = "".concat(innerTableWidth - lockTotalWidth + stickyRightOffset, "px");
|
|
323
321
|
}
|
|
324
322
|
}, {
|
|
325
323
|
key: "renderTableHeader",
|
|
@@ -328,9 +326,12 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
328
326
|
stickyTop = _this$props3.stickyTop,
|
|
329
327
|
hasHeader = _this$props3.hasHeader;
|
|
330
328
|
var renderHeader = (0, _renderTemplates.default)('header');
|
|
329
|
+
var stickyRightOffset = this.hasScrollY ? this.getScrollBarWidth() : 0;
|
|
331
330
|
|
|
332
331
|
if (typeof renderHeader === 'function') {
|
|
333
|
-
return renderHeader(info, this.props
|
|
332
|
+
return renderHeader(info, this.props, {
|
|
333
|
+
stickyRightOffset: stickyRightOffset
|
|
334
|
+
});
|
|
334
335
|
}
|
|
335
336
|
|
|
336
337
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -340,7 +341,8 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
340
341
|
display: hasHeader ? undefined : 'none'
|
|
341
342
|
}
|
|
342
343
|
}, /*#__PURE__*/_react.default.createElement(_header.default, {
|
|
343
|
-
info: info
|
|
344
|
+
info: info,
|
|
345
|
+
stickyRightOffset: stickyRightOffset
|
|
344
346
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
345
347
|
className: _styles.Classes.verticalScrollPlaceholder,
|
|
346
348
|
style: this.hasScrollY ? {
|
|
@@ -420,6 +422,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
420
422
|
getRowProps = _this$props4.getRowProps,
|
|
421
423
|
primaryKey = _this$props4.primaryKey,
|
|
422
424
|
stickyBottom = _this$props4.stickyBottom;
|
|
425
|
+
var stickyRightOffset = this.hasScrollY ? this.getScrollBarWidth() : 0;
|
|
423
426
|
var renderFooter = (0, _renderTemplates.default)('footer');
|
|
424
427
|
|
|
425
428
|
if (typeof renderFooter === 'function') {
|
|
@@ -427,7 +430,8 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
427
430
|
rowProps: {
|
|
428
431
|
onMouseEnter: this.handleRowMouseEnter,
|
|
429
432
|
onMouseLeave: this.handleRowMouseLeave
|
|
430
|
-
}
|
|
433
|
+
},
|
|
434
|
+
stickyRightOffset: stickyRightOffset
|
|
431
435
|
});
|
|
432
436
|
}
|
|
433
437
|
|
|
@@ -441,6 +445,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
441
445
|
data: footerDataSource,
|
|
442
446
|
horizontalRenderInfo: info,
|
|
443
447
|
getRowProps: getRowProps,
|
|
448
|
+
stickyRightOffset: stickyRightOffset,
|
|
444
449
|
primaryKey: primaryKey,
|
|
445
450
|
verticalRenderInfo: {
|
|
446
451
|
offset: 0,
|
|
@@ -459,7 +464,8 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
459
464
|
}, {
|
|
460
465
|
key: "renderLockShadows",
|
|
461
466
|
value: function renderLockShadows(info) {
|
|
462
|
-
// console.log('render LockShadows')
|
|
467
|
+
var stickyRightOffset = this.hasScrollY ? this.getScrollBarWidth() : 0; // console.log('render LockShadows')
|
|
468
|
+
|
|
463
469
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
464
470
|
className: _styles.Classes.lockShadowMask,
|
|
465
471
|
style: {
|
|
@@ -472,7 +478,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
472
478
|
className: _styles.Classes.lockShadowMask,
|
|
473
479
|
style: {
|
|
474
480
|
right: 0,
|
|
475
|
-
width: info.rightLockTotalWidth + _styles.LOCK_SHADOW_PADDING
|
|
481
|
+
width: info.rightLockTotalWidth + _styles.LOCK_SHADOW_PADDING + stickyRightOffset
|
|
476
482
|
}
|
|
477
483
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
478
484
|
className: (0, _classnames.default)(_styles.Classes.lockShadow, _styles.Classes.rightLockShadow)
|
|
@@ -143,15 +143,32 @@ function rowDrag(opt) {
|
|
|
143
143
|
var tableWidth = tableBody.clientWidth;
|
|
144
144
|
var startRowRects = startRowInfo.cell.getBoundingClientRect(); // 光标位置距离初始拖拽行的偏移量
|
|
145
145
|
|
|
146
|
-
var startOffset = mouseDownEvent.clientY - startRowRects.
|
|
146
|
+
var startOffset = mouseDownEvent.clientY - startRowRects.top;
|
|
147
147
|
var dragElement = createDragElement(startRowRects, tableWidth, rowHeight); // 可拖拽的范围
|
|
148
148
|
|
|
149
149
|
var dragRange = getDragRange(tableBody, {
|
|
150
150
|
startOffset: startOffset,
|
|
151
|
-
rowHeight:
|
|
151
|
+
rowHeight: rowHeight
|
|
152
152
|
});
|
|
153
|
+
var mousePosition = {
|
|
154
|
+
x: mouseDownEvent.clientX,
|
|
155
|
+
y: mouseDownEvent.clientY
|
|
156
|
+
};
|
|
153
157
|
var mousemove$ = (0, _rxjs.fromEvent)(window, 'mousemove');
|
|
154
158
|
var mouseup$ = (0, _rxjs.fromEvent)(window, 'mouseup');
|
|
159
|
+
|
|
160
|
+
var scrollCallback = function scrollCallback(event) {
|
|
161
|
+
// 在当前表格内滚动不处理
|
|
162
|
+
if (event.target === tableBody) return;
|
|
163
|
+
dragRange = getDragRange(tableBody, {
|
|
164
|
+
startOffset: startOffset,
|
|
165
|
+
rowHeight: rowHeight
|
|
166
|
+
});
|
|
167
|
+
var isOutOfRange = isOutOfDragRange(mousePosition, dragRange);
|
|
168
|
+
updateCurSorStyle(isOutOfRange);
|
|
169
|
+
};
|
|
170
|
+
|
|
171
|
+
document.addEventListener('scroll', scrollCallback, true);
|
|
155
172
|
var rowDrag$ = mousemove$.pipe((0, _mapInstanceProperty(_operators))(function (mouseMoveEvent) {
|
|
156
173
|
var clientX = mouseMoveEvent.clientX,
|
|
157
174
|
clientY = mouseMoveEvent.clientY;
|
|
@@ -163,12 +180,16 @@ function rowDrag(opt) {
|
|
|
163
180
|
|
|
164
181
|
var targetRowRects = endRowInfo.cell.getBoundingClientRect(); // 判断拖拽插入的位置，拖拽框上边框位于目标行之上则向上插入，否则向下插入
|
|
165
182
|
|
|
166
|
-
var isMoveToTop = clientY - startOffset < targetRowRects.
|
|
183
|
+
var isMoveToTop = clientY - startOffset < targetRowRects.top;
|
|
167
184
|
dragPosition = isMoveToTop ? 'top' : 'bottom';
|
|
168
185
|
isOutOfRange = isOutOfDragRange({
|
|
169
186
|
x: clientX,
|
|
170
187
|
y: clientY
|
|
171
188
|
}, dragRange);
|
|
189
|
+
mousePosition = {
|
|
190
|
+
x: clientX,
|
|
191
|
+
y: clientY
|
|
192
|
+
};
|
|
172
193
|
updateScrollPosition(mouseMoveEvent); // 拖拽到底时让滚动条可以滚动
|
|
173
194
|
|
|
174
195
|
updateDragElementPosition(dragElement, dragRange, {
|
|
@@ -202,6 +223,7 @@ function rowDrag(opt) {
|
|
|
202
223
|
handleDragEnd(dragEndEvent, isOutOfRange);
|
|
203
224
|
removeDragElement(dragElement);
|
|
204
225
|
removeCurSorStyle();
|
|
226
|
+
document.removeEventListener('scroll', scrollCallback, true);
|
|
205
227
|
}
|
|
206
228
|
});
|
|
207
229
|
};
|
|
@@ -313,13 +335,13 @@ function getDragRange(tableBody, _ref4) {
|
|
|
313
335
|
var tableBodyClientRect = tableBody.getBoundingClientRect();
|
|
314
336
|
var height = tableBodyClientRect.height,
|
|
315
337
|
width = tableBodyClientRect.width,
|
|
316
|
-
|
|
317
|
-
|
|
338
|
+
top = tableBodyClientRect.top,
|
|
339
|
+
left = tableBodyClientRect.left;
|
|
318
340
|
return {
|
|
319
|
-
minX:
|
|
320
|
-
maxX:
|
|
321
|
-
minY:
|
|
322
|
-
maxY:
|
|
341
|
+
minX: left,
|
|
342
|
+
maxX: left + width,
|
|
343
|
+
minY: top - rowHeight + startOffset,
|
|
344
|
+
maxY: top + height + startOffset
|
|
323
345
|
};
|
|
324
346
|
}
|
|
325
347
|
|