bhd-components 0.2.4 → 0.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/es2017/titleBar/index.d.ts +7 -2
  2. package/es2017/titleBar/index.js +41 -16
  3. package/es2017/titleBar/index.module.less +3 -0
  4. package/esm/titleBar/index.d.ts +7 -2
  5. package/esm/titleBar/index.js +42 -16
  6. package/esm/titleBar/index.module.less +3 -0
  7. package/package.json +1 -1
  8. package/es2017/table/index22.d.ts +0 -12
  9. package/es2017/table/index22.js +0 -159
  10. package/esm/table/index22.d.ts +0 -12
  11. package/esm/table/index22.js +0 -162
package/es2017/titleBar/index.d.ts CHANGED
@@ -3,9 +3,14 @@ interface TitleBarProps {
3
3
  title?: React.ReactElement;
4
4
  leftIcon?: React.ReactElement;
5
5
  subTitle?: React.ReactElement;
6
- rightContent: () => React.ReactElement;
7
- wrapClassName?: string;
6
+ rightContent: (kind?: string) => React.ReactElement;
8
7
  rightMaxWidth?: number;
8
+ wrapClassName?: string;
9
+ leftIconClassName?: string;
10
+ leftTitleClassName?: string;
11
+ leftSubTitleClassName?: string;
12
+ rightClassName?: string;
13
+ leftClassName?: string;
9
14
  }
10
15
  declare const TitleBar: (props: TitleBarProps) => JSX.Element;
11
16
  export default TitleBar;
package/es2017/titleBar/index.js CHANGED
@@ -1,40 +1,64 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "@ice/jsx-runtime/jsx-runtime";
2
2
  import * as React from "react";
3
- import { useEffect, useRef } from "react";
4
- // import {render} from "react-dom";
5
- import { createRoot } from "react-dom";
3
+ import { useState, useEffect, useLayoutEffect, useRef } from "react";
6
4
  import styles from "./index.module.less";
