imbric-theme 0.1.3 → 0.1.4

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.
@@ -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",