es-grid-template 1.9.16 → 1.9.17
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/es/ali-table/Grid.js +18 -9
- package/es/ali-table/InternalTable.js +0 -2
- package/es/ali-table/assets/WebsiteBaseTable.js +3 -2
- package/es/ali-table/base-table/styles.d.ts +17 -9
- package/es/ali-table/base-table/styles.js +12 -2
- package/es/ali-table/base-table/table.d.ts +2 -1
- package/es/ali-table/base-table/table.js +3 -1
- package/es/ali-table/utils/selected.js +0 -1
- package/es/grid-component/type.d.ts +7 -5
- package/es/group-component/hook/utils.d.ts +3 -3
- package/lib/ali-table/Grid.js +18 -9
- package/lib/ali-table/InternalTable.js +0 -2
- package/lib/ali-table/assets/WebsiteBaseTable.js +3 -2
- package/lib/ali-table/base-table/styles.d.ts +17 -9
- package/lib/ali-table/base-table/styles.js +13 -3
- package/lib/ali-table/base-table/table.d.ts +2 -1
- package/lib/ali-table/base-table/table.js +3 -1
- package/lib/ali-table/utils/selected.js +0 -1
- package/lib/grid-component/type.d.ts +7 -5
- package/package.json +1 -1
package/es/ali-table/Grid.js
CHANGED
|
@@ -14,6 +14,7 @@ import { pageSizeOptions } from "../grid-component/hooks";
|
|
|
14
14
|
import ContextMenu from "../table-component/ContextMenu";
|
|
15
15
|
import { TableContext } from "./useContext";
|
|
16
16
|
import { ColumnsChoose } from "./pipeline/features/ColumnsChoose";
|
|
17
|
+
import { StyleTableContainer } from "./base-table/styles";
|
|
17
18
|
// const Grid = (props: GridProps) => {
|
|
18
19
|
const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
19
20
|
const {
|
|
@@ -55,10 +56,10 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
55
56
|
useVirtual,
|
|
56
57
|
useOuterBorder = true,
|
|
57
58
|
showHeader = true
|
|
58
|
-
|
|
59
|
-
// onRowFooterStyles,
|
|
60
|
-
// onRowHeaderStyles
|
|
61
59
|
} = props;
|
|
60
|
+
const {
|
|
61
|
+
cssVariables
|
|
62
|
+
} = theme ?? {};
|
|
62
63
|
const prefix = 'ui-rc';
|
|
63
64
|
const stateKeyPager = 'pagination';
|
|
64
65
|
const [tableLocal] = useLocale('Table');
|
|
@@ -146,17 +147,22 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
146
147
|
const triggerChangeColumns = (nextColumn, _, nextVisibleKeys) => {
|
|
147
148
|
setVisibleKeys(nextVisibleKeys);
|
|
148
149
|
};
|
|
149
|
-
|
|
150
|
+
const artTableWrapperProps = {
|
|
151
|
+
style: {
|
|
152
|
+
...cssVariables
|
|
153
|
+
}
|
|
154
|
+
};
|
|
155
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyleTableContainer, {
|
|
150
156
|
className: classNames(`${prefix}-grid`, {
|
|
151
157
|
[tableClassNames]: !!tableClassNames,
|
|
152
|
-
[`${prefix}-grid-
|
|
153
|
-
[`${prefix}-grid-dark`]: theme?.theme === 'dark'
|
|
158
|
+
[`${prefix}-grid-theme-dark`]: theme?.theme === 'dark'
|
|
154
159
|
}),
|
|
155
160
|
style: {
|
|
156
161
|
maxHeight: height ?? 700,
|
|
157
162
|
minHeight,
|
|
158
163
|
display: 'flex',
|
|
159
|
-
flexDirection: 'column'
|
|
164
|
+
flexDirection: 'column',
|
|
165
|
+
...artTableWrapperProps.style
|
|
160
166
|
}
|
|
161
167
|
}, (showToolbar !== false || fullScreen !== false || title) && /*#__PURE__*/React.createElement("div", {
|
|
162
168
|
className: classNames(`${prefix}-grid-top-toolbar`, {})
|
|
@@ -239,9 +245,11 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
239
245
|
,
|
|
240
246
|
style: minHeight ? {
|
|
241
247
|
flex: 1,
|
|
242
|
-
overflow: 'auto'
|
|
248
|
+
overflow: 'auto',
|
|
249
|
+
...cssVariables
|
|
243
250
|
} : {
|
|
244
|
-
overflow: 'auto'
|
|
251
|
+
overflow: 'auto',
|
|
252
|
+
...cssVariables
|
|
245
253
|
}
|
|
246
254
|
|
|
247
255
|
// columnResizeMode={'onChange'}
|
|
@@ -279,6 +287,7 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
279
287
|
}
|
|
280
288
|
};
|
|
281
289
|
},
|
|
290
|
+
theme: theme,
|
|
282
291
|
footerDataSource: footerDataSource
|
|
283
292
|
})), pagination && !infiniteScroll && /*#__PURE__*/React.createElement(Pagination, _extends({
|
|
284
293
|
pageSizeOptions: pageSizeOptions,
|
|
@@ -14,8 +14,6 @@ import { getLocale, getLocales } from "../locale/useLocale";
|
|
|
14
14
|
import { TableContext } from "./useContext";
|
|
15
15
|
import Grid from "./Grid";
|
|
16
16
|
import { getParentKeysLarge, getRowsByKeysKeepTreeOrder } from "./utils/selected";
|
|
17
|
-
// import { getInvisibleColumns } from "../group-component/hook/utils"
|
|
18
|
-
|
|
19
17
|
const InternalTable = props => {
|
|
20
18
|
const {
|
|
21
19
|
t,
|
|
@@ -6,11 +6,12 @@ import { BaseTable } from "../base-table/table";
|
|
|
6
6
|
const DarkSupportBaseTable = styled(BaseTable).withConfig({
|
|
7
7
|
displayName: "DarkSupportBaseTable",
|
|
8
8
|
componentId: "es-grid-template__sc-4ltmbz-0"
|
|
9
|
-
})(["", ";&.dark{--bgcolor:#
|
|
9
|
+
})(["", ";&.dark{--bgcolor:#343e59;--footer-bgcolor:#2e3342;--header-bgcolor:#343e59;--hover-bgcolor:#232b43;--header-hover-bgcolor:#606164;--highlight-bgcolor:#eff2f5;--header-highlight-bgcolor:#191a1b;--color:#dadde1;--header-color:#dadde1;--lock-shadow:rgb(37 37 37 / 0.5) 0 0 6px 2px;--border-color:#5d5f61;}"], props => props.css);
|
|
10
10
|
export const WebsiteBaseTable = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
11
|
-
const isDarkTheme =
|
|
11
|
+
const isDarkTheme = props.theme?.theme === 'dark';
|
|
12
12
|
return /*#__PURE__*/React.createElement(DarkSupportBaseTable, _extends({
|
|
13
13
|
ref: ref,
|
|
14
|
+
theme: props.theme,
|
|
14
15
|
className: cx({
|
|
15
16
|
dark: isDarkTheme
|
|
16
17
|
}, props.className)
|
|
@@ -3,6 +3,7 @@ export declare const LOCK_SHADOW_PADDING = 20;
|
|
|
3
3
|
export declare const Classes: {
|
|
4
4
|
/** Outer wrapper div for BaseTable component */
|
|
5
5
|
readonly artTableWrapper: "ui-rc-grid-table-wrapper";
|
|
6
|
+
readonly tableThemeDark: "ui-rc-grid-theme-dark";
|
|
6
7
|
readonly artTable: "ui-rc-grid-table";
|
|
7
8
|
readonly tableHeader: "ui-rc-grid-table-header";
|
|
8
9
|
readonly tableBody: "ui-rc-grid-table-body";
|
|
@@ -36,22 +37,28 @@ export declare const Classes: {
|
|
|
36
37
|
readonly filterDropdown: "ui-rc-grid-filter-dropdown";
|
|
37
38
|
};
|
|
38
39
|
export type BaseTableCSSVariables = Partial<{
|
|
39
|
-
/** Table row height
|
|
40
|
+
/** Table row height */
|
|
40
41
|
'--row-height': string;
|
|
41
42
|
/** Table font color */
|
|
42
43
|
'--color': string;
|
|
44
|
+
/** Table hover font color */
|
|
45
|
+
'--hover-color': string;
|
|
43
46
|
/** Table background color */
|
|
44
47
|
'--bgcolor': string;
|
|
45
48
|
/** Background color on hover */
|
|
46
49
|
'--hover-bgcolor': string;
|
|
47
50
|
/** Background color when a cell is highlighted */
|
|
48
51
|
'--highlight-bgcolor': string;
|
|
49
|
-
/** Header row height
|
|
52
|
+
/** Header row height */
|
|
50
53
|
'--header-row-height': string;
|
|
51
54
|
/** Header font color */
|
|
52
55
|
'--header-color': string;
|
|
53
56
|
/** Header background color */
|
|
54
57
|
'--header-bgcolor': string;
|
|
58
|
+
/** Footer background color */
|
|
59
|
+
'--footer-bgcolor': string;
|
|
60
|
+
/** Footer color */
|
|
61
|
+
'--footer-color': string;
|
|
55
62
|
/** Header hover background color */
|
|
56
63
|
'--header-hover-bgcolor': string;
|
|
57
64
|
/** Header cell highlight background color */
|
|
@@ -62,21 +69,22 @@ export type BaseTableCSSVariables = Partial<{
|
|
|
62
69
|
'--font-size': string;
|
|
63
70
|
/** Line height for table text */
|
|
64
71
|
'--line-height': string;
|
|
65
|
-
/** Lock column shadow
|
|
72
|
+
/** Lock column shadow */
|
|
66
73
|
'--lock-shadow': string;
|
|
67
74
|
/** Cell border color */
|
|
68
75
|
'--border-color': string;
|
|
69
|
-
/** Cell border
|
|
76
|
+
/** Cell border */
|
|
70
77
|
'--cell-border': string;
|
|
71
|
-
/** Cell horizontal border
|
|
78
|
+
/** Cell horizontal border */
|
|
72
79
|
'--cell-border-horizontal': string;
|
|
73
|
-
/** Cell vertical border
|
|
80
|
+
/** Cell vertical border */
|
|
74
81
|
'--cell-border-vertical': string;
|
|
75
|
-
/** Header cell border
|
|
82
|
+
/** Header cell border */
|
|
76
83
|
'--header-cell-border': string;
|
|
77
|
-
/** Header cell horizontal border
|
|
84
|
+
/** Header cell horizontal border */
|
|
78
85
|
'--header-cell-border-horizontal': string;
|
|
79
|
-
/** Header cell vertical border
|
|
86
|
+
/** Header cell vertical border */
|
|
80
87
|
'--header-cell-border-vertical': string;
|
|
81
88
|
}>;
|
|
82
89
|
export declare const StyledArtTableWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
90
|
+
export declare const StyleTableContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
@@ -4,6 +4,7 @@ const prefix = 'ui-rc-grid-';
|
|
|
4
4
|
export const Classes = {
|
|
5
5
|
/** Outer wrapper div for BaseTable component */
|
|
6
6
|
artTableWrapper: `${prefix}table-wrapper`,
|
|
7
|
+
tableThemeDark: `${prefix}theme-dark`,
|
|
7
8
|
artTable: `${prefix}table`,
|
|
8
9
|
tableHeader: `${prefix}table-header`,
|
|
9
10
|
tableBody: `${prefix}table-body`,
|
|
@@ -44,8 +45,17 @@ const Z = {
|
|
|
44
45
|
scrollItem: 30,
|
|
45
46
|
loadingIndicator: 40
|
|
46
47
|
};
|
|
47
|
-
const outerBorderStyleMixin = css(["border-top:var(--cell-border-horizontal);border-right:var(--cell-border-vertical);border-bottom:var(--cell-border-horizontal);border-left:var(--cell-border-vertical);td.first,th.first{border-left:none;}td.last,th.last{border-right:none;}thead tr.first th,tbody tr.first td{border-top:none;}&.has-footer tfoot tr.last td{}&.has-footer tbody tr.last td{&.lock-left,&.lock-right{border-bottom-width:0;border-top-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 0px 0 0 var(--border-color),-1px 0 0 0 var(--border-color);}}&.has-footer tfoot tr td{
|
|
48
|
+
const outerBorderStyleMixin = css(["border-top:var(--cell-border-horizontal);border-right:var(--cell-border-vertical);border-bottom:var(--cell-border-horizontal);border-left:var(--cell-border-vertical);td.first,th.first{border-left:none;}td.last,th.last{border-right:none;}thead tr.first th,tbody tr.first td{border-top:none;}&.has-footer tfoot tr.last td{}&.has-footer tbody tr.last td{&.lock-left,&.lock-right{border-bottom-width:0;border-top-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 0px 0 0 var(--border-color),-1px 0 0 0 var(--border-color);}}&.has-footer tfoot tr td{&.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}&.", "{width:100%;white-space:normal;word-break:break-word;}&.", "{text-align:center;}&.", "{text-align:right;}}&:not(.has-footer) tbody tr.last td{border-bottom:none;}"], Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight);
|
|
48
49
|
export const StyledArtTableWrapper = styled.div.withConfig({
|
|
49
50
|
displayName: "StyledArtTableWrapper",
|
|
50
51
|
componentId: "es-grid-template__sc-ipj1ht-0"
|
|
51
|
-
})(["--row-height:38px;--color:#333;--bgcolor:white;--hover-bgcolor:var(--hover-
|
|
52
|
+
})(["--row-height:38px;--color:#333;--bgcolor:white;--hover-bgcolor:var(--hover-bgcolor,#f5f5f5);--hover-color:var(--hover-color,#333);--highlight-bgcolor:#eee;--header-row-height:36px;--header-color:#000000de;--header-bgcolor:#ffffff;--header-hover-bgcolor:#ddd;--header-highlight-bgcolor:#e4e8ed;--cell-padding:7px 8px;--font-size:13px;--line-height:1.28571;--lock-shadow:rgba(152,152,152,0.5) 0 0 6px 2px;--border-color:#dfe3e8;--cell-border:1px solid var(--border-color);--cell-border-horizontal:var(--cell-border);--cell-border-vertical:var(--cell-border);--header-cell-border:1px solid var(--border-color);--header-cell-border-horizontal:var(--header-cell-border);--header-cell-border-vertical:var(--header-cell-border);--footer-bgColor:#fafafa;box-sizing:border-box;*{box-sizing:border-box;}cursor:default;color:var(--color);font-size:var(--font-size);line-height:var(--line-height);position:relative;overflow-anchor:none;&.use-outer-border{", ";}.no-scrollbar{scrollbar-width:none;::-webkit-scrollbar{display:none;}}.", "{overflow-x:auto;overflow-y:hidden;background:var(--header-bgcolor);.ui-rc-table-column-title{flex:1;min-width:0;text-align:start;}.", "{font-weight:500;.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}.", "{width:100%;white-space:normal;word-break:break-word;}.", "{text-align:center;}.", "{text-align:right;}}}.", "{.", "{&.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;.expansion-cell{.expansion-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "{width:100%;white-space:normal;word-break:break-word;}&.", "{text-align:center;}&.", "{text-align:right;}}.", "{background:var(--footer-bgcolor);}}.", ",.", "{overflow-x:auto;overflow-y:hidden;}&.sticky-header .", "{position:sticky;top:0;z-index:", ";}&.sticky-footer .", "{position:sticky;bottom:0;z-index:", ";}.", "{tr{td{&.lock-left,&.lock-right{border-bottom-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 0px 0 0 var(--border-color),-1px 0 0 0 var(--border-color);}}}}table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;display:table;margin:0;padding:0;}tr:not(.no-hover):hover > td{background:var(--hover-bgcolor);color:var(--hover-color);}tr:not(.no-highlight).highlight > td{}th{font-weight:normal;text-align:left;padding:var(--cell-padding);height:var(--header-row-height);color:var(--header-color);background:var(--header-bgcolor);border:none;border-right:var(--header-cell-border-vertical);border-bottom:var(--header-cell-border-horizontal);}tr.first th{border-top:var(--header-cell-border-horizontal);}th.first{border-left:var(--header-cell-border-vertical);}td{padding:var(--cell-padding);background:var(--bgcolor);height:var(--row-height);border:none;border-right:var(--cell-border-vertical);border-bottom:var(--cell-border-horizontal);}td.first{border-left:var(--cell-border-vertical);}tr.first td{border-top:var(--cell-border-horizontal);}&.has-header tbody tr.first td{border-top:none;}&.has-footer tbody tr.last td{border-bottom:none;}&.has-footer tfoot tr > td{background:var(--footer-bgcolor);color:var(--footer-color);}&.has-footer tfoot tr:not(.no-hover):hover > td{background:var(--footer-bgcolor);}.lock-left,.lock-right{z-index:", ";}.resize-handle{width:6px;height:100%;position:absolute;top:0;right:0;cursor:col-resize;background-color:transparent;border-right:2px solid transparent;}.", "{position:absolute;top:0;bottom:0;z-index:", ";pointer-events:none;overflow:hidden;.", "{height:100%;}.", "{margin-right:", "px;box-shadow:none;&.show-shadow{box-shadow:var(--lock-shadow);border-right:var(--cell-border-vertical);}}.", "{margin-left:", "px;box-shadow:none;&.show-shadow{box-shadow:var(--lock-shadow);border-left:var(--cell-border-vertical);}}}.", "{pointer-events:none;color:#99a3b3;font-size:12px;text-align:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);.empty-image{width:50px;height:50px;}.empty-tips{margin-top:16px;line-height:1.5;}}.", "{overflow:auto;position:sticky;bottom:0;z-index:", ";margin-top:-17px;}.ui-rc-grid-loading-wrapper{}.ui-rc-grid-table{}.art-loading-content-wrapper{}.", "{height:1px;visibility:hidden;}.", "{position:relative;.", "{position:absolute;inset:0;pointer-events:none;}.", "{position:sticky;z-index:", ";transform:translateY(-50%);}}"], outerBorderStyleMixin, Classes.tableHeader, Classes.tableHeaderCell, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableBody, Classes.tableCell, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.tableBody, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator);
|
|
53
|
+
|
|
54
|
+
// type StyleTableContainerProps = {
|
|
55
|
+
|
|
56
|
+
// }
|
|
57
|
+
|
|
58
|
+
export const StyleTableContainer = styled.div.withConfig({
|
|
59
|
+
displayName: "StyleTableContainer",
|
|
60
|
+
componentId: "es-grid-template__sc-ipj1ht-1"
|
|
61
|
+
})(["--color:#333;--bgcolor:white;--header-bgcolor:#ffffff;--header-hover-bgcolor:#ddd;--header-highlight-bgcolor:#e4e8ed;--cell-padding:7px 8px;--font-size:13px;--line-height:1.28571;--border-color:#dfe3e8;--cell-border:1px solid var(--border-color);--cell-border-horizontal:var(--cell-border);--cell-border-vertical:var(--cell-border);--header-cell-border:1px solid var(--border-color);--header-cell-border-horizontal:var(--header-cell-border);--header-cell-border-vertical:var(--header-cell-border);--footer-bgcolor:#fafafa;&.", "{--bgcolor:#343e59;--footer-bgcolor:#2e3342;--header-bgcolor:#343e59;--hover-bgcolor:#232b43;--header-hover-bgcolor:#606164;--highlight-bgcolor:#eff2f5;--header-highlight-bgcolor:#191a1b;--color:#dadde1;--header-color:#dadde1;--lock-shadow:rgb(37 37 37 / 0.5) 0 0 6px 2px;--border-color:#4f5266;background-color:var(--bgcolor);}&.ui-rc-grid .ui-rc-pagination{background-color:var(--bgcolor);color:var(--color);padding:10px;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);border-inline:1px solid var(--border-color);background-color:var(--bgcolor);.ui-rc-pagination-prev{.anticon.anticon-left{color:var(--color);}}.ui-rc-pagination-disabled{.anticon.anticon-left{color:#7d7a7a;}}.ui-rc-pagination-next{.anticon.anticon-right{color:var(--color);}&.ui-rc-pagination-disabled{.anticon.anticon-right{color:#7d7a7a;}}}}&.", "{&.ui-rc-grid{.ui-rc-toolbar-bottom{background-color:var(--footer-bgcolor);color:#ffffff;}}.ui-rc-grid-top-toolbar{border-color:var(--border-color);color:#ffffff;}.ui-rc-toolbar{.ui-rc-toolbar-selection-item{background-color:var(--footer-bgcolor);color:#ffffff;}}}"], Classes.tableThemeDark, Classes.tableThemeDark);
|
|
@@ -6,7 +6,7 @@ import { TableDOMHelper } from './helpers/TableDOMUtils';
|
|
|
6
6
|
import type { ResolvedUseVirtual, VerticalRenderRange, VirtualEnum } from './interfaces';
|
|
7
7
|
import type { LoadingContentWrapperProps } from './loading';
|
|
8
8
|
import type { BaseTableCSSVariables } from './styles';
|
|
9
|
-
import type { CommandClick, ExpandedRowRender, IFormat, RenderExpandIcon, RowClassName } from '../../grid-component/type';
|
|
9
|
+
import type { CommandClick, ExpandedRowRender, IFormat, IFTheme, RenderExpandIcon, RowClassName } from '../../grid-component/type';
|
|
10
10
|
export type PrimaryKey = string | ((row: any) => string);
|
|
11
11
|
export type ColumnResizeMode = 'onChange' | 'onEnd';
|
|
12
12
|
export type ExpandableConfig<RecordType> = {
|
|
@@ -61,6 +61,7 @@ export type BaseTableProps = {
|
|
|
61
61
|
style?: CSSProperties & BaseTableCSSVariables;
|
|
62
62
|
/** Whether the table has a header */
|
|
63
63
|
showHeader?: boolean;
|
|
64
|
+
theme?: IFTheme;
|
|
64
65
|
/** Whether table has a horizontal sticky scrollbar */
|
|
65
66
|
hasStickyScroll?: boolean;
|
|
66
67
|
/** Height of the sticky horizontal scrollbar */
|
|
@@ -22,6 +22,7 @@ function warnEmptyContentIsDeprecated() {
|
|
|
22
22
|
export class BaseTable extends React.Component {
|
|
23
23
|
static defaultProps = {
|
|
24
24
|
showHeader: true,
|
|
25
|
+
// theme: undefined,
|
|
25
26
|
isStickyHeader: true,
|
|
26
27
|
stickyTop: 0,
|
|
27
28
|
footerDataSource: [],
|
|
@@ -335,8 +336,8 @@ export class BaseTable extends React.Component {
|
|
|
335
336
|
className,
|
|
336
337
|
style,
|
|
337
338
|
showHeader,
|
|
339
|
+
theme,
|
|
338
340
|
useOuterBorder,
|
|
339
|
-
// isStickyHead,
|
|
340
341
|
isStickyHeader,
|
|
341
342
|
isStickyFooter,
|
|
342
343
|
isLoading,
|
|
@@ -348,6 +349,7 @@ export class BaseTable extends React.Component {
|
|
|
348
349
|
empty: dataSource.length === 0,
|
|
349
350
|
lock: info.hasLockColumn,
|
|
350
351
|
'has-header': showHeader,
|
|
352
|
+
'theme-dark': theme?.theme === 'dark',
|
|
351
353
|
'sticky-header': isStickyHeader,
|
|
352
354
|
'has-footer': footerDataSource && footerDataSource.length > 0,
|
|
353
355
|
'sticky-footer': isStickyFooter
|
|
@@ -402,7 +402,6 @@ export function isRowChecked(key, selectedKeys, treeIndex, checkedStrategy, isDi
|
|
|
402
402
|
// =========================
|
|
403
403
|
if (checkedStrategy === 'parent') {
|
|
404
404
|
// node disable => chỉ true nếu explicit chọn
|
|
405
|
-
// console.log('isDisabled', isDisabled)
|
|
406
405
|
if (isDisabled) {
|
|
407
406
|
const abc = selectedKeys.has(key);
|
|
408
407
|
return abc;
|
|
@@ -4,6 +4,7 @@ import type { Cell, Header, OnChangeFn } from '@tanstack/react-table';
|
|
|
4
4
|
import type { CSSProperties, ReactElement, ReactNode } from 'react';
|
|
5
5
|
import type { TableLocale } from "rc-master-ui/lib/table/interface";
|
|
6
6
|
import type { PaginationLocale } from 'rc-master-ui/lib/pagination/Pagination';
|
|
7
|
+
import { BaseTableCSSVariables } from '../ali-table/base-table/styles';
|
|
7
8
|
declare module "@tanstack/table-core" {
|
|
8
9
|
interface ColumnMeta<any, any> extends ColumnTable {
|
|
9
10
|
rowSpan?: number;
|
|
@@ -225,13 +226,14 @@ export type ColumnTable<RecordType = AnyObject> = {
|
|
|
225
226
|
getSpanRect?: (value: any, row: any, rowIndex: number) => SpanRect;
|
|
226
227
|
};
|
|
227
228
|
export type ColumnsTable<RecordType = AnyObject> = ColumnTable<RecordType>[];
|
|
229
|
+
export type IFTheme = {
|
|
230
|
+
theme?: 'dark' | 'light';
|
|
231
|
+
backgroundColor?: string;
|
|
232
|
+
cssVariables?: BaseTableCSSVariables;
|
|
233
|
+
};
|
|
228
234
|
export type TableProps<RecordType = AnyObject> = {
|
|
229
235
|
id?: string;
|
|
230
|
-
theme?:
|
|
231
|
-
theme?: 'dark' | 'light';
|
|
232
|
-
backgroundColor?: string;
|
|
233
|
-
color?: string;
|
|
234
|
-
};
|
|
236
|
+
theme?: IFTheme;
|
|
235
237
|
useOuterBorder?: boolean;
|
|
236
238
|
showHeader?: boolean;
|
|
237
239
|
className?: string;
|
|
@@ -208,9 +208,9 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
|
|
|
208
208
|
ellipsis?: boolean;
|
|
209
209
|
allowResizing?: boolean;
|
|
210
210
|
allowSelection?: boolean | ((rowData: RecordType) => boolean);
|
|
211
|
-
onCellStyles?: Omit<CSSProperties, "left" | "right" | "
|
|
212
|
-
onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "
|
|
213
|
-
onCellFooterStyles?: Omit<CSSProperties, "left" | "right" | "
|
|
211
|
+
onCellStyles?: Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width">);
|
|
212
|
+
onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width">);
|
|
213
|
+
onCellFooterStyles?: Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width">);
|
|
214
214
|
sumGroup?: boolean;
|
|
215
215
|
getValue?: (row: any, rowIndex: number) => any;
|
|
216
216
|
getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
|
package/lib/ali-table/Grid.js
CHANGED
|
@@ -20,6 +20,7 @@ var _hooks = require("../grid-component/hooks");
|
|
|
20
20
|
var _ContextMenu = _interopRequireDefault(require("../table-component/ContextMenu"));
|
|
21
21
|
var _useContext = require("./useContext");
|
|
22
22
|
var _ColumnsChoose = require("./pipeline/features/ColumnsChoose");
|
|
23
|
+
var _styles2 = require("./base-table/styles");
|
|
23
24
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
24
25
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
25
26
|
// import type { TableProps } from "../table-component"
|
|
@@ -65,10 +66,10 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
|
|
|
65
66
|
useVirtual,
|
|
66
67
|
useOuterBorder = true,
|
|
67
68
|
showHeader = true
|
|
68
|
-
|
|
69
|
-
// onRowFooterStyles,
|
|
70
|
-
// onRowHeaderStyles
|
|
71
69
|
} = props;
|
|
70
|
+
const {
|
|
71
|
+
cssVariables
|
|
72
|
+
} = theme ?? {};
|
|
72
73
|
const prefix = 'ui-rc';
|
|
73
74
|
const stateKeyPager = 'pagination';
|
|
74
75
|
const [tableLocal] = (0, _locale.useLocale)('Table');
|
|
@@ -156,17 +157,22 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
|
|
|
156
157
|
const triggerChangeColumns = (nextColumn, _, nextVisibleKeys) => {
|
|
157
158
|
setVisibleKeys(nextVisibleKeys);
|
|
158
159
|
};
|
|
159
|
-
|
|
160
|
+
const artTableWrapperProps = {
|
|
161
|
+
style: {
|
|
162
|
+
...cssVariables
|
|
163
|
+
}
|
|
164
|
+
};
|
|
165
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles2.StyleTableContainer, {
|
|
160
166
|
className: (0, _classnames.default)(`${prefix}-grid`, {
|
|
161
167
|
[tableClassNames]: !!tableClassNames,
|
|
162
|
-
[`${prefix}-grid-
|
|
163
|
-
[`${prefix}-grid-dark`]: theme?.theme === 'dark'
|
|
168
|
+
[`${prefix}-grid-theme-dark`]: theme?.theme === 'dark'
|
|
164
169
|
}),
|
|
165
170
|
style: {
|
|
166
171
|
maxHeight: height ?? 700,
|
|
167
172
|
minHeight,
|
|
168
173
|
display: 'flex',
|
|
169
|
-
flexDirection: 'column'
|
|
174
|
+
flexDirection: 'column',
|
|
175
|
+
...artTableWrapperProps.style
|
|
170
176
|
}
|
|
171
177
|
}, (showToolbar !== false || fullScreen !== false || title) && /*#__PURE__*/_react.default.createElement("div", {
|
|
172
178
|
className: (0, _classnames.default)(`${prefix}-grid-top-toolbar`, {})
|
|
@@ -249,9 +255,11 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
|
|
|
249
255
|
,
|
|
250
256
|
style: minHeight ? {
|
|
251
257
|
flex: 1,
|
|
252
|
-
overflow: 'auto'
|
|
258
|
+
overflow: 'auto',
|
|
259
|
+
...cssVariables
|
|
253
260
|
} : {
|
|
254
|
-
overflow: 'auto'
|
|
261
|
+
overflow: 'auto',
|
|
262
|
+
...cssVariables
|
|
255
263
|
}
|
|
256
264
|
|
|
257
265
|
// columnResizeMode={'onChange'}
|
|
@@ -289,6 +297,7 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
|
|
|
289
297
|
}
|
|
290
298
|
};
|
|
291
299
|
},
|
|
300
|
+
theme: theme,
|
|
292
301
|
footerDataSource: footerDataSource
|
|
293
302
|
})), pagination && !infiniteScroll && /*#__PURE__*/_react.default.createElement(_pagination.default, (0, _extends2.default)({
|
|
294
303
|
pageSizeOptions: _hooks.pageSizeOptions,
|
|
@@ -21,8 +21,6 @@ var _Grid = _interopRequireDefault(require("./Grid"));
|
|
|
21
21
|
var _selected = require("./utils/selected");
|
|
22
22
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
23
23
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
24
|
-
// import { getInvisibleColumns } from "../group-component/hook/utils"
|
|
25
|
-
|
|
26
24
|
const InternalTable = props => {
|
|
27
25
|
const {
|
|
28
26
|
t,
|
|
@@ -13,11 +13,12 @@ var _table = require("../base-table/table");
|
|
|
13
13
|
const DarkSupportBaseTable = (0, _styledComponents.default)(_table.BaseTable).withConfig({
|
|
14
14
|
displayName: "DarkSupportBaseTable",
|
|
15
15
|
componentId: "es-grid-template__sc-4ltmbz-0"
|
|
16
|
-
})(["", ";&.dark{--bgcolor:#
|
|
16
|
+
})(["", ";&.dark{--bgcolor:#343e59;--footer-bgcolor:#2e3342;--header-bgcolor:#343e59;--hover-bgcolor:#232b43;--header-hover-bgcolor:#606164;--highlight-bgcolor:#eff2f5;--header-highlight-bgcolor:#191a1b;--color:#dadde1;--header-color:#dadde1;--lock-shadow:rgb(37 37 37 / 0.5) 0 0 6px 2px;--border-color:#5d5f61;}"], props => props.css);
|
|
17
17
|
const WebsiteBaseTable = exports.WebsiteBaseTable = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
|
|
18
|
-
const isDarkTheme =
|
|
18
|
+
const isDarkTheme = props.theme?.theme === 'dark';
|
|
19
19
|
return /*#__PURE__*/_react.default.createElement(DarkSupportBaseTable, (0, _extends2.default)({
|
|
20
20
|
ref: ref,
|
|
21
|
+
theme: props.theme,
|
|
21
22
|
className: (0, _classnames.default)({
|
|
22
23
|
dark: isDarkTheme
|
|
23
24
|
}, props.className)
|
|
@@ -3,6 +3,7 @@ export declare const LOCK_SHADOW_PADDING = 20;
|
|
|
3
3
|
export declare const Classes: {
|
|
4
4
|
/** Outer wrapper div for BaseTable component */
|
|
5
5
|
readonly artTableWrapper: "ui-rc-grid-table-wrapper";
|
|
6
|
+
readonly tableThemeDark: "ui-rc-grid-theme-dark";
|
|
6
7
|
readonly artTable: "ui-rc-grid-table";
|
|
7
8
|
readonly tableHeader: "ui-rc-grid-table-header";
|
|
8
9
|
readonly tableBody: "ui-rc-grid-table-body";
|
|
@@ -36,22 +37,28 @@ export declare const Classes: {
|
|
|
36
37
|
readonly filterDropdown: "ui-rc-grid-filter-dropdown";
|
|
37
38
|
};
|
|
38
39
|
export type BaseTableCSSVariables = Partial<{
|
|
39
|
-
/** Table row height
|
|
40
|
+
/** Table row height */
|
|
40
41
|
'--row-height': string;
|
|
41
42
|
/** Table font color */
|
|
42
43
|
'--color': string;
|
|
44
|
+
/** Table hover font color */
|
|
45
|
+
'--hover-color': string;
|
|
43
46
|
/** Table background color */
|
|
44
47
|
'--bgcolor': string;
|
|
45
48
|
/** Background color on hover */
|
|
46
49
|
'--hover-bgcolor': string;
|
|
47
50
|
/** Background color when a cell is highlighted */
|
|
48
51
|
'--highlight-bgcolor': string;
|
|
49
|
-
/** Header row height
|
|
52
|
+
/** Header row height */
|
|
50
53
|
'--header-row-height': string;
|
|
51
54
|
/** Header font color */
|
|
52
55
|
'--header-color': string;
|
|
53
56
|
/** Header background color */
|
|
54
57
|
'--header-bgcolor': string;
|
|
58
|
+
/** Footer background color */
|
|
59
|
+
'--footer-bgcolor': string;
|
|
60
|
+
/** Footer color */
|
|
61
|
+
'--footer-color': string;
|
|
55
62
|
/** Header hover background color */
|
|
56
63
|
'--header-hover-bgcolor': string;
|
|
57
64
|
/** Header cell highlight background color */
|
|
@@ -62,21 +69,22 @@ export type BaseTableCSSVariables = Partial<{
|
|
|
62
69
|
'--font-size': string;
|
|
63
70
|
/** Line height for table text */
|
|
64
71
|
'--line-height': string;
|
|
65
|
-
/** Lock column shadow
|
|
72
|
+
/** Lock column shadow */
|
|
66
73
|
'--lock-shadow': string;
|
|
67
74
|
/** Cell border color */
|
|
68
75
|
'--border-color': string;
|
|
69
|
-
/** Cell border
|
|
76
|
+
/** Cell border */
|
|
70
77
|
'--cell-border': string;
|
|
71
|
-
/** Cell horizontal border
|
|
78
|
+
/** Cell horizontal border */
|
|
72
79
|
'--cell-border-horizontal': string;
|
|
73
|
-
/** Cell vertical border
|
|
80
|
+
/** Cell vertical border */
|
|
74
81
|
'--cell-border-vertical': string;
|
|
75
|
-
/** Header cell border
|
|
82
|
+
/** Header cell border */
|
|
76
83
|
'--header-cell-border': string;
|
|
77
|
-
/** Header cell horizontal border
|
|
84
|
+
/** Header cell horizontal border */
|
|
78
85
|
'--header-cell-border-horizontal': string;
|
|
79
|
-
/** Header cell vertical border
|
|
86
|
+
/** Header cell vertical border */
|
|
80
87
|
'--header-cell-border-vertical': string;
|
|
81
88
|
}>;
|
|
82
89
|
export declare const StyledArtTableWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
90
|
+
export declare const StyleTableContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.StyledArtTableWrapper = exports.LOCK_SHADOW_PADDING = exports.Classes = void 0;
|
|
6
|
+
exports.StyledArtTableWrapper = exports.StyleTableContainer = exports.LOCK_SHADOW_PADDING = exports.Classes = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
8
8
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
9
9
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -12,6 +12,7 @@ const prefix = 'ui-rc-grid-';
|
|
|
12
12
|
const Classes = exports.Classes = {
|
|
13
13
|
/** Outer wrapper div for BaseTable component */
|
|
14
14
|
artTableWrapper: `${prefix}table-wrapper`,
|
|
15
|
+
tableThemeDark: `${prefix}theme-dark`,
|
|
15
16
|
artTable: `${prefix}table`,
|
|
16
17
|
tableHeader: `${prefix}table-header`,
|
|
17
18
|
tableBody: `${prefix}table-body`,
|
|
@@ -52,8 +53,17 @@ const Z = {
|
|
|
52
53
|
scrollItem: 30,
|
|
53
54
|
loadingIndicator: 40
|
|
54
55
|
};
|
|
55
|
-
const outerBorderStyleMixin = (0, _styledComponents.css)(["border-top:var(--cell-border-horizontal);border-right:var(--cell-border-vertical);border-bottom:var(--cell-border-horizontal);border-left:var(--cell-border-vertical);td.first,th.first{border-left:none;}td.last,th.last{border-right:none;}thead tr.first th,tbody tr.first td{border-top:none;}&.has-footer tfoot tr.last td{}&.has-footer tbody tr.last td{&.lock-left,&.lock-right{border-bottom-width:0;border-top-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 0px 0 0 var(--border-color),-1px 0 0 0 var(--border-color);}}&.has-footer tfoot tr td{
|
|
56
|
+
const outerBorderStyleMixin = (0, _styledComponents.css)(["border-top:var(--cell-border-horizontal);border-right:var(--cell-border-vertical);border-bottom:var(--cell-border-horizontal);border-left:var(--cell-border-vertical);td.first,th.first{border-left:none;}td.last,th.last{border-right:none;}thead tr.first th,tbody tr.first td{border-top:none;}&.has-footer tfoot tr.last td{}&.has-footer tbody tr.last td{&.lock-left,&.lock-right{border-bottom-width:0;border-top-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 0px 0 0 var(--border-color),-1px 0 0 0 var(--border-color);}}&.has-footer tfoot tr td{&.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}&.", "{width:100%;white-space:normal;word-break:break-word;}&.", "{text-align:center;}&.", "{text-align:right;}}&:not(.has-footer) tbody tr.last td{border-bottom:none;}"], Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight);
|
|
56
57
|
const StyledArtTableWrapper = exports.StyledArtTableWrapper = _styledComponents.default.div.withConfig({
|
|
57
58
|
displayName: "StyledArtTableWrapper",
|
|
58
59
|
componentId: "es-grid-template__sc-ipj1ht-0"
|
|
59
|
-
})(["--row-height:38px;--color:#333;--bgcolor:white;--hover-bgcolor:var(--hover-
|
|
60
|
+
})(["--row-height:38px;--color:#333;--bgcolor:white;--hover-bgcolor:var(--hover-bgcolor,#f5f5f5);--hover-color:var(--hover-color,#333);--highlight-bgcolor:#eee;--header-row-height:36px;--header-color:#000000de;--header-bgcolor:#ffffff;--header-hover-bgcolor:#ddd;--header-highlight-bgcolor:#e4e8ed;--cell-padding:7px 8px;--font-size:13px;--line-height:1.28571;--lock-shadow:rgba(152,152,152,0.5) 0 0 6px 2px;--border-color:#dfe3e8;--cell-border:1px solid var(--border-color);--cell-border-horizontal:var(--cell-border);--cell-border-vertical:var(--cell-border);--header-cell-border:1px solid var(--border-color);--header-cell-border-horizontal:var(--header-cell-border);--header-cell-border-vertical:var(--header-cell-border);--footer-bgColor:#fafafa;box-sizing:border-box;*{box-sizing:border-box;}cursor:default;color:var(--color);font-size:var(--font-size);line-height:var(--line-height);position:relative;overflow-anchor:none;&.use-outer-border{", ";}.no-scrollbar{scrollbar-width:none;::-webkit-scrollbar{display:none;}}.", "{overflow-x:auto;overflow-y:hidden;background:var(--header-bgcolor);.ui-rc-table-column-title{flex:1;min-width:0;text-align:start;}.", "{font-weight:500;.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}.", "{width:100%;white-space:normal;word-break:break-word;}.", "{text-align:center;}.", "{text-align:right;}}}.", "{.", "{&.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;.expansion-cell{.expansion-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "{width:100%;white-space:normal;word-break:break-word;}&.", "{text-align:center;}&.", "{text-align:right;}}.", "{background:var(--footer-bgcolor);}}.", ",.", "{overflow-x:auto;overflow-y:hidden;}&.sticky-header .", "{position:sticky;top:0;z-index:", ";}&.sticky-footer .", "{position:sticky;bottom:0;z-index:", ";}.", "{tr{td{&.lock-left,&.lock-right{border-bottom-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 0px 0 0 var(--border-color),-1px 0 0 0 var(--border-color);}}}}table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;display:table;margin:0;padding:0;}tr:not(.no-hover):hover > td{background:var(--hover-bgcolor);color:var(--hover-color);}tr:not(.no-highlight).highlight > td{}th{font-weight:normal;text-align:left;padding:var(--cell-padding);height:var(--header-row-height);color:var(--header-color);background:var(--header-bgcolor);border:none;border-right:var(--header-cell-border-vertical);border-bottom:var(--header-cell-border-horizontal);}tr.first th{border-top:var(--header-cell-border-horizontal);}th.first{border-left:var(--header-cell-border-vertical);}td{padding:var(--cell-padding);background:var(--bgcolor);height:var(--row-height);border:none;border-right:var(--cell-border-vertical);border-bottom:var(--cell-border-horizontal);}td.first{border-left:var(--cell-border-vertical);}tr.first td{border-top:var(--cell-border-horizontal);}&.has-header tbody tr.first td{border-top:none;}&.has-footer tbody tr.last td{border-bottom:none;}&.has-footer tfoot tr > td{background:var(--footer-bgcolor);color:var(--footer-color);}&.has-footer tfoot tr:not(.no-hover):hover > td{background:var(--footer-bgcolor);}.lock-left,.lock-right{z-index:", ";}.resize-handle{width:6px;height:100%;position:absolute;top:0;right:0;cursor:col-resize;background-color:transparent;border-right:2px solid transparent;}.", "{position:absolute;top:0;bottom:0;z-index:", ";pointer-events:none;overflow:hidden;.", "{height:100%;}.", "{margin-right:", "px;box-shadow:none;&.show-shadow{box-shadow:var(--lock-shadow);border-right:var(--cell-border-vertical);}}.", "{margin-left:", "px;box-shadow:none;&.show-shadow{box-shadow:var(--lock-shadow);border-left:var(--cell-border-vertical);}}}.", "{pointer-events:none;color:#99a3b3;font-size:12px;text-align:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);.empty-image{width:50px;height:50px;}.empty-tips{margin-top:16px;line-height:1.5;}}.", "{overflow:auto;position:sticky;bottom:0;z-index:", ";margin-top:-17px;}.ui-rc-grid-loading-wrapper{}.ui-rc-grid-table{}.art-loading-content-wrapper{}.", "{height:1px;visibility:hidden;}.", "{position:relative;.", "{position:absolute;inset:0;pointer-events:none;}.", "{position:sticky;z-index:", ";transform:translateY(-50%);}}"], outerBorderStyleMixin, Classes.tableHeader, Classes.tableHeaderCell, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableBody, Classes.tableCell, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.tableBody, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator);
|
|
61
|
+
|
|
62
|
+
// type StyleTableContainerProps = {
|
|
63
|
+
|
|
64
|
+
// }
|
|
65
|
+
|
|
66
|
+
const StyleTableContainer = exports.StyleTableContainer = _styledComponents.default.div.withConfig({
|
|
67
|
+
displayName: "StyleTableContainer",
|
|
68
|
+
componentId: "es-grid-template__sc-ipj1ht-1"
|
|
69
|
+
})(["--color:#333;--bgcolor:white;--header-bgcolor:#ffffff;--header-hover-bgcolor:#ddd;--header-highlight-bgcolor:#e4e8ed;--cell-padding:7px 8px;--font-size:13px;--line-height:1.28571;--border-color:#dfe3e8;--cell-border:1px solid var(--border-color);--cell-border-horizontal:var(--cell-border);--cell-border-vertical:var(--cell-border);--header-cell-border:1px solid var(--border-color);--header-cell-border-horizontal:var(--header-cell-border);--header-cell-border-vertical:var(--header-cell-border);--footer-bgcolor:#fafafa;&.", "{--bgcolor:#343e59;--footer-bgcolor:#2e3342;--header-bgcolor:#343e59;--hover-bgcolor:#232b43;--header-hover-bgcolor:#606164;--highlight-bgcolor:#eff2f5;--header-highlight-bgcolor:#191a1b;--color:#dadde1;--header-color:#dadde1;--lock-shadow:rgb(37 37 37 / 0.5) 0 0 6px 2px;--border-color:#4f5266;background-color:var(--bgcolor);}&.ui-rc-grid .ui-rc-pagination{background-color:var(--bgcolor);color:var(--color);padding:10px;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);border-inline:1px solid var(--border-color);background-color:var(--bgcolor);.ui-rc-pagination-prev{.anticon.anticon-left{color:var(--color);}}.ui-rc-pagination-disabled{.anticon.anticon-left{color:#7d7a7a;}}.ui-rc-pagination-next{.anticon.anticon-right{color:var(--color);}&.ui-rc-pagination-disabled{.anticon.anticon-right{color:#7d7a7a;}}}}&.", "{&.ui-rc-grid{.ui-rc-toolbar-bottom{background-color:var(--footer-bgcolor);color:#ffffff;}}.ui-rc-grid-top-toolbar{border-color:var(--border-color);color:#ffffff;}.ui-rc-toolbar{.ui-rc-toolbar-selection-item{background-color:var(--footer-bgcolor);color:#ffffff;}}}"], Classes.tableThemeDark, Classes.tableThemeDark);
|
|
@@ -6,7 +6,7 @@ import { TableDOMHelper } from './helpers/TableDOMUtils';
|
|
|
6
6
|
import type { ResolvedUseVirtual, VerticalRenderRange, VirtualEnum } from './interfaces';
|
|
7
7
|
import type { LoadingContentWrapperProps } from './loading';
|
|
8
8
|
import type { BaseTableCSSVariables } from './styles';
|
|
9
|
-
import type { CommandClick, ExpandedRowRender, IFormat, RenderExpandIcon, RowClassName } from '../../grid-component/type';
|
|
9
|
+
import type { CommandClick, ExpandedRowRender, IFormat, IFTheme, RenderExpandIcon, RowClassName } from '../../grid-component/type';
|
|
10
10
|
export type PrimaryKey = string | ((row: any) => string);
|
|
11
11
|
export type ColumnResizeMode = 'onChange' | 'onEnd';
|
|
12
12
|
export type ExpandableConfig<RecordType> = {
|
|
@@ -61,6 +61,7 @@ export type BaseTableProps = {
|
|
|
61
61
|
style?: CSSProperties & BaseTableCSSVariables;
|
|
62
62
|
/** Whether the table has a header */
|
|
63
63
|
showHeader?: boolean;
|
|
64
|
+
theme?: IFTheme;
|
|
64
65
|
/** Whether table has a horizontal sticky scrollbar */
|
|
65
66
|
hasStickyScroll?: boolean;
|
|
66
67
|
/** Height of the sticky horizontal scrollbar */
|
|
@@ -31,6 +31,7 @@ function warnEmptyContentIsDeprecated() {
|
|
|
31
31
|
class BaseTable extends _react.default.Component {
|
|
32
32
|
static defaultProps = {
|
|
33
33
|
showHeader: true,
|
|
34
|
+
// theme: undefined,
|
|
34
35
|
isStickyHeader: true,
|
|
35
36
|
stickyTop: 0,
|
|
36
37
|
footerDataSource: [],
|
|
@@ -344,8 +345,8 @@ class BaseTable extends _react.default.Component {
|
|
|
344
345
|
className,
|
|
345
346
|
style,
|
|
346
347
|
showHeader,
|
|
348
|
+
theme,
|
|
347
349
|
useOuterBorder,
|
|
348
|
-
// isStickyHead,
|
|
349
350
|
isStickyHeader,
|
|
350
351
|
isStickyFooter,
|
|
351
352
|
isLoading,
|
|
@@ -357,6 +358,7 @@ class BaseTable extends _react.default.Component {
|
|
|
357
358
|
empty: dataSource.length === 0,
|
|
358
359
|
lock: info.hasLockColumn,
|
|
359
360
|
'has-header': showHeader,
|
|
361
|
+
'theme-dark': theme?.theme === 'dark',
|
|
360
362
|
'sticky-header': isStickyHeader,
|
|
361
363
|
'has-footer': footerDataSource && footerDataSource.length > 0,
|
|
362
364
|
'sticky-footer': isStickyFooter
|
|
@@ -433,7 +433,6 @@ function isRowChecked(key, selectedKeys, treeIndex, checkedStrategy, isDisabledF
|
|
|
433
433
|
// =========================
|
|
434
434
|
if (checkedStrategy === 'parent') {
|
|
435
435
|
// node disable => chỉ true nếu explicit chọn
|
|
436
|
-
// console.log('isDisabled', isDisabled)
|
|
437
436
|
if (isDisabled) {
|
|
438
437
|
const abc = selectedKeys.has(key);
|
|
439
438
|
return abc;
|
|
@@ -4,6 +4,7 @@ import type { Cell, Header, OnChangeFn } from '@tanstack/react-table';
|
|
|
4
4
|
import type { CSSProperties, ReactElement, ReactNode } from 'react';
|
|
5
5
|
import type { TableLocale } from "rc-master-ui/lib/table/interface";
|
|
6
6
|
import type { PaginationLocale } from 'rc-master-ui/lib/pagination/Pagination';
|
|
7
|
+
import { BaseTableCSSVariables } from '../ali-table/base-table/styles';
|
|
7
8
|
declare module "@tanstack/table-core" {
|
|
8
9
|
interface ColumnMeta<any, any> extends ColumnTable {
|
|
9
10
|
rowSpan?: number;
|
|
@@ -225,13 +226,14 @@ export type ColumnTable<RecordType = AnyObject> = {
|
|
|
225
226
|
getSpanRect?: (value: any, row: any, rowIndex: number) => SpanRect;
|
|
226
227
|
};
|
|
227
228
|
export type ColumnsTable<RecordType = AnyObject> = ColumnTable<RecordType>[];
|
|
229
|
+
export type IFTheme = {
|
|
230
|
+
theme?: 'dark' | 'light';
|
|
231
|
+
backgroundColor?: string;
|
|
232
|
+
cssVariables?: BaseTableCSSVariables;
|
|
233
|
+
};
|
|
228
234
|
export type TableProps<RecordType = AnyObject> = {
|
|
229
235
|
id?: string;
|
|
230
|
-
theme?:
|
|
231
|
-
theme?: 'dark' | 'light';
|
|
232
|
-
backgroundColor?: string;
|
|
233
|
-
color?: string;
|
|
234
|
-
};
|
|
236
|
+
theme?: IFTheme;
|
|
235
237
|
useOuterBorder?: boolean;
|
|
236
238
|
showHeader?: boolean;
|
|
237
239
|
className?: string;
|