7
5
  const TitleBar = (props)=>{
8
- let { title , leftIcon , subTitle , rightContent , wrapClassName ="" , rightMaxWidth =45 } = props;
9
- useRef(null);
6
+ let { title , leftIcon , subTitle , rightContent , wrapClassName ="" , rightMaxWidth =45 , leftIconClassName ="" , leftTitleClassName ="" , leftSubTitleClassName ="" , rightClassName ="" , leftClassName ="" } = props;
7
+ const titleBarRef = useRef(null);
8
+ const rightContentRef = useRef(null);
9
+ const [kind, setKind] = useState("screen"); //"screen" 全展示 minScreen:小屏展示
10
+ const [screenWidth, setScreenWidth] = useState(0); //screen下的宽度
10
11
  const renderRightContent = ()=>{
11
- const dom = rightContent();
12
- let div = document.createElement("div");
13
- let root = createRoot(div);
14
- root.render(dom);
15
- console.log("rootroot", root, div.clientWidth);
12
+ const dom = rightContent(kind);
16
13
  return dom;
17
14
  };
18
- useEffect(()=>{}, []);
15
+ // const onResize = useCallback(, [screenWidth]);
16
+ const onResize = ()=>{
17
+ const { width } = titleBarRef.current.getBoundingClientRect();
18
+ const maxWidth = width * rightMaxWidth / 100;
19
+ console.log("resize", maxWidth, screenWidth);
20
+ if (screenWidth > maxWidth) // kind minScreen
21
+ setKind("minScreen");
22
+ else setKind("screen");
23
+ };
24
+ useLayoutEffect(()=>{
25
+ const { width } = titleBarRef.current.getBoundingClientRect();
26
+ const maxWidth = width * rightMaxWidth / 100;
27
+ const rightWidth = rightContentRef.current.getBoundingClientRect().width;
28
+ setScreenWidth(rightWidth);
29
+ console.log("rightWidthrightWidth", rightWidth, maxWidth);
30
+ if (rightWidth > maxWidth) // kind minScreen
31
+ setKind("minScreen");
32
+ else setKind("screen");
33
+ }, []);
34
+ useEffect(()=>{
35
+ window.addEventListener("resize", onResize);
36
+ return ()=>{
37
+ window.removeEventListener("resize", onResize);
38
+ };
39
+ }, [
40
+ screenWidth
41
+ ]);
19
42
  return /*#__PURE__*/ _jsxs("div", {
20
43
  className: `${styles.titleBar} ${wrapClassName}`,
44
+ ref: titleBarRef,
21
45
  children: [
22
46
  /*#__PURE__*/ _jsxs("div", {
23
- className: styles.left,
47
+ className: `${styles.left} ${leftClassName}`,
24
48
  children: [
25
49
  leftIcon && /*#__PURE__*/ _jsx("div", {
26
- className: styles.leftIcon,
50
+ className: `${styles.leftIcon} ${leftIconClassName}`,
27
51
  children: leftIcon
28
52
  }),
29
53
  /*#__PURE__*/ _jsxs("div", {
30
54
  className: styles.leftContent,
31
55
  children: [
32
56
  /*#__PURE__*/ _jsx("div", {
33
- className: styles.leftTitle,
57
+ className: `${styles.leftTitle} ${leftTitleClassName}`,
34
58
  children: title
35
59
  }),
36
60
  subTitle && /*#__PURE__*/ _jsx("div", {
37
- className: styles.leftSubTitle,
61
+ className: `${styles.leftSubTitle} ${leftSubTitleClassName}`,
38
62
  children: subTitle
39
63
  })
40
64
  ]
@@ -42,7 +66,8 @@ const TitleBar = (props)=>{
42
66
  ]
43
67
  }),
44
68
  rightContent && /*#__PURE__*/ _jsx("div", {
45
- className: styles.right,
69
+ className: `${styles.right} ${rightClassName}`,
70
+ ref: rightContentRef,
46
71
  children: renderRightContent()
47
72
  })
48
73
  ]
package/es2017/titleBar/index.module.less CHANGED
@@ -15,6 +15,9 @@
15
15
  .leftContent {
16
16
  width: 100%;
17
17
  overflow: hidden;
18
+ display: flex;
19
+ flex-direction: column;
20
+ justify-content: center;
18
21
  .leftTitle {
19
22
  font-weight: 500;
20
23
  font-size: 20px;
package/esm/titleBar/index.d.ts CHANGED
@@ -3,9 +3,14 @@ interface TitleBarProps {
3
3
  title?: React.ReactElement;
4
4
  leftIcon?: React.ReactElement;
5
5
  subTitle?: React.ReactElement;
6
- rightContent: () => React.ReactElement;
7
- wrapClassName?: string;
6
+ rightContent: (kind?: string) => React.ReactElement;
8
7
  rightMaxWidth?: number;
8
+ wrapClassName?: string;
9
+ leftIconClassName?: string;
10
+ leftTitleClassName?: string;
11
+ leftSubTitleClassName?: string;
12
+ rightClassName?: string;
13
+ leftClassName?: string;
9
14
  }
10
15
  declare const TitleBar: (props: TitleBarProps) => JSX.Element;
11
16
  export default TitleBar;
package/esm/titleBar/index.js CHANGED
@@ -1,40 +1,65 @@
1
+ import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
1
2
  import { jsx as _jsx, jsxs as _jsxs } from "@ice/jsx-runtime/jsx-runtime";
2
3
  import * as React from "react";
3
- import { useEffect, useRef } from "react";
4
- // import {render} from "react-dom";
5
- import { createRoot } from "react-dom";
4
+ import { useState, useEffect, useLayoutEffect, useRef } from "react";
6
5
  import styles from "./index.module.less";
7
6
  var TitleBar = function(props) {
8
- var title = props.title, leftIcon = props.leftIcon, subTitle = props.subTitle, rightContent = props.rightContent, _props_wrapClassName = props.wrapClassName, wrapClassName = _props_wrapClassName === void 0 ? "" : _props_wrapClassName, _props_rightMaxWidth = props.rightMaxWidth, rightMaxWidth = _props_rightMaxWidth === void 0 ? 45 : _props_rightMaxWidth;
9
- useRef(null);
7
+ var title = props.title, leftIcon = props.leftIcon, subTitle = props.subTitle, rightContent = props.rightContent, _props_wrapClassName = props.wrapClassName, wrapClassName = _props_wrapClassName === void 0 ? "" : _props_wrapClassName, _props_rightMaxWidth = props.rightMaxWidth, rightMaxWidth = _props_rightMaxWidth === void 0 ? 45 : _props_rightMaxWidth, _props_leftIconClassName = props.leftIconClassName, leftIconClassName = _props_leftIconClassName === void 0 ? "" : _props_leftIconClassName, _props_leftTitleClassName = props.leftTitleClassName, leftTitleClassName = _props_leftTitleClassName === void 0 ? "" : _props_leftTitleClassName, _props_leftSubTitleClassName = props.leftSubTitleClassName, leftSubTitleClassName = _props_leftSubTitleClassName === void 0 ? "" : _props_leftSubTitleClassName, _props_rightClassName = props.rightClassName, rightClassName = _props_rightClassName === void 0 ? "" : _props_rightClassName, _props_leftClassName = props.leftClassName, leftClassName = _props_leftClassName === void 0 ? "" : _props_leftClassName;
8
+ var titleBarRef = useRef(null);
9
+ var rightContentRef = useRef(null);
10
+ var _useState = _sliced_to_array(useState("screen"), 2), kind = _useState[0], setKind = _useState[1]; //"screen" 全展示 minScreen:小屏展示
11
+ var _useState1 = _sliced_to_array(useState(0), 2), screenWidth = _useState1[0], setScreenWidth = _useState1[1]; //screen下的宽度
10
12
  var renderRightContent = function() {
11
- var dom = rightContent();
12
- var div = document.createElement("div");
13
- var root = createRoot(div);
14
- root.render(dom);
15
- console.log("rootroot", root, div.clientWidth);
13
+ var dom = rightContent(kind);
16
14
  return dom;
17
15
  };
18
- useEffect(function() {}, []);
16
+ // const onResize = useCallback(, [screenWidth]);
17
+ var onResize = function() {
18
+ var width = titleBarRef.current.getBoundingClientRect().width;
19
+ var maxWidth = width * rightMaxWidth / 100;
20
+ console.log("resize", maxWidth, screenWidth);
21
+ if (screenWidth > maxWidth) // kind minScreen
22
+ setKind("minScreen");
23
+ else setKind("screen");
24
+ };
25
+ useLayoutEffect(function() {
26
+ var width = titleBarRef.current.getBoundingClientRect().width;
27
+ var maxWidth = width * rightMaxWidth / 100;
28
+ var rightWidth = rightContentRef.current.getBoundingClientRect().width;
29
+ setScreenWidth(rightWidth);
30
+ console.log("rightWidthrightWidth", rightWidth, maxWidth);
31
+ if (rightWidth > maxWidth) // kind minScreen
32
+ setKind("minScreen");
33
+ else setKind("screen");
34
+ }, []);
35
+ useEffect(function() {
36
+ window.addEventListener("resize", onResize);
37
+ return function() {
38
+ window.removeEventListener("resize", onResize);
39
+ };
40
+ }, [
41
+ screenWidth
42
+ ]);
19
43
  return /*#__PURE__*/ _jsxs("div", {
20
44
  className: "".concat(styles.titleBar, " ").concat(wrapClassName),
45
+ ref: titleBarRef,
21
46
  children: [
22
47
  /*#__PURE__*/ _jsxs("div", {
23
- className: styles.left,
48
+ className: "".concat(styles.left, " ").concat(leftClassName),
24
49
  children: [
25
50
  leftIcon && /*#__PURE__*/ _jsx("div", {
26
- className: styles.leftIcon,
51
+ className: "".concat(styles.leftIcon, " ").concat(leftIconClassName),
27
52
  children: leftIcon
28
53
  }),
29
54
  /*#__PURE__*/ _jsxs("div", {
30
55
  className: styles.leftContent,
31
56
  children: [
32
57
  /*#__PURE__*/ _jsx("div", {
33
- className: styles.leftTitle,
58
+ className: "".concat(styles.leftTitle, " ").concat(leftTitleClassName),
34
59
  children: title
35
60
  }),
36
61
  subTitle && /*#__PURE__*/ _jsx("div", {
37
- className: styles.leftSubTitle,
62
+ className: "".concat(styles.leftSubTitle, " ").concat(leftSubTitleClassName),
38
63
  children: subTitle
39
64
  })
40
65
  ]
@@ -42,7 +67,8 @@ var TitleBar = function(props) {
42
67
  ]
43
68
  }),
44
69
  rightContent && /*#__PURE__*/ _jsx("div", {
45
- className: styles.right,
70
+ className: "".concat(styles.right, " ").concat(rightClassName),
71
+ ref: rightContentRef,
46
72
  children: renderRightContent()
47
73
  })
48
74
  ]
package/esm/titleBar/index.module.less CHANGED
@@ -15,6 +15,9 @@
15
15
  .leftContent {
16
16
  width: 100%;
17
17
  overflow: hidden;
18
+ display: flex;
19
+ flex-direction: column;
20
+ justify-content: center;
18
21
  .leftTitle {
19
22
  font-weight: 500;
20
23
  font-size: 20px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bhd-components",
3
- "version": "0.2.4",
3
+ "version": "0.2.5",
4
4
  "description": "组件功能描述",
5
5
  "files": [
6
6
  "esm",
package/es2017/table/index22.d.ts DELETED
@@ -1,12 +0,0 @@
1
- /// <reference types="react" />
2
- declare const Table: {
3
- (props: any): JSX.Element;
4
- SELECTION_COLUMN: {};
5
- EXPAND_COLUMN: {};
6
- SELECTION_ALL: "SELECT_ALL";
7
- SELECTION_INVERT: "SELECT_INVERT";
8
- SELECTION_NONE: "SELECT_NONE";
9
- Column: typeof import("antd/es/table/Column").default;
10
- ColumnGroup: typeof import("antd/es/table/ColumnGroup").default;
11
- };
12
- export default Table;
package/es2017/table/index22.js DELETED
@@ -1,159 +0,0 @@
1
- import _object_spread from "@swc/helpers/src/_object_spread.mjs";
2
- import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
3
- import { jsx as _jsx } from "@ice/jsx-runtime/jsx-runtime";
4
- import * as React from "react";
5
- import { useState, useEffect, useRef } from "react";
6
- import styles from "./index.module.less";
7
- import { Table as AntdTable } from "antd";
8
- import TextTootip from "../textTootip";
9
- const widthPercentage = /^\d+%$/;
10
- const widthPx = /^\d+px$/;
11
- // const defaultWidthRang: widthRangType = [180, 240, 320]; //默认自适应的值 [最小值,最佳值,最大值]
12
- //传入的参数为onCell==>需要进行函数合并
13
- const Table = (props)=>{
14
- const ref = useRef(null);
15
- const { defaultWidthRang =[
16
- 180,
17
- 240,
18
- 320
19
- ] } = props;
20
- const [columns, setColumns] = useState(props.columns || []);
21
- const [scrollObject, setScrollObject] = useState(props.scroll || undefined);
22
- let { columnTootipClassName , columnTootipColor } = props;
23
- const initColumns = ()=>{
24
- let { columns: selfColumns , scrollWidth } = initColumnsWidth(props.columns, ref.current.offsetWidth);
25
- setColumns(selfColumns);
26
- let obj = scrollObject ? scrollObject : {};
27
- obj = _object_spread_props(_object_spread({}, obj), {
28
- // x: scrollWidth,
29
- x: ref.current.offsetWidth
30
- });
31
- setScrollObject(obj);
32
- };
33
- const initColumnsWidth = (columns, tableWidth)=>{
34
- let autoNum = 0; //自适应的列数
35
- let minWidth = 0; //最小宽度
36
- let scrollWidth = 0; //出现滚动条时 滚动宽度
37
- columns = columns.map((item)=>{
38
- item.width = item.width || "auto";
39
- // item.width=parseFloat(item.width)
40
- if (widthPercentage.test(item.width)) //检测到宽度为百分比 则转换为具体px 如大于100% 则视为自适应
41
- item.width = parseFloat(item.width) >= 100 ? "auto" : tableWidth * item.width;
42
- else if (typeof item.width === "number") //检测为number 则为具体的像素值
43
- item.width = item.width;
44
- else if (widthPx.test(item.width)) //检测为 "12px" 则为具体的值
45
- item.width = parseFloat(item.width);
46
- else //其它为auto
47
- item.width = "auto";
48
- if (item.width === "auto") {
49
- autoNum += 1;
50
- if (!item.widthRang) //没有设置自适应区间的 走默认区间
51
- item.widthRang = defaultWidthRang;
52
- minWidth += item.widthRang[0];
53
- scrollWidth += item.widthRang[1];
54
- } else {
55
- minWidth += item.width;
56
- scrollWidth += item.width;
57
- }
58
- if (!item.onColumnCell) item.onColumnCell = item.onCell || (()=>({}));
59
- if (!item.render) {
60
- item.ellipsis = {
61
- showTitle: false
62
- };
63
- item.render = (text)=>{
64
- return /*#__PURE__*/ _jsx(TextTootip, {
65
- width: item.width,
66
- title: text,
67
- trigger: "hover",
68
- overlayClassName: columnTootipClassName || styles.columnTootipClassName,
69
- color: columnTootipColor || "#FFF",
70
- children: /*#__PURE__*/ _jsx("span", {
71
- children: text
72
- })
73
- });
74
- };
75
- }
76
- return item;
77
- });
78
- let diff = tableWidth - minWidth;
79
- if (diff > 0) {
80
- let avgWidth = 0;
81
- // 有多余空间 平均分配至每个自适应的列
82
- columns = columns.map((item)=>{
83
- if (item.width === "auto") {
84
- //自适应列均分 多出来的宽度(除最后一列)
85
- item.width = item.widthRang[0] + diff / autoNum;
86
- if (item.width > item.widthRang[2]) {
87
- //超过最大宽度 则取最大宽度 多出来的值均分至每一列
88
- avgWidth += item.width - item.widthRang[2];
89
- item.width = item.widthRang[2];
90
- }
91
- }
92
- return item;
93
- });
94
- columns = columns.map((item, index)=>{
95
- //存在适应自适应列侯 多余宽度 则平均分配每一列(除最后一列)
96
- if (avgWidth > 0 && index !== columns.length - 1) item.width += avgWidth / columns.length - 1;
97
- return item;
98
- });
99
- } else if (diff < 0) //宽度不足 自适应列取最佳宽度 并出现滚动条 且第一列 最后一列 固定
100
- columns = columns.map((item, index)=>{
101
- if (index === 0 || index === columns.length - 1) item.fixed = index === 0 ? "left" : "right";
102
- if (item.width === "auto") item.width = item.widthRang[1];
103
- return item;
104
- });
105
- else // 相等 自适应列取最小宽度
106
- columns = columns.map((item)=>{
107
- if (item.width === "auto") item.width = item.widthRang[0];
108
- return item;
109
- });
110
- columns.map((item)=>{
111
- item.onCell = (record, rowIndex)=>{
112
- let obj = typeof item.onColumnCell === "function" ? item.onColumnCell(record, rowIndex) : {};
113
- obj.style = obj.style ? obj.style : {};
114
- return _object_spread_props(_object_spread({}, obj), {
115
- style: _object_spread({
116
- maxWidth: item.width + "px"
117
- }, obj.style)
118
- });
119
- };
120
- return item;
121
- });
122
- return {
123
- columns,
124
- scrollWidth
125
- };
126
- };
127
- useEffect(()=>{
128
- initColumns();
129
- window.addEventListener("resize", initColumns);
130
- return ()=>{
131
- window.removeEventListener("resize", initColumns);
132
- };
133
- }, [
134
- props.columns
135
- ]);
136
- let config = _object_spread_props(_object_spread({
137
- bordered: false
138
- }, props), {
139
- columns,
140
- scroll: scrollObject || {
141
- x: "none"
142
- }
143
- });
144
- return /*#__PURE__*/ _jsx("div", {
145
- className: styles.Table,
146
- ref: ref,
147
- children: /*#__PURE__*/ _jsx(AntdTable, _object_spread({}, config))
148
- });
149
- };
150
- // let BhdTable=Provider(Table)
151
- Table.SELECTION_COLUMN = AntdTable.SELECTION_COLUMN;
152
- Table.EXPAND_COLUMN = AntdTable.EXPAND_COLUMN;
153
- Table.SELECTION_ALL = AntdTable.SELECTION_ALL;
154
- Table.SELECTION_INVERT = AntdTable.SELECTION_INVERT;
155
- Table.SELECTION_NONE = AntdTable.SELECTION_NONE;
156
- Table.Column = AntdTable.Column;
157
- Table.ColumnGroup = AntdTable.ColumnGroup;
158
- // Table.Summary = AntdTable.Summary;
159
- export default Table;
package/esm/table/index22.d.ts DELETED
@@ -1,12 +0,0 @@
1
- /// <reference types="react" />
2
- declare const Table: {
3
- (props: any): JSX.Element;
4
- SELECTION_COLUMN: {};
5
- EXPAND_COLUMN: {};
6
- SELECTION_ALL: "SELECT_ALL";
7
- SELECTION_INVERT: "SELECT_INVERT";
8
- SELECTION_NONE: "SELECT_NONE";
9
- Column: typeof import("antd/es/table/Column").default;
10
- ColumnGroup: typeof import("antd/es/table/ColumnGroup").default;
11
- };
12
- export default Table;
package/esm/table/index22.js DELETED
@@ -1,162 +0,0 @@
1
- import _object_spread from "@swc/helpers/src/_object_spread.mjs";
2
- import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
3
- import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
4
- import { jsx as _jsx } from "@ice/jsx-runtime/jsx-runtime";
5
- import * as React from "react";
6
- import { useState, useEffect, useRef } from "react";
7
- import styles from "./index.module.less";
8
- import { Table as AntdTable } from "antd";
9
- import TextTootip from "../textTootip";
10
- var widthPercentage = /^\d+%$/;
11
- var widthPx = /^\d+px$/;
12
- // const defaultWidthRang: widthRangType = [180, 240, 320]; //默认自适应的值 [最小值,最佳值,最大值]
13
- //传入的参数为onCell==>需要进行函数合并
14
- var Table = function(props) {
15
- var ref = useRef(null);
16
- var _props_defaultWidthRang = props.defaultWidthRang, defaultWidthRang = _props_defaultWidthRang === void 0 ? [
17
- 180,
18
- 240,
19
- 320
20
- ] : _props_defaultWidthRang;
21
- var _useState = _sliced_to_array(useState(props.columns || []), 2), columns = _useState[0], setColumns = _useState[1];
22
- var _useState1 = _sliced_to_array(useState(props.scroll || undefined), 2), scrollObject = _useState1[0], setScrollObject = _useState1[1];
23
- var columnTootipClassName = props.columnTootipClassName, columnTootipColor = props.columnTootipColor;
24
- var initColumns = function() {
25
- var _initColumnsWidth = initColumnsWidth(props.columns, ref.current.offsetWidth), selfColumns = _initColumnsWidth.columns, scrollWidth = _initColumnsWidth.scrollWidth;
26
- setColumns(selfColumns);
27
- var obj = scrollObject ? scrollObject : {};
28
- obj = _object_spread_props(_object_spread({}, obj), {
29
- // x: scrollWidth,
30
- x: ref.current.offsetWidth
31
- });
32
- setScrollObject(obj);
33
- };
34
- var initColumnsWidth = function(columns, tableWidth) {
35
- var autoNum = 0; //自适应的列数
36
- var minWidth = 0; //最小宽度
37
- var scrollWidth = 0; //出现滚动条时 滚动宽度
38
- columns = columns.map(function(item) {
39
- item.width = item.width || "auto";
40
- // item.width=parseFloat(item.width)
41
- if (widthPercentage.test(item.width)) //检测到宽度为百分比 则转换为具体px 如大于100% 则视为自适应
42
- item.width = parseFloat(item.width) >= 100 ? "auto" : tableWidth * item.width;
43
- else if (typeof item.width === "number") //检测为number 则为具体的像素值
44
- item.width = item.width;
45
- else if (widthPx.test(item.width)) //检测为 "12px" 则为具体的值
46
- item.width = parseFloat(item.width);
47
- else //其它为auto
48
- item.width = "auto";
49
- if (item.width === "auto") {
50
- autoNum += 1;
51
- if (!item.widthRang) //没有设置自适应区间的 走默认区间
52
- item.widthRang = defaultWidthRang;
53
- minWidth += item.widthRang[0];
54
- scrollWidth += item.widthRang[1];
55
- } else {
56
- minWidth += item.width;
57
- scrollWidth += item.width;
58
- }
59
- if (!item.onColumnCell) item.onColumnCell = item.onCell || function() {
60
- return {};
61
- };
62
- if (!item.render) {
63
- item.ellipsis = {
64
- showTitle: false
65
- };
66
- item.render = function(text) {
67
- return /*#__PURE__*/ _jsx(TextTootip, {
68
- width: item.width,
69
- title: text,
70
- trigger: "hover",
71
- overlayClassName: columnTootipClassName || styles.columnTootipClassName,
72
- color: columnTootipColor || "#FFF",
73
- children: /*#__PURE__*/ _jsx("span", {
74
- children: text
75
- })
76
- });
77
- };
78
- }
79
- return item;
80
- });
81
- var diff = tableWidth - minWidth;
82
- if (diff > 0) {
83
- var avgWidth = 0;
84
- // 有多余空间 平均分配至每个自适应的列
85
- columns = columns.map(function(item) {
86
- if (item.width === "auto") {
87
- //自适应列均分 多出来的宽度(除最后一列)
88
- item.width = item.widthRang[0] + diff / autoNum;
89
- if (item.width > item.widthRang[2]) {
90
- //超过最大宽度 则取最大宽度 多出来的值均分至每一列
91
- avgWidth += item.width - item.widthRang[2];
92
- item.width = item.widthRang[2];
93
- }
94
- }
95
- return item;
96
- });
97
- columns = columns.map(function(item, index) {
98
- //存在适应自适应列侯 多余宽度 则平均分配每一列(除最后一列)
99
- if (avgWidth > 0 && index !== columns.length - 1) item.width += avgWidth / columns.length - 1;
100
- return item;
101
- });
102
- } else if (diff < 0) //宽度不足 自适应列取最佳宽度 并出现滚动条 且第一列 最后一列 固定
103
- columns = columns.map(function(item, index) {
104
- if (index === 0 || index === columns.length - 1) item.fixed = index === 0 ? "left" : "right";
105
- if (item.width === "auto") item.width = item.widthRang[1];
106
- return item;
107
- });
108
- else // 相等 自适应列取最小宽度
109
- columns = columns.map(function(item) {
110
- if (item.width === "auto") item.width = item.widthRang[0];
111
- return item;
112
- });
113
- columns.map(function(item) {
114
- item.onCell = function(record, rowIndex) {
115
- var obj = typeof item.onColumnCell === "function" ? item.onColumnCell(record, rowIndex) : {};
116
- obj.style = obj.style ? obj.style : {};
117
- return _object_spread_props(_object_spread({}, obj), {
118
- style: _object_spread({
119
- maxWidth: item.width + "px"
120
- }, obj.style)
121
- });
122
- };
123
- return item;
124
- });
125
- return {
126
- columns: columns,
127
- scrollWidth: scrollWidth
128
- };
129
- };
130
- useEffect(function() {
131
- initColumns();
132
- window.addEventListener("resize", initColumns);
133
- return function() {
134
- window.removeEventListener("resize", initColumns);
135
- };
136
- }, [
137
- props.columns
138
- ]);
139
- var config = _object_spread_props(_object_spread({
140
- bordered: false
141
- }, props), {
142
- columns: columns,
143
- scroll: scrollObject || {
144
- x: "none"
145
- }
146
- });
147
- return /*#__PURE__*/ _jsx("div", {
148
- className: styles.Table,
149
- ref: ref,
150
- children: /*#__PURE__*/ _jsx(AntdTable, _object_spread({}, config))
151
- });
152
- };
153
- // let BhdTable=Provider(Table)
154
- Table.SELECTION_COLUMN = AntdTable.SELECTION_COLUMN;
155
- Table.EXPAND_COLUMN = AntdTable.EXPAND_COLUMN;
156
- Table.SELECTION_ALL = AntdTable.SELECTION_ALL;
157
- Table.SELECTION_INVERT = AntdTable.SELECTION_INVERT;
158
- Table.SELECTION_NONE = AntdTable.SELECTION_NONE;
159
- Table.Column = AntdTable.Column;
160
- Table.ColumnGroup = AntdTable.ColumnGroup;
161
- // Table.Summary = AntdTable.Summary;
162
- export default Table;