@visns-studio/visns-components 4.7.3 → 4.7.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -68,17 +68,14 @@
68
68
  "react": "^18.3.1",
69
69
  "react-dom": "^18.3.1",
70
70
  "sass": "^1.77.8",
71
- "sass-loader": "^16.0.1",
72
- "webpack": "^5.93.0",
73
- "webpack-bundle-analyzer": "^4.10.2",
74
- "webpack-cli": "^5.1.4"
71
+ "sass-loader": "^16.0.1"
75
72
  },
76
73
  "peerDependencies": {
77
74
  "react": "^17.0.0 || ^18.0.0",
78
75
  "react-dom": "^17.0.0 || ^18.0.0"
79
76
  },
80
77
  "name": "@visns-studio/visns-components",
81
- "version": "4.7.3",
78
+ "version": "4.7.4",
82
79
  "description": "Various packages to assist in the development of our Custom Applications.",
83
80
  "main": "src/index.js",
84
81
  "files": [
@@ -99,5 +96,5 @@
99
96
  "url": "https://github.com/visnsstudio/visns-components/issues"
100
97
  },
101
98
  "homepage": "https://github.com/visnsstudio/visns-components#readme",
102
- "packageManager": "yarn@3.6.1"
99
+ "packageManager": "yarn@4.4.0"
103
100
  }
@@ -1257,6 +1257,108 @@ function Field({
1257
1257
  }
1258
1258
  }
1259
1259
  }
