imbric-theme 0.5.4 → 0.5.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/atoms/AlertModal/AlertModal.js +15 -7
  2. package/atoms/Checkbox/Checkbox.js +3 -0
  3. package/atoms/Icon/constants.js +12 -0
  4. package/atoms/Label/Label.module.css +4 -0
  5. package/atoms/Label/constants.js +1 -1
  6. package/layout/Navbar/Navbar.js +78 -33
  7. package/molecules/RowTable/RowTable.js +501 -71
  8. package/molecules/RowTable/RowTable.module.css +4 -0
  9. package/package.json +1 -1
  10. package/public/static/images/link-square-svgrepo-com.svg +13 -0
package/atoms/AlertModal/AlertModal.js CHANGED
@@ -7,13 +7,15 @@ import withStyles from '../../hocs/withStyles'
7
7
  import withReactContent from 'sweetalert2-react-content'
8
8
  import Swal from 'sweetalert2'
9
9
 
10
- export const AlertModal = ({
10
+ export const AlertModal = ({
11
11
  children,
12
12
  getStyles,
13
13
  titleAlert,
14
14
  subTitleAlert,
15
15
  iconAlert,
16
16
  txtBtnAlert,
17
+ txtBtnAlertCancel,
18
+ showCancelButton,
17
19
  onConfirm,
18
20
  onDismiss,
19
21
  }) => {
@@ -25,9 +27,11 @@ export const AlertModal = ({
25
27
  icon: iconAlert,
26
28
  html: subTitleAlert,
27
29
  confirmButtonText: txtBtnAlert,
30
+ cancelButtonText: txtBtnAlertCancel,
31
+ showCancelButton: showCancelButton,
28
32
  }).then((result) => {
29
33
  if (result.isConfirmed || (result.isDismissed && !onDismiss)) {
30
- onConfirm()
34
+ onConfirm()
31
35
  } else if (result.isDismissed) {
32
36
  onDismiss()
33
37
  }
@@ -41,21 +45,25 @@ AlertModal.propTypes = {
41
45
  children: PropTypes.node,
42
46
  getStyles: PropTypes.func.isRequired,
43
47
  titleAlert: PropTypes.string.isRequired,
44
- subTitleAlert: PropTypes.string.isRequired,
45
- txtBtnAlert: PropTypes.string.isRequired,
48
+ subTitleAlert: PropTypes.string.isRequired,
49
+ txtBtnAlert: PropTypes.string.isRequired,
50
+ txtBtnAlertCancel: PropTypes.string,
46
51
  iconAlert: PropTypes.oneOf(options.icon),
47
52
  onConfirm: PropTypes.func,
48
53
  onDismiss: PropTypes.func,
54
+ showCancelButton: PropTypes.bool,
49
55
  }
50
56
 
51
57
  AlertModal.defaultProps = {
52
- getStyles: () => {},
53
- onConfirm: () => {},
58
+ getStyles: () => { },
59
+ onConfirm: () => { },
54
60
  // onDismiss: () => {}, // Not default for use onConfirm if is undefined
55
61
  titleAlert: 'Felicidades!',
56
- subTitleAlert: 'Todo ha ido correctamente',
62
+ subTitleAlert: 'Todo ha ido correctamente',
57
63
  txtBtnAlert: 'Ok',
64
+ txtBtnAlertCancel: 'Cancelar',
58
65
  iconAlert: 'success',
66
+ showCancelButton: false,
59
67
  }
60
68
 
61
69
  export default withStyles(styles)(AlertModal)
package/atoms/Checkbox/Checkbox.js CHANGED
@@ -13,6 +13,7 @@ export const Checkbox = ({
13
13
  name,
14
14
  linkCheck,
15
15
  nameLinkCheck,
16
+ handleClick,
16
17
  }) => {
17
18
  const [checked, setChecked] = useState(value)
18
19
 
@@ -29,6 +30,7 @@ export const Checkbox = ({
29
30
  setChecked(!checked)
30
31
  onChange(e)
31
32
  }}
33
+ onclick={handleClick}
32
34
  />
33
35
  <label htmlFor={name} className={getStyles('checkbox-custom-label')}>
34
36
  {label}
@@ -65,6 +67,7 @@ Checkbox.defaultProps = {
65
67
  label: 'Aceptas los terminos',
66
68
  nameLinkCheck: '',
67
69
  linkCheck: '',
70
+ handleClick: () => {},
68
71
  }
69
72
 
70
73
  export default withStyles(styles)(Checkbox)
package/atoms/Icon/constants.js CHANGED
@@ -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
 
package/atoms/Label/Label.module.css CHANGED
@@ -35,4 +35,8 @@
35
35
 
36
36
  .color-tertiary {
37
37
  color: var(--color-tertiary);
38
+ }
39
+
40
+ .color-info {
41
+ color: var(--color-brand-azure-radiance);
38
42
  }
package/atoms/Label/constants.js CHANGED
@@ -1 +1 @@
1
- export const options = { colors: ['label', 'base', 'muted', 'inverted', 'primary', 'tertiary'], }
1
+ export const options = { colors: ['label', 'base', 'muted', 'inverted', 'primary', 'tertiary', 'info'], }
package/layout/Navbar/Navbar.js CHANGED
@@ -1,21 +1,31 @@
1
- import React from 'react'
1
+ import React, { useState } from 'react'
2
2
  import PropTypes from 'prop-types'
3
3
  import styles from './Navbar.module.css'
4
4
  import withStyles from '../../hocs/withStyles'
5
5
  import { useRouter } from "next/router";
6
- import Link from 'next/link'
7
- import DynamicSelect from '../../molecules/DynamicSelect'
6
+ import ReactTooltip from 'react-tooltip'
8
7
 
9
8
  import Heading from '../../atoms/Heading/Heading'
10
9
  import Tabs from '../../molecules/Tabs/Tabs'
11
10
  import Icon from '../../atoms/Icon'
12
- import { options } from './constants'
13
11
 
14
- export const Navbar = ({ getStyles, viewTabsNav, viewOptionsNav, children, linkLogout, linkLegal, linkInfo, linkProfile, defaultValueLanguage, optionsSelectLanguage, handleChangeLanguage, languageSwitchLink }) => {
12
+ export const Navbar = ({ getStyles, viewTabsNav, viewOptionsNav, children, linkLogout, linkLegal, linkInfo, linkProfile, txtTootipLegal, txtTootipInfo, txtTootipProfile, languageSwitchLink }) => {
15
13
 
16
14
 
17
15
  const router = useRouter();
18
16
 
17
+ // STATE TOOLTIP
18
+ const [isToolTipMounted, setIsToolTipMounted] = useState(false)
19
+
20
+ // TOOLTIP
21
+ const handleMouseEnter = () => {
22
+ setIsToolTipMounted(true)
23
+ }
24
+ const handleMouseLeave = () => {
25
+ setIsToolTipMounted(false)
26
+ }
27
+
28
+
19
29
  const handleClick = (e, path) => {
20
30
 
21
31
  console.log("I clicked on the About Page" + path);
@@ -28,6 +38,8 @@ export const Navbar = ({ getStyles, viewTabsNav, viewOptionsNav, children, linkL
28
38
  };
29
39
 
30
40
 
41
+
42
+
31
43
  return (
32
44
  <>
33
45
  <header className={getStyles('navbar')}>
@@ -74,46 +86,79 @@ export const Navbar = ({ getStyles, viewTabsNav, viewOptionsNav, children, linkL
74
86
 
75
87
  {viewOptionsNav ? (
76
88
  <div className={getStyles('navbar__actions')}>
77
- {/* <div className={getStyles('navbar__item')}>Legal</div>
78
- <div className={getStyles('navbar__item')}>User Guide</div> */}
79
89
 
80
- {/* {options.map((item, index) => (
90
+
91
+ <span
92
+ data-tip
93
+ data-for='legal'
94
+ onMouseEnter={handleMouseEnter}
95
+ onMouseLeave={handleMouseLeave}
96
+ >
81
97
  <Icon
82
- key={index}
83
98
  size='lg'
84
- name={item.icon}
99
+ name='legal'
85
100
  color='highlight'
86
101
  background='transparent'
87
- onClick={(e) => handleClick(e, item.href)}
102
+ onClick={linkLegal}
88
103
  />
89
- ))} */}
90
104
 
105
+ </span>
91
106
 
107
+ {isToolTipMounted ? (
108
+ <ReactTooltip id='legal' type='error'>
109
+ <span>{txtTootipLegal}</span>
110
+ </ReactTooltip>
111
+ ) : null}
92
112
 
93
113
 
94
- <Icon
95
- size='lg'
96
- name='legal'
97
- color='highlight'
98
- background='transparent'
99
- onClick={linkLegal}
100
- />
101
114
 
102
- <Icon
103
- size='lg'
104
- name='info'
105
- color='highlight'
106
- background='transparent'
107
- onClick={linkInfo}
108
- />
109
115
 
110
- <Icon
111
- size='lg'
112
- name='profile'
113
- color='highlight'
114
- background='transparent'
115
- onClick={linkProfile}
116
- />
116
+ <span
117
+ data-tip
118
+ data-for='info'
119
+ onMouseEnter={handleMouseEnter}
120
+ onMouseLeave={handleMouseLeave}
121
+ >
122
+ <Icon
123
+ size='lg'
124
+ name='info'
125
+ color='highlight'
126
+ background='transparent'
127
+ onClick={linkInfo}
128
+ />
129
+
130
+ </span>
131
+
132
+ {isToolTipMounted ? (
133
+ <ReactTooltip id='info' type='error'>
134
+ <span>{txtTootipInfo}</span>
135
+ </ReactTooltip>
136
+ ) : null}
137
+
138
+
139
+
140
+ <span
141
+ data-tip
142
+ data-for='profile'
143
+ onMouseEnter={handleMouseEnter}
144
+ onMouseLeave={handleMouseLeave}
145
+ >
146
+ <Icon
147
+ size='lg'
148
+ name='profile'
149
+ color='highlight'
150
+ background='transparent'
151
+ onClick={linkProfile}
152
+ />
153
+
154
+ </span>
155
+
156
+ {isToolTipMounted ? (
157
+ <ReactTooltip id='profile' type='error'>
158
+ <span>{txtTootipProfile}</span>
159
+ </ReactTooltip>
160
+ ) : null}
161
+
117
162
 
118
163
 
119
164
 
package/molecules/RowTable/RowTable.js CHANGED
@@ -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 (
@@ -122,12 +144,27 @@ export const RowTable = ({
122
144
 
123
145
  {item[itemTd.accessor].map((itemTdObj, index, array) => (
124
146
 
125
- <span key={itemTdObj.id}>{itemTdObj[itemTd.subAccessor]}
147
+ <>
148
+
149
+ <span className={getStyles('tdlabelAlt')} key={itemTdObj.id + 'label'}>
150
+
151
+ {itemTdObj[itemTd.subAccessorAlt]}
152
+
153
+ {array.length - 1 !== index ?
154
+ <span>, </span> : null}
155
+ :&nbsp;
156
+ </span>
157
+
158
+ <span key={itemTdObj.id}>
126
159
 
127
- {array.length - 1 !== index ?
128
- <span>, </span> : null}
160
+ {itemTdObj[itemTd.subAccessor]}
129
161
 
130
- </span>
162
+ {array.length - 1 !== index ?
163
+ <span>, </span> : null}
164
+
165
+ </span>
166
+
167
+ </>
131
168
 
132
169
  ))}
133
170
 
@@ -154,102 +191,474 @@ export const RowTable = ({
154
191
  <td className={getStyles('td', 'tdacctionIcons')} key={[itemTd.accessor]}>
155
192
 
156
193
  {itemTd.viewUserView ?
157
- <>
158
- <Icon
159
- id="userView"
160
- background="base"
161
- name="userView"
162
- onClick={(e) => { onClickActionUserView(e, item) }}
163
- />
164
- <Horizontal size="xs" />
165
- </>
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
+
166
255
  : null}
167
256
 
168
257
 
169
258
  {itemTd.viewListInvoice ?
170
- <>
171
- <Icon
172
- id={"listInvoice" + index}
173
- background="base"
174
- name="listInvoice"
175
- onClick={(e) => { onClickActionListInvoice(e, item) }}
176
- />
177
- <Horizontal size="xs" />
178
- </>
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
+
179
321
  : null}
180
322
 
181
323
  {itemTd.viewListXLS && item.fileType === 'xls' ?
324
+
182
325
  <>
183
- <Icon
184
- id={"listXLS" + index}
185
- background="base"
186
- name="listXLS"
187
- onClick={(e) => { onClickActionListXLS(e, item) }}
188
- />
189
- <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}
190
349
  </>
350
+
191
351
  : null}
192
352
 
193
353
  {itemTd.viewListCSV && item.fileType === 'xml' ?
354
+
194
355
  <>
195
- <Icon
196
- id={"listCSV" + index}
197
- background="base"
198
- name="listCSV"
199
- onClick={(e) => { onClickActionListCSV(e, item) }}
200
- />
201
- <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}
202
379
  </>
380
+
203
381
  : null}
204
382
 
205
383
  {itemTd.viewListPDF && item.fileType === 'pdf' ?
384
+
206
385
  <>
207
- <Icon
208
- id={"listPDF" + index}
209
- background="base"
210
- name="listPDF"
211
- onClick={(e) => { onClickActionListPDF(e, item) }}
212
- />
213
- <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}
214
409
  </>
410
+
215
411
  : null}
216
412
 
413
+ {itemTd.viewEdit ?
217
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
218
472
 
219
- {itemTd.viewEdit ?
220
- <>
221
- <Icon
222
- id={"edit" + index}
223
- background="base"
224
- name="edit"
225
- onClick={(e) => { onClickActionEdit(e, item) }}
226
- />
227
- <Horizontal size="xs" />
228
- </>
229
473
  : null}
230
474
 
231
475
  {itemTd.viewEmailSend ?
232
- <>
233
- <Icon
234
- background="base"
235
- name="sendEmail"
236
- // onClick={(e) => onClickEdit(e, item)}
237
- onClick={e => { onClickActionSendEmail(e, item) }}
238
- />
239
- <Horizontal size="xs" />
240
- </>
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
+
241
535
  : null}
242
536
 
243
537
  {itemTd.viewTrash ?
244
- <>
245
- <Icon
246
- background="base"
247
- name="trash"
248
- // onClick={(e) => onClickEdit(e, item)}
249
- onClick={e => { onClickActionDelete(e, item) }}
250
- />
251
- <Horizontal size="xs" />
252
- </>
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
+
253
662
  : null}
254
663
 
255
664
  </td>
@@ -347,6 +756,16 @@ RowTable.propTypes = {
347
756
  onClickActionEdit: PropTypes.func,
348
757
  onClickActionSendEmail: PropTypes.func,
349
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,
350
769
 
351
770
  isCheckedCheckbox: PropTypes.bool
352
771
  }
@@ -364,6 +783,17 @@ RowTable.defaultProps = {
364
783
  onClickActionEdit: () => { },
365
784
  onClickActionSendEmail: () => { },
366
785
  onClickActionDelete: () => { },
786
+ onClickActionLink: () => { },
787
+ txtTootipIconUserView: '',
788
+ txtTootipIconListInvoice: '',
789
+ txtTootipIconListListXLS: '',
790
+ txtTootipIconListListCSV: '',
791
+ txtTootipIconListListPDF: '',
792
+ txtTootipIconEdit: '',
793
+ txtTootipIconSendEmail: '',
794
+ txtTootipIconDelete: '',
795
+ txtTootipIconLink: '',
796
+
367
797
 
368
798
  isCheckedCheckbox: false
369
799
 
package/molecules/RowTable/RowTable.module.css CHANGED
@@ -34,4 +34,8 @@
34
34
  .tr-content:hover {
35
35
  background-color: #edf1fe;
36
36
  cursor: pointer;
37
+ }
38
+
39
+ .tdlabelAlt {
40
+ font-weight: bold;
37
41
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "imbric-theme",
3
- "version": "0.5.4",
3
+ "version": "0.5.6",
4
4
  "description": "Components library IMBRIC",
5
5
  "private": false,
6
6
  "main": "index.js",
package/public/static/images/link-square-svgrepo-com.svg ADDED
@@ -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>