imbric-theme 1.0.4 → 1.0.6

Sign up to get free protection for your applications and to get access to all the features.
Files changed (3) hide show
  1. package/molecules/RowTable/RowTable.js +451 -373
  2. package/package.json +1 -1
  3. package/styles/globals.css +119 -0
package/molecules/RowTable/RowTable.js CHANGED
@@ -254,45 +254,62 @@ export const RowTable = ({
254
254
  :
255
255
 
256
256
 
257
- itemTd.isPicture
257
+ itemTd.isIcon
258
258
 
259
259
  ?
260
260
  <td
261
261
  className={getStyles('td', 'tdacction')}
262
262
  style={{ color: item.colorTxtRow }}
263
263
  key={[itemTd.accessor] + (indexTd + index)}>
264
- <Picture
265
- src={item[itemTd.accessor]}
266
- width={50}
267
- />
268
- </td>
269
- :
270
264
 
271
- itemTd.subAccessor === 'action'
272
265
 
273
- ?
266
+ {itemTd.isIcon ?
267
+
268
+ item.isIcon === undefined ?
274
269
 
275
- <td style={{ color: item.colorTxtRow }} className={getStyles('td', 'tdacctionIcons')} key={[itemTd.accessor] + (indexTd + index)}>
270
+ <>
271
+ <span
272
+ data-tip
273
+ data-for={item.nameIcon}
274
+ onMouseEnter={handleMouseEnter}
275
+ onMouseLeave={handleMouseLeave}
276
+ >
277
+ <>
278
+ <Icon
279
+ id={item.nameIcon + (indexTd + index)}
280
+ background="base"
281
+ name={item.nameIcon}
282
+ // onClick={(e) => { onClickActionListInvoice(e, item) }}
283
+ />
284
+ <Horizontal size="xs" />
285
+ </>
276
286
 
287
+ </span>
277
288
 
278
- {itemTd.viewListInvoice ?
289
+ {isToolTipMounted ? (
290
+ <ReactTooltip id={item.nameIcon} type='error' place='left'>
291
+ <span>{item.txtTootipNameIcon}</span>
292
+ </ReactTooltip>
293
+ ) : null}
294
+ </>
279
295
 
296
+ :
280
297
 
281
- item.viewListInvoice === undefined ?
298
+ item.isIcon ?
282
299
 
283
300
  <>
284
301
  <span
285
302
  data-tip
286
- data-for='listInvoice'
303
+ data-for={item.nameIcon}
287
304
  onMouseEnter={handleMouseEnter}
288
305
  onMouseLeave={handleMouseLeave}
289
306
  >
290
307
  <>
291
308
  <Icon
292
- id={"listInvoice" + (indexTd + index)}
309
+ id={item.nameIcon + (indexTd + index)}
293
310
  background="base"
294
- name="listInvoice"
295
- onClick={(e) => { onClickActionListInvoice(e, item) }}
311
+ name={item.nameIcon}
312
+ // onClick={(e) => { onClickActionListInvoice(e, item) }}
296
313
  />
297
314
  <Horizontal size="xs" />
298
315
  </>
@@ -300,15 +317,46 @@ export const RowTable = ({
300
317
  </span>
301
318
 
302
319
  {isToolTipMounted ? (
303
- <ReactTooltip id='listInvoice' type='error' place='left'>
304
- <span>{txtTootipIconListInvoice}</span>
320
+ <ReactTooltip id={item.nameIcon} type='error'>
321
+ <span>{item.txtTootipNameIcon}</span>
305
322
  </ReactTooltip>
306
323
  ) : null}
307
324
  </>
308
325
 
309
- :
326
+ : null
327
+
328
+ : null}
329
+
330
+ </td>
331
+ :
332
+
333
+
334
+
335
+ itemTd.isPicture
336
+
337
+ ?
338
+ <td
339
+ className={getStyles('td', 'tdacction')}
340
+ style={{ color: item.colorTxtRow }}
341
+ key={[itemTd.accessor] + (indexTd + index)}>
342
+ <Picture
343
+ src={item[itemTd.accessor]}
344
+ width={50}
345
+ />
346
+ </td>
347
+ :
348
+
349
+ itemTd.subAccessor === 'action'
350
+
351
+ ?
352
+
353
+ <td style={{ color: item.colorTxtRow }} className={getStyles('td', 'tdacctionIcons')} key={[itemTd.accessor] + (indexTd + index)}>
354
+
310
355
 
311
- item.viewListInvoice ?
356
+ {itemTd.viewListInvoice ?
357
+
358
+
359
+ item.viewListInvoice === undefined ?
312
360
 
313
361
  <>
314
362
  <span
@@ -330,122 +378,121 @@ export const RowTable = ({
330
378
  </span>
331
379
 
332
380
  {isToolTipMounted ? (
333
- <ReactTooltip id='listInvoice' type='error'>
381
+ <ReactTooltip id='listInvoice' type='error' place='left'>
334
382
  <span>{txtTootipIconListInvoice}</span>
335
383
  </ReactTooltip>
336
384
  ) : null}
337
385
  </>
338
386
 
339
- : null
340
-
341
- : null}
342
-
343
- {itemTd.viewListXLS && item.fileType === 'xls' ?
387
+ :
344
388
 
345
- <>
346
- <span
347
- data-tip
348
- data-for='listXLS'
349
- onMouseEnter={handleMouseEnter}
350
- onMouseLeave={handleMouseLeave}
351
- >
352
- <>
353
- <Icon
354
- id={"listXLS" + (indexTd + index)}
355
- background="base"
356
- name="listXLS"
357
- onClick={(e) => { onClickActionListXLS(e, item) }}
358
- />
359
- <Horizontal size="xs" />
360
- </>
389
+ item.viewListInvoice ?
361
390
 
362
- </span>
391
+ <>
392
+ <span
393
+ data-tip
394
+ data-for='listInvoice'
395
+ onMouseEnter={handleMouseEnter}
396
+ onMouseLeave={handleMouseLeave}
397
+ >
398
+ <>
399
+ <Icon
400
+ id={"listInvoice" + (indexTd + index)}
401
+ background="base"
402
+ name="listInvoice"
403
+ onClick={(e) => { onClickActionListInvoice(e, item) }}
404
+ />
405
+ <Horizontal size="xs" />
406
+ </>
407
+
408
+ </span>
409
+
410
+ {isToolTipMounted ? (
411
+ <ReactTooltip id='listInvoice' type='error'>
412
+ <span>{txtTootipIconListInvoice}</span>
413
+ </ReactTooltip>
414
+ ) : null}
415
+ </>
363
416
 
364
- {isToolTipMounted ? (
365
- <ReactTooltip id='listXLS' type='error'>
366
- <span>{txtTootipIconListListXLS}</span>
367
- </ReactTooltip>
368
- ) : null}
369
- </>
417
+ : null
370
418
 
371
- : null}
419
+ : null}
372
420
 
373
- {itemTd.viewListCSV && item.fileType === 'xml' ?
421
+ {itemTd.viewListXLS && item.fileType === 'xls' ?
374
422
 
375
- <>
376
- <span
377
- data-tip
378
- data-for='listCSV'
379
- onMouseEnter={handleMouseEnter}
380
- onMouseLeave={handleMouseLeave}
381
- >
382
- <>
383
- <Icon
384
- id={"listCSV" + (indexTd + index)}
385
- background="base"
386
- name="listCSV"
387
- onClick={(e) => { onClickActionListCSV(e, item) }}
388
- />
389
- <Horizontal size="xs" />
390
- </>
423
+ <>
424
+ <span
425
+ data-tip
426
+ data-for='listXLS'
427
+ onMouseEnter={handleMouseEnter}
428
+ onMouseLeave={handleMouseLeave}
429
+ >
430
+ <>
431
+ <Icon
432
+ id={"listXLS" + (indexTd + index)}
433
+ background="base"
434
+ name="listXLS"
435
+ onClick={(e) => { onClickActionListXLS(e, item) }}
436
+ />
437
+ <Horizontal size="xs" />
438
+ </>
391
439
 
392
- </span>
440
+ </span>
393
441
 
394
- {isToolTipMounted ? (
395
- <ReactTooltip id='listCSV' type='error'>
396
- <span>{txtTootipIconListListCSV}</span>
397
- </ReactTooltip>
398
- ) : null}
399
- </>
442
+ {isToolTipMounted ? (
443
+ <ReactTooltip id='listXLS' type='error'>
444
+ <span>{txtTootipIconListListXLS}</span>
445
+ </ReactTooltip>
446
+ ) : null}
447
+ </>
400
448
 
401
- : null}
449
+ : null}
402
450
 
403
- {itemTd.viewListPDF && item.fileType === 'pdf' ?
451
+ {itemTd.viewListCSV && item.fileType === 'xml' ?
404
452
 
405
- <>
406
- <span
407
- data-tip
408
- data-for='listPDF'
409
- onMouseEnter={handleMouseEnter}
410
- onMouseLeave={handleMouseLeave}
411
- >
412
- <>
413
- <Icon
414
- id={"listPDF" + (indexTd + index)}
415
- background="base"
416
- name="listPDF"
417
- onClick={(e) => { onClickActionListPDF(e, item) }}
418
- />
419
- <Horizontal size="xs" />
420
- </>
453
+ <>
454
+ <span
455
+ data-tip
456
+ data-for='listCSV'
457
+ onMouseEnter={handleMouseEnter}
458
+ onMouseLeave={handleMouseLeave}
459
+ >
460
+ <>
461
+ <Icon
462
+ id={"listCSV" + (indexTd + index)}
463
+ background="base"
464
+ name="listCSV"
465
+ onClick={(e) => { onClickActionListCSV(e, item) }}
466
+ />
467
+ <Horizontal size="xs" />
468
+ </>
421
469
 
422
- </span>
470
+ </span>
423
471
 
424
- {isToolTipMounted ? (
425
- <ReactTooltip id='listPDF' type='error'>
426
- <span>{txtTootipIconListListPDF}</span>
427
- </ReactTooltip>
428
- ) : null}
429
- </>
472
+ {isToolTipMounted ? (
473
+ <ReactTooltip id='listCSV' type='error'>
474
+ <span>{txtTootipIconListListCSV}</span>
475
+ </ReactTooltip>
476
+ ) : null}
477
+ </>
430
478
 
431
- : null}
479
+ : null}
432
480
 
433
- {itemTd.viewEdit ?
481
+ {itemTd.viewListPDF && item.fileType === 'pdf' ?
434
482
 
435
- item.viewEdit === undefined ?
436
483
  <>
437
484
  <span
438
485
  data-tip
439
- data-for='edit'
486
+ data-for='listPDF'
440
487
  onMouseEnter={handleMouseEnter}
441
488
  onMouseLeave={handleMouseLeave}
442
489
  >
443
490
  <>
444
491
  <Icon
445
- id={"edit" + (indexTd + index)}
492
+ id={"listPDF" + (indexTd + index)}
446
493
  background="base"
447
- name="edit"
448
- onClick={(e) => { onClickActionEdit(e, item) }}
494
+ name="listPDF"
495
+ onClick={(e) => { onClickActionListPDF(e, item) }}
449
496
  />
450
497
  <Horizontal size="xs" />
451
498
  </>
@@ -453,15 +500,17 @@ export const RowTable = ({
453
500
  </span>
454
501
 
455
502
  {isToolTipMounted ? (
456
- <ReactTooltip id='edit' type='error'>
457
- <span>{txtTootipIconEdit}</span>
503
+ <ReactTooltip id='listPDF' type='error'>
504
+ <span>{txtTootipIconListListPDF}</span>
458
505
  </ReactTooltip>
459
506
  ) : null}
460
507
  </>
461
- :
462
508
 
463
- item.viewEdit ?
509
+ : null}
464
510
 
511
+ {itemTd.viewEdit ?
512
+
513
+ item.viewEdit === undefined ?
465
514
  <>
466
515
  <span
467
516
  data-tip
@@ -487,43 +536,43 @@ export const RowTable = ({
487
536
  </ReactTooltip>
488
537
  ) : null}
489
538
  </>
539
+ :
490
540
 
491
- : null
492
-
493
- : null}
494
-
495
- {itemTd.viewEmailSend ?
496
-
497
- item.viewEmailSend === undefined ?
541
+ item.viewEdit ?
498
542
 
499
- <>
500
- <span
501
- data-tip
502
- data-for='sendEmail'
503
- onMouseEnter={handleMouseEnter}
504
- onMouseLeave={handleMouseLeave}
505
- >
506
543
  <>
507
- <Icon
508
- background="base"
509
- name="sendEmail"
510
- onClick={e => { onClickActionSendEmail(e, item) }}
511
- />
512
- <Horizontal size="xs" />
544
+ <span
545
+ data-tip
546
+ data-for='edit'
547
+ onMouseEnter={handleMouseEnter}
548
+ onMouseLeave={handleMouseLeave}
549
+ >
550
+ <>
551
+ <Icon
552
+ id={"edit" + (indexTd + index)}
553
+ background="base"
554
+ name="edit"
555
+ onClick={(e) => { onClickActionEdit(e, item) }}
556
+ />
557
+ <Horizontal size="xs" />
558
+ </>
559
+
560
+ </span>
561
+
562
+ {isToolTipMounted ? (
563
+ <ReactTooltip id='edit' type='error'>
564
+ <span>{txtTootipIconEdit}</span>
565
+ </ReactTooltip>
566
+ ) : null}
513
567
  </>
514
568
 
515
- </span>
569
+ : null
516
570
 
517
- {isToolTipMounted ? (
518
- <ReactTooltip id='sendEmail' type='error'>
519
- <span>{txtTootipIconSendEmail}</span>
520
- </ReactTooltip>
521
- ) : null}
522
- </>
571
+ : null}
523
572
 
524
- :
573
+ {itemTd.viewEmailSend ?
525
574
 
526
- item.viewEmailSend ?
575
+ item.viewEmailSend === undefined ?
527
576
 
528
577
  <>
529
578
  <span
@@ -550,44 +599,43 @@ export const RowTable = ({
550
599
  ) : null}
551
600
  </>
552
601
 
553
- : null
554
-
555
- : null}
556
-
557
-
558
- {itemTd.viewLink ?
602
+ :
559
603
 
560
- item.viewLink === undefined ?
604
+ item.viewEmailSend ?
561
605
 
562
- <>
563
- <span
564
- data-tip
565
- data-for='linkUser'
566
- onMouseEnter={handleMouseEnter}
567
- onMouseLeave={handleMouseLeave}
568
- >
569
606
  <>
570
- <Icon
571
- background="base"
572
- name="linkUser"
573
- // onClick={(e) => onClickEdit(e, item)}
574
- onClick={e => { onClickActionLink(e, item) }}
575
- />
576
- <Horizontal size="xs" />
607
+ <span
608
+ data-tip
609
+ data-for='sendEmail'
610
+ onMouseEnter={handleMouseEnter}
611
+ onMouseLeave={handleMouseLeave}
612
+ >
613
+ <>
614
+ <Icon
615
+ background="base"
616
+ name="sendEmail"
617
+ onClick={e => { onClickActionSendEmail(e, item) }}
618
+ />
619
+ <Horizontal size="xs" />
620
+ </>
621
+
622
+ </span>
623
+
624
+ {isToolTipMounted ? (
625
+ <ReactTooltip id='sendEmail' type='error'>
626
+ <span>{txtTootipIconSendEmail}</span>
627
+ </ReactTooltip>
628
+ ) : null}
577
629
  </>
578
630
 
579
- </span>
631
+ : null
580
632
 
581
- {isToolTipMounted ? (
582
- <ReactTooltip id='linkUser' type='error'>
583
- <span>{txtTootipIconLink}</span>
584
- </ReactTooltip>
585
- ) : null}
586
- </>
633
+ : null}
587
634
 
588
- :
589
635
 
590
- item.viewLink ?
636
+ {itemTd.viewLink ?
637
+
638
+ item.viewLink === undefined ?
591
639
 
592
640
  <>
593
641
  <span
@@ -615,44 +663,45 @@ export const RowTable = ({
615
663
  ) : null}
616
664
  </>
617
665
 
618
- : null
619
-
620
- : null}
621
-
622
-
623
-
624
- {itemTd.viewClone ?
666
+ :
625
667
 
626
- item.viewClone === undefined ?
668
+ item.viewLink ?
627
669
 
628
- <>
629
- <span
630
- data-tip
631
- data-for='clone'
632
- onMouseEnter={handleMouseEnter}
633
- onMouseLeave={handleMouseLeave}
634
- >
635
670
  <>
636
- <Icon
637
- background="base"
638
- name="cloneDefault"
639
- onClick={e => { onClickActionClone(e, item) }}
640
- />
641
- <Horizontal size="xs" />
671
+ <span
672
+ data-tip
673
+ data-for='linkUser'
674
+ onMouseEnter={handleMouseEnter}
675
+ onMouseLeave={handleMouseLeave}
676
+ >
677
+ <>
678
+ <Icon
679
+ background="base"
680
+ name="linkUser"
681
+ // onClick={(e) => onClickEdit(e, item)}
682
+ onClick={e => { onClickActionLink(e, item) }}
683
+ />
684
+ <Horizontal size="xs" />
685
+ </>
686
+
687
+ </span>
688
+
689
+ {isToolTipMounted ? (
690
+ <ReactTooltip id='linkUser' type='error'>
691
+ <span>{txtTootipIconLink}</span>
692
+ </ReactTooltip>
693
+ ) : null}
642
694
  </>
643
695
 
644
- </span>
696
+ : null
697
+
698
+ : null}
645
699
 
646
- {isToolTipMounted ? (
647
- <ReactTooltip id='clone' type='error'>
648
- <span>{txtTootipIconClone}</span>
649
- </ReactTooltip>
650
- ) : null}
651
- </>
652
700
 
653
- :
654
701
 
655
- item.viewClone ?
702
+ {itemTd.viewClone ?
703
+
704
+ item.viewClone === undefined ?
656
705
 
657
706
  <>
658
707
  <span
@@ -664,7 +713,7 @@ export const RowTable = ({
664
713
  <>
665
714
  <Icon
666
715
  background="base"
667
- name="clone"
716
+ name="cloneDefault"
668
717
  onClick={e => { onClickActionClone(e, item) }}
669
718
  />
670
719
  <Horizontal size="xs" />
@@ -679,43 +728,42 @@ export const RowTable = ({
679
728
  ) : null}
680
729
  </>
681
730
 
682
- : null
683
-
684
- : null}
685
-
686
- {itemTd.viewUserView ?
731
+ :
687
732
 
688
- item.viewUserView === undefined ?
733
+ item.viewClone ?
689
734
 
690
- <>
691
- <span
692
- data-tip
693
- data-for='userView'
694
- onMouseEnter={handleMouseEnter}
695
- onMouseLeave={handleMouseLeave}
696
- >
697
735
  <>
698
- <Icon
699
- id="userView"
700
- background="base"
701
- name="userView"
702
- onClick={(e) => { onClickActionUserView(e, item) }}
703
- />
704
- <Horizontal size="xs" />
736
+ <span
737
+ data-tip
738
+ data-for='clone'
739
+ onMouseEnter={handleMouseEnter}
740
+ onMouseLeave={handleMouseLeave}
741
+ >
742
+ <>
743
+ <Icon
744
+ background="base"
745
+ name="clone"
746
+ onClick={e => { onClickActionClone(e, item) }}
747
+ />
748
+ <Horizontal size="xs" />
749
+ </>
750
+
751
+ </span>
752
+
753
+ {isToolTipMounted ? (
754
+ <ReactTooltip id='clone' type='error'>
755
+ <span>{txtTootipIconClone}</span>
756
+ </ReactTooltip>
757
+ ) : null}
705
758
  </>
706
759
 
707
- </span>
760
+ : null
708
761
 
709
- {isToolTipMounted ? (
710
- <ReactTooltip id='userView' type='error'>
711
- <span>{txtTootipIconUserView}</span>
712
- </ReactTooltip>
713
- ) : null}
714
- </>
762
+ : null}
715
763
 
716
- :
764
+ {itemTd.viewUserView ?
717
765
 
718
- item.viewUserView ?
766
+ item.viewUserView === undefined ?
719
767
 
720
768
  <>
721
769
  <span
@@ -743,44 +791,44 @@ export const RowTable = ({
743
791
  ) : null}
744
792
  </>
745
793
 
746
- : null
747
-
748
- : null}
749
-
750
-
751
- {itemTd.viewFileDownload ?
794
+ :
752
795
 
753
- item.viewFileDownload === undefined ?
796
+ item.viewUserView ?
754
797
 
755
- <>
756
- <span
757
- data-tip
758
- data-for='fileDownload'
759
- onMouseEnter={handleMouseEnter}
760
- onMouseLeave={handleMouseLeave}
761
- >
762
798
  <>
763
- <Icon
764
- id="fileDownload"
765
- background="base"
766
- name="fileDownload"
767
- onClick={(e) => { onClickActionFileDownload(e, item) }}
768
- />
769
- <Horizontal size="xs" />
799
+ <span
800
+ data-tip
801
+ data-for='userView'
802
+ onMouseEnter={handleMouseEnter}
803
+ onMouseLeave={handleMouseLeave}
804
+ >
805
+ <>
806
+ <Icon
807
+ id="userView"
808
+ background="base"
809
+ name="userView"
810
+ onClick={(e) => { onClickActionUserView(e, item) }}
811
+ />
812
+ <Horizontal size="xs" />
813
+ </>
814
+
815
+ </span>
816
+
817
+ {isToolTipMounted ? (
818
+ <ReactTooltip id='userView' type='error'>
819
+ <span>{txtTootipIconUserView}</span>
820
+ </ReactTooltip>
821
+ ) : null}
770
822
  </>
771
823
 
772
- </span>
824
+ : null
773
825
 
774
- {isToolTipMounted ? (
775
- <ReactTooltip id='fileDownload' type='error'>
776
- <span>{txtTootipIconFileDownload}</span>
777
- </ReactTooltip>
778
- ) : null}
779
- </>
826
+ : null}
780
827
 
781
- :
782
828
 
783
- item.viewFileDownload ?
829
+ {itemTd.viewFileDownload ?
830
+
831
+ item.viewFileDownload === undefined ?
784
832
 
785
833
  <>
786
834
  <span
@@ -808,48 +856,46 @@ export const RowTable = ({
808
856
  ) : null}
809
857
  </>
810
858
 
811
- : null
812
-
813
- : null}
814
-
815
-
816
-
817
-
818
- {itemTd.viewCheckbox ?
859
+ :
819
860
 
820
- item.viewCheckbox === undefined ?
861
+ item.viewFileDownload ?
821
862
 
822
- <>
823
- <span
824
- data-tip
825
- data-for='checkbox'
826
- onMouseEnter={handleMouseEnter}
827
- onMouseLeave={handleMouseLeave}
828
- >
829
863
  <>
864
+ <span
865
+ data-tip
866
+ data-for='fileDownload'
867
+ onMouseEnter={handleMouseEnter}
868
+ onMouseLeave={handleMouseLeave}
869
+ >
870
+ <>
871
+ <Icon
872
+ id="fileDownload"
873
+ background="base"
874
+ name="fileDownload"
875
+ onClick={(e) => { onClickActionFileDownload(e, item) }}
876
+ />
877
+ <Horizontal size="xs" />
878
+ </>
879
+
880
+ </span>
881
+
882
+ {isToolTipMounted ? (
883
+ <ReactTooltip id='fileDownload' type='error'>
884
+ <span>{txtTootipIconFileDownload}</span>
885
+ </ReactTooltip>
886
+ ) : null}
887
+ </>
830
888
 
831
- <Toggle
832
- id={'idToggle' + item.id}
833
- checked={item.isSelected}
834
- label=""
835
- onChangeCheckbox={(e) => { onClickActionCheckbox(e, item) }}
836
- />
889
+ : null
837
890
 
838
- {/* <Horizontal size="xs" /> */}
839
- </>
891
+ : null}
840
892
 
841
- </span>
842
893
 
843
- {isToolTipMounted ? (
844
- <ReactTooltip id='checkbox' type='error'>
845
- <span>{txtTootipIconCheckbox}</span>
846
- </ReactTooltip>
847
- ) : null}
848
- </>
849
894
 
850
- :
851
895
 
852
- item.viewCheckbox ?
896
+ {itemTd.viewCheckbox ?
897
+
898
+ item.viewCheckbox === undefined ?
853
899
 
854
900
  <>
855
901
  <span
@@ -859,6 +905,7 @@ export const RowTable = ({
859
905
  onMouseLeave={handleMouseLeave}
860
906
  >
861
907
  <>
908
+
862
909
  <Toggle
863
910
  id={'idToggle' + item.id}
864
911
  checked={item.isSelected}
@@ -878,43 +925,45 @@ export const RowTable = ({
878
925
  ) : null}
879
926
  </>
880
927
 
881
- : null
882
-
883
- : null}
884
-
885
-
886
- {itemTd.viewTrash ?
928
+ :
887
929
 
888
- item.viewTrash === undefined ?
930
+ item.viewCheckbox ?
889
931
 
890
- <>
891
- <span
892
- data-tip
893
- data-for='trash'
894
- onMouseEnter={handleMouseEnter}
895
- onMouseLeave={handleMouseLeave}
896
- >
897
932
  <>
898
- <Icon
899
- background="base"
900
- name="trash"
901
- onClick={e => { onClickActionDelete(e, item) }}
902
- />
903
- <Horizontal size="xs" />
933
+ <span
934
+ data-tip
935
+ data-for='checkbox'
936
+ onMouseEnter={handleMouseEnter}
937
+ onMouseLeave={handleMouseLeave}
938
+ >
939
+ <>
940
+ <Toggle
941
+ id={'idToggle' + item.id}
942
+ checked={item.isSelected}
943
+ label=""
944
+ onChangeCheckbox={(e) => { onClickActionCheckbox(e, item) }}
945
+ />
946
+
947
+ {/* <Horizontal size="xs" /> */}
948
+ </>
949
+
950
+ </span>
951
+
952
+ {isToolTipMounted ? (
953
+ <ReactTooltip id='checkbox' type='error'>
954
+ <span>{txtTootipIconCheckbox}</span>
955
+ </ReactTooltip>
956
+ ) : null}
904
957
  </>
905
958
 
906
- </span>
959
+ : null
907
960
 
908
- {isToolTipMounted ? (
909
- <ReactTooltip id='trash' type='error'>
910
- <span>{txtTootipIconDelete}</span>
911
- </ReactTooltip>
912
- ) : null}
913
- </>
961
+ : null}
914
962
 
915
- :
916
963
 
917
- item.viewTrash ?
964
+ {itemTd.viewTrash ?
965
+
966
+ item.viewTrash === undefined ?
918
967
 
919
968
  <>
920
969
  <span
@@ -941,102 +990,131 @@ export const RowTable = ({
941
990
  ) : null}
942
991
  </>
943
992
 
944
- : null
945
-
946
- : null}
993
+ :
947
994
 
995
+ item.viewTrash ?
948
996
 
997
+ <>
998
+ <span
999
+ data-tip
1000
+ data-for='trash'
1001
+ onMouseEnter={handleMouseEnter}
1002
+ onMouseLeave={handleMouseLeave}
1003
+ >
1004
+ <>
1005
+ <Icon
1006
+ background="base"
1007
+ name="trash"
1008
+ onClick={e => { onClickActionDelete(e, item) }}
1009
+ />
1010
+ <Horizontal size="xs" />
1011
+ </>
1012
+
1013
+ </span>
1014
+
1015
+ {isToolTipMounted ? (
1016
+ <ReactTooltip id='trash' type='error'>
1017
+ <span>{txtTootipIconDelete}</span>
1018
+ </ReactTooltip>
1019
+ ) : null}
1020
+ </>
949
1021
 
1022
+ : null
950
1023
 
1024
+ : null}
951
1025
 
952
- </td>
953
1026
 
954
- :
955
1027
 
956
- itemTd.subAccessor !== ''
957
1028
 
958
- ?
959
1029
 
960
- <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor][itemTd.subAccessor]}</td>
1030
+ </td>
961
1031
 
962
1032
  :
963
1033
 
964
- itemTd.typeFilter === 'date'
1034
+ itemTd.subAccessor !== ''
965
1035
 
966
1036
  ?
967
1037
 
968
- itemTd.typeFilterSub === 'date_only' ?
1038
+ <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor][itemTd.subAccessor]}</td>
969
1039
 
970
- <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
1040
+ :
971
1041
 
972
- {item[itemTd.accessor] ? (
1042
+ itemTd.typeFilter === 'date'
973
1043
 
974
- <Moment format="DD/MM/YYYY">
975
- {item[itemTd.accessor]}
976
- </Moment>
1044
+ ?
977
1045
 
978
- ) : null}
1046
+ itemTd.typeFilterSub === 'date_only' ?
979
1047
 
980
- </td>
1048
+ <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
981
1049
 
982
- :
1050
+ {item[itemTd.accessor] ? (
983
1051
 
984
- <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
985
- {/* <Moment format="DD/MM/YYYY hh:mm:ss"> */}
986
- {item[itemTd.accessor] ? (
1052
+ <Moment format="DD/MM/YYYY">
1053
+ {item[itemTd.accessor]}
1054
+ </Moment>
987
1055
 
988
- <Moment format="DD/MM/YYYY HH:mm">
989
- {item[itemTd.accessor]}
990
- </Moment>
1056
+ ) : null}
991
1057
 
992
- ) : null}
993
- </td>
994
- :
1058
+ </td>
995
1059
 
996
- itemTd.typeFilter === 'select'
1060
+ :
997
1061
 
998
- ?
1062
+ <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
1063
+ {/* <Moment format="DD/MM/YYYY hh:mm:ss"> */}
1064
+ {item[itemTd.accessor] ? (
999
1065
 
1000
- itemTd.optionsSelect.map((itemSelect, indexSelect) => (
1066
+ <Moment format="DD/MM/YYYY HH:mm">
1067
+ {item[itemTd.accessor]}
1068
+ </Moment>
1001
1069
 
1070
+ ) : null}
1071
+ </td>
1072
+ :
1002
1073
 
1003
- item[itemTd.accessor] === itemSelect.value ?
1074
+ itemTd.typeFilter === 'select'
1004
1075
 
1005
- <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index) + indexSelect}>
1006
- {itemSelect.label}
1007
- </td>
1076
+ ?
1008
1077
 
1009
- :
1078
+ itemTd.optionsSelect.map((itemSelect, indexSelect) => (
1010
1079
 
1011
- null
1012
- ))
1013
1080
 
1014
- :
1081
+ item[itemTd.accessor] === itemSelect.value ?
1015
1082
 
1016
- itemTd.typeFilter === 'number'
1083
+ <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index) + indexSelect}>
1084
+ {itemSelect.label}
1085
+ </td>
1017
1086
 
1018
- ?
1087
+ :
1088
+
1089
+ null
1090
+ ))
1091
+
1092
+ :
1019
1093
 
1020
- itemTd.subTypeFilter
1094
+ itemTd.typeFilter === 'number'
1021
1095
 
1022
1096
  ?
1023
1097
 
1024
- itemTd.characterExtra === 'km'
1098
+ itemTd.subTypeFilter
1099
+
1025
1100
  ?
1026
- <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{(item[itemTd.accessor] / 1000).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
1101
+
1102
+ itemTd.characterExtra === 'km'
1103
+ ?
1104
+ <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{(item[itemTd.accessor] / 1000).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
1105
+ :
1106
+ <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor].toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
1027
1107
  :
1028
- <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor].toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
1029
- :
1030
- <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor]}</td>
1108
+ <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor]}</td>
1031
1109
 
