@kdcloudjs/table 1.1.4-canary.1 → 1.1.4-canary.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/dist/@kdcloudjs/table.css +1 -1
  2. package/dist/@kdcloudjs/table.js +50 -27
  3. package/dist/@kdcloudjs/table.js.map +1 -1
  4. package/dist/@kdcloudjs/table.min.css +1 -1
  5. package/dist/@kdcloudjs/table.min.js +4 -4
  6. package/dist/@kdcloudjs/table.min.js.map +1 -1
  7. package/es/table/base/styles.d.ts +3 -0
  8. package/es/table/base/styles.js +5 -2
  9. package/es/table/pipeline/features/columnFilter.d.ts +2 -0
  10. package/es/table/pipeline/features/columnFilter.js +4 -2
  11. package/es/table/pipeline/features/filter/Filter.d.ts +2 -1
  12. package/es/table/pipeline/features/filter/Filter.js +29 -15
  13. package/es/table/pipeline/features/filter/FilterPanel.d.ts +2 -1
  14. package/es/table/pipeline/features/filter/FilterPanel.js +10 -7
  15. package/lib/table/base/styles.d.ts +3 -0
  16. package/lib/table/base/styles.js +5 -2
  17. package/lib/table/pipeline/features/columnFilter.d.ts +2 -0
  18. package/lib/table/pipeline/features/columnFilter.js +4 -2
  19. package/lib/table/pipeline/features/filter/Filter.d.ts +2 -1
  20. package/lib/table/pipeline/features/filter/Filter.js +30 -15
  21. package/lib/table/pipeline/features/filter/FilterPanel.d.ts +2 -1
  22. package/lib/table/pipeline/features/filter/FilterPanel.js +11 -7
  23. package/package.json +1 -1
package/es/table/base/styles.d.ts CHANGED
@@ -63,6 +63,9 @@ export declare const Classes: {
63
63
  readonly leaf: string;
64
64
  readonly expanded: string;
65
65
  readonly collapsed: string;
66
+ readonly popup: string;
67
+ readonly popupHeader: string;
68
+ readonly popupBody: string;
66
69
  };
67
70
  export declare const MenuClasses: {
68
71
  menu: string;
package/es/table/base/styles.js CHANGED
@@ -75,7 +75,10 @@ export var Classes = {
75
75
  rowSpan: "".concat(prefix, "row-span"),
76
76
  leaf: "".concat(prefix, "leaf"),
77
77
  expanded: "".concat(prefix, "expanded"),
78
- collapsed: "".concat(prefix, "collapsed")
78
+ collapsed: "".concat(prefix, "collapsed"),
79
+ popup: "".concat(prefix, "popup"),
80
+ popupHeader: "".concat(prefix, "popup-header"),
81
+ popupBody: "".concat(prefix, "popup-body")
79
82
  };
80
83
  export var MenuClasses = {
81
84
  menu: "".concat(prefix, "table-menu"),
@@ -127,7 +130,7 @@ export var defaultCSSVariables = {
127
130
  export var variableConst = getCssVariableText(defaultCSSVariables);
128
131
  var notBorderedStyleMixin = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n --cell-border-vertical: none;\n --header-cell-border-vertical: none;\n"])));
129
132
  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);
130
- 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 &.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 overflow-y: hidden;\n overflow-x: auto;\n z-index: ", ";\n flex-shrink: 0;\n flex-grow: 0;\n border-top: 1px solid var(--border-color);\n background: var(--bgcolor);\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 }\n .", " {\n display: flex\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 //#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 //#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.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.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingContentWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator, Classes.tableFilterTrigger, Classes.filterIcon, Classes.tableSortIcon, Classes.verticalScrollPlaceholder, Classes.tableFooter, Classes.verticalScrollPlaceholder, Classes.tableHeaderCellResize);
133
+ 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 &.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 overflow-y: hidden;\n overflow-x: auto;\n z-index: ", ";\n flex-shrink: 0;\n flex-grow: 0;\n border-top: 1px solid var(--border-color);\n background: var(--bgcolor);\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 }\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 //#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 //#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.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.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingContentWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator, Classes.tableFilterTrigger, Classes.tableSortIcon, Classes.verticalScrollPlaceholder, Classes.tableFooter, Classes.verticalScrollPlaceholder, Classes.tableHeaderCellResize);
131
134
  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);
