imbric-theme 0.1.3 → 0.1.4

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,4 +1,4 @@
1
- import { useState } from 'react'
1
+ import { useState, useEffect } from 'react'
2
2
  import PropTypes from 'prop-types'
3
3
 
4
4
  import styles from './Checkbox.module.css'
@@ -18,6 +18,12 @@ export const Checkbox = ({
18
18
  }) => {
19
19
  const [checked, setChecked] = useState(value)
20
20
 
21
+ useEffect(() => {
22
+ setChecked(value)
23
+ // eslint-disable-next-line react-hooks/exhaustive-deps
24
+ }, [value])
25
+
26
+
21
27
  return (
22
28
  <div className={getStyles('checkbox')}>
23
29
  <input
@@ -13,6 +13,7 @@ export const Picture = ({
13
13
  isRounded,
14
14
  withBorder,
15
15
  isHref,
16
+ targetLink,
16
17
  }) => (
17
18
  <picture
18
19
  className={getStyles('picture', {
@@ -20,8 +21,11 @@ export const Picture = ({
20
21
  'with-border': withBorder,
21
22
  })}
22
23
  >
23
- <Link href={isHref} passHref>
24
- <img src={src} style={{ height, maxWidth: width }} />
24
+ <Link href={isHref} passHref >
25
+ <a target={targetLink}>
26
+ <img src={src} style={{ height, maxWidth: width }} />
27
+ </a>
28
+
25
29
  </Link>
26
30
 
27
31
  </picture>
@@ -34,14 +38,16 @@ Picture.propTypes = {
34
38
  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
35
39
  isRounded: PropTypes.bool,
36
40
  withBorder: PropTypes.bool,
37
- isHref: PropTypes.any
41
+ isHref: PropTypes.any,
42
+ targetLink: PropTypes.string
38
43
  }
39
44
 
40
45
  Picture.defaultProps = {
41
46
  height: 'auto',
42
47
  withBorder: false,
43
48
  getStyles: () => { },
44
- isHref: ''
49
+ isHref: '',
50
+ targetLink: ''
45
51
  }
46
52
 
47
53
  export default withStyles(styles)(Picture)
@@ -48,4 +48,5 @@
48
48
  max-width: 80px;
49
49
  min-width: 80px;
50
50
  width: 80px;
51
+ display: inline-table;
51
52
  }
@@ -30,6 +30,7 @@ export const RowTable = ({
30
30
  onClickActionDelete,
31
31
  onClickActionLink,
32
32
  onClickActionClone,
33
+ onClickActionCheckbox,
33
34
  txtTootipIconUserView,
34
35
  txtTootipIconListInvoice,
35
36
  txtTootipIconListListXLS,
@@ -40,6 +41,7 @@ export const RowTable = ({
40
41
  txtTootipIconDelete,
41
42
  txtTootipIconLink,
42
43
  txtTootipIconClone,
44
+ txtTootipIconCheckbox,
43
45
  colorRow,
44
46
  }) => {
45
47
 
@@ -112,138 +114,155 @@ export const RowTable = ({
112
114
  (
113
115
 
114
116
 
115
- itemTd.isBoolean
117
+ itemTd.isLocation
116
118
 
117
119
  ?
118
- !loading ? (
119
- <td
120
- className={getStyles('td', 'tdacction')}
121
- key={[itemTd.accessor] + (indexTd + index)}
122
- >
123
- {String(item[itemTd.accessor])}
124
-
125
- </td>
126
- )
120
+ !loading ?
121
+
122
+ item[itemTd.accessor] ?
123
+
124
+ (
125
+ <td
126
+ className={getStyles('td', 'tdacction')}
127
+ key={[itemTd.accessor] + (indexTd + index)}
128
+ >
129
+
130
+ <a href={'http://maps.google.com/?q=' + item[itemTd.accessor] + ',' + item[itemTd.accessorSecond]} target='_black'>
131
+ <Icon
132
+ name="distance"
133
+ // onClick={function noRefCheck() { }}
134
+ />
135
+ </a>
136
+
137
+ </td>
138
+ ) :
139
+ (
140
+ <td
141
+ className={getStyles('td', 'tdacction')}
142
+ key={[itemTd.accessor] + (indexTd + index)}
143
+ >
144
+ </td>
145
+ )
127
146
  : null
128
147
  :
129
148
 
130
149
 
131
- itemTd.isCheckbox
150
+
151
+
152
+ itemTd.isBoolean
132
153
 
133
154
  ?
134
- !loading ? (
135
- <td
136
- className={getStyles('td', 'tdacction')}
137
- key={[itemTd.accessor] + (indexTd + index)}
138
- >
139
-
140
- {/* <Check id={item[itemTd.accessor]} isChecked={item.isSelected} /> */}
141
-
142
- <Toggle
143
- id={'idToggle' + item.id}
144
- checked={item.isSelected}
145
- label=""
146
- onChangeCheckbox={(e) => { handleClickCheckbox(e, item) }}
147
- />
148
-
149
- </td>
150
- )
155
+ !loading ?
156
+
157
+ item[itemTd.accessor] ?
158
+
159
+ (
160
+ <td
161
+ className={getStyles('td', 'tdacction')}
162
+ key={[itemTd.accessor] + (indexTd + index)}
163
+ >
164
+ {String(item[itemTd.accessor])}
165
+
166
+ </td>
167
+ ) :
168
+ (
169
+ <td
170
+ className={getStyles('td', 'tdacction')}
171
+ key={[itemTd.accessor] + (indexTd + index)}
172
+ >
173
+ </td>
174
+ )
151
175
  : null
152
176
  :
153
177
 
154
178
 
155
- itemTd.isArrayObject
179
+ itemTd.isCheckbox
156
180
 
157
181
  ?
182
+ !loading ? (
183
+ <td
184
+ className={getStyles('td', 'tdacction')}
185
+ key={[itemTd.accessor] + (indexTd + index)}
186
+ >
187
+
188
+ {/* <Check id={item[itemTd.accessor]} isChecked={item.isSelected} /> */}
189
+
190
+ <Toggle
191
+ id={'idToggle' + item.id}
192
+ checked={item.isSelected}
193
+ label=""
194
+ disabled={[itemTd.disabled]}
195
+ onChangeCheckbox={(e) => { handleClickCheckbox(e, item) }}
196
+ />
158
197
 
159
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
198
+ </td>
199
+ )
200
+ : null
201
+ :
160
202
 
161
- {console.log('TD: ' + [itemTd.accessor] + (indexTd + index))}
162
203
 
163
- {item[itemTd.accessor].map((itemTdObj, indexAcc, array) => (
204
+ itemTd.isArrayObject
164
205
 
165
- <>
206
+ ?
166
207
 
167
- <span className={getStyles('tdlabelAlt')} key={itemTdObj.id + 'label' + (indexAcc + index)}>
168
- {console.log('A: ' + itemTdObj.id + 'label' + (indexAcc + index))}
208
+ <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
169
209
 
170
- {itemTdObj[itemTd.subAccessorAlt]}
210
+ {console.log('TD: ' + [itemTd.accessor] + (indexTd + index))}
171
211
 
172
- {array.length - 1 !== indexAcc ?
173
- <span>, </span> : null}
174
- :&nbsp;
175
- </span>
212
+ {item[itemTd.accessor].map((itemTdObj, indexAcc, array) => (
176
213
 
177
- <span key={itemTdObj.id + 'Tdlabel' + (indexAcc + index)}>
214
+ <>
178
215
 
179
- {console.log('B: ' + itemTdObj.id + 'Tdlabel' + (indexAcc + index))}
216
+ <span className={getStyles('tdlabelAlt')} key={itemTdObj.id + 'label' + (indexAcc + index)}>
217
+ {console.log('A: ' + itemTdObj.id + 'label' + (indexAcc + index))}
180
218
 
181
- {itemTdObj[itemTd.subAccessor]}
219
+ {itemTdObj[itemTd.subAccessorAlt]}
182
220
 
183
- {array.length - 1 !== indexAcc ?
184
- <span>, </span> : null}
221
+ {array.length - 1 !== indexAcc ?
222
+ <span>, </span> : null}
223
+ :&nbsp;
224
+ </span>
185
225
 
186
- </span>
226
+ <span key={itemTdObj.id + 'Tdlabel' + (indexAcc + index)}>
187
227
 
188
- </>
228
+ {console.log('B: ' + itemTdObj.id + 'Tdlabel' + (indexAcc + index))}
189
229
 
190
- ))}
230
+ {itemTdObj[itemTd.subAccessor]}
191
231
 
192
- </td>
232
+ {array.length - 1 !== indexAcc ?
233
+ <span>, </span> : null}
193
234
 
194
- :
235
+ </span>
195
236
 
237
+ </>
196
238
 
197
- itemTd.isPicture
239
+ ))}
198
240
 
199
- ?
200
- <td className={getStyles('td', 'tdacction')} key={[itemTd.accessor] + (indexTd + index)}>
201
- <Picture
202
- src={item[itemTd.accessor]}
203
- width={50}
204
- />
205
241
  </td>
206
- :
207
242
 
208
- itemTd.subAccessor === 'action'
209
-
210
- ?
243
+ :
211
244
 
212
- <td className={getStyles('td', 'tdacctionIcons')} key={[itemTd.accessor] + (indexTd + index)}>
213
245
 
214
- {itemTd.viewUserView ?
246
+ itemTd.isPicture
215
247
 
216
- item.viewUserView === undefined ?
248
+ ?
249
+ <td className={getStyles('td', 'tdacction')} key={[itemTd.accessor] + (indexTd + index)}>
250
+ <Picture
251
+ src={item[itemTd.accessor]}
252
+ width={50}
253
+ />
254
+ </td>
255
+ :
217
256
 
218
- <>
219
- <span
220
- data-tip
221
- data-for='userView'
222
- onMouseEnter={handleMouseEnter}
223
- onMouseLeave={handleMouseLeave}
224
- >
225
- <>
226
- <Icon
227
- id="userView"
228
- background="base"
229
- name="userView"
230
- onClick={(e) => { onClickActionUserView(e, item) }}
231
- />
232
- <Horizontal size="xs" />
233
- </>
257
+ itemTd.subAccessor === 'action'
234
258
 
235
- </span>
259
+ ?
236
260
 
237
- {isToolTipMounted ? (
238
- <ReactTooltip id='userView' type='error'>
239
- <span>{txtTootipIconUserView}</span>
240
- </ReactTooltip>
241
- ) : null}
242
- </>
261
+ <td className={getStyles('td', 'tdacctionIcons')} key={[itemTd.accessor] + (indexTd + index)}>
243
262
 
244
- :
263
+ {itemTd.viewUserView ?
245
264
 
246
- item.viewUserView ?
265
+ item.viewUserView === undefined ?
247
266
 
248
267
  <>
249
268
  <span
@@ -271,45 +290,45 @@ export const RowTable = ({
271
290
  ) : null}
272
291
  </>
273
292
 
274
- : null
275
-
276
- : null}
277
-
278
-
279
- {itemTd.viewListInvoice ?
280
-
293
+ :
281
294
 
282
- item.viewListInvoice === undefined ?
295
+ item.viewUserView ?
283
296
 
284
- <>
285
- <span
286
- data-tip
287
- data-for='listInvoice'
288
- onMouseEnter={handleMouseEnter}
289
- onMouseLeave={handleMouseLeave}
290
- >
291
297
  <>
292
- <Icon
293
- id={"listInvoice" + (indexTd + index)}
294
- background="base"
295
- name="listInvoice"
296
- onClick={(e) => { onClickActionListInvoice(e, item) }}
297
- />
298
- <Horizontal size="xs" />
298
+ <span
299
+ data-tip
300
+ data-for='userView'
301
+ onMouseEnter={handleMouseEnter}
302
+ onMouseLeave={handleMouseLeave}
303
+ >
304
+ <>
305
+ <Icon
306
+ id="userView"
307
+ background="base"
308
+ name="userView"
309
+ onClick={(e) => { onClickActionUserView(e, item) }}
310
+ />
311
+ <Horizontal size="xs" />
312
+ </>
313
+
314
+ </span>
315
+
316
+ {isToolTipMounted ? (
317
+ <ReactTooltip id='userView' type='error'>
318
+ <span>{txtTootipIconUserView}</span>
319
+ </ReactTooltip>
320
+ ) : null}
299
321
  </>
300
322
 
301
- </span>
323
+ : null
302
324
 
303
- {isToolTipMounted ? (
304
- <ReactTooltip id='listInvoice' type='error' place='left'>
305
- <span>{txtTootipIconListInvoice}</span>
306
- </ReactTooltip>
307
- ) : null}
308
- </>
325
+ : null}
326
+
327
+
328
+ {itemTd.viewListInvoice ?
309
329
 
310
- :
311
330
 
312
- item.viewListInvoice ?
331
+ item.viewListInvoice === undefined ?
313
332
 
314
333
  <>
315
334
  <span
@@ -331,122 +350,121 @@ export const RowTable = ({
331
350
  </span>
332
351
 
333
352
  {isToolTipMounted ? (
334
- <ReactTooltip id='listInvoice' type='error'>
353
+ <ReactTooltip id='listInvoice' type='error' place='left'>
335
354
  <span>{txtTootipIconListInvoice}</span>
336
355
  </ReactTooltip>
337
356
  ) : null}
338
357
  </>
339
358
 
340
- : null
341
-
342
- : null}
343
-
344
- {itemTd.viewListXLS && item.fileType === 'xls' ?
359
+ :
345
360
 
346
- <>
347
- <span
348
- data-tip
349
- data-for='listXLS'
350
- onMouseEnter={handleMouseEnter}
351
- onMouseLeave={handleMouseLeave}
352
- >
353
- <>
354
- <Icon
355
- id={"listXLS" + (indexTd + index)}
356
- background="base"
357
- name="listXLS"
358
- onClick={(e) => { onClickActionListXLS(e, item) }}
359
- />
360
- <Horizontal size="xs" />
361
- </>
361
+ item.viewListInvoice ?
362
362
 
363
- </span>
363
+ <>
364
+ <span
365
+ data-tip
366
+ data-for='listInvoice'
367
+ onMouseEnter={handleMouseEnter}
368
+ onMouseLeave={handleMouseLeave}
369
+ >
370
+ <>
371
+ <Icon
372
+ id={"listInvoice" + (indexTd + index)}
373
+ background="base"
374
+ name="listInvoice"
375
+ onClick={(e) => { onClickActionListInvoice(e, item) }}
376
+ />
377
+ <Horizontal size="xs" />
378
+ </>
379
+
380
+ </span>
381
+
382
+ {isToolTipMounted ? (
383
+ <ReactTooltip id='listInvoice' type='error'>
384
+ <span>{txtTootipIconListInvoice}</span>
385
+ </ReactTooltip>
386
+ ) : null}
387
+ </>
364
388
 
365
- {isToolTipMounted ? (
366
- <ReactTooltip id='listXLS' type='error'>
367
- <span>{txtTootipIconListListXLS}</span>
368
- </ReactTooltip>
369
- ) : null}
370
- </>
389
+ : null
371
390
 
372
- : null}
391
+ : null}
373
392
 
374
- {itemTd.viewListCSV && item.fileType === 'xml' ?
393
+ {itemTd.viewListXLS && item.fileType === 'xls' ?
375
394
 
376
- <>
377
- <span
378
- data-tip
379
- data-for='listCSV'
380
- onMouseEnter={handleMouseEnter}
381
- onMouseLeave={handleMouseLeave}
382
- >
383
- <>
384
- <Icon
385
- id={"listCSV" + (indexTd + index)}
386
- background="base"
387
- name="listCSV"
388
- onClick={(e) => { onClickActionListCSV(e, item) }}
389
- />
390
- <Horizontal size="xs" />
391
- </>
395
+ <>
396
+ <span
397
+ data-tip
398
+ data-for='listXLS'
399
+ onMouseEnter={handleMouseEnter}
400
+ onMouseLeave={handleMouseLeave}
401
+ >
402
+ <>
403
+ <Icon
404
+ id={"listXLS" + (indexTd + index)}
405
+ background="base"
406
+ name="listXLS"
407
+ onClick={(e) => { onClickActionListXLS(e, item) }}
408
+ />
409
+ <Horizontal size="xs" />
410
+ </>
392
411
 
393
- </span>
412
+ </span>
394
413
 
395
- {isToolTipMounted ? (
396
- <ReactTooltip id='listCSV' type='error'>
397
- <span>{txtTootipIconListListCSV}</span>
398
- </ReactTooltip>
399
- ) : null}
400
- </>
414
+ {isToolTipMounted ? (
415
+ <ReactTooltip id='listXLS' type='error'>
416
+ <span>{txtTootipIconListListXLS}</span>
417
+ </ReactTooltip>
418
+ ) : null}
419
+ </>
401
420
 
402
- : null}
421
+ : null}
403
422
 
404
- {itemTd.viewListPDF && item.fileType === 'pdf' ?
423
+ {itemTd.viewListCSV && item.fileType === 'xml' ?
405
424
 
406
- <>
407
- <span
408
- data-tip
409
- data-for='listPDF'
410
- onMouseEnter={handleMouseEnter}
411
- onMouseLeave={handleMouseLeave}
412
- >
413
- <>
414
- <Icon
415
- id={"listPDF" + (indexTd + index)}
416
- background="base"
417
- name="listPDF"
418
- onClick={(e) => { onClickActionListPDF(e, item) }}
419
- />
420
- <Horizontal size="xs" />
421
- </>
425
+ <>
426
+ <span
427
+ data-tip
428
+ data-for='listCSV'
429
+ onMouseEnter={handleMouseEnter}
430
+ onMouseLeave={handleMouseLeave}
431
+ >
432
+ <>
433
+ <Icon
434
+ id={"listCSV" + (indexTd + index)}
435
+ background="base"
436
+ name="listCSV"
437
+ onClick={(e) => { onClickActionListCSV(e, item) }}
438
+ />
439
+ <Horizontal size="xs" />
440
+ </>
422
441
 
423
- </span>
442
+ </span>
424
443
 
425
- {isToolTipMounted ? (
426
- <ReactTooltip id='listPDF' type='error'>
427
- <span>{txtTootipIconListListPDF}</span>
428
- </ReactTooltip>
429
- ) : null}
430
- </>
444
+ {isToolTipMounted ? (
445
+ <ReactTooltip id='listCSV' type='error'>
446
+ <span>{txtTootipIconListListCSV}</span>
447
+ </ReactTooltip>
448
+ ) : null}
449
+ </>
431
450
 
432
- : null}
451
+ : null}
433
452
 
434
- {itemTd.viewEdit ?
453
+ {itemTd.viewListPDF && item.fileType === 'pdf' ?
435
454
 
436
- item.viewEdit === undefined ?
437
455
  <>
438
456
  <span
439
457
  data-tip
440
- data-for='edit'
458
+ data-for='listPDF'
441
459
  onMouseEnter={handleMouseEnter}
442
460
  onMouseLeave={handleMouseLeave}
443
461
  >
444
462
  <>
445
463
  <Icon
446
- id={"edit" + (indexTd + index)}
464
+ id={"listPDF" + (indexTd + index)}
447
465
  background="base"
448
- name="edit"
449
- onClick={(e) => { onClickActionEdit(e, item) }}
466
+ name="listPDF"
467
+ onClick={(e) => { onClickActionListPDF(e, item) }}
450
468
  />
451
469
  <Horizontal size="xs" />
452
470
  </>
@@ -454,15 +472,17 @@ export const RowTable = ({
454
472
  </span>
455
473
 
456
474
  {isToolTipMounted ? (
457
- <ReactTooltip id='edit' type='error'>
458
- <span>{txtTootipIconEdit}</span>
475
+ <ReactTooltip id='listPDF' type='error'>
476
+ <span>{txtTootipIconListListPDF}</span>
459
477
  </ReactTooltip>
460
478
  ) : null}
461
479
  </>
462
- :
463
480
 
464
- item.viewEdit ?
481
+ : null}
482
+
483
+ {itemTd.viewEdit ?
465
484
 
485
+ item.viewEdit === undefined ?
466
486
  <>
467
487
  <span
468
488
  data-tip
@@ -488,43 +508,43 @@ export const RowTable = ({
488
508
  </ReactTooltip>
489
509
  ) : null}
490
510
  </>
511
+ :
491
512
 
492
- : null
493
-
494
- : null}
495
-
496
- {itemTd.viewEmailSend ?
497
-
498
- item.viewEmailSend === undefined ?
513
+ item.viewEdit ?
499
514
 
500
- <>
501
- <span
502
- data-tip
503
- data-for='sendEmail'
504
- onMouseEnter={handleMouseEnter}
505
- onMouseLeave={handleMouseLeave}
506
- >
507
515
  <>
508
- <Icon
509
- background="base"
510
- name="sendEmail"
511
- onClick={e => { onClickActionSendEmail(e, item) }}
512
- />
513
- <Horizontal size="xs" />
516
+ <span
517
+ data-tip
518
+ data-for='edit'
519
+ onMouseEnter={handleMouseEnter}
520
+ onMouseLeave={handleMouseLeave}
521
+ >
522
+ <>
523
+ <Icon
524
+ id={"edit" + (indexTd + index)}
525
+ background="base"
526
+ name="edit"
527
+ onClick={(e) => { onClickActionEdit(e, item) }}
528
+ />
529
+ <Horizontal size="xs" />
530
+ </>
531
+
532
+ </span>
533
+
534
+ {isToolTipMounted ? (
535
+ <ReactTooltip id='edit' type='error'>
536
+ <span>{txtTootipIconEdit}</span>
537
+ </ReactTooltip>
538
+ ) : null}
514
539
  </>
515
540
 
516
- </span>
541
+ : null
517
542
 
518
- {isToolTipMounted ? (
519
- <ReactTooltip id='sendEmail' type='error'>
520
- <span>{txtTootipIconSendEmail}</span>
521
- </ReactTooltip>
522
- ) : null}
523
- </>
543
+ : null}
524
544
 
525
- :
545
+ {itemTd.viewEmailSend ?
526
546
 
527
- item.viewEmailSend ?
547
+ item.viewEmailSend === undefined ?
528
548
 
529
549
  <>
530
550
  <span
@@ -551,42 +571,42 @@ export const RowTable = ({
551
571
  ) : null}
552
572
  </>
553
573
 
554
- : null
555
-
556
- : null}
557
-
558
- {itemTd.viewTrash ?
574
+ :
559
575
 
560
- item.viewTrash === undefined ?
576
+ item.viewEmailSend ?
561
577
 
562
- <>
563
- <span
564
- data-tip
565
- data-for='trash'
566
- onMouseEnter={handleMouseEnter}
567
- onMouseLeave={handleMouseLeave}
568
- >
569
578
  <>
570
- <Icon
571
- background="base"
572
- name="trash"
573
- onClick={e => { onClickActionDelete(e, item) }}
574
- />
575
- <Horizontal size="xs" />
579
+ <span
580
+ data-tip
581
+ data-for='sendEmail'
582
+ onMouseEnter={handleMouseEnter}
583
+ onMouseLeave={handleMouseLeave}
584
+ >
585
+ <>
586
+ <Icon
587
+ background="base"
588
+ name="sendEmail"
589
+ onClick={e => { onClickActionSendEmail(e, item) }}
590
+ />
591
+ <Horizontal size="xs" />
592
+ </>
593
+
594
+ </span>
595
+
596
+ {isToolTipMounted ? (
597
+ <ReactTooltip id='sendEmail' type='error'>
598
+ <span>{txtTootipIconSendEmail}</span>
599
+ </ReactTooltip>
600
+ ) : null}
576
601
  </>
577
602
 
578
- </span>
603
+ : null
579
604
 
580
- {isToolTipMounted ? (
581
- <ReactTooltip id='trash' type='error'>
582
- <span>{txtTootipIconDelete}</span>
583
- </ReactTooltip>
584
- ) : null}
585
- </>
605
+ : null}
586
606
 
587
- :
607
+ {itemTd.viewTrash ?
588
608
 
589
- item.viewTrash ?
609
+ item.viewTrash === undefined ?
590
610
 
591
611
  <>
592
612
  <span
@@ -613,44 +633,43 @@ export const RowTable = ({
613
633
  ) : null}
614
634
  </>
615
635
 
616
- : null
617
-
618
- : null}
619
-
620
-
621
- {itemTd.viewLink ?
636
+ :
622
637
 
623
- item.viewLink === undefined ?
638
+ item.viewTrash ?
624
639
 
625
- <>
626
- <span
627
- data-tip
628
- data-for='linkUser'
629
- onMouseEnter={handleMouseEnter}
630
- onMouseLeave={handleMouseLeave}
631
- >
632
640
  <>
633
- <Icon
634
- background="base"
635
- name="linkUser"
636
- // onClick={(e) => onClickEdit(e, item)}
637
- onClick={e => { onClickActionLink(e, item) }}
638
- />
639
- <Horizontal size="xs" />
641
+ <span
642
+ data-tip
643
+ data-for='trash'
644
+ onMouseEnter={handleMouseEnter}
645
+ onMouseLeave={handleMouseLeave}
646
+ >
647
+ <>
648
+ <Icon
649
+ background="base"
650
+ name="trash"
651
+ onClick={e => { onClickActionDelete(e, item) }}
652
+ />
653
+ <Horizontal size="xs" />
654
+ </>
655
+
656
+ </span>
657
+
658
+ {isToolTipMounted ? (
659
+ <ReactTooltip id='trash' type='error'>
660
+ <span>{txtTootipIconDelete}</span>
661
+ </ReactTooltip>
662
+ ) : null}
640
663
  </>
641
664
 
642
- </span>
665
+ : null
643
666
 
644
- {isToolTipMounted ? (
645
- <ReactTooltip id='linkUser' type='error'>
646
- <span>{txtTootipIconLink}</span>
647
- </ReactTooltip>
648
- ) : null}
649
- </>
667
+ : null}
650
668
 
651
- :
652
669
 
653
- item.viewLink ?
670
+ {itemTd.viewLink ?
671
+
672
+ item.viewLink === undefined ?
654
673
 
655
674
  <>
656
675
  <span
@@ -678,44 +697,45 @@ export const RowTable = ({
678
697
  ) : null}
679
698
  </>
680
699
 
681
- : null
682
-
683
- : null}
684
-
685
-
686
-
687
- {itemTd.viewClone ?
700
+ :
688
701
 
689
- item.viewClone === undefined ?
702
+ item.viewLink ?
690
703
 
691
- <>
692
- <span
693
- data-tip
694
- data-for='clone'
695
- onMouseEnter={handleMouseEnter}
696
- onMouseLeave={handleMouseLeave}
697
- >
698
704
  <>
699
- <Icon
700
- background="base"
701
- name="cloneDefault"
702
- onClick={e => { onClickActionClone(e, item) }}
703
- />
704
- <Horizontal size="xs" />
705
+ <span
706
+ data-tip
707
+ data-for='linkUser'
708
+ onMouseEnter={handleMouseEnter}
709
+ onMouseLeave={handleMouseLeave}
710
+ >
711
+ <>
712
+ <Icon
713
+ background="base"
714
+ name="linkUser"
715
+ // onClick={(e) => onClickEdit(e, item)}
716
+ onClick={e => { onClickActionLink(e, item) }}
717
+ />
718
+ <Horizontal size="xs" />
719
+ </>
720
+
721
+ </span>
722
+
723
+ {isToolTipMounted ? (
724
+ <ReactTooltip id='linkUser' type='error'>
725
+ <span>{txtTootipIconLink}</span>
726
+ </ReactTooltip>
727
+ ) : null}
705
728
  </>
706
729
 
707
- </span>
730
+ : null
731
+
732
+ : null}
708
733
 
709
- {isToolTipMounted ? (
710
- <ReactTooltip id='clone' type='error'>
711
- <span>{txtTootipIconClone}</span>
712
- </ReactTooltip>
713
- ) : null}
714
- </>
715
734
 
716
- :
717
735
 
718
- item.viewClone ?
736
+ {itemTd.viewClone ?
737
+
738
+ item.viewClone === undefined ?
719
739
 
720
740
  <>
721
741
  <span
@@ -727,7 +747,7 @@ export const RowTable = ({
727
747
  <>
728
748
  <Icon
729
749
  background="base"
730
- name="clone"
750
+ name="cloneDefault"
731
751
  onClick={e => { onClickActionClone(e, item) }}
732
752
  />
733
753
  <Horizontal size="xs" />
@@ -742,90 +762,195 @@ export const RowTable = ({
742
762
  ) : null}
743
763
  </>
744
764
 
745
- : null
765
+ :
746
766
 
747
- : null}
767
+ item.viewClone ?
748
768
 
769
+ <>
770
+ <span
771
+ data-tip
772
+ data-for='clone'
773
+ onMouseEnter={handleMouseEnter}
774
+ onMouseLeave={handleMouseLeave}
775
+ >
776
+ <>
777
+ <Icon
778
+ background="base"
779
+ name="clone"
780
+ onClick={e => { onClickActionClone(e, item) }}
781
+ />
782
+ <Horizontal size="xs" />
783
+ </>
784
+
785
+ </span>
786
+
787
+ {isToolTipMounted ? (
788
+ <ReactTooltip id='clone' type='error'>
789
+ <span>{txtTootipIconClone}</span>
790
+ </ReactTooltip>
791
+ ) : null}
792
+ </>
749
793
 
794
+ : null
750
795
 
751
- </td>
796
+ : null}
752
797
 
753
- :
754
798
 
755
- itemTd.subAccessor !== ''
756
799
 
757
- ?
758
800
 
759
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor][itemTd.subAccessor]}</td>
760
801
 
761
- :
802
+ {itemTd.viewCheckbox ?
762
803
 
763
- itemTd.typeFilter === 'date'
804
+ item.viewCheckbox === undefined ?
764
805
 
765
- ?
806
+ <>
807
+ <span
808
+ data-tip
809
+ data-for='checkbox'
810
+ onMouseEnter={handleMouseEnter}
811
+ onMouseLeave={handleMouseLeave}
812
+ >
813
+ <>
766
814
 
767
- itemTd.typeFilterSub === 'date_only' ?
815
+ <Toggle
816
+ id={'idToggle' + item.id}
817
+ checked={item.isSelected}
818
+ label=""
819
+ onChangeCheckbox={(e) => { onClickActionCheckbox(e, item) }}
820
+ />
768
821
 
769
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
770
- <Moment format="DD/MM/YYYY">
771
- {item[itemTd.accessor]}
772
- </Moment>
773
- </td>
822
+ {/* <Horizontal size="xs" /> */}
823
+ </>
774
824
 
775
- :
825
+ </span>
776
826
 
777
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
778
- {/* <Moment format="DD/MM/YYYY hh:mm:ss"> */}
779
- <Moment format="DD/MM/YYYY HH:mm">
780
- {item[itemTd.accessor]}
781
- </Moment>
782
- </td>
783
- :
827
+ {isToolTipMounted ? (
828
+ <ReactTooltip id='checkbox' type='error'>
829
+ <span>{txtTootipIconCheckbox}</span>
830
+ </ReactTooltip>
831
+ ) : null}
832
+ </>
784
833
 
785
- itemTd.typeFilter === 'select'
834
+ :
786
835
 
787
- ?
836
+ item.viewCheckbox ?
837
+
838
+ <>
839
+ <span
840
+ data-tip
841
+ data-for='checkbox'
842
+ onMouseEnter={handleMouseEnter}
843
+ onMouseLeave={handleMouseLeave}
844
+ >
845
+ <>
846
+ <Toggle
847
+ id={'idToggle' + item.id}
848
+ checked={item.isSelected}
849
+ label=""
850
+ onChangeCheckbox={(e) => { onClickActionCheckbox(e, item) }}
851
+ />
852
+
853
+ {/* <Horizontal size="xs" /> */}
854
+ </>
855
+
856
+ </span>
857
+
858
+ {isToolTipMounted ? (
859
+ <ReactTooltip id='checkbox' type='error'>
860
+ <span>{txtTootipIconCheckbox}</span>
861
+ </ReactTooltip>
862
+ ) : null}
863
+ </>
864
+
865
+ : null
866
+
867
+ : null}
788
868
 
789
- itemTd.optionsSelect.map((itemSelect, indexSelect) => (
790
869
 
791
870
 
792
- item[itemTd.accessor] === itemSelect.value ?
793
871
 
794
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index) + indexSelect}>
795
- {itemSelect.label}
796
- </td>
797
872
 
798
- :
799
873
 
800
- null
801
- ))
802
874
 
875
+
876
+ </td>
877
+
878
+ :
879
+
880
+ itemTd.subAccessor !== ''
881
+
882
+ ?
883
+
884
+ <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor][itemTd.subAccessor]}</td>
885
+
886
+ :
887
+
888
+ itemTd.typeFilter === 'date'
889
+
890
+ ?
891
+
892
+ itemTd.typeFilterSub === 'date_only' ?
893
+
894
+ <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
895
+ <Moment format="DD/MM/YYYY">
896
+ {item[itemTd.accessor]}
897
+ </Moment>
898
+ </td>
899
+
900
+ :
901
+
902
+ <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
903
+ {/* <Moment format="DD/MM/YYYY hh:mm:ss"> */}
904
+ <Moment format="DD/MM/YYYY HH:mm">
905
+ {item[itemTd.accessor]}
906
+ </Moment>
907
+ </td>
803
908
  :
804
909
 
805
- itemTd.typeFilter === 'number'
910
+ itemTd.typeFilter === 'select'
806
911
 
807
912
  ?
808
913
 
809
- itemTd.subTypeFilter
914
+ itemTd.optionsSelect.map((itemSelect, indexSelect) => (
810
915
 
811
- ?
812
916
 
813
- itemTd.characterExtra === 'km'
814
- ?
815
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{(item[itemTd.accessor] / 1000).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
917
+ item[itemTd.accessor] === itemSelect.value ?
918
+
919
+ <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index) + indexSelect}>
920
+ {itemSelect.label}
921
+ </td>
922
+
816
923
  :
817
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor].toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
818
- :
819
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor]}</td>
924
+
925
+ null
926
+ ))
820
927
 
821
928
  :
822
929
 
823
- itemTd.subTypeFilter
930
+ itemTd.typeFilter === 'number'
824
931
 
825
932
  ?
826
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{Number(item[itemTd.accessor]).toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
933
+
934
+ itemTd.subTypeFilter
935
+
936
+ ?
937
+
938
+ itemTd.characterExtra === 'km'
939
+ ?
940
+ <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{(item[itemTd.accessor] / 1000).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
941
+ :
942
+ <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor].toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
943
+ :
944
+ <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor]}</td>
945
+
827
946
  :
828
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor]}</td>
947
+
948
+ itemTd.subTypeFilter
949
+
950
+ ?
951
+ <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{Number(item[itemTd.accessor]).toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
952
+ :
953
+ <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor]}</td>
829
954
 
830
955
  // <>
831
956
 
@@ -881,6 +1006,7 @@ RowTable.propTypes = {
881
1006
  onClickActionDelete: PropTypes.func,
882
1007
  onClickActionLink: PropTypes.func,
883
1008
  onClickActionClone: PropTypes.func,
1009
+ onClickActionCheckbox: PropTypes.func,
884
1010
  txtTootipIconUserView: PropTypes.string,
885
1011
  txtTootipIconListInvoice: PropTypes.string,
886
1012
  txtTootipIconListListXLS: PropTypes.string,
@@ -891,6 +1017,7 @@ RowTable.propTypes = {
891
1017
  txtTootipIconDelete: PropTypes.string,
892
1018
  txtTootipIconLink: PropTypes.string,
893
1019
  txtTootipIconClone: PropTypes.string,
1020
+ txtTootipIconCheckbox: PropTypes.string,
894
1021
  colorRow: PropTypes.string,
895
1022
  isCheckedCheckbox: PropTypes.bool
896
1023
  }
@@ -910,6 +1037,7 @@ RowTable.defaultProps = {
910
1037
  onClickActionDelete: () => { },
911
1038
  onClickActionLink: () => { },
912
1039
  onClickActionClone: () => { },
1040
+ onClickActionCheckbox: () => { },
913
1041
  txtTootipIconUserView: '',
914
1042
  txtTootipIconListInvoice: '',
915
1043
  txtTootipIconListListXLS: '',
@@ -920,6 +1048,7 @@ RowTable.defaultProps = {
920
1048
  txtTootipIconDelete: '',
921
1049
  txtTootipIconLink: '',
922
1050
  txtTootipIconClone: '',
1051
+ txtTootipIconCheckbox: '',
923
1052
 
924
1053
  isCheckedCheckbox: false
925
1054
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "imbric-theme",
3
- "version": "0.1.3",
3
+ "version": "0.1.4",
4
4
  "description": "Components library IMBRIC",
5
5
  "private": false,
6
6
  "main": "index.js",