imbric-theme 0.8.2 → 0.8.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.
Files changed (8) hide show
  1. package/atoms/Checkbox/Checkbox.js +8 -4
  2. package/atoms/Checkbox/Checkbox.module.css +11 -5
  3. package/atoms/Textarea/Textarea.module.css +1 -1
  4. package/molecules/FooterTable/FooterTable.js +45 -13
  5. package/molecules/FooterTable/FooterTable.module.css +16 -4
  6. package/molecules/RowTable/RowTable.js +375 -358
  7. package/molecules/RowTable/RowTable.module.css +4 -0
  8. package/package.json +1 -1
package/atoms/Checkbox/Checkbox.js CHANGED
@@ -14,13 +14,14 @@ export const Checkbox = ({
14
14
  linkCheck,
15
15
  nameLinkCheck,
16
16
  handleClick,
17
+ disabled,
17
18
  }) => {
18
19
  const [checked, setChecked] = useState(value)
19
20
 
20
21
  return (
21
22
  <div className={getStyles('checkbox')}>
22
23
  <input
23
- className={getStyles('checkbox-custom')}
24
+ className={getStyles('checkbox-custom', { 'is-disabled': disabled })}
24
25
  type="checkbox"
25
26
  id={id}
26
27
  name={name}
@@ -31,6 +32,7 @@ export const Checkbox = ({
31
32
  onChange(e)
32
33
  }}
33
34
  onClick={handleClick}
35
+ disabled={disabled}
34
36
  />
35
37
  <label htmlFor={name} className={getStyles('checkbox-custom-label')}>
36
38
  {label}
@@ -56,18 +58,20 @@ Checkbox.propTypes = {
56
58
  label: PropTypes.string,
57
59
  nameLinkCheck: PropTypes.string,
58
60
  linkCheck: PropTypes.string,
61
+ disabled: PropTypes.bool,
59
62
  }
60
63
 
61
64
  Checkbox.defaultProps = {
62
- getStyles: () => {},
63
- onChange: () => {},
65
+ getStyles: () => { },
66
+ onChange: () => { },
64
67
  id: 'checkbox',
65
68
  name: 'checkbox',
66
69
  value: true,
67
70
  label: 'Aceptas los terminos',
68
71
  nameLinkCheck: '',
69
72
  linkCheck: '',
70
- handleClick: () => {},
73
+ handleClick: () => { },
74
+ disabled: false,
71
75
  }
72
76
 
73
77
  export default withStyles(styles)(Checkbox)
package/atoms/Checkbox/Checkbox.module.css CHANGED
@@ -7,10 +7,11 @@
7
7
 
8
8
  .checkbox-custom {
9
9
  opacity: 0;
10
- position: absolute;
10
+ position: absolute;
11
11
  }
12
12
 
13
- .checkbox-custom, .checkbox-custom-label {
13
+ .checkbox-custom,
14
+ .checkbox-custom-label {
14
15
  display: inline-block;
15
16
  vertical-align: middle;
16
17
  margin: 5px;
@@ -19,7 +20,7 @@
19
20
  font-weight: var(--font-weight-light);
20
21
  }
21
22
 
22
- .checkbox-custom + .checkbox-custom-label:before {
23
+ .checkbox-custom+.checkbox-custom-label:before {
23
24
  content: '';
24
25
  background: #fff;
25
26
  border-radius: 5px;
@@ -33,7 +34,7 @@
33
34
  text-align: center;
34
35
  }
35
36
 
36
- .checkbox-custom:checked + .checkbox-custom-label:before {
37
+ .checkbox-custom:checked+.checkbox-custom-label:before {
37
38
  content: "";
38
39
  display: inline-block;
39
40
  width: 1px;
@@ -47,8 +48,13 @@
47
48
  margin: 0px 15px 5px 5px;
48
49
  }
49
50
 
50
- .checkbox-custom, .checkbox-custom-link {
51
+ .checkbox-custom,
52
+ .checkbox-custom-link {
51
53
  font-weight: var(--font-weight-normal);
52
54
  color: var(--color-primary);
53
55
  text-decoration: underline;
56
+ }
57
+
58
+ .is-disabled {
59
+ cursor: no-drop;
54
60
  }
package/atoms/Textarea/Textarea.module.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .textarea {
2
2
  display: flex;
3
3
  width: 100%;
4
- min-height: 100px;
4
+ /* min-height: 100px; */
5
5
  padding: 20px;
6
6
  border: var(--border-width-thin) solid var(--color-cool-gray-200);
7
7
  background: var(--input-background);
package/molecules/FooterTable/FooterTable.js CHANGED
@@ -1,43 +1,73 @@
1
- import React, { useEffect } from "react";
1
+ import React, { useEffect, useState } from "react";
2
2
  import PropTypes from 'prop-types'
3
3
 
4
4
  import styles from './FooterTable.module.css'
5
5
  import { options } from './constants'
6
6
  import withStyles from '../../hocs/withStyles'
7
7
  import DynamicSelect from '../../molecules/DynamicSelect'
8
+ import Icon from "../../atoms/Icon/Icon";
8
9
 
9
10
 
10
- export const FooterTable = ({ getStyles, range, setPage, setDataPage, page, slice, placeholderDinamicSelect, handleResultsForPage, defaultValueSelect }) => {
11
+ export const FooterTable = ({ getStyles, range, setPage, setDataPage, setScrollPage, page, slice, placeholderDinamicSelect, handleResultsForPage, defaultValueSelect, positionPag }) => {
12
+
13
+
14
+ // const [positionPag, setPositionPag] = useState(0)
15
+
11
16
  useEffect(() => {
12
17
  if (slice.length < 1 && page !== 1) {
13
18
  setPage(page - 1);
14
19
  }
15
20
  }, [slice, page, setPage]);
16
21
 
22
+ // const nextPagScroll = (page) => {
23
+
24
+ // console.log(page)
25
+ // if (page >= 4) {
26
+ // setPositionPag('-40')
27
+ // console.log(positionPag)
28
+ // const elem = document.getElementById('table-pag-scroll');
29
+ // elem.style.marginLeft = '-40px';
30
+ // console.log(elem)
31
+ // }
32
+ // }
33
+
17
34
 
18
35
  return (
19
36
  <div className={getStyles('footer-table')}>
20
37
 
21
38
  <div className={styles.tableFooter}>
22
- {range.map((el, index) => (
23
39
 
24
40
 
25
- <button
26
- key={'footer' + index}
27
- className={`${styles.button} ${page === el ? styles.activeButton : styles.inactiveButton
28
- }`}
29
- onClick={() => { setPage(el); setDataPage(el) }}
41
+ <Icon
42
+ name="angleLeft"
43
+ onClick={() => { setScrollPage('angleLeft') }}
44
+ />
30
45
 
31
- onChange={item => { handleSelectRange(item); onChangeRange(item); }}
46
+ <div className={getStyles('footer-table-pag-box')}>
47
+ <div id="table-pag-scroll" className={getStyles('footer-table-pag')} style={{ marginLeft: positionPag + 'px' }}>
48
+ {range.map((el, index) => (
32
49
 
33
- >
34
- {el}
35
- </button>
50
+ <button
51
+ key={'footer' + index}
52
+ className={`${styles.button} ${page === el ? styles.activeButton : styles.inactiveButton
53
+ }`}
54
+ onClick={() => { setPage(el); setDataPage(el) }}
55
+ onChange={item => { handleSelectRange(item); onChangeRange(item); }}
56
+ >
57
+ {el}
58
+ </button>
36
59
 
60
+ ))}
61
+ </div>
62
+ </div>
37
63
 
64
+ <Icon
65
+ name="angleRight"
66
+ onClick={() => { setScrollPage('angleRight') }}
67
+ // onChange={item => { handleSelectRange(item); onChangeRange(item); }}
68
+ />
38
69
 
39
70
 
40
- ))}
41
71
  </div>
42
72
 
43
73
  <DynamicSelect
@@ -61,6 +91,7 @@ FooterTable.propTypes = {
61
91
  // children: PropTypes.node.isRequired,
62
92
  getStyles: PropTypes.func.isRequired,
63
93
  setDataPage: PropTypes.func,
94
+ setScrollPage: PropTypes.func,
64
95
  placeholderDinamicSelect: PropTypes.string,
65
96
  handleResultsForPage: PropTypes.func,
66
97
  defaultValueSelect: PropTypes.any
@@ -70,6 +101,7 @@ FooterTable.propTypes = {
70
101
  FooterTable.defaultProps = {
71
102
  getStyles: () => { },
72
103
  setDataPage: () => { },
104
+ setScrollPage: () => { },
73
105
  handleResultsForPage: () => { },
74
106
  placeholderDinamicSelect: 'resultados por pagina',
75
107
  defaultValueSelect: { value: 10, label: '10' }
package/molecules/FooterTable/FooterTable.module.css CHANGED
@@ -7,7 +7,6 @@
7
7
  .tableFooter {
8
8
  /* background-color: #f1f1f1; */
9
9
  padding: 4px 0px;
10
- width: 400px;
11
10
  font-weight: 500;
12
11
  text-align: left;
13
12
  font-size: 16px;
@@ -17,24 +16,37 @@
17
16
  display: flex;
18
17
  align-items: center;
19
18
  justify-content: flex-start;
20
- overflow-x: auto;
21
19
  }
22
20
 
23
21
  .button {
24
22
  border: none;
25
- padding: 6px 12px;
23
+ padding: 6px 0px;
26
24
  border-radius: 10px;
27
25
  cursor: pointer;
28
26
  margin-right: 4px;
29
27
  margin-left: 4px;
28
+ min-width: 30px;
29
+ max-width: 30px;
30
30
  }
31
31
 
32
32
  .activeButton {
33
33
  color: white;
34
- background: #00A3FF;
34
+ background: rgb(73, 125, 189, .4);
35
35
  }
36
36
 
37
37
  .inactiveButton {
38
38
  color: #2c3e50;
39
39
  background: #f9f9f9;
40
40
  }
41
+
42
+ .footer-table-pag-box {
43
+ display: flex;
44
+ overflow-x: clip;
45
+ width: 100%;
46
+ max-width: 190px;
47
+ }
48
+
49
+ .footer-table-pag {
50
+ display: flex;
51
+ width: 100%;
52
+ }
package/molecules/RowTable/RowTable.js CHANGED
@@ -111,7 +111,8 @@ export const RowTable = ({
111
111
  itemTd.activeView ?
112
112
  (
113
113
 
114
- itemTd.isCheckbox
114
+
115
+ itemTd.isBoolean
115
116
 
116
117
  ?
117
118
  !loading ? (
@@ -119,15 +120,7 @@ export const RowTable = ({
119
120
  className={getStyles('td', 'tdacction')}
120
121
  key={[itemTd.accessor] + (indexTd + index)}
121
122
  >
122
-
123
- {/* <Check id={item[itemTd.accessor]} isChecked={item.isSelected} /> */}
124
-
125
- <Toggle
126
- id={'idToggle' + item.id}
127
- checked={item.isSelected}
128
- label=""
129
- onChangeCheckbox={(e) => { handleClickCheckbox(e, item) }}
130
- />
123
+ {String(item[itemTd.accessor])}
131
124
 
132
125
  </td>
133
126
  )
@@ -135,98 +128,92 @@ export const RowTable = ({
135
128
  :
136
129
 
137
130
 
138
- itemTd.isArrayObject
131
+ itemTd.isCheckbox
139
132
 
140
133
  ?
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
+ />
141
148
 
142
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
149
+ </td>
150
+ )
151
+ : null
152
+ :
143
153
 
144
- {console.log('TD: ' + [itemTd.accessor] + (indexTd + index))}
145
154
 
146
- {item[itemTd.accessor].map((itemTdObj, indexAcc, array) => (
155
+ itemTd.isArrayObject
147
156
 
148
- <>
157
+ ?
149
158
 
150
- <span className={getStyles('tdlabelAlt')} key={itemTdObj.id + 'label' + (indexAcc + index)}>
151
- {console.log('A: ' + itemTdObj.id + 'label' + (indexAcc + index))}
159
+ <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
152
160
 
153
- {itemTdObj[itemTd.subAccessorAlt]}
161
+ {console.log('TD: ' + [itemTd.accessor] + (indexTd + index))}
154
162
 
155
- {array.length - 1 !== indexAcc ?
156
- <span>, </span> : null}
157
- :&nbsp;
158
- </span>
163
+ {item[itemTd.accessor].map((itemTdObj, indexAcc, array) => (
159
164
 
160
- <span key={itemTdObj.id + 'Tdlabel' + (indexAcc + index)}>
165
+ <>
161
166
 
162
- {console.log('B: ' + itemTdObj.id + 'Tdlabel' + (indexAcc + index))}
167
+ <span className={getStyles('tdlabelAlt')} key={itemTdObj.id + 'label' + (indexAcc + index)}>
168
+ {console.log('A: ' + itemTdObj.id + 'label' + (indexAcc + index))}
163
169
 
164
- {itemTdObj[itemTd.subAccessor]}
170
+ {itemTdObj[itemTd.subAccessorAlt]}
165
171
 
166
- {array.length - 1 !== indexAcc ?
167
- <span>, </span> : null}
172
+ {array.length - 1 !== indexAcc ?
173
+ <span>, </span> : null}
174
+ :&nbsp;
175
+ </span>
168
176
 
169
- </span>
177
+ <span key={itemTdObj.id + 'Tdlabel' + (indexAcc + index)}>
170
178
 
171
- </>
179
+ {console.log('B: ' + itemTdObj.id + 'Tdlabel' + (indexAcc + index))}
172
180
 
173
- ))}
181
+ {itemTdObj[itemTd.subAccessor]}
174
182
 
175
- </td>
183
+ {array.length - 1 !== indexAcc ?
184
+ <span>, </span> : null}
176
185
 
177
- :
186
+ </span>
178
187
 
188
+ </>
179
189
 
180
- itemTd.isPicture
190
+ ))}
181
191
 
182
- ?
183
- <td className={getStyles('td', 'tdacction')} key={[itemTd.accessor] + (indexTd + index)}>
184
- <Picture
185
- src={item[itemTd.accessor]}
186
- width={50}
187
- />
188
192
  </td>
189
- :
190
-
191
- itemTd.subAccessor === 'action'
192
193
 
193
- ?
194
+ :
194
195
 
195
- <td className={getStyles('td', 'tdacctionIcons')} key={[itemTd.accessor] + (indexTd + index)}>
196
196
 
197
- {itemTd.viewUserView ?
197
+ itemTd.isPicture
198
198
 
199
- item.viewUserView === undefined ?
199
+ ?
200
+ <td className={getStyles('td', 'tdacction')} key={[itemTd.accessor] + (indexTd + index)}>
201
+ <Picture
202
+ src={item[itemTd.accessor]}
203
+ width={50}
204
+ />
205
+ </td>
206
+ :
200
207
 
201
- <>
202
- <span
203
- data-tip
204
- data-for='userView'
205
- onMouseEnter={handleMouseEnter}
206
- onMouseLeave={handleMouseLeave}
207
- >
208
- <>
209
- <Icon
210
- id="userView"
211
- background="base"
212
- name="userView"
213
- onClick={(e) => { onClickActionUserView(e, item) }}
214
- />
215
- <Horizontal size="xs" />
216
- </>
208
+ itemTd.subAccessor === 'action'
217
209
 
218
- </span>
210
+ ?
219
211
 
220
- {isToolTipMounted ? (
221
- <ReactTooltip id='userView' type='error'>
222
- <span>{txtTootipIconUserView}</span>
223
- </ReactTooltip>
224
- ) : null}
225
- </>
212
+ <td className={getStyles('td', 'tdacctionIcons')} key={[itemTd.accessor] + (indexTd + index)}>
226
213
 
227
- :
214
+ {itemTd.viewUserView ?
228
215
 
229
- item.viewUserView ?
216
+ item.viewUserView === undefined ?
230
217
 
231
218
  <>
232
219
  <span
@@ -254,45 +241,45 @@ export const RowTable = ({
254
241
  ) : null}
255
242
  </>
256
243
 
257
- : null
258
-
259
- : null}
260
-
261
-
262
- {itemTd.viewListInvoice ?
263
-
244
+ :
264
245
 
265
- item.viewListInvoice === undefined ?
246
+ item.viewUserView ?
266
247
 
267
- <>
268
- <span
269
- data-tip
270
- data-for='listInvoice'
271
- onMouseEnter={handleMouseEnter}
272
- onMouseLeave={handleMouseLeave}
273
- >
274
248
  <>
275
- <Icon
276
- id={"listInvoice" + (indexTd + index)}
277
- background="base"
278
- name="listInvoice"
279
- onClick={(e) => { onClickActionListInvoice(e, item) }}
280
- />
281
- <Horizontal size="xs" />
249
+ <span
250
+ data-tip
251
+ data-for='userView'
252
+ onMouseEnter={handleMouseEnter}
253
+ onMouseLeave={handleMouseLeave}
254
+ >
255
+ <>
256
+ <Icon
257
+ id="userView"
258
+ background="base"
259
+ name="userView"
260
+ onClick={(e) => { onClickActionUserView(e, item) }}
261
+ />
262
+ <Horizontal size="xs" />
263
+ </>
264
+
265
+ </span>
266
+
267
+ {isToolTipMounted ? (
268
+ <ReactTooltip id='userView' type='error'>
269
+ <span>{txtTootipIconUserView}</span>
270
+ </ReactTooltip>
271
+ ) : null}
282
272
  </>
283
273
 
284
- </span>
274
+ : null
285
275
 
286
- {isToolTipMounted ? (
287
- <ReactTooltip id='listInvoice' type='error' place='left'>
288
- <span>{txtTootipIconListInvoice}</span>
289
- </ReactTooltip>
290
- ) : null}
291
- </>
276
+ : null}
277
+
278
+
279
+ {itemTd.viewListInvoice ?
292
280
 
293
- :
294
281
 
295
- item.viewListInvoice ?
282
+ item.viewListInvoice === undefined ?
296
283
 
297
284
  <>
298
285
  <span
@@ -314,122 +301,121 @@ export const RowTable = ({
314
301
  </span>
315
302
 
316
303
  {isToolTipMounted ? (
317
- <ReactTooltip id='listInvoice' type='error'>
304
+ <ReactTooltip id='listInvoice' type='error' place='left'>
318
305
  <span>{txtTootipIconListInvoice}</span>
319
306
  </ReactTooltip>
320
307
  ) : null}
321
308
  </>
322
309
 
323
- : null
324
-
325
- : null}
326
-
327
- {itemTd.viewListXLS && item.fileType === 'xls' ?
310
+ :
328
311
 
329
- <>
330
- <span
331
- data-tip
332
- data-for='listXLS'
333
- onMouseEnter={handleMouseEnter}
334
- onMouseLeave={handleMouseLeave}
335
- >
336
- <>
337
- <Icon
338
- id={"listXLS" + (indexTd + index)}
339
- background="base"
340
- name="listXLS"
341
- onClick={(e) => { onClickActionListXLS(e, item) }}
342
- />
343
- <Horizontal size="xs" />
344
- </>
312
+ item.viewListInvoice ?
345
313
 
346
- </span>
314
+ <>
315
+ <span
316
+ data-tip
317
+ data-for='listInvoice'
318
+ onMouseEnter={handleMouseEnter}
319
+ onMouseLeave={handleMouseLeave}
320
+ >
321
+ <>
322
+ <Icon
323
+ id={"listInvoice" + (indexTd + index)}
324
+ background="base"
325
+ name="listInvoice"
326
+ onClick={(e) => { onClickActionListInvoice(e, item) }}
327
+ />
328
+ <Horizontal size="xs" />
329
+ </>
330
+
331
+ </span>
332
+
333
+ {isToolTipMounted ? (
334
+ <ReactTooltip id='listInvoice' type='error'>
335
+ <span>{txtTootipIconListInvoice}</span>
336
+ </ReactTooltip>
337
+ ) : null}
338
+ </>
347
339
 
348
- {isToolTipMounted ? (
349
- <ReactTooltip id='listXLS' type='error'>
350
- <span>{txtTootipIconListListXLS}</span>
351
- </ReactTooltip>
352
- ) : null}
353
- </>
340
+ : null
354
341
 
355
- : null}
342
+ : null}
356
343
 
357
- {itemTd.viewListCSV && item.fileType === 'xml' ?
344
+ {itemTd.viewListXLS && item.fileType === 'xls' ?
358
345
 
359
- <>
360
- <span
361
- data-tip
362
- data-for='listCSV'
363
- onMouseEnter={handleMouseEnter}
364
- onMouseLeave={handleMouseLeave}
365
- >
366
- <>
367
- <Icon
368
- id={"listCSV" + (indexTd + index)}
369
- background="base"
370
- name="listCSV"
371
- onClick={(e) => { onClickActionListCSV(e, item) }}
372
- />
373
- <Horizontal size="xs" />
374
- </>
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
+ </>
375
362
 
376
- </span>
363
+ </span>
377
364
 
378
- {isToolTipMounted ? (
379
- <ReactTooltip id='listCSV' type='error'>
380
- <span>{txtTootipIconListListCSV}</span>
381
- </ReactTooltip>
382
- ) : null}
383
- </>
365
+ {isToolTipMounted ? (
366
+ <ReactTooltip id='listXLS' type='error'>
367
+ <span>{txtTootipIconListListXLS}</span>
368
+ </ReactTooltip>
369
+ ) : null}
370
+ </>
384
371
 
385
- : null}
372
+ : null}
386
373
 
387
- {itemTd.viewListPDF && item.fileType === 'pdf' ?
374
+ {itemTd.viewListCSV && item.fileType === 'xml' ?
388
375
 
389
- <>
390
- <span
391
- data-tip
392
- data-for='listPDF'
393
- onMouseEnter={handleMouseEnter}
394
- onMouseLeave={handleMouseLeave}
395
- >
396
- <>
397
- <Icon
398
- id={"listPDF" + (indexTd + index)}
399
- background="base"
400
- name="listPDF"
401
- onClick={(e) => { onClickActionListPDF(e, item) }}
402
- />
403
- <Horizontal size="xs" />
404
- </>
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
+ </>
405
392
 
406
- </span>
393
+ </span>
407
394
 
408
- {isToolTipMounted ? (
409
- <ReactTooltip id='listPDF' type='error'>
410
- <span>{txtTootipIconListListPDF}</span>
411
- </ReactTooltip>
412
- ) : null}
413
- </>
395
+ {isToolTipMounted ? (
396
+ <ReactTooltip id='listCSV' type='error'>
397
+ <span>{txtTootipIconListListCSV}</span>
398
+ </ReactTooltip>
399
+ ) : null}
400
+ </>
414
401
 
415
- : null}
402
+ : null}
416
403
 
417
- {itemTd.viewEdit ?
404
+ {itemTd.viewListPDF && item.fileType === 'pdf' ?
418
405
 
419
- item.viewEdit === undefined ?
420
406
  <>
421
407
  <span
422
408
  data-tip
423
- data-for='edit'
409
+ data-for='listPDF'
424
410
  onMouseEnter={handleMouseEnter}
425
411
  onMouseLeave={handleMouseLeave}
426
412
  >
427
413
  <>
428
414
  <Icon
429
- id={"edit" + (indexTd + index)}
415
+ id={"listPDF" + (indexTd + index)}
430
416
  background="base"
431
- name="edit"
432
- onClick={(e) => { onClickActionEdit(e, item) }}
417
+ name="listPDF"
418
+ onClick={(e) => { onClickActionListPDF(e, item) }}
433
419
  />
434
420
  <Horizontal size="xs" />
435
421
  </>
@@ -437,15 +423,17 @@ export const RowTable = ({
437
423
  </span>
438
424
 
439
425
  {isToolTipMounted ? (
440
- <ReactTooltip id='edit' type='error'>
441
- <span>{txtTootipIconEdit}</span>
426
+ <ReactTooltip id='listPDF' type='error'>
427
+ <span>{txtTootipIconListListPDF}</span>
442
428
  </ReactTooltip>
443
429
  ) : null}
444
430
  </>
445
- :
446
431
 
447
- item.viewEdit ?
432
+ : null}
433
+
434
+ {itemTd.viewEdit ?
448
435
 
436
+ item.viewEdit === undefined ?
449
437
  <>
450
438
  <span
451
439
  data-tip
@@ -471,43 +459,43 @@ export const RowTable = ({
471
459
  </ReactTooltip>
472
460
  ) : null}
473
461
  </>
462
+ :
474
463
 
475
- : null
476
-
477
- : null}
478
-
479
- {itemTd.viewEmailSend ?
480
-
481
- item.viewEmailSend === undefined ?
464
+ item.viewEdit ?
482
465
 
483
- <>
484
- <span
485
- data-tip
486
- data-for='sendEmail'
487
- onMouseEnter={handleMouseEnter}
488
- onMouseLeave={handleMouseLeave}
489
- >
490
466
  <>
491
- <Icon
492
- background="base"
493
- name="sendEmail"
494
- onClick={e => { onClickActionSendEmail(e, item) }}
495
- />
496
- <Horizontal size="xs" />
467
+ <span
468
+ data-tip
469
+ data-for='edit'
470
+ onMouseEnter={handleMouseEnter}
471
+ onMouseLeave={handleMouseLeave}
472
+ >
473
+ <>
474
+ <Icon
475
+ id={"edit" + (indexTd + index)}
476
+ background="base"
477
+ name="edit"
478
+ onClick={(e) => { onClickActionEdit(e, item) }}
479
+ />
480
+ <Horizontal size="xs" />
481
+ </>
482
+
483
+ </span>
484
+
485
+ {isToolTipMounted ? (
486
+ <ReactTooltip id='edit' type='error'>
487
+ <span>{txtTootipIconEdit}</span>
488
+ </ReactTooltip>
489
+ ) : null}
497
490
  </>
498
491
 
499
- </span>
492
+ : null
500
493
 
501
- {isToolTipMounted ? (
502
- <ReactTooltip id='sendEmail' type='error'>
503
- <span>{txtTootipIconSendEmail}</span>
504
- </ReactTooltip>
505
- ) : null}
506
- </>
494
+ : null}
507
495
 
508
- :
496
+ {itemTd.viewEmailSend ?
509
497
 
510
- item.viewEmailSend ?
498
+ item.viewEmailSend === undefined ?
511
499
 
512
500
  <>
513
501
  <span
@@ -534,42 +522,42 @@ export const RowTable = ({
534
522
  ) : null}
535
523
  </>
536
524
 
537
- : null
538
-
539
- : null}
540
-
541
- {itemTd.viewTrash ?
525
+ :
542
526
 
543
- item.viewTrash === undefined ?
527
+ item.viewEmailSend ?
544
528
 
545
- <>
546
- <span
547
- data-tip
548
- data-for='trash'
549
- onMouseEnter={handleMouseEnter}
550
- onMouseLeave={handleMouseLeave}
551
- >
552
529
  <>
553
- <Icon
554
- background="base"
555
- name="trash"
556
- onClick={e => { onClickActionDelete(e, item) }}
557
- />
558
- <Horizontal size="xs" />
530
+ <span
531
+ data-tip
532
+ data-for='sendEmail'
533
+ onMouseEnter={handleMouseEnter}
534
+ onMouseLeave={handleMouseLeave}
535
+ >
536
+ <>
537
+ <Icon
538
+ background="base"
539
+ name="sendEmail"
540
+ onClick={e => { onClickActionSendEmail(e, item) }}
541
+ />
542
+ <Horizontal size="xs" />
543
+ </>
544
+
545
+ </span>
546
+
547
+ {isToolTipMounted ? (
548
+ <ReactTooltip id='sendEmail' type='error'>
549
+ <span>{txtTootipIconSendEmail}</span>
550
+ </ReactTooltip>
551
+ ) : null}
559
552
  </>
560
553
 
561
- </span>
554
+ : null
562
555
 
563
- {isToolTipMounted ? (
564
- <ReactTooltip id='trash' type='error'>
565
- <span>{txtTootipIconDelete}</span>
566
- </ReactTooltip>
567
- ) : null}
568
- </>
556
+ : null}
569
557
 
570
- :
558
+ {itemTd.viewTrash ?
571
559
 
572
- item.viewTrash ?
560
+ item.viewTrash === undefined ?
573
561
 
574
562
  <>
575
563
  <span
@@ -596,44 +584,43 @@ export const RowTable = ({
596
584
  ) : null}
597
585
  </>
598
586
 
599
- : null
600
-
601
- : null}
602
-
603
-
604
- {itemTd.viewLink ?
587
+ :
605
588
 
606
- item.viewLink === undefined ?
589
+ item.viewTrash ?
607
590
 
608
- <>
609
- <span
610
- data-tip
611
- data-for='linkUser'
612
- onMouseEnter={handleMouseEnter}
613
- onMouseLeave={handleMouseLeave}
614
- >
615
591
  <>
616
- <Icon
617
- background="base"
618
- name="linkUser"
619
- // onClick={(e) => onClickEdit(e, item)}
620
- onClick={e => { onClickActionLink(e, item) }}
621
- />
622
- <Horizontal size="xs" />
592
+ <span
593
+ data-tip
594
+ data-for='trash'
595
+ onMouseEnter={handleMouseEnter}
596
+ onMouseLeave={handleMouseLeave}
597
+ >
598
+ <>
599
+ <Icon
600
+ background="base"
601
+ name="trash"
602
+ onClick={e => { onClickActionDelete(e, item) }}
603
+ />
604
+ <Horizontal size="xs" />
605
+ </>
606
+
607
+ </span>
608
+
609
+ {isToolTipMounted ? (
610
+ <ReactTooltip id='trash' type='error'>
611
+ <span>{txtTootipIconDelete}</span>
612
+ </ReactTooltip>
613
+ ) : null}
623
614
  </>
624
615
 
625
- </span>
616
+ : null
626
617
 
627
- {isToolTipMounted ? (
628
- <ReactTooltip id='linkUser' type='error'>
629
- <span>{txtTootipIconLink}</span>
630
- </ReactTooltip>
631
- ) : null}
632
- </>
618
+ : null}
633
619
 
634
- :
635
620
 
636
- item.viewLink ?
621
+ {itemTd.viewLink ?
622
+
623
+ item.viewLink === undefined ?
637
624
 
638
625
  <>
639
626
  <span
@@ -661,44 +648,45 @@ export const RowTable = ({
661
648
  ) : null}
662
649
  </>
663
650
 
664
- : null
665
-
666
- : null}
667
-
668
-
669
-
670
- {itemTd.viewClone ?
651
+ :
671
652
 
672
- item.viewClone === undefined ?
653
+ item.viewLink ?
673
654
 
674
- <>
675
- <span
676
- data-tip
677
- data-for='clone'
678
- onMouseEnter={handleMouseEnter}
679
- onMouseLeave={handleMouseLeave}
680
- >
681
655
  <>
682
- <Icon
683
- background="base"
684
- name="cloneDefault"
685
- onClick={e => { onClickActionClone(e, item) }}
686
- />
687
- <Horizontal size="xs" />
656
+ <span
657
+ data-tip
658
+ data-for='linkUser'
659
+ onMouseEnter={handleMouseEnter}
660
+ onMouseLeave={handleMouseLeave}
661
+ >
662
+ <>
663
+ <Icon
664
+ background="base"
665
+ name="linkUser"
666
+ // onClick={(e) => onClickEdit(e, item)}
667
+ onClick={e => { onClickActionLink(e, item) }}
668
+ />
669
+ <Horizontal size="xs" />
670
+ </>
671
+
672
+ </span>
673
+
674
+ {isToolTipMounted ? (
675
+ <ReactTooltip id='linkUser' type='error'>
676
+ <span>{txtTootipIconLink}</span>
677
+ </ReactTooltip>
678
+ ) : null}
688
679
  </>
689
680
 
690
- </span>
681
+ : null
682
+
683
+ : null}
691
684
 
692
- {isToolTipMounted ? (
693
- <ReactTooltip id='clone' type='error'>
694
- <span>{txtTootipIconClone}</span>
695
- </ReactTooltip>
696
- ) : null}
697
- </>
698
685
 
699
- :
700
686
 
701
- item.viewClone ?
687
+ {itemTd.viewClone ?
688
+
689
+ item.viewClone === undefined ?
702
690
 
703
691
  <>
704
692
  <span
@@ -710,7 +698,7 @@ export const RowTable = ({
710
698
  <>
711
699
  <Icon
712
700
  background="base"
713
- name="clone"
701
+ name="cloneDefault"
714
702
  onClick={e => { onClickActionClone(e, item) }}
715
703
  />
716
704
  <Horizontal size="xs" />
@@ -725,90 +713,119 @@ export const RowTable = ({
725
713
  ) : null}
726
714
  </>
727
715
 
728
- : null
716
+ :
729
717
 
730
- : null}
718
+ item.viewClone ?
731
719
 
720
+ <>
721
+ <span
722
+ data-tip
723
+ data-for='clone'
724
+ onMouseEnter={handleMouseEnter}
725
+ onMouseLeave={handleMouseLeave}
726
+ >
727
+ <>
728
+ <Icon
729
+ background="base"
730
+ name="clone"
731
+ onClick={e => { onClickActionClone(e, item) }}
732
+ />
733
+ <Horizontal size="xs" />
734
+ </>
735
+
736
+ </span>
737
+
738
+ {isToolTipMounted ? (
739
+ <ReactTooltip id='clone' type='error'>
740
+ <span>{txtTootipIconClone}</span>
741
+ </ReactTooltip>
742
+ ) : null}
743
+ </>
732
744
 
745
+ : null
733
746
 
734
- </td>
747
+ : null}
735
748
 
736
- :
737
-
738
- itemTd.subAccessor !== ''
739
749
 
740
- ?
741
750
 
742
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor][itemTd.subAccessor]}</td>
751
+ </td>
743
752
 
744
753
  :
745
754
 
746
- itemTd.typeFilter === 'date'
755
+ itemTd.subAccessor !== ''
747
756
 
748
757
  ?
749
758
 
750
- itemTd.typeFilterSub === 'date_only' ?
751
-
752
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
753
- <Moment format="DD/MM/YYYY">
754
- {item[itemTd.accessor]}
755
- </Moment>
756
- </td>
759
+ <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor][itemTd.subAccessor]}</td>
757
760
 
758
- :
759
-
760
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
761
- {/* <Moment format="DD/MM/YYYY hh:mm:ss"> */}
762
- <Moment format="DD/MM/YYYY HH:mm">
763
- {item[itemTd.accessor]}
764
- </Moment>
765
- </td>
766
761
  :
767
762
 
768
- itemTd.typeFilter === 'select'
763
+ itemTd.typeFilter === 'date'
769
764
 
770
765
  ?
771
766
 
772
- itemTd.optionsSelect.map((itemSelect, indexSelect) => (
773
-
767
+ itemTd.typeFilterSub === 'date_only' ?
774
768
 
775
- item[itemTd.accessor] === itemSelect.value ?
769
+ <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
770
+ <Moment format="DD/MM/YYYY">
771
+ {item[itemTd.accessor]}
772
+ </Moment>
773
+ </td>
776
774
 
777
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index) + indexSelect}>
778
- {itemSelect.label}
779
- </td>
780
-
781
- :
782
-
783
- null
784
- ))
775
+ :
785
776
 
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>
786
783
  :
787
784
 
788
- itemTd.typeFilter === 'number'
785
+ itemTd.typeFilter === 'select'
789
786
 
790
787
  ?
791
788
 
792
- itemTd.subTypeFilter
789
+ itemTd.optionsSelect.map((itemSelect, indexSelect) => (
793
790
 
794
- ?
795
791
 
796
- itemTd.characterExtra === 'km'
797
- ?
798
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{(item[itemTd.accessor] / 1000).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
792
+ item[itemTd.accessor] === itemSelect.value ?
793
+
794
+ <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index) + indexSelect}>
795
+ {itemSelect.label}
796
+ </td>
797
+
799
798
  :
800
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor].toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
801
- :
802
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor]}</td>
799
+
800
+ null
801
+ ))
803
802
 
804
803
  :
805
804
 
806
- itemTd.subTypeFilter
805
+ itemTd.typeFilter === 'number'
807
806
 
808
807
  ?
809
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{Number(item[itemTd.accessor]).toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
808
+
809
+ itemTd.subTypeFilter
810
+
811
+ ?
812
+
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>
816
+ :
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>
820
+
810
821
  :
811
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor]}</td>
822
+
823
+ itemTd.subTypeFilter
824
+
825
+ ?
826
+ <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{Number(item[itemTd.accessor]).toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
827
+ :
828
+ <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor]}</td>
812
829
 
813
830
  // <>
814
831
 
package/molecules/RowTable/RowTable.module.css CHANGED
@@ -29,6 +29,10 @@
29
29
  /* white-space: nowrap; */
30
30
  }
31
31
 
32
+ .td:last-child {
33
+ padding-right: 15px;
34
+ }
35
+
32
36
  .tdacction {
33
37
  max-width: 80px;
34
38
  min-width: 80px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "imbric-theme",
3
- "version": "0.8.2",
3
+ "version": "0.8.4",
4
4
  "description": "Components library IMBRIC",
5
5
  "private": false,
6
6
  "main": "index.js",