imbric-theme 0.8.2 → 0.8.4

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