@visns-studio/visns-components 4.8.5 → 4.8.7
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
|
@@ -14,10 +14,10 @@
|
|
|
14
14
|
"akar-icons": "^1.9.31",
|
|
15
15
|
"array-move": "^4.0.0",
|
|
16
16
|
"awesome-debounce-promise": "^2.1.0",
|
|
17
|
-
"axios": "^1.7.
|
|
17
|
+
"axios": "^1.7.7",
|
|
18
18
|
"dayjs": "^1.11.13",
|
|
19
19
|
"file-saver": "^2.0.5",
|
|
20
|
-
"framer-motion": "^11.
|
|
20
|
+
"framer-motion": "^11.5.4",
|
|
21
21
|
"html-react-parser": "^5.1.15",
|
|
22
22
|
"lodash": "^4.17.21",
|
|
23
23
|
"lodash.debounce": "^4.0.8",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"react-reveal": "^1.2.2",
|
|
40
40
|
"react-router-dom": "^6.26.1",
|
|
41
41
|
"react-select": "^5.8.0",
|
|
42
|
-
"react-signature-pad-wrapper": "^4.0.
|
|
42
|
+
"react-signature-pad-wrapper": "^4.0.3",
|
|
43
43
|
"react-slugify": "^4.0.1",
|
|
44
44
|
"react-sortable-hoc": "^2.0.0",
|
|
45
45
|
"react-to-print": "^2.15.1",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"truncate": "^3.0.0",
|
|
53
53
|
"uuid": "^10.0.0",
|
|
54
54
|
"validator": "^13.12.0",
|
|
55
|
-
"vite": "^5.4.
|
|
55
|
+
"vite": "^5.4.3",
|
|
56
56
|
"yarn": "^1.22.22"
|
|
57
57
|
},
|
|
58
58
|
"devDependencies": {
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"mini-css-extract-plugin": "^2.9.1",
|
|
68
68
|
"react": "^18.3.1",
|
|
69
69
|
"react-dom": "^18.3.1",
|
|
70
|
-
"sass": "^1.
|
|
70
|
+
"sass": "^1.78.0",
|
|
71
71
|
"sass-loader": "^16.0.1"
|
|
72
72
|
},
|
|
73
73
|
"peerDependencies": {
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
76
76
|
},
|
|
77
77
|
"name": "@visns-studio/visns-components",
|
|
78
|
-
"version": "4.8.
|
|
78
|
+
"version": "4.8.7",
|
|
79
79
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
80
80
|
"main": "src/index.js",
|
|
81
81
|
"files": [
|
|
@@ -305,6 +305,12 @@ function Field({
|
|
|
305
305
|
}
|
|
306
306
|
} else if (['plaintextheading'].includes(settings.type)) {
|
|
307
307
|
return <h2>{settings.label ? settings.label : ''}</h2>;
|
|
308
|
+
} else if (['section'].includes(settings.type)) {
|
|
309
|
+
return (
|
|
310
|
+
<div className={styles.gridtxt__header}>
|
|
311
|
+
<span>{settings.label}</span>
|
|
312
|
+
</div>
|
|
313
|
+
);
|
|
308
314
|
}
|
|
309
315
|
};
|
|
310
316
|
|
|
@@ -1237,7 +1243,6 @@ function Field({
|
|
|
1237
1243
|
for (const key in formData) {
|
|
1238
1244
|
if (formData[key].id === settings.id) {
|
|
1239
1245
|
if (formData[key].hasOwnProperty('options')) {
|
|
1240
|
-
console.info(formData[key].rows, 'test form');
|
|
1241
1246
|
tableRadioColumns = formData[key].options;
|
|
1242
1247
|
tableRadioRows = formData[key].rows;
|
|
1243
1248
|
break; // Assuming there's only one match needed, break out of the loop
|
|
@@ -1254,6 +1259,7 @@ function Field({
|
|
|
1254
1259
|
checked={cell[cellKey] || false}
|
|
1255
1260
|
data-id={settings.id}
|
|
1256
1261
|
onChange={(e) => {
|
|
1262
|
+
e.stopPropagation(); // Stop event bubbling
|
|
1257
1263
|
onChangeTableRadio(e, rowKey, cellKey);
|
|
1258
1264
|
}}
|
|
1259
1265
|
/>
|
|
@@ -1332,7 +1338,7 @@ function Field({
|
|
|
1332
1338
|
}}
|
|
1333
1339
|
/>
|
|
1334
1340
|
);
|
|
1335
|
-
|
|
1341
|
+
case 'text':
|
|
1336
1342
|
return (
|
|
1337
1343
|
<input
|
|
1338
1344
|
type={'text'}
|
|
@@ -1343,6 +1349,22 @@ function Field({
|
|
|
1343
1349
|
}
|
|
1344
1350
|
/>
|
|
1345
1351
|
);
|
|
1352
|
+
default:
|
|
1353
|
+
return (
|
|
1354
|
+
<input
|
|
1355
|
+
type={'checkbox'}
|
|
1356
|
+
checked={cell[cellKey] || false}
|
|
1357
|
+
data-id={settings.id}
|
|
1358
|
+
style={{
|
|
1359
|
+
transform: 'scale(1.5)', // Scale the checkbox to make it bigger
|
|
1360
|
+
margin: '5px', // Optional: Add some margin around the checkbox
|
|
1361
|
+
}}
|
|
1362
|
+
onChange={(e) => {
|
|
1363
|
+
e.stopPropagation(); // Stop event bubbling
|
|
1364
|
+
onChangeTableRadio(e, rowKey, cellKey);
|
|
1365
|
+
}}
|
|
1366
|
+
/>
|
|
1367
|
+
);
|
|
1346
1368
|
}
|
|
1347
1369
|
};
|
|
1348
1370
|
|
|
@@ -1351,12 +1373,21 @@ function Field({
|
|
|
1351
1373
|
<thead>
|
|
1352
1374
|
<tr>
|
|
1353
1375
|
<th></th>
|
|
1354
|
-
{tableRadioColumns.map((column) => (
|
|
1376
|
+
{tableRadioColumns.map((column, columnKey) => (
|
|
1355
1377
|
<th
|
|
1356
1378
|
key={`${settings.id}-${column.id}`}
|
|
1357
1379
|
style={{
|
|
1358
1380
|
width: '250px',
|
|
1359
1381
|
whiteSpace: 'nowrap',
|
|
1382
|
+
textAlign:
|
|
1383
|
+
tableRadioColumns[columnKey]
|
|
1384
|
+
.type === '' ||
|
|
1385
|
+
tableRadioColumns[columnKey]
|
|
1386
|
+
.type === null ||
|
|
1387
|
+
tableRadioColumns[columnKey]
|
|
1388
|
+
.type === 'checkbox'
|
|
1389
|
+
? 'center'
|
|
1390
|
+
: 'left',
|
|
1360
1391
|
}}
|
|
1361
1392
|
>
|
|
1362
1393
|
{column.label}
|
|
@@ -1379,6 +1410,17 @@ function Field({
|
|
|
1379
1410
|
{tableRadioColumns.map((cell, cellKey) => (
|
|
1380
1411
|
<td
|
|
1381
1412
|
key={`table-radio-cell-${settings.id}-${row.id}-${cell.id}`}
|
|
1413
|
+
style={{
|
|
1414
|
+
textAlign:
|
|
1415
|
+
tableRadioColumns[cellKey]
|
|
1416
|
+
.type === '' ||
|
|
1417
|
+
tableRadioColumns[cellKey]
|
|
1418
|
+
.type === null ||
|
|
1419
|
+
tableRadioColumns[cellKey]
|
|
1420
|
+
.type === 'checkbox'
|
|
1421
|
+
? 'center'
|
|
1422
|
+
: 'left',
|
|
1423
|
+
}}
|
|
1382
1424
|
>
|
|
1383
1425
|
{renderTableRadioField(
|
|
1384
1426
|
tableRadioColumns[cellKey],
|
|
@@ -1620,6 +1662,7 @@ function Field({
|
|
|
1620
1662
|
'radio',
|
|
1621
1663
|
'radio-ajax',
|
|
1622
1664
|
'richeditor',
|
|
1665
|
+
'section',
|
|
1623
1666
|
'signature',
|
|
1624
1667
|
'table_radio',
|
|
1625
1668
|
'table_text',
|
|
@@ -269,10 +269,6 @@ const GenericDynamic = ({
|
|
|
269
269
|
});
|
|
270
270
|
};
|
|
271
271
|
|
|
272
|
-
useEffect(() => {
|
|
273
|
-
console.info(activeForm);
|
|
274
|
-
}, [activeForm]);
|
|
275
|
-
|
|
276
272
|
const handleChangeAddTableTextRow = (id) => {
|
|
277
273
|
setActiveForm((prevActiveForm) => {
|
|
278
274
|
// Find the key of the form that matches the id
|
|
@@ -539,10 +535,18 @@ const GenericDynamic = ({
|
|
|
539
535
|
try {
|
|
540
536
|
let error = '';
|
|
541
537
|
|
|
538
|
+
const excludedTypes = [
|
|
539
|
+
'dynamicdata',
|
|
540
|
+
'plaintext',
|
|
541
|
+
'plaintextheading',
|
|
542
|
+
'section',
|
|
543
|
+
'table_radio',
|
|
544
|
+
];
|
|
545
|
+
|
|
542
546
|
Object.entries(activeForm).forEach(([key, field]) => {
|
|
543
547
|
if (
|
|
544
548
|
field.required === true &&
|
|
545
|
-
field.type
|
|
549
|
+
!excludedTypes.includes(field.type) &&
|
|
546
550
|
(field.value === null || field.value === '')
|
|
547
551
|
) {
|
|
548
552
|
error += `<p>${field.label} is required</p>`;
|
|
@@ -1008,7 +1008,11 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
|
|
|
1008
1008
|
dropdownKey
|
|
1009
1009
|
) => (
|
|
1010
1010
|
<option
|
|
1011
|
-
value={
|
|
1011
|
+
value={
|
|
1012
|
+
dropdown.id
|
|
1013
|
+
? dropdown.id
|
|
1014
|
+
: dropdown.url
|
|
1015
|
+
}
|
|
1012
1016
|
key={`dynamic-dropdown-${dropdownKey}`}
|
|
1013
1017
|
>
|
|
1014
1018
|
{dropdown.label}
|
|
@@ -1299,8 +1303,6 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
|
|
|
1299
1303
|
<input
|
|
1300
1304
|
type="text"
|
|
1301
1305
|
style={{
|
|
1302
|
-
padding:
|
|
1303
|
-
'5px',
|
|
1304
1306
|
height: '52px',
|
|
1305
1307
|
padding:
|
|
1306
1308
|
'1rem',
|
|
@@ -1702,7 +1704,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
|
|
|
1702
1704
|
<span
|
|
1703
1705
|
className={styles.fi__span}
|
|
1704
1706
|
>
|
|
1705
|
-
|
|
1707
|
+
Associated Role?
|
|
1706
1708
|
</span>
|
|
1707
1709
|
</label>
|
|
1708
1710
|
</div>
|
|
@@ -1871,6 +1873,59 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
|
|
|
1871
1873
|
</div>
|
|
1872
1874
|
) : null}
|
|
1873
1875
|
|
|
1876
|
+
<div className={styles.gridtxt__header}>
|
|
1877
|
+
<span>
|
|
1878
|
+
Conditional Field Display Criteria
|
|
1879
|
+
</span>
|
|
1880
|
+
</div>
|
|
1881
|
+
|
|
1882
|
+
<div className={styles.formItem}>
|
|
1883
|
+
<label className={styles.fi__label}>
|
|
1884
|
+
<select
|
|
1885
|
+
name="conditional_field"
|
|
1886
|
+
value={
|
|
1887
|
+
dataField.conditional_field
|
|
1888
|
+
}
|
|
1889
|
+
onChange={handleChangeForm}
|
|
1890
|
+
>
|
|
1891
|
+
<option>
|
|
1892
|
+
Please Select an Option
|
|
1893
|
+
</option>
|
|
1894
|
+
{data.detail &&
|
|
1895
|
+
data.detail.length > 0 &&
|
|
1896
|
+
data.detail.map(
|
|
1897
|
+
(item, key) => (
|
|
1898
|
+
<option
|
|
1899
|
+
value={item.id}
|
|
1900
|
+
key={`conditional-field-${item.id}-${key}`}
|
|
1901
|
+
>
|
|
1902
|
+
{item.label}
|
|
1903
|
+
</option>
|
|
1904
|
+
)
|
|
1905
|
+
)}
|
|
1906
|
+
</select>
|
|
1907
|
+
<span className={styles.fi__span}>
|
|
1908
|
+
Field
|
|
1909
|
+
</span>
|
|
1910
|
+
</label>
|
|
1911
|
+
</div>
|
|
1912
|
+
|
|
1913
|
+
<div className={styles.formItem}>
|
|
1914
|
+
<label className={styles.fi__label}>
|
|
1915
|
+
<input
|
|
1916
|
+
name="conditional_value"
|
|
1917
|
+
value={
|
|
1918
|
+
dataField.conditional_value
|
|
1919
|
+
}
|
|
1920
|
+
type="text"
|
|
1921
|
+
onChange={handleChangeForm}
|
|
1922
|
+
/>
|
|
1923
|
+
<span className={styles.fi__span}>
|
|
1924
|
+
Value
|
|
1925
|
+
</span>
|
|
1926
|
+
</label>
|
|
1927
|
+
</div>
|
|
1928
|
+
|
|
1874
1929
|
<div
|
|
1875
1930
|
className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}
|
|
1876
1931
|
>
|
|
@@ -309,3 +309,38 @@ input[type='file']:hover {
|
|
|
309
309
|
.contentTable tbody tr:nth-of-type(even) {
|
|
310
310
|
background: rgba(var(--item-color-rgb), 1.02);
|
|
311
311
|
}
|
|
312
|
+
|
|
313
|
+
.gridtxt__header {
|
|
314
|
+
width: 100%;
|
|
315
|
+
display: block;
|
|
316
|
+
background: var(--border-color);
|
|
317
|
+
box-sizing: border-box;
|
|
318
|
+
padding: 10px 20px;
|
|
319
|
+
border-top-left-radius: var(--br);
|
|
320
|
+
border-top-right-radius: var(--br);
|
|
321
|
+
margin-bottom: 0;
|
|
322
|
+
font-weight: 700;
|
|
323
|
+
text-align: center;
|
|
324
|
+
color: var(--paragraph-color);
|
|
325
|
+
position: relative;
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
.gridtxt__header span {
|
|
329
|
+
font-weight: 700;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.gridtxt__header .btn {
|
|
333
|
+
font-size: 0.85em;
|
|
334
|
+
padding: 0.25em;
|
|
335
|
+
display: flex;
|
|
336
|
+
flex-wrap: nowrap;
|
|
337
|
+
align-items: center;
|
|
338
|
+
float: left;
|
|
339
|
+
position: relative;
|
|
340
|
+
top: -4px;
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
.gridtxt__header .btn svg {
|
|
344
|
+
max-width: 15px;
|
|
345
|
+
margin-right: 5px;
|
|
346
|
+
}
|