@pega/react-sdk-overrides 0.25.2 → 0.25.3
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/lib/designSystemExtension/Banner/Banner.css +1 -1
- package/lib/designSystemExtension/Banner/Banner.tsx +7 -7
- package/lib/designSystemExtension/CaseSummaryFields/CaseSummaryFields.tsx +8 -10
- package/lib/designSystemExtension/DetailsFields/DetailsFields.tsx +11 -13
- package/lib/designSystemExtension/FieldGroup/FieldGroup.tsx +7 -8
- package/lib/designSystemExtension/FieldGroupList/FieldGroupList.tsx +9 -9
- package/lib/designSystemExtension/FieldValueList/FieldValueList.tsx +7 -8
- package/lib/designSystemExtension/Operator/Operator.tsx +11 -12
- package/lib/designSystemExtension/RichTextEditor/RichTextEditor.tsx +28 -3
- package/lib/designSystemExtension/WssQuickCreate/WssQuickCreate.css +4 -4
- package/lib/designSystemExtension/WssQuickCreate/WssQuickCreate.tsx +1 -1
- package/lib/field/CancelAlert/CancelAlert.css +4 -4
- package/lib/field/CancelAlert/CancelAlert.tsx +5 -5
- package/lib/field/Checkbox/Checkbox.tsx +96 -3
- package/lib/field/Currency/currency-utils.ts +1 -2
- package/lib/field/Dropdown/Dropdown.tsx +0 -2
- package/lib/field/Group/Group.tsx +5 -5
- package/lib/field/Location/Location.tsx +256 -0
- package/lib/field/Location/config-ext.json +8 -0
- package/lib/field/Location/index.tsx +1 -0
- package/lib/field/ObjectReference/ObjectReference.tsx +235 -0
- package/lib/field/ObjectReference/index.tsx +1 -0
- package/lib/field/ObjectReference/utils.ts +111 -0
- package/lib/field/RadioButtons/RadioButtons.tsx +46 -1
- package/lib/field/ScalarList/ScalarList.tsx +1 -2
- package/lib/field/SelectableCard/SelectableCard.tsx +175 -0
- package/lib/field/SelectableCard/index.tsx +1 -0
- package/lib/field/SelectableCard/utils.tsx +226 -0
- package/lib/field/SemanticLink/SemanticLink.tsx +159 -27
- package/lib/field/SemanticLink/utils.ts +1 -1
- package/lib/field/TextContent/TextContent.tsx +0 -1
- package/lib/field/UserReference/UserReference.tsx +0 -1
- package/lib/helpers/attachmentHelpers.ts +56 -35
- package/lib/helpers/common-utils.ts +2 -2
- package/lib/helpers/data_page.ts +0 -1
- package/lib/helpers/formatters/CurrencyMap.ts +0 -2
- package/lib/helpers/simpleTableHelpers.ts +117 -5
- package/lib/helpers/utils.ts +8 -1
- package/lib/helpers/versionHelpers.ts +0 -1
- package/lib/infra/ActionButtons/ActionButtons.tsx +28 -21
- package/lib/infra/Assignment/Assignment.tsx +2 -2
- package/lib/infra/Containers/FlowContainer/FlowContainer.tsx +14 -93
- package/lib/infra/Containers/ModalViewContainer/ListViewActionButtons/ListViewActionButtons.tsx +0 -1
- package/lib/infra/Containers/ModalViewContainer/ModalViewContainer.tsx +2 -2
- package/lib/infra/Containers/ViewContainer/ViewContainer.tsx +3 -4
- package/lib/infra/Containers/container-helpers.ts +47 -1
- package/lib/infra/DashboardFilter/DashboardFilter.tsx +0 -2
- package/lib/infra/DashboardFilter/filterUtils.tsx +3 -4
- package/lib/infra/DeferLoad/DeferLoad.tsx +1 -3
- package/lib/infra/ErrorBoundary/ErrorBoundary.tsx +0 -2
- package/lib/infra/MultiStep/MultiStep.css +8 -8
- package/lib/infra/NavBar/NavBar.css +1 -1
- package/lib/infra/NavBar/NavBar.tsx +3 -4
- package/lib/infra/Reference/Reference.tsx +2 -3
- package/lib/infra/RootContainer/RootContainer.tsx +0 -1
- package/lib/template/AdvancedSearch/AdvancedSearch.tsx +0 -1
- package/lib/template/AdvancedSearch/SearchGroup/persistUtils.ts +3 -9
- package/lib/template/AdvancedSearch/SearchGroups/SearchGroups.tsx +3 -4
- package/lib/template/AdvancedSearch/SearchGroups/hooks.ts +1 -1
- package/lib/template/AppShell/AppShell.css +1 -1
- package/lib/template/AppShell/AppShell.tsx +4 -8
- package/lib/template/CaseSummary/CaseSummary.tsx +0 -1
- package/lib/template/CaseView/CaseView.tsx +13 -19
- package/lib/template/Confirmation/Confirmation.tsx +0 -1
- package/lib/template/DataReference/DataReference.tsx +7 -10
- package/lib/template/DataReference/SearchForm.tsx +6 -5
- package/lib/template/DataReference/{utils.js → utils.ts} +3 -3
- package/lib/template/DefaultForm/DefaultForm.tsx +1 -1
- package/lib/template/Details/Details/Details.tsx +10 -10
- package/lib/template/Details/DetailsThreeColumn/DetailsThreeColumn.tsx +10 -10
- package/lib/template/Details/DetailsTwoColumn/DetailsTwoColumn.tsx +10 -10
- package/lib/template/FieldGroupTemplate/FieldGroupTemplate.tsx +1 -2
- package/lib/template/InlineDashboard/InlineDashboard.tsx +12 -14
- package/lib/template/ListView/ListView.tsx +8 -20
- package/lib/template/ListView/hooks.ts +1 -5
- package/lib/template/ListView/utils.ts +1 -1
- package/lib/template/NarrowWide/NarrowWide/NarrowWide.tsx +3 -3
- package/lib/template/NarrowWide/NarrowWideDetails/NarrowWideDetails.tsx +10 -10
- package/lib/template/OneColumn/OneColumn/OneColumn.tsx +5 -5
- package/lib/template/PromotedFilters/PromotedFilters.tsx +0 -1
- package/lib/template/SimpleTable/SimpleTable/SimpleTable.tsx +1 -2
- package/lib/template/SimpleTable/SimpleTableManual/SimpleTableManual.tsx +33 -30
- package/lib/template/TwoColumn/TwoColumn/TwoColumn.tsx +1 -2
- package/lib/template/TwoColumn/TwoColumnTab/TwoColumnTab.tsx +1 -2
- package/lib/template/WideNarrow/WideNarrow/WideNarrow.tsx +3 -3
- package/lib/template/WideNarrow/WideNarrowDetails/WideNarrowDetails.tsx +10 -10
- package/lib/template/WssNavBar/WssNavBar.css +1 -1
- package/lib/template/WssNavBar/WssNavBar.tsx +4 -4
- package/lib/widget/Attachment/Attachment.css +6 -8
- package/lib/widget/Attachment/Attachment.tsx +61 -57
- package/lib/widget/CaseHistory/CaseHistory.tsx +3 -3
- package/lib/widget/FileUtility/ActionButtonsForFileUtil/ActionButtonsForFileUtil.css +0 -14
- package/lib/widget/FileUtility/ActionButtonsForFileUtil/ActionButtonsForFileUtil.tsx +2 -2
- package/lib/widget/FileUtility/FileUtility/FileUtility.css +7 -6
- package/lib/widget/FileUtility/FileUtility/FileUtility.tsx +4 -6
- package/lib/widget/Followers/Followers.tsx +0 -2
- package/lib/widget/QuickCreate/QuickCreate.tsx +0 -1
- package/lib/widget/SummaryItem/SummaryItem.css +9 -11
- package/lib/widget/SummaryItem/SummaryItem.tsx +1 -1
- package/lib/widget/ToDo/ToDo.css +1 -13
- package/lib/widget/ToDo/ToDo.tsx +15 -7
- package/package.json +1 -1
- /package/lib/template/DataReference/{DataReferenceAdvancedSearchContext.js → DataReferenceAdvancedSearchContext.ts} +0 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import Grid2 from '@mui/material/Grid2';
|
|
2
2
|
import './Banner.css';
|
|
3
3
|
|
|
4
4
|
// AlertBanner is one of the few components that does NOT have getPConnect.
|
|
@@ -37,14 +37,14 @@ export default function Banner(props: BannerProps) {
|
|
|
37
37
|
</div>
|
|
38
38
|
</div>
|
|
39
39
|
</div>
|
|
40
|
-
<
|
|
41
|
-
<
|
|
40
|
+
<Grid2 container size={12} className='banner-layout' spacing={1}>
|
|
41
|
+
<Grid2 size={{ xs: variantMap[variant][0] }} style={{ padding: '1em' }}>
|
|
42
42
|
{a}
|
|
43
|
-
</
|
|
44
|
-
<
|
|
43
|
+
</Grid2>
|
|
44
|
+
<Grid2 size={{ xs: variantMap[variant][1] }} style={{ padding: '1em' }}>
|
|
45
45
|
{b}
|
|
46
|
-
</
|
|
47
|
-
</
|
|
46
|
+
</Grid2>
|
|
47
|
+
</Grid2>
|
|
48
48
|
</div>
|
|
49
49
|
);
|
|
50
50
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useState, useEffect } from 'react';
|
|
2
2
|
import isDeepEqual from 'fast-deep-equal/react';
|
|
3
|
-
import
|
|
3
|
+
import Grid2 from '@mui/material/Grid2';
|
|
4
4
|
import TextField from '@mui/material/TextField';
|
|
5
5
|
|
|
6
6
|
import { getDateFormatInfo } from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
|
|
@@ -34,7 +34,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
|
|
|
34
34
|
|
|
35
35
|
if (field.config.value === null || field.config.value === '') {
|
|
36
36
|
// Special handling for missing value
|
|
37
|
-
|
|
37
|
+
|
|
38
38
|
switch (fieldTypeLower) {
|
|
39
39
|
case 'caseoperator':
|
|
40
40
|
return <Operator {...field.config} />;
|
|
@@ -123,10 +123,8 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
|
|
|
123
123
|
slotProps={{
|
|
124
124
|
input: {
|
|
125
125
|
readOnly: true,
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
disableUnderline: true
|
|
129
|
-
}
|
|
126
|
+
disableUnderline: true,
|
|
127
|
+
inputProps: { style: { cursor: 'pointer' } }
|
|
130
128
|
}
|
|
131
129
|
}}
|
|
132
130
|
/>
|
|
@@ -229,9 +227,9 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
|
|
|
229
227
|
// display the field when either visibility property doesn't exist or is true(if exists)
|
|
230
228
|
if (field.config.visibility === undefined || field.config.visibility === true) {
|
|
231
229
|
return (
|
|
232
|
-
<
|
|
230
|
+
<Grid2 size={{ xs: 6 }} key={field.config.label}>
|
|
233
231
|
{getFieldValue(field)}
|
|
234
|
-
</
|
|
232
|
+
</Grid2>
|
|
235
233
|
);
|
|
236
234
|
}
|
|
237
235
|
|
|
@@ -265,8 +263,8 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
|
|
|
265
263
|
}
|
|
266
264
|
|
|
267
265
|
return (
|
|
268
|
-
<
|
|
266
|
+
<Grid2 container className='psdk-case-summary-fields'>
|
|
269
267
|
{theFieldsAsGridItems}
|
|
270
|
-
</
|
|
268
|
+
</Grid2>
|
|
271
269
|
);
|
|
272
270
|
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
/* eslint-disable react/no-array-index-key */
|
|
2
1
|
import React, { createElement, isValidElement } from 'react';
|
|
3
|
-
import
|
|
2
|
+
import Grid2 from '@mui/material/Grid2';
|
|
4
3
|
import Typography from '@mui/material/Typography';
|
|
5
4
|
import makeStyles from '@mui/styles/makeStyles';
|
|
6
5
|
|
|
@@ -62,11 +61,11 @@ export default function DetailsFields(props: DetailsFieldsProps) {
|
|
|
62
61
|
const dispValue = field.label;
|
|
63
62
|
|
|
64
63
|
return (
|
|
65
|
-
<
|
|
64
|
+
<Grid2 size={{ xs: 6 }} key={keyVal}>
|
|
66
65
|
<Typography variant='body2' component='span' className={`${classes.fieldLabel}`}>
|
|
67
66
|
{dispValue}
|
|
68
67
|
</Typography>
|
|
69
|
-
</
|
|
68
|
+
</Grid2>
|
|
70
69
|
);
|
|
71
70
|
}
|
|
72
71
|
|
|
@@ -74,7 +73,6 @@ export default function DetailsFields(props: DetailsFieldsProps) {
|
|
|
74
73
|
const { type, value } = inField;
|
|
75
74
|
let formattedVal = value;
|
|
76
75
|
|
|
77
|
-
// eslint-disable-next-line sonarjs/no-small-switch
|
|
78
76
|
switch (type) {
|
|
79
77
|
case 'date':
|
|
80
78
|
formattedVal = format(value, type);
|
|
@@ -97,21 +95,21 @@ export default function DetailsFields(props: DetailsFieldsProps) {
|
|
|
97
95
|
const formattedValue = formatItemValue(field);
|
|
98
96
|
|
|
99
97
|
return (
|
|
100
|
-
<
|
|
98
|
+
<Grid2 size={{ xs: 6 }} key={keyVal}>
|
|
101
99
|
<Typography variant='body2' component='span' className={classes.fieldValue}>
|
|
102
100
|
{formattedValue}
|
|
103
101
|
</Typography>
|
|
104
|
-
</
|
|
102
|
+
</Grid2>
|
|
105
103
|
);
|
|
106
104
|
}
|
|
107
105
|
|
|
108
106
|
function getGridItem(field: any, keyVal: string) {
|
|
109
107
|
return (
|
|
110
|
-
<
|
|
108
|
+
<Grid2 size={{ xs: 12 }} key={keyVal}>
|
|
111
109
|
<Typography variant='body2' component='span' className={classes.fieldValue}>
|
|
112
110
|
{field?.value}
|
|
113
111
|
</Typography>
|
|
114
|
-
</
|
|
112
|
+
</Grid2>
|
|
115
113
|
);
|
|
116
114
|
}
|
|
117
115
|
|
|
@@ -122,16 +120,16 @@ export default function DetailsFields(props: DetailsFieldsProps) {
|
|
|
122
120
|
}
|
|
123
121
|
if (isValidElement(field?.value)) {
|
|
124
122
|
return (
|
|
125
|
-
<
|
|
123
|
+
<Grid2 container spacing={1} style={{ padding: '4px 0px' }} key={index}>
|
|
126
124
|
{getGridItem(field, `${index}-item`)}
|
|
127
|
-
</
|
|
125
|
+
</Grid2>
|
|
128
126
|
);
|
|
129
127
|
}
|
|
130
128
|
return (
|
|
131
|
-
<
|
|
129
|
+
<Grid2 container spacing={1} style={{ padding: '4px 0px' }} key={index}>
|
|
132
130
|
{getGridItemLabel(field, `${index}-label`)}
|
|
133
131
|
{getGridItemValue(field, `${index}-value`)}
|
|
134
|
-
</
|
|
132
|
+
</Grid2>
|
|
135
133
|
);
|
|
136
134
|
});
|
|
137
135
|
return gridItems;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type PropsWithChildren, useState } from 'react';
|
|
2
|
-
import
|
|
2
|
+
import Grid2 from '@mui/material/Grid2';
|
|
3
3
|
import makeStyles from '@mui/styles/makeStyles';
|
|
4
4
|
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
|
|
5
5
|
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
|
|
@@ -45,9 +45,9 @@ export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
|
|
|
45
45
|
const [collapsed, setCollapsed] = useState(false);
|
|
46
46
|
|
|
47
47
|
const descAndChildren = (
|
|
48
|
-
<
|
|
48
|
+
<Grid2 container>
|
|
49
49
|
<div className={classes.fullWidth}>{children}</div>
|
|
50
|
-
</
|
|
50
|
+
</Grid2>
|
|
51
51
|
);
|
|
52
52
|
|
|
53
53
|
const headerClickHandler = () => {
|
|
@@ -55,8 +55,8 @@ export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
|
|
|
55
55
|
};
|
|
56
56
|
|
|
57
57
|
return (
|
|
58
|
-
<
|
|
59
|
-
<
|
|
58
|
+
<Grid2 container spacing={4} justifyContent='space-between'>
|
|
59
|
+
<Grid2 style={{ width: '100%' }}>
|
|
60
60
|
{name && (
|
|
61
61
|
<div className={classes.fieldMargin}>
|
|
62
62
|
{collapsible ? (
|
|
@@ -70,11 +70,10 @@ export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
|
|
|
70
70
|
</div>
|
|
71
71
|
)}
|
|
72
72
|
{instructions && instructions !== 'none' && (
|
|
73
|
-
// eslint-disable-next-line react/no-danger
|
|
74
73
|
<div key='instructions' className={classes.instructionText} dangerouslySetInnerHTML={{ __html: instructions }} />
|
|
75
74
|
)}
|
|
76
75
|
{!collapsed && descAndChildren}
|
|
77
|
-
</
|
|
78
|
-
</
|
|
76
|
+
</Grid2>
|
|
77
|
+
</Grid2>
|
|
79
78
|
);
|
|
80
79
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import Grid2 from '@mui/material/Grid2';
|
|
2
2
|
import Divider from '@mui/material/Divider';
|
|
3
3
|
import Link from '@mui/material/Link';
|
|
4
4
|
|
|
@@ -20,11 +20,11 @@ export default function FieldGroupList(props: FieldGroupListProps) {
|
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
return (
|
|
23
|
-
<
|
|
24
|
-
<
|
|
25
|
-
<
|
|
23
|
+
<Grid2 container spacing={4} justifyContent='space-between'>
|
|
24
|
+
<Grid2 style={{ width: '100%' }}>
|
|
25
|
+
<Grid2 container spacing={1}>
|
|
26
26
|
{props.items.map(item => (
|
|
27
|
-
<
|
|
27
|
+
<Grid2 style={{ width: '100%' }}>
|
|
28
28
|
<b>{item.name}</b>
|
|
29
29
|
{props.onDelete && (
|
|
30
30
|
<button
|
|
@@ -44,15 +44,15 @@ export default function FieldGroupList(props: FieldGroupListProps) {
|
|
|
44
44
|
<br />
|
|
45
45
|
{props.onAdd && <Divider />}
|
|
46
46
|
<br />
|
|
47
|
-
</
|
|
47
|
+
</Grid2>
|
|
48
48
|
))}
|
|
49
49
|
{props.onAdd && (
|
|
50
50
|
<Link onClick={props.onAdd} style={{ cursor: 'pointer' }} underline='hover'>
|
|
51
51
|
+Add
|
|
52
52
|
</Link>
|
|
53
53
|
)}
|
|
54
|
-
</
|
|
55
|
-
</
|
|
56
|
-
</
|
|
54
|
+
</Grid2>
|
|
55
|
+
</Grid2>
|
|
56
|
+
</Grid2>
|
|
57
57
|
);
|
|
58
58
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import Grid2 from '@mui/material/Grid2';
|
|
2
2
|
import Typography from '@mui/material/Typography';
|
|
3
3
|
import makeStyles from '@mui/styles/makeStyles';
|
|
4
4
|
|
|
@@ -51,11 +51,11 @@ export default function FieldValueList(props: FieldValueListProps) {
|
|
|
51
51
|
|
|
52
52
|
function getGridItemLabel() {
|
|
53
53
|
return (
|
|
54
|
-
<
|
|
54
|
+
<Grid2 size={{ xs: variant === 'stacked' ? 12 : 4 }} className={variant === 'stacked' ? classes.noPaddingBottom : ''}>
|
|
55
55
|
<Typography variant='body2' component='span' className={`${classes.fieldLabel}`}>
|
|
56
56
|
{name}
|
|
57
57
|
</Typography>
|
|
58
|
-
</
|
|
58
|
+
</Grid2>
|
|
59
59
|
);
|
|
60
60
|
}
|
|
61
61
|
|
|
@@ -63,23 +63,22 @@ export default function FieldValueList(props: FieldValueListProps) {
|
|
|
63
63
|
const formattedValue = formatItemValue(value);
|
|
64
64
|
|
|
65
65
|
return (
|
|
66
|
-
<
|
|
66
|
+
<Grid2 size={{ xs: variant === 'stacked' || !name ? 12 : 8 }} className={variant === 'stacked' ? classes.noPaddingTop : ''}>
|
|
67
67
|
{isHtml ? (
|
|
68
|
-
// eslint-disable-next-line react/no-danger
|
|
69
68
|
<div dangerouslySetInnerHTML={{ __html: formattedValue }} />
|
|
70
69
|
) : (
|
|
71
70
|
<Typography variant={variant === 'stacked' ? 'h6' : 'body2'} component='span' className={classes.fieldValue}>
|
|
72
71
|
{formattedValue}
|
|
73
72
|
</Typography>
|
|
74
73
|
)}
|
|
75
|
-
</
|
|
74
|
+
</Grid2>
|
|
76
75
|
);
|
|
77
76
|
}
|
|
78
77
|
|
|
79
78
|
return (
|
|
80
|
-
<
|
|
79
|
+
<Grid2 container spacing={4} justifyContent='space-between'>
|
|
81
80
|
{name ? getGridItemLabel() : null}
|
|
82
81
|
{getGridItemValue()}
|
|
83
|
-
</
|
|
82
|
+
</Grid2>
|
|
84
83
|
);
|
|
85
84
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { useState } from 'react';
|
|
2
2
|
import TextField from '@mui/material/TextField';
|
|
3
3
|
import Popover from '@mui/material/Popover';
|
|
4
|
-
import
|
|
4
|
+
import Grid2 from '@mui/material/Grid2';
|
|
5
5
|
import Typography from '@mui/material/Typography';
|
|
6
6
|
import makeStyles from '@mui/styles/makeStyles';
|
|
7
7
|
|
|
@@ -112,7 +112,6 @@ export default function Operator(props: OperatorProps) {
|
|
|
112
112
|
}
|
|
113
113
|
];
|
|
114
114
|
} else {
|
|
115
|
-
// eslint-disable-next-line no-console
|
|
116
115
|
console.log(
|
|
117
116
|
`Operator: PCore.getUserApi().getOperatorDetails(${caseOpId}); returned empty res.data.pyOperatorInfo.pyUserName - adding default`
|
|
118
117
|
);
|
|
@@ -162,25 +161,25 @@ export default function Operator(props: OperatorProps) {
|
|
|
162
161
|
|
|
163
162
|
// There are fields, so build the grid.
|
|
164
163
|
return (
|
|
165
|
-
<
|
|
166
|
-
<
|
|
164
|
+
<Grid2 container className={classes.popover} spacing={1}>
|
|
165
|
+
<Grid2 size={{ xs: 12 }}>
|
|
167
166
|
<Typography variant='h6'>{caseOpName}</Typography>
|
|
168
|
-
</
|
|
167
|
+
</Grid2>
|
|
169
168
|
{popoverFields.map(field => {
|
|
170
169
|
return (
|
|
171
170
|
<React.Fragment key={field.id}>
|
|
172
|
-
<
|
|
173
|
-
<
|
|
171
|
+
<Grid2 container size={{ xs: 12 }} spacing={1}>
|
|
172
|
+
<Grid2 size={{ xs: 6 }}>
|
|
174
173
|
<Typography variant='caption'>{field.name}</Typography>
|
|
175
|
-
</
|
|
176
|
-
<
|
|
174
|
+
</Grid2>
|
|
175
|
+
<Grid2 size={{ xs: 6 }}>
|
|
177
176
|
<Typography variant='subtitle2'>{field.value}</Typography>
|
|
178
|
-
</
|
|
179
|
-
</
|
|
177
|
+
</Grid2>
|
|
178
|
+
</Grid2>
|
|
180
179
|
</React.Fragment>
|
|
181
180
|
);
|
|
182
181
|
})}
|
|
183
|
-
</
|
|
182
|
+
</Grid2>
|
|
184
183
|
);
|
|
185
184
|
}
|
|
186
185
|
|
|
@@ -4,8 +4,9 @@ import { FormControl, FormHelperText, InputLabel } from '@mui/material';
|
|
|
4
4
|
import makeStyles from '@mui/styles/makeStyles';
|
|
5
5
|
|
|
6
6
|
import { useAfterInitialEffect, useConsolidatedRef, useUID } from '@pega/react-sdk-components/lib/hooks';
|
|
7
|
+
import { theme } from '@pega/react-sdk-components/lib/components/designSystemExtensi/theme';
|
|
7
8
|
|
|
8
|
-
const useStyles = makeStyles(
|
|
9
|
+
const useStyles = makeStyles(() => ({
|
|
9
10
|
fieldLabel: {
|
|
10
11
|
position: 'relative',
|
|
11
12
|
transform: 'translate(0, 0px) scale(1)',
|
|
@@ -74,7 +75,7 @@ const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorP
|
|
|
74
75
|
|
|
75
76
|
if (readOnly) {
|
|
76
77
|
const value = defaultValue || '--';
|
|
77
|
-
|
|
78
|
+
|
|
78
79
|
richTextComponent = <div key={id} id={id} className='readonly-richtext-editor' dangerouslySetInnerHTML={{ __html: value }} />;
|
|
79
80
|
} else {
|
|
80
81
|
richTextComponent = (
|
|
@@ -87,6 +88,30 @@ const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorP
|
|
|
87
88
|
initialValue={defaultValue}
|
|
88
89
|
disabled={disabled}
|
|
89
90
|
init={{
|
|
91
|
+
skin: 'oxide-dark', // or 'oxide' for light theme
|
|
92
|
+
// ...other TinyMCE config...
|
|
93
|
+
content_style: `
|
|
94
|
+
body {
|
|
95
|
+
font-family: ${theme.typography.fontFamily};
|
|
96
|
+
font-size: ${theme.typography.fontSize}px;
|
|
97
|
+
color: ${theme.palette.text.primary};
|
|
98
|
+
background: ${theme.palette.background.paper};
|
|
99
|
+
}
|
|
100
|
+
a { color: ${theme.palette.primary.main}; }
|
|
101
|
+
h1, h2, h3, h4, h5, h6 { color: ${theme.palette.text.primary}; font-family: ${theme.typography.fontFamily}; }
|
|
102
|
+
blockquote { color: ${theme.palette.text.secondary}; border-left: 4px solid ${theme.palette.primary.light}; padding-left: 8px; }
|
|
103
|
+
ul, ol { color: ${theme.palette.text.primary}; }
|
|
104
|
+
input, textarea, select {
|
|
105
|
+
background: ${theme.palette.background.paper};
|
|
106
|
+
color: ${theme.palette.text.primary};
|
|
107
|
+
border: 1px solid ${theme.palette.divider};
|
|
108
|
+
border-radius: 4px;
|
|
109
|
+
padding: 6px 10px;
|
|
110
|
+
font-size: 1em;
|
|
111
|
+
font-family: inherit;
|
|
112
|
+
}
|
|
113
|
+
/* Add more styles as needed */
|
|
114
|
+
`,
|
|
90
115
|
placeholder,
|
|
91
116
|
menubar: false,
|
|
92
117
|
statusbar: false,
|
|
@@ -95,7 +120,7 @@ const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorP
|
|
|
95
120
|
autoresize_bottom_margin: 0,
|
|
96
121
|
toolbar: disabled ? false : 'blocks | bold italic strikethrough | bullist numlist outdent indent | link image',
|
|
97
122
|
toolbar_location: 'bottom',
|
|
98
|
-
content_style: 'body { font-family:Helvetica, Arial,sans-serif; font-size:14px }',
|
|
123
|
+
// content_style: 'body { font-family:Helvetica, Arial,sans-serif; font-size:14px }',
|
|
99
124
|
branding: false,
|
|
100
125
|
paste_data_images: true,
|
|
101
126
|
file_picker_types: 'image',
|
|
@@ -7,15 +7,15 @@
|
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
.quick-link-list {
|
|
10
|
-
background-color:
|
|
11
|
-
color:
|
|
10
|
+
background-color: var(--link-button-color);
|
|
11
|
+
color: var(--app-text-color);
|
|
12
12
|
border-radius: 8px;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
.quick-link-button {
|
|
16
16
|
text-transform: capitalize !important;
|
|
17
17
|
font-size: 16px !important;
|
|
18
|
-
color:
|
|
18
|
+
color: var(--app-text-color) !important;
|
|
19
19
|
padding: calc(0.5rem * 2) !important;
|
|
20
20
|
height: 6rem;
|
|
21
21
|
width: 100%;
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
width: 1em;
|
|
27
27
|
height: 1em;
|
|
28
28
|
flex-shrink: 0;
|
|
29
|
-
filter:
|
|
29
|
+
filter: var(--svg-color);
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
.quick-link-button-span {
|
|
@@ -14,7 +14,7 @@ export default function WssQuickCreate(props: WssQuickCreateProps) {
|
|
|
14
14
|
|
|
15
15
|
return (
|
|
16
16
|
<div>
|
|
17
|
-
<h1 id='quick-links-heading' className='quick-
|
|
17
|
+
<h1 id='quick-links-heading' className='quick-links-heading'>
|
|
18
18
|
{heading}
|
|
19
19
|
</h1>
|
|
20
20
|
<ul id='quick-links' className='quick-link-ul-list'>
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
align-items: center;
|
|
6
6
|
height: 100%;
|
|
7
7
|
width: 100%;
|
|
8
|
-
background-color:
|
|
8
|
+
background-color: var(--modal-background-color);
|
|
9
9
|
position: fixed;
|
|
10
10
|
z-index: 9999;
|
|
11
11
|
top: 0px;
|
|
@@ -16,9 +16,9 @@
|
|
|
16
16
|
display: table;
|
|
17
17
|
margin: auto;
|
|
18
18
|
min-width: 550px;
|
|
19
|
-
background-color:
|
|
20
|
-
border: 1px solid
|
|
19
|
+
background-color: var(--modal-top-color);
|
|
20
|
+
border: 1px solid var(--modal-border-color);
|
|
21
21
|
border-radius: 10px;
|
|
22
22
|
padding: 20px;
|
|
23
|
-
box-shadow: 0 0 10px 3px
|
|
23
|
+
box-shadow: 0 0 10px 3px var(--modal-box-shadow-color);
|
|
24
24
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useState } from 'react';
|
|
2
|
-
import { Button,
|
|
2
|
+
import { Button, Grid2, IconButton, Snackbar } from '@mui/material';
|
|
3
3
|
import CloseIcon from '@mui/icons-material/Close';
|
|
4
4
|
|
|
5
5
|
import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
|
|
@@ -125,10 +125,10 @@ export default function CancelAlert(props: CancelAlertProps) {
|
|
|
125
125
|
<p>{localizedVal(content, localeCategory)}</p>
|
|
126
126
|
</div>
|
|
127
127
|
<div className='action-controls'>
|
|
128
|
-
<
|
|
129
|
-
<
|
|
130
|
-
<
|
|
131
|
-
</
|
|
128
|
+
<Grid2 container spacing={4} justifyContent='space-between'>
|
|
129
|
+
<Grid2>{leftButton}</Grid2>
|
|
130
|
+
<Grid2>{rightButton}</Grid2>
|
|
131
|
+
</Grid2>
|
|
132
132
|
</div>
|
|
133
133
|
</div>
|
|
134
134
|
</div>
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/* eslint-disable react/no-array-index-key */
|
|
2
1
|
import { useState, useEffect } from 'react';
|
|
3
2
|
import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel } from '@mui/material';
|
|
4
3
|
import makeStyles from '@mui/styles/makeStyles';
|
|
@@ -21,18 +20,33 @@ interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
|
|
|
21
20
|
primaryField: string;
|
|
22
21
|
readonlyContextList: any;
|
|
23
22
|
referenceList: string;
|
|
23
|
+
variant?: string;
|
|
24
|
+
hideFieldLabels: boolean;
|
|
25
|
+
additionalProps: any;
|
|
26
|
+
imagePosition: string;
|
|
27
|
+
imageSize: string;
|
|
28
|
+
showImageDescription: string;
|
|
29
|
+
renderMode: string;
|
|
30
|
+
image: string;
|
|
24
31
|
}
|
|
25
32
|
|
|
26
33
|
const useStyles = makeStyles(() => ({
|
|
27
34
|
checkbox: {
|
|
28
35
|
display: 'flex',
|
|
29
36
|
flexDirection: 'column'
|
|
37
|
+
},
|
|
38
|
+
selectableCard: {
|
|
39
|
+
display: 'grid',
|
|
40
|
+
gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 40ch), 1fr))',
|
|
41
|
+
gridAutoRows: '1fr',
|
|
42
|
+
gap: '0.5rem'
|
|
30
43
|
}
|
|
31
44
|
}));
|
|
32
45
|
|
|
33
46
|
export default function CheckboxComponent(props: CheckboxProps) {
|
|
34
47
|
// Get emitted components from map (so we can get any override that may exist)
|
|
35
48
|
const FieldValueList = getComponentFromMap('FieldValueList');
|
|
49
|
+
const SelectableCard = getComponentFromMap('SelectableCard');
|
|
36
50
|
|
|
37
51
|
const {
|
|
38
52
|
getPConnect,
|
|
@@ -56,8 +70,20 @@ export default function CheckboxComponent(props: CheckboxProps) {
|
|
|
56
70
|
selectionList,
|
|
57
71
|
primaryField,
|
|
58
72
|
referenceList,
|
|
59
|
-
readonlyContextList: selectedvalues
|
|
73
|
+
readonlyContextList: selectedvalues,
|
|
74
|
+
variant,
|
|
75
|
+
hideFieldLabels,
|
|
76
|
+
additionalProps,
|
|
77
|
+
imagePosition,
|
|
78
|
+
imageSize,
|
|
79
|
+
showImageDescription,
|
|
80
|
+
renderMode,
|
|
81
|
+
image
|
|
60
82
|
} = props;
|
|
83
|
+
const readOnlyMode = renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY' || readOnly;
|
|
84
|
+
|
|
85
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
86
|
+
const [theSelectedButton, setSelectedButton] = useState(value);
|
|
61
87
|
const classes = useStyles();
|
|
62
88
|
const helperTextToDisplay = validatemessage || helperText;
|
|
63
89
|
const thePConn = getPConnect();
|
|
@@ -71,12 +97,17 @@ export default function CheckboxComponent(props: CheckboxProps) {
|
|
|
71
97
|
}, [value]);
|
|
72
98
|
|
|
73
99
|
useEffect(() => {
|
|
74
|
-
if (referenceList?.length > 0) {
|
|
100
|
+
if (referenceList?.length > 0 && !readOnlyMode) {
|
|
75
101
|
thePConn.setReferenceList(selectionList);
|
|
76
102
|
updateNewInstuctions(thePConn, selectionList);
|
|
77
103
|
}
|
|
78
104
|
}, [thePConn]);
|
|
79
105
|
|
|
106
|
+
useEffect(() => {
|
|
107
|
+
// This update theSelectedButton which will update the UI to show the selected button correctly
|
|
108
|
+
setSelectedButton(value);
|
|
109
|
+
}, [value]);
|
|
110
|
+
|
|
80
111
|
if (displayMode === 'DISPLAY_ONLY') {
|
|
81
112
|
return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} />;
|
|
82
113
|
}
|
|
@@ -93,6 +124,68 @@ export default function CheckboxComponent(props: CheckboxProps) {
|
|
|
93
124
|
thePConn.getValidationApi().validate(event.target.checked);
|
|
94
125
|
};
|
|
95
126
|
|
|
127
|
+
const handleCheckboxChange = (event, item) => {
|
|
128
|
+
if (event.target.checked) {
|
|
129
|
+
insertInstruction(thePConn, selectionList, selectionKey, primaryField, item);
|
|
130
|
+
} else {
|
|
131
|
+
deleteInstruction(thePConn, selectionList, selectionKey, item);
|
|
132
|
+
}
|
|
133
|
+
thePConn.clearErrorMessages({ property: selectionList });
|
|
134
|
+
};
|
|
135
|
+
|
|
136
|
+
const actions = thePConn.getActionsApi();
|
|
137
|
+
|
|
138
|
+
const commonProps = {
|
|
139
|
+
...additionalProps,
|
|
140
|
+
className: 'standard',
|
|
141
|
+
disabled,
|
|
142
|
+
readOnly,
|
|
143
|
+
onClick: (actions as any).onClick
|
|
144
|
+
};
|
|
145
|
+
|
|
146
|
+
if (variant === 'card') {
|
|
147
|
+
return (
|
|
148
|
+
<div>
|
|
149
|
+
<h4 style={{ marginTop: 0, marginBottom: 0 }}>{label}</h4>
|
|
150
|
+
<div className={classes.selectableCard}>
|
|
151
|
+
<SelectableCard
|
|
152
|
+
{...commonProps}
|
|
153
|
+
testId={testId}
|
|
154
|
+
displayMode={displayMode}
|
|
155
|
+
dataSource={datasource}
|
|
156
|
+
getPConnect={getPConnect}
|
|
157
|
+
readOnly={renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY' || readOnly}
|
|
158
|
+
onChange={e => {
|
|
159
|
+
e.stopPropagation();
|
|
160
|
+
const recordKey = selectionKey?.split('.').pop();
|
|
161
|
+
const selectedItem = datasource?.source?.find(item => item[recordKey as any] === e.target.id) ?? {};
|
|
162
|
+
handleCheckboxChange(e, {
|
|
163
|
+
id: selectedItem[recordKey as any],
|
|
164
|
+
primary: selectedItem[recordKey as any]
|
|
165
|
+
});
|
|
166
|
+
}}
|
|
167
|
+
onBlur={() => {
|
|
168
|
+
thePConn.getValidationApi().validate(selectedvalues, selectionList);
|
|
169
|
+
}}
|
|
170
|
+
hideFieldLabels={hideFieldLabels}
|
|
171
|
+
recordKey={selectionKey?.split('.').pop()}
|
|
172
|
+
cardLabel={primaryField.split('.').pop()}
|
|
173
|
+
image={{
|
|
174
|
+
imagePosition,
|
|
175
|
+
imageSize,
|
|
176
|
+
showImageDescription,
|
|
177
|
+
imageField: image?.split('.').pop(),
|
|
178
|
+
imageDescription: (thePConn?.getRawMetadata()?.config as any).imageDescription?.split('.').pop()
|
|
179
|
+
}}
|
|
180
|
+
readOnlyList={selectedvalues}
|
|
181
|
+
type='checkbox'
|
|
182
|
+
showNoValue={(renderMode === 'ReadOnly' || readOnly || displayMode === 'DISPLAY_ONLY') && selectedvalues.length === 0}
|
|
183
|
+
/>
|
|
184
|
+
</div>
|
|
185
|
+
</div>
|
|
186
|
+
);
|
|
187
|
+
}
|
|
188
|
+
|
|
96
189
|
const handleChangeMultiMode = (event, element) => {
|
|
97
190
|
if (event.target.checked) {
|
|
98
191
|
insertInstruction(thePConn, selectionList, selectionKey, primaryField, {
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
// eslint-disable-next-line import/no-named-default
|
|
2
1
|
import { default as CurrencyAlias } from '@pega/react-sdk-components/lib/components/helpers/formatters/Currency';
|
|
3
|
-
|
|
2
|
+
|
|
4
3
|
import { default as CurrencyMapAlias } from '@pega/react-sdk-components/lib/components/helpers/formatters/CurrencyMap';
|
|
5
4
|
|
|
6
5
|
export const getCurrencyOptions = (inISOCode: string) => {
|