1032
- :
1110
+ :
1033
1111
 
1034
- itemTd.subTypeFilter
1112
+ itemTd.subTypeFilter
1035
1113
 
1036
- ?
1037
- <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{Number(item[itemTd.accessor]).toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
1038
- :
1039
- <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor]}</td>
1114
+ ?
1115
+ <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{Number(item[itemTd.accessor]).toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
1116
+ :
1117
+ <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor]}</td>
1040
1118
 
1041
1119
  // <>
1042
1120
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "imbric-theme",
3
- "version": "1.0.4",
3
+ "version": "1.0.6",
4
4
  "description": "Components library IMBRIC",
5
5
  "private": false,
6
6
  "main": "index.js",
package/styles/globals.css CHANGED
@@ -1521,4 +1521,123 @@ body {
1521
1521
  padding: 0;
1522
1522
  width: 1px;
1523
1523
  white-space: nowrap;
1524
+ }
1525
+
1526
+ /* INPUT ADD MODAL */
1527
+
1528
+ .css-mlo5or-control {
1529
+ -webkit-align-items: center;
1530
+ -webkit-box-align: center;
1531
+ -ms-flex-align: center;
1532
+ align-items: center;
1533
+ background-color: hsl(0, 0%, 100%);
1534
+ border-color: hsl(0, 0%, 80%);
1535
+ border-radius: 0;
1536
+ border-style: solid;
1537
+ border-width: 1px;
1538
+ box-shadow: none;
1539
+ cursor: pointer;
1540
+ display: -webkit-box;
1541
+ display: -webkit-flex;
1542
+ display: -ms-flexbox;
1543
+ display: flex;
1544
+ -webkit-box-flex-wrap: wrap;
1545
+ -webkit-flex-wrap: wrap;
1546
+ -ms-flex-wrap: wrap;
1547
+ flex-wrap: wrap;
1548
+ -webkit-box-pack: justify;
1549
+ -webkit-justify-content: space-between;
1550
+ justify-content: space-between;
1551
+ min-height: 38px;
1552
+ outline: 0 !important;
1553
+ position: relative;
1554
+ -webkit-transition: all 100ms;
1555
+ transition: all 100ms;
1556
+ box-sizing: border-box;
1557
+ width: 100%;
1558
+ border: var(--border-width-thin) solid var(--color-brand-white-lilac);
1559
+ }
1560
+
1561
+ .css-1huup54-ValueContainer {
1562
+ -webkit-align-items: center;
1563
+ -webkit-box-align: center;
1564
+ -ms-flex-align: center;
1565
+ align-items: center;
1566
+ display: grid;
1567
+ -webkit-flex: 1;
1568
+ -ms-flex: 1;
1569
+ flex: 1;
1570
+ -webkit-box-flex-wrap: wrap;
1571
+ -webkit-flex-wrap: wrap;
1572
+ -ms-flex-wrap: wrap;
1573
+ flex-wrap: wrap;
1574
+ padding: 2px 8px;
1575
+ -webkit-overflow-scrolling: touch;
1576
+ position: relative;
1577
+ overflow: hidden;
1578
+ box-sizing: border-box;
1579
+ text-overflow: ellipsis;
1580
+ white-space: nowrap;
1581
+ }
1582
+
1583
+ .css-1hb7zxy-IndicatorsContainer {
1584
+ -webkit-align-items: center;
1585
+ -webkit-box-align: center;
1586
+ -ms-flex-align: center;
1587
+ align-items: center;
1588
+ -webkit-align-self: stretch;
1589
+ -ms-flex-item-align: stretch;
1590
+ align-self: stretch;
1591
+ display: -webkit-box;
1592
+ display: -webkit-flex;
1593
+ display: -ms-flexbox;
1594
+ display: flex;
1595
+ -webkit-flex-shrink: 0;
1596
+ -ms-flex-negative: 0;
1597
+ flex-shrink: 0;
1598
+ box-sizing: border-box;
1599
+ }
1600
+
1601
+ .css-qc6sy-singleValue {
1602
+ color: hsl(0, 0%, 20%);
1603
+ grid-area: 1 / 1 / 2 / 3;
1604
+ margin-left: 2px;
1605
+ margin-right: 2px;
1606
+ max-width: 100%;
1607
+ overflow: hidden;
1608
+ text-overflow: ellipsis;
1609
+ white-space: nowrap;
1610
+ box-sizing: border-box;
1611
+ }
1612
+
1613
+ .css-1okebmr-indicatorSeparator {
1614
+ -webkit-align-self: stretch;
1615
+ -ms-flex-item-align: stretch;
1616
+ align-self: stretch;
1617
+ background-color: hsl(0, 0%, 80%);
1618
+ margin-bottom: 8px;
1619
+ margin-top: 8px;
1620
+ width: 1px;
1621
+ box-sizing: border-box;
1622
+ }
1623
+
1624
+ .css-tlfecz-indicatorContainer {
1625
+ color: hsl(0, 0%, 80%);
1626
+ display: -webkit-box;
1627
+ display: -webkit-flex;
1628
+ display: -ms-flexbox;
1629
+ display: flex;
1630
+ padding: 8px;
1631
+ -webkit-transition: color 150ms;
1632
+ transition: color 150ms;
1633
+ box-sizing: border-box;
1634
+ }
1635
+
1636
+
1637
+ .css-tj5bde-Svg {
1638
+ display: inline-block;
1639
+ fill: currentColor;
1640
+ line-height: 1;
1641
+ stroke: currentColor;
1642
+ stroke-width: 0;
1524
1643
  }