imbric-theme 0.1.3 → 0.1.5

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 (6) hide show
  1. package/atoms/Checkbox/Checkbox.js +7 -1
  2. package/atoms/Input/Input.js +6 -0
  3. package/atoms/Picture/Picture.js +10 -4
  4. package/molecules/ColumnTable/ColumnTable.module.css +1 -0
  5. package/molecules/RowTable/RowTable.js +522 -395
  6. package/package.json +1 -1
package/atoms/Checkbox/Checkbox.js CHANGED
@@ -1,4 +1,4 @@
1
- import { useState } from 'react'
1
+ import { useState, useEffect } from 'react'
2
2
  import PropTypes from 'prop-types'
3
3
 
4
4
  import styles from './Checkbox.module.css'
@@ -18,6 +18,12 @@ export const Checkbox = ({
18
18
  }) => {
19
19
  const [checked, setChecked] = useState(value)
20
20
 
21
+ useEffect(() => {
22
+ setChecked(value)
23
+ // eslint-disable-next-line react-hooks/exhaustive-deps
24
+ }, [value])
25
+
26
+
21
27
  return (
22
28
  <div className={getStyles('checkbox')}>
23
29
  <input
package/atoms/Input/Input.js CHANGED
@@ -44,6 +44,7 @@ export const Input = ({
44
44
  min,
45
45
  autoFocus,
46
46
  readonly,
47
+ accept,
47
48
  }) => (
48
49
 
49
50
  <>
@@ -84,6 +85,7 @@ export const Input = ({
84
85
  autoComplete={autoComplete}
85
86
  disabled={disabled}
86
87
  min={min}
88
+ accept={accept}
87
89
  ></input>
88
90
 
89
91
  </div> :
@@ -115,6 +117,7 @@ export const Input = ({
115
117
  disabled={disabled}
116
118
  min={min}
117
119
  onInput={onInput}
120
+ accept={accept}
118
121
  ></input>
119
122
 
120
123
  <Horizontal size="xs" />
@@ -156,6 +159,7 @@ export const Input = ({
156
159
  min={min}
157
160
  autoFocus={autoFocus}
158
161
  onInput={onInput}
162
+ accept={accept}
159
163
  ></input>
160
164
 
161
165
  }
@@ -194,6 +198,7 @@ Input.propTypes = {
194
198
  autoFocus: PropTypes.any,
195
199
  onClickViewPass: PropTypes.func,
196
200
  viewPass: PropTypes.bool,
201
+ accept: PropTypes.string,
197
202
  }
198
203
 
199
204
  Input.defaultProps = {
@@ -224,6 +229,7 @@ Input.defaultProps = {
224
229
  readonly: false,
225
230
  onClickViewPass: () => { },
226
231
  viewPass: false,
232
+ accept: '',
227
233
  }
228
234
 
229
235
  export default withStyles(styles)(Input)
package/atoms/Picture/Picture.js CHANGED
@@ -13,6 +13,7 @@ export const Picture = ({
13
13
  isRounded,
14
14
  withBorder,
15
15
  isHref,
16
+ targetLink,
16
17
  }) => (
17
18
  <picture
18
19
  className={getStyles('picture', {
@@ -20,8 +21,11 @@ export const Picture = ({
20
21
  'with-border': withBorder,
21
22
  })}
22
23
  >
23
- <Link href={isHref} passHref>
24
- <img src={src} style={{ height, maxWidth: width }} />
24
+ <Link href={isHref} passHref >
25
+ <a target={targetLink}>
26
+ <img src={src} style={{ height, maxWidth: width }} />
27
+ </a>
28
+
25
29
  </Link>
26
30
 
27
31
  </picture>
@@ -34,14 +38,16 @@ Picture.propTypes = {
34
38
  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
35
39
  isRounded: PropTypes.bool,
36
40
  withBorder: PropTypes.bool,
37
- isHref: PropTypes.any
41
+ isHref: PropTypes.any,
42
+ targetLink: PropTypes.string
38
43
  }
39
44
 
40
45
  Picture.defaultProps = {
41
46
  height: 'auto',
42
47
  withBorder: false,
43
48
  getStyles: () => { },
44
- isHref: ''
49
+ isHref: '',
50
+ targetLink: ''
45
51
  }
46
52
 
47
53
  export default withStyles(styles)(Picture)
package/molecules/ColumnTable/ColumnTable.module.css CHANGED
@@ -48,4 +48,5 @@
48
48
  max-width: 80px;
49
49
  min-width: 80px;
50
50
  width: 80px;
51
+ display: inline-table;
51
52
  }
package/molecules/RowTable/RowTable.js CHANGED
@@ -30,6 +30,7 @@ export const RowTable = ({
30
30
  onClickActionDelete,
31
31
  onClickActionLink,
32
32
  onClickActionClone,
33
+ onClickActionCheckbox,
33
34
  txtTootipIconUserView,
34
35
  txtTootipIconListInvoice,
35
36
  txtTootipIconListListXLS,
@@ -40,6 +41,7 @@ export const RowTable = ({
40
41
  txtTootipIconDelete,
41
42
  txtTootipIconLink,
42
43
  txtTootipIconClone,
44
+ txtTootipIconCheckbox,
43
45
  colorRow,
44
46
  }) => {
45
47
 
@@ -112,152 +114,171 @@ export const RowTable = ({
112
114
  (
113
115
 
114
116
 
115
- itemTd.isBoolean
117
+ itemTd.isLocation
116
118
 
117
119
  ?
118
- !loading ? (
119
- <td
120
- className={getStyles('td', 'tdacction')}
121
- key={[itemTd.accessor] + (indexTd + index)}
122
- >
123
- {String(item[itemTd.accessor])}
124
-
125
- </td>
126
- )
120
+ !loading ?
121
+
122
+ item[itemTd.accessor] ?
123
+
124
+ (
125
+ <td
126
+ className={getStyles('td', 'tdacction')}
127
+ key={[itemTd.accessor] + (indexTd + index)}
128
+ >
129
+
130
+ <a href={'http://maps.google.com/?q=' + item[itemTd.accessor] + ',' + item[itemTd.accessorSecond]} target='_black'>
131
+ <Icon
132
+ name="distance"
133
+ // onClick={function noRefCheck() { }}
134
+ />
135
+ </a>
136
+
137
+ </td>
138
+ ) :
139
+ (
140
+ <td
141
+ className={getStyles('td', 'tdacction')}
142
+ key={[itemTd.accessor] + (indexTd + index)}
143
+ >
144
+ </td>
145
+ )
127
146
  : null
128
147
  :
129
148
 
130
149
 
131
- itemTd.isCheckbox
150
+
151
+
152
+ itemTd.isBoolean
132
153
 
133
154
  ?
134
- !loading ? (
135
- <td
136
- className={getStyles('td', 'tdacction')}
137
- key={[itemTd.accessor] + (indexTd + index)}
138
- >
139
-
140
- {/* <Check id={item[itemTd.accessor]} isChecked={item.isSelected} /> */}
141
-
142
- <Toggle
143
- id={'idToggle' + item.id}
144
- checked={item.isSelected}
145
- label=""
146
- onChangeCheckbox={(e) => { handleClickCheckbox(e, item) }}
147
- />
148
-
149
- </td>
150
- )
155
+ !loading ?
156
+
157
+ item[itemTd.accessor] ?
158
+
159
+ (
160
+ <td
161
+ className={getStyles('td', 'tdacction')}
162
+ key={[itemTd.accessor] + (indexTd + index)}
163
+ >
164
+ {String(item[itemTd.accessor])}
165
+
166
+ </td>
167
+ ) :
168
+ (
169
+ <td
170
+ className={getStyles('td', 'tdacction')}
171
+ key={[itemTd.accessor] + (indexTd + index)}
172
+ >
173
+ </td>
174
+ )
151
175
  : null
152
176
  :
153
177
 
154
178
 
155
- itemTd.isArrayObject
179
+ itemTd.isCheckbox
156
180
 
157
181
  ?
182
+ !loading ? (
183
+ <td
184
+ className={getStyles('td', 'tdacction')}
185
+ key={[itemTd.accessor] + (indexTd + index)}
186
+ >
187
+
188
+ {/* <Check id={item[itemTd.accessor]} isChecked={item.isSelected} /> */}
189
+
190
+ <Toggle
191
+ id={'idToggle' + item.id}
192
+ checked={item.isSelected}
193
+ label=""
194
+ disabled={[itemTd.disabled]}
195
+ onChangeCheckbox={(e) => { handleClickCheckbox(e, item) }}
196
+ />
158
197
 
159
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
198
+ </td>
199
+ )
200
+ : null
201
+ :
160
202
 
161
- {console.log('TD: ' + [itemTd.accessor] + (indexTd + index))}
162
203
 
163
- {item[itemTd.accessor].map((itemTdObj, indexAcc, array) => (
204
+ itemTd.isArrayObject
164
205
 
165
- <>
206
+ ?
166
207
 
167
- <span className={getStyles('tdlabelAlt')} key={itemTdObj.id + 'label' + (indexAcc + index)}>
168
- {console.log('A: ' + itemTdObj.id + 'label' + (indexAcc + index))}
208
+ <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
169
209
 
170
- {itemTdObj[itemTd.subAccessorAlt]}
210
+ {console.log('TD: ' + [itemTd.accessor] + (indexTd + index))}
171
211
 
172
- {array.length - 1 !== indexAcc ?
173
- <span>, </span> : null}
174
- :&nbsp;
175
- </span>
212
+ {item[itemTd.accessor].map((itemTdObj, indexAcc, array) => (
176
213
 
177
- <span key={itemTdObj.id + 'Tdlabel' + (indexAcc + index)}>
214
+ <>
178
215
 
179
- {console.log('B: ' + itemTdObj.id + 'Tdlabel' + (indexAcc + index))}
216
+ <span className={getStyles('tdlabelAlt')} key={itemTdObj.id + 'label' + (indexAcc + index)}>
217
+ {console.log('A: ' + itemTdObj.id + 'label' + (indexAcc + index))}
180
218
 
181
- {itemTdObj[itemTd.subAccessor]}
219
+ {itemTdObj[itemTd.subAccessorAlt]}
182
220
 
183
- {array.length - 1 !== indexAcc ?
184
- <span>, </span> : null}
221
+ {array.length - 1 !== indexAcc ?
222
+ <span>, </span> : null}
223
+ :&nbsp;
224
+ </span>
185
225
 
186
- </span>
226
+ <span key={itemTdObj.id + 'Tdlabel' + (indexAcc + index)}>
187
227
 
188
- </>
228
+ {console.log('B: ' + itemTdObj.id + 'Tdlabel' + (indexAcc + index))}
189
229
 
190
- ))}
230
+ {itemTdObj[itemTd.subAccessor]}
191
231
 
192
- </td>
232
+ {array.length - 1 !== indexAcc ?
233
+ <span>, </span> : null}
193
234
 
194
- :
235
+ </span>
195
236
 
237
+ </>
196
238
 
197
- itemTd.isPicture
239
+ ))}
198
240
 
199
- ?
200
- <td className={getStyles('td', 'tdacction')} key={[itemTd.accessor] + (indexTd + index)}>
201
- <Picture
202
- src={item[itemTd.accessor]}
203
- width={50}
204
- />
205
241
  </td>
242
+
206
243
  :
207
244
 
208
- itemTd.subAccessor === 'action'
209
245
 
210
- ?
246
+ itemTd.isPicture
211
247
 
212
- <td className={getStyles('td', 'tdacctionIcons')} key={[itemTd.accessor] + (indexTd + index)}>
248
+ ?
249
+ <td className={getStyles('td', 'tdacction')} key={[itemTd.accessor] + (indexTd + index)}>
250
+ <Picture
251
+ src={item[itemTd.accessor]}
252
+ width={50}
253
+ />
254
+ </td>
255
+ :
213
256
 
214
- {itemTd.viewUserView ?
257
+ itemTd.subAccessor === 'action'
215
258
 
216
- item.viewUserView === undefined ?
259
+ ?
217
260
 
218
- <>
219
- <span
220
- data-tip
221
- data-for='userView'
222
- onMouseEnter={handleMouseEnter}
223
- onMouseLeave={handleMouseLeave}
224
- >
225
- <>
226
- <Icon
227
- id="userView"
228
- background="base"
229
- name="userView"
230
- onClick={(e) => { onClickActionUserView(e, item) }}
231
- />
232
- <Horizontal size="xs" />
233
- </>
261
+ <td className={getStyles('td', 'tdacctionIcons')} key={[itemTd.accessor] + (indexTd + index)}>
234
262
 
235
- </span>
236
263
 
237
- {isToolTipMounted ? (
238
- <ReactTooltip id='userView' type='error'>
239
- <span>{txtTootipIconUserView}</span>
240
- </ReactTooltip>
241
- ) : null}
242
- </>
264
+ {itemTd.viewListInvoice ?
243
265
 
244
- :
245
266
 
246
- item.viewUserView ?
267
+ item.viewListInvoice === undefined ?
247
268
 
248
269
  <>
249
270
  <span
250
271
  data-tip
251
- data-for='userView'
272
+ data-for='listInvoice'
252
273
  onMouseEnter={handleMouseEnter}
253
274
  onMouseLeave={handleMouseLeave}
254
275
  >
255
276
  <>
256
277
  <Icon
257
- id="userView"
278
+ id={"listInvoice" + (indexTd + index)}
258
279
  background="base"
259
- name="userView"
260
- onClick={(e) => { onClickActionUserView(e, item) }}
280
+ name="listInvoice"
281
+ onClick={(e) => { onClickActionListInvoice(e, item) }}
261
282
  />
262
283
  <Horizontal size="xs" />
263
284
  </>
@@ -265,35 +286,61 @@ export const RowTable = ({
265
286
  </span>
266
287
 
267
288
  {isToolTipMounted ? (
268
- <ReactTooltip id='userView' type='error'>
269
- <span>{txtTootipIconUserView}</span>
289
+ <ReactTooltip id='listInvoice' type='error' place='left'>
290
+ <span>{txtTootipIconListInvoice}</span>
270
291
  </ReactTooltip>
271
292
  ) : null}
272
293
  </>
273
294
 
274
- : null
295
+ :
275
296
 
276
- : null}
297
+ item.viewListInvoice ?
277
298
 
299
+ <>
300
+ <span
301
+ data-tip
302
+ data-for='listInvoice'
303
+ onMouseEnter={handleMouseEnter}
304
+ onMouseLeave={handleMouseLeave}
305
+ >
306
+ <>
307
+ <Icon
308
+ id={"listInvoice" + (indexTd + index)}
309
+ background="base"
310
+ name="listInvoice"
311
+ onClick={(e) => { onClickActionListInvoice(e, item) }}
312
+ />
313
+ <Horizontal size="xs" />
314
+ </>
315
+
316
+ </span>
317
+
318
+ {isToolTipMounted ? (
319
+ <ReactTooltip id='listInvoice' type='error'>
320
+ <span>{txtTootipIconListInvoice}</span>
321
+ </ReactTooltip>
322
+ ) : null}
323
+ </>
278
324
 
279
- {itemTd.viewListInvoice ?
325
+ : null
280
326
 
327
+ : null}
281
328
 
282
- item.viewListInvoice === undefined ?
329
+ {itemTd.viewListXLS && item.fileType === 'xls' ?
283
330
 
284
331
  <>
285
332
  <span
286
333
  data-tip
287
- data-for='listInvoice'
334
+ data-for='listXLS'
288
335
  onMouseEnter={handleMouseEnter}
289
336
  onMouseLeave={handleMouseLeave}
290
337
  >
291
338
  <>
292
339
  <Icon
293
- id={"listInvoice" + (indexTd + index)}
340
+ id={"listXLS" + (indexTd + index)}
294
341
  background="base"
295
- name="listInvoice"
296
- onClick={(e) => { onClickActionListInvoice(e, item) }}
342
+ name="listXLS"
343
+ onClick={(e) => { onClickActionListXLS(e, item) }}
297
344
  />
298
345
  <Horizontal size="xs" />
299
346
  </>
@@ -301,152 +348,59 @@ export const RowTable = ({
301
348
  </span>
302
349
 
303
350
  {isToolTipMounted ? (
304
- <ReactTooltip id='listInvoice' type='error' place='left'>
305
- <span>{txtTootipIconListInvoice}</span>
351
+ <ReactTooltip id='listXLS' type='error'>
352
+ <span>{txtTootipIconListListXLS}</span>
306
353
  </ReactTooltip>
307
354
  ) : null}
308
355
  </>
309
356
 
310
- :
311
-
312
- item.viewListInvoice ?
313
-
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
- </>
339
-
340
- : null
341
-
342
- : null}
343
-
344
- {itemTd.viewListXLS && item.fileType === 'xls' ?
345
-
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
- </>
362
-
363
- </span>
364
-
365
- {isToolTipMounted ? (
366
- <ReactTooltip id='listXLS' type='error'>
367
- <span>{txtTootipIconListListXLS}</span>
368
- </ReactTooltip>
369
- ) : null}
370
- </>
371
-
372
- : null}
373
-
374
- {itemTd.viewListCSV && item.fileType === 'xml' ?
357
+ : null}
375
358
 
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
- </>
392
-
393
- </span>
394
-
395
- {isToolTipMounted ? (
396
- <ReactTooltip id='listCSV' type='error'>
397
- <span>{txtTootipIconListListCSV}</span>
398
- </ReactTooltip>
399
- ) : null}
400
- </>
401
-
402
- : null}
359
+ {itemTd.viewListCSV && item.fileType === 'xml' ?
403
360
 
404
- {itemTd.viewListPDF && item.fileType === 'pdf' ?
405
-
406
- <>
407
- <span
408
- data-tip
409
- data-for='listPDF'
410
- onMouseEnter={handleMouseEnter}
411
- onMouseLeave={handleMouseLeave}
412
- >
413
- <>
414
- <Icon
415
- id={"listPDF" + (indexTd + index)}
416
- background="base"
417
- name="listPDF"
418
- onClick={(e) => { onClickActionListPDF(e, item) }}
419
- />
420
- <Horizontal size="xs" />
421
- </>
361
+ <>
362
+ <span
363
+ data-tip
364
+ data-for='listCSV'
365
+ onMouseEnter={handleMouseEnter}
366
+ onMouseLeave={handleMouseLeave}
367
+ >
368
+ <>
369
+ <Icon
370
+ id={"listCSV" + (indexTd + index)}
371
+ background="base"
372
+ name="listCSV"
373
+ onClick={(e) => { onClickActionListCSV(e, item) }}
374
+ />
375
+ <Horizontal size="xs" />
376
+ </>
422
377
 
423
- </span>
378
+ </span>
424
379
 
425
- {isToolTipMounted ? (
426
- <ReactTooltip id='listPDF' type='error'>
427
- <span>{txtTootipIconListListPDF}</span>
428
- </ReactTooltip>
429
- ) : null}
430
- </>
380
+ {isToolTipMounted ? (
381
+ <ReactTooltip id='listCSV' type='error'>
382
+ <span>{txtTootipIconListListCSV}</span>
383
+ </ReactTooltip>
384
+ ) : null}
385
+ </>
431
386
 
432
- : null}
387
+ : null}
433
388
 
434
- {itemTd.viewEdit ?
389
+ {itemTd.viewListPDF && item.fileType === 'pdf' ?
435
390
 
436
- item.viewEdit === undefined ?
437
391
  <>
438
392
  <span
439
393
  data-tip
440
- data-for='edit'
394
+ data-for='listPDF'
441
395
  onMouseEnter={handleMouseEnter}
442
396
  onMouseLeave={handleMouseLeave}
443
397
  >
444
398
  <>
445
399
  <Icon
446
- id={"edit" + (indexTd + index)}
400
+ id={"listPDF" + (indexTd + index)}
447
401
  background="base"
448
- name="edit"
449
- onClick={(e) => { onClickActionEdit(e, item) }}
402
+ name="listPDF"
403
+ onClick={(e) => { onClickActionListPDF(e, item) }}
450
404
  />
451
405
  <Horizontal size="xs" />
452
406
  </>
@@ -454,15 +408,17 @@ export const RowTable = ({
454
408
  </span>
455
409
 
456
410
  {isToolTipMounted ? (
457
- <ReactTooltip id='edit' type='error'>
458
- <span>{txtTootipIconEdit}</span>
411
+ <ReactTooltip id='listPDF' type='error'>
412
+ <span>{txtTootipIconListListPDF}</span>
459
413
  </ReactTooltip>
460
414
  ) : null}
461
415
  </>
462
- :
463
416
 
464
- item.viewEdit ?
417
+ : null}
418
+
419
+ {itemTd.viewEdit ?
465
420
 
421
+ item.viewEdit === undefined ?
466
422
  <>
467
423
  <span
468
424
  data-tip
@@ -488,43 +444,43 @@ export const RowTable = ({
488
444
  </ReactTooltip>
489
445
  ) : null}
490
446
  </>
447
+ :
491
448
 
492
- : null
493
-
494
- : null}
495
-
496
- {itemTd.viewEmailSend ?
497
-
498
- item.viewEmailSend === undefined ?
449
+ item.viewEdit ?
499
450
 
500
- <>
501
- <span
502
- data-tip
503
- data-for='sendEmail'
504
- onMouseEnter={handleMouseEnter}
505
- onMouseLeave={handleMouseLeave}
506
- >
507
451
  <>
508
- <Icon
509
- background="base"
510
- name="sendEmail"
511
- onClick={e => { onClickActionSendEmail(e, item) }}
512
- />
513
- <Horizontal size="xs" />
452
+ <span
453
+ data-tip
454
+ data-for='edit'
455
+ onMouseEnter={handleMouseEnter}
456
+ onMouseLeave={handleMouseLeave}
457
+ >
458
+ <>
459
+ <Icon
460
+ id={"edit" + (indexTd + index)}
461
+ background="base"
462
+ name="edit"
463
+ onClick={(e) => { onClickActionEdit(e, item) }}
464
+ />
465
+ <Horizontal size="xs" />
466
+ </>
467
+
468
+ </span>
469
+
470
+ {isToolTipMounted ? (
471
+ <ReactTooltip id='edit' type='error'>
472
+ <span>{txtTootipIconEdit}</span>
473
+ </ReactTooltip>
474
+ ) : null}
514
475
  </>
515
476
 
516
- </span>
477
+ : null
517
478
 
518
- {isToolTipMounted ? (
519
- <ReactTooltip id='sendEmail' type='error'>
520
- <span>{txtTootipIconSendEmail}</span>
521
- </ReactTooltip>
522
- ) : null}
523
- </>
479
+ : null}
524
480
 
525
- :
481
+ {itemTd.viewEmailSend ?
526
482
 
527
- item.viewEmailSend ?
483
+ item.viewEmailSend === undefined ?
528
484
 
529
485
  <>
530
486
  <span
@@ -551,42 +507,42 @@ export const RowTable = ({
551
507
  ) : null}
552
508
  </>
553
509
 
554
- : null
555
-
556
- : null}
557
-
558
- {itemTd.viewTrash ?
510
+ :
559
511
 
560
- item.viewTrash === undefined ?
512
+ item.viewEmailSend ?
561
513
 
562
- <>
563
- <span
564
- data-tip
565
- data-for='trash'
566
- onMouseEnter={handleMouseEnter}
567
- onMouseLeave={handleMouseLeave}
568
- >
569
514
  <>
570
- <Icon
571
- background="base"
572
- name="trash"
573
- onClick={e => { onClickActionDelete(e, item) }}
574
- />
575
- <Horizontal size="xs" />
515
+ <span
516
+ data-tip
517
+ data-for='sendEmail'
518
+ onMouseEnter={handleMouseEnter}
519
+ onMouseLeave={handleMouseLeave}
520
+ >
521
+ <>
522
+ <Icon
523
+ background="base"
524
+ name="sendEmail"
525
+ onClick={e => { onClickActionSendEmail(e, item) }}
526
+ />
527
+ <Horizontal size="xs" />
528
+ </>
529
+
530
+ </span>
531
+
532
+ {isToolTipMounted ? (
533
+ <ReactTooltip id='sendEmail' type='error'>
534
+ <span>{txtTootipIconSendEmail}</span>
535
+ </ReactTooltip>
536
+ ) : null}
576
537
  </>
577
538
 
578
- </span>
539
+ : null
579
540
 
580
- {isToolTipMounted ? (
581
- <ReactTooltip id='trash' type='error'>
582
- <span>{txtTootipIconDelete}</span>
583
- </ReactTooltip>
584
- ) : null}
585
- </>
541
+ : null}
586
542
 
587
- :
543
+ {itemTd.viewTrash ?
588
544
 
589
- item.viewTrash ?
545
+ item.viewTrash === undefined ?
590
546
 
591
547
  <>
592
548
  <span
@@ -613,44 +569,43 @@ export const RowTable = ({
613
569
  ) : null}
614
570
  </>
615
571
 
616
- : null
617
-
618
- : null}
619
-
620
-
621
- {itemTd.viewLink ?
572
+ :
622
573
 
623
- item.viewLink === undefined ?
574
+ item.viewTrash ?
624
575
 
625
- <>
626
- <span
627
- data-tip
628
- data-for='linkUser'
629
- onMouseEnter={handleMouseEnter}
630
- onMouseLeave={handleMouseLeave}
631
- >
632
576
  <>
633
- <Icon
634
- background="base"
635
- name="linkUser"
636
- // onClick={(e) => onClickEdit(e, item)}
637
- onClick={e => { onClickActionLink(e, item) }}
638
- />
639
- <Horizontal size="xs" />
577
+ <span
578
+ data-tip
579
+ data-for='trash'
580
+ onMouseEnter={handleMouseEnter}
581
+ onMouseLeave={handleMouseLeave}
582
+ >
583
+ <>
584
+ <Icon
585
+ background="base"
586
+ name="trash"
587
+ onClick={e => { onClickActionDelete(e, item) }}
588
+ />
589
+ <Horizontal size="xs" />
590
+ </>
591
+
592
+ </span>
593
+
594
+ {isToolTipMounted ? (
595
+ <ReactTooltip id='trash' type='error'>
596
+ <span>{txtTootipIconDelete}</span>
597
+ </ReactTooltip>
598
+ ) : null}
640
599
  </>
641
600
 
642
- </span>
601
+ : null
643
602
 
644
- {isToolTipMounted ? (
645
- <ReactTooltip id='linkUser' type='error'>
646
- <span>{txtTootipIconLink}</span>
647
- </ReactTooltip>
648
- ) : null}
649
- </>
603
+ : null}
650
604
 
651
- :
652
605
 
653
- item.viewLink ?
606
+ {itemTd.viewLink ?
607
+
608
+ item.viewLink === undefined ?
654
609
 
655
610
  <>
656
611
  <span
@@ -678,44 +633,45 @@ export const RowTable = ({
678
633
  ) : null}
679
634
  </>
680
635
 
681
- : null
682
-
683
- : null}
684
-
685
-
686
-
687
- {itemTd.viewClone ?
636
+ :
688
637
 
689
- item.viewClone === undefined ?
638
+ item.viewLink ?
690
639
 
691
- <>
692
- <span
693
- data-tip
694
- data-for='clone'
695
- onMouseEnter={handleMouseEnter}
696
- onMouseLeave={handleMouseLeave}
697
- >
698
640
  <>
699
- <Icon
700
- background="base"
701
- name="cloneDefault"
702
- onClick={e => { onClickActionClone(e, item) }}
703
- />
704
- <Horizontal size="xs" />
641
+ <span
642
+ data-tip
643
+ data-for='linkUser'
644
+ onMouseEnter={handleMouseEnter}
645
+ onMouseLeave={handleMouseLeave}
646
+ >
647
+ <>
648
+ <Icon
649
+ background="base"
650
+ name="linkUser"
651
+ // onClick={(e) => onClickEdit(e, item)}
652
+ onClick={e => { onClickActionLink(e, item) }}
653
+ />
654
+ <Horizontal size="xs" />
655
+ </>
656
+
657
+ </span>
658
+
659
+ {isToolTipMounted ? (
660
+ <ReactTooltip id='linkUser' type='error'>
661
+ <span>{txtTootipIconLink}</span>
662
+ </ReactTooltip>
663
+ ) : null}
705
664
  </>
706
665
 
707
- </span>
666
+ : null
708
667
 
709
- {isToolTipMounted ? (
710
- <ReactTooltip id='clone' type='error'>
711
- <span>{txtTootipIconClone}</span>
712
- </ReactTooltip>
713
- ) : null}
714
- </>
668
+ : null}
715
669
 
716
- :
717
670
 
718
- item.viewClone ?
671
+
672
+ {itemTd.viewClone ?
673
+
674
+ item.viewClone === undefined ?
719
675
 
720
676
  <>
721
677
  <span
@@ -727,7 +683,7 @@ export const RowTable = ({
727
683
  <>
728
684
  <Icon
729
685
  background="base"
730
- name="clone"
686
+ name="cloneDefault"
731
687
  onClick={e => { onClickActionClone(e, item) }}
732
688
  />
733
689
  <Horizontal size="xs" />
@@ -742,90 +698,257 @@ export const RowTable = ({
742
698
  ) : null}
743
699
  </>
744
700
 
745
- : null
701
+ :
746
702
 
747
- : null}
703
+ item.viewClone ?
748
704
 
705
+ <>
706
+ <span
707
+ data-tip
708
+ data-for='clone'
709
+ onMouseEnter={handleMouseEnter}
710
+ onMouseLeave={handleMouseLeave}
711
+ >
712
+ <>
713
+ <Icon
714
+ background="base"
715
+ name="clone"
716
+ onClick={e => { onClickActionClone(e, item) }}
717
+ />
718
+ <Horizontal size="xs" />
719
+ </>
720
+
721
+ </span>
722
+
723
+ {isToolTipMounted ? (
724
+ <ReactTooltip id='clone' type='error'>
725
+ <span>{txtTootipIconClone}</span>
726
+ </ReactTooltip>
727
+ ) : null}
728
+ </>
749
729
 
730
+ : null
750
731
 
751
- </td>
732
+ : null}
752
733
 
753
- :
734
+ {itemTd.viewUserView ?
754
735
 
755
- itemTd.subAccessor !== ''
736
+ item.viewUserView === undefined ?
756
737
 
757
- ?
738
+ <>
739
+ <span
740
+ data-tip
741
+ data-for='userView'
742
+ onMouseEnter={handleMouseEnter}
743
+ onMouseLeave={handleMouseLeave}
744
+ >
745
+ <>
746
+ <Icon
747
+ id="userView"
748
+ background="base"
749
+ name="userView"
750
+ onClick={(e) => { onClickActionUserView(e, item) }}
751
+ />
752
+ <Horizontal size="xs" />
753
+ </>
754
+
755
+ </span>
758
756
 
759
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor][itemTd.subAccessor]}</td>
757
+ {isToolTipMounted ? (
758
+ <ReactTooltip id='userView' type='error'>
759
+ <span>{txtTootipIconUserView}</span>
760
+ </ReactTooltip>
761
+ ) : null}
762
+ </>
760
763
 
761
- :
764
+ :
762
765
 
763
- itemTd.typeFilter === 'date'
766
+ item.viewUserView ?
764
767
 
765
- ?
768
+ <>
769
+ <span
770
+ data-tip
771
+ data-for='userView'
772
+ onMouseEnter={handleMouseEnter}
773
+ onMouseLeave={handleMouseLeave}
774
+ >
775
+ <>
776
+ <Icon
777
+ id="userView"
778
+ background="base"
779
+ name="userView"
780
+ onClick={(e) => { onClickActionUserView(e, item) }}
781
+ />
782
+ <Horizontal size="xs" />
783
+ </>
784
+
785
+ </span>
786
+
787
+ {isToolTipMounted ? (
788
+ <ReactTooltip id='userView' type='error'>
789
+ <span>{txtTootipIconUserView}</span>
790
+ </ReactTooltip>
791
+ ) : null}
792
+ </>
766
793
 
767
- itemTd.typeFilterSub === 'date_only' ?
794
+ : null
768
795
 
769
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
770
- <Moment format="DD/MM/YYYY">
771
- {item[itemTd.accessor]}
772
- </Moment>
773
- </td>
796
+ : null}
774
797
 
775
- :
776
798
 
777
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
778
- {/* <Moment format="DD/MM/YYYY hh:mm:ss"> */}
779
- <Moment format="DD/MM/YYYY HH:mm">
780
- {item[itemTd.accessor]}
781
- </Moment>
782
- </td>
783
- :
784
799
 
785
- itemTd.typeFilter === 'select'
800
+ {itemTd.viewCheckbox ?
786
801
 
787
- ?
802
+ item.viewCheckbox === undefined ?
803
+
804
+ <>
805
+ <span
806
+ data-tip
807
+ data-for='checkbox'
808
+ onMouseEnter={handleMouseEnter}
809
+ onMouseLeave={handleMouseLeave}
810
+ >
811
+ <>
788
812
 
789
- itemTd.optionsSelect.map((itemSelect, indexSelect) => (
813
+ <Toggle
814
+ id={'idToggle' + item.id}
815
+ checked={item.isSelected}
816
+ label=""
817
+ onChangeCheckbox={(e) => { onClickActionCheckbox(e, item) }}
818
+ />
790
819
 
820
+ {/* <Horizontal size="xs" /> */}
821
+ </>
791
822
 
792
- item[itemTd.accessor] === itemSelect.value ?
823
+ </span>
793
824
 
794
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index) + indexSelect}>
795
- {itemSelect.label}
796
- </td>
825
+ {isToolTipMounted ? (
826
+ <ReactTooltip id='checkbox' type='error'>
827
+ <span>{txtTootipIconCheckbox}</span>
828
+ </ReactTooltip>
829
+ ) : null}
830
+ </>
797
831
 
798
- :
832
+ :
833
+
834
+ item.viewCheckbox ?
835
+
836
+ <>
837
+ <span
838
+ data-tip
839
+ data-for='checkbox'
840
+ onMouseEnter={handleMouseEnter}
841
+ onMouseLeave={handleMouseLeave}
842
+ >
843
+ <>
844
+ <Toggle
845
+ id={'idToggle' + item.id}
846
+ checked={item.isSelected}
847
+ label=""
848
+ onChangeCheckbox={(e) => { onClickActionCheckbox(e, item) }}
849
+ />
850
+
851
+ {/* <Horizontal size="xs" /> */}
852
+ </>
853
+
854
+ </span>
855
+
856
+ {isToolTipMounted ? (
857
+ <ReactTooltip id='checkbox' type='error'>
858
+ <span>{txtTootipIconCheckbox}</span>
859
+ </ReactTooltip>
860
+ ) : null}
861
+ </>
862
+
863
+ : null
864
+
865
+ : null}
799
866
 
800
- null
801
- ))
802
867
 
868
+
869
+
870
+
871
+
872
+
873
+
874
+ </td>
875
+
876
+ :
877
+
878
+ itemTd.subAccessor !== ''
879
+
880
+ ?
881
+
882
+ <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor][itemTd.subAccessor]}</td>
883
+
884
+ :
885
+
886
+ itemTd.typeFilter === 'date'
887
+
888
+ ?
889
+
890
+ itemTd.typeFilterSub === 'date_only' ?
891
+
892
+ <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
893
+ <Moment format="DD/MM/YYYY">
894
+ {item[itemTd.accessor]}
895
+ </Moment>
896
+ </td>
897
+
898
+ :
899
+
900
+ <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
901
+ {/* <Moment format="DD/MM/YYYY hh:mm:ss"> */}
902
+ <Moment format="DD/MM/YYYY HH:mm">
903
+ {item[itemTd.accessor]}
904
+ </Moment>
905
+ </td>
803
906
  :
804
907
 
805
- itemTd.typeFilter === 'number'
908
+ itemTd.typeFilter === 'select'
806
909
 
807
910
  ?
808
911
 
809
- itemTd.subTypeFilter
912
+ itemTd.optionsSelect.map((itemSelect, indexSelect) => (
810
913
 
811
- ?
812
914
 
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>
915
+ item[itemTd.accessor] === itemSelect.value ?
916
+
917
+ <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index) + indexSelect}>
918
+ {itemSelect.label}
919
+ </td>
920
+
816
921
  :
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>
922
+
923
+ null
924
+ ))
820
925
 
821
926
  :
822
927
 
823
- itemTd.subTypeFilter
928
+ itemTd.typeFilter === 'number'
824
929
 
825
930
  ?
826
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{Number(item[itemTd.accessor]).toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
931
+
932
+ itemTd.subTypeFilter
933
+
934
+ ?
935
+
936
+ itemTd.characterExtra === 'km'
937
+ ?
938
+ <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{(item[itemTd.accessor] / 1000).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
939
+ :
940
+ <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor].toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
941
+ :
942
+ <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor]}</td>
943
+
827
944
  :
828
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor]}</td>
945
+
946
+ itemTd.subTypeFilter
947
+
948
+ ?
949
+ <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{Number(item[itemTd.accessor]).toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
950
+ :
951
+ <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor]}</td>
829
952
 
830
953
  // <>
831
954
 
@@ -881,6 +1004,7 @@ RowTable.propTypes = {
881
1004
  onClickActionDelete: PropTypes.func,
882
1005
  onClickActionLink: PropTypes.func,
883
1006
  onClickActionClone: PropTypes.func,
1007
+ onClickActionCheckbox: PropTypes.func,
884
1008
  txtTootipIconUserView: PropTypes.string,
885
1009
  txtTootipIconListInvoice: PropTypes.string,
886
1010
  txtTootipIconListListXLS: PropTypes.string,
@@ -891,6 +1015,7 @@ RowTable.propTypes = {
891
1015
  txtTootipIconDelete: PropTypes.string,
892
1016
  txtTootipIconLink: PropTypes.string,
893
1017
  txtTootipIconClone: PropTypes.string,
1018
+ txtTootipIconCheckbox: PropTypes.string,
894
1019
  colorRow: PropTypes.string,
895
1020
  isCheckedCheckbox: PropTypes.bool
896
1021
  }
@@ -910,6 +1035,7 @@ RowTable.defaultProps = {
910
1035
  onClickActionDelete: () => { },
911
1036
  onClickActionLink: () => { },
912
1037
  onClickActionClone: () => { },
1038
+ onClickActionCheckbox: () => { },
913
1039
  txtTootipIconUserView: '',
914
1040
  txtTootipIconListInvoice: '',
915
1041
  txtTootipIconListListXLS: '',
@@ -920,6 +1046,7 @@ RowTable.defaultProps = {
920
1046
  txtTootipIconDelete: '',
921
1047
  txtTootipIconLink: '',
922
1048
  txtTootipIconClone: '',
1049
+ txtTootipIconCheckbox: '',
923
1050
 
924
1051
  isCheckedCheckbox: false
925
1052
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "imbric-theme",
3
- "version": "0.1.3",
3
+ "version": "0.1.5",
4
4
  "description": "Components library IMBRIC",
5
5
  "private": false,
6
6
  "main": "index.js",