forstok-ui-lib 8.3.20 → 8.3.22
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/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/table/index.tsx +141 -80
package/package.json
CHANGED
|
@@ -1,120 +1,181 @@
|
|
|
1
|
-
import { isValidElement, useEffect } from
|
|
1
|
+
import { isValidElement, useEffect } from "react";
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
TableContainer,
|
|
5
|
+
TableHeadRow,
|
|
6
|
+
TableHeadColumn,
|
|
7
|
+
TableBodyRow,
|
|
8
|
+
TableBodyColumn,
|
|
9
|
+
TableFootRow,
|
|
10
|
+
TableFootColumn,
|
|
11
|
+
TableFinalRow,
|
|
12
|
+
TableFinalColumn,
|
|
13
|
+
TableBoldFootRow,
|
|
14
|
+
TableBoldFootColumn,
|
|
15
|
+
} from "./style";
|
|
4
16
|
|
|
5
|
-
import type { TTable } from
|
|
17
|
+
import type { TTable } from "./typed";
|
|
6
18
|
|
|
7
|
-
const nameDefValue = `table_${new Date().getTime()}
|
|
19
|
+
const nameDefValue = `table_${new Date().getTime()}`;
|
|
8
20
|
|
|
9
21
|
const TableComponent = (props: TTable) => {
|
|
10
22
|
const {
|
|
11
23
|
children,
|
|
12
24
|
$mode,
|
|
13
|
-
$name=nameDefValue,
|
|
25
|
+
$name = nameDefValue,
|
|
14
26
|
$template,
|
|
15
27
|
isForceUpdate,
|
|
16
|
-
setForceUpdate
|
|
17
|
-
} = props
|
|
28
|
+
setForceUpdate,
|
|
29
|
+
} = props;
|
|
18
30
|
|
|
19
31
|
useEffect(() => {
|
|
20
32
|
if (isForceUpdate) {
|
|
21
|
-
setForceUpdate && setForceUpdate(false)
|
|
33
|
+
setForceUpdate && setForceUpdate(false);
|
|
22
34
|
}
|
|
23
|
-
}, [isForceUpdate, setForceUpdate])
|
|
35
|
+
}, [isForceUpdate, setForceUpdate]);
|
|
24
36
|
|
|
25
37
|
const evGenerateEl = (part: string) => {
|
|
26
|
-
return children.filter(child => {
|
|
38
|
+
return children.filter((child) => {
|
|
27
39
|
if (isValidElement(child)) {
|
|
28
|
-
return (child.props as any)[
|
|
40
|
+
return (child.props as any)["aria-label"] === part;
|
|
29
41
|
} else {
|
|
30
|
-
return null
|
|
42
|
+
return null;
|
|
31
43
|
}
|
|
32
|
-
})
|
|
33
|
-
}
|
|
44
|
+
});
|
|
45
|
+
};
|
|
34
46
|
|
|
35
47
|
const evGenerateChildrenArrEl = (childrenFilter: any) => {
|
|
36
|
-
let childrenArray: any[] = []
|
|
48
|
+
let childrenArray: any[] = [];
|
|
37
49
|
if (childrenFilter.length) {
|
|
38
50
|
if (childrenFilter[0].props.children.length > 1) {
|
|
39
|
-
let newArrayBodyChildren: any[] = []
|
|
51
|
+
let newArrayBodyChildren: any[] = [];
|
|
40
52
|
childrenFilter[0].props.children.forEach((body: any) => {
|
|
41
|
-
let _bodyArray = Array.isArray(body) ? body : [].concat(body)
|
|
53
|
+
let _bodyArray = Array.isArray(body) ? body : [].concat(body);
|
|
42
54
|
_bodyArray.forEach((_body: any) => {
|
|
43
|
-
newArrayBodyChildren.push(_body)
|
|
44
|
-
})
|
|
45
|
-
})
|
|
46
|
-
childrenArray = newArrayBodyChildren
|
|
55
|
+
newArrayBodyChildren.push(_body);
|
|
56
|
+
});
|
|
57
|
+
});
|
|
58
|
+
childrenArray = newArrayBodyChildren;
|
|
47
59
|
} else {
|
|
48
|
-
childrenArray = Array.isArray(childrenFilter[0].props.children)
|
|
60
|
+
childrenArray = Array.isArray(childrenFilter[0].props.children)
|
|
61
|
+
? childrenFilter[0].props.children
|
|
62
|
+
: [].concat(childrenFilter[0].props.children);
|
|
49
63
|
}
|
|
50
64
|
}
|
|
51
|
-
return childrenArray
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
const HeadChildrenFilter = evGenerateEl(
|
|
55
|
-
const TableHeadEl =
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
65
|
+
return childrenArray;
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
const HeadChildrenFilter = evGenerateEl("head");
|
|
69
|
+
const TableHeadEl =
|
|
70
|
+
HeadChildrenFilter && isValidElement(HeadChildrenFilter[0])
|
|
71
|
+
? (HeadChildrenFilter[0] as any).props.children
|
|
72
|
+
.filter((head: any) => head !== null)
|
|
73
|
+
.map((head: any, index: number) => (
|
|
74
|
+
<TableHeadColumn
|
|
75
|
+
key={index}
|
|
76
|
+
role="columnheader"
|
|
77
|
+
{...(head.props.style && { style: head.props.style })}
|
|
78
|
+
{...(head.props.className && { className: head.props.className })}
|
|
79
|
+
{...head.props}
|
|
80
|
+
>
|
|
81
|
+
{head.props.children}
|
|
82
|
+
</TableHeadColumn>
|
|
83
|
+
))
|
|
84
|
+
: null;
|
|
85
|
+
|
|
86
|
+
const BodyChildrenFilter = evGenerateEl("body");
|
|
87
|
+
const BodyChildrenArray = BodyChildrenFilter.length
|
|
88
|
+
? evGenerateChildrenArrEl(BodyChildrenFilter)
|
|
89
|
+
: null;
|
|
90
|
+
const TableBodyEl = BodyChildrenArray
|
|
91
|
+
? BodyChildrenArray.map((body: any, index: number) => (
|
|
92
|
+
<TableBodyRow
|
|
93
|
+
key={index}
|
|
94
|
+
role="row"
|
|
95
|
+
{...(body.props?.id && { id: body.props.id })}
|
|
96
|
+
{...(body.props.style && { style: body.props.style })}
|
|
97
|
+
{...(body.props?.className && { className: body.props.className })}
|
|
98
|
+
{...body.props}
|
|
99
|
+
>
|
|
100
|
+
{body.props.children
|
|
101
|
+
.filter((child: any) => child !== null)
|
|
102
|
+
.map((child: any, indexChild: number) => (
|
|
103
|
+
<TableBodyColumn key={indexChild} {...child.props}>
|
|
104
|
+
{child.props.children}
|
|
105
|
+
</TableBodyColumn>
|
|
106
|
+
))}
|
|
107
|
+
</TableBodyRow>
|
|
108
|
+
))
|
|
109
|
+
: null;
|
|
77
110
|
|
|
78
|
-
const FootChildrenFilter = evGenerateEl(
|
|
79
|
-
const FootChildrenArray = FootChildrenFilter.length
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
111
|
+
const FootChildrenFilter = evGenerateEl("foot");
|
|
112
|
+
const FootChildrenArray = FootChildrenFilter.length
|
|
113
|
+
? evGenerateChildrenArrEl(FootChildrenFilter)
|
|
114
|
+
: null;
|
|
115
|
+
const TableFootEl = FootChildrenArray
|
|
116
|
+
? FootChildrenArray.map((foot: any, index: number) => (
|
|
117
|
+
<TableFootRow key={index} role="row">
|
|
118
|
+
{foot.props.children
|
|
119
|
+
.filter((child: any) => child !== null)
|
|
120
|
+
.map((child: any, indexChild: number) => (
|
|
121
|
+
<TableFootColumn key={indexChild} {...child.props}>
|
|
122
|
+
{child.props.children}
|
|
123
|
+
</TableFootColumn>
|
|
124
|
+
))}
|
|
125
|
+
</TableFootRow>
|
|
126
|
+
))
|
|
127
|
+
: null;
|
|
86
128
|
|
|
87
|
-
const BoldFootChildrenFilter = evGenerateEl(
|
|
88
|
-
const BoldFootChildrenArray = BoldFootChildrenFilter.length
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
129
|
+
const BoldFootChildrenFilter = evGenerateEl("boldFoot");
|
|
130
|
+
const BoldFootChildrenArray = BoldFootChildrenFilter.length
|
|
131
|
+
? evGenerateChildrenArrEl(BoldFootChildrenFilter)
|
|
132
|
+
: null;
|
|
133
|
+
const TableBoldFootEl = BoldFootChildrenArray
|
|
134
|
+
? BoldFootChildrenArray.map((boldFoot: any, index: number) => (
|
|
135
|
+
<TableBoldFootRow key={index} role="row">
|
|
136
|
+
{boldFoot.props.children
|
|
137
|
+
.filter((child: any) => child !== null)
|
|
138
|
+
.map((child: any, indexChild: number) => (
|
|
139
|
+
<TableBoldFootColumn key={indexChild} {...child.props}>
|
|
140
|
+
{child.props.children}
|
|
141
|
+
</TableBoldFootColumn>
|
|
142
|
+
))}
|
|
143
|
+
</TableBoldFootRow>
|
|
144
|
+
))
|
|
145
|
+
: null;
|
|
95
146
|
|
|
96
|
-
const FinalChildrenFilter = evGenerateEl(
|
|
97
|
-
const FinalChildrenArray = FinalChildrenFilter.length
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
147
|
+
const FinalChildrenFilter = evGenerateEl("final");
|
|
148
|
+
const FinalChildrenArray = FinalChildrenFilter.length
|
|
149
|
+
? evGenerateChildrenArrEl(FinalChildrenFilter)
|
|
150
|
+
: null;
|
|
151
|
+
const TableFinalEl = FinalChildrenArray
|
|
152
|
+
? FinalChildrenArray.map((finalFoot: any, index: number) => (
|
|
153
|
+
<TableFinalRow key={index} role="row">
|
|
154
|
+
{finalFoot.props.children
|
|
155
|
+
.filter((child: any) => child !== null)
|
|
156
|
+
.map((child: any, indexChild: number) => (
|
|
157
|
+
<TableFinalColumn key={indexChild} {...child.props}>
|
|
158
|
+
{child.props.children}
|
|
159
|
+
</TableFinalColumn>
|
|
160
|
+
))}
|
|
161
|
+
</TableFinalRow>
|
|
162
|
+
))
|
|
163
|
+
: null;
|
|
103
164
|
|
|
104
165
|
return (
|
|
105
|
-
<TableContainer
|
|
106
|
-
$mode={$mode}
|
|
107
|
-
$name={$name}
|
|
108
|
-
$template={$template}
|
|
109
|
-
role=
|
|
166
|
+
<TableContainer
|
|
167
|
+
$mode={$mode}
|
|
168
|
+
$name={$name}
|
|
169
|
+
$template={$template}
|
|
170
|
+
role="table"
|
|
110
171
|
>
|
|
111
|
-
<TableHeadRow role=
|
|
172
|
+
<TableHeadRow role="rowheader">{TableHeadEl}</TableHeadRow>
|
|
112
173
|
{TableBodyEl}
|
|
113
174
|
{TableFootEl && TableFootEl}
|
|
114
175
|
{TableBoldFootEl && TableBoldFootEl}
|
|
115
176
|
{TableFinalEl && TableFinalEl}
|
|
116
177
|
</TableContainer>
|
|
117
|
-
)
|
|
118
|
-
}
|
|
178
|
+
);
|
|
179
|
+
};
|
|
119
180
|
|
|
120
|
-
export default TableComponent
|
|
181
|
+
export default TableComponent;
|