1260
+
1261
+ const renderTableTextField = (s, cell, rowKey, cellKey) => {
1262
+ switch (s.type) {
1263
+ case 'checkbox':
1264
+ return (
1265
+ <input
1266
+ type={'checkbox'}
1267
+ checked={cell || false}
1268
+ data-id={settings.id}
1269
+ onChange={(e) =>
1270
+ onChangeTableText(e, rowKey, cellKey)
1271
+ }
1272
+ />
1273
+ );
1274
+ case 'html5_date':
1275
+ return (
1276
+ <input
1277
+ type="date"
1278
+ value={cell || ''}
1279
+ data-id={settings.id}
1280
+ onChange={(e) =>
1281
+ onChangeTableText(e, rowKey, cellKey)
1282
+ }
1283
+ />
1284
+ );
1285
+ case 'html5_datetime':
1286
+ return (
1287
+ <input
1288
+ type="datetime"
1289
+ value={cell || ''}
1290
+ data-id={settings.id}
1291
+ onChange={(e) =>
1292
+ onChangeTableText(e, rowKey, cellKey)
1293
+ }
1294
+ />
1295
+ );
1296
+ case 'html5_time':
1297
+ return (
1298
+ <input
1299
+ type="time"
1300
+ value={cell || ''}
1301
+ data-id={settings.id}
1302
+ onChange={(e) =>
1303
+ onChangeTableText(e, rowKey, cellKey)
1304
+ }
1305
+ />
1306
+ );
1307
+ case 'number':
1308
+ return (
1309
+ <input
1310
+ type="number"
1311
+ value={cell || ''}
1312
+ data-id={settings.id}
1313
+ onChange={(e) =>
1314
+ onChangeTableText(e, rowKey, cellKey)
1315
+ }
1316
+ />
1317
+ );
1318
+ case 'textarea':
1319
+ return (
1320
+ <textarea
1321
+ value={cell || ''}
1322
+ data-id={settings.id}
1323
+ onChange={(e) =>
1324
+ onChangeTableText(e, rowKey, cellKey)
1325
+ }
1326
+ ></textarea>
1327
+ );
1328
+ case 'toggle':
1329
+ return (
1330
+ <Toggle
1331
+ name={settings.id}
1332
+ data-name={settings.id}
1333
+ data-id={settings.id}
1334
+ checked={
1335
+ cell !== undefined
1336
+ ? cell === ''
1337
+ ? false
1338
+ : cell === 'on'
1339
+ ? false
1340
+ : cell
1341
+ : false
1342
+ }
1343
+ onChange={(e) => {
1344
+ onChangeTableText(e, rowKey, cellKey);
1345
+ }}
1346
+ />
1347
+ );
1348
+ default:
1349
+ return (
1350
+ <input
1351
+ type={'text'}
1352
+ value={cell || ''}
1353
+ data-id={settings.id}
1354
+ onChange={(e) =>
1355
+ onChangeTableText(e, rowKey, cellKey)
1356
+ }
1357
+ />
1358
+ );
1359
+ }
1360
+ };
1361
+
1260
1362
  return (
1261
1363
  <table className={styles.contentTable}>
1262
1364
  <thead>
@@ -1291,33 +1393,11 @@ function Field({
1291
1393
  <td
1292
1394
  key={`${settings.id}}-${cellKey}-input`}
1293
1395
  >
1294
- {tableTextColumns[cellKey]
1295
- .type === 'checkbox' ? (
1296
- <input
1297
- type={'checkbox'}
1298
- checked={cell || false}
1299
- data-id={settings.id}
1300
- onChange={(e) =>
1301
- onChangeTableText(
1302
- e,
1303
- rowKey,
1304
- cellKey
1305
- )
1306
- }
1307
- />
1308
- ) : (
1309
- <input
1310
- type={'text'}
1311
- value={cell || ''}
1312
- data-id={settings.id}
1313
- onChange={(e) =>
1314
- onChangeTableText(
1315
- e,
1316
- rowKey,
1317
- cellKey
1318
- )
1319
- }
1320
- />
1396
+ {renderTableTextField(
1397
+ tableTextColumns[cellKey],
1398
+ cell,
1399
+ rowKey,
1400
+ cellKey
1321
1401
  )}
1322
1402
  </td>
1323
1403
  ))}
@@ -301,7 +301,7 @@ const GenericDynamic = ({
301
301
  index === rowIndex
302
302
  ? row.map((cell, colIndex) =>
303
303
  colIndex === columnIndex
304
- ? type === 'checkbox'
304
+ ? type === 'checkbox' || type === 'toggle'
305
305
  ? checked
306
306
  : value
307
307
  : cell
@@ -869,7 +869,8 @@ const GenericDynamic = ({
869
869
  )}
870
870
  </div>
871
871
  <div className={styles.polActions}>
872
- {buttons.length > 0 &&
872
+ {buttons &&
873
+ buttons.length > 0 &&
873
874
  buttons.map((button, buttonKey) => (
874
875
  <button
875
876
  className={button.className}
@@ -44,6 +44,29 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
44
44
  label: '',
45
45
  type: '',
46
46
  });
47
+ const [fieldTypes, setFieldTypes] = useState([
48
+ { value: 'checkbox', label: 'Checkbox' },
49
+ { value: 'html5_date', label: 'Date' },
50
+ { value: 'html5_datetime', label: 'Date & Time' },
51
+ { value: 'dropdown', label: 'Dropdown' },
52
+ ...(dynamicDropdowns && dynamicDropdowns.length > 0
53
+ ? [{ value: 'dynamicDropdown', label: 'Dynamic Dropdown' }]
54
+ : []),
55
+ { value: 'dynamicdata', label: 'Dynamic Data' },
56
+ { value: 'file', label: 'File' },
57
+ { value: 'plaintextheading', label: 'Heading' },
58
+ { value: 'image', label: 'Image' },
59
+ { value: 'number', label: 'Number' },
60
+ { value: 'plaintext', label: 'Plain Text' },
61
+ { value: 'section', label: 'Section' },
62
+ { value: 'signature', label: 'Signature' },
63
+ { value: 'table_radio', label: 'Table (Radio)' },
64
+ { value: 'table_text', label: 'Table (Custom)' },
65
+ { value: 'text', label: 'Text' },
66
+ { value: 'textarea', label: 'Textarea' },
67
+ { value: 'html5_time', label: 'Time' },
68
+ { value: 'toggle', label: 'Toggle' },
69
+ ]);
47
70
  const [rowOption, setRowOption] = useState({
48
71
  id: '',
49
72
  label: '',
@@ -189,7 +212,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
189
212
  label: '',
190
213
  type: '',
191
214
  options: [],
192
- // rows: [],
215
+ rows: [],
193
216
  size: 'half',
194
217
  required: 'no',
195
218
  }));
@@ -613,7 +636,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
613
636
  <td
614
637
  key={`${field.id}-table-text-data-${index}`}
615
638
  >
616
- [Placeholder Data]]
639
+ [Placeholder Data]
617
640
  </td>
618
641
  ))}
619
642
  </tr>
@@ -889,66 +912,16 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
889
912
  <option>
890
913
  Please Select an Option
891
914
  </option>
892
- <option value="checkbox">
893
- Checkbox
894
- </option>
895
- <option value="html5_date">
896
- Date
897
- </option>
898
- <option value="html5_datetime">
899
- Date & Time
900
- </option>
901
- <option value="dropdown">
902
- Dropdown
903
- </option>
904
- {dynamicDropdowns &&
905
- dynamicDropdowns.length > 0 ? (
906
- <option value="dynamicDropdown">
907
- Dynamic Dropdown
908
- </option>
909
- ) : null}
910
- <option value="dynamicdata">
911
- Dynamic Data
912
- </option>
913
- <option value="file">
914
- File
915
- </option>
916
- <option value="plaintextheading">
917
- Heading
918
- </option>
919
- <option value="image">
920
- Image
921
- </option>
922
- <option value="number">
923
- Number
924
- </option>
925
- <option value="plaintext">
926
- Plain Text
927
- </option>
928
- <option value="section">
929
- Section
930
- </option>
931
- <option value="signature">
932
- Signature
933
- </option>
934
- <option value="table_radio">
935
- Table (Radio)
936
- </option>
937
- <option value="table_text">
938
- Table (Text)
939
- </option>
940
- <option value="text">
941
- Text
942
- </option>
943
- <option value="textarea">
944
- Textarea
945
- </option>
946
- <option value="html5_time">
947
- Time
948
- </option>
949
- <option value="toggle">
950
- Toggle
951
- </option>
915
+ {fieldTypes.map(
916
+ (item, itemKey) => (
917
+ <option
918
+ value={item.value}
919
+ key={`${item.value}-${itemKey}`}
920
+ >
921
+ {item.label}
922
+ </option>
923
+ )
924
+ )}
952
925
  </select>
953
926
  <span className={styles.fi__span}>
954
927
  Type *
@@ -1247,9 +1220,33 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
1247
1220
  key={`option-${optionKey}`}
1248
1221
  >
1249
1222
  <td>
1250
- {
1251
- option.label
1252
- }
1223
+ <input
1224
+ type="text"
1225
+ value={
1226
+ option.label
1227
+ }
1228
+ onChange={(
1229
+ e
1230
+ ) => {
1231
+ const newOptions =
1232
+ [
1233
+ ...dataField.options,
1234
+ ];
1235
+ newOptions[
1236
+ optionKey
1237
+ ].label =
1238
+ e.target.value;
1239
+ setDataField(
1240
+ (
1241
+ items
1242
+ ) => ({
1243
+ ...items,
1244
+ options:
1245
+ newOptions,
1246
+ })
1247
+ );
1248
+ }}
1249
+ />
1253
1250
  </td>
1254
1251
  <td
1255
1252
  style={{
@@ -1306,6 +1303,9 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
1306
1303
  style={{
1307
1304
  padding:
1308
1305
  '5px',
1306
+ height: '52px',
1307
+ padding:
1308
+ '1rem',
1309
1309
  }}
1310
1310
  name="label"
1311
1311
  onChange={
@@ -1314,6 +1314,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
1314
1314
  value={
1315
1315
  dataOption.label
1316
1316
  }
1317
+ placeholder="Column Header"
1317
1318
  />
1318
1319
  </td>
1319
1320
  <td
@@ -1388,14 +1389,99 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
1388
1389
  key={`option-${optionKey}`}
1389
1390
  >
1390
1391
  <td>
1391
- {
1392
- option.label
1393
- }
1392
+ <input
1393
+ type="text"
1394
+ value={
1395
+ option.label
1396
+ }
1397
+ onChange={(
1398
+ e
1399
+ ) => {
1400
+ const newOptions =
1401
+ [
1402
+ ...dataField.options,
1403
+ ];
1404
+ newOptions[
1405
+ optionKey
1406
+ ].label =
1407
+ e.target.value;
1408
+ setDataField(
1409
+ (
1410
+ items
1411
+ ) => ({
1412
+ ...items,
1413
+ options:
1414
+ newOptions,
1415
+ })
1416
+ );
1417
+ }}
1418
+ />
1394
1419
  </td>
1395
1420
  <td>
1396
- {
1397
- option.type
1398
- }
1421
+ <select
1422
+ value={
1423
+ option.type
1424
+ }
1425
+ onChange={(
1426
+ e
1427
+ ) => {
1428
+ const newOptions =
1429
+ [
1430
+ ...dataField.options,
1431
+ ];
1432
+ newOptions[
1433
+ optionKey
1434
+ ].type =
1435
+ e.target.value;
1436
+ setDataField(
1437
+ (
1438
+ items
1439
+ ) => ({
1440
+ ...items,
1441
+ options:
1442
+ newOptions,
1443
+ })
1444
+ );
1445
+ }}
1446
+ >
1447
+ {fieldTypes
1448
+ .filter(
1449
+ (
1450
+ item
1451
+ ) =>
1452
+ ![
1453
+ 'checkbox',
1454
+ 'dropdown',
1455
+ 'dynamicdata',
1456
+ 'signature',
1457
+ 'table',
1458
+ ].some(
1459
+ (
1460
+ keyword
1461
+ ) =>
1462
+ item.value.includes(
1463
+ keyword
1464
+ )
1465
+ )
1466
+ )
1467
+ .map(
1468
+ (
1469
+ item,
1470
+ itemKey
1471
+ ) => (
1472
+ <option
1473
+ value={
1474
+ item.value
1475
+ }
1476
+ key={`type-form-${item.value}-${itemKey}`}
1477
+ >
1478
+ {
1479
+ item.label
1480
+ }
1481
+ </option>
1482
+ )
1483
+ )}
1484
+ </select>
1399
1485
  </td>
1400
1486
  <td
1401
1487
  style={{
@@ -1437,8 +1523,8 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
1437
1523
  )
1438
1524
  ) : (
1439
1525
  <tr>
1440
- <td colSpan="2">
1441
- No entry have
1526
+ <td colSpan="3">
1527
+ No entry has
1442
1528
  been added.
1443
1529
  </td>
1444
1530
  </tr>
@@ -1452,6 +1538,9 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
1452
1538
  style={{
1453
1539
  padding:
1454
1540
  '5px',
1541
+ height: '52px',
1542
+ padding:
1543
+ '1rem',
1455
1544
  }}
1456
1545
  name="label"
1457
1546
  onChange={
@@ -1460,6 +1549,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
1460
1549
  value={
1461
1550
  dataOption.label
1462
1551
  }
1552
+ placeholder="Column Header"
1463
1553
  />
1464
1554
  </td>
1465
1555
  <td>
@@ -1477,12 +1567,43 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
1477
1567
  Select an
1478
1568
  Option
1479
1569
  </option>
1480
- <option value="text">
1481
- Text
1482
- </option>
1483
- <option value="checkbox">
1484
- Checkbox
1485
- </option>
1570
+ {fieldTypes
1571
+ .filter(
1572
+ (
1573
+ item
1574
+ ) =>
1575
+ ![
1576
+ 'checkbox',
1577
+ 'dropdown',
1578
+ 'dynamicdata',
1579
+ 'signature',
1580
+ 'table',
1581
+ ].some(
1582
+ (
1583
+ keyword
1584
+ ) =>
1585
+ item.value.includes(
1586
+ keyword
1587
+ )
1588
+ )
1589
+ )
1590
+ .map(
1591
+ (
1592
+ item,
1593
+ itemKey
1594
+ ) => (
1595
+ <option
1596
+ value={
1597
+ item.value
1598
+ }
1599
+ key={`type-${item.value}-${itemKey}`}
1600
+ >
1601
+ {
1602
+ item.label
1603
+ }
1604
+ </option>
1605
+ )
1606
+ )}
1486
1607
  </select>
1487
1608
  </td>
1488
1609
  <td
@@ -1586,9 +1707,32 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
1586
1707
  key={`row-${rowKey}`}
1587
1708
  >
1588
1709
  <td>
1589
- {
1590
- row.label
1591
- }
1710
+ <input
1711
+ type="text"
1712
+ value={
1713
+ row.label
1714
+ }
1715
+ onChange={(
1716
+ e
1717
+ ) => {
1718
+ const newRows =
1719
+ [
1720
+ ...dataField.rows,
1721
+ ];
1722
+ newRows[
1723
+ rowKey
1724
+ ].label =
1725
+ e.target.value;
1726
+ setDataField(
1727
+ (
1728
+ items
1729
+ ) => ({
1730
+ ...items,
1731
+ rows: newRows,
1732
+ })
1733
+ );
1734
+ }}
1735
+ />
1592
1736
  </td>
1593
1737
  <td
1594
1738
  style={{
@@ -1631,7 +1775,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
1631
1775
  ) : (
1632
1776
  <tr>
1633
1777
  <td colSpan="2">
1634
- No entry have
1778
+ No entry has
1635
1779
  been added.
1636
1780
  </td>
1637
1781
  </tr>
@@ -733,7 +733,7 @@ select:not(:placeholder-shown) + .fi__span {
733
733
  }
734
734
 
735
735
  .contentTable tbody tr:nth-of-type(even) {
736
- background: rgba(var(--secondary-color-rgb), 1.02);
736
+ background: rgba(var(--item-color-rgb), 1.02);
737
737
  }
738
738
 
739
739
  .gridHeaders th {
@@ -261,7 +261,7 @@
261
261
  ):not(.inovua-react-toolkit-combo-box__input):not(
262
262
  .inovua-react-toolkit-date-input__input
263
263
  ):not(.inovua-react-toolkit-numeric-input__input):focus {
264
- border: 1px solid rgba(var(--highlight-color-rgb), 0.85);
264
+ border: 1px solid rgba(var(--primary-color-rgb), 0.85);
265
265
  }
266
266
 
267
267
  input[type='file'] {
@@ -742,7 +742,7 @@ select:not(:placeholder-shown) + .fi__span {
742
742
  }
743
743
 
744
744
  .contentTable tbody tr:nth-of-type(even) {
745
- background: rgba(var(--secondary-color-rgb), 1.02);
745
+ background: rgba(var(--item-color-rgb), 1.02);
746
746
  }
747
747
 
748
748
  .gridHeaders th {
@@ -307,5 +307,5 @@ input[type='file']:hover {
307
307
  }
308
308
 
309
309
  .contentTable tbody tr:nth-of-type(even) {
310
- background: rgba(var(--secondary-color-rgb), 1.02);
310
+ background: rgba(var(--item-color-rgb), 1.02);
311
311
  }