@xaypay/tui 0.0.110 → 0.0.112
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.es.js +185 -46
- package/dist/index.js +185 -46
- package/package.json +1 -1
- package/src/components/singleCheckbox/Checkbox.js +12 -1
- package/src/components/singleCheckbox/index.js +6 -0
- package/src/components/table/index.js +121 -15
- package/src/components/table/table.stories.js +25 -14
- package/src/components/table/td.js +68 -26
- package/src/components/textarea/index.js +4 -0
- package/src/stories/configuration.stories.mdx +0 -1
- package/src/stories/static/table-body-data-structure-first-part-usage.png +0 -0
- package/src/stories/static/table-body-data-structure-second-part-usage.png +0 -0
- package/src/stories/static/table-body-data-structure-third-part-usage.png +0 -0
- package/src/stories/static/table-component-usage.png +0 -0
- package/src/stories/static/table-header-data-structure-usage.png +0 -0
- package/src/stories/usage.stories.mdx +12 -0
- package/tui.config.js +0 -1
|
@@ -41,6 +41,30 @@ export const Table = ({
|
|
|
41
41
|
|
|
42
42
|
const configStyles = compereConfigs()
|
|
43
43
|
|
|
44
|
+
const handleCheckIfArrow = (bodyData, data) => {
|
|
45
|
+
let removeItemIndex
|
|
46
|
+
let headerWithoutArrow = []
|
|
47
|
+
|
|
48
|
+
bodyData.map((item, index) => {
|
|
49
|
+
if (index === data.index) {
|
|
50
|
+
item.map((innerItem, innerIndex) => {
|
|
51
|
+
if (Object.prototype.hasOwnProperty.call(innerItem, 'arrowComponent')) {
|
|
52
|
+
removeItemIndex = innerIndex
|
|
53
|
+
}
|
|
54
|
+
})
|
|
55
|
+
if (removeItemIndex !== undefined) {
|
|
56
|
+
const firstPart = item.slice(0, removeItemIndex)
|
|
57
|
+
const secondPart = item.slice(removeItemIndex + 1, item.length)
|
|
58
|
+
headerWithoutArrow = [...firstPart, ...secondPart]
|
|
59
|
+
} else {
|
|
60
|
+
headerWithoutArrow.push(item)
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
})
|
|
64
|
+
|
|
65
|
+
return { removeItemIndex, headerWithoutArrow }
|
|
66
|
+
}
|
|
67
|
+
|
|
44
68
|
const handleHeaderItemClick = (e) => {
|
|
45
69
|
e.stopPropagation()
|
|
46
70
|
|
|
@@ -72,20 +96,25 @@ export const Table = ({
|
|
|
72
96
|
|
|
73
97
|
const handleBodyActionClick = (e, data) => {
|
|
74
98
|
e.stopPropagation()
|
|
75
|
-
|
|
99
|
+
|
|
100
|
+
const { removeItemIndex, headerWithoutArrow } = handleCheckIfArrow(body, data)
|
|
76
101
|
|
|
77
102
|
const actionData = {
|
|
78
|
-
|
|
103
|
+
from: 'body',
|
|
79
104
|
item: data.item,
|
|
80
105
|
id: data.item.id,
|
|
81
106
|
items: data.items,
|
|
82
107
|
type: data.item.type,
|
|
83
108
|
rowIndex: data.index,
|
|
84
|
-
|
|
109
|
+
row: headerWithoutArrow,
|
|
85
110
|
itemInnerIndex: data.itemIndex,
|
|
111
|
+
itemIndex:
|
|
112
|
+
removeItemIndex !== undefined && removeItemIndex < data.innerIndex
|
|
113
|
+
? data.innerIndex - 1
|
|
114
|
+
: data.innerIndex,
|
|
86
115
|
}
|
|
87
116
|
|
|
88
|
-
|
|
117
|
+
getData(actionData)
|
|
89
118
|
}
|
|
90
119
|
|
|
91
120
|
const handleSetCheckboxArray = (data) => {
|
|
@@ -169,7 +198,7 @@ export const Table = ({
|
|
|
169
198
|
const updatedHeader = header.slice()
|
|
170
199
|
const updatedBody = body.slice().map((item) => Object.values(item))
|
|
171
200
|
const newData = updatedHeader.map((item, index) => {
|
|
172
|
-
if (item.content
|
|
201
|
+
if (item.content == data.content) {
|
|
173
202
|
checkableItemIndex = index
|
|
174
203
|
checkableItemBool = !item.checkBox.checked
|
|
175
204
|
item.checkBox.checked = !item.checkBox.checked
|
|
@@ -215,12 +244,19 @@ export const Table = ({
|
|
|
215
244
|
setBody(newUpdatedBody)
|
|
216
245
|
}
|
|
217
246
|
|
|
218
|
-
const handleCheckedBody = (data, e) => {
|
|
247
|
+
const handleCheckedBody = (data, e, dataRowIndex, dataItemIndex) => {
|
|
219
248
|
e.stopPropagation()
|
|
249
|
+
const transformedData = { ...data }
|
|
250
|
+
transformedData.index = dataRowIndex
|
|
251
|
+
transformedData.innerIndex = dataItemIndex
|
|
220
252
|
const updatedBody = body.slice().map((item) => Object.values(item))
|
|
221
253
|
const newData = updatedBody.map((item, index) => {
|
|
222
254
|
return item.map((innerItem, innerIndex) => {
|
|
223
|
-
if (
|
|
255
|
+
if (
|
|
256
|
+
innerItem.id === data.id &&
|
|
257
|
+
innerItem.content == data.content &&
|
|
258
|
+
Object.prototype.hasOwnProperty.call(innerItem, 'checkBox')
|
|
259
|
+
) {
|
|
224
260
|
innerItem.checkBox.checked = !innerItem.checkBox.checked
|
|
225
261
|
handleHeaderCheckedUpdate({
|
|
226
262
|
row: index,
|
|
@@ -231,6 +267,19 @@ export const Table = ({
|
|
|
231
267
|
return innerItem
|
|
232
268
|
})
|
|
233
269
|
})
|
|
270
|
+
const { removeItemIndex, headerWithoutArrow } = handleCheckIfArrow(body, transformedData)
|
|
271
|
+
|
|
272
|
+
const checkedData = {
|
|
273
|
+
item: data,
|
|
274
|
+
from: 'body',
|
|
275
|
+
row: removeItemIndex !== undefined ? headerWithoutArrow : headerWithoutArrow[0],
|
|
276
|
+
rowIndex: transformedData.index,
|
|
277
|
+
itemIndex:
|
|
278
|
+
removeItemIndex !== undefined && removeItemIndex < transformedData.innerIndex
|
|
279
|
+
? transformedData.innerIndex - 1
|
|
280
|
+
: transformedData.innerIndex,
|
|
281
|
+
}
|
|
282
|
+
getData(checkedData)
|
|
234
283
|
setBody(newData)
|
|
235
284
|
}
|
|
236
285
|
|
|
@@ -393,6 +442,60 @@ export const Table = ({
|
|
|
393
442
|
return headerWithDisabled
|
|
394
443
|
}
|
|
395
444
|
|
|
445
|
+
const handleContentListClick = (e, data) => {
|
|
446
|
+
e.stopPropagation()
|
|
447
|
+
|
|
448
|
+
const { removeItemIndex, headerWithoutArrow } = handleCheckIfArrow(body, data)
|
|
449
|
+
|
|
450
|
+
const listData = {
|
|
451
|
+
from: 'body',
|
|
452
|
+
item: data.item,
|
|
453
|
+
rowIndex: data.index,
|
|
454
|
+
row: headerWithoutArrow,
|
|
455
|
+
listItemId: data.listContentId,
|
|
456
|
+
listItemContent: data.listContent,
|
|
457
|
+
itemIndex:
|
|
458
|
+
removeItemIndex !== undefined && removeItemIndex < data.innerIndex
|
|
459
|
+
? data.innerIndex - 1
|
|
460
|
+
: data.innerIndex,
|
|
461
|
+
listItemInnerIndex: data.listContentIndex,
|
|
462
|
+
}
|
|
463
|
+
|
|
464
|
+
getData(listData)
|
|
465
|
+
}
|
|
466
|
+
|
|
467
|
+
const handleMoreOptionsClick = (data) => {
|
|
468
|
+
const { removeItemIndex, headerWithoutArrow } = handleCheckIfArrow(body, data)
|
|
469
|
+
|
|
470
|
+
const moreData = {
|
|
471
|
+
from: 'body',
|
|
472
|
+
item: data.item,
|
|
473
|
+
rowIndex: data.index,
|
|
474
|
+
options: data.options,
|
|
475
|
+
row: headerWithoutArrow,
|
|
476
|
+
itemIndex:
|
|
477
|
+
removeItemIndex !== undefined && removeItemIndex < data.innerIndex
|
|
478
|
+
? data.innerIndex - 1
|
|
479
|
+
: data.innerIndex,
|
|
480
|
+
optionItem: data.optionItem,
|
|
481
|
+
optionIndex: data.optionIndex,
|
|
482
|
+
}
|
|
483
|
+
|
|
484
|
+
getData(moreData)
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
const handleTableClick = () => {
|
|
488
|
+
const checkBodyMore = body.map((elemItem) => {
|
|
489
|
+
return elemItem.map((elemInnerItem) => {
|
|
490
|
+
if (Object.prototype.hasOwnProperty.call(elemInnerItem, 'dots')) {
|
|
491
|
+
elemInnerItem.dotsStatus = 'deActive'
|
|
492
|
+
}
|
|
493
|
+
return elemInnerItem
|
|
494
|
+
})
|
|
495
|
+
})
|
|
496
|
+
setBody(() => checkBodyMore)
|
|
497
|
+
}
|
|
498
|
+
|
|
396
499
|
useEffect(() => {
|
|
397
500
|
let checkedItems = []
|
|
398
501
|
const disabledArray = []
|
|
@@ -406,8 +509,7 @@ export const Table = ({
|
|
|
406
509
|
arrowColumnCount,
|
|
407
510
|
'body'
|
|
408
511
|
)
|
|
409
|
-
|
|
410
|
-
checkForInsertArrow.map((item, index) => {
|
|
512
|
+
const insert = checkForInsertArrow.map((item, index) => {
|
|
411
513
|
item.map((innerItem, innerIndex) => {
|
|
412
514
|
if (Object.prototype.hasOwnProperty.call(innerItem, 'checkBox')) {
|
|
413
515
|
if (Object.prototype.hasOwnProperty.call(innerItem.checkBox, 'disabled')) {
|
|
@@ -419,13 +521,12 @@ export const Table = ({
|
|
|
419
521
|
}
|
|
420
522
|
}
|
|
421
523
|
})
|
|
524
|
+
return item
|
|
422
525
|
})
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
setBody(() => checkForInsertArrow)
|
|
526
|
+
checkedItems = handleSetCheckboxArray(insert)
|
|
527
|
+
setBody(() => insert)
|
|
426
528
|
} else {
|
|
427
|
-
|
|
428
|
-
checkBodyForChackedItems.map((item, index) => {
|
|
529
|
+
const insert = checkBodyForChackedItems.map((item, index) => {
|
|
429
530
|
item.map((innerItem, innerIndex) => {
|
|
430
531
|
if (Object.prototype.hasOwnProperty.call(innerItem, 'checkBox')) {
|
|
431
532
|
if (Object.prototype.hasOwnProperty.call(innerItem.checkBox, 'disabled')) {
|
|
@@ -437,8 +538,10 @@ export const Table = ({
|
|
|
437
538
|
}
|
|
438
539
|
}
|
|
439
540
|
})
|
|
541
|
+
return item
|
|
440
542
|
})
|
|
441
|
-
|
|
543
|
+
checkedItems = handleSetCheckboxArray(insert)
|
|
544
|
+
setBody(() => insert)
|
|
442
545
|
}
|
|
443
546
|
|
|
444
547
|
setDisableArr(disabledArray)
|
|
@@ -469,6 +572,7 @@ export const Table = ({
|
|
|
469
572
|
width: '100%',
|
|
470
573
|
borderCollapse: 'collapse',
|
|
471
574
|
}}
|
|
575
|
+
onClick={handleTableClick}
|
|
472
576
|
>
|
|
473
577
|
{header && header.length > 0 && (
|
|
474
578
|
<thead>
|
|
@@ -548,6 +652,8 @@ export const Table = ({
|
|
|
548
652
|
}
|
|
549
653
|
handleCheckedBody={handleCheckedBody}
|
|
550
654
|
handleBodyActionClick={handleBodyActionClick}
|
|
655
|
+
handleMoreOptionsClick={handleMoreOptionsClick}
|
|
656
|
+
handleContentListClick={handleContentListClick}
|
|
551
657
|
tBodyColor={tBodyColor ? tBodyColor : configStyles.TABLE.tBodyColor}
|
|
552
658
|
tBodyPadding={
|
|
553
659
|
tBodyPadding ? tBodyPadding : configStyles.TABLE.tBodyPadding
|
|
@@ -121,7 +121,12 @@ const bodyData = [
|
|
|
121
121
|
openArrow: <ReactSVGArrowUp />,
|
|
122
122
|
closeArrow: <ReactSVGArrowDown />,
|
|
123
123
|
content: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ',
|
|
124
|
-
contentList: [
|
|
124
|
+
contentList: [
|
|
125
|
+
{ id: 0, content: 'new text for list' },
|
|
126
|
+
{ id: 1, content: 'Lorem just => ipsum' },
|
|
127
|
+
{ id: 2, content: 'Dolor sit => amet' },
|
|
128
|
+
{ id: 3, content: 'text for => test' },
|
|
129
|
+
],
|
|
125
130
|
},
|
|
126
131
|
create: {
|
|
127
132
|
content: '27.05.2022',
|
|
@@ -196,7 +201,12 @@ const bodyData = [
|
|
|
196
201
|
openArrow: <ReactSVGArrowUp />,
|
|
197
202
|
closeArrow: <ReactSVGArrowDown />,
|
|
198
203
|
content: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ',
|
|
199
|
-
contentList: [
|
|
204
|
+
contentList: [
|
|
205
|
+
{ id: 0, content: 'ինչ որ նոր տեքստ ցանկի համար, պետք է ստուգել երկարությունը' },
|
|
206
|
+
{ id: 1, content: 'Lorem just => ipsum' },
|
|
207
|
+
{ id: 2, content: 'Dolor sit => amet' },
|
|
208
|
+
{ id: 3, content: 'text for => test' },
|
|
209
|
+
],
|
|
200
210
|
},
|
|
201
211
|
create: {
|
|
202
212
|
content: '27.05.2022',
|
|
@@ -271,7 +281,12 @@ const bodyData = [
|
|
|
271
281
|
openArrow: <ReactSVGArrowUp />,
|
|
272
282
|
closeArrow: <ReactSVGArrowDown />,
|
|
273
283
|
content: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ',
|
|
274
|
-
contentList: [
|
|
284
|
+
contentList: [
|
|
285
|
+
{ id: 0, content: 'some text for list' },
|
|
286
|
+
{ id: 1, content: 'Lorem just => ipsum' },
|
|
287
|
+
{ id: 2, content: 'Dolor sit => amet' },
|
|
288
|
+
{ id: 3, content: 'text for => test' },
|
|
289
|
+
],
|
|
275
290
|
},
|
|
276
291
|
create: {
|
|
277
292
|
content: '27.05.2022',
|
|
@@ -347,7 +362,12 @@ const bodyData = [
|
|
|
347
362
|
openArrow: <ReactSVGArrowUp />,
|
|
348
363
|
closeArrow: <ReactSVGArrowDown />,
|
|
349
364
|
content: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ',
|
|
350
|
-
contentList: [
|
|
365
|
+
contentList: [
|
|
366
|
+
{ id: 0, content: 'other one text for list' },
|
|
367
|
+
{ id: 1, content: 'Lorem just => ipsum' },
|
|
368
|
+
{ id: 2, content: 'Dolor sit => amet' },
|
|
369
|
+
{ id: 3, content: 'text for => test' },
|
|
370
|
+
],
|
|
351
371
|
},
|
|
352
372
|
create: [
|
|
353
373
|
[
|
|
@@ -415,16 +435,7 @@ const Template = (args) => {
|
|
|
415
435
|
console.log(tData, ' data from table click action, with getData props')
|
|
416
436
|
}
|
|
417
437
|
|
|
418
|
-
return
|
|
419
|
-
<Table
|
|
420
|
-
{...args}
|
|
421
|
-
arrowShow
|
|
422
|
-
arrowColumn={2}
|
|
423
|
-
dataBody={bodyData}
|
|
424
|
-
dataHeader={headerData}
|
|
425
|
-
getData={handleGetData}
|
|
426
|
-
/>
|
|
427
|
-
)
|
|
438
|
+
return <Table {...args} dataBody={bodyData} dataHeader={headerData} getData={handleGetData} />
|
|
428
439
|
}
|
|
429
440
|
|
|
430
441
|
export const Default = Template.bind({})
|
|
@@ -19,9 +19,22 @@ const TD = ({
|
|
|
19
19
|
handleCheckDots,
|
|
20
20
|
handleCheckedBody,
|
|
21
21
|
handleBodyActionClick,
|
|
22
|
+
handleMoreOptionsClick,
|
|
23
|
+
handleContentListClick,
|
|
22
24
|
handleCheckArrowAction,
|
|
23
25
|
handleOpenCloseRowSingleArrow,
|
|
24
26
|
}) => {
|
|
27
|
+
const handleBodyAction = (e, data) => {
|
|
28
|
+
const actionData = {
|
|
29
|
+
index,
|
|
30
|
+
innerIndex,
|
|
31
|
+
items: item,
|
|
32
|
+
item: data.item,
|
|
33
|
+
itemIndex: data.itemIndex,
|
|
34
|
+
}
|
|
35
|
+
handleBodyActionClick(e, actionData)
|
|
36
|
+
}
|
|
37
|
+
|
|
25
38
|
return (
|
|
26
39
|
<td
|
|
27
40
|
style={{
|
|
@@ -35,7 +48,9 @@ const TD = ({
|
|
|
35
48
|
textAlign: tBodyTextAlign,
|
|
36
49
|
fontFamily: tBodyFontFamily,
|
|
37
50
|
fontWeight: tBodyFontWeight,
|
|
38
|
-
boxShadow:
|
|
51
|
+
boxShadow: Object.prototype.hasOwnProperty.call(item, 'colorStatus')
|
|
52
|
+
? `inset 3px 0px 0px 0px ${item.colorStatus}`
|
|
53
|
+
: '',
|
|
39
54
|
}}
|
|
40
55
|
>
|
|
41
56
|
{Array.isArray(item) ? (
|
|
@@ -59,10 +74,9 @@ const TD = ({
|
|
|
59
74
|
onClick={
|
|
60
75
|
Object.prototype.hasOwnProperty.call(newItem, 'type')
|
|
61
76
|
? (e) =>
|
|
62
|
-
|
|
63
|
-
item,
|
|
64
|
-
|
|
65
|
-
innerIndex,
|
|
77
|
+
handleBodyAction(e, {
|
|
78
|
+
item: newItem,
|
|
79
|
+
itemIndex: newIndex,
|
|
66
80
|
})
|
|
67
81
|
: (_) => _
|
|
68
82
|
}
|
|
@@ -98,10 +112,7 @@ const TD = ({
|
|
|
98
112
|
onClick={
|
|
99
113
|
Object.prototype.hasOwnProperty.call(iT, 'type')
|
|
100
114
|
? (e) =>
|
|
101
|
-
|
|
102
|
-
index,
|
|
103
|
-
innerIndex,
|
|
104
|
-
items: item,
|
|
115
|
+
handleBodyAction(e, {
|
|
105
116
|
item: iT,
|
|
106
117
|
itemIndex: iN,
|
|
107
118
|
})
|
|
@@ -127,15 +138,20 @@ const TD = ({
|
|
|
127
138
|
style={{
|
|
128
139
|
display: 'flex',
|
|
129
140
|
alignItems: 'flex-start',
|
|
130
|
-
justifyContent:
|
|
141
|
+
justifyContent:
|
|
142
|
+
Object.prototype.hasOwnProperty.call(item, 'contentList') ||
|
|
143
|
+
Object.prototype.hasOwnProperty.call(item, 'checkBox')
|
|
144
|
+
? 'space-between'
|
|
145
|
+
: 'center',
|
|
131
146
|
}}
|
|
132
147
|
>
|
|
133
|
-
{item
|
|
148
|
+
{Object.prototype.hasOwnProperty.call(item, 'contentList') && (
|
|
134
149
|
<div
|
|
135
150
|
id={item.id}
|
|
136
151
|
style={{
|
|
137
152
|
width: '21px',
|
|
138
153
|
height: '21px',
|
|
154
|
+
cursor: 'pointer',
|
|
139
155
|
}}
|
|
140
156
|
onClick={() => handleOpenCloseRowSingleArrow(index, innerIndex)}
|
|
141
157
|
className={styles['td-span']}
|
|
@@ -144,11 +160,13 @@ const TD = ({
|
|
|
144
160
|
</div>
|
|
145
161
|
)}
|
|
146
162
|
|
|
147
|
-
{item
|
|
163
|
+
{Object.prototype.hasOwnProperty.call(item, 'checkBox') && (
|
|
148
164
|
<SingleCheckbox
|
|
149
165
|
data={item}
|
|
150
|
-
|
|
166
|
+
index={index}
|
|
167
|
+
innerIndex={innerIndex}
|
|
151
168
|
checked={item.checkBox.checked}
|
|
169
|
+
handleChecked={handleCheckedBody}
|
|
152
170
|
disabled={item.checkBox.disabled}
|
|
153
171
|
checkedColor={item.checkBox.checkedColor}
|
|
154
172
|
unCheckedColor={item.checkBox.unCheckedColor}
|
|
@@ -198,6 +216,7 @@ const TD = ({
|
|
|
198
216
|
position: 'absolute',
|
|
199
217
|
display: item.dotsStatus === 'deActive' ? 'none' : 'block',
|
|
200
218
|
top: '0px',
|
|
219
|
+
zIndex: 100,
|
|
201
220
|
right: 'calc(100% + 6px)',
|
|
202
221
|
width: '223px',
|
|
203
222
|
height: 'auto',
|
|
@@ -209,25 +228,34 @@ const TD = ({
|
|
|
209
228
|
boxShadow: '0px 0px 20px 0px #3C393E4D',
|
|
210
229
|
}}
|
|
211
230
|
>
|
|
212
|
-
{item
|
|
213
|
-
item.options.map((
|
|
231
|
+
{Object.prototype.hasOwnProperty.call(item, 'options') &&
|
|
232
|
+
item.options.map((optionItem, optionIndex) => {
|
|
214
233
|
return (
|
|
215
234
|
<span
|
|
216
|
-
key={`${
|
|
235
|
+
key={`${optionItem.content}_${optionIndex}`}
|
|
217
236
|
className={styles['dots-option-item']}
|
|
218
237
|
style={{
|
|
219
238
|
color: '#3C393E',
|
|
220
239
|
fontSize: '14px',
|
|
221
240
|
fontFamily: 'Noto Sans Armenian',
|
|
222
241
|
}}
|
|
223
|
-
|
|
242
|
+
onClick={() =>
|
|
243
|
+
handleMoreOptionsClick({
|
|
244
|
+
item,
|
|
245
|
+
index,
|
|
246
|
+
optionItem,
|
|
247
|
+
innerIndex,
|
|
248
|
+
optionIndex,
|
|
249
|
+
options: item.options,
|
|
250
|
+
})
|
|
251
|
+
}
|
|
224
252
|
>
|
|
225
253
|
<span
|
|
226
254
|
style={{
|
|
227
255
|
marginRight: '10px',
|
|
228
256
|
}}
|
|
229
257
|
>
|
|
230
|
-
{
|
|
258
|
+
{optionItem.icon}
|
|
231
259
|
</span>
|
|
232
260
|
<span
|
|
233
261
|
style={{
|
|
@@ -237,9 +265,9 @@ const TD = ({
|
|
|
237
265
|
whiteSpace: 'nowrap',
|
|
238
266
|
textOverflow: 'ellipsis',
|
|
239
267
|
}}
|
|
240
|
-
title={
|
|
268
|
+
title={optionItem.content}
|
|
241
269
|
>
|
|
242
|
-
{
|
|
270
|
+
{optionItem.content}
|
|
243
271
|
</span>
|
|
244
272
|
</span>
|
|
245
273
|
)
|
|
@@ -250,25 +278,39 @@ const TD = ({
|
|
|
250
278
|
''
|
|
251
279
|
)}
|
|
252
280
|
</p>
|
|
253
|
-
{item
|
|
281
|
+
{Object.prototype.hasOwnProperty.call(item, 'contentList') && (
|
|
254
282
|
<div
|
|
255
283
|
style={{
|
|
256
|
-
overflow: '
|
|
284
|
+
overflow: 'auto',
|
|
257
285
|
marginTop: '10px',
|
|
286
|
+
maxHeight: '300px',
|
|
287
|
+
maxWidth: '100%',
|
|
258
288
|
height: item.status === 'close' ? '0px' : 'auto',
|
|
259
289
|
}}
|
|
260
290
|
>
|
|
261
|
-
{item.contentList.map((innerItem,
|
|
291
|
+
{item.contentList.map((innerItem, innerItemIndex) => {
|
|
262
292
|
return (
|
|
263
293
|
<p
|
|
264
|
-
key={`${innerItem}_${
|
|
294
|
+
key={`${innerItem}_${innerItemIndex}`}
|
|
265
295
|
className={styles['list-text']}
|
|
266
296
|
style={{
|
|
267
297
|
color: openListColor,
|
|
298
|
+
maxWidth:
|
|
299
|
+
(item.content.length * 9 <= 100 ? 100 : item.content.length * 9) +
|
|
300
|
+
'px',
|
|
268
301
|
}}
|
|
269
|
-
|
|
302
|
+
onClick={(e) =>
|
|
303
|
+
handleContentListClick(e, {
|
|
304
|
+
item,
|
|
305
|
+
index,
|
|
306
|
+
innerIndex,
|
|
307
|
+
listContentId: innerItem.id,
|
|
308
|
+
listContent: innerItem.content,
|
|
309
|
+
listContentIndex: innerItemIndex,
|
|
310
|
+
})
|
|
311
|
+
}
|
|
270
312
|
>
|
|
271
|
-
{innerItem}
|
|
313
|
+
{innerItem.content}
|
|
272
314
|
</p>
|
|
273
315
|
)
|
|
274
316
|
})}
|
|
@@ -639,7 +639,6 @@ import StackAlt from './assets/stackalt.svg';
|
|
|
639
639
|
tBodyFontFamily: 'Noto Sans Armenia', // for table body font family
|
|
640
640
|
|
|
641
641
|
tBodyRowBorder: '1px solid #eeeeee', // for table body row border
|
|
642
|
-
tBodyMarginTop: '20px', // for table body margin top
|
|
643
642
|
|
|
644
643
|
openListColor: '#A3A5A9' // for table body opened list color
|
|
645
644
|
}
|
|
Binary file
|
|
Binary file
|
|
@@ -19,8 +19,13 @@ import tooltipImage from './static/tooltip-usage.png';
|
|
|
19
19
|
import textareaImage from './static/textarea-usage.png';
|
|
20
20
|
import buttonImageIcon from './static/button-usage-icon.png';
|
|
21
21
|
import fileSingleImage from './static/file-single-usage.png';
|
|
22
|
+
import tableComponent from './static/table-component-usage.png';
|
|
22
23
|
import toasterImage from './static/toaster-container-usage.png';
|
|
23
24
|
import autocompleteImage from './static/autocomplete-usage.png';
|
|
25
|
+
import tableHeaderStructure from './static/table-header-data-structure-usage.png';
|
|
26
|
+
import tableBodyStructureFirst from './static/table-body-data-structure-first-part-usage.png';
|
|
27
|
+
import tableBodyStructureThird from './static/table-body-data-structure-third-part-usage.png';
|
|
28
|
+
import tableBodyStructureSecond from './static/table-body-data-structure-second-part-usage.png';
|
|
24
29
|
|
|
25
30
|
<Meta title="Intro/Usage" />
|
|
26
31
|
|
|
@@ -174,3 +179,10 @@ import autocompleteImage from './static/autocomplete-usage.png';
|
|
|
174
179
|
|
|
175
180
|
### Modal
|
|
176
181
|
<img src={modalImage} alt="file image" />
|
|
182
|
+
|
|
183
|
+
### Table
|
|
184
|
+
<img src={tableComponent} alt="file image" />
|
|
185
|
+
<img src={tableHeaderStructure} alt="file image" />
|
|
186
|
+
<img src={tableBodyStructureFirst} alt="file image" />
|
|
187
|
+
<img src={tableBodyStructureSecond} alt="file image" />
|
|
188
|
+
<img src={tableBodyStructureThird} alt="file image" />
|
package/tui.config.js
CHANGED
|
@@ -429,7 +429,6 @@ module.exports = {
|
|
|
429
429
|
tBodyFontFamily: 'Noto Sans Armenia', // for table body font family
|
|
430
430
|
|
|
431
431
|
tBodyRowBorder: '1px solid #eeeeee', // for table body row border
|
|
432
|
-
tBodyMarginTop: '20px', // for table body margin top
|
|
433
432
|
|
|
434
433
|
openListColor: '#A3A5A9' // for table body opened list color
|
|
435
434
|
},
|