imbric-theme 0.5.5 → 0.5.6

Sign up to get free protection for your applications and to get access to all the features.
@@ -963,6 +963,18 @@ export const iconsMap = {
963
963
  </>
964
964
  ),
965
965
  },
966
+ linkUser: {
967
+ viewBox: '0 0 24 24',
968
+ svg: (
969
+ <>
970
+ <path class="st0" d="M4.3,0C1.9,0,0,1.9,0,4.3v8c0,2.4,1.9,4.3,4.3,4.3H6v-2H4.3c-1.3,0-2.3-1-2.3-2.3v-8C2,3,3,2,4.3,2h8
971
+ c1.3,0,2.3,1,2.3,2.3v8c0,1.3-1,2.3-2.3,2.3h-1.7v2h1.7c2.4,0,4.3-1.9,4.3-4.3v-8c0-2.4-1.9-4.3-4.3-4.3H4.3z"/>
972
+ <path class="st0" d="M9.3,11.7c0-1.3,1-2.3,2.3-2.3h1.7v-2h-1.7c-2.4,0-4.3,1.9-4.3,4.3v8c0,2.4,1.9,4.3,4.3,4.3h8
973
+ c2.4,0,4.3-1.9,4.3-4.3v-8c0-2.4-1.9-4.3-4.3-4.3H18v2h1.7c1.3,0,2.3,1,2.3,2.3v8c0,1.3-1,2.3-2.3,2.3h-8c-1.3,0-2.3-1-2.3-2.3V11.7
974
+ z"/>
975
+ </>
976
+ ),
977
+ },
966
978
 
967
979
  }
968
980
 
@@ -1,5 +1,6 @@
1
1
  import React, { useState } from 'react'
2
2
  import PropTypes from 'prop-types'
3
+ import ReactTooltip from 'react-tooltip'
3
4
 
4
5
  import styles from './RowTable.module.css'
5
6
  import { options } from './constants'
