imbric-theme 0.1.3 → 0.1.5

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