imbric-theme 0.5.4 → 0.5.6

Sign up to get free protection for your applications and to get access to all the features.
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>