@@ -28,6 +29,16 @@ export const RowTable = ({
28
29
  onClickActionEdit,
29
30
  onClickActionSendEmail,
30
31
  onClickActionDelete,
32
+ onClickActionLink,
33
+ txtTootipIconUserView,
34
+ txtTootipIconListInvoice,
35
+ txtTootipIconListListXLS,
36
+ txtTootipIconListListCSV,
37
+ txtTootipIconListListPDF,
38
+ txtTootipIconEdit,
39
+ txtTootipIconSendEmail,
40
+ txtTootipIconDelete,
41
+ txtTootipIconLink,
31
42
 
32
43
  isCheckedCheckbox,
33
44
  onClickCheckbox,
@@ -74,6 +85,17 @@ export const RowTable = ({
74
85
 
75
86
  }
76
87
 
88
+ // STATE TOOLTIP
89
+ const [isToolTipMounted, setIsToolTipMounted] = useState(false)
90
+
91
+ // TOOLTIP
92
+ const handleMouseEnter = () => {
93
+ setIsToolTipMounted(true)
94
+ }
95
+ const handleMouseLeave = () => {
96
+ setIsToolTipMounted(false)
97
+ }
98
+
77
99
 
78
100
 
79
101
  return (
@@ -169,102 +191,474 @@ export const RowTable = ({
169
191
  <td className={getStyles('td', 'tdacctionIcons')} key={[itemTd.accessor]}>
170
192
 
171
193
  {itemTd.viewUserView ?
172
- <>
173
- <Icon
174
- id="userView"
175
- background="base"
176
- name="userView"
177
- onClick={(e) => { onClickActionUserView(e, item) }}
178
- />
179
- <Horizontal size="xs" />
180
- </>
194
+
195
+ item.viewUserView === undefined ?
196
+
197
+ <>
198
+ <span
199
+ data-tip
200
+ data-for='userView'
201
+ onMouseEnter={handleMouseEnter}
202
+ onMouseLeave={handleMouseLeave}
203
+ >
204
+ <>
205
+ <Icon
206
+ id="userView"
207
+ background="base"
208
+ name="userView"
209
+ onClick={(e) => { onClickActionUserView(e, item) }}
210
+ />
211
+ <Horizontal size="xs" />
212
+ </>
213
+
214
+ </span>
215
+
216
+ {isToolTipMounted ? (
217
+ <ReactTooltip id='userView' type='error'>
218
+ <span>{txtTootipIconUserView}</span>
219
+ </ReactTooltip>
220
+ ) : null}
221
+ </>
222
+
223
+ :
224
+
225
+ item.viewUserView ?
226
+
227
+ <>
228
+ <span
229
+ data-tip
230
+ data-for='userView'
231
+ onMouseEnter={handleMouseEnter}
232
+ onMouseLeave={handleMouseLeave}
233
+ >
234
+ <>
235
+ <Icon
236
+ id="userView"
237
+ background="base"
238
+ name="userView"
239
+ onClick={(e) => { onClickActionUserView(e, item) }}
240
+ />
241
+ <Horizontal size="xs" />
242
+ </>
243
+
244
+ </span>
245
+
246
+ {isToolTipMounted ? (
247
+ <ReactTooltip id='userView' type='error'>
248
+ <span>{txtTootipIconUserView}</span>
249
+ </ReactTooltip>
250
+ ) : null}
251
+ </>
252
+
253
+ : null
254
+
181
255
  : null}
182
256
 
183
257
 
184
258
  {itemTd.viewListInvoice ?
185
- <>
186
- <Icon
187
- id={"listInvoice" + index}
188
- background="base"
189
- name="listInvoice"
190
- onClick={(e) => { onClickActionListInvoice(e, item) }}
191
- />
192
- <Horizontal size="xs" />
193
- </>
259
+
260
+
261
+ item.viewListInvoice === undefined ?
262
+
263
+ <>
264
+ <span
265
+ data-tip
266
+ data-for='listInvoice'
267
+ onMouseEnter={handleMouseEnter}
268
+ onMouseLeave={handleMouseLeave}
269
+ >
270
+ <>
271
+ <Icon
272
+ id={"listInvoice" + index}
273
+ background="base"
274
+ name="listInvoice"
275
+ onClick={(e) => { onClickActionListInvoice(e, item) }}
276
+ />
277
+ <Horizontal size="xs" />
278
+ </>
279
+
280
+ </span>
281
+
282
+ {isToolTipMounted ? (
283
+ <ReactTooltip id='listInvoice' type='error'>
284
+ <span>{txtTootipIconListInvoice}</span>
285
+ </ReactTooltip>
286
+ ) : null}
287
+ </>
288
+
289
+ :
290
+
291
+ item.viewListInvoice ?
292
+
293
+ <>
294
+ <span
295
+ data-tip
296
+ data-for='listInvoice'
297
+ onMouseEnter={handleMouseEnter}
298
+ onMouseLeave={handleMouseLeave}
299
+ >
300
+ <>
301
+ <Icon
302
+ id={"listInvoice" + index}
303
+ background="base"
304
+ name="listInvoice"
305
+ onClick={(e) => { onClickActionListInvoice(e, item) }}
306
+ />
307
+ <Horizontal size="xs" />
308
+ </>
309
+
310
+ </span>
311
+
312
+ {isToolTipMounted ? (
313
+ <ReactTooltip id='listInvoice' type='error'>
314
+ <span>{txtTootipIconListInvoice}</span>
315
+ </ReactTooltip>
316
+ ) : null}
317
+ </>
318
+
319
+ : null
320
+
194
321
  : null}
195
322
 
196
323
  {itemTd.viewListXLS && item.fileType === 'xls' ?
324
+
197
325
  <>
198
- <Icon
199
- id={"listXLS" + index}
200
- background="base"
201
- name="listXLS"
202
- onClick={(e) => { onClickActionListXLS(e, item) }}
203
- />
204
- <Horizontal size="xs" />
326
+ <span
327
+ data-tip
328
+ data-for='listXLS'
329
+ onMouseEnter={handleMouseEnter}
330
+ onMouseLeave={handleMouseLeave}
331
+ >
332
+ <>
333
+ <Icon
334
+ id={"listXLS" + index}
335
+ background="base"
336
+ name="listXLS"
337
+ onClick={(e) => { onClickActionListXLS(e, item) }}
338
+ />
339
+ <Horizontal size="xs" />
340
+ </>
341
+
342
+ </span>
343
+
344
+ {isToolTipMounted ? (
345
+ <ReactTooltip id='listXLS' type='error'>
346
+ <span>{txtTootipIconListListXLS}</span>
347
+ </ReactTooltip>
348
+ ) : null}
205
349
  </>
350
+
206
351
  : null}
207
352
 
208
353
  {itemTd.viewListCSV && item.fileType === 'xml' ?
354
+
209
355
  <>
210
- <Icon
211
- id={"listCSV" + index}
212
- background="base"
213
- name="listCSV"
214
- onClick={(e) => { onClickActionListCSV(e, item) }}
215
- />
216
- <Horizontal size="xs" />
356
+ <span
357
+ data-tip
358
+ data-for='listCSV'
359
+ onMouseEnter={handleMouseEnter}
360
+ onMouseLeave={handleMouseLeave}
361
+ >
362
+ <>
363
+ <Icon
364
+ id={"listCSV" + index}
365
+ background="base"
366
+ name="listCSV"
367
+ onClick={(e) => { onClickActionListCSV(e, item) }}
368
+ />
369
+ <Horizontal size="xs" />
370
+ </>
371
+
372
+ </span>
373
+
374
+ {isToolTipMounted ? (
375
+ <ReactTooltip id='listCSV' type='error'>
376
+ <span>{txtTootipIconListListCSV}</span>
377
+ </ReactTooltip>
378
+ ) : null}
217
379
  </>
380
+
218
381
  : null}
219
382
 
220
383
  {itemTd.viewListPDF && item.fileType === 'pdf' ?
384
+
221
385
  <>
222
- <Icon
223
- id={"listPDF" + index}
224
- background="base"
225
- name="listPDF"
226
- onClick={(e) => { onClickActionListPDF(e, item) }}
227
- />
228
- <Horizontal size="xs" />
386
+ <span
387
+ data-tip
388
+ data-for='listPDF'
389
+ onMouseEnter={handleMouseEnter}
390
+ onMouseLeave={handleMouseLeave}
391
+ >
392
+ <>
393
+ <Icon
394
+ id={"listPDF" + index}
395
+ background="base"
396
+ name="listPDF"
397
+ onClick={(e) => { onClickActionListPDF(e, item) }}
398
+ />
399
+ <Horizontal size="xs" />
400
+ </>
401
+
402
+ </span>
403
+
404
+ {isToolTipMounted ? (
405
+ <ReactTooltip id='listPDF' type='error'>
406
+ <span>{txtTootipIconListListPDF}</span>
407
+ </ReactTooltip>
408
+ ) : null}
229
409
  </>
410
+
230
411
  : null}
231
412
 
413
+ {itemTd.viewEdit ?
232
414
 
415
+ item.viewEdit === undefined ?
416
+ <>
417
+ <span
418
+ data-tip
419
+ data-for='edit'
420
+ onMouseEnter={handleMouseEnter}
421
+ onMouseLeave={handleMouseLeave}
422
+ >
423
+ <>
424
+ <Icon
425
+ id={"edit" + index}
426
+ background="base"
427
+ name="edit"
428
+ onClick={(e) => { onClickActionEdit(e, item) }}
429
+ />
430
+ <Horizontal size="xs" />
431
+ </>
432
+
433
+ </span>
434
+
435
+ {isToolTipMounted ? (
436
+ <ReactTooltip id='edit' type='error'>
437
+ <span>{txtTootipIconEdit}</span>
438
+ </ReactTooltip>
439
+ ) : null}
440
+ </>
441
+ :
442
+
443
+ item.viewEdit ?
444
+
445
+ <>
446
+ <span
447
+ data-tip
448
+ data-for='edit'
449
+ onMouseEnter={handleMouseEnter}
450
+ onMouseLeave={handleMouseLeave}
451
+ >
452
+ <>
453
+ <Icon
454
+ id={"edit" + index}
455
+ background="base"
456
+ name="edit"
457
+ onClick={(e) => { onClickActionEdit(e, item) }}
458
+ />
459
+ <Horizontal size="xs" />
460
+ </>
461
+
462
+ </span>
463
+
464
+ {isToolTipMounted ? (
465
+ <ReactTooltip id='edit' type='error'>
466
+ <span>{txtTootipIconEdit}</span>
467
+ </ReactTooltip>
468
+ ) : null}
469
+ </>
470
+
471
+ : null
233
472
 
234
- {itemTd.viewEdit ?
235
- <>
236
- <Icon
237
- id={"edit" + index}
238
- background="base"
239
- name="edit"
240
- onClick={(e) => { onClickActionEdit(e, item) }}
241
- />
242
- <Horizontal size="xs" />
243
- </>
244
473
  : null}
245
474
 
246
475
  {itemTd.viewEmailSend ?
247
- <>
248
- <Icon
249
- background="base"
250
- name="sendEmail"
251
- // onClick={(e) => onClickEdit(e, item)}
252
- onClick={e => { onClickActionSendEmail(e, item) }}
253
- />
254
- <Horizontal size="xs" />
255
- </>
476
+
477
+ item.viewEmailSend === undefined ?
478
+
479
+ <>
480
+ <span
481
+ data-tip
482
+ data-for='sendEmail'
483
+ onMouseEnter={handleMouseEnter}
484
+ onMouseLeave={handleMouseLeave}
485
+ >
486
+ <>
487
+ <Icon
488
+ background="base"
489
+ name="sendEmail"
490
+ onClick={e => { onClickActionSendEmail(e, item) }}
491
+ />
492
+ <Horizontal size="xs" />
493
+ </>
494
+
495
+ </span>
496
+
497
+ {isToolTipMounted ? (
498
+ <ReactTooltip id='sendEmail' type='error'>
499
+ <span>{txtTootipIconSendEmail}</span>
500
+ </ReactTooltip>
501
+ ) : null}
502
+ </>
503
+
504
+ :
505
+
506
+ item.viewEmailSend ?
507
+
508
+ <>
509
+ <span
510
+ data-tip
511
+ data-for='sendEmail'
512
+ onMouseEnter={handleMouseEnter}
513
+ onMouseLeave={handleMouseLeave}
514
+ >
515
+ <>
516
+ <Icon
517
+ background="base"
518
+ name="sendEmail"
519
+ onClick={e => { onClickActionSendEmail(e, item) }}
520
+ />
521
+ <Horizontal size="xs" />
522
+ </>
523
+
524
+ </span>
525
+
526
+ {isToolTipMounted ? (
527
+ <ReactTooltip id='sendEmail' type='error'>
528
+ <span>{txtTootipIconSendEmail}</span>
529
+ </ReactTooltip>
530
+ ) : null}
531
+ </>
532
+
533
+ : null
534
+
256
535
  : null}
257
536
 
258
537
  {itemTd.viewTrash ?
259
- <>
260
- <Icon
261
- background="base"
262
- name="trash"
263
- // onClick={(e) => onClickEdit(e, item)}
264
- onClick={e => { onClickActionDelete(e, item) }}
265
- />
266
- <Horizontal size="xs" />
267
- </>
538
+
539
+ item.viewTrash === undefined ?
540
+
541
+ <>
542
+ <span
543
+ data-tip
544
+ data-for='trash'
545
+ onMouseEnter={handleMouseEnter}
546
+ onMouseLeave={handleMouseLeave}
547
+ >
548
+ <>
549
+ <Icon
550
+ background="base"
551
+ name="trash"
552
+ onClick={e => { onClickActionDelete(e, item) }}
553
+ />
554
+ <Horizontal size="xs" />
555
+ </>
556
+
557
+ </span>
558
+
559
+ {isToolTipMounted ? (
560
+ <ReactTooltip id='trash' type='error'>
561
+ <span>{txtTootipIconDelete}</span>
562
+ </ReactTooltip>
563
+ ) : null}
564
+ </>
565
+
566
+ :
567
+
568
+ item.viewTrash ?
569
+
570
+ <>
571
+ <span
572
+ data-tip
573
+ data-for='trash'
574
+ onMouseEnter={handleMouseEnter}
575
+ onMouseLeave={handleMouseLeave}
576
+ >
577
+ <>
578
+ <Icon
579
+ background="base"
580
+ name="trash"
581
+ onClick={e => { onClickActionDelete(e, item) }}
582
+ />
583
+ <Horizontal size="xs" />
584
+ </>
585
+
586
+ </span>
587
+
588
+ {isToolTipMounted ? (
589
+ <ReactTooltip id='trash' type='error'>
590
+ <span>{txtTootipIconDelete}</span>
591
+ </ReactTooltip>
592
+ ) : null}
593
+ </>
594
+
595
+ : null
596
+
597
+ : null}
598
+
599
+
600
+ {itemTd.viewLink ?
601
+
602
+ item.viewLink === undefined ?
603
+
604
+ <>
605
+ <span
606
+ data-tip
607
+ data-for='linkUser'
608
+ onMouseEnter={handleMouseEnter}
609
+ onMouseLeave={handleMouseLeave}
610
+ >
611
+ <>
612
+ <Icon
613
+ background="base"
614
+ name="linkUser"
615
+ // onClick={(e) => onClickEdit(e, item)}
616
+ onClick={e => { onClickActionLink(e, item) }}
617
+ />
618
+ <Horizontal size="xs" />
619
+ </>
620
+
621
+ </span>
622
+
623
+ {isToolTipMounted ? (
624
+ <ReactTooltip id='linkUser' type='error'>
625
+ <span>{txtTootipIconLink}</span>
626
+ </ReactTooltip>
627
+ ) : null}
628
+ </>
629
+
630
+ :
631
+
632
+ item.viewLink ?
633
+
634
+ <>
635
+ <span
636
+ data-tip
637
+ data-for='linkUser'
638
+ onMouseEnter={handleMouseEnter}
639
+ onMouseLeave={handleMouseLeave}
640
+ >
641
+ <>
642
+ <Icon
643
+ background="base"
644
+ name="linkUser"
645
+ // onClick={(e) => onClickEdit(e, item)}
646
+ onClick={e => { onClickActionLink(e, item) }}
647
+ />
648
+ <Horizontal size="xs" />
649
+ </>
650
+
651
+ </span>
652
+
653
+ {isToolTipMounted ? (
654
+ <ReactTooltip id='linkUser' type='error'>
655
+ <span>{txtTootipIconLink}</span>
656
+ </ReactTooltip>
657
+ ) : null}
658
+ </>
659
+
660
+ : null
661
+
268
662
  : null}
269
663
 
270
664
  </td>
@@ -362,6 +756,16 @@ RowTable.propTypes = {
362
756
  onClickActionEdit: PropTypes.func,
363
757
  onClickActionSendEmail: PropTypes.func,
364
758
  onClickActionDelete: PropTypes.func,
759
+ onClickActionLink: PropTypes.func,
760
+ txtTootipIconUserView: PropTypes.string,
761
+ txtTootipIconListInvoice: PropTypes.string,
762
+ txtTootipIconListListXLS: PropTypes.string,
763
+ txtTootipIconListListCSV: PropTypes.string,
764
+ txtTootipIconListListPDF: PropTypes.string,
765
+ txtTootipIconEdit: PropTypes.string,
766
+ txtTootipIconSendEmail: PropTypes.string,
767
+ txtTootipIconDelete: PropTypes.string,
768
+ txtTootipIconLink: PropTypes.string,
365
769
 
366
770
  isCheckedCheckbox: PropTypes.bool
367
771
  }
@@ -379,6 +783,17 @@ RowTable.defaultProps = {
379
783
  onClickActionEdit: () => { },
380
784
  onClickActionSendEmail: () => { },
381
785
  onClickActionDelete: () => { },
786
+ onClickActionLink: () => { },
787
+ txtTootipIconUserView: '',
788
+ txtTootipIconListInvoice: '',
789
+ txtTootipIconListListXLS: '',
790
+ txtTootipIconListListCSV: '',
791
+ txtTootipIconListListPDF: '',
792
+ txtTootipIconEdit: '',
793
+ txtTootipIconSendEmail: '',
794
+ txtTootipIconDelete: '',
795
+ txtTootipIconLink: '',
796
+
382
797
 
383
798
  isCheckedCheckbox: false
384
799
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "imbric-theme",
3
- "version": "0.5.5",
3
+ "version": "0.5.6",
4
4
  "description": "Components library IMBRIC",
5
5
  "private": false,
6
6
  "main": "index.js",
@@ -0,0 +1,13 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 25.4.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4
+ viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
5
+ <style type="text/css">
6
+ .st0{fill:#212121;}
7
+ </style>
8
+ <path class="st0" d="M4.3,0C1.9,0,0,1.9,0,4.3v8c0,2.4,1.9,4.3,4.3,4.3H6v-2H4.3c-1.3,0-2.3-1-2.3-2.3v-8C2,3,3,2,4.3,2h8
9
+ c1.3,0,2.3,1,2.3,2.3v8c0,1.3-1,2.3-2.3,2.3h-1.7v2h1.7c2.4,0,4.3-1.9,4.3-4.3v-8c0-2.4-1.9-4.3-4.3-4.3H4.3z"/>
10
+ <path class="st0" d="M9.3,11.7c0-1.3,1-2.3,2.3-2.3h1.7v-2h-1.7c-2.4,0-4.3,1.9-4.3,4.3v8c0,2.4,1.9,4.3,4.3,4.3h8
11
+ c2.4,0,4.3-1.9,4.3-4.3v-8c0-2.4-1.9-4.3-4.3-4.3H18v2h1.7c1.3,0,2.3,1,2.3,2.3v8c0,1.3-1,2.3-2.3,2.3h-8c-1.3,0-2.3-1-2.3-2.3V11.7
12
+ z"/>
13
+ </svg>