@creekjs/web-components 1.0.1 → 1.0.3
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/.fatherrc.ts +1 -5
- package/.turbo/turbo-father$colon$build.log +5 -0
- package/.turbo/turbo-father$colon$dev.log +33 -0
- package/dist/creek-config-provider/CreekConfigContext.js +31 -2
- package/dist/creek-config-provider/CreekConfigContext.js.map +7 -0
- package/dist/creek-config-provider/index.js +35 -13
- package/dist/creek-config-provider/index.js.map +7 -0
- package/dist/creek-hooks/index.d.ts +1 -0
- package/dist/creek-hooks/index.js +26 -1
- package/dist/creek-hooks/index.js.map +7 -0
- package/dist/creek-hooks/useApp/DrawerHelper.d.ts +9 -0
- package/dist/creek-hooks/useApp/DrawerHelper.js +62 -0
- package/dist/creek-hooks/useApp/DrawerHelper.js.map +7 -0
- package/dist/creek-hooks/useApp/ModalHelper.d.ts +9 -0
- package/dist/creek-hooks/useApp/ModalHelper.js +62 -0
- package/dist/creek-hooks/useApp/ModalHelper.js.map +7 -0
- package/dist/creek-hooks/useApp/index.d.ts +25 -0
- package/dist/creek-hooks/useApp/index.js +118 -0
- package/dist/creek-hooks/useApp/index.js.map +7 -0
- package/dist/creek-hooks/useApp/types.d.ts +26 -0
- package/dist/creek-hooks/useApp/types.js +18 -0
- package/dist/creek-hooks/useApp/types.js.map +7 -0
- package/dist/creek-hooks/useViewportHeight.js +99 -96
- package/dist/creek-hooks/useViewportHeight.js.map +7 -0
- package/dist/creek-icon/index.js +53 -31
- package/dist/creek-icon/index.js.map +7 -0
- package/dist/creek-keep-alive/index.js +36 -18
- package/dist/creek-keep-alive/index.js.map +7 -0
- package/dist/creek-layout/CollapseButton.js +69 -47
- package/dist/creek-layout/CollapseButton.js.map +7 -0
- package/dist/creek-layout/Exception/NotFound.js +42 -13
- package/dist/creek-layout/Exception/NotFound.js.map +7 -0
- package/dist/creek-layout/Exception/NotFoundPage.js +30 -5
- package/dist/creek-layout/Exception/NotFoundPage.js.map +7 -0
- package/dist/creek-layout/Exception/index.js +37 -8
- package/dist/creek-layout/Exception/index.js.map +7 -0
- package/dist/creek-layout/HeaderContent/FullScreen.js +45 -39
- package/dist/creek-layout/HeaderContent/FullScreen.js.map +7 -0
- package/dist/creek-layout/HeaderContent/UserInfo.js +75 -53
- package/dist/creek-layout/HeaderContent/UserInfo.js.map +7 -0
- package/dist/creek-layout/HeaderContent/index.js +48 -32
- package/dist/creek-layout/HeaderContent/index.js.map +7 -0
- package/dist/creek-layout/index.js +117 -80
- package/dist/creek-layout/index.js.map +7 -0
- package/dist/creek-loading/index.js +55 -48
- package/dist/creek-loading/index.js.map +7 -0
- package/dist/creek-table/SearchTable.js +107 -116
- package/dist/creek-table/SearchTable.js.map +7 -0
- package/dist/creek-table/TableOptionRender.js +69 -60
- package/dist/creek-table/TableOptionRender.js.map +7 -0
- package/dist/creek-table/TableViewContent.js +60 -39
- package/dist/creek-table/TableViewContent.js.map +7 -0
- package/dist/creek-table/hooks/index.d.ts +1 -1
- package/dist/creek-table/hooks/index.js +28 -3
- package/dist/creek-table/hooks/index.js.map +7 -0
- package/dist/creek-table/hooks/useAdaptiveToolBar.js +48 -36
- package/dist/creek-table/hooks/useAdaptiveToolBar.js.map +7 -0
- package/dist/creek-table/hooks/useAutoWidthColumns.d.ts +6 -0
- package/dist/creek-table/hooks/useAutoWidthColumns.js +187 -0
- package/dist/creek-table/hooks/useAutoWidthColumns.js.map +7 -0
- package/dist/creek-table/hooks/useElementDistance.js +51 -39
- package/dist/creek-table/hooks/useElementDistance.js.map +7 -0
- package/dist/creek-table/index.js +35 -25
- package/dist/creek-table/index.js.map +7 -0
- package/dist/creek-table/toolBarRender.js +55 -33
- package/dist/creek-table/toolBarRender.js.map +7 -0
- package/dist/creek-table/type.d.ts +1 -1
- package/dist/creek-table/type.js +18 -1
- package/dist/creek-table/type.js.map +7 -0
- package/dist/index.d.ts +1 -2
- package/dist/index.js +34 -7
- package/dist/index.js.map +7 -0
- package/package.json +2 -2
- package/src/creek-hooks/index.ts +2 -0
- package/src/creek-hooks/useApp/DrawerHelper.tsx +43 -0
- package/src/creek-hooks/useApp/ModalHelper.tsx +43 -0
- package/src/creek-hooks/useApp/index.tsx +119 -0
- package/src/creek-hooks/useApp/types.ts +25 -0
- package/src/creek-hooks/useViewportHeight.tsx +34 -3
- package/src/creek-layout/HeaderContent/index.tsx +1 -4
- package/src/creek-layout/index.tsx +7 -6
- package/src/creek-table/SearchTable.tsx +16 -37
- package/src/creek-table/TableViewContent.tsx +21 -12
- package/src/creek-table/hooks/index.ts +1 -1
- package/src/creek-table/hooks/useAutoWidthColumns.tsx +212 -0
- package/src/creek-table/index.tsx +1 -5
- package/src/creek-table/type.ts +1 -1
- package/src/index.tsx +2 -2
- package/dist/bg-center/index.d.ts +0 -5
- package/dist/bg-center/index.js +0 -28
- package/dist/creek-search/CreekSearch.d.ts +0 -7
- package/dist/creek-search/CreekSearch.js +0 -51
- package/dist/creek-search/CreekSearchContext.d.ts +0 -54
- package/dist/creek-search/CreekSearchContext.js +0 -546
- package/dist/creek-search/CreekSearchFilterDisplay.d.ts +0 -5
- package/dist/creek-search/CreekSearchFilterDisplay.js +0 -97
- package/dist/creek-search/CreekSearchInput.d.ts +0 -4
- package/dist/creek-search/CreekSearchInput.js +0 -96
- package/dist/creek-search/CreekSearchValueSelector.d.ts +0 -5
- package/dist/creek-search/CreekSearchValueSelector.js +0 -422
- package/dist/creek-search/index.d.ts +0 -5
- package/dist/creek-search/index.js +0 -5
- package/dist/creek-search/type.d.ts +0 -8
- package/dist/creek-search/type.js +0 -1
- package/dist/creek-table/hooks/useAutoAddFilterToColumns.d.ts +0 -12
- package/dist/creek-table/hooks/useAutoAddFilterToColumns.js +0 -93
- package/src/bg-center/index.tsx +0 -26
- package/src/creek-search/CreekSearch.tsx +0 -59
- package/src/creek-search/CreekSearchContext.tsx +0 -593
- package/src/creek-search/CreekSearchFilterDisplay.tsx +0 -84
- package/src/creek-search/CreekSearchInput.tsx +0 -75
- package/src/creek-search/CreekSearchValueSelector.tsx +0 -324
- package/src/creek-search/index.tsx +0 -5
- package/src/creek-search/type.ts +0 -9
- package/src/creek-table/hooks/useAutoAddFilterToColumns.tsx +0 -90
|
@@ -1,65 +1,74 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
|
|
19
|
+
// src/creek-table/TableOptionRender.tsx
|
|
20
|
+
var TableOptionRender_exports = {};
|
|
21
|
+
__export(TableOptionRender_exports, {
|
|
22
|
+
TableOptionRender: () => TableOptionRender
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(TableOptionRender_exports);
|
|
25
|
+
var import_icons = require("@ant-design/icons");
|
|
26
|
+
var import_antd = require("antd");
|
|
27
|
+
var import_antd_style = require("antd-style");
|
|
28
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
29
|
+
var useStyles = (0, import_antd_style.createStyles)(({ prefixCls, token }) => {
|
|
15
30
|
return {
|
|
16
|
-
|
|
17
|
-
border:
|
|
31
|
+
"table-option-render-item": {
|
|
32
|
+
border: `1px solid ${token.colorBorder}`,
|
|
18
33
|
borderRadius: token.borderRadius,
|
|
19
|
-
padding:
|
|
20
|
-
cursor:
|
|
34
|
+
padding: "8px",
|
|
35
|
+
cursor: "pointer"
|
|
21
36
|
}
|
|
22
37
|
};
|
|
23
38
|
});
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
}), /*#__PURE__*/_jsx("span", {
|
|
61
|
-
className: styles['table-option-render-item'],
|
|
62
|
-
children: setting
|
|
63
|
-
})]
|
|
64
|
-
});
|
|
65
|
-
};
|
|
39
|
+
var TableOptionRender = (props) => {
|
|
40
|
+
const { defaultDom, importConfig, exportConfig } = props;
|
|
41
|
+
const { styles } = useStyles();
|
|
42
|
+
const [reload, dis, setting] = defaultDom || [];
|
|
43
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd.Space, { size: 8, children: [
|
|
44
|
+
importConfig && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
45
|
+
"span",
|
|
46
|
+
{
|
|
47
|
+
className: styles["table-option-render-item"],
|
|
48
|
+
onClick: () => {
|
|
49
|
+
var _a;
|
|
50
|
+
(_a = importConfig.onClick) == null ? void 0 : _a.call(importConfig);
|
|
51
|
+
},
|
|
52
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Tooltip, { title: importConfig.text || "导入", children: importConfig.icon || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ImportOutlined, {}) })
|
|
53
|
+
}
|
|
54
|
+
),
|
|
55
|
+
exportConfig && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
56
|
+
"span",
|
|
57
|
+
{
|
|
58
|
+
className: styles["table-option-render-item"],
|
|
59
|
+
onClick: () => {
|
|
60
|
+
var _a;
|
|
61
|
+
(_a = exportConfig.onClick) == null ? void 0 : _a.call(exportConfig);
|
|
62
|
+
},
|
|
63
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Tooltip, { title: exportConfig.text || "导出", children: exportConfig.icon || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ExportOutlined, {}) })
|
|
64
|
+
}
|
|
65
|
+
),
|
|
66
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles["table-option-render-item"], children: reload }),
|
|
67
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles["table-option-render-item"], children: setting })
|
|
68
|
+
] });
|
|
69
|
+
};
|
|
70
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
71
|
+
0 && (module.exports = {
|
|
72
|
+
TableOptionRender
|
|
73
|
+
});
|
|
74
|
+
//# sourceMappingURL=TableOptionRender.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/creek-table/TableOptionRender.tsx"],
|
|
4
|
+
"sourcesContent": ["import { ExportOutlined, ImportOutlined } from '@ant-design/icons';\nimport { ParamsType } from '@ant-design/pro-components';\nimport { Space, Tooltip } from 'antd';\nimport { createStyles } from 'antd-style';\n\nimport { OptionRenderCustom } from './type';\n\nconst useStyles = createStyles(({ prefixCls, token }) => {\n return {\n 'table-option-render-item': {\n border: `1px solid ${token.colorBorder}`,\n borderRadius: token.borderRadius,\n padding: '8px',\n cursor: 'pointer',\n },\n };\n});\n\nexport type TableOptionRenderProps<T extends ParamsType, U extends ParamsType, ValueType = 'text'> = {\n defaultDom?: React.ReactNode[];\n importConfig?: OptionRenderCustom;\n exportConfig?: OptionRenderCustom;\n};\n\nexport const TableOptionRender = <T extends ParamsType, U extends ParamsType, ValueType = 'text'>(props: TableOptionRenderProps<T, U, ValueType>) => {\n const { defaultDom, importConfig, exportConfig } = props;\n\n const { styles } = useStyles();\n\n const [reload, dis, setting] = defaultDom || [];\n return (\n <Space size={8}>\n {importConfig && (\n <span\n className={styles['table-option-render-item']}\n onClick={() => {\n importConfig.onClick?.();\n }}\n >\n <Tooltip title={importConfig.text || '导入'}>{importConfig.icon || <ImportOutlined />}</Tooltip>\n </span>\n )}\n {exportConfig && (\n <span\n className={styles['table-option-render-item']}\n onClick={() => {\n exportConfig.onClick?.();\n }}\n >\n <Tooltip title={exportConfig.text || '导出'}>{exportConfig.icon || <ExportOutlined />}</Tooltip>\n </span>\n )}\n <span className={styles['table-option-render-item']}>{reload}</span>\n <span className={styles['table-option-render-item']}>{setting}</span>\n </Space>\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+C;AAE/C,kBAA+B;AAC/B,wBAA6B;AA4BzB;AAxBJ,IAAM,gBAAY,gCAAa,CAAC,EAAE,WAAW,MAAM,MAAM;AACvD,SAAO;AAAA,IACL,4BAA4B;AAAA,MAC1B,QAAQ,aAAa,MAAM;AAAA,MAC3B,cAAc,MAAM;AAAA,MACpB,SAAS;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,EACF;AACF,CAAC;AAQM,IAAM,oBAAoB,CAAiE,UAAmD;AACnJ,QAAM,EAAE,YAAY,cAAc,aAAa,IAAI;AAEnD,QAAM,EAAE,OAAO,IAAI,UAAU;AAE7B,QAAM,CAAC,QAAQ,KAAK,OAAO,IAAI,cAAc,CAAC;AAC9C,SACE,6CAAC,qBAAM,MAAM,GACV;AAAA,oBACC;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,OAAO,0BAA0B;AAAA,QAC5C,SAAS,MAAM;AAnCzB;AAoCY,6BAAa,YAAb;AAAA,QACF;AAAA,QAEA,sDAAC,uBAAQ,OAAO,aAAa,QAAQ,MAAO,uBAAa,QAAQ,4CAAC,+BAAe,GAAG;AAAA;AAAA,IACtF;AAAA,IAED,gBACC;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,OAAO,0BAA0B;AAAA,QAC5C,SAAS,MAAM;AA7CzB;AA8CY,6BAAa,YAAb;AAAA,QACF;AAAA,QAEA,sDAAC,uBAAQ,OAAO,aAAa,QAAQ,MAAO,uBAAa,QAAQ,4CAAC,+BAAe,GAAG;AAAA;AAAA,IACtF;AAAA,IAEF,4CAAC,UAAK,WAAW,OAAO,0BAA0B,GAAI,kBAAO;AAAA,IAC7D,4CAAC,UAAK,WAAW,OAAO,0BAA0B,GAAI,mBAAQ;AAAA,KAChE;AAEJ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,45 +1,66 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
19
|
+
// src/creek-table/TableViewContent.tsx
|
|
20
|
+
var TableViewContent_exports = {};
|
|
21
|
+
__export(TableViewContent_exports, {
|
|
22
|
+
TableViewContent: () => TableViewContent
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(TableViewContent_exports);
|
|
25
|
+
var import_ahooks = require("ahooks");
|
|
26
|
+
var import_creek_hooks = require("../creek-hooks");
|
|
27
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
28
|
+
var TableViewContent = (props) => {
|
|
29
|
+
const { prefixCls, pageFixedBottomConfig, pageFixedBottom, children } = props;
|
|
30
|
+
const { containerRef, viewPortHeight } = (0, import_creek_hooks.useViewportHeight)({
|
|
31
|
+
isObserverParent: true
|
|
32
|
+
});
|
|
33
|
+
const { run: setAntdTableContentHeight } = (0, import_ahooks.useDebounceFn)(
|
|
34
|
+
(mainHeight) => {
|
|
35
|
+
var _a, _b, _c;
|
|
36
|
+
const antdTableContentElement = (_a = containerRef.current) == null ? void 0 : _a.querySelector(`.${prefixCls}-table`);
|
|
37
|
+
const antdPaginationElement = (_b = containerRef.current) == null ? void 0 : _b.querySelector(`.${prefixCls}-pagination`);
|
|
24
38
|
if (antdTableContentElement) {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
39
|
+
const paginationHeight = (antdPaginationElement == null ? void 0 : antdPaginationElement.clientHeight) || 0;
|
|
40
|
+
const bottomFix = (pageFixedBottomConfig == null ? void 0 : pageFixedBottomConfig.bottomFix) || 20;
|
|
41
|
+
const parentElement = (_c = containerRef.current) == null ? void 0 : _c.parentElement;
|
|
42
|
+
let parentPaddingBottom = 0;
|
|
43
|
+
if (parentElement) {
|
|
44
|
+
const style = window.getComputedStyle(parentElement);
|
|
45
|
+
parentPaddingBottom = parseFloat(style.paddingBottom) || 0;
|
|
46
|
+
}
|
|
47
|
+
const tableContentHeight = mainHeight - paginationHeight - parentPaddingBottom - bottomFix - parentPaddingBottom;
|
|
48
|
+
antdTableContentElement.setAttribute("style", `height: ${tableContentHeight}px`);
|
|
29
49
|
}
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
wait: 16
|
|
53
|
+
}
|
|
54
|
+
);
|
|
55
|
+
(0, import_ahooks.useDeepCompareEffect)(() => {
|
|
33
56
|
if (pageFixedBottom) {
|
|
34
|
-
setAntdTableContentHeight(viewPortHeight
|
|
57
|
+
setAntdTableContentHeight(viewPortHeight ?? 0);
|
|
35
58
|
}
|
|
36
59
|
}, [viewPortHeight, pageFixedBottom, setAntdTableContentHeight]);
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
});
|
|
45
|
-
};
|
|
60
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: containerRef, children }) });
|
|
61
|
+
};
|
|
62
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
63
|
+
0 && (module.exports = {
|
|
64
|
+
TableViewContent
|
|
65
|
+
});
|
|
66
|
+
//# sourceMappingURL=TableViewContent.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/creek-table/TableViewContent.tsx"],
|
|
4
|
+
"sourcesContent": ["import { ParamsType } from '@ant-design/pro-components';\n\nimport { useDebounceFn, useDeepCompareEffect } from 'ahooks';\n\nimport { useViewportHeight } from '../creek-hooks';\nimport { CreekTableProps } from './type';\n\nexport type CreekTableViewRender<T extends ParamsType, U extends ParamsType, ValueType = 'text'> = CreekTableProps<T, U, ValueType>['tableViewRender'];\n\n// 独立的 TableViewWrapper 组件 - 包含所有表格视图相关逻辑\nexport const TableViewContent = <T extends ParamsType, U extends ParamsType, ValueType = 'text'>(props: CreekTableProps<T, U, ValueType>) => {\n const { prefixCls, pageFixedBottomConfig, pageFixedBottom, children } = props;\n\n const { containerRef, viewPortHeight } = useViewportHeight({\n isObserverParent: true,\n });\n\n // 设置antd内容区的高度,使得分页永远在底部\n const { run: setAntdTableContentHeight } = useDebounceFn(\n (mainHeight: number) => {\n const antdTableContentElement = containerRef.current?.querySelector(`.${prefixCls}-table`);\n const antdPaginationElement = containerRef.current?.querySelector(`.${prefixCls}-pagination`);\n if (antdTableContentElement) {\n const paginationHeight = antdPaginationElement?.clientHeight || 0;\n const bottomFix = pageFixedBottomConfig?.bottomFix || 20;\n const parentElement = containerRef.current?.parentElement;\n let parentPaddingBottom = 0;\n if (parentElement) {\n const style = window.getComputedStyle(parentElement);\n parentPaddingBottom = parseFloat(style.paddingBottom) || 0;\n }\n const tableContentHeight = mainHeight - paginationHeight - parentPaddingBottom - bottomFix - parentPaddingBottom;\n antdTableContentElement.setAttribute('style', `height: ${tableContentHeight}px`);\n }\n },\n {\n wait: 16,\n },\n );\n\n useDeepCompareEffect(() => {\n if (pageFixedBottom) {\n setAntdTableContentHeight(viewPortHeight ?? 0);\n }\n }, [viewPortHeight, pageFixedBottom, setAntdTableContentHeight]);\n\n // 默认渲染逻辑\n return (\n <>\n <div ref={containerRef}>{children}</div>\n </>\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,oBAAoD;AAEpD,yBAAkC;AA4C9B;AAtCG,IAAM,mBAAmB,CAAiE,UAA4C;AAC3I,QAAM,EAAE,WAAW,uBAAuB,iBAAiB,SAAS,IAAI;AAExE,QAAM,EAAE,cAAc,eAAe,QAAI,sCAAkB;AAAA,IACzD,kBAAkB;AAAA,EACpB,CAAC;AAGD,QAAM,EAAE,KAAK,0BAA0B,QAAI;AAAA,IACzC,CAAC,eAAuB;AAnB5B;AAoBM,YAAM,2BAA0B,kBAAa,YAAb,mBAAsB,cAAc,IAAI;AACxE,YAAM,yBAAwB,kBAAa,YAAb,mBAAsB,cAAc,IAAI;AACtE,UAAI,yBAAyB;AAC3B,cAAM,oBAAmB,+DAAuB,iBAAgB;AAChE,cAAM,aAAY,+DAAuB,cAAa;AACtD,cAAM,iBAAgB,kBAAa,YAAb,mBAAsB;AAC5C,YAAI,sBAAsB;AAC1B,YAAI,eAAe;AACjB,gBAAM,QAAQ,OAAO,iBAAiB,aAAa;AACnD,gCAAsB,WAAW,MAAM,aAAa,KAAK;AAAA,QAC3D;AACA,cAAM,qBAAqB,aAAa,mBAAmB,sBAAsB,YAAY;AAC7F,gCAAwB,aAAa,SAAS,WAAW,sBAAsB;AAAA,MACjF;AAAA,IACF;AAAA,IACA;AAAA,MACE,MAAM;AAAA,IACR;AAAA,EACF;AAEA,0CAAqB,MAAM;AACzB,QAAI,iBAAiB;AACnB,gCAA0B,kBAAkB,CAAC;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,gBAAgB,iBAAiB,yBAAyB,CAAC;AAG/D,SACE,2EACE,sDAAC,SAAI,KAAK,cAAe,UAAS,GACpC;AAEJ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,3 +1,28 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __copyProps = (to, from, except, desc) => {
|
|
6
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
7
|
+
for (let key of __getOwnPropNames(from))
|
|
8
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
9
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
10
|
+
}
|
|
11
|
+
return to;
|
|
12
|
+
};
|
|
13
|
+
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
14
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
15
|
+
|
|
16
|
+
// src/creek-table/hooks/index.ts
|
|
17
|
+
var hooks_exports = {};
|
|
18
|
+
module.exports = __toCommonJS(hooks_exports);
|
|
19
|
+
__reExport(hooks_exports, require("./useAdaptiveToolBar"), module.exports);
|
|
20
|
+
__reExport(hooks_exports, require("./useAutoWidthColumns"), module.exports);
|
|
21
|
+
__reExport(hooks_exports, require("./useElementDistance"), module.exports);
|
|
22
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
23
|
+
0 && (module.exports = {
|
|
24
|
+
...require("./useAdaptiveToolBar"),
|
|
25
|
+
...require("./useAutoWidthColumns"),
|
|
26
|
+
...require("./useElementDistance")
|
|
27
|
+
});
|
|
28
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/creek-table/hooks/index.ts"],
|
|
4
|
+
"sourcesContent": ["export * from './useAdaptiveToolBar';\nexport * from './useAutoWidthColumns';\nexport * from './useElementDistance';\n\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,0BAAc,iCAAd;AACA,0BAAc,kCADd;AAEA,0BAAc,iCAFd;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,48 +1,60 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
_options$minLeftDista = options.minLeftDistance,
|
|
19
|
-
minLeftDistance = _options$minLeftDista === void 0 ? 48 : _options$minLeftDista,
|
|
20
|
-
_options$hysteresis = options.hysteresis,
|
|
21
|
-
hysteresis = _options$hysteresis === void 0 ? 36 : _options$hysteresis;
|
|
22
|
-
useEffect(function () {
|
|
23
|
-
var _containerRef$current, _containerRef$current2;
|
|
24
|
-
element1Ref.current = (containerRef === null || containerRef === void 0 || (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.querySelector(".".concat(prefixCls, "-pro-table-list-toolbar-left"))) || null;
|
|
25
|
-
element2Ref.current = (containerRef === null || containerRef === void 0 || (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 || (_containerRef$current2 = _containerRef$current2.querySelector(".".concat(prefixCls, "-pro-table-list-toolbar-right"))) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.querySelector('div')) || null;
|
|
26
|
-
});
|
|
27
|
-
var distance = useElementDistance(element1Ref, element2Ref);
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
18
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
19
|
+
// src/creek-table/hooks/useAdaptiveToolBar.tsx
|
|
20
|
+
var useAdaptiveToolBar_exports = {};
|
|
21
|
+
__export(useAdaptiveToolBar_exports, {
|
|
22
|
+
useAdaptiveToolBar: () => useAdaptiveToolBar
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(useAdaptiveToolBar_exports);
|
|
25
|
+
var import_react = require("react");
|
|
26
|
+
var import_useElementDistance = require("./useElementDistance");
|
|
27
|
+
var useAdaptiveToolBar = (options) => {
|
|
28
|
+
const element1Ref = (0, import_react.useRef)(null);
|
|
29
|
+
const element2Ref = (0, import_react.useRef)(null);
|
|
30
|
+
const [shouldCollapse, setShouldCollapse] = (0, import_react.useState)(false);
|
|
31
|
+
const { containerRef, prefixCls, minLeftDistance = 48, hysteresis = 36 } = options;
|
|
32
|
+
(0, import_react.useEffect)(() => {
|
|
33
|
+
var _a, _b, _c;
|
|
34
|
+
element1Ref.current = ((_a = containerRef == null ? void 0 : containerRef.current) == null ? void 0 : _a.querySelector(`.${prefixCls}-pro-table-list-toolbar-left`)) || null;
|
|
35
|
+
element2Ref.current = ((_c = (_b = containerRef == null ? void 0 : containerRef.current) == null ? void 0 : _b.querySelector(`.${prefixCls}-pro-table-list-toolbar-right`)) == null ? void 0 : _c.querySelector("div")) || null;
|
|
36
|
+
});
|
|
37
|
+
const distance = (0, import_useElementDistance.useElementDistance)(element1Ref, element2Ref);
|
|
38
|
+
(0, import_react.useEffect)(() => {
|
|
39
|
+
if (!(distance == null ? void 0 : distance.x))
|
|
40
|
+
return;
|
|
41
|
+
const currentDistance = distance.x;
|
|
33
42
|
if (shouldCollapse) {
|
|
34
|
-
// 当前是折叠状态,需要距离足够大才展开
|
|
35
43
|
if (currentDistance > minLeftDistance + hysteresis) {
|
|
36
44
|
setShouldCollapse(false);
|
|
37
45
|
}
|
|
38
46
|
} else {
|
|
39
|
-
// 当前是展开状态,距离小于阈值时折叠
|
|
40
47
|
if (currentDistance < minLeftDistance) {
|
|
41
48
|
setShouldCollapse(true);
|
|
42
49
|
}
|
|
43
50
|
}
|
|
44
|
-
}, [distance
|
|
51
|
+
}, [distance == null ? void 0 : distance.x, minLeftDistance, hysteresis, shouldCollapse]);
|
|
45
52
|
return {
|
|
46
|
-
shouldCollapse
|
|
53
|
+
shouldCollapse
|
|
47
54
|
};
|
|
48
|
-
};
|
|
55
|
+
};
|
|
56
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
57
|
+
0 && (module.exports = {
|
|
58
|
+
useAdaptiveToolBar
|
|
59
|
+
});
|
|
60
|
+
//# sourceMappingURL=useAdaptiveToolBar.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/creek-table/hooks/useAdaptiveToolBar.tsx"],
|
|
4
|
+
"sourcesContent": ["import { MutableRefObject, useEffect, useRef, useState } from 'react';\nimport { useElementDistance } from './useElementDistance';\n\nexport const useAdaptiveToolBar = (options: {\n containerRef: MutableRefObject<HTMLElement | null>;\n prefixCls: string;\n minLeftDistance?: number;\n hysteresis?: number; // 滞回差值\n}) => {\n const element1Ref = useRef<HTMLElement>(null) as MutableRefObject<HTMLElement | null>;\n const element2Ref = useRef<HTMLElement>(null) as MutableRefObject<HTMLElement | null>;\n const [shouldCollapse, setShouldCollapse] = useState(false);\n\n const { containerRef, prefixCls, minLeftDistance = 48, hysteresis = 36 } = options;\n\n useEffect(() => {\n element1Ref.current = containerRef?.current?.querySelector(`.${prefixCls}-pro-table-list-toolbar-left`) || null;\n element2Ref.current = containerRef?.current?.querySelector(`.${prefixCls}-pro-table-list-toolbar-right`)?.querySelector('div') || null;\n });\n\n const distance = useElementDistance(element1Ref, element2Ref);\n\n // 方案一:使用滞回逻辑防止震荡\n useEffect(() => {\n if (!distance?.x) return;\n\n const currentDistance = distance.x;\n\n if (shouldCollapse) {\n // 当前是折叠状态,需要距离足够大才展开\n if (currentDistance > minLeftDistance + hysteresis) {\n setShouldCollapse(false);\n }\n } else {\n // 当前是展开状态,距离小于阈值时折叠\n if (currentDistance < minLeftDistance) {\n setShouldCollapse(true);\n }\n }\n }, [distance?.x, minLeftDistance, hysteresis, shouldCollapse]);\n\n return {\n shouldCollapse,\n };\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8D;AAC9D,gCAAmC;AAE5B,IAAM,qBAAqB,CAAC,YAK7B;AACJ,QAAM,kBAAc,qBAAoB,IAAI;AAC5C,QAAM,kBAAc,qBAAoB,IAAI;AAC5C,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,KAAK;AAE1D,QAAM,EAAE,cAAc,WAAW,kBAAkB,IAAI,aAAa,GAAG,IAAI;AAE3E,8BAAU,MAAM;AAflB;AAgBI,gBAAY,YAAU,kDAAc,YAAd,mBAAuB,cAAc,IAAI,6CAA4C;AAC3G,gBAAY,YAAU,wDAAc,YAAd,mBAAuB,cAAc,IAAI,8CAAzC,mBAAoF,cAAc,WAAU;AAAA,EACpI,CAAC;AAED,QAAM,eAAW,8CAAmB,aAAa,WAAW;AAG5D,8BAAU,MAAM;AACd,QAAI,EAAC,qCAAU;AAAG;AAElB,UAAM,kBAAkB,SAAS;AAEjC,QAAI,gBAAgB;AAElB,UAAI,kBAAkB,kBAAkB,YAAY;AAClD,0BAAkB,KAAK;AAAA,MACzB;AAAA,IACF,OAAO;AAEL,UAAI,kBAAkB,iBAAiB;AACrC,0BAAkB,IAAI;AAAA,MACxB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,qCAAU,GAAG,iBAAiB,YAAY,cAAc,CAAC;AAE7D,SAAO;AAAA,IACL;AAAA,EACF;AACF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { ProColumns } from '@ant-design/pro-components';
|
|
2
|
+
import { RefObject } from 'react';
|
|
3
|
+
export declare const useAutoWidthColumns: <T, ValueType>(columns: ProColumns<T, ValueType>[] | undefined, tableRef: RefObject<HTMLDivElement>) => {
|
|
4
|
+
columns: ProColumns<T, ValueType>[] | undefined;
|
|
5
|
+
totalWidth: number | undefined;
|
|
6
|
+
};
|
|
@@ -0,0 +1,187 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
|
|
19
|
+
// src/creek-table/hooks/useAutoWidthColumns.tsx
|
|
20
|
+
var useAutoWidthColumns_exports = {};
|
|
21
|
+
__export(useAutoWidthColumns_exports, {
|
|
22
|
+
useAutoWidthColumns: () => useAutoWidthColumns
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(useAutoWidthColumns_exports);
|
|
25
|
+
var import_ahooks = require("ahooks");
|
|
26
|
+
var import_antd = require("antd");
|
|
27
|
+
var import_react = require("react");
|
|
28
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
29
|
+
var DEFAULT_PADDING_WIDTH = 16;
|
|
30
|
+
var estimateWidth = (text) => {
|
|
31
|
+
let width = 0;
|
|
32
|
+
for (const char of text) {
|
|
33
|
+
if (/[\u4e00-\u9fa5]/.test(char)) {
|
|
34
|
+
width += 14;
|
|
35
|
+
} else {
|
|
36
|
+
width += 8;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
return width + DEFAULT_PADDING_WIDTH;
|
|
40
|
+
};
|
|
41
|
+
var getValueTypeWidth = (valueType) => {
|
|
42
|
+
switch (valueType) {
|
|
43
|
+
case "date":
|
|
44
|
+
case "dateRange":
|
|
45
|
+
return 120;
|
|
46
|
+
case "dateTime":
|
|
47
|
+
case "dateTimeRange":
|
|
48
|
+
return 180;
|
|
49
|
+
case "time":
|
|
50
|
+
case "timeRange":
|
|
51
|
+
return 100;
|
|
52
|
+
case "index":
|
|
53
|
+
case "indexBorder":
|
|
54
|
+
return 60;
|
|
55
|
+
case "money":
|
|
56
|
+
return 100;
|
|
57
|
+
case "digit":
|
|
58
|
+
return 100;
|
|
59
|
+
case "select":
|
|
60
|
+
return 120;
|
|
61
|
+
default:
|
|
62
|
+
return 80;
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
var MeasureWrapper = ({ children, onResize }) => {
|
|
66
|
+
const ref = (0, import_react.useRef)(null);
|
|
67
|
+
(0, import_react.useEffect)(() => {
|
|
68
|
+
if (!ref.current)
|
|
69
|
+
return;
|
|
70
|
+
onResize(ref.current.offsetWidth);
|
|
71
|
+
const observer = new ResizeObserver((entries) => {
|
|
72
|
+
for (const entry of entries) {
|
|
73
|
+
onResize(entry.target.offsetWidth);
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
observer.observe(ref.current);
|
|
77
|
+
return () => {
|
|
78
|
+
observer.disconnect();
|
|
79
|
+
};
|
|
80
|
+
}, []);
|
|
81
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Space, { ref, children });
|
|
82
|
+
};
|
|
83
|
+
var useAutoWidthColumns = (columns, tableRef) => {
|
|
84
|
+
const [columnWidths, setColumnWidths] = (0, import_react.useState)({});
|
|
85
|
+
const [tableWidth, setTableWidth] = (0, import_react.useState)(0);
|
|
86
|
+
(0, import_react.useEffect)(() => {
|
|
87
|
+
if (!tableRef.current)
|
|
88
|
+
return;
|
|
89
|
+
setTableWidth(tableRef.current.offsetWidth);
|
|
90
|
+
let rafId;
|
|
91
|
+
let timerId;
|
|
92
|
+
const updateWidth = (width) => {
|
|
93
|
+
cancelAnimationFrame(rafId);
|
|
94
|
+
clearTimeout(timerId);
|
|
95
|
+
rafId = requestAnimationFrame(() => {
|
|
96
|
+
timerId = setTimeout(() => {
|
|
97
|
+
setTableWidth(width);
|
|
98
|
+
}, 500);
|
|
99
|
+
});
|
|
100
|
+
};
|
|
101
|
+
const observer = new ResizeObserver((entries) => {
|
|
102
|
+
for (const entry of entries) {
|
|
103
|
+
updateWidth(entry.contentRect.width);
|
|
104
|
+
}
|
|
105
|
+
});
|
|
106
|
+
observer.observe(tableRef.current);
|
|
107
|
+
const handleWindowResize = () => {
|
|
108
|
+
if (tableRef.current) {
|
|
109
|
+
updateWidth(tableRef.current.offsetWidth);
|
|
110
|
+
}
|
|
111
|
+
};
|
|
112
|
+
window.addEventListener("resize", handleWindowResize);
|
|
113
|
+
return () => {
|
|
114
|
+
observer.disconnect();
|
|
115
|
+
window.removeEventListener("resize", handleWindowResize);
|
|
116
|
+
cancelAnimationFrame(rafId);
|
|
117
|
+
clearTimeout(timerId);
|
|
118
|
+
};
|
|
119
|
+
}, [tableRef]);
|
|
120
|
+
const handleResize = (0, import_ahooks.useMemoizedFn)((key, width) => {
|
|
121
|
+
setColumnWidths((prev) => {
|
|
122
|
+
const currentMax = prev[key] || 0;
|
|
123
|
+
if (width > currentMax) {
|
|
124
|
+
return { ...prev, [key]: width };
|
|
125
|
+
}
|
|
126
|
+
return prev;
|
|
127
|
+
});
|
|
128
|
+
});
|
|
129
|
+
const { columns: finalColumns, totalWidth } = (0, import_react.useMemo)(() => {
|
|
130
|
+
if (!columns)
|
|
131
|
+
return { columns: void 0, totalWidth: void 0 };
|
|
132
|
+
const calculatedColumns = columns.map((col, index) => {
|
|
133
|
+
const colKey = col.dataIndex || col.key || `col-${index}`;
|
|
134
|
+
const measuredWidth = columnWidths[colKey];
|
|
135
|
+
let width;
|
|
136
|
+
if (col.width) {
|
|
137
|
+
width = typeof col.width === "number" ? col.width : 100;
|
|
138
|
+
} else if (col.valueType === "option" && measuredWidth) {
|
|
139
|
+
width = measuredWidth + DEFAULT_PADDING_WIDTH;
|
|
140
|
+
} else {
|
|
141
|
+
width = Math.max(estimateWidth(col.title), getValueTypeWidth(col.valueType));
|
|
142
|
+
}
|
|
143
|
+
return {
|
|
144
|
+
...col,
|
|
145
|
+
_calculatedWidth: width,
|
|
146
|
+
_colKey: colKey
|
|
147
|
+
};
|
|
148
|
+
});
|
|
149
|
+
const totalCalculatedWidth = calculatedColumns.reduce((acc, col) => acc + col._calculatedWidth, 0);
|
|
150
|
+
const isOverflow = totalCalculatedWidth > tableWidth;
|
|
151
|
+
const processedColumns = calculatedColumns.map((col) => {
|
|
152
|
+
const { _calculatedWidth, _colKey, ...originalCol } = col;
|
|
153
|
+
if (col.valueType === "option") {
|
|
154
|
+
const originalRender = col.render;
|
|
155
|
+
return {
|
|
156
|
+
...originalCol,
|
|
157
|
+
// 始终设置 option 列宽度
|
|
158
|
+
width: _calculatedWidth,
|
|
159
|
+
fixed: col.fixed ?? "right",
|
|
160
|
+
render: (dom, entity, index, action, schema) => {
|
|
161
|
+
const originalRenderResult = originalRender ? originalRender(dom, entity, index, action, schema) : dom;
|
|
162
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MeasureWrapper, { onResize: (width) => handleResize(_colKey, width), children: originalRenderResult });
|
|
163
|
+
}
|
|
164
|
+
};
|
|
165
|
+
}
|
|
166
|
+
return {
|
|
167
|
+
...originalCol,
|
|
168
|
+
// 只有当内容溢出(需要滚动)或者手动设置了宽度时,才应用计算出的宽度
|
|
169
|
+
// 否则不设置 width,让 Antd Table 自动布局占满剩余空间
|
|
170
|
+
width: isOverflow || col.width ? _calculatedWidth : void 0
|
|
171
|
+
};
|
|
172
|
+
});
|
|
173
|
+
return {
|
|
174
|
+
columns: processedColumns,
|
|
175
|
+
totalWidth: isOverflow ? totalCalculatedWidth : void 0
|
|
176
|
+
};
|
|
177
|
+
}, [columns, columnWidths, tableWidth]);
|
|
178
|
+
return {
|
|
179
|
+
columns: finalColumns,
|
|
180
|
+
totalWidth
|
|
181
|
+
};
|
|
182
|
+
};
|
|
183
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
184
|
+
0 && (module.exports = {
|
|
185
|
+
useAutoWidthColumns
|
|
186
|
+
});
|
|
187
|
+
//# sourceMappingURL=useAutoWidthColumns.js.map
|