@xaypay/tui 0.0.112 → 0.0.114

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 (22) hide show
  1. package/dist/index.es.js +257 -122
  2. package/dist/index.js +257 -122
  3. package/package.json +1 -1
  4. package/src/components/icon/Zoom.js +21 -0
  5. package/src/components/input/index.js +24 -0
  6. package/src/components/input/input.stories.js +0 -2
  7. package/src/components/modal/index.js +71 -35
  8. package/src/components/modal/modal.stories.js +1 -1
  9. package/src/components/newAutocomplete/index.js +2 -3
  10. package/src/components/newFile/fileItem.js +1 -0
  11. package/src/components/newFile/index.js +84 -12
  12. package/src/components/newFile/newFile.stories.js +2 -1
  13. package/src/components/select/index.js +2 -3
  14. package/src/components/table/index.js +35 -46
  15. package/src/components/table/table.stories.js +65 -1
  16. package/src/components/table/td.js +121 -64
  17. package/src/components/table/th.js +12 -8
  18. package/src/components/textarea/index.js +0 -6
  19. package/src/components/typography/index.js +1 -1
  20. package/src/stories/static/table-new-data-structure-usage.png +0 -0
  21. package/src/stories/usage.stories.mdx +2 -0
  22. package/src/utils/index.js +4 -0
package/src/components/table/index.js CHANGED
@@ -7,7 +7,7 @@ import TD from './td'
7
7
  import SvgUpArrow from './../icon/UpArrow'
8
8
  import SvgDownArrow from './../icon/DownArrow'
9
9
 
10
- import { compereConfigs } from './../../utils'
10
+ import { compereConfigs, hasOwnerProperty } from './../../utils'
11
11
 