132
135
 
133
136
  function getCssVariableText(obj) {
package/es/table/pipeline/features/columnFilter.d.ts CHANGED
@@ -16,5 +16,7 @@ export interface FilterFeatureOptions {
16
16
  filterIcon?: ReactNode | ((filtered: boolean) => ReactNode);
17
17
  /** 是否对触发弹出过滤面板 的 click 事件调用 event.stopPropagation() */
18
18
  stopClickEventPropagation?: boolean;
19
+ /** 是否隐藏过滤弹出菜单header区域 */
20
+ hideFilterPopupHeader?: boolean;
19
21
  }
20
22
  export declare function filter(opts?: FilterFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
package/es/table/pipeline/features/columnFilter.js CHANGED
@@ -28,7 +28,8 @@ export function filter() {
28
28
  keepDataSource = opts.keepDataSource,
29
29
  mode = opts.mode,
30
30
  filterIcon = opts.filterIcon,
31
- stopClickEventPropagation = opts.stopClickEventPropagation;
31
+ stopClickEventPropagation = opts.stopClickEventPropagation,
32
+ hideFilterPopupHeader = opts.hideFilterPopupHeader;
32
33
  var inputFilters = (_b = (_a = filters !== null && filters !== void 0 ? filters : pipeline.getStateAtKey(stateKey)) !== null && _a !== void 0 ? _a : defaultFilters) !== null && _b !== void 0 ? _b : [];
33
34
  inputFilters = mode === 'single' ? _sliceInstanceProperty(inputFilters).call(inputFilters, 0, 1) : inputFilters;
34
35
  var inputFiltersMap = new _Map(_mapInstanceProperty(inputFilters).call(inputFilters, function (filterItem) {
@@ -93,7 +94,8 @@ export function filter() {
93
94
  setFilter: setFilter,
94
95
  isFilterActive: filterActive,
95
96
  className: cx((_cx = {}, _defineProperty(_cx, Classes.tableFilterTrigger, true), _defineProperty(_cx, "active", filterActive), _cx)),
96
- stopClickEventPropagation: stopClickEventPropagation
97
+ stopClickEventPropagation: stopClickEventPropagation,
98
+ hideFilterPopupHeader: hideFilterPopupHeader
97
99
  })]); // result.headerCellProps = mergeCellProps(col.headerCellProps, {
98
100
  // style: {
99
101
  // paddingRight: '18px'
package/es/table/pipeline/features/filter/Filter.d.ts CHANGED
@@ -12,6 +12,7 @@ interface FilterProps {
12
12
  setFilter: CustomeFilterPanelProps['setFilter'];
13
13
  onClick?: (e: React.MouseEvent) => any;
14
14
  stopClickEventPropagation?: boolean;
15
+ hideFilterPopupHeader?: boolean;
15
16
  }
16
- declare function Filter({ size, style, className, FilterPanelContent, filterIcon, setFilter, setFilterModel, filterModel, isFilterActive, stopClickEventPropagation }: FilterProps): JSX.Element;
17
+ declare function Filter({ size, style, className, FilterPanelContent, filterIcon, setFilter, setFilterModel, filterModel, isFilterActive, stopClickEventPropagation, hideFilterPopupHeader }: FilterProps): JSX.Element;
17
18
  export default Filter;
package/es/table/pipeline/features/filter/Filter.js CHANGED
@@ -18,19 +18,17 @@ var HEADER_ICON_OFFSET_Y = 8 + 1; // padding-top + border
18
18
 
19
19
  var HEADER_ICON_OFFSET_X = 16 + 1; // padding-left+ border
20
20
 
21
- var FilterIconSpanStyle = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n // position: absolute;\n // right: 4px;\n // cursor: pointer;\n // transform: translateY(-50%);\n // top: 50%;\n // height: 12px; \n"])));
21
+ var FilterIconSpanStyle = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n // position: absolute;\n // right: 4px;\n // cursor: pointer;\n // transform: translateY(-50%);\n // top: 50%;\n // height: 12px; \n > .", " {\n display: flex\n }\n"])), Classes.filterIcon);
22
22
 
23
23
  function Panel(_ref) {
24
24
  var ele = _ref.ele,
25
25
  filterIcon = _ref.filterIcon,
26
26
  hidePanel = _ref.hidePanel,
27
- renderPanelContent = _ref.renderPanelContent;
27
+ renderPanelContent = _ref.renderPanelContent,
28
+ hideFilterPopupHeader = _ref.hideFilterPopupHeader;
28
29
  var filterPanelRef = React.useRef(null);
29
30
 
30
- var _React$useState = React.useState(calculatePopupRelative(ele, document.body, {
31
- x: HEADER_ICON_OFFSET_X,
32
- y: HEADER_ICON_OFFSET_Y
33
- })),
31
+ var _React$useState = React.useState(calculatePopupRelative(ele, document.body, _getPanelOffset(ele, hideFilterPopupHeader))),
34
32
  _React$useState2 = _slicedToArray(_React$useState, 2),
35
33
  position = _React$useState2[0],
36
34
  setPosition = _React$useState2[1];
@@ -41,10 +39,7 @@ function Panel(_ref) {
41
39
  };
42
40
 
43
41
  var handleFilterPanelResize = function handleFilterPanelResize(resize) {
44
- setPosition(calculatePopupRelative(ele, document.body, {
45
- x: HEADER_ICON_OFFSET_X,
46
- y: HEADER_ICON_OFFSET_Y
47
- }));
42
+ setPosition(calculatePopupRelative(ele, document.body, _getPanelOffset(ele, hideFilterPopupHeader)));
48
43
  };
49
44
 
50
45
  useEffect(function () {
@@ -59,7 +54,8 @@ function Panel(_ref) {
59
54
  style: style,
60
55
  onClose: hidePanel,
61
56
  position: position,
62
- filterIcon: filterIcon
57
+ filterIcon: filterIcon,
58
+ hideFilterPopupHeader: hideFilterPopupHeader
63
59
  }, renderPanelContent()));
64
60
  }
65
61
 
@@ -76,7 +72,8 @@ function Filter(_ref2) {
76
72
  setFilterModel = _ref2.setFilterModel,
77
73
  filterModel = _ref2.filterModel,
78
74
  isFilterActive = _ref2.isFilterActive,
79
- stopClickEventPropagation = _ref2.stopClickEventPropagation;
75
+ stopClickEventPropagation = _ref2.stopClickEventPropagation,
76
+ hideFilterPopupHeader = _ref2.hideFilterPopupHeader;
80
77
 
81
78
  var _React$useState3 = React.useState(false),
82
79
  _React$useState4 = _slicedToArray(_React$useState3, 2),
@@ -84,6 +81,7 @@ function Filter(_ref2) {
84
81
  setShowPanel = _React$useState4[1];
85
82
 
86
83
  var iconRef = React.useRef(null);
84
+ var iconWrapRef = React.useRef();
87
85
 
88
86
  var hidePanel = function hidePanel() {
89
87
  return setShowPanel(false);
@@ -126,7 +124,8 @@ function Filter(_ref2) {
126
124
  return /*#__PURE__*/React.createElement(FilterIconSpanStyle, {
127
125
  style: style,
128
126
  className: iconClassName,
129
- onClick: handleIconClick
127
+ onClick: handleIconClick,
128
+ ref: iconWrapRef
130
129
  }, /*#__PURE__*/React.createElement("span", {
131
130
  ref: iconRef,
132
131
  className: Classes.filterIcon
@@ -134,11 +133,26 @@ function Filter(_ref2) {
134
133
  width: size,
135
134
  height: size
136
135
  })), showPanel && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Panel, {
137
- ele: iconRef.current,
136
+ ele: hideFilterPopupHeader ? iconWrapRef.current : iconRef.current,
138
137
  filterIcon: displayFilterIcon,
139
138
  hidePanel: hidePanel,
140
- renderPanelContent: renderPanelContent
139
+ renderPanelContent: renderPanelContent,
140
+ hideFilterPopupHeader: hideFilterPopupHeader
141
141
  }), document.body));
142
142
  }
143
143
 
144
+ function _getPanelOffset(ele, hideFilterPopupHeader) {
145
+ if (hideFilterPopupHeader) {
146
+ return {
147
+ x: 0,
148
+ y: 0 - ele.offsetHeight
149
+ };
150
+ }
151
+
152
+ return {
153
+ x: HEADER_ICON_OFFSET_X,
154
+ y: HEADER_ICON_OFFSET_Y
155
+ };
156
+ }
157
+
144
158
  export default Filter;
package/es/table/pipeline/features/filter/FilterPanel.d.ts CHANGED
@@ -10,11 +10,12 @@ export interface FilterPanel {
10
10
  filterIcon: ReactNode;
11
11
  children?: ReactNode;
12
12
  }
13
- declare function FilterPanel({ style, children, position, filterIcon, onClose }: {
13
+ declare function FilterPanel({ style, children, position, filterIcon, onClose, hideFilterPopupHeader }: {
14
14
  style: any;
15
15
  children: any;
16
16
  position: any;
17
17
  filterIcon: any;
18
18
  onClose: any;
19
+ hideFilterPopupHeader: any;
19
20
  }): JSX.Element;
20
21
  export default FilterPanel;
package/es/table/pipeline/features/filter/FilterPanel.js CHANGED
@@ -8,7 +8,8 @@ import React, { useEffect, useState, useRef } from 'react';
8
8
  import styled from 'styled-components';
9
9
  import { isElementInEventPath, keepWithinBounds } from '../../../utils/';
10
10
  import DefaultFilterIcon from './DefaultFilterIcon';
11
- var FilterPanelStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n max-height: 450px;\n min-width: 160px;\n border-radius: 2px;\n background-color: #fff;\n box-shadow: 0 0 5px 0 rgba(154,154,154,.5);\n cursor: default;\n\n .popup-header {\n display: flex;\n background-color: #ebedf1;\n\n .popup-header-icon {\n display: flex;\n color:#666;\n background-color: #fff;\n padding: 8px 16px 8px 16px;\n border-right: 1px solid transparent;\n border-left: 1px solid transparent;\n border-top: 1px solid transparent;\n border-top-right-radius: 2px;\n border-top-left-radius: 2px;\n }\n }\n\n .popup-body {\n display: flex;\n }\n"])));
11
+ import { Classes } from '../../../base/styles';
12
+ var FilterPanelStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n max-height: 450px;\n min-width: 160px;\n border-radius: 2px;\n background-color: #fff;\n box-shadow: 0 0 5px 0 rgba(154,154,154,.5);\n cursor: default;\n\n .", " {\n display: flex;\n background-color: #ebedf1;\n\n .", " {\n display: flex;\n color:#666;\n background-color: #fff;\n padding: 8px 16px 8px 16px;\n border-right: 1px solid transparent;\n border-left: 1px solid transparent;\n border-top: 1px solid transparent;\n border-top-right-radius: 2px;\n border-top-left-radius: 2px;\n }\n }\n\n .", " {\n display: flex;\n }\n"])), Classes.popupHeader, Classes.filterIcon, Classes.popupBody);
12
13
 
13
14
  var useWindowEvents = function useWindowEvents(func, evens) {
14
15
  React.useEffect(function () {
@@ -28,7 +29,8 @@ function FilterPanel(_ref) {
28
29
  children = _ref.children,
29
30
  position = _ref.position,
30
31
  filterIcon = _ref.filterIcon,
31
- onClose = _ref.onClose;
32
+ onClose = _ref.onClose,
33
+ hideFilterPopupHeader = _ref.hideFilterPopupHeader;
32
34
 
33
35
  var _useState = useState(position),
34
36
  _useState2 = _slicedToArray(_useState, 2),
@@ -64,6 +66,7 @@ function FilterPanel(_ref) {
64
66
  hasPopupMouseEvent.current = false;
65
67
  }, ['click']);
66
68
  return /*#__PURE__*/React.createElement(FilterPanelStyle, {
69
+ className: Classes.popup,
67
70
  style: _extends(_extends({}, style), {
68
71
  left: visible ? perfectPosition.x : 0,
69
72
  top: visible ? perfectPosition.y : 0,
@@ -72,15 +75,15 @@ function FilterPanel(_ref) {
72
75
  onMouseDown: handleMouseEvent,
73
76
  onMouseUp: handleMouseEvent,
74
77
  ref: ref
75
- }, /*#__PURE__*/React.createElement("div", {
76
- className: 'popup-header'
78
+ }, !hideFilterPopupHeader ? /*#__PURE__*/React.createElement("div", {
79
+ className: Classes.popupHeader
77
80
  }, /*#__PURE__*/React.createElement("span", {
78
- className: 'popup-header-icon'
81
+ className: Classes.filterIcon
79
82
  }, filterIcon || /*#__PURE__*/React.createElement(DefaultFilterIcon, {
80
83
  width: 12,
81
84
  height: 12
82
- }))), /*#__PURE__*/React.createElement("div", {
83
- className: "popup-body"
85
+ }))) : null, /*#__PURE__*/React.createElement("div", {
86
+ className: Classes.popupBody
84
87
  }, children));
85
88
  }
86
89
 
package/lib/table/base/styles.d.ts CHANGED
@@ -63,6 +63,9 @@ export declare const Classes: {
63
63
  readonly leaf: string;
64
64
  readonly expanded: string;
65
65
  readonly collapsed: string;
66
+ readonly popup: string;
67
+ readonly popupHeader: string;
68
+ readonly popupBody: string;
66
69
  };
67
70
  export declare const MenuClasses: {
68
71
  menu: string;
package/lib/table/base/styles.js CHANGED
@@ -98,7 +98,10 @@ var Classes = {
98
98
  rowSpan: "".concat(prefix, "row-span"),
99
99
  leaf: "".concat(prefix, "leaf"),
100
100
  expanded: "".concat(prefix, "expanded"),
101
- collapsed: "".concat(prefix, "collapsed")
101
+ collapsed: "".concat(prefix, "collapsed"),
102
+ popup: "".concat(prefix, "popup"),
103
+ popupHeader: "".concat(prefix, "popup-header"),
104
+ popupBody: "".concat(prefix, "popup-body")
102
105
  };
103
106
  exports.Classes = Classes;
104
107
  var MenuClasses = {
@@ -155,7 +158,7 @@ exports.variableConst = variableConst;
155
158
  var notBorderedStyleMixin = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n --cell-border-vertical: none;\n --header-cell-border-vertical: none;\n"])));
156
159
  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);
157
160
 
158
- 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 &.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 overflow-y: hidden;\n overflow-x: auto;\n z-index: ", ";\n flex-shrink: 0;\n flex-grow: 0;\n border-top: 1px solid var(--border-color);\n background: var(--bgcolor);\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 }\n .", " {\n display: flex\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 //#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 //#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.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.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingContentWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator, Classes.tableFilterTrigger, Classes.filterIcon, Classes.tableSortIcon, Classes.verticalScrollPlaceholder, Classes.tableFooter, Classes.verticalScrollPlaceholder, Classes.tableHeaderCellResize);
161
+ 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 &.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 overflow-y: hidden;\n overflow-x: auto;\n z-index: ", ";\n flex-shrink: 0;\n flex-grow: 0;\n border-top: 1px solid var(--border-color);\n background: var(--bgcolor);\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 }\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 //#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 //#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.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.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingContentWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator, Classes.tableFilterTrigger, Classes.tableSortIcon, Classes.verticalScrollPlaceholder, Classes.tableFooter, Classes.verticalScrollPlaceholder, Classes.tableHeaderCellResize);
159
162
 
160
163
  exports.StyledArtTableWrapper = StyledArtTableWrapper;
161
164
  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/pipeline/features/columnFilter.d.ts CHANGED
@@ -16,5 +16,7 @@ export interface FilterFeatureOptions {
16
16
  filterIcon?: ReactNode | ((filtered: boolean) => ReactNode);
17
17
  /** 是否对触发弹出过滤面板 的 click 事件调用 event.stopPropagation() */
18
18
  stopClickEventPropagation?: boolean;
19
+ /** 是否隐藏过滤弹出菜单header区域 */
20
+ hideFilterPopupHeader?: boolean;
19
21
  }
20
22
  export declare function filter(opts?: FilterFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
package/lib/table/pipeline/features/columnFilter.js CHANGED
@@ -54,7 +54,8 @@ function filter() {
54
54
  keepDataSource = opts.keepDataSource,
55
55
  mode = opts.mode,
56
56
  filterIcon = opts.filterIcon,
57
- stopClickEventPropagation = opts.stopClickEventPropagation;
57
+ stopClickEventPropagation = opts.stopClickEventPropagation,
58
+ hideFilterPopupHeader = opts.hideFilterPopupHeader;
58
59
  var inputFilters = (_b = (_a = filters !== null && filters !== void 0 ? filters : pipeline.getStateAtKey(stateKey)) !== null && _a !== void 0 ? _a : defaultFilters) !== null && _b !== void 0 ? _b : [];
59
60
  inputFilters = mode === 'single' ? (0, _slice.default)(inputFilters).call(inputFilters, 0, 1) : inputFilters;
60
61
  var inputFiltersMap = new _map.default((0, _map2.default)(inputFilters).call(inputFilters, function (filterItem) {
@@ -116,7 +117,8 @@ function filter() {
116
117
  setFilter: setFilter,
117
118
  isFilterActive: filterActive,
118
119
  className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, _styles.Classes.tableFilterTrigger, true), (0, _defineProperty2.default)(_cx, "active", filterActive), _cx)),
119
- stopClickEventPropagation: stopClickEventPropagation
120
+ stopClickEventPropagation: stopClickEventPropagation,
121
+ hideFilterPopupHeader: hideFilterPopupHeader
120
122
  })]); // result.headerCellProps = mergeCellProps(col.headerCellProps, {
121
123
  // style: {
122
124
  // paddingRight: '18px'
package/lib/table/pipeline/features/filter/Filter.d.ts CHANGED
@@ -12,6 +12,7 @@ interface FilterProps {
12
12
  setFilter: CustomeFilterPanelProps['setFilter'];
13
13
  onClick?: (e: React.MouseEvent) => any;
14
14
  stopClickEventPropagation?: boolean;
15
+ hideFilterPopupHeader?: boolean;
15
16
  }
16
- declare function Filter({ size, style, className, FilterPanelContent, filterIcon, setFilter, setFilterModel, filterModel, isFilterActive, stopClickEventPropagation }: FilterProps): JSX.Element;
17
+ declare function Filter({ size, style, className, FilterPanelContent, filterIcon, setFilter, setFilterModel, filterModel, isFilterActive, stopClickEventPropagation, hideFilterPopupHeader }: FilterProps): JSX.Element;
17
18
  export default Filter;
package/lib/table/pipeline/features/filter/Filter.js CHANGED
@@ -49,20 +49,18 @@ var HEADER_ICON_OFFSET_Y = 8 + 1; // padding-top + border
49
49
 
50
50
  var HEADER_ICON_OFFSET_X = 16 + 1; // padding-left+ border
51
51
 
52
- var FilterIconSpanStyle = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n // position: absolute;\n // right: 4px;\n // cursor: pointer;\n // transform: translateY(-50%);\n // top: 50%;\n // height: 12px; \n"])));
52
+ var FilterIconSpanStyle = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n // position: absolute;\n // right: 4px;\n // cursor: pointer;\n // transform: translateY(-50%);\n // top: 50%;\n // height: 12px; \n > .", " {\n display: flex\n }\n"])), _styles.Classes.filterIcon);
53
53
 
54
54
  function Panel(_ref) {
55
55
  var ele = _ref.ele,
56
56
  filterIcon = _ref.filterIcon,
57
57
  hidePanel = _ref.hidePanel,
58
- renderPanelContent = _ref.renderPanelContent;
58
+ renderPanelContent = _ref.renderPanelContent,
59
+ hideFilterPopupHeader = _ref.hideFilterPopupHeader;
59
60
 
60
61
  var filterPanelRef = _react.default.useRef(null);
61
62
 
62
- var _React$useState = _react.default.useState((0, _utils.calculatePopupRelative)(ele, document.body, {
63
- x: HEADER_ICON_OFFSET_X,
64
- y: HEADER_ICON_OFFSET_Y
65
- })),
63
+ var _React$useState = _react.default.useState((0, _utils.calculatePopupRelative)(ele, document.body, _getPanelOffset(ele, hideFilterPopupHeader))),
66
64
  _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
67
65
  position = _React$useState2[0],
68
66
  setPosition = _React$useState2[1];
@@ -73,10 +71,7 @@ function Panel(_ref) {
73
71
  };
74
72
 
75
73
  var handleFilterPanelResize = function handleFilterPanelResize(resize) {
76
- setPosition((0, _utils.calculatePopupRelative)(ele, document.body, {
77
- x: HEADER_ICON_OFFSET_X,
78
- y: HEADER_ICON_OFFSET_Y
79
- }));
74
+ setPosition((0, _utils.calculatePopupRelative)(ele, document.body, _getPanelOffset(ele, hideFilterPopupHeader)));
80
75
  };
81
76
 
82
77
  (0, _react.useEffect)(function () {
@@ -91,7 +86,8 @@ function Panel(_ref) {
91
86
  style: style,
92
87
  onClose: hidePanel,
93
88
  position: position,
94
- filterIcon: filterIcon
89
+ filterIcon: filterIcon,
90
+ hideFilterPopupHeader: hideFilterPopupHeader
95
91
  }, renderPanelContent()));
96
92
  }
97
93
 
@@ -108,7 +104,8 @@ function Filter(_ref2) {
108
104
  setFilterModel = _ref2.setFilterModel,
109
105
  filterModel = _ref2.filterModel,
110
106
  isFilterActive = _ref2.isFilterActive,
111
- stopClickEventPropagation = _ref2.stopClickEventPropagation;
107
+ stopClickEventPropagation = _ref2.stopClickEventPropagation,
108
+ hideFilterPopupHeader = _ref2.hideFilterPopupHeader;
112
109
 
113
110
  var _React$useState3 = _react.default.useState(false),
114
111
  _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
@@ -117,6 +114,8 @@ function Filter(_ref2) {
117
114
 
118
115
  var iconRef = _react.default.useRef(null);
119
116
 
117
+ var iconWrapRef = _react.default.useRef();
118
+
120
119
  var hidePanel = function hidePanel() {
121
120
  return setShowPanel(false);
122
121
  };
@@ -158,7 +157,8 @@ function Filter(_ref2) {
158
157
  return /*#__PURE__*/_react.default.createElement(FilterIconSpanStyle, {
159
158
  style: style,
160
159
  className: iconClassName,
161
- onClick: handleIconClick
160
+ onClick: handleIconClick,
161
+ ref: iconWrapRef
162
162
  }, /*#__PURE__*/_react.default.createElement("span", {
163
163
  ref: iconRef,
164
164
  className: _styles.Classes.filterIcon
@@ -166,12 +166,27 @@ function Filter(_ref2) {
166
166
  width: size,
167
167
  height: size
168
168
  })), showPanel && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(Panel, {
169
- ele: iconRef.current,
169
+ ele: hideFilterPopupHeader ? iconWrapRef.current : iconRef.current,
170
170
  filterIcon: displayFilterIcon,
171
171
  hidePanel: hidePanel,
172
- renderPanelContent: renderPanelContent
172
+ renderPanelContent: renderPanelContent,
173
+ hideFilterPopupHeader: hideFilterPopupHeader
173
174
  }), document.body));
174
175
  }
175
176
 
177
+ function _getPanelOffset(ele, hideFilterPopupHeader) {
178
+ if (hideFilterPopupHeader) {
179
+ return {
180
+ x: 0,
181
+ y: 0 - ele.offsetHeight
182
+ };
183
+ }
184
+
185
+ return {
186
+ x: HEADER_ICON_OFFSET_X,
187
+ y: HEADER_ICON_OFFSET_Y
188
+ };
189
+ }
190
+
176
191
  var _default = Filter;
177
192
  exports.default = _default;
package/lib/table/pipeline/features/filter/FilterPanel.d.ts CHANGED
@@ -10,11 +10,12 @@ export interface FilterPanel {
10
10
  filterIcon: ReactNode;
11
11
  children?: ReactNode;
12
12
  }
13
- declare function FilterPanel({ style, children, position, filterIcon, onClose }: {
13
+ declare function FilterPanel({ style, children, position, filterIcon, onClose, hideFilterPopupHeader }: {
14
14
  style: any;
15
15
  children: any;
16
16
  position: any;
17
17
  filterIcon: any;
18
18
  onClose: any;
19
+ hideFilterPopupHeader: any;
19
20
  }): JSX.Element;
20
21
  export default FilterPanel;
package/lib/table/pipeline/features/filter/FilterPanel.js CHANGED
@@ -27,13 +27,15 @@ var _utils = require("../../../utils/");
27
27
 
28
28
  var _DefaultFilterIcon = _interopRequireDefault(require("./DefaultFilterIcon"));
29
29
 
30
+ var _styles = require("../../../base/styles");
31
+
30
32
  var _templateObject;
31
33
 
32
34
  function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
33
35
 
34
36
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
35
37
 
36
- var FilterPanelStyle = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n max-height: 450px;\n min-width: 160px;\n border-radius: 2px;\n background-color: #fff;\n box-shadow: 0 0 5px 0 rgba(154,154,154,.5);\n cursor: default;\n\n .popup-header {\n display: flex;\n background-color: #ebedf1;\n\n .popup-header-icon {\n display: flex;\n color:#666;\n background-color: #fff;\n padding: 8px 16px 8px 16px;\n border-right: 1px solid transparent;\n border-left: 1px solid transparent;\n border-top: 1px solid transparent;\n border-top-right-radius: 2px;\n border-top-left-radius: 2px;\n }\n }\n\n .popup-body {\n display: flex;\n }\n"])));
38
+ var FilterPanelStyle = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n max-height: 450px;\n min-width: 160px;\n border-radius: 2px;\n background-color: #fff;\n box-shadow: 0 0 5px 0 rgba(154,154,154,.5);\n cursor: default;\n\n .", " {\n display: flex;\n background-color: #ebedf1;\n\n .", " {\n display: flex;\n color:#666;\n background-color: #fff;\n padding: 8px 16px 8px 16px;\n border-right: 1px solid transparent;\n border-left: 1px solid transparent;\n border-top: 1px solid transparent;\n border-top-right-radius: 2px;\n border-top-left-radius: 2px;\n }\n }\n\n .", " {\n display: flex;\n }\n"])), _styles.Classes.popupHeader, _styles.Classes.filterIcon, _styles.Classes.popupBody);
37
39
 
38
40
  var useWindowEvents = function useWindowEvents(func, evens) {
39
41
  _react.default.useEffect(function () {
@@ -53,7 +55,8 @@ function FilterPanel(_ref) {
53
55
  children = _ref.children,
54
56
  position = _ref.position,
55
57
  filterIcon = _ref.filterIcon,
56
- onClose = _ref.onClose;
58
+ onClose = _ref.onClose,
59
+ hideFilterPopupHeader = _ref.hideFilterPopupHeader;
57
60
 
58
61
  var _useState = (0, _react.useState)(position),
59
62
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -89,6 +92,7 @@ function FilterPanel(_ref) {
89
92
  hasPopupMouseEvent.current = false;
90
93
  }, ['click']);
91
94
  return /*#__PURE__*/_react.default.createElement(FilterPanelStyle, {
95
+ className: _styles.Classes.popup,
92
96
  style: (0, _extends2.default)((0, _extends2.default)({}, style), {
93
97
  left: visible ? perfectPosition.x : 0,
94
98
  top: visible ? perfectPosition.y : 0,
@@ -97,15 +101,15 @@ function FilterPanel(_ref) {
97
101
  onMouseDown: handleMouseEvent,
98
102
  onMouseUp: handleMouseEvent,
99
103
  ref: ref
100
- }, /*#__PURE__*/_react.default.createElement("div", {
101
- className: 'popup-header'
104
+ }, !hideFilterPopupHeader ? /*#__PURE__*/_react.default.createElement("div", {
105
+ className: _styles.Classes.popupHeader
102
106
  }, /*#__PURE__*/_react.default.createElement("span", {
103
- className: 'popup-header-icon'
107
+ className: _styles.Classes.filterIcon
104
108
  }, filterIcon || /*#__PURE__*/_react.default.createElement(_DefaultFilterIcon.default, {
105
109
  width: 12,
106
110
  height: 12
107
- }))), /*#__PURE__*/_react.default.createElement("div", {
108
- className: "popup-body"
111
+ }))) : null, /*#__PURE__*/_react.default.createElement("div", {
112
+ className: _styles.Classes.popupBody
109
113
  }, children));
110
114
  }
111
115
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kdcloudjs/table",
3
- "version": "1.1.4-canary.1",
3
+ "version": "1.1.4-canary.2",
4
4
  "description": "金蝶 react table 组件",
5
5
  "title": "table",
6
6
  "keywords": [