@creekjs/web-components 1.0.13 → 1.0.14
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/.turbo/turbo-father$colon$build.log +21 -21
- package/dist/creek-table/SearchTable.d.ts.map +1 -1
- package/dist/creek-table/SearchTable.js +18 -0
- package/dist/creek-table/SearchTable.js.map +2 -2
- package/dist/creek-table/components/EllipsisTooltip.d.ts.map +1 -1
- package/dist/creek-table/components/EllipsisTooltip.js +5 -2
- package/dist/creek-table/components/EllipsisTooltip.js.map +2 -2
- package/dist/creek-table/hooks/useEllipsisColumns.d.ts.map +1 -1
- package/dist/creek-table/hooks/useEllipsisColumns.js +3 -0
- package/dist/creek-table/hooks/useEllipsisColumns.js.map +2 -2
- package/dist/creek-table/hooks/useIndexColumn.js +1 -1
- package/dist/creek-table/hooks/useIndexColumn.js.map +1 -1
- package/package.json +1 -1
- package/src/creek-table/SearchTable.tsx +22 -1
- package/src/creek-table/components/EllipsisTooltip.tsx +5 -2
- package/src/creek-table/hooks/useEllipsisColumns.tsx +5 -0
- package/src/creek-table/hooks/useIndexColumn.tsx +1 -1
|
@@ -1,54 +1,54 @@
|
|
|
1
1
|
|
|
2
2
|
|
|
3
|
-
> @creekjs/web-components@1.0.
|
|
3
|
+
> @creekjs/web-components@1.0.13 father:build /Users/ernestwang/Documents/code-resoorce/creek/packages/web-components
|
|
4
4
|
> father build
|
|
5
5
|
|
|
6
6
|
[36minfo[39m - Clean output directories
|
|
7
7
|
[36minfo[39m - Bundless for [33msrc[39m directory to [33mcjs[39m format
|
|
8
|
-
[35mevent[39m - Bundless [
|
|
9
|
-
[35mevent[39m - Bundless [90mCreekConfigContext.tsx[39m to [90mdist/creek-config-provider/CreekConfigContext.js[39m (with declaration)
|
|
8
|
+
[35mevent[39m - Bundless [90mDrawerHelper.tsx[39m to [90mdist/creek-hooks/useApp/DrawerHelper.js[39m (with declaration)
|
|
10
9
|
[35mevent[39m - Bundless [90mindex.ts[39m to [90mdist/creek-hooks/index.js[39m (with declaration)
|
|
10
|
+
[35mevent[39m - Bundless [90mCreekConfigContext.tsx[39m to [90mdist/creek-config-provider/CreekConfigContext.js[39m (with declaration)
|
|
11
11
|
[35mevent[39m - Bundless [90mCreekI18nProvider.tsx[39m to [90mdist/creek-config-provider/CreekI18nProvider.js[39m (with declaration)
|
|
12
|
-
[35mevent[39m - Bundless [90mDrawerHelper.tsx[39m to [90mdist/creek-hooks/useApp/DrawerHelper.js[39m (with declaration)
|
|
13
|
-
[35mevent[39m - Bundless [90mindex.tsx[39m to [90mdist/creek-hooks/useApp/index.js[39m (with declaration)
|
|
14
12
|
[35mevent[39m - Bundless [90mModalHelper.tsx[39m to [90mdist/creek-hooks/useApp/ModalHelper.js[39m (with declaration)
|
|
13
|
+
[35mevent[39m - Bundless [90mindex.tsx[39m to [90mdist/creek-config-provider/index.js[39m (with declaration)
|
|
15
14
|
[35mevent[39m - Bundless [90mtypes.ts[39m to [90mdist/creek-hooks/useApp/types.js[39m (with declaration)
|
|
15
|
+
[35mevent[39m - Bundless [90museViewportHeight.tsx[39m to [90mdist/creek-hooks/useViewportHeight.js[39m (with declaration)
|
|
16
16
|
[35mevent[39m - Bundless [90mindex.tsx[39m to [90mdist/creek-icon/index.js[39m (with declaration)
|
|
17
17
|
[35mevent[39m - Bundless [90mFullScreen.tsx[39m to [90mdist/creek-layout/ActionRender/FullScreen.js[39m (with declaration)
|
|
18
18
|
[35mevent[39m - Bundless [90mindex.tsx[39m to [90mdist/creek-keep-alive/index.js[39m (with declaration)
|
|
19
|
+
[35mevent[39m - Bundless [90mindex.tsx[39m to [90mdist/creek-layout/Exception/index.js[39m (with declaration)
|
|
19
20
|
[35mevent[39m - Bundless [90mindex.tsx[39m to [90mdist/creek-layout/ActionRender/index.js[39m (with declaration)
|
|
20
|
-
[35mevent[39m - Bundless [
|
|
21
|
+
[35mevent[39m - Bundless [90mindex.tsx[39m to [90mdist/creek-hooks/useApp/index.js[39m (with declaration)
|
|
21
22
|
[35mevent[39m - Bundless [90mLayoutSettings.tsx[39m to [90mdist/creek-layout/ActionRender/LayoutSettings.js[39m (with declaration)
|
|
22
|
-
[35mevent[39m - Bundless [
|
|
23
|
-
[35mevent[39m - Bundless [90mNotFound.tsx[39m to [90mdist/creek-layout/Exception/NotFound.js[39m (with declaration)
|
|
23
|
+
[35mevent[39m - Bundless [90mUserInfo.tsx[39m to [90mdist/creek-layout/ActionRender/UserInfo.js[39m (with declaration)
|
|
24
24
|
[35mevent[39m - Bundless [90mCollapseButton.tsx[39m to [90mdist/creek-layout/CollapseButton.js[39m (with declaration)
|
|
25
|
+
[35mevent[39m - Bundless [90mNotFound.tsx[39m to [90mdist/creek-layout/Exception/NotFound.js[39m (with declaration)
|
|
25
26
|
[35mevent[39m - Bundless [90mNotFoundPage.tsx[39m to [90mdist/creek-layout/Exception/NotFoundPage.js[39m (with declaration)
|
|
26
|
-
[35mevent[39m - Bundless [90mindex.tsx[39m to [90mdist/creek-layout/index.js[39m (with declaration)
|
|
27
27
|
[35mevent[39m - Bundless [90mindex.tsx[39m to [90mdist/creek-loading/index.js[39m (with declaration)
|
|
28
28
|
[35mevent[39m - Bundless [90mindex.tsx[39m to [90mdist/creek-locale-button/index.js[39m (with declaration)
|
|
29
|
+
[35mevent[39m - Bundless [90mindex.tsx[39m to [90mdist/creek-layout/index.js[39m (with declaration)
|
|
29
30
|
[35mevent[39m - Bundless [90mindex.ts[39m to [90mdist/creek-style/index.js[39m (with declaration)
|
|
30
31
|
[35mevent[39m - Bundless [90mscrollbar.ts[39m to [90mdist/creek-style/scrollbar.js[39m (with declaration)
|
|
31
|
-
[35mevent[39m - Bundless [90mindex.tsx[39m to [90mdist/creek-page-container/index.js[39m (with declaration)
|
|
32
|
-
[35mevent[39m - Bundless [90mEllipsisTooltip.tsx[39m to [90mdist/creek-table/components/EllipsisTooltip.js[39m (with declaration)
|
|
33
|
-
[35mevent[39m - Bundless [90mDensityIcon.tsx[39m to [90mdist/creek-table/components/DensityIcon.js[39m (with declaration)
|
|
34
|
-
[35mevent[39m - Bundless [90mindex.ts[39m to [90mdist/creek-table/hooks/index.js[39m (with declaration)
|
|
35
32
|
[35mevent[39m - Bundless [90mindex.tsx[39m to [90mdist/creek-table/components/index.js[39m (with declaration)
|
|
33
|
+
[35mevent[39m - Bundless [90mDensityIcon.tsx[39m to [90mdist/creek-table/components/DensityIcon.js[39m (with declaration)
|
|
34
|
+
[35mevent[39m - Bundless [90museLayoutSettingsStore.ts[39m to [90mdist/creek-layout/useLayoutSettingsStore.js[39m (with declaration)
|
|
36
35
|
[35mevent[39m - Bundless [90museAdaptiveToolBar.tsx[39m to [90mdist/creek-table/hooks/useAdaptiveToolBar.js[39m (with declaration)
|
|
37
|
-
[35mevent[39m - Bundless [
|
|
36
|
+
[35mevent[39m - Bundless [90mEllipsisTooltip.tsx[39m to [90mdist/creek-table/components/EllipsisTooltip.js[39m (with declaration)
|
|
37
|
+
[35mevent[39m - Bundless [90mindex.ts[39m to [90mdist/creek-table/hooks/index.js[39m (with declaration)
|
|
38
38
|
[35mevent[39m - Bundless [90museAutoWidthColumns.tsx[39m to [90mdist/creek-table/hooks/useAutoWidthColumns.js[39m (with declaration)
|
|
39
|
+
[35mevent[39m - Bundless [90museEllipsisColumns.tsx[39m to [90mdist/creek-table/hooks/useEllipsisColumns.js[39m (with declaration)
|
|
39
40
|
[35mevent[39m - Bundless [90museIndexColumn.tsx[39m to [90mdist/creek-table/hooks/useIndexColumn.js[39m (with declaration)
|
|
40
|
-
[35mevent[39m - Bundless [90museResizableColumns.tsx[39m to [90mdist/creek-table/hooks/useResizableColumns.js[39m (with declaration)
|
|
41
41
|
[35mevent[39m - Bundless [90museElementDistance.tsx[39m to [90mdist/creek-table/hooks/useElementDistance.js[39m (with declaration)
|
|
42
42
|
[35mevent[39m - Bundless [90mindex.tsx[39m to [90mdist/creek-table/index.js[39m (with declaration)
|
|
43
|
+
[35mevent[39m - Bundless [90museResizableColumns.tsx[39m to [90mdist/creek-table/hooks/useResizableColumns.js[39m (with declaration)
|
|
43
44
|
[35mevent[39m - Bundless [90museTableOptions.tsx[39m to [90mdist/creek-table/hooks/useTableOptions.js[39m (with declaration)
|
|
45
|
+
[35mevent[39m - Bundless [90museStatusColumns.tsx[39m to [90mdist/creek-table/hooks/useStatusColumns.js[39m (with declaration)
|
|
44
46
|
[35mevent[39m - Bundless [90museTableScrollHeight.tsx[39m to [90mdist/creek-table/hooks/useTableScrollHeight.js[39m (with declaration)
|
|
45
47
|
[35mevent[39m - Bundless [90mtype.ts[39m to [90mdist/creek-table/type.js[39m (with declaration)
|
|
46
|
-
[35mevent[39m - Bundless [
|
|
47
|
-
[35mevent[39m - Bundless [
|
|
48
|
+
[35mevent[39m - Bundless [90mSearchTable.tsx[39m to [90mdist/creek-table/SearchTable.js[39m (with declaration)
|
|
49
|
+
[35mevent[39m - Bundless [90mindex.tsx[39m to [90mdist/creek-page-container/index.js[39m (with declaration)
|
|
48
50
|
[35mevent[39m - Bundless [90mindex.tsx[39m to [90mdist/index.js[39m (with declaration)
|
|
49
|
-
[35mevent[39m - Bundless [90museLayoutSettingsStore.ts[39m to [90mdist/creek-layout/useLayoutSettingsStore.js[39m (with declaration)
|
|
50
51
|
[35mevent[39m - Bundless [90men_US.ts[39m to [90mdist/locales/en_US.js[39m (with declaration)
|
|
51
|
-
[35mevent[39m - Bundless [
|
|
52
|
-
[35mevent[39m - Bundless [90mSearchTable.tsx[39m to [90mdist/creek-table/SearchTable.js[39m (with declaration)
|
|
52
|
+
[35mevent[39m - Bundless [90mzh_CN.ts[39m to [90mdist/locales/zh_CN.js[39m (with declaration)
|
|
53
53
|
[35mevent[39m - Generate declaration files...
|
|
54
|
-
[35mevent[39m - Transformed successfully in
|
|
54
|
+
[35mevent[39m - Transformed successfully in 7610 ms (45 files)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchTable.d.ts","sourceRoot":"","sources":["../../src/creek-table/SearchTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAY,MAAM,4BAA4B,CAAC;AASlE,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAEzC,MAAM,MAAM,uBAAuB,GAAG;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;
|
|
1
|
+
{"version":3,"file":"SearchTable.d.ts","sourceRoot":"","sources":["../../src/creek-table/SearchTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAY,MAAM,4BAA4B,CAAC;AASlE,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAEzC,MAAM,MAAM,uBAAuB,GAAG;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAiFF,eAAO,MAAM,cAAc,0EAA2E,gBAAgB,CAAC,EAAE,CAAC,EAAE,SAAS,CAAC,4CAgFrI,CAAC"}
|
|
@@ -92,6 +92,11 @@ var useStyles = (0, import_antd_style.createStyles)(({ token }, options) => {
|
|
|
92
92
|
padding: token.paddingXS
|
|
93
93
|
}
|
|
94
94
|
},
|
|
95
|
+
// 树形数据展开图标样式
|
|
96
|
+
[`.${prefixCls}-table-row-expand-icon`]: {
|
|
97
|
+
marginInlineEnd: 4,
|
|
98
|
+
flexShrink: 0
|
|
99
|
+
},
|
|
95
100
|
// 如果没有 headerTitle，toolbar 展示在 headerTitle 的区域
|
|
96
101
|
[`.${prefixCls}-pro-table-list-toolbar-right`]: !hasHeaderTitle ? {
|
|
97
102
|
flex: 1
|
|
@@ -119,8 +124,19 @@ var SearchProTable = (props) => {
|
|
|
119
124
|
size,
|
|
120
125
|
headerTitle,
|
|
121
126
|
showIndex = true,
|
|
127
|
+
expandable,
|
|
122
128
|
...restProps
|
|
123
129
|
} = props;
|
|
130
|
+
const finalExpandable = (0, import_react.useMemo)(() => {
|
|
131
|
+
if (!showIndex)
|
|
132
|
+
return expandable;
|
|
133
|
+
if (!expandable)
|
|
134
|
+
return { columnPos: 1 };
|
|
135
|
+
if (expandable.columnPos === void 0) {
|
|
136
|
+
return { ...expandable, columnPos: 1 };
|
|
137
|
+
}
|
|
138
|
+
return expandable;
|
|
139
|
+
}, [expandable, showIndex]);
|
|
124
140
|
const proTableRef = (0, import_react.useRef)(null);
|
|
125
141
|
const [resizedWidths, setResizedWidths] = (0, import_ahooks.useSafeState)({});
|
|
126
142
|
const { finalOptions, tableSize, finalOptionsRender } = (0, import_hooks.useTableOptions)(options, size, optionsRender);
|
|
@@ -141,6 +157,8 @@ var SearchProTable = (props) => {
|
|
|
141
157
|
optionsRender: finalOptionsRender,
|
|
142
158
|
size: tableSize,
|
|
143
159
|
...restProps,
|
|
160
|
+
pagination,
|
|
161
|
+
expandable: finalExpandable,
|
|
144
162
|
className: (0, import_classnames.default)(styles["creek-table-container"], className),
|
|
145
163
|
columns: resizableColumns,
|
|
146
164
|
bordered,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/creek-table/SearchTable.tsx"],
|
|
4
|
-
"sourcesContent": ["import { ParamsType, ProTable } from '@ant-design/pro-components';\nimport { useSafeState } from 'ahooks';\nimport { createStyles } from 'antd-style';\nimport classnames from 'classnames';\nimport { useRef } from 'react';\n\nimport { GlobalScrollbarStyle } from '../creek-style';\nimport { useAutoWidthColumns, useEllipsisColumns, useIndexColumn, useResizableColumns, useTableOptions, useTableScrollHeight } from './hooks';\n\nimport { CreekTableProps } from './type';\n\nexport type SearchTableStyleOptions = {\n prefixCls?: string;\n scrollY?: number;\n tableContainerHeight?: number;\n tableHeight?: number;\n bordered?: boolean;\n hasHeaderTitle?: boolean;\n hasScroll?: boolean;\n};\n\nconst useStyles = createStyles(({ token }, options: SearchTableStyleOptions) => {\n const { prefixCls = 'ant', scrollY, tableHeight, bordered, hasHeaderTitle, tableContainerHeight, hasScroll } = options;\n return {\n 'creek-table-container': {\n overflow: 'hidden',\n position: 'relative',\n height: tableHeight ? `${tableHeight}px` : 'auto',\n backgroundColor: token.colorBgContainer,\n [`.${prefixCls}-table`]: {\n minHeight: `${tableContainerHeight}px`,\n },\n [`.${prefixCls}-table-container`]: {\n borderBottom: 'none',\n overflow: 'hidden'\n },\n \n [`.${prefixCls}-table-header`]: {\n borderRight: (bordered && hasScroll) ? `1px solid ${token.colorBorderSecondary}` : 'none',\n },\n [`.${prefixCls}-table-body`]: {\n overflowY: 'auto',\n maxHeight: `${scrollY}px`,\n borderRight: (bordered && hasScroll) ? `1px solid ${token.colorBorderSecondary}` : 'none',\n },\n // 兼容非 scroll.y 模式下的 table 容器\n [`.${prefixCls}-table-content`]: {\n overflowY: 'hidden',\n maxHeight: scrollY ? `${scrollY}px` : undefined,\n },\n\n [`.${prefixCls}-table-cell-scrollbar`]: {\n boxShadow: bordered ? 'none!important' : 'inherit',\n borderInlineEnd: bordered ? `none!important` : 'none',\n display: hasScroll ? 'table-cell' : 'none',\n width: hasScroll ? 'initial' : '0px!important',\n minWidth: hasScroll ? 'initial' : '0px!important',\n maxWidth: hasScroll ? 'initial' : '0px!important',\n padding: hasScroll ? 'initial' : '0px!important',\n margin: hasScroll ? 'initial' : '0px!important',\n },\n\n [`.${prefixCls}-pagination`]: {\n [`.${prefixCls}-pagination-total-text`]: {\n flex: 1,\n },\n },\n [`.${prefixCls}-pro-table-search`]: {\n marginBlockEnd: 0,\n borderBottom: `1px solid ${token.colorBorderSecondary}`,\n },\n\n [`.${prefixCls}-pro-query-filter-container`]: {\n [`.${prefixCls}-pro-query-filter`]: {\n padding: token.paddingXS,\n },\n },\n\n // 如果没有 headerTitle，toolbar 展示在 headerTitle 的区域\n [`.${prefixCls}-pro-table-list-toolbar-right`]: !hasHeaderTitle\n ? {\n flex: 1,\n }\n : {},\n [`.${prefixCls}-pro-table-list-toolbar-setting-items`]: !hasHeaderTitle\n ? {\n marginLeft: 'auto',\n }\n : {},\n },\n };\n});\n\n// 独立的 ProTable 组件\nexport const SearchProTable = <T extends ParamsType, U extends ParamsType, ValueType = 'text'>(props: CreekTableProps<T, U, ValueType>) => {\n const {\n columns,\n prefixCls = 'ant',\n className,\n optionsRender,\n tableViewRender,\n pagination,\n pageFixedBottom = true,\n pageFixedBottomConfig,\n resizable = true,\n bordered = true,\n options,\n size,\n headerTitle,\n showIndex = true,\n ...restProps\n } = props;\n\n const proTableRef = useRef<HTMLDivElement>(null);\n\n // 状态提升：管理列宽调整状态，以便 useAutoWidthColumns 能感知到\n const [resizedWidths, setResizedWidths] = useSafeState<Record<string, number>>({});\n\n // 使用自定义 Hook 管理 options 和 size\n const { finalOptions, tableSize, finalOptionsRender } = useTableOptions<T, U, ValueType>(options, size, optionsRender);\n\n const columnsWithIndex = useIndexColumn<T, ValueType>(columns, showIndex);\n\n // 处理 columns，默认开启 ellipsis\n const processedColumns = useEllipsisColumns(columnsWithIndex);\n\n const { columns: adaptiveColumns, totalWidth } = useAutoWidthColumns<T, ValueType>(processedColumns, proTableRef, resizedWidths, bordered, tableSize);\n\n const { columns: resizableColumns, components } = useResizableColumns<T, ValueType>(adaptiveColumns, resizable, resizedWidths, setResizedWidths, proTableRef);\n\n const { scrollY, tableHeight, tableContainerHeight, hasScroll } = useTableScrollHeight(prefixCls, proTableRef, pageFixedBottom, pageFixedBottomConfig?.bottomFix);\n\n const { styles } = useStyles({ scrollY, tableHeight, prefixCls, bordered, hasHeaderTitle: !!headerTitle, tableContainerHeight, hasScroll });\n\n\n return (\n <div ref={proTableRef}>\n <GlobalScrollbarStyle />\n {/* 自定义滚动条 */}\n <ProTable<T, U, ValueType>\n components={components}\n headerTitle={headerTitle}\n options={finalOptions}\n optionsRender={finalOptionsRender}\n size={tableSize}\n {...restProps}\n className={classnames(styles['creek-table-container'], className)}\n columns={resizableColumns}\n bordered={bordered}\n scroll={{\n y: hasScroll ? scrollY || restProps.scroll?.y : undefined,\n x: totalWidth ?? restProps.scroll?.x,\n }}\n toolbar={{\n ...restProps.toolbar,\n }}\n />\n </div>\n );\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAAqC;AACrC,oBAA6B;AAC7B,wBAA6B;AAC7B,wBAAuB;AACvB,
|
|
4
|
+
"sourcesContent": ["import { ParamsType, ProTable } from '@ant-design/pro-components';\nimport { useSafeState } from 'ahooks';\nimport { createStyles } from 'antd-style';\nimport classnames from 'classnames';\nimport { useMemo, useRef } from 'react';\n\nimport { GlobalScrollbarStyle } from '../creek-style';\nimport { useAutoWidthColumns, useEllipsisColumns, useIndexColumn, useResizableColumns, useTableOptions, useTableScrollHeight } from './hooks';\n\nimport { CreekTableProps } from './type';\n\nexport type SearchTableStyleOptions = {\n prefixCls?: string;\n scrollY?: number;\n tableContainerHeight?: number;\n tableHeight?: number;\n bordered?: boolean;\n hasHeaderTitle?: boolean;\n hasScroll?: boolean;\n};\n\nconst useStyles = createStyles(({ token }, options: SearchTableStyleOptions) => {\n const { prefixCls = 'ant', scrollY, tableHeight, bordered, hasHeaderTitle, tableContainerHeight, hasScroll } = options;\n return {\n 'creek-table-container': {\n overflow: 'hidden',\n position: 'relative',\n height: tableHeight ? `${tableHeight}px` : 'auto',\n backgroundColor: token.colorBgContainer,\n [`.${prefixCls}-table`]: {\n minHeight: `${tableContainerHeight}px`,\n },\n [`.${prefixCls}-table-container`]: {\n borderBottom: 'none',\n overflow: 'hidden'\n },\n \n [`.${prefixCls}-table-header`]: {\n borderRight: (bordered && hasScroll) ? `1px solid ${token.colorBorderSecondary}` : 'none',\n },\n [`.${prefixCls}-table-body`]: {\n overflowY: 'auto',\n maxHeight: `${scrollY}px`,\n borderRight: (bordered && hasScroll) ? `1px solid ${token.colorBorderSecondary}` : 'none',\n },\n // 兼容非 scroll.y 模式下的 table 容器\n [`.${prefixCls}-table-content`]: {\n overflowY: 'hidden',\n maxHeight: scrollY ? `${scrollY}px` : undefined,\n },\n\n [`.${prefixCls}-table-cell-scrollbar`]: {\n boxShadow: bordered ? 'none!important' : 'inherit',\n borderInlineEnd: bordered ? `none!important` : 'none',\n display: hasScroll ? 'table-cell' : 'none',\n width: hasScroll ? 'initial' : '0px!important',\n minWidth: hasScroll ? 'initial' : '0px!important',\n maxWidth: hasScroll ? 'initial' : '0px!important',\n padding: hasScroll ? 'initial' : '0px!important',\n margin: hasScroll ? 'initial' : '0px!important',\n },\n\n [`.${prefixCls}-pagination`]: {\n [`.${prefixCls}-pagination-total-text`]: {\n flex: 1,\n },\n },\n [`.${prefixCls}-pro-table-search`]: {\n marginBlockEnd: 0,\n borderBottom: `1px solid ${token.colorBorderSecondary}`,\n },\n\n [`.${prefixCls}-pro-query-filter-container`]: {\n [`.${prefixCls}-pro-query-filter`]: {\n padding: token.paddingXS,\n },\n },\n\n // 树形数据展开图标样式\n [`.${prefixCls}-table-row-expand-icon`]: {\n marginInlineEnd: 4,\n flexShrink: 0,\n },\n\n // 如果没有 headerTitle，toolbar 展示在 headerTitle 的区域\n [`.${prefixCls}-pro-table-list-toolbar-right`]: !hasHeaderTitle\n ? {\n flex: 1,\n }\n : {},\n [`.${prefixCls}-pro-table-list-toolbar-setting-items`]: !hasHeaderTitle\n ? {\n marginLeft: 'auto',\n }\n : {},\n },\n };\n});\n\n// 独立的 ProTable 组件\nexport const SearchProTable = <T extends ParamsType, U extends ParamsType, ValueType = 'text'>(props: CreekTableProps<T, U, ValueType>) => {\n const {\n columns,\n prefixCls = 'ant',\n className,\n optionsRender,\n tableViewRender,\n pagination,\n pageFixedBottom = true,\n pageFixedBottomConfig,\n resizable = true,\n bordered = true,\n options,\n size,\n headerTitle,\n showIndex = true,\n expandable,\n ...restProps\n } = props;\n\n // 当序号列存在时，将树形展开控件从序号列（第一列 pos=0）移到第一个数据列（pos=1），\n // 避免序号列宽度不足以容纳树形缩进和展开图标导致显示异常\n // 即使 expandable 未提供，也预设 columnPos，因为 Ant Design Table 会自动检测 children 字段开启树形模式\n const finalExpandable = useMemo(() => {\n if (!showIndex) return expandable;\n if (!expandable) return { columnPos: 1 };\n if ((expandable as any).columnPos === undefined) {\n return { ...expandable, columnPos: 1 };\n }\n return expandable;\n }, [expandable, showIndex]);\n\n const proTableRef = useRef<HTMLDivElement>(null);\n\n // 状态提升：管理列宽调整状态，以便 useAutoWidthColumns 能感知到\n const [resizedWidths, setResizedWidths] = useSafeState<Record<string, number>>({});\n\n // 使用自定义 Hook 管理 options 和 size\n const { finalOptions, tableSize, finalOptionsRender } = useTableOptions<T, U, ValueType>(options, size, optionsRender);\n\n const columnsWithIndex = useIndexColumn<T, ValueType>(columns, showIndex);\n\n // 处理 columns，默认开启 ellipsis\n const processedColumns = useEllipsisColumns(columnsWithIndex);\n\n const { columns: adaptiveColumns, totalWidth } = useAutoWidthColumns<T, ValueType>(processedColumns, proTableRef, resizedWidths, bordered, tableSize);\n\n const { columns: resizableColumns, components } = useResizableColumns<T, ValueType>(adaptiveColumns, resizable, resizedWidths, setResizedWidths, proTableRef);\n\n const { scrollY, tableHeight, tableContainerHeight, hasScroll } = useTableScrollHeight(prefixCls, proTableRef, pageFixedBottom, pageFixedBottomConfig?.bottomFix);\n\n const { styles } = useStyles({ scrollY, tableHeight, prefixCls, bordered, hasHeaderTitle: !!headerTitle, tableContainerHeight, hasScroll });\n\n\n return (\n <div ref={proTableRef}>\n <GlobalScrollbarStyle />\n {/* 自定义滚动条 */}\n <ProTable<T, U, ValueType>\n components={components}\n headerTitle={headerTitle}\n options={finalOptions}\n optionsRender={finalOptionsRender}\n size={tableSize}\n {...restProps}\n pagination={pagination}\n expandable={finalExpandable}\n className={classnames(styles['creek-table-container'], className)}\n columns={resizableColumns}\n bordered={bordered}\n scroll={{\n y: hasScroll ? scrollY || restProps.scroll?.y : undefined,\n x: totalWidth ?? restProps.scroll?.x,\n }}\n toolbar={{\n ...restProps.toolbar,\n }}\n />\n </div>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["classnames"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EllipsisTooltip.d.ts","sourceRoot":"","sources":["../../../src/creek-table/components/EllipsisTooltip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAkD,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"EllipsisTooltip.d.ts","sourceRoot":"","sources":["../../../src/creek-table/components/EllipsisTooltip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAsCvE;;;;GAIG;AACH,eAAO,MAAM,eAAe;cAA8B,MAAM,SAAS;6CAwExE,CAAC"}
|
|
@@ -41,12 +41,15 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
41
41
|
var useStyles = (0, import_antd_style.createStyles)(({ css, token }) => {
|
|
42
42
|
return {
|
|
43
43
|
text: css`
|
|
44
|
-
width: 100%;
|
|
44
|
+
max-width: 100%;
|
|
45
45
|
margin: 0;
|
|
46
46
|
padding: 0;
|
|
47
|
-
// Ensure the wrapper behaves like a block/inline-block that can have width
|
|
48
47
|
display: block;
|
|
49
48
|
overflow: hidden;
|
|
49
|
+
// flex: 1 确保在树形表格的 flex 单元格中填充剩余空间（展开图标/层级缩进之后）
|
|
50
|
+
// min-width: 0 允许收缩以配合 Typography.Text 的 ellipsis 截断
|
|
51
|
+
flex: 1;
|
|
52
|
+
min-width: 0;
|
|
50
53
|
`,
|
|
51
54
|
tooltipContent: css`
|
|
52
55
|
max-width: 500px;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/creek-table/components/EllipsisTooltip.tsx"],
|
|
4
|
-
"sourcesContent": ["import { CopyOutlined } from '@ant-design/icons';\nimport { ConfigProvider, Flex, Tooltip, Typography, message } from 'antd';\nimport { createStyles } from 'antd-style';\nimport React, { useContext, useEffect, useRef, useState } from 'react';\n\nimport { useT } from '@creekjs/i18n/react';\n\nconst useStyles = createStyles(({ css, token }) => {\n return {\n text: css`\n width: 100%;\n margin: 0;\n padding: 0;\n //
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA6B;AAC7B,kBAAmE;AACnE,wBAA6B;AAC7B,mBAA+D;AAE/D,IAAAA,gBAAqB;
|
|
4
|
+
"sourcesContent": ["import { CopyOutlined } from '@ant-design/icons';\nimport { ConfigProvider, Flex, Tooltip, Typography, message } from 'antd';\nimport { createStyles } from 'antd-style';\nimport React, { useContext, useEffect, useRef, useState } from 'react';\n\nimport { useT } from '@creekjs/i18n/react';\n\nconst useStyles = createStyles(({ css, token }) => {\n return {\n text: css`\n max-width: 100%;\n margin: 0;\n padding: 0;\n display: block;\n overflow: hidden;\n // flex: 1 确保在树形表格的 flex 单元格中填充剩余空间（展开图标/层级缩进之后）\n // min-width: 0 允许收缩以配合 Typography.Text 的 ellipsis 截断\n flex: 1;\n min-width: 0;\n `,\n tooltipContent: css`\n max-width: 500px;\n max-height: 300px;\n overflow-y: auto;\n `,\n tooltipText: css`\n word-break: break-all;\n white-space: pre-wrap;\n `,\n copyIcon: css`\n cursor: pointer;\n color: inherit;\n transition: color 0.2s;\n\n &:hover {\n color: ${token.colorPrimary};\n }\n `,\n };\n});\n\n/**\n * 使用 Antd Typography 组件实现省略提示\n * 修复了 findDOMNode 警告问题：通过显式使用 Tooltip 包裹 div 容器\n * 实现了智能提示：只有内容实际溢出时才显示 Tooltip\n */\nexport const EllipsisTooltip = ({ children }: { children: React.ReactNode }) => {\n const t = useT();\n\n const { styles } = useStyles();\n const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);\n const textRef = useRef<HTMLDivElement>(null);\n const [isEllipsis, setIsEllipsis] = useState(false);\n const isSimpleContent = typeof children === 'string' || typeof children === 'number';\n\n useEffect(() => {\n const checkEllipsis = () => {\n if (textRef.current) {\n const prefixCls = getPrefixCls('typography');\n // Typography.Text renders a span or div with .ant-typography\n const typographyEl = textRef.current.querySelector(`.${prefixCls}`);\n if (typographyEl) {\n // For simple ellipsis={true}, Antd uses CSS ellipsis.\n // We can detect if it's truncated by comparing scrollWidth and clientWidth\n // We add a small buffer (1px) for browser sub-pixel rendering differences\n setIsEllipsis(typographyEl.scrollWidth > typographyEl.clientWidth + 1);\n }\n }\n };\n\n // Initial check\n checkEllipsis();\n // Use ResizeObserver for more robust size change detection\n const observer = new ResizeObserver(checkEllipsis);\n if (textRef.current) {\n observer.observe(textRef.current);\n }\n\n return () => {\n observer.disconnect();\n };\n }, [children]);\n\n const text = String(children);\n\n const handleCopy = (e: React.MouseEvent) => {\n e.stopPropagation();\n e.preventDefault();\n navigator.clipboard\n .writeText(text)\n .then(() => {\n message.success(t('creek-table.components.EllipsisTooltip.fuZhiChengGong', '复制成功'));\n })\n .catch(() => {\n message.error(t('creek-table.components.EllipsisTooltip.fuZhiShiBai', '复制失败'));\n });\n };\n\n // Memoize tooltip title content\n const tooltipTitle = React.useMemo(() => {\n if (!isSimpleContent) {\n return children;\n }\n return (\n <Flex align=\"center\" gap={8} className={styles.tooltipContent}>\n <span className={styles.tooltipText}>{children}</span>\n <CopyOutlined onClick={handleCopy} className={styles.copyIcon} title={t('creek-table.components.EllipsisTooltip.fuZhi', '复制')} />\n </Flex>\n );\n }, [children, isSimpleContent]);\n\n return (\n <Tooltip title={isEllipsis ? tooltipTitle : undefined} placement=\"topLeft\" mouseLeaveDelay={0.2} getPopupContainer={() => document.body}>\n <div ref={textRef} className={styles.text}>\n <Typography.Text ellipsis={true}>{children}</Typography.Text>\n </div>\n </Tooltip>\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA6B;AAC7B,kBAAmE;AACnE,wBAA6B;AAC7B,mBAA+D;AAE/D,IAAAA,gBAAqB;AAmGf;AAjGN,IAAM,gBAAY,gCAAa,CAAC,EAAE,KAAK,MAAM,MAAM;AACjD,SAAO;AAAA,IACL,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWN,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,IAKhB,aAAa;AAAA;AAAA;AAAA;AAAA,IAIb,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAMG,MAAM;AAAA;AAAA;AAAA,EAGrB;AACF,CAAC;AAOM,IAAM,kBAAkB,CAAC,EAAE,SAAS,MAAqC;AAC9E,QAAM,QAAI,oBAAK;AAEf,QAAM,EAAE,OAAO,IAAI,UAAU;AAC7B,QAAM,EAAE,aAAa,QAAI,yBAAW,2BAAe,aAAa;AAChE,QAAM,cAAU,qBAAuB,IAAI;AAC3C,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAClD,QAAM,kBAAkB,OAAO,aAAa,YAAY,OAAO,aAAa;AAE5E,8BAAU,MAAM;AACd,UAAM,gBAAgB,MAAM;AAC1B,UAAI,QAAQ,SAAS;AACnB,cAAM,YAAY,aAAa,YAAY;AAE3C,cAAM,eAAe,QAAQ,QAAQ,cAAc,IAAI,WAAW;AAClE,YAAI,cAAc;AAIhB,wBAAc,aAAa,cAAc,aAAa,cAAc,CAAC;AAAA,QACvE;AAAA,MACF;AAAA,IACF;AAGA,kBAAc;AAEd,UAAM,WAAW,IAAI,eAAe,aAAa;AACjD,QAAI,QAAQ,SAAS;AACnB,eAAS,QAAQ,QAAQ,OAAO;AAAA,IAClC;AAEA,WAAO,MAAM;AACX,eAAS,WAAW;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,OAAO,OAAO,QAAQ;AAE5B,QAAM,aAAa,CAAC,MAAwB;AAC1C,MAAE,gBAAgB;AAClB,MAAE,eAAe;AACjB,cAAU,UACP,UAAU,IAAI,EACd,KAAK,MAAM;AACV,0BAAQ,QAAQ,EAAE,yDAAyD,MAAM,CAAC;AAAA,IACpF,CAAC,EACA,MAAM,MAAM;AACX,0BAAQ,MAAM,EAAE,sDAAsD,MAAM,CAAC;AAAA,IAC/E,CAAC;AAAA,EACL;AAGA,QAAM,eAAe,aAAAC,QAAM,QAAQ,MAAM;AACvC,QAAI,CAAC,iBAAiB;AACpB,aAAO;AAAA,IACT;AACA,WACE,6CAAC,oBAAK,OAAM,UAAS,KAAK,GAAG,WAAW,OAAO,gBAC7C;AAAA,kDAAC,UAAK,WAAW,OAAO,aAAc,UAAS;AAAA,MAC/C,4CAAC,6BAAa,SAAS,YAAY,WAAW,OAAO,UAAU,OAAO,EAAE,gDAAgD,IAAI,GAAG;AAAA,OACjI;AAAA,EAEJ,GAAG,CAAC,UAAU,eAAe,CAAC;AAE9B,SACE,4CAAC,uBAAQ,OAAO,aAAa,eAAe,QAAW,WAAU,WAAU,iBAAiB,KAAK,mBAAmB,MAAM,SAAS,MACjI,sDAAC,SAAI,KAAK,SAAS,WAAW,OAAO,MACnC,sDAAC,uBAAW,MAAX,EAAgB,UAAU,MAAO,UAAS,GAC7C,GACF;AAEJ;",
|
|
6
6
|
"names": ["import_react", "React"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useEllipsisColumns.d.ts","sourceRoot":"","sources":["../../../src/creek-table/hooks/useEllipsisColumns.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAIzE;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,sDACpB,WAAW,CAAC,EAAE,SAAS,CAAC,EAAE,GAAG,SAAS,
|
|
1
|
+
{"version":3,"file":"useEllipsisColumns.d.ts","sourceRoot":"","sources":["../../../src/creek-table/hooks/useEllipsisColumns.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAIzE;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,sDACpB,WAAW,CAAC,EAAE,SAAS,CAAC,EAAE,GAAG,SAAS,2CAwChD,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/creek-table/hooks/useEllipsisColumns.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { ParamsType, ProColumns } from '@ant-design/pro-components';\nimport React, { useMemo } from 'react';\nimport { EllipsisTooltip } from '../components';\n\n/**\n * 默认开启 ellipsis 的 Hook\n * 1. 如果用户未配置 ellipsis，默认开启，并使用 Tooltip 显示完整内容\n * 2. 如果是 option 列，默认不开启\n * 3. 尊重用户配置\n */\nexport const useEllipsisColumns = <T extends ParamsType, ValueType = 'text'>(\n columns: ProColumns<T, ValueType>[] | undefined,\n) => {\n const processedColumns = useMemo(() => {\n return columns?.map((col) => {\n // 对于操作列，默认不开启 ellipsis\n if (col.valueType === 'option') {\n return col;\n }\n // 其他列默认开启 ellipsis，并使用自定义渲染\n return {\n ...col,\n // 关闭 Table 自带的 ellipsis title，因为我们要用自己的 Tooltip\n // 但保留 ellipsis 属性以确保 Table 传递正确的样式给 cell（虽然我们的 EllipsisTooltip 也有样式）\n // 实际上，为了让 EllipsisTooltip 占据 100% 宽度并生效，最好让 Table cell 也保持一定的约束\n ellipsis: {\n showTitle: false,\n },\n render: (dom: React.ReactNode, entity: T, index: number, action: any, schema: any) => {\n const originalRenderResult = col.render ? (col.render(dom, entity, index, action, schema) as React.ReactNode) : dom;\n \n // 如果内容为空，直接返回\n if (originalRenderResult === null || originalRenderResult === undefined || originalRenderResult === '') {\n return originalRenderResult;\n }\n\n // 如果是简单的文本或数字，使用 EllipsisTooltip 包裹\n return (\n <EllipsisTooltip>{originalRenderResult}</EllipsisTooltip>\n );\n },\n } as ProColumns<T, ValueType>;\n });\n }, [columns]);\n\n return processedColumns;\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA+B;AAC/B,wBAAgC;
|
|
4
|
+
"sourcesContent": ["import type { ParamsType, ProColumns } from '@ant-design/pro-components';\nimport React, { useMemo } from 'react';\nimport { EllipsisTooltip } from '../components';\n\n/**\n * 默认开启 ellipsis 的 Hook\n * 1. 如果用户未配置 ellipsis，默认开启，并使用 Tooltip 显示完整内容\n * 2. 如果是 option 列，默认不开启\n * 3. 尊重用户配置\n */\nexport const useEllipsisColumns = <T extends ParamsType, ValueType = 'text'>(\n columns: ProColumns<T, ValueType>[] | undefined,\n) => {\n const processedColumns = useMemo(() => {\n return columns?.map((col) => {\n // 对于操作列，默认不开启 ellipsis\n if (col.valueType === 'option') {\n return col;\n }\n // 对于 disable 的列（如序号列），不包裹 EllipsisTooltip\n // 避免 EllipsisTooltip 的 width:100% div 与展开图标争抢空间导致重叠\n if (col.disable) {\n return col;\n }\n // 其他列默认开启 ellipsis，并使用自定义渲染\n return {\n ...col,\n // 关闭 Table 自带的 ellipsis title，因为我们要用自己的 Tooltip\n // 但保留 ellipsis 属性以确保 Table 传递正确的样式给 cell（虽然我们的 EllipsisTooltip 也有样式）\n // 实际上，为了让 EllipsisTooltip 占据 100% 宽度并生效，最好让 Table cell 也保持一定的约束\n ellipsis: {\n showTitle: false,\n },\n render: (dom: React.ReactNode, entity: T, index: number, action: any, schema: any) => {\n const originalRenderResult = col.render ? (col.render(dom, entity, index, action, schema) as React.ReactNode) : dom;\n \n // 如果内容为空，直接返回\n if (originalRenderResult === null || originalRenderResult === undefined || originalRenderResult === '') {\n return originalRenderResult;\n }\n\n // 如果是简单的文本或数字，使用 EllipsisTooltip 包裹\n return (\n <EllipsisTooltip>{originalRenderResult}</EllipsisTooltip>\n );\n },\n } as ProColumns<T, ValueType>;\n });\n }, [columns]);\n\n return processedColumns;\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA+B;AAC/B,wBAAgC;AAyCpB;AAjCL,IAAM,qBAAqB,CAChC,YACG;AACH,QAAM,uBAAmB,sBAAQ,MAAM;AACrC,WAAO,mCAAS,IAAI,CAAC,QAAQ;AAE3B,UAAI,IAAI,cAAc,UAAU;AAC9B,eAAO;AAAA,MACT;AAGA,UAAI,IAAI,SAAS;AACf,eAAO;AAAA,MACT;AAEA,aAAO;AAAA,QACL,GAAG;AAAA;AAAA;AAAA;AAAA,QAIH,UAAU;AAAA,UACR,WAAW;AAAA,QACb;AAAA,QACA,QAAQ,CAAC,KAAsB,QAAW,OAAe,QAAa,WAAgB;AACpF,gBAAM,uBAAuB,IAAI,SAAU,IAAI,OAAO,KAAK,QAAQ,OAAO,QAAQ,MAAM,IAAwB;AAGhH,cAAI,yBAAyB,QAAQ,yBAAyB,UAAa,yBAAyB,IAAI;AACtG,mBAAO;AAAA,UACT;AAGA,iBACE,4CAAC,qCAAiB,gCAAqB;AAAA,QAE3C;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAEZ,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/creek-table/hooks/useIndexColumn.tsx"],
|
|
4
|
-
"sourcesContent": ["import { ProColumns } from '@ant-design/pro-components';\nimport { useMemo } from 'react';\n\nimport { useT } from '@creekjs/i18n/react';\n\nexport const useIndexColumn = <T = any, ValueType = 'text'>(columns: ProColumns<T, ValueType>[] = [], showIndex: boolean = true) => {\n const t = useT();\n\n return useMemo(() => {\n if (!showIndex) {\n return columns;\n }\n const indexColumn: ProColumns<T, ValueType> = {\n title: t('creek-table.hooks.useIndexColumn.xuHao', '序号'),\n dataIndex: 'index',\n width:
|
|
4
|
+
"sourcesContent": ["import { ProColumns } from '@ant-design/pro-components';\nimport { useMemo } from 'react';\n\nimport { useT } from '@creekjs/i18n/react';\n\nexport const useIndexColumn = <T = any, ValueType = 'text'>(columns: ProColumns<T, ValueType>[] = [], showIndex: boolean = true) => {\n const t = useT();\n\n return useMemo(() => {\n if (!showIndex) {\n return columns;\n }\n const indexColumn: ProColumns<T, ValueType> = {\n title: t('creek-table.hooks.useIndexColumn.xuHao', '序号'),\n dataIndex: 'index',\n width: 56,\n fixed: 'left',\n disable: true,\n hideInSearch: true,\n render: (dom, entity, index, action, schema) => {\n const { current = 1, pageSize = 20 } = action?.pageInfo || {};\n return (current - 1) * pageSize + index + 1;\n },\n };\n return [indexColumn, ...columns];\n }, [columns, showIndex, t]);\n};\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAwB;AAExB,IAAAA,gBAAqB;AAEd,IAAM,iBAAiB,CAA8B,UAAsC,CAAC,GAAG,YAAqB,SAAS;AAClI,QAAM,QAAI,oBAAK;AAEf,aAAO,sBAAQ,MAAM;AACnB,QAAI,CAAC,WAAW;AACd,aAAO;AAAA,IACT;AACA,UAAM,cAAwC;AAAA,MAC5C,OAAO,EAAE,0CAA0C,IAAI;AAAA,MACvD,WAAW;AAAA,MACX,OAAO;AAAA,MACP,OAAO;AAAA,MACP,SAAS;AAAA,MACT,cAAc;AAAA,MACd,QAAQ,CAAC,KAAK,QAAQ,OAAO,QAAQ,WAAW;AAC9C,cAAM,EAAE,UAAU,GAAG,WAAW,GAAG,KAAI,iCAAQ,aAAY,CAAC;AAC5D,gBAAQ,UAAU,KAAK,WAAW,QAAQ;AAAA,MAC5C;AAAA,IACF;AACA,WAAO,CAAC,aAAa,GAAG,OAAO;AAAA,EACjC,GAAG,CAAC,SAAS,WAAW,CAAC,CAAC;AAC5B;",
|
|
6
6
|
"names": ["import_react"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@ import { ParamsType, ProTable } from '@ant-design/pro-components';
|
|
|
2
2
|
import { useSafeState } from 'ahooks';
|
|
3
3
|
import { createStyles } from 'antd-style';
|
|
4
4
|
import classnames from 'classnames';
|
|
5
|
-
import { useRef } from 'react';
|
|
5
|
+
import { useMemo, useRef } from 'react';
|
|
6
6
|
|
|
7
7
|
import { GlobalScrollbarStyle } from '../creek-style';
|
|
8
8
|
import { useAutoWidthColumns, useEllipsisColumns, useIndexColumn, useResizableColumns, useTableOptions, useTableScrollHeight } from './hooks';
|
|
@@ -76,6 +76,12 @@ const useStyles = createStyles(({ token }, options: SearchTableStyleOptions) =>
|
|
|
76
76
|
},
|
|
77
77
|
},
|
|
78
78
|
|
|
79
|
+
// 树形数据展开图标样式
|
|
80
|
+
[`.${prefixCls}-table-row-expand-icon`]: {
|
|
81
|
+
marginInlineEnd: 4,
|
|
82
|
+
flexShrink: 0,
|
|
83
|
+
},
|
|
84
|
+
|
|
79
85
|
// 如果没有 headerTitle，toolbar 展示在 headerTitle 的区域
|
|
80
86
|
[`.${prefixCls}-pro-table-list-toolbar-right`]: !hasHeaderTitle
|
|
81
87
|
? {
|
|
@@ -108,9 +114,22 @@ export const SearchProTable = <T extends ParamsType, U extends ParamsType, Value
|
|
|
108
114
|
size,
|
|
109
115
|
headerTitle,
|
|
110
116
|
showIndex = true,
|
|
117
|
+
expandable,
|
|
111
118
|
...restProps
|
|
112
119
|
} = props;
|
|
113
120
|
|
|
121
|
+
// 当序号列存在时，将树形展开控件从序号列（第一列 pos=0）移到第一个数据列（pos=1），
|
|
122
|
+
// 避免序号列宽度不足以容纳树形缩进和展开图标导致显示异常
|
|
123
|
+
// 即使 expandable 未提供，也预设 columnPos，因为 Ant Design Table 会自动检测 children 字段开启树形模式
|
|
124
|
+
const finalExpandable = useMemo(() => {
|
|
125
|
+
if (!showIndex) return expandable;
|
|
126
|
+
if (!expandable) return { columnPos: 1 };
|
|
127
|
+
if ((expandable as any).columnPos === undefined) {
|
|
128
|
+
return { ...expandable, columnPos: 1 };
|
|
129
|
+
}
|
|
130
|
+
return expandable;
|
|
131
|
+
}, [expandable, showIndex]);
|
|
132
|
+
|
|
114
133
|
const proTableRef = useRef<HTMLDivElement>(null);
|
|
115
134
|
|
|
116
135
|
// 状态提升：管理列宽调整状态，以便 useAutoWidthColumns 能感知到
|
|
@@ -144,6 +163,8 @@ export const SearchProTable = <T extends ParamsType, U extends ParamsType, Value
|
|
|
144
163
|
optionsRender={finalOptionsRender}
|
|
145
164
|
size={tableSize}
|
|
146
165
|
{...restProps}
|
|
166
|
+
pagination={pagination}
|
|
167
|
+
expandable={finalExpandable}
|
|
147
168
|
className={classnames(styles['creek-table-container'], className)}
|
|
148
169
|
columns={resizableColumns}
|
|
149
170
|
bordered={bordered}
|
|
@@ -8,12 +8,15 @@ import { useT } from '@creekjs/i18n/react';
|
|
|
8
8
|
const useStyles = createStyles(({ css, token }) => {
|
|
9
9
|
return {
|
|
10
10
|
text: css`
|
|
11
|
-
width: 100%;
|
|
11
|
+
max-width: 100%;
|
|
12
12
|
margin: 0;
|
|
13
13
|
padding: 0;
|
|
14
|
-
// Ensure the wrapper behaves like a block/inline-block that can have width
|
|
15
14
|
display: block;
|
|
16
15
|
overflow: hidden;
|
|
16
|
+
// flex: 1 确保在树形表格的 flex 单元格中填充剩余空间（展开图标/层级缩进之后）
|
|
17
|
+
// min-width: 0 允许收缩以配合 Typography.Text 的 ellipsis 截断
|
|
18
|
+
flex: 1;
|
|
19
|
+
min-width: 0;
|
|
17
20
|
`,
|
|
18
21
|
tooltipContent: css`
|
|
19
22
|
max-width: 500px;
|
|
@@ -17,6 +17,11 @@ export const useEllipsisColumns = <T extends ParamsType, ValueType = 'text'>(
|
|
|
17
17
|
if (col.valueType === 'option') {
|
|
18
18
|
return col;
|
|
19
19
|
}
|
|
20
|
+
// 对于 disable 的列（如序号列），不包裹 EllipsisTooltip
|
|
21
|
+
// 避免 EllipsisTooltip 的 width:100% div 与展开图标争抢空间导致重叠
|
|
22
|
+
if (col.disable) {
|
|
23
|
+
return col;
|
|
24
|
+
}
|
|
20
25
|
// 其他列默认开启 ellipsis，并使用自定义渲染
|
|
21
26
|
return {
|
|
22
27
|
...col,
|
|
@@ -13,7 +13,7 @@ export const useIndexColumn = <T = any, ValueType = 'text'>(columns: ProColumns<
|
|
|
13
13
|
const indexColumn: ProColumns<T, ValueType> = {
|
|
14
14
|
title: t('creek-table.hooks.useIndexColumn.xuHao', '序号'),
|
|
15
15
|
dataIndex: 'index',
|
|
16
|
-
width:
|
|
16
|
+
width: 56,
|
|
17
17
|
fixed: 'left',
|
|
18
18
|
disable: true,
|
|
19
19
|
hideInSearch: true,
|