12
12
  export const Table = ({
13
13
  getData,
@@ -48,7 +48,7 @@ export const Table = ({
48
48
  bodyData.map((item, index) => {
49
49
  if (index === data.index) {
50
50
  item.map((innerItem, innerIndex) => {
51
- if (Object.prototype.hasOwnProperty.call(innerItem, 'arrowComponent')) {
51
+ if (hasOwnerProperty(innerItem, 'arrowComponent')) {
52
52
  removeItemIndex = innerIndex
53
53
  }
54
54
  })
@@ -73,7 +73,7 @@ export const Table = ({
73
73
  let headerWithoutArrow
74
74
 
75
75
  header.map((item, index) => {
76
- if (Object.prototype.hasOwnProperty.call(item, 'arrowComponent')) {
76
+ if (hasOwnerProperty(item, 'arrowComponent')) {
77
77
  removeItemIndex = index
78
78
  }
79
79
  })
@@ -121,7 +121,7 @@ export const Table = ({
121
121
  let checkedItems = []
122
122
  data.map((item, index) => {
123
123
  item.map((innerItem, innerIndex) => {
124
- if (Object.prototype.hasOwnProperty.call(innerItem, 'checkBox')) {
124
+ if (hasOwnerProperty(innerItem, 'checkBox')) {
125
125
  if (!checkedItems[innerIndex]) {
126
126
  checkedItems[innerIndex] = []
127
127
  }
@@ -203,7 +203,7 @@ export const Table = ({
203
203
  checkableItemBool = !item.checkBox.checked
204
204
  item.checkBox.checked = !item.checkBox.checked
205
205
  }
206
- if (Object.prototype.hasOwnProperty.call(item, 'arrowComponent')) {
206
+ if (hasOwnerProperty(item, 'arrowComponent')) {
207
207
  removeItemIndex = index
208
208
  }
209
209
  return item
@@ -212,8 +212,10 @@ export const Table = ({
212
212
  const newUpdatedBody = updatedBody.map((item, index) => {
213
213
  return item.map((innerItem, innerIndex) => {
214
214
  if (checkableItemIndex === innerIndex) {
215
- innerItem.checkBox.checked = checkableItemBool
216
- checkableBodyRowItems.push({ column: innerIndex, columnItem: innerItem })
215
+ if (!hasOwnerProperty(innerItem.checkBox, 'disabled') || innerItem.checkBox.disabled !== true) {
216
+ innerItem.checkBox.checked = checkableItemBool
217
+ checkableBodyRowItems.push({ column: innerIndex, columnItem: innerItem })
218
+ }
217
219
  handleHeaderCheckedUpdate({
218
220
  row: index,
219
221
  column: innerIndex,
@@ -255,7 +257,7 @@ export const Table = ({
255
257
  if (
256
258
  innerItem.id === data.id &&
257
259
  innerItem.content == data.content &&
258
- Object.prototype.hasOwnProperty.call(innerItem, 'checkBox')
260
+ hasOwnerProperty(innerItem, 'checkBox')
259
261
  ) {
260
262
  innerItem.checkBox.checked = !innerItem.checkBox.checked
261
263
  handleHeaderCheckedUpdate({
@@ -318,7 +320,7 @@ export const Table = ({
318
320
  const handleCheckArrowAction = (item, rowPosition) => {
319
321
  const status = item.status
320
322
  const checkedOpenableRow = body[rowPosition].map((innerItem) => {
321
- if (Object.prototype.hasOwnProperty.call(innerItem, 'status')) {
323
+ if (hasOwnerProperty(innerItem, 'status')) {
322
324
  if (status === 'close') {
323
325
  innerItem.status = 'open'
324
326
  } else {
@@ -333,7 +335,8 @@ export const Table = ({
333
335
  })
334
336
  }
335
337
 
336
- const handleOpenCloseRowSingleArrow = (arrowRowIndex, arrowIndex) => {
338
+ const handleOpenCloseRowSingleArrow = (arrowRowIndex, arrowIndex, clickableItem) => {
339
+ console.log(clickableItem, 'clickableItem')
337
340
  let single = {}
338
341
  const allArrows = []
339
342
  const checkedOpenableRow = body[arrowRowIndex].map((item, index) => {
@@ -343,13 +346,11 @@ export const Table = ({
343
346
  } else {
344
347
  item.status = 'close'
345
348
  }
349
+
346
350
  single = item
347
351
  }
348
352
 
349
- if (
350
- Object.prototype.hasOwnProperty.call(item, 'status') &&
351
- !Object.prototype.hasOwnProperty.call(item, 'arrowComponent')
352
- ) {
353
+ if (hasOwnerProperty(item, 'status') && !hasOwnerProperty(item, 'arrowComponent')) {
353
354
  allArrows.push(item)
354
355
  }
355
356
 
@@ -357,7 +358,7 @@ export const Table = ({
357
358
  })
358
359
 
359
360
  const checkedOpenableRowArrow = checkedOpenableRow.map((item) => {
360
- if (Object.prototype.hasOwnProperty.call(item, 'arrowComponent')) {
361
+ if (hasOwnerProperty(item, 'arrowComponent')) {
361
362
  if (single && single.status === 'close') {
362
363
  item.status = 'close'
363
364
  } else if (single && single.status === 'open') {
@@ -366,6 +367,15 @@ export const Table = ({
366
367
  }
367
368
  }
368
369
  }
370
+
371
+ if (
372
+ hasOwnerProperty(clickableItem, 'theSame') &&
373
+ hasOwnerProperty(item, 'theSame') &&
374
+ clickableItem.theSame === item.theSame
375
+ ) {
376
+ item.status = clickableItem.status
377
+ }
378
+
369
379
  return item
370
380
  })
371
381
 
@@ -390,7 +400,7 @@ export const Table = ({
390
400
 
391
401
  const checkedOpenableAllRowsBody = body.map((innerItem) => {
392
402
  return innerItem.map((iElem) => {
393
- if (Object.prototype.hasOwnProperty.call(iElem, 'status')) {
403
+ if (hasOwnerProperty(iElem, 'status')) {
394
404
  if (item.status === 'open') {
395
405
  iElem.status = 'open'
396
406
  } else {
@@ -408,7 +418,7 @@ export const Table = ({
408
418
  e.stopPropagation()
409
419
  const checkBodyMore = body.map((elemItem, elemIndex) => {
410
420
  return elemItem.map((elemInnerItem, elemInnerIndex) => {
411
- if (elemIndex === index && Object.prototype.hasOwnProperty.call(elemInnerItem, 'dots')) {
421
+ if (elemIndex === index && hasOwnerProperty(elemInnerItem, 'dots')) {
412
422
  if (elemInnerIndex === innerIndex) {
413
423
  if (item.dotsStatus === 'deActive') {
414
424
  elemInnerItem.dotsStatus = 'active'
@@ -416,7 +426,7 @@ export const Table = ({
416
426
  elemInnerItem.dotsStatus = 'deActive'
417
427
  }
418
428
  }
419
- } else if (elemIndex !== index && Object.prototype.hasOwnProperty.call(elemInnerItem, 'dots')) {
429
+ } else if (elemIndex !== index && hasOwnerProperty(elemInnerItem, 'dots')) {
420
430
  if (elemInnerIndex === innerIndex) {
421
431
  elemInnerItem.dotsStatus = 'deActive'
422
432
  }
@@ -427,21 +437,6 @@ export const Table = ({
427
437
  setBody(() => checkBodyMore)
428
438
  }
429
439
 
430
- const handleCheckDisable = (arr, disableArr) => {
431
- let headerWithDisabled = []
432
- if (disableArr && disableArr.length > 0) {
433
- headerWithDisabled = arr.map((item, index) => {
434
- if (disableArr[index]) {
435
- if (Object.prototype.hasOwnProperty.call(item, 'checkBox')) {
436
- item.checkBox.disabled = true
437
- }
438
- }
439
- return item
440
- })
441
- }
442
- return headerWithDisabled
443
- }
444
-
445
440
  const handleContentListClick = (e, data) => {
446
441
  e.stopPropagation()
447
442
 
@@ -487,7 +482,7 @@ export const Table = ({
487
482
  const handleTableClick = () => {
488
483
  const checkBodyMore = body.map((elemItem) => {
489
484
  return elemItem.map((elemInnerItem) => {
490
- if (Object.prototype.hasOwnProperty.call(elemInnerItem, 'dots')) {
485
+ if (hasOwnerProperty(elemInnerItem, 'dots')) {
491
486
  elemInnerItem.dotsStatus = 'deActive'
492
487
  }
493
488
  return elemInnerItem
@@ -511,8 +506,8 @@ export const Table = ({
511
506
  )
512
507
  const insert = checkForInsertArrow.map((item, index) => {
513
508
  item.map((innerItem, innerIndex) => {
514
- if (Object.prototype.hasOwnProperty.call(innerItem, 'checkBox')) {
515
- if (Object.prototype.hasOwnProperty.call(innerItem.checkBox, 'disabled')) {
509
+ if (hasOwnerProperty(innerItem, 'checkBox')) {
510
+ if (hasOwnerProperty(innerItem.checkBox, 'disabled')) {
516
511
  if (innerItem.checkBox.disabled === true) {
517
512
  if (!disabledArray[innerIndex]) {
518
513
  disabledArray[innerIndex] = { rowIndex: index, columnIndex: innerIndex }
@@ -528,8 +523,8 @@ export const Table = ({
528
523
  } else {
529
524
  const insert = checkBodyForChackedItems.map((item, index) => {
530
525
  item.map((innerItem, innerIndex) => {
531
- if (Object.prototype.hasOwnProperty.call(innerItem, 'checkBox')) {
532
- if (Object.prototype.hasOwnProperty.call(innerItem.checkBox, 'disabled')) {
526
+ if (hasOwnerProperty(innerItem, 'checkBox')) {
527
+ if (hasOwnerProperty(innerItem.checkBox, 'disabled')) {
533
528
  if (innerItem.checkBox.disabled === true) {
534
529
  if (!disabledArray[innerIndex]) {
535
530
  disabledArray[innerIndex] = { rowIndex: index, columnIndex: innerIndex }
@@ -551,17 +546,11 @@ export const Table = ({
551
546
  useEffect(() => {
552
547
  if (arrowShow) {
553
548
  const header = dataHeader.slice()
554
-
555
549
  const arrowColumnCount = handleSetInsertIndex(header, arrowColumn)
556
-
557
550
  const checkForInsertArrow = handleTransformDataForInsertArrow(header, arrowColumnCount, 'header')
558
-
559
- const headerWithDisabled = handleCheckDisable(checkForInsertArrow, disableArr)
560
-
561
- setHeader(() => (headerWithDisabled.length > 0 ? headerWithDisabled : checkForInsertArrow))
551
+ setHeader(() => checkForInsertArrow)
562
552
  } else {
563
- const headerWithDisabled = handleCheckDisable(dataHeader, disableArr)
564
- setHeader(() => (headerWithDisabled.length > 0 ? headerWithDisabled : dataHeader))
553
+ setHeader(() => dataHeader)
565
554
  }
566
555
  }, [dataHeader, arrowColumn, arrowShow, disableArr])
567
556
 
package/src/components/table/table.stories.js CHANGED
@@ -76,6 +76,11 @@ const headerData = [
76
76
  content: 'Գործողություն',
77
77
  sortingArrows: true,
78
78
  },
79
+ {
80
+ type: 'show',
81
+ content: 'Գործողություն 2',
82
+ sortingArrows: true,
83
+ },
79
84
  {
80
85
  type: 'show',
81
86
  content: <ReactSVG />,
@@ -118,6 +123,9 @@ const bodyData = [
118
123
  },
119
124
  info: {
120
125
  status: 'close',
126
+ hideArrow: true, // prop for hide open close arrows
127
+ rightArrow: true, // prop for set arrow side, if true arrow go to right side, if false or if haven't this prop arrow go left ( by defult )
128
+ theSame: 'to open another list', // prop for open close another list item, IMPORTANT theSame prop in another list should be equal
121
129
  openArrow: <ReactSVGArrowUp />,
122
130
  closeArrow: <ReactSVGArrowDown />,
123
131
  content: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ',
@@ -131,6 +139,17 @@ const bodyData = [
131
139
  create: {
132
140
  content: '27.05.2022',
133
141
  },
142
+ info2: {
143
+ status: 'close',
144
+ theSame: 'to open another list', // prop for open close another list item, IMPORTANT theSame prop in another list should be equal
145
+ content: ' - - ',
146
+ contentList: [
147
+ { id: 0, content: <ReactSVGPlus /> },
148
+ { id: 1, content: <ReactSVGPlus /> },
149
+ { id: 2, content: <ReactSVGPlus /> },
150
+ { id: 3, content: <ReactSVGPlus /> },
151
+ ],
152
+ },
134
153
  actions: [
135
154
  {
136
155
  id: 19854,
@@ -198,6 +217,7 @@ const bodyData = [
198
217
  },
199
218
  info: {
200
219
  status: 'close',
220
+ theSame: 'to open just list',
201
221
  openArrow: <ReactSVGArrowUp />,
202
222
  closeArrow: <ReactSVGArrowDown />,
203
223
  content: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ',
@@ -211,6 +231,17 @@ const bodyData = [
211
231
  create: {
212
232
  content: '27.05.2022',
213
233
  },
234
+ info2: {
235
+ status: 'close',
236
+ theSame: 'to open just list',
237
+ content: ' - - ',
238
+ contentList: [
239
+ { id: 0, content: <ReactSVGPlus /> },
240
+ { id: 1, content: <ReactSVGPlus /> },
241
+ { id: 2, content: <ReactSVGPlus /> },
242
+ { id: 3, content: <ReactSVGPlus /> },
243
+ ],
244
+ },
214
245
  actions: [
215
246
  {
216
247
  id: 19954,
@@ -278,6 +309,7 @@ const bodyData = [
278
309
  },
279
310
  info: {
280
311
  status: 'close',
312
+ theSame: 'to open second list',
281
313
  openArrow: <ReactSVGArrowUp />,
282
314
  closeArrow: <ReactSVGArrowDown />,
283
315
  content: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ',
@@ -291,6 +323,17 @@ const bodyData = [
291
323
  create: {
292
324
  content: '27.05.2022',
293
325
  },
326
+ info2: {
327
+ status: 'close',
328
+ theSame: 'to open second list',
329
+ content: ' - - ',
330
+ contentList: [
331
+ { id: 0, content: <ReactSVGPlus /> },
332
+ { id: 1, content: <ReactSVGPlus /> },
333
+ { id: 2, content: <ReactSVGPlus /> },
334
+ { id: 3, content: <ReactSVGPlus /> },
335
+ ],
336
+ },
294
337
  actions: [
295
338
  {
296
339
  id: 20037,
@@ -359,6 +402,7 @@ const bodyData = [
359
402
  },
360
403
  info: {
361
404
  status: 'close',
405
+ theSame: 'to open third list',
362
406
  openArrow: <ReactSVGArrowUp />,
363
407
  closeArrow: <ReactSVGArrowDown />,
364
408
  content: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ',
@@ -381,6 +425,17 @@ const bodyData = [
381
425
  },
382
426
  ],
383
427
  ],
428
+ info2: {
429
+ status: 'close',
430
+ theSame: 'to open third list',
431
+ content: ' - - ',
432
+ contentList: [
433
+ { id: 0, content: <ReactSVGPlus /> },
434
+ { id: 1, content: <ReactSVGPlus /> },
435
+ { id: 2, content: <ReactSVGPlus /> },
436
+ { id: 3, content: <ReactSVGPlus /> },
437
+ ],
438
+ },
384
439
  actions: [
385
440
  [
386
441
  {
@@ -435,7 +490,16 @@ const Template = (args) => {
435
490
  console.log(tData, ' data from table click action, with getData props')
436
491
  }
437
492
 
438
- return <Table {...args} dataBody={bodyData} dataHeader={headerData} getData={handleGetData} />
493
+ return (
494
+ <Table
495
+ {...args}
496
+ arrowColumn={2}
497
+ arrowShow
498
+ dataBody={bodyData}
499
+ dataHeader={headerData}
500
+ getData={handleGetData}
501
+ />
502
+ )
439
503
  }
440
504
 
441
505
  export const Default = Template.bind({})
package/src/components/table/td.js CHANGED
@@ -2,6 +2,8 @@ import React from 'react'
2
2
 
3
3
  import { SingleCheckbox } from './../singleCheckbox'
4
4
 
5
+ import { hasOwnerProperty } from './../../utils'
6
+
5
7
  import styles from './table.module.css'
6
8
 
7
9
  const TD = ({
@@ -35,6 +37,37 @@ const TD = ({
35
37
  handleBodyActionClick(e, actionData)
36
38
  }
37
39
 
40
+ const handleCheckActions = (e, object, property, objectIndex) => {
41
+ if (hasOwnerProperty(object, property)) {
42
+ handleBodyAction(e, {
43
+ item: object,
44
+ itemIndex: objectIndex,
45
+ })
46
+ }
47
+ }
48
+
49
+ const handleMoreOptions = (item, index, optionItem, innerIndex, optionIndex, options) => {
50
+ handleMoreOptionsClick({
51
+ item,
52
+ index,
53
+ options,
54
+ optionItem,
55
+ innerIndex,
56
+ optionIndex,
57
+ })
58
+ }
59
+
60
+ const handleContentList = (e, item, index, innerIndex, listContentId, listContent, listContentIndex) => {
61
+ handleContentListClick(e, {
62
+ item,
63
+ index,
64
+ innerIndex,
65
+ listContentId,
66
+ listContent,
67
+ listContentIndex,
68
+ })
69
+ }
70
+
38
71
  return (
39
72
  <td
40
73
  style={{
@@ -48,9 +81,7 @@ const TD = ({
48
81
  textAlign: tBodyTextAlign,
49
82
  fontFamily: tBodyFontFamily,
50
83
  fontWeight: tBodyFontWeight,
51
- boxShadow: Object.prototype.hasOwnProperty.call(item, 'colorStatus')
52
- ? `inset 3px 0px 0px 0px ${item.colorStatus}`
53
- : '',
84
+ boxShadow: hasOwnerProperty(item, 'colorStatus') ? `inset 3px 0px 0px 0px ${item.colorStatus}` : '',
54
85
  }}
55
86
  >
56
87
  {Array.isArray(item) ? (
@@ -63,23 +94,13 @@ const TD = ({
63
94
  width: '32px',
64
95
  height: '32px',
65
96
  marginRight: '10px',
66
- cursor: Object.prototype.hasOwnProperty.call(newItem, 'type')
67
- ? 'pointer'
68
- : 'auto',
97
+ cursor: hasOwnerProperty(newItem, 'type') ? 'pointer' : 'auto',
69
98
  }}
70
99
  id={newItem.id}
71
100
  type={newItem.type}
72
101
  className={styles['td-span']}
73
102
  key={`${newItem.id}_${newIndex}`}
74
- onClick={
75
- Object.prototype.hasOwnProperty.call(newItem, 'type')
76
- ? (e) =>
77
- handleBodyAction(e, {
78
- item: newItem,
79
- itemIndex: newIndex,
80
- })
81
- : (_) => _
82
- }
103
+ onClick={(e) => handleCheckActions(e, newItem, 'type', newIndex)}
83
104
  >
84
105
  {newItem.content}
85
106
  </span>
@@ -102,22 +123,12 @@ const TD = ({
102
123
  width: '32px',
103
124
  height: '32px',
104
125
  marginRight: '10px',
105
- cursor: Object.prototype.hasOwnProperty.call(iT, 'type')
106
- ? 'pointer'
107
- : 'auto',
126
+ cursor: hasOwnerProperty(iT, 'type') ? 'pointer' : 'auto',
108
127
  }}
109
128
  id={iT.id ? iT.id : ''}
110
129
  type={iT.type ? iT.type : ''}
111
130
  className={styles['td-span']}
112
- onClick={
113
- Object.prototype.hasOwnProperty.call(iT, 'type')
114
- ? (e) =>
115
- handleBodyAction(e, {
116
- item: iT,
117
- itemIndex: iN,
118
- })
119
- : (_) => _
120
- }
131
+ onClick={(e) => handleCheckActions(e, iT, 'type', iN)}
121
132
  key={`${iT.id || iT.content}_${iN}`}
122
133
  >
123
134
  {iT.content}
@@ -138,29 +149,32 @@ const TD = ({
138
149
  style={{
139
150
  display: 'flex',
140
151
  alignItems: 'flex-start',
141
- justifyContent:
142
- Object.prototype.hasOwnProperty.call(item, 'contentList') ||
143
- Object.prototype.hasOwnProperty.call(item, 'checkBox')
144
- ? 'space-between'
145
- : 'center',
152
+ justifyContent: hasOwnerProperty(item, 'checkBox') ? 'space-between' : 'center',
146
153
  }}
147
154
  >
148
- {Object.prototype.hasOwnProperty.call(item, 'contentList') && (
149
- <div
150
- id={item.id}
151
- style={{
152
- width: '21px',
153
- height: '21px',
154
- cursor: 'pointer',
155
- }}
156
- onClick={() => handleOpenCloseRowSingleArrow(index, innerIndex)}
157
- className={styles['td-span']}
158
- >
159
- {item.status === 'close' ? item.closeArrow : item.openArrow}
160
- </div>
161
- )}
155
+ {!hasOwnerProperty(item, 'hideArrow') &&
156
+ item.hideArrow !== false &&
157
+ (!hasOwnerProperty(item, 'rightArrow') || item.rightArrow !== true)
158
+ ? hasOwnerProperty(item, 'contentList') &&
159
+ (hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow')) && (
160
+ <div
161
+ id={item.id}
162
+ style={{
163
+ width: '21px',
164
+ height: '21px',
165
+ cursor: 'pointer',
166
+ }}
167
+ onClick={() => handleOpenCloseRowSingleArrow(index, innerIndex, item)}
168
+ className={styles['td-span']}
169
+ >
170
+ {hasOwnerProperty(item, 'status') && item.status === 'close'
171
+ ? item.closeArrow
172
+ : item.openArrow}
173
+ </div>
174
+ )
175
+ : ''}
162
176
 
163
- {Object.prototype.hasOwnProperty.call(item, 'checkBox') && (
177
+ {hasOwnerProperty(item, 'checkBox') && (
164
178
  <SingleCheckbox
165
179
  data={item}
166
180
  index={index}
@@ -175,35 +189,53 @@ const TD = ({
175
189
 
176
190
  <div
177
191
  style={{
178
- marginLeft: item.contentList ? '10px' : '0px',
192
+ marginLeft:
193
+ hasOwnerProperty(item, 'contentList') &&
194
+ (!hasOwnerProperty(item, 'hideArrow') || item.hideArrow !== true)
195
+ ? hasOwnerProperty(item, 'rightArrow')
196
+ ? item.rightArrow === true
197
+ ? '0px'
198
+ : '10px'
199
+ : hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow')
200
+ ? '10px'
201
+ : '0px'
202
+ : '0px',
203
+ marginRight:
204
+ hasOwnerProperty(item, 'contentList') &&
205
+ (!hasOwnerProperty(item, 'hideArrow') || item.hideArrow !== true)
206
+ ? hasOwnerProperty(item, 'rightArrow')
207
+ ? item.rightArrow === true
208
+ ? '10px'
209
+ : '0px'
210
+ : '0px'
211
+ : '0px',
179
212
  }}
180
213
  >
181
214
  <p
182
215
  style={{
183
216
  margin: '0px',
184
217
  cursor:
185
- Object.prototype.hasOwnProperty.call(item, 'arrowComponent') ||
186
- Object.prototype.hasOwnProperty.call(item, 'dots')
218
+ hasOwnerProperty(item, 'arrowComponent') || hasOwnerProperty(item, 'dots')
187
219
  ? 'pointer'
188
220
  : 'auto',
189
221
  }}
190
222
  onClick={
191
- Object.prototype.hasOwnProperty.call(item, 'arrowComponent')
223
+ hasOwnerProperty(item, 'arrowComponent')
192
224
  ? () => handleCheckArrowAction(item, item.checkIndex)
193
- : Object.prototype.hasOwnProperty.call(item, 'dots')
225
+ : hasOwnerProperty(item, 'dots')
194
226
  ? (e) => handleCheckDots(e, item, index, innerIndex)
195
227
  : (_) => _
196
228
  }
197
229
  >
198
230
  {item.content ? (
199
231
  item.content
200
- ) : Object.prototype.hasOwnProperty.call(item, 'arrowComponent') ? (
232
+ ) : hasOwnerProperty(item, 'arrowComponent') ? (
201
233
  item.status === 'close' ? (
202
234
  item.closeArrow
203
235
  ) : (
204
236
  item.openArrow
205
237
  )
206
- ) : Object.prototype.hasOwnProperty.call(item, 'dots') ? (
238
+ ) : hasOwnerProperty(item, 'dots') ? (
207
239
  <span
208
240
  style={{
209
241
  display: 'block',
@@ -228,7 +260,7 @@ const TD = ({
228
260
  boxShadow: '0px 0px 20px 0px #3C393E4D',
229
261
  }}
230
262
  >
231
- {Object.prototype.hasOwnProperty.call(item, 'options') &&
263
+ {hasOwnerProperty(item, 'options') &&
232
264
  item.options.map((optionItem, optionIndex) => {
233
265
  return (
234
266
  <span
@@ -240,14 +272,14 @@ const TD = ({
240
272
  fontFamily: 'Noto Sans Armenian',
241
273
  }}
242
274
  onClick={() =>
243
- handleMoreOptionsClick({
275
+ handleMoreOptions(
244
276
  item,
245
277
  index,
246
278
  optionItem,
247
279
  innerIndex,
248
280
  optionIndex,
249
- options: item.options,
250
- })
281
+ item.options
282
+ )
251
283
  }
252
284
  >
253
285
  <span
@@ -264,6 +296,7 @@ const TD = ({
264
296
  overflow: 'hidden',
265
297
  whiteSpace: 'nowrap',
266
298
  textOverflow: 'ellipsis',
299
+ marginBottom: '5px',
267
300
  }}
268
301
  title={optionItem.content}
269
302
  >
@@ -278,7 +311,7 @@ const TD = ({
278
311
  ''
279
312
  )}
280
313
  </p>
281
- {Object.prototype.hasOwnProperty.call(item, 'contentList') && (
314
+ {hasOwnerProperty(item, 'contentList') && (
282
315
  <div
283
316
  style={{
284
317
  overflow: 'auto',
@@ -300,14 +333,15 @@ const TD = ({
300
333
  'px',
301
334
  }}
302
335
  onClick={(e) =>
303
- handleContentListClick(e, {
336
+ handleContentList(
337
+ e,
304
338
  item,
305
339
  index,
306
340
  innerIndex,
307
- listContentId: innerItem.id,
308
- listContent: innerItem.content,
309
- listContentIndex: innerItemIndex,
310
- })
341
+ innerItem.id,
342
+ innerItem.content,
343
+ innerItemIndex
344
+ )
311
345
  }
312
346
  >
313
347
  {innerItem.content}
@@ -317,6 +351,29 @@ const TD = ({
317
351
  </div>
318
352
  )}
319
353
  </div>
354
+
355
+ {!hasOwnerProperty(item, 'hideArrow') &&
356
+ item.hideArrow !== false &&
357
+ hasOwnerProperty(item, 'rightArrow') &&
358
+ item.rightArrow === true
359
+ ? hasOwnerProperty(item, 'contentList') &&
360
+ (hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow')) && (
361
+ <div
362
+ id={item.id}
363
+ style={{
364
+ width: '21px',
365
+ height: '21px',
366
+ cursor: 'pointer',
367
+ }}
368
+ onClick={() => handleOpenCloseRowSingleArrow(index, innerIndex, item)}
369
+ className={styles['td-span']}
370
+ >
371
+ {hasOwnerProperty(item, 'status') && item.status === 'close'
372
+ ? item.closeArrow
373
+ : item.openArrow}
374
+ </div>
375
+ )
376
+ : ''}
320
377
  </div>
321
378
  ) : (
322
379
  ''