@visns-studio/visns-components 4.7.3 → 4.7.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.
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.5",
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: 'image', label: 'Image' },
58
+ { value: 'number', label: 'Number' },
59
+ { value: 'plaintext', label: 'Plain Text' },
60
+ { value: 'plaintextheading', label: 'Heading' },
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,104 @@ 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
+ 'file',
1457
+ 'image',
1458
+ 'plaintext',
1459
+ 'plaintextheading',
1460
+ 'section',
1461
+ 'signature',
1462
+ 'table',
1463
+ ].some(
1464
+ (
1465
+ keyword
1466
+ ) =>
1467
+ item.value.includes(
1468
+ keyword
1469
+ )
1470
+ )
1471
+ )
1472
+ .map(
1473
+ (
1474
+ item,
1475
+ itemKey
1476
+ ) => (
1477
+ <option
1478
+ value={
1479
+ item.value
1480
+ }
1481
+ key={`type-form-${item.value}-${itemKey}`}
1482
+ >
1483
+ {
1484
+ item.label
1485
+ }
1486
+ </option>
1487
+ )
1488
+ )}
1489
+ </select>
1399
1490
  </td>
1400
1491
  <td
1401
1492
  style={{
@@ -1437,8 +1528,8 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
1437
1528
  )
1438
1529
  ) : (
1439
1530
  <tr>
1440
- <td colSpan="2">
1441
- No entry have
1531
+ <td colSpan="3">
1532
+ No entry has
1442
1533
  been added.
1443
1534
  </td>
1444
1535
  </tr>
@@ -1452,6 +1543,9 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
1452
1543
  style={{
1453
1544
  padding:
1454
1545
  '5px',
1546
+ height: '52px',
1547
+ padding:
1548
+ '1rem',
1455
1549
  }}
1456
1550
  name="label"
1457
1551
  onChange={
@@ -1460,6 +1554,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
1460
1554
  value={
1461
1555
  dataOption.label
1462
1556
  }
1557
+ placeholder="Column Header"
1463
1558
  />
1464
1559
  </td>
1465
1560
  <td>
@@ -1477,12 +1572,48 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
1477
1572
  Select an
1478
1573
  Option
1479
1574
  </option>
1480
- <option value="text">
1481
- Text
1482
- </option>
1483
- <option value="checkbox">
1484
- Checkbox
1485
- </option>
1575
+ {fieldTypes
1576
+ .filter(
1577
+ (
1578
+ item
1579
+ ) =>
1580
+ ![
1581
+ 'checkbox',
1582
+ 'dropdown',
1583
+ 'dynamicdata',
1584
+ 'file',
1585
+ 'image',
1586
+ 'plaintext',
1587
+ 'plaintextheading',
1588
+ 'section',
1589
+ 'signature',
1590
+ 'table',
1591
+ ].some(
1592
+ (
1593
+ keyword
1594
+ ) =>
1595
+ item.value.includes(
1596
+ keyword
1597
+ )
1598
+ )
1599
+ )
1600
+ .map(
1601
+ (
1602
+ item,
1603
+ itemKey
1604
+ ) => (
1605
+ <option
1606
+ value={
1607
+ item.value
1608
+ }
1609
+ key={`type-${item.value}-${itemKey}`}
1610
+ >
1611
+ {
1612
+ item.label
1613
+ }
1614
+ </option>
1615
+ )
1616
+ )}
1486
1617
  </select>
1487
1618
  </td>
1488
1619
  <td
@@ -1586,9 +1717,32 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
1586
1717
  key={`row-${rowKey}`}
1587
1718
  >
1588
1719
  <td>
1589
- {
1590
- row.label
1591
- }
1720
+ <input
1721
+ type="text"
1722
+ value={
1723
+ row.label
1724
+ }
1725
+ onChange={(
1726
+ e
1727
+ ) => {
1728
+ const newRows =
1729
+ [
1730
+ ...dataField.rows,
1731
+ ];
1732
+ newRows[
1733
+ rowKey
1734
+ ].label =
1735
+ e.target.value;
1736
+ setDataField(
1737
+ (
1738
+ items
1739
+ ) => ({
1740
+ ...items,
1741
+ rows: newRows,
1742
+ })
1743
+ );
1744
+ }}
1745
+ />
1592
1746
  </td>
1593
1747
  <td
1594
1748
  style={{
@@ -1631,7 +1785,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
1631
1785
  ) : (
1632
1786
  <tr>
1633
1787
  <td colSpan="2">
1634
- No entry have
1788
+ No entry has
1635
1789
  been added.
1636
1790
  </td>
1637
1791
  </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
  }