@xaypay/tui 0.0.117 → 0.0.118
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/README.md +92 -0
- package/dist/index.es.js +270 -143
- package/dist/index.js +270 -142
- package/package.json +1 -1
- package/src/components/radio/index.js +222 -41
- package/src/components/radio/radio.stories.js +52 -3
- package/src/components/table/index.js +38 -0
- package/src/components/table/table.module.css +1 -4
- package/src/components/table/td.js +13 -5
- package/src/components/table/th.js +4 -1
- package/src/stories/configuration.stories.mdx +39 -17
- package/src/stories/static/radio-usage.png +0 -0
- package/src/stories/usage.stories.mdx +5 -4
- package/tui.config.js +25 -3
- package/src/stories/static/single-checkbox-usage.png +0 -0
package/package.json
CHANGED
|
@@ -1,55 +1,236 @@
|
|
|
1
|
-
import React from 'react'
|
|
1
|
+
import React, { useState, useEffect } from 'react'
|
|
2
2
|
import PropTypes from 'prop-types'
|
|
3
3
|
import classNames from 'classnames'
|
|
4
|
-
import
|
|
4
|
+
import { v4 as uuidv4 } from 'uuid'
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
import { compereConfigs } from './../../utils'
|
|
7
|
+
|
|
8
|
+
export const RadioDirectionMode = {
|
|
9
|
+
VERTICAL: 'vertical',
|
|
10
|
+
HORINZONTAL: 'horizontal',
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export const Radio = ({
|
|
14
|
+
data,
|
|
15
|
+
size,
|
|
16
|
+
getData,
|
|
17
|
+
selected,
|
|
18
|
+
keyNames,
|
|
19
|
+
diraction,
|
|
20
|
+
className,
|
|
21
|
+
borderSize,
|
|
22
|
+
labelColor,
|
|
23
|
+
borderColor,
|
|
24
|
+
borderStyle,
|
|
25
|
+
labelFontSize,
|
|
26
|
+
labelFontFamily,
|
|
27
|
+
labelFontWeight,
|
|
28
|
+
labelLineHeight,
|
|
29
|
+
radioMarginRight,
|
|
30
|
+
borderActiveColor,
|
|
31
|
+
radioItemMarginRight,
|
|
32
|
+
radioItemMarginBottom,
|
|
33
|
+
}) => {
|
|
34
|
+
const configStyles = compereConfigs()
|
|
35
|
+
const classProps = classNames(className ? className : configStyles.RADIO.className)
|
|
36
|
+
const [innerData, setInnerData] = useState([])
|
|
37
|
+
const [radioInnerSize, setRadioInnerSize] = useState('')
|
|
38
|
+
const [radioInnerFormat, setRadioInnerFormat] = useState('')
|
|
39
|
+
const [innerSelectedData, setInnerSelectedData] = useState({})
|
|
40
|
+
|
|
41
|
+
const handleMouseEnter = (id, elemID) => {
|
|
42
|
+
const elem = document.querySelector(`#${elemID}`)
|
|
43
|
+
elem.style.backgroundColor =
|
|
44
|
+
id === innerSelectedData?.id
|
|
45
|
+
? borderActiveColor
|
|
46
|
+
? borderActiveColor
|
|
47
|
+
: configStyles.RADIO.borderActiveColor
|
|
48
|
+
: borderColor
|
|
49
|
+
? borderColor
|
|
50
|
+
: configStyles.RADIO.borderColor
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
const handleMouseLeave = (id, elemID) => {
|
|
54
|
+
const elem = document.querySelector(`#${elemID}`)
|
|
55
|
+
elem.style.backgroundColor =
|
|
56
|
+
id === innerSelectedData?.id
|
|
57
|
+
? borderActiveColor
|
|
58
|
+
? borderActiveColor
|
|
59
|
+
: configStyles.RADIO.borderActiveColor
|
|
60
|
+
: 'transparent'
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
const handleChecked = (selItem) => {
|
|
64
|
+
setInnerSelectedData(selItem)
|
|
65
|
+
getData && getData(selItem)
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
useEffect(() => {
|
|
69
|
+
if (Array.isArray(data)) {
|
|
70
|
+
setInnerData(data)
|
|
71
|
+
} else {
|
|
72
|
+
setInnerData([data])
|
|
73
|
+
}
|
|
74
|
+
}, [data])
|
|
75
|
+
|
|
76
|
+
useEffect(() => {
|
|
77
|
+
let radioSize = ''
|
|
78
|
+
let radioSizeFormat = ''
|
|
79
|
+
const checkSize = size || configStyles.RADIO.size
|
|
80
|
+
if (checkSize && typeof checkSize === 'string') {
|
|
81
|
+
if (checkSize.length > 0) {
|
|
82
|
+
checkSize.split('').map((item) => {
|
|
83
|
+
if (!isNaN(parseInt(item))) {
|
|
84
|
+
radioSize += item
|
|
85
|
+
} else {
|
|
86
|
+
radioSizeFormat += item
|
|
87
|
+
}
|
|
88
|
+
})
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
if (radioSize < '10') {
|
|
93
|
+
radioSize = '10'
|
|
94
|
+
}
|
|
95
|
+
setRadioInnerFormat(radioSizeFormat)
|
|
96
|
+
setRadioInnerSize(`${parseInt(radioSize) / 2}`)
|
|
97
|
+
}, [size, configStyles.RADIO.size])
|
|
98
|
+
|
|
99
|
+
useEffect(() => {
|
|
100
|
+
setInnerSelectedData(selected)
|
|
101
|
+
}, [selected])
|
|
9
102
|
|
|
10
103
|
return (
|
|
11
|
-
|
|
12
|
-
{
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
104
|
+
<div
|
|
105
|
+
className={classProps}
|
|
106
|
+
style={{
|
|
107
|
+
display: 'flex',
|
|
108
|
+
flexDirection: diraction === 'horizontal' ? 'row' : 'column',
|
|
109
|
+
}}
|
|
110
|
+
>
|
|
111
|
+
{innerData &&
|
|
112
|
+
innerData.length > 0 &&
|
|
113
|
+
innerData.map((item, index) => {
|
|
114
|
+
const elemId = `TUI_${index}_radio_inner` + uuidv4()
|
|
115
|
+
return (
|
|
116
|
+
<div
|
|
117
|
+
key={`TUI_${index}_radio`}
|
|
118
|
+
style={{
|
|
119
|
+
display: 'flex',
|
|
120
|
+
cursor: item.disabled ? 'not-allowed' : 'pointer',
|
|
121
|
+
width: 'fit-content',
|
|
122
|
+
alignItems: 'center',
|
|
123
|
+
marginRight:
|
|
124
|
+
diraction === 'horizontal'
|
|
125
|
+
? radioItemMarginRight
|
|
126
|
+
? radioItemMarginRight
|
|
127
|
+
: configStyles.RADIO.radioItemMarginRight
|
|
128
|
+
: '0px',
|
|
129
|
+
marginBottom:
|
|
130
|
+
diraction === 'vertical'
|
|
131
|
+
? radioItemMarginBottom
|
|
132
|
+
? radioItemMarginBottom
|
|
133
|
+
: configStyles.RADIO.radioItemMarginBottom
|
|
134
|
+
: '0px',
|
|
135
|
+
}}
|
|
136
|
+
onClick={item.disabled ? (_) => _ : () => handleChecked(item)}
|
|
137
|
+
onMouseEnter={() => handleMouseEnter(item[keyNames.id], elemId)}
|
|
138
|
+
onMouseLeave={() => handleMouseLeave(item[keyNames.id], elemId)}
|
|
139
|
+
>
|
|
140
|
+
<div
|
|
141
|
+
style={{
|
|
142
|
+
display: 'flex',
|
|
143
|
+
alignItems: 'center',
|
|
144
|
+
borderRadius: '100%',
|
|
145
|
+
justifyContent: 'center',
|
|
146
|
+
width: size ? size : configStyles.RADIO.size,
|
|
147
|
+
height: size ? size : configStyles.RADIO.size,
|
|
148
|
+
marginRight: item.label
|
|
149
|
+
? radioMarginRight
|
|
150
|
+
? radioMarginRight
|
|
151
|
+
: configStyles.RADIO.radioMarginRight
|
|
152
|
+
: '0px',
|
|
153
|
+
border: `${borderSize ? borderSize : configStyles.RADIO.borderSize} ${
|
|
154
|
+
borderStyle ? borderStyle : configStyles.RADIO.borderStyle
|
|
155
|
+
}`,
|
|
156
|
+
borderColor:
|
|
157
|
+
item[keyNames.id] === innerSelectedData?.id
|
|
158
|
+
? borderActiveColor
|
|
159
|
+
? borderActiveColor
|
|
160
|
+
: configStyles.RADIO.borderActiveColor
|
|
161
|
+
: borderColor
|
|
162
|
+
? borderColor
|
|
163
|
+
: configStyles.RADIO.borderColor,
|
|
164
|
+
}}
|
|
165
|
+
>
|
|
166
|
+
<div
|
|
167
|
+
id={elemId}
|
|
168
|
+
style={{
|
|
169
|
+
borderRadius: '100%',
|
|
170
|
+
width: radioInnerSize + radioInnerFormat,
|
|
171
|
+
height: radioInnerSize + radioInnerFormat,
|
|
172
|
+
backgroundColor:
|
|
173
|
+
item[keyNames.id] === innerSelectedData?.id
|
|
174
|
+
? borderActiveColor
|
|
175
|
+
? borderActiveColor
|
|
176
|
+
: configStyles.RADIO.borderActiveColor
|
|
177
|
+
: 'transparent',
|
|
178
|
+
}}
|
|
179
|
+
></div>
|
|
180
|
+
</div>
|
|
181
|
+
|
|
182
|
+
{item[keyNames.label] ? (
|
|
183
|
+
<span
|
|
184
|
+
style={{
|
|
185
|
+
color: labelColor ? labelColor : configStyles.RADIO.labelColor,
|
|
186
|
+
fontSize: labelFontSize ? labelFontSize : configStyles.RADIO.labelFontSize,
|
|
187
|
+
fontFamily: labelFontFamily
|
|
188
|
+
? labelFontFamily
|
|
189
|
+
: configStyles.RADIO.labelFontFamily,
|
|
190
|
+
fontWeight: labelFontWeight
|
|
191
|
+
? labelFontWeight
|
|
192
|
+
: configStyles.RADIO.labelFontWeight,
|
|
193
|
+
lineHeight: labelLineHeight
|
|
194
|
+
? labelLineHeight
|
|
195
|
+
: configStyles.RADIO.labelLineHeight,
|
|
196
|
+
}}
|
|
197
|
+
onMouseEnter={() => handleMouseEnter(item[keyNames.id], elemId)}
|
|
198
|
+
onMouseLeave={() => handleMouseLeave(item[keyNames.id], elemId)}
|
|
199
|
+
>
|
|
200
|
+
{item[keyNames.label]}
|
|
201
|
+
</span>
|
|
202
|
+
) : (
|
|
203
|
+
''
|
|
204
|
+
)}
|
|
205
|
+
</div>
|
|
206
|
+
)
|
|
207
|
+
})}
|
|
208
|
+
</div>
|
|
35
209
|
)
|
|
36
210
|
}
|
|
37
211
|
|
|
38
212
|
Radio.propTypes = {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
required: PropTypes.bool,
|
|
42
|
-
defaultChecked: PropTypes.bool,
|
|
43
|
-
disabled: PropTypes.bool,
|
|
44
|
-
name: PropTypes.string,
|
|
45
|
-
value: PropTypes.string,
|
|
46
|
-
jsonData: PropTypes.string,
|
|
47
|
-
label: PropTypes.string,
|
|
213
|
+
size: PropTypes.string,
|
|
214
|
+
selected: PropTypes.object,
|
|
48
215
|
keyNames: PropTypes.object,
|
|
216
|
+
className: PropTypes.string,
|
|
217
|
+
borderSize: PropTypes.string,
|
|
218
|
+
labelColor: PropTypes.string,
|
|
219
|
+
borderColor: PropTypes.string,
|
|
220
|
+
borderStyle: PropTypes.string,
|
|
221
|
+
labelFontSize: PropTypes.string,
|
|
222
|
+
labelFontFamily: PropTypes.string,
|
|
223
|
+
labelFontWeight: PropTypes.string,
|
|
224
|
+
labelLineHeight: PropTypes.string,
|
|
225
|
+
radioMarginRight: PropTypes.string,
|
|
226
|
+
getData: PropTypes.func.isRequired,
|
|
227
|
+
borderActiveColor: PropTypes.string,
|
|
228
|
+
radioItemMarginRight: PropTypes.string,
|
|
229
|
+
radioItemMarginBottom: PropTypes.string,
|
|
230
|
+
diraction: PropTypes.oneOf(Object.values(RadioDirectionMode)),
|
|
231
|
+
data: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
|
|
49
232
|
}
|
|
50
233
|
|
|
51
234
|
Radio.defaultProps = {
|
|
52
|
-
|
|
53
|
-
jsonData:
|
|
54
|
-
'[{"value":"email", "name":"contact", "label":"Email", "id":"contactChoice1"}, {"value":"phone", "name":"contact", "label":"Phone", "id":"contactChoice2"}]',
|
|
235
|
+
diraction: 'vertical',
|
|
55
236
|
}
|
|
@@ -1,10 +1,59 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { Radio } from '.'
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
import { Radio, RadioDirectionMode } from '.'
|
|
3
3
|
export default {
|
|
4
4
|
component: Radio,
|
|
5
5
|
title: 'Components/Radio',
|
|
6
|
+
argsType: {
|
|
7
|
+
direction: {
|
|
8
|
+
options: Object.values(RadioDirectionMode),
|
|
9
|
+
},
|
|
10
|
+
},
|
|
6
11
|
}
|
|
7
12
|
|
|
8
|
-
const
|
|
13
|
+
const radioData = [
|
|
14
|
+
{
|
|
15
|
+
id: 1,
|
|
16
|
+
disabled: false,
|
|
17
|
+
label: 'radio label 1',
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
id: 2,
|
|
21
|
+
disabled: false,
|
|
22
|
+
label: 'radio label 2',
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
id: 3,
|
|
26
|
+
disabled: true,
|
|
27
|
+
label: 'radio label 3',
|
|
28
|
+
},
|
|
29
|
+
]
|
|
30
|
+
|
|
31
|
+
const selectedRadio = {
|
|
32
|
+
id: 3,
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
const Template = (args) => {
|
|
36
|
+
const [innerData] = useState(radioData)
|
|
37
|
+
const [innerSelectedData, setInnerSelectedData] = useState(selectedRadio)
|
|
38
|
+
|
|
39
|
+
const handleGetData = (selected) => {
|
|
40
|
+
console.log(selected, 'selected - - -')
|
|
41
|
+
setInnerSelectedData(selected)
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
return (
|
|
45
|
+
<Radio
|
|
46
|
+
{...args}
|
|
47
|
+
data={innerData}
|
|
48
|
+
getData={handleGetData}
|
|
49
|
+
selected={innerSelectedData}
|
|
50
|
+
keyNames={{
|
|
51
|
+
id: 'id',
|
|
52
|
+
label: 'label',
|
|
53
|
+
disabled: 'disabled',
|
|
54
|
+
}}
|
|
55
|
+
/>
|
|
56
|
+
)
|
|
57
|
+
}
|
|
9
58
|
|
|
10
59
|
export const RadioButton = Template.bind({})
|
|
@@ -19,6 +19,8 @@ export const Table = ({
|
|
|
19
19
|
tableRowRadius,
|
|
20
20
|
tableRowBGColor,
|
|
21
21
|
tableRowBoxShadow,
|
|
22
|
+
tableColumnMaxWidth,
|
|
23
|
+
tableColumnMinWidth,
|
|
22
24
|
|
|
23
25
|
tHeadColor,
|
|
24
26
|
tHeadFamily,
|
|
@@ -41,6 +43,8 @@ export const Table = ({
|
|
|
41
43
|
|
|
42
44
|
className,
|
|
43
45
|
openListColor,
|
|
46
|
+
openListFontSize,
|
|
47
|
+
openListFontFamily,
|
|
44
48
|
hideBorder,
|
|
45
49
|
}) => {
|
|
46
50
|
const [body, setBody] = useState([])
|
|
@@ -618,6 +622,16 @@ export const Table = ({
|
|
|
618
622
|
: configStyles.TABLE.tHeadBorderRadius
|
|
619
623
|
: '0px'
|
|
620
624
|
}
|
|
625
|
+
tableColumnMinWidth={
|
|
626
|
+
tableColumnMinWidth
|
|
627
|
+
? tableColumnMinWidth
|
|
628
|
+
: configStyles.TABLE.tableColumnMinWidth
|
|
629
|
+
}
|
|
630
|
+
tableColumnMaxWidth={
|
|
631
|
+
tableColumnMaxWidth
|
|
632
|
+
? tableColumnMaxWidth
|
|
633
|
+
: configStyles.TABLE.tableColumnMaxWidth
|
|
634
|
+
}
|
|
621
635
|
/>
|
|
622
636
|
)
|
|
623
637
|
})}
|
|
@@ -667,6 +681,26 @@ export const Table = ({
|
|
|
667
681
|
openListColor={
|
|
668
682
|
openListColor ? openListColor : configStyles.TABLE.openListColor
|
|
669
683
|
}
|
|
684
|
+
tableColumnMinWidth={
|
|
685
|
+
tableColumnMinWidth
|
|
686
|
+
? tableColumnMinWidth
|
|
687
|
+
: configStyles.TABLE.tableColumnMinWidth
|
|
688
|
+
}
|
|
689
|
+
tableColumnMaxWidth={
|
|
690
|
+
tableColumnMaxWidth
|
|
691
|
+
? tableColumnMaxWidth
|
|
692
|
+
: configStyles.TABLE.tableColumnMaxWidth
|
|
693
|
+
}
|
|
694
|
+
openListFontSize={
|
|
695
|
+
openListFontSize
|
|
696
|
+
? openListFontSize
|
|
697
|
+
: configStyles.TABLE.openListFontSize
|
|
698
|
+
}
|
|
699
|
+
openListFontFamily={
|
|
700
|
+
openListFontFamily
|
|
701
|
+
? openListFontFamily
|
|
702
|
+
: configStyles.TABLE.openListFontFamily
|
|
703
|
+
}
|
|
670
704
|
handleCheckedBody={handleCheckedBody}
|
|
671
705
|
handleBodyActionClick={handleBodyActionClick}
|
|
672
706
|
handleMoreOptionsClick={handleMoreOptionsClick}
|
|
@@ -725,6 +759,8 @@ Table.propTypes = {
|
|
|
725
759
|
tableRowRadius: PropTypes.string,
|
|
726
760
|
tableRowBGColor: PropTypes.string,
|
|
727
761
|
tableRowBoxShadow: PropTypes.string,
|
|
762
|
+
tableColumnMaxWidth: PropTypes.string,
|
|
763
|
+
tableColumnMinWidth: PropTypes.string,
|
|
728
764
|
|
|
729
765
|
tHeadColor: PropTypes.string,
|
|
730
766
|
tHeadFamily: PropTypes.string,
|
|
@@ -747,5 +783,7 @@ Table.propTypes = {
|
|
|
747
783
|
className: PropTypes.string,
|
|
748
784
|
tBodyRowBorder: PropTypes.string,
|
|
749
785
|
openListColor: PropTypes.string,
|
|
786
|
+
openListFontSize: PropTypes.string,
|
|
787
|
+
openListFontFamily: PropTypes.string,
|
|
750
788
|
hideBorder: PropTypes.bool,
|
|
751
789
|
}
|
|
@@ -23,7 +23,11 @@ const TD = ({
|
|
|
23
23
|
tBodyFontFamily,
|
|
24
24
|
tBodyFontWeight,
|
|
25
25
|
handleCheckDots,
|
|
26
|
+
openListFontSize,
|
|
26
27
|
handleCheckedBody,
|
|
28
|
+
openListFontFamily,
|
|
29
|
+
tableColumnMinWidth,
|
|
30
|
+
tableColumnMaxWidth,
|
|
27
31
|
handleBodyActionClick,
|
|
28
32
|
handleMoreOptionsClick,
|
|
29
33
|
handleContentListClick,
|
|
@@ -78,13 +82,14 @@ const TD = ({
|
|
|
78
82
|
width: 'auto',
|
|
79
83
|
color: tBodyColor,
|
|
80
84
|
verticalAlign: 'top',
|
|
81
|
-
whiteSpace: 'nowrap',
|
|
82
85
|
padding: tBodyPadding,
|
|
83
86
|
fontSize: tBodyFontSize,
|
|
84
87
|
borderRight: borderRight,
|
|
85
88
|
textAlign: tBodyTextAlign,
|
|
86
89
|
fontFamily: tBodyFontFamily,
|
|
87
90
|
fontWeight: tBodyFontWeight,
|
|
91
|
+
minWidth: tableColumnMinWidth,
|
|
92
|
+
maxWidth: tableColumnMaxWidth,
|
|
88
93
|
borderColor: hideBorder ? 'transparent' : '#eeeeee',
|
|
89
94
|
boxShadow: hasOwnerProperty(item, 'colorStatus') ? `inset 3px 0px 0px 0px ${item.colorStatus}` : '',
|
|
90
95
|
borderTopLeftRadius: rowItem && innerIndex === 0 ? rowRadius : '0px',
|
|
@@ -214,6 +219,7 @@ const TD = ({
|
|
|
214
219
|
|
|
215
220
|
<div
|
|
216
221
|
style={{
|
|
222
|
+
flexShrink: 10,
|
|
217
223
|
marginLeft:
|
|
218
224
|
hasOwnerProperty(item, 'contentList') &&
|
|
219
225
|
(!hasOwnerProperty(item, 'hideArrow') || item.hideArrow !== true)
|
|
@@ -238,6 +244,7 @@ const TD = ({
|
|
|
238
244
|
>
|
|
239
245
|
<p
|
|
240
246
|
style={{
|
|
247
|
+
textAlign: tBodyTextAlign,
|
|
241
248
|
margin: '0px',
|
|
242
249
|
cursor:
|
|
243
250
|
hasOwnerProperty(item, 'arrowComponent') || hasOwnerProperty(item, 'dots')
|
|
@@ -347,7 +354,7 @@ const TD = ({
|
|
|
347
354
|
style={{
|
|
348
355
|
overflow: 'auto',
|
|
349
356
|
marginTop: '10px',
|
|
350
|
-
maxHeight: '
|
|
357
|
+
maxHeight: '500px',
|
|
351
358
|
maxWidth: '100%',
|
|
352
359
|
height: item.status === 'close' ? '0px' : 'auto',
|
|
353
360
|
}}
|
|
@@ -358,10 +365,11 @@ const TD = ({
|
|
|
358
365
|
key={`${innerItem}_${innerItemIndex}`}
|
|
359
366
|
className={styles['list-text']}
|
|
360
367
|
style={{
|
|
368
|
+
maxWidth: '100%',
|
|
361
369
|
color: openListColor,
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
370
|
+
textAlign: tBodyTextAlign,
|
|
371
|
+
fontSize: openListFontSize,
|
|
372
|
+
fontFamily: openListFontFamily,
|
|
365
373
|
}}
|
|
366
374
|
onClick={(e) =>
|
|
367
375
|
handleContentList(
|
|
@@ -15,6 +15,8 @@ const TH = ({
|
|
|
15
15
|
tHeadFontSize,
|
|
16
16
|
tHeadTextAlign,
|
|
17
17
|
tHeadFontWeight,
|
|
18
|
+
tableColumnMinWidth,
|
|
19
|
+
tableColumnMaxWidth,
|
|
18
20
|
handleCheckedHeader,
|
|
19
21
|
borderTopLeftRadius,
|
|
20
22
|
borderTopRightRadius,
|
|
@@ -32,12 +34,13 @@ const TH = ({
|
|
|
32
34
|
style={{
|
|
33
35
|
width: 'auto',
|
|
34
36
|
cursor: 'pointer',
|
|
35
|
-
whiteSpace: 'nowrap',
|
|
36
37
|
position: 'relative',
|
|
37
38
|
padding: tHeadPadding,
|
|
38
39
|
fontSize: tHeadFontSize,
|
|
39
40
|
fontFamily: tHeadFamily,
|
|
40
41
|
fontWeight: tHeadFontWeight,
|
|
42
|
+
minWidth: tableColumnMinWidth,
|
|
43
|
+
maxWidth: tableColumnMaxWidth,
|
|
41
44
|
borderTopLeftRadius: borderTopLeftRadius,
|
|
42
45
|
borderTopRightRadius: borderTopRightRadius,
|
|
43
46
|
borderColor: hideBorder ? 'transparent' : '#eeeeee',
|