@visns-studio/visns-components 5.8.9 → 5.8.10
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
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
83
83
|
},
|
|
84
84
|
"name": "@visns-studio/visns-components",
|
|
85
|
-
"version": "5.8.
|
|
85
|
+
"version": "5.8.10",
|
|
86
86
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
87
87
|
"main": "src/index.js",
|
|
88
88
|
"files": [
|
|
@@ -2221,6 +2221,8 @@ const DataGrid = forwardRef(
|
|
|
2221
2221
|
name: column.id,
|
|
2222
2222
|
filterEditor: filterEditor,
|
|
2223
2223
|
filterEditorProps: filterEditorProps,
|
|
2224
|
+
defaultWidth: 120, // Set default width for date columns
|
|
2225
|
+
minWidth: 120, // Set minimum width for date columns
|
|
2224
2226
|
render: ({ data }) => {
|
|
2225
2227
|
if (
|
|
2226
2228
|
data &&
|
|
@@ -2272,6 +2274,8 @@ const DataGrid = forwardRef(
|
|
|
2272
2274
|
name: `${column.id[0]}.${column.id[1]}.`,
|
|
2273
2275
|
filterEditor: filterEditor,
|
|
2274
2276
|
filterEditorProps: filterEditorProps,
|
|
2277
|
+
defaultWidth: 200, // Set default width for daterange columns
|
|
2278
|
+
minWidth: 200, // Set minimum width for daterange columns
|
|
2275
2279
|
render: ({ data }) => {
|
|
2276
2280
|
if (
|
|
2277
2281
|
data &&
|
|
@@ -2316,6 +2320,8 @@ const DataGrid = forwardRef(
|
|
|
2316
2320
|
name: column.id,
|
|
2317
2321
|
filterEditor: filterEditor,
|
|
2318
2322
|
filterEditorProps: filterEditorProps,
|
|
2323
|
+
defaultWidth: 160, // Set default width for datetime columns
|
|
2324
|
+
minWidth: 160, // Set minimum width for datetime columns
|
|
2319
2325
|
render: ({ data }) => {
|
|
2320
2326
|
if (
|
|
2321
2327
|
data &&
|
|
@@ -3511,6 +3517,11 @@ const DataGrid = forwardRef(
|
|
|
3511
3517
|
content = content
|
|
3512
3518
|
.replace(/<p>/g, '')
|
|
3513
3519
|
.replace(/<\/p>/g, '<br>');
|
|
3520
|
+
|
|
3521
|
+
// Ensure <br /> tags are properly handled (convert to <br> for consistency)
|
|
3522
|
+
content = content
|
|
3523
|
+
.replace(/<br \/>/g, '<br>')
|
|
3524
|
+
.replace(/<br\/>/g, '<br>');
|
|
3514
3525
|
}
|
|
3515
3526
|
|
|
3516
3527
|
// If truncate has a value, limit content to specified number of characters
|
|
@@ -312,7 +312,27 @@ const Grid = ({ config, userProfile }) => {
|
|
|
312
312
|
return value;
|
|
313
313
|
}
|
|
314
314
|
return value;
|
|
315
|
+
case 'html':
|
|
316
|
+
// Explicitly parse HTML content
|
|
317
|
+
return parse(String(value));
|
|
318
|
+
case 'richtext':
|
|
319
|
+
// Parse rich text content
|
|
320
|
+
return parse(String(value));
|
|
315
321
|
default:
|
|
322
|
+
// For text values, check if it contains HTML tags
|
|
323
|
+
if (
|
|
324
|
+
typeof value === 'string' &&
|
|
325
|
+
(value.includes('<br') ||
|
|
326
|
+
value.includes('<p>') ||
|
|
327
|
+
value.includes('<div') ||
|
|
328
|
+
value.includes('<span'))
|
|
329
|
+
) {
|
|
330
|
+
// Ensure <br /> tags are properly handled
|
|
331
|
+
const processedValue = String(value)
|
|
332
|
+
.replace(/<br \/>/g, '<br>')
|
|
333
|
+
.replace(/<br\/>/g, '<br>');
|
|
334
|
+
return parse(processedValue);
|
|
335
|
+
}
|
|
316
336
|
return value;
|
|
317
337
|
}
|
|
318
338
|
};
|
|
@@ -1218,22 +1238,39 @@ const Grid = ({ config, userProfile }) => {
|
|
|
1218
1238
|
)}
|
|
1219
1239
|
</span>
|
|
1220
1240
|
) : (
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
{
|
|
1226
|
-
type
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
'number'
|
|
1233
|
-
|
|
1234
|
-
: ''),
|
|
1241
|
+
<span
|
|
1242
|
+
className={
|
|
1243
|
+
styles.cellContent
|
|
1244
|
+
}
|
|
1245
|
+
data-type={
|
|
1246
|
+
header.type ||
|
|
1247
|
+
(typeof row[
|
|
1248
|
+
header
|
|
1249
|
+
.key
|
|
1250
|
+
] ===
|
|
1251
|
+
'number'
|
|
1252
|
+
? 'number'
|
|
1253
|
+
: '')
|
|
1235
1254
|
}
|
|
1236
|
-
|
|
1255
|
+
>
|
|
1256
|
+
{formatCellContent(
|
|
1257
|
+
row[
|
|
1258
|
+
header
|
|
1259
|
+
.key
|
|
1260
|
+
],
|
|
1261
|
+
{
|
|
1262
|
+
type:
|
|
1263
|
+
header.type ||
|
|
1264
|
+
(typeof row[
|
|
1265
|
+
header
|
|
1266
|
+
.key
|
|
1267
|
+
] ===
|
|
1268
|
+
'number'
|
|
1269
|
+
? 'number'
|
|
1270
|
+
: ''),
|
|
1271
|
+
}
|
|
1272
|
+
)}
|
|
1273
|
+
</span>
|
|
1237
1274
|
)
|
|
1238
1275
|
) : header.onClick ? (
|
|
1239
1276
|
<span
|
|
@@ -1256,10 +1293,24 @@ const Grid = ({ config, userProfile }) => {
|
|
|
1256
1293
|
key={`cell-${rowIndex}-${colIndex}`}
|
|
1257
1294
|
className={styles.gridCell}
|
|
1258
1295
|
>
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1296
|
+
<span
|
|
1297
|
+
className={
|
|
1298
|
+
styles.cellContent
|
|
1299
|
+
}
|
|
1300
|
+
data-type={
|
|
1301
|
+
col.type ||
|
|
1302
|
+
(typeof row[
|
|
1303
|
+
col.name
|
|
1304
|
+
] === 'number'
|
|
1305
|
+
? 'number'
|
|
1306
|
+
: '')
|
|
1307
|
+
}
|
|
1308
|
+
>
|
|
1309
|
+
{formatCellContent(
|
|
1310
|
+
row[col.name],
|
|
1311
|
+
col
|
|
1312
|
+
)}
|
|
1313
|
+
</span>
|
|
1263
1314
|
</td>
|
|
1264
1315
|
))}
|
|
1265
1316
|
</tr>
|
|
@@ -508,6 +508,33 @@
|
|
|
508
508
|
color: var(--paragraph-color, #212529);
|
|
509
509
|
}
|
|
510
510
|
|
|
511
|
+
.cellContent {
|
|
512
|
+
display: inline-block;
|
|
513
|
+
width: 100%;
|
|
514
|
+
|
|
515
|
+
/* Ensure date fields have uniform width */
|
|
516
|
+
&[data-type='date'] {
|
|
517
|
+
min-width: 120px;
|
|
518
|
+
width: 120px;
|
|
519
|
+
max-width: 120px;
|
|
520
|
+
display: inline-block;
|
|
521
|
+
}
|
|
522
|
+
|
|
523
|
+
&[data-type='datetime'] {
|
|
524
|
+
min-width: 160px;
|
|
525
|
+
width: 160px;
|
|
526
|
+
max-width: 160px;
|
|
527
|
+
display: inline-block;
|
|
528
|
+
}
|
|
529
|
+
|
|
530
|
+
/* Ensure <br> tags are properly displayed */
|
|
531
|
+
br {
|
|
532
|
+
display: block;
|
|
533
|
+
content: '';
|
|
534
|
+
margin-top: 5px;
|
|
535
|
+
}
|
|
536
|
+
}
|
|
537
|
+
|
|
511
538
|
.clickableCell {
|
|
512
539
|
cursor: pointer;
|
|
513
540
|
transition: background-color 0.2s ease;
|
|
@@ -502,6 +502,32 @@
|
|
|
502
502
|
padding-right: 10px;
|
|
503
503
|
}
|
|
504
504
|
|
|
505
|
+
/* Date field styling for uniform width */
|
|
506
|
+
:global {
|
|
507
|
+
/* Target date cells specifically */
|
|
508
|
+
.InovuaReactDataGrid__cell[data-column-id*='date'],
|
|
509
|
+
.InovuaReactDataGrid__cell[data-column-id*='Date'] {
|
|
510
|
+
min-width: 120px !important;
|
|
511
|
+
width: 120px !important;
|
|
512
|
+
max-width: 120px !important;
|
|
513
|
+
}
|
|
514
|
+
|
|
515
|
+
/* Target datetime cells specifically */
|
|
516
|
+
.InovuaReactDataGrid__cell[data-column-id*='datetime'],
|
|
517
|
+
.InovuaReactDataGrid__cell[data-column-id*='Datetime'] {
|
|
518
|
+
min-width: 160px !important;
|
|
519
|
+
width: 160px !important;
|
|
520
|
+
max-width: 160px !important;
|
|
521
|
+
}
|
|
522
|
+
|
|
523
|
+
/* Target daterange cells specifically */
|
|
524
|
+
.InovuaReactDataGrid__cell[data-column-id*='daterange'] {
|
|
525
|
+
min-width: 200px !important;
|
|
526
|
+
width: 200px !important;
|
|
527
|
+
max-width: 200px !important;
|
|
528
|
+
}
|
|
529
|
+
}
|
|
530
|
+
|
|
505
531
|
.searchContainer {
|
|
506
532
|
display: flex;
|
|
507
533
|
align-items: center;
|