@pega/dx-component-builder-sdk 0.23.5 → 0.23.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 +1 -1
- package/src/tasks/create/templates/Constellation/field/Text/index.jsx.mustache +1 -1
- package/src/tasks/create/templates/Constellation/field/Text-Input/index.jsx.mustache +1 -1
- package/src/tasks/create/templates/SDK-React/field/Boolean/index.tsx.mustache +30 -29
- package/src/tasks/create/templates/SDK-React/field/Date/index.tsx.mustache +6 -2
- package/src/tasks/create/templates/SDK-React/field/DateTime/index.tsx.mustache +6 -2
- package/src/tasks/create/templates/SDK-React/field/Decimal/index.tsx.mustache +4 -1
- package/src/tasks/create/templates/SDK-React/field/Decimal-Currency/index.tsx.mustache +4 -1
- package/src/tasks/create/templates/SDK-React/field/Decimal-Percentage/index.tsx.mustache +5 -2
- package/src/tasks/create/templates/SDK-React/field/Integer/index.tsx.mustache +6 -2
- package/src/tasks/create/templates/SDK-React/field/Picklist/index.tsx.mustache +4 -1
- package/src/tasks/create/templates/SDK-React/field/Text/index.tsx.mustache +4 -1
- package/src/tasks/create/templates/SDK-React/field/Text-Email/index.tsx.mustache +6 -2
- package/src/tasks/create/templates/SDK-React/field/Text-Input/index.tsx.mustache +4 -1
- package/src/tasks/create/templates/SDK-React/field/Text-Paragraph/index.tsx.mustache +4 -1
- package/src/tasks/create/templates/SDK-React/field/Text-Phone/index.tsx.mustache +4 -1
- package/src/tasks/create/templates/SDK-React/field/Text-URL/index.tsx.mustache +6 -2
- package/src/tasks/create/templates/SDK-React/field/TimeOfDay/index.tsx.mustache +6 -2
- package/src/tasks/create/templates/SDK-React/template/DETAILS/index.tsx.mustache +4 -2
- package/src/tasks/create/templates/SDK-React/template/DETAILS-region/index.tsx.mustache +4 -2
- package/src/tasks/create/templates/SDK-React/template/PAGE/OneColumn.tsx.mustache +7 -6
- package/tests/assets/components/SDK-React/create/custom-constellation/field/Pega_DXIL_MyTestText/index.jsx +1 -1
- package/tests/assets/components/SDK-React/create/custom-sdk/field/Pega_DXIL_MyTestText/index.tsx +4 -1
- package/tests/assets/components/SDK-React/create/override-sdk/designSystemExtension/AlertBanner/AlertBanner.tsx +47 -0
- package/tests/assets/components/SDK-React/create/override-sdk/designSystemExtension/AlertBanner/index.tsx +1 -0
- package/tests/assets/components/SDK-React/create/override-sdk/designSystemExtension/CaseSummaryFields/CaseSummaryFields.tsx +5 -3
- package/tests/assets/components/SDK-React/create/override-sdk/designSystemExtension/FieldValueList/FieldValueList.tsx +1 -1
- package/tests/assets/components/SDK-React/create/override-sdk/designSystemExtension/RichTextEditor/RichTextEditor.tsx +121 -0
- package/tests/assets/components/SDK-React/create/override-sdk/designSystemExtension/RichTextEditor/index.tsx +1 -0
- package/tests/assets/components/SDK-React/create/override-sdk/field/AutoComplete/AutoComplete.tsx +29 -27
- package/tests/assets/components/SDK-React/create/override-sdk/field/Checkbox/Checkbox.tsx +10 -6
- package/tests/assets/components/SDK-React/create/override-sdk/field/Currency/Currency.tsx +16 -15
- package/tests/assets/components/SDK-React/create/override-sdk/field/Date/Date.tsx +16 -15
- package/tests/assets/components/SDK-React/create/override-sdk/field/DateTime/DateTime.tsx +19 -14
- package/tests/assets/components/SDK-React/create/override-sdk/field/Decimal/Decimal.tsx +18 -16
- package/tests/assets/components/SDK-React/create/override-sdk/field/Dropdown/Dropdown.tsx +17 -25
- package/tests/assets/components/SDK-React/create/override-sdk/field/Email/Email.tsx +11 -11
- package/tests/assets/components/SDK-React/create/override-sdk/field/Integer/Integer.tsx +9 -7
- package/tests/assets/components/SDK-React/create/override-sdk/field/Percentage/Percentage.tsx +9 -9
- package/tests/assets/components/SDK-React/create/override-sdk/field/Phone/Phone.tsx +13 -12
- package/tests/assets/components/SDK-React/create/override-sdk/field/RadioButtons/RadioButtons.tsx +16 -35
- package/tests/assets/components/SDK-React/create/override-sdk/field/RichText/RichText.tsx +95 -0
- package/tests/assets/components/SDK-React/create/override-sdk/field/RichText/index.tsx +1 -0
- package/tests/assets/components/SDK-React/create/override-sdk/field/ScalarList/ScalarList.tsx +73 -0
- package/tests/assets/components/SDK-React/create/override-sdk/field/ScalarList/config-ext.json +8 -0
- package/tests/assets/components/SDK-React/create/override-sdk/field/ScalarList/index.tsx +1 -0
- package/tests/assets/components/SDK-React/create/override-sdk/field/SemanticLink/SemanticLink.tsx +19 -19
- package/tests/assets/components/SDK-React/create/override-sdk/field/TextArea/TextArea.tsx +8 -6
- package/tests/assets/components/SDK-React/create/override-sdk/field/TextInput/TextInput.tsx +8 -7
- package/tests/assets/components/SDK-React/create/override-sdk/field/Time/Time.tsx +16 -28
- package/tests/assets/components/SDK-React/create/override-sdk/field/URL/URL.tsx +10 -8
- package/tests/assets/components/SDK-React/create/override-sdk/field/UserReference/UserReference.tsx +29 -29
- package/tests/assets/components/SDK-React/create/override-sdk/infra/Assignment/Assignment.tsx +5 -2
- package/tests/assets/components/SDK-React/create/override-sdk/infra/AssignmentCard/AssignmentCard.tsx +4 -2
- package/tests/assets/components/SDK-React/create/override-sdk/infra/DashboardFilter/DashboardFilter.tsx +13 -13
- package/tests/assets/components/SDK-React/create/override-sdk/infra/DashboardFilter/filterUtils.tsx +2 -1
- package/tests/assets/components/SDK-React/create/override-sdk/infra/DeferLoad/DeferLoad.tsx +172 -0
- package/tests/assets/components/SDK-React/create/override-sdk/infra/DeferLoad/index.tsx +1 -0
- package/tests/assets/components/SDK-React/create/override-sdk/infra/MultiStep/MultiStep.tsx +4 -3
- package/tests/assets/components/SDK-React/create/override-sdk/infra/NavBar/NavBar.tsx +2 -1
- package/tests/assets/components/SDK-React/create/override-sdk/infra/VerticalTabs/VerticalTabs.tsx +4 -1
- package/tests/assets/components/SDK-React/create/override-sdk/template/AppShell/AppShell.tsx +6 -4
- package/tests/assets/components/SDK-React/create/override-sdk/template/BannerPage/BannerPage.tsx +4 -1
- package/tests/assets/components/SDK-React/create/override-sdk/template/CaseSummary/CaseSummary.tsx +4 -1
- package/tests/assets/components/SDK-React/create/override-sdk/template/CaseView/CaseView.tsx +10 -13
- package/tests/assets/components/SDK-React/create/override-sdk/template/Confirmation/Confirmation.tsx +23 -44
- package/tests/assets/components/SDK-React/create/override-sdk/template/DataReference/DataReference.tsx +43 -64
- package/tests/assets/components/SDK-React/create/override-sdk/template/Details/Details.tsx +8 -4
- package/tests/assets/components/SDK-React/create/override-sdk/template/DetailsThreeColumn/DetailsThreeColumn.tsx +8 -4
- package/tests/assets/components/SDK-React/create/override-sdk/template/DetailsTwoColumn/DetailsTwoColumn.tsx +8 -4
- package/tests/assets/components/SDK-React/create/override-sdk/template/FieldGroupTemplate/FieldGroupTemplate.tsx +6 -2
- package/tests/assets/components/SDK-React/create/override-sdk/template/InlineDashboardPage/InlineDashboardPage.tsx +5 -1
- package/tests/assets/components/SDK-React/create/override-sdk/template/ListPage/ListPage.tsx +6 -3
- package/tests/assets/components/SDK-React/create/override-sdk/template/ListView/ListView.tsx +89 -93
- package/tests/assets/components/SDK-React/create/override-sdk/template/ListView/utils.ts +170 -23
- package/tests/assets/components/SDK-React/create/override-sdk/template/MultiReferenceReadOnly/MultiReferenceReadOnly.tsx +9 -9
- package/tests/assets/components/SDK-React/create/override-sdk/template/NarrowWideDetails/NarrowWideDetails.tsx +8 -4
- package/tests/assets/components/SDK-React/create/override-sdk/template/NarrowWidePage/NarrowWidePage.tsx +4 -1
- package/tests/assets/components/SDK-React/create/override-sdk/template/OneColumnPage/OneColumnPage.tsx +3 -1
- package/tests/assets/components/SDK-React/create/override-sdk/template/PromotedFilters/PromotedFilters.tsx +4 -1
- package/tests/assets/components/SDK-React/create/override-sdk/template/SimpleTable/SimpleTable.tsx +88 -5
- package/tests/assets/components/SDK-React/create/override-sdk/template/SimpleTableSelect/SimpleTableSelect.tsx +6 -4
- package/tests/assets/components/SDK-React/create/override-sdk/template/SingleReferenceReadOnly/SingleReferenceReadOnly.tsx +22 -18
- package/tests/assets/components/SDK-React/create/override-sdk/template/TwoColumnPage/TwoColumnPage.tsx +3 -2
- package/tests/assets/components/SDK-React/create/override-sdk/template/WideNarrowDetails/WideNarrowDetails.tsx +8 -3
- package/tests/assets/components/SDK-React/create/override-sdk/template/WideNarrowPage/WideNarrowPage.tsx +4 -3
- package/tests/assets/components/SDK-React/create/override-sdk/widget/Attachment/Attachment.tsx +5 -1
- package/tests/assets/components/SDK-React/create/override-sdk/widget/FileUtility/FileUtility.tsx +8 -2
- package/tests/assets/components/SDK-React/create/override-sdk/widget/QuickCreate/QuickCreate.tsx +4 -1
- package/tests/assets/components/SDK-React/create/override-sdk/widget/SummaryList/SummaryList.tsx +4 -1
- package/tests/assets/components/SDK-React/create/override-sdk/widget/ToDo/ToDo.tsx +53 -82
- package/tests/assets/components/SDK-React/createAll/custom-constellation/field/Pega_DXIL_MyText/index.jsx +1 -1
- package/tests/assets/components/SDK-React/createAll/custom-constellation/field/Pega_DXIL_MyTextInput/index.jsx +1 -1
- package/tests/assets/components/SDK-React/createAll/custom-sdk/field/Pega_DXIL_MyBoolean/index.tsx +30 -29
- package/tests/assets/components/SDK-React/createAll/custom-sdk/field/Pega_DXIL_MyCurrency/index.tsx +4 -1
- package/tests/assets/components/SDK-React/createAll/custom-sdk/field/Pega_DXIL_MyDate/index.tsx +6 -2
- package/tests/assets/components/SDK-React/createAll/custom-sdk/field/Pega_DXIL_MyDateTime/index.tsx +6 -2
- package/tests/assets/components/SDK-React/createAll/custom-sdk/field/Pega_DXIL_MyDecimal/index.tsx +4 -1
- package/tests/assets/components/SDK-React/createAll/custom-sdk/field/Pega_DXIL_MyEmail/index.tsx +6 -2
- package/tests/assets/components/SDK-React/createAll/custom-sdk/field/Pega_DXIL_MyInteger/index.tsx +6 -2
- package/tests/assets/components/SDK-React/createAll/custom-sdk/field/Pega_DXIL_MyParagraph/index.tsx +4 -1
- package/tests/assets/components/SDK-React/createAll/custom-sdk/field/Pega_DXIL_MyPercentage/index.tsx +5 -2
- package/tests/assets/components/SDK-React/createAll/custom-sdk/field/Pega_DXIL_MyPhone/index.tsx +4 -1
- package/tests/assets/components/SDK-React/createAll/custom-sdk/field/Pega_DXIL_MyPicklist/index.tsx +4 -1
- package/tests/assets/components/SDK-React/createAll/custom-sdk/field/Pega_DXIL_MyText/index.tsx +4 -1
- package/tests/assets/components/SDK-React/createAll/custom-sdk/field/Pega_DXIL_MyTextInput/index.tsx +4 -1
- package/tests/assets/components/SDK-React/createAll/custom-sdk/field/Pega_DXIL_MyTimeOfDay/index.tsx +6 -2
- package/tests/assets/components/SDK-React/createAll/custom-sdk/field/Pega_DXIL_MyURL/index.tsx +6 -2
- package/tests/assets/components/SDK-React/createAll/custom-sdk/template/Pega_DXIL_MyDetails/index.tsx +4 -2
- package/tests/assets/components/SDK-React/createAll/custom-sdk/template/Pega_DXIL_MyPage/OneColumn.tsx +7 -6
- package/tests/assets/components/SDK-React/createAll/custom-sdk/template/Pega_DXIL_MyTwoColumnDetails/index.tsx +4 -2
- package/tests/assets/components/SDK-React/createAll/override-sdk/designSystemExtension/AlertBanner/AlertBanner.tsx +47 -0
- package/tests/assets/components/SDK-React/createAll/override-sdk/designSystemExtension/AlertBanner/index.tsx +1 -0
- package/tests/assets/components/SDK-React/createAll/override-sdk/designSystemExtension/CaseSummaryFields/CaseSummaryFields.tsx +5 -3
- package/tests/assets/components/SDK-React/createAll/override-sdk/designSystemExtension/RichTextEditor/RichTextEditor.tsx +121 -0
- package/tests/assets/components/SDK-React/createAll/override-sdk/designSystemExtension/RichTextEditor/index.tsx +1 -0
- package/tests/assets/components/SDK-React/createAll/override-sdk/field/AutoComplete/AutoComplete.tsx +29 -27
- package/tests/assets/components/SDK-React/createAll/override-sdk/field/Checkbox/Checkbox.tsx +10 -6
- package/tests/assets/components/SDK-React/createAll/override-sdk/field/Currency/Currency.tsx +16 -15
- package/tests/assets/components/SDK-React/createAll/override-sdk/field/Date/Date.tsx +16 -15
- package/tests/assets/components/SDK-React/createAll/override-sdk/field/DateTime/DateTime.tsx +19 -14
- package/tests/assets/components/SDK-React/createAll/override-sdk/field/Decimal/Decimal.tsx +18 -16
- package/tests/assets/components/SDK-React/createAll/override-sdk/field/Dropdown/Dropdown.tsx +17 -25
- package/tests/assets/components/SDK-React/createAll/override-sdk/field/Email/Email.tsx +11 -11
- package/tests/assets/components/SDK-React/createAll/override-sdk/field/Integer/Integer.tsx +9 -7
- package/tests/assets/components/SDK-React/createAll/override-sdk/field/Percentage/Percentage.tsx +9 -9
- package/tests/assets/components/SDK-React/createAll/override-sdk/field/Phone/Phone.tsx +13 -12
- package/tests/assets/components/SDK-React/createAll/override-sdk/field/RadioButtons/RadioButtons.tsx +16 -35
- package/tests/assets/components/SDK-React/createAll/override-sdk/field/RichText/RichText.tsx +95 -0
- package/tests/assets/components/SDK-React/createAll/override-sdk/field/RichText/index.tsx +1 -0
- package/tests/assets/components/SDK-React/createAll/override-sdk/field/ScalarList/ScalarList.tsx +25 -18
- package/tests/assets/components/SDK-React/createAll/override-sdk/field/SemanticLink/SemanticLink.tsx +19 -19
- package/tests/assets/components/SDK-React/createAll/override-sdk/field/TextArea/TextArea.tsx +8 -6
- package/tests/assets/components/SDK-React/createAll/override-sdk/field/TextInput/TextInput.tsx +8 -7
- package/tests/assets/components/SDK-React/createAll/override-sdk/field/Time/Time.tsx +16 -28
- package/tests/assets/components/SDK-React/createAll/override-sdk/field/URL/URL.tsx +10 -8
- package/tests/assets/components/SDK-React/createAll/override-sdk/field/UserReference/UserReference.tsx +29 -29
- package/tests/assets/components/SDK-React/createAll/override-sdk/infra/Assignment/Assignment.tsx +5 -2
- package/tests/assets/components/SDK-React/createAll/override-sdk/infra/AssignmentCard/AssignmentCard.tsx +4 -2
- package/tests/assets/components/SDK-React/createAll/override-sdk/infra/DeferLoad/DeferLoad.tsx +172 -0
- package/tests/assets/components/SDK-React/createAll/override-sdk/infra/DeferLoad/index.tsx +1 -0
- package/tests/assets/components/SDK-React/createAll/override-sdk/infra/MultiStep/MultiStep.tsx +4 -3
- package/tests/assets/components/SDK-React/createAll/override-sdk/infra/VerticalTabs/VerticalTabs.tsx +4 -1
- package/tests/assets/components/SDK-React/createAll/override-sdk/template/AppShell/AppShell.tsx +6 -4
- package/tests/assets/components/SDK-React/createAll/override-sdk/template/BannerPage/BannerPage.tsx +4 -1
- package/tests/assets/components/SDK-React/createAll/override-sdk/template/CaseSummary/CaseSummary.tsx +4 -1
- package/tests/assets/components/SDK-React/createAll/override-sdk/template/CaseView/CaseView.tsx +6 -3
- package/tests/assets/components/SDK-React/createAll/override-sdk/template/Confirmation/Confirmation.tsx +23 -44
- package/tests/assets/components/SDK-React/createAll/override-sdk/template/DataReference/DataReference.tsx +6 -2
- package/tests/assets/components/SDK-React/createAll/override-sdk/template/Details/Details.tsx +5 -1
- package/tests/assets/components/SDK-React/createAll/override-sdk/template/DetailsThreeColumn/DetailsThreeColumn.tsx +5 -1
- package/tests/assets/components/SDK-React/createAll/override-sdk/template/DetailsTwoColumn/DetailsTwoColumn.tsx +5 -1
- package/tests/assets/components/SDK-React/createAll/override-sdk/template/FieldGroupTemplate/FieldGroupTemplate.tsx +6 -2
- package/tests/assets/components/SDK-React/createAll/override-sdk/template/InlineDashboardPage/InlineDashboardPage.tsx +5 -1
- package/tests/assets/components/SDK-React/createAll/override-sdk/template/ListPage/ListPage.tsx +6 -3
- package/tests/assets/components/SDK-React/createAll/override-sdk/template/ListView/ListView.tsx +89 -93
- package/tests/assets/components/SDK-React/createAll/override-sdk/template/ListView/utils.ts +170 -23
- package/tests/assets/components/SDK-React/createAll/override-sdk/template/NarrowWideDetails/NarrowWideDetails.tsx +5 -1
- package/tests/assets/components/SDK-React/createAll/override-sdk/template/NarrowWidePage/NarrowWidePage.tsx +4 -1
- package/tests/assets/components/SDK-React/createAll/override-sdk/template/OneColumnPage/OneColumnPage.tsx +3 -1
- package/tests/assets/components/SDK-React/createAll/override-sdk/template/PromotedFilters/PromotedFilters.tsx +4 -1
- package/tests/assets/components/SDK-React/createAll/override-sdk/template/SimpleTable/SimpleTable.tsx +88 -5
- package/tests/assets/components/SDK-React/createAll/override-sdk/template/SimpleTableSelect/SimpleTableSelect.tsx +6 -4
- package/tests/assets/components/SDK-React/createAll/override-sdk/template/TwoColumnPage/TwoColumnPage.tsx +3 -2
- package/tests/assets/components/SDK-React/createAll/override-sdk/template/WideNarrowDetails/WideNarrowDetails.tsx +5 -1
- package/tests/assets/components/SDK-React/createAll/override-sdk/template/WideNarrowPage/WideNarrowPage.tsx +4 -3
- package/tests/assets/components/SDK-React/createAll/override-sdk/widget/Attachment/Attachment.tsx +5 -1
- package/tests/assets/components/SDK-React/createAll/override-sdk/widget/FileUtility/FileUtility.tsx +8 -2
- package/tests/assets/components/SDK-React/createAll/override-sdk/widget/QuickCreate/QuickCreate.tsx +4 -1
- package/tests/assets/components/SDK-React/createAll/override-sdk/widget/SummaryList/SummaryList.tsx +4 -1
- package/tests/assets/components/SDK-React/createAll/override-sdk/widget/ToDo/ToDo.tsx +53 -82
- package/tests/functional/localCreateBuildAllDeleteAllCustom.test.js +1 -1
- package/tests/functional/localCreateBuildDeleteCustom.test.js +14 -1
- package/tests/functional/localCreateBuildDeleteOverride.test.js +2 -1
- package/tests/functional/localCreatePublishAllDeleteAllCustom.test.js +5 -3
- package/tests/functional/localCreatePublishAllDeleteAllOverride.test.js +3 -5
- package/tests/functional/localCreatePublishDeleteCustom.test.js +4 -3
- package/tests/functional/localCreatePublishDeleteOverride.test.js +2 -5
|
@@ -3,7 +3,7 @@ import { TextField } from '@material-ui/core';
|
|
|
3
3
|
import MenuItem from '@material-ui/core/MenuItem';
|
|
4
4
|
import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
|
|
5
5
|
import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
|
|
6
|
-
import
|
|
6
|
+
import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
|
|
7
7
|
// import type { PConnFieldProps } from '../../../types/PConnProps';
|
|
8
8
|
|
|
9
9
|
interface IOption {
|
|
@@ -25,6 +25,9 @@ interface IOption {
|
|
|
25
25
|
|
|
26
26
|
|
|
27
27
|
export default function Dropdown(props /* : DropdownProps */) {
|
|
28
|
+
// Get emitted components from map (so we can get any override that may exist)
|
|
29
|
+
const FieldValueList = getComponentFromMap('FieldValueList');
|
|
30
|
+
|
|
28
31
|
const {
|
|
29
32
|
getPConnect,
|
|
30
33
|
label,
|
|
@@ -54,15 +57,16 @@ export default function Dropdown(props /* : DropdownProps */) {
|
|
|
54
57
|
const refName = propName?.slice(propName.lastIndexOf('.') + 1);
|
|
55
58
|
|
|
56
59
|
useEffect(() => {
|
|
57
|
-
const list = Utils.getOptionList(props, getPConnect().getDataObject(''));
|
|
60
|
+
const list = Utils.getOptionList(props, getPConnect().getDataObject('')); // 1st arg empty string until typedef marked correctly
|
|
58
61
|
const optionsList = [...list];
|
|
59
|
-
optionsList.unshift({
|
|
62
|
+
optionsList.unshift({
|
|
63
|
+
key: placeholder,
|
|
64
|
+
value: thePConn.getLocalizedValue(placeholder, '', '')
|
|
65
|
+
}); // 2nd and 3rd args empty string until typedef marked correctly
|
|
60
66
|
setOptions(optionsList);
|
|
61
67
|
}, [datasource]);
|
|
62
68
|
|
|
63
|
-
const metaData = Array.isArray(fieldMetadata)
|
|
64
|
-
? fieldMetadata.filter(field => field?.classID === className)[0]
|
|
65
|
-
: fieldMetadata;
|
|
69
|
+
const metaData = Array.isArray(fieldMetadata) ? fieldMetadata.filter((field) => field?.classID === className)[0] : fieldMetadata;
|
|
66
70
|
|
|
67
71
|
let displayName = metaData?.datasource?.propertyForDisplayText;
|
|
68
72
|
displayName = displayName?.slice(displayName.lastIndexOf('.') + 1);
|
|
@@ -77,11 +81,7 @@ export default function Dropdown(props /* : DropdownProps */) {
|
|
|
77
81
|
return (
|
|
78
82
|
<FieldValueList
|
|
79
83
|
name={hideLabel ? '' : label}
|
|
80
|
-
value={thePConn.getLocalizedValue(
|
|
81
|
-
value,
|
|
82
|
-
localePath,
|
|
83
|
-
thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
|
|
84
|
-
)}
|
|
84
|
+
value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
|
|
85
85
|
/>
|
|
86
86
|
);
|
|
87
87
|
}
|
|
@@ -90,12 +90,8 @@ export default function Dropdown(props /* : DropdownProps */) {
|
|
|
90
90
|
return (
|
|
91
91
|
<FieldValueList
|
|
92
92
|
name={hideLabel ? '' : label}
|
|
93
|
-
value={thePConn.getLocalizedValue(
|
|
94
|
-
|
|
95
|
-
localePath,
|
|
96
|
-
thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
|
|
97
|
-
)}
|
|
98
|
-
variant='stacked'
|
|
93
|
+
value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
|
|
94
|
+
variant="stacked"
|
|
99
95
|
/>
|
|
100
96
|
);
|
|
101
97
|
}
|
|
@@ -110,7 +106,7 @@ export default function Dropdown(props /* : DropdownProps */) {
|
|
|
110
106
|
'data-test-id': testId
|
|
111
107
|
};
|
|
112
108
|
|
|
113
|
-
const handleChange = evt => {
|
|
109
|
+
const handleChange = (evt) => {
|
|
114
110
|
const selectedValue = evt.target.value === placeholder ? '' : evt.target.value;
|
|
115
111
|
handleEvent(actionsApi, 'changeNblur', propName, selectedValue);
|
|
116
112
|
if (onRecordChange) {
|
|
@@ -125,8 +121,8 @@ export default function Dropdown(props /* : DropdownProps */) {
|
|
|
125
121
|
fullWidth
|
|
126
122
|
variant={readOnly ? 'standard' : 'outlined'}
|
|
127
123
|
helperText={helperTextToDisplay}
|
|
128
|
-
placeholder={thePConn.getLocalizedValue(placeholder,
|
|
129
|
-
size=
|
|
124
|
+
placeholder={thePConn.getLocalizedValue(placeholder, '', '')} // 2nd and 3rd args empty string until typedef marked correctly
|
|
125
|
+
size="small"
|
|
130
126
|
required={required}
|
|
131
127
|
disabled={disabled}
|
|
132
128
|
onChange={!readOnly ? handleChange : undefined}
|
|
@@ -138,11 +134,7 @@ export default function Dropdown(props /* : DropdownProps */) {
|
|
|
138
134
|
>
|
|
139
135
|
{options.map((option: any) => (
|
|
140
136
|
<MenuItem key={option.key} value={option.key}>
|
|
141
|
-
{thePConn.getLocalizedValue(
|
|
142
|
-
option.value,
|
|
143
|
-
localePath,
|
|
144
|
-
thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
|
|
145
|
-
)}
|
|
137
|
+
{thePConn.getLocalizedValue(option.value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
|
|
146
138
|
</MenuItem>
|
|
147
139
|
))}
|
|
148
140
|
</TextField>
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TextField, InputAdornment } from '@material-ui/core';
|
|
3
3
|
import MailOutlineIcon from '@material-ui/icons/MailOutline';
|
|
4
|
-
import
|
|
5
|
-
import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
|
|
4
|
+
import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
|
|
6
5
|
import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
|
|
7
6
|
|
|
8
|
-
|
|
9
7
|
interface EmailProps extends PConnFieldProps {
|
|
10
8
|
// If any, enter additional props that only exist on Date here
|
|
11
9
|
}
|
|
12
10
|
|
|
13
|
-
|
|
14
|
-
|
|
15
11
|
export default function Email(props: EmailProps) {
|
|
12
|
+
// Get emitted components from map (so we can get any override that may exist)
|
|
13
|
+
const TextInput = getComponentFromMap('TextInput');
|
|
14
|
+
const FieldValueList = getComponentFromMap('FieldValueList');
|
|
15
|
+
|
|
16
16
|
const {
|
|
17
17
|
label,
|
|
18
18
|
required,
|
|
@@ -35,7 +35,7 @@ export default function Email(props: EmailProps) {
|
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
if (displayMode === 'STACKED_LARGE_VAL') {
|
|
38
|
-
return <FieldValueList name={hideLabel ? '' : label} value={value} variant=
|
|
38
|
+
return <FieldValueList name={hideLabel ? '' : label} value={value} variant="stacked" />;
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
if (readOnly) {
|
|
@@ -51,10 +51,10 @@ export default function Email(props: EmailProps) {
|
|
|
51
51
|
return (
|
|
52
52
|
<TextField
|
|
53
53
|
fullWidth
|
|
54
|
-
variant=
|
|
54
|
+
variant="outlined"
|
|
55
55
|
helperText={helperTextToDisplay}
|
|
56
|
-
placeholder=
|
|
57
|
-
size=
|
|
56
|
+
placeholder=""
|
|
57
|
+
size="small"
|
|
58
58
|
required={required}
|
|
59
59
|
disabled={disabled}
|
|
60
60
|
onChange={onChange}
|
|
@@ -62,10 +62,10 @@ export default function Email(props: EmailProps) {
|
|
|
62
62
|
error={status === 'error'}
|
|
63
63
|
label={label}
|
|
64
64
|
value={value}
|
|
65
|
-
type=
|
|
65
|
+
type="email"
|
|
66
66
|
InputProps={{
|
|
67
67
|
startAdornment: (
|
|
68
|
-
<InputAdornment position=
|
|
68
|
+
<InputAdornment position="start">
|
|
69
69
|
<MailOutlineIcon />
|
|
70
70
|
</InputAdornment>
|
|
71
71
|
),
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TextField } from '@material-ui/core';
|
|
3
|
-
import
|
|
4
|
-
import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
|
|
3
|
+
import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
|
|
5
4
|
import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
|
|
6
5
|
|
|
7
6
|
interface IntegerProps extends PConnFieldProps {
|
|
8
7
|
// If any, enter additional props that only exist on Integer here
|
|
9
8
|
}
|
|
10
9
|
|
|
11
|
-
|
|
12
10
|
export default function Integer(props: IntegerProps) {
|
|
11
|
+
// Get emitted components from map (so we can get any override that may exist)
|
|
12
|
+
const TextInput = getComponentFromMap('TextInput');
|
|
13
|
+
const FieldValueList = getComponentFromMap('FieldValueList');
|
|
14
|
+
|
|
13
15
|
const {
|
|
14
16
|
label,
|
|
15
17
|
required,
|
|
@@ -34,7 +36,7 @@ export default function Integer(props: IntegerProps) {
|
|
|
34
36
|
}
|
|
35
37
|
|
|
36
38
|
if (displayMode === 'STACKED_LARGE_VAL') {
|
|
37
|
-
return <FieldValueList name={hideLabel ? '' : label} value={value} variant=
|
|
39
|
+
return <FieldValueList name={hideLabel ? '' : label} value={value} variant="stacked" />;
|
|
38
40
|
}
|
|
39
41
|
|
|
40
42
|
if (readOnly) {
|
|
@@ -69,8 +71,8 @@ export default function Integer(props: IntegerProps) {
|
|
|
69
71
|
fullWidth
|
|
70
72
|
variant={readOnly ? 'standard' : 'outlined'}
|
|
71
73
|
helperText={helperTextToDisplay}
|
|
72
|
-
placeholder=
|
|
73
|
-
size=
|
|
74
|
+
placeholder=""
|
|
75
|
+
size="small"
|
|
74
76
|
required={required}
|
|
75
77
|
disabled={disabled}
|
|
76
78
|
onChange={intOnChange}
|
|
@@ -78,7 +80,7 @@ export default function Integer(props: IntegerProps) {
|
|
|
78
80
|
error={status === 'error'}
|
|
79
81
|
label={label}
|
|
80
82
|
value={value}
|
|
81
|
-
type=
|
|
83
|
+
type="text"
|
|
82
84
|
inputProps={{ inputMode: 'numeric', pattern: '[0-9]*', ...testProp }}
|
|
83
85
|
/>
|
|
84
86
|
);
|
package/tests/assets/components/SDK-React/create/override-sdk/field/Percentage/Percentage.tsx
CHANGED
|
@@ -2,11 +2,9 @@ import React from 'react';
|
|
|
2
2
|
import { TextField } from '@material-ui/core';
|
|
3
3
|
import { makeStyles } from '@material-ui/core/styles';
|
|
4
4
|
|
|
5
|
-
import
|
|
6
|
-
import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
|
|
5
|
+
import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
|
|
7
6
|
import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
|
|
8
7
|
|
|
9
|
-
|
|
10
8
|
// Inspired by https://stackoverflow.com/questions/50823182/material-ui-remove-up-down-arrow-dials-from-textview
|
|
11
9
|
const useStyles = makeStyles((/* theme */) => ({
|
|
12
10
|
input: {
|
|
@@ -24,13 +22,15 @@ const useStyles = makeStyles((/* theme */) => ({
|
|
|
24
22
|
}
|
|
25
23
|
}));
|
|
26
24
|
|
|
27
|
-
|
|
28
25
|
interface PercentageProps extends PConnFieldProps {
|
|
29
26
|
// If any, enter additional props that only exist on Percentage here
|
|
30
27
|
}
|
|
31
28
|
|
|
32
|
-
|
|
33
29
|
export default function Percentage(props: PercentageProps) {
|
|
30
|
+
// Get emitted components from map (so we can get any override that may exist)
|
|
31
|
+
const TextInput = getComponentFromMap('TextInput');
|
|
32
|
+
const FieldValueList = getComponentFromMap('FieldValueList');
|
|
33
|
+
|
|
34
34
|
const classes = useStyles();
|
|
35
35
|
|
|
36
36
|
const {
|
|
@@ -57,7 +57,7 @@ export default function Percentage(props: PercentageProps) {
|
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
if (displayMode === 'STACKED_LARGE_VAL') {
|
|
60
|
-
return <FieldValueList name={hideLabel ? '' : label} value={value} variant=
|
|
60
|
+
return <FieldValueList name={hideLabel ? '' : label} value={value} variant="stacked" />;
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
if (readOnly) {
|
|
@@ -76,8 +76,8 @@ export default function Percentage(props: PercentageProps) {
|
|
|
76
76
|
fullWidth
|
|
77
77
|
variant={readOnly ? 'standard' : 'outlined'}
|
|
78
78
|
helperText={helperTextToDisplay}
|
|
79
|
-
placeholder=
|
|
80
|
-
size=
|
|
79
|
+
placeholder=""
|
|
80
|
+
size="small"
|
|
81
81
|
required={required}
|
|
82
82
|
disabled={disabled}
|
|
83
83
|
onChange={onChange}
|
|
@@ -85,7 +85,7 @@ export default function Percentage(props: PercentageProps) {
|
|
|
85
85
|
error={status === 'error'}
|
|
86
86
|
label={label}
|
|
87
87
|
value={value}
|
|
88
|
-
type=
|
|
88
|
+
type="number"
|
|
89
89
|
inputProps={{ ...testProp }}
|
|
90
90
|
/>
|
|
91
91
|
);
|
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import MuiPhoneNumber from 'material-ui-phone-number';
|
|
3
|
-
import
|
|
3
|
+
import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
|
|
4
4
|
import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
|
|
5
5
|
|
|
6
6
|
interface PhoneProps extends PConnFieldProps {
|
|
7
7
|
// If any, enter additional props that only exist on Phone here
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
|
|
12
10
|
export default function Phone(props: PhoneProps) {
|
|
11
|
+
// Get emitted components from map (so we can get any override that may exist)
|
|
12
|
+
const FieldValueList = getComponentFromMap('FieldValueList');
|
|
13
|
+
|
|
13
14
|
const {
|
|
14
15
|
label,
|
|
15
16
|
required,
|
|
@@ -38,7 +39,7 @@ export default function Phone(props: PhoneProps) {
|
|
|
38
39
|
}
|
|
39
40
|
|
|
40
41
|
if (displayMode === 'STACKED_LARGE_VAL') {
|
|
41
|
-
return <FieldValueList name={hideLabel ? '' : label} value={value} variant=
|
|
42
|
+
return <FieldValueList name={hideLabel ? '' : label} value={value} variant="stacked" />;
|
|
42
43
|
}
|
|
43
44
|
|
|
44
45
|
if (readOnly) {
|
|
@@ -48,8 +49,8 @@ export default function Phone(props: PhoneProps) {
|
|
|
48
49
|
<MuiPhoneNumber
|
|
49
50
|
fullWidth
|
|
50
51
|
helperText={helperTextToDisplay}
|
|
51
|
-
placeholder=
|
|
52
|
-
size=
|
|
52
|
+
placeholder=""
|
|
53
|
+
size="small"
|
|
53
54
|
required={required}
|
|
54
55
|
disabled={disabled}
|
|
55
56
|
onChange={onChange}
|
|
@@ -66,13 +67,13 @@ export default function Phone(props: PhoneProps) {
|
|
|
66
67
|
);
|
|
67
68
|
}
|
|
68
69
|
|
|
69
|
-
const handleChange = inputVal => {
|
|
70
|
+
const handleChange = (inputVal) => {
|
|
70
71
|
let phoneValue = inputVal && inputVal.replace(/\D+/g, '');
|
|
71
72
|
phoneValue = `+${phoneValue}`;
|
|
72
73
|
onChange({ value: phoneValue });
|
|
73
74
|
};
|
|
74
75
|
|
|
75
|
-
const handleBlur = event => {
|
|
76
|
+
const handleBlur = (event) => {
|
|
76
77
|
const phoneValue = event?.target?.value;
|
|
77
78
|
event.target.value = `+${phoneValue && phoneValue.replace(/\D+/g, '')}`;
|
|
78
79
|
onBlur(event);
|
|
@@ -81,11 +82,11 @@ export default function Phone(props: PhoneProps) {
|
|
|
81
82
|
return (
|
|
82
83
|
<MuiPhoneNumber
|
|
83
84
|
fullWidth
|
|
84
|
-
variant=
|
|
85
|
+
variant="outlined"
|
|
85
86
|
helperText={helperTextToDisplay}
|
|
86
|
-
placeholder=
|
|
87
|
-
size=
|
|
88
|
-
defaultCountry=
|
|
87
|
+
placeholder=""
|
|
88
|
+
size="small"
|
|
89
|
+
defaultCountry="us"
|
|
89
90
|
required={required}
|
|
90
91
|
disabled={disabled}
|
|
91
92
|
onChange={handleChange}
|
package/tests/assets/components/SDK-React/create/override-sdk/field/RadioButtons/RadioButtons.tsx
CHANGED
|
@@ -1,16 +1,9 @@
|
|
|
1
1
|
import React, { useState, useEffect } from 'react';
|
|
2
|
-
import {
|
|
3
|
-
Radio,
|
|
4
|
-
RadioGroup,
|
|
5
|
-
FormControl,
|
|
6
|
-
FormControlLabel,
|
|
7
|
-
FormLabel,
|
|
8
|
-
FormHelperText
|
|
9
|
-
} from '@material-ui/core';
|
|
2
|
+
import { Radio, RadioGroup, FormControl, FormControlLabel, FormLabel, FormHelperText } from '@material-ui/core';
|
|
10
3
|
|
|
11
4
|
import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
|
|
12
5
|
import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
|
|
13
|
-
import
|
|
6
|
+
import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
|
|
14
7
|
// import type { PConnFieldProps } from '../../../types/PConnProps';
|
|
15
8
|
|
|
16
9
|
// Can't use RadioButtonProps until getLocaleRuleNameFromKeys is NOT private
|
|
@@ -22,6 +15,9 @@ import FieldValueList from '@pega/react-sdk-components/lib/components/designSyst
|
|
|
22
15
|
|
|
23
16
|
|
|
24
17
|
export default function RadioButtons(props /* : RadioButtonsProps */ ) {
|
|
18
|
+
// Get emitted components from map (so we can get any override that may exist)
|
|
19
|
+
const FieldValueList = getComponentFromMap('FieldValueList');
|
|
20
|
+
|
|
25
21
|
const {
|
|
26
22
|
getPConnect,
|
|
27
23
|
label,
|
|
@@ -49,9 +45,7 @@ export default function RadioButtons(props /* : RadioButtonsProps */ ) {
|
|
|
49
45
|
configProperty = configProperty.startsWith('@P') ? configProperty.substring(3) : configProperty;
|
|
50
46
|
configProperty = configProperty.startsWith('.') ? configProperty.substring(1) : configProperty;
|
|
51
47
|
|
|
52
|
-
const metaData = Array.isArray(fieldMetadata)
|
|
53
|
-
? fieldMetadata.filter(field => field?.classID === className)[0]
|
|
54
|
-
: fieldMetadata;
|
|
48
|
+
const metaData = Array.isArray(fieldMetadata) ? fieldMetadata.filter((field) => field?.classID === className)[0] : fieldMetadata;
|
|
55
49
|
let displayName = metaData?.datasource?.propertyForDisplayText;
|
|
56
50
|
displayName = displayName?.slice(displayName.lastIndexOf('.') + 1);
|
|
57
51
|
const localeContext = metaData?.datasource?.tableType === 'DataPage' ? 'datapage' : 'associated';
|
|
@@ -72,11 +66,7 @@ export default function RadioButtons(props /* : RadioButtonsProps */ ) {
|
|
|
72
66
|
return (
|
|
73
67
|
<FieldValueList
|
|
74
68
|
name={hideLabel ? '' : label}
|
|
75
|
-
value={thePConn.getLocalizedValue(
|
|
76
|
-
value,
|
|
77
|
-
localePath,
|
|
78
|
-
thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
|
|
79
|
-
)}
|
|
69
|
+
value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
|
|
80
70
|
/>
|
|
81
71
|
);
|
|
82
72
|
}
|
|
@@ -85,34 +75,25 @@ export default function RadioButtons(props /* : RadioButtonsProps */ ) {
|
|
|
85
75
|
return (
|
|
86
76
|
<FieldValueList
|
|
87
77
|
name={hideLabel ? '' : label}
|
|
88
|
-
value={thePConn.getLocalizedValue(
|
|
89
|
-
|
|
90
|
-
localePath,
|
|
91
|
-
thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
|
|
92
|
-
)}
|
|
93
|
-
variant='stacked'
|
|
78
|
+
value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
|
|
79
|
+
variant="stacked"
|
|
94
80
|
/>
|
|
95
81
|
);
|
|
96
82
|
}
|
|
97
83
|
|
|
98
|
-
const handleChange = event => {
|
|
84
|
+
const handleChange = (event) => {
|
|
99
85
|
handleEvent(actionsApi, 'changeNblur', propName, event.target.value);
|
|
100
86
|
};
|
|
101
87
|
|
|
102
|
-
const handleBlur = event => {
|
|
103
|
-
thePConn.getValidationApi().validate(event.target.value,
|
|
88
|
+
const handleBlur = (event) => {
|
|
89
|
+
thePConn.getValidationApi().validate(event.target.value, ''); // 2nd arg empty string until typedef marked correctly as optional
|
|
104
90
|
};
|
|
105
91
|
|
|
106
92
|
return (
|
|
107
93
|
<FormControl error={status === 'error'} required={required}>
|
|
108
|
-
<FormLabel component=
|
|
109
|
-
<RadioGroup
|
|
110
|
-
|
|
111
|
-
onChange={handleChange}
|
|
112
|
-
onBlur={!readOnly ? handleBlur : undefined}
|
|
113
|
-
row={inline}
|
|
114
|
-
>
|
|
115
|
-
{theOptions.map(theOption => {
|
|
94
|
+
<FormLabel component="legend">{label}</FormLabel>
|
|
95
|
+
<RadioGroup value={theSelectedButton} onChange={handleChange} onBlur={!readOnly ? handleBlur : undefined} row={inline}>
|
|
96
|
+
{theOptions.map((theOption) => {
|
|
116
97
|
return (
|
|
117
98
|
<FormControlLabel
|
|
118
99
|
value={theOption.key}
|
|
@@ -122,7 +103,7 @@ export default function RadioButtons(props /* : RadioButtonsProps */ ) {
|
|
|
122
103
|
localePath,
|
|
123
104
|
thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
|
|
124
105
|
)}
|
|
125
|
-
control={<Radio key={theOption.key} color=
|
|
106
|
+
control={<Radio key={theOption.key} color="primary" disabled={readOnly} />}
|
|
126
107
|
/>
|
|
127
108
|
);
|
|
128
109
|
})}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import React, { useRef } from 'react';
|
|
2
|
+
import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
|
|
3
|
+
import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
|
|
4
|
+
import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
|
|
5
|
+
|
|
6
|
+
interface RichTextProps extends PConnFieldProps {
|
|
7
|
+
// If any, enter additional props that only exist on TextArea here
|
|
8
|
+
additionalProps?: object;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export default function RichText(props: RichTextProps) {
|
|
12
|
+
// Get emitted components from map (so we can get any override that may exist)
|
|
13
|
+
const FieldValueList = getComponentFromMap('FieldValueList');
|
|
14
|
+
const RichTextEditor = getComponentFromMap('RichTextEditor');
|
|
15
|
+
|
|
16
|
+
const { getPConnect, value, placeholder, validatemessage, label, hideLabel, helperText, testId, displayMode, additionalProps } = props;
|
|
17
|
+
const pConn = getPConnect();
|
|
18
|
+
const editorRef: any = useRef(null);
|
|
19
|
+
|
|
20
|
+
let { readOnly, required, disabled } = props;
|
|
21
|
+
[readOnly, required, disabled] = [readOnly, required, disabled].map((prop) => prop === true || (typeof prop === 'string' && prop === 'true'));
|
|
22
|
+
|
|
23
|
+
const helperTextToDisplay = validatemessage || helperText;
|
|
24
|
+
|
|
25
|
+
if (displayMode === 'LABELS_LEFT') {
|
|
26
|
+
return <FieldValueList name={hideLabel ? '' : label} value={value} />;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
if (displayMode === 'STACKED_LARGE_VAL') {
|
|
30
|
+
return <FieldValueList name={hideLabel ? '' : label} value={value} variant="stacked" />;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
let richTextComponent;
|
|
34
|
+
|
|
35
|
+
if (readOnly) {
|
|
36
|
+
// Rich Text read-only component
|
|
37
|
+
richTextComponent = (
|
|
38
|
+
<RichTextEditor
|
|
39
|
+
{...additionalProps}
|
|
40
|
+
label={label}
|
|
41
|
+
labelHidden={hideLabel}
|
|
42
|
+
defaultValue={value}
|
|
43
|
+
testId={testId}
|
|
44
|
+
info={helperTextToDisplay}
|
|
45
|
+
ref={editorRef}
|
|
46
|
+
readOnly
|
|
47
|
+
/>
|
|
48
|
+
);
|
|
49
|
+
} else {
|
|
50
|
+
// Rich Text editable component
|
|
51
|
+
const actionsApi = pConn.getActionsApi();
|
|
52
|
+
let status = '';
|
|
53
|
+
if (validatemessage !== '') {
|
|
54
|
+
status = 'error';
|
|
55
|
+
}
|
|
56
|
+
const handleChange = () => {
|
|
57
|
+
if (status === 'error') {
|
|
58
|
+
const property = pConn.getStateProps()["value"];
|
|
59
|
+
pConn.clearErrorMessages({
|
|
60
|
+
property,
|
|
61
|
+
category: '',
|
|
62
|
+
context: ''
|
|
63
|
+
});
|
|
64
|
+
}
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
const handleBlur = () => {
|
|
68
|
+
if (editorRef.current) {
|
|
69
|
+
const editorValue = editorRef.current.getContent({ format: 'html' });
|
|
70
|
+
const property = pConn.getStateProps()["value"];
|
|
71
|
+
handleEvent(actionsApi, 'changeNblur', property, editorValue);
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
richTextComponent = (
|
|
76
|
+
<RichTextEditor
|
|
77
|
+
{...additionalProps}
|
|
78
|
+
label={label}
|
|
79
|
+
labelHidden={hideLabel}
|
|
80
|
+
info={helperTextToDisplay}
|
|
81
|
+
defaultValue={value}
|
|
82
|
+
placeholder={placeholder}
|
|
83
|
+
disabled={disabled}
|
|
84
|
+
required={required}
|
|
85
|
+
testId={testId}
|
|
86
|
+
ref={editorRef}
|
|
87
|
+
error={status === 'error'}
|
|
88
|
+
onBlur={handleBlur}
|
|
89
|
+
onChange={handleChange}
|
|
90
|
+
/>
|
|
91
|
+
);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
return richTextComponent;
|
|
95
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './RichText';
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
/* eslint-disable react/no-array-index-key */
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
|
|
4
|
+
import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
|
|
5
|
+
|
|
6
|
+
// ScalarListProps can't extend PConnFieldProps because its 'value' has a different type
|
|
7
|
+
interface ScalarListProps extends PConnProps {
|
|
8
|
+
// If any, enter additional props that only exist on this component
|
|
9
|
+
displayInModal: boolean;
|
|
10
|
+
hideLabel: boolean;
|
|
11
|
+
value: Array<any>;
|
|
12
|
+
componentType: string;
|
|
13
|
+
label: string;
|
|
14
|
+
displayMode: string;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
function CommaSeparatedList(props) {
|
|
18
|
+
const { items } = props;
|
|
19
|
+
|
|
20
|
+
return (
|
|
21
|
+
<ul style={{ padding: '0', margin: '0' }}>
|
|
22
|
+
{items.map((value, index) => {
|
|
23
|
+
return <span key={index}>{value}</span>;
|
|
24
|
+
})}
|
|
25
|
+
</ul>
|
|
26
|
+
);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
export default function ScalarList(props: ScalarListProps) {
|
|
30
|
+
// Get emitted components from map (so we can get any override that may exist)
|
|
31
|
+
const FieldValueList = getComponentFromMap('FieldValueList');
|
|
32
|
+
|
|
33
|
+
const {
|
|
34
|
+
label,
|
|
35
|
+
getPConnect,
|
|
36
|
+
componentType,
|
|
37
|
+
value: scalarValues,
|
|
38
|
+
displayMode,
|
|
39
|
+
hideLabel,
|
|
40
|
+
...restProps
|
|
41
|
+
} = props;
|
|
42
|
+
|
|
43
|
+
const items = scalarValues?.map(scalarValue => {
|
|
44
|
+
return getPConnect().createComponent(
|
|
45
|
+
{
|
|
46
|
+
type: componentType,
|
|
47
|
+
config: {
|
|
48
|
+
value: scalarValue,
|
|
49
|
+
displayMode: 'LABELS_LEFT',
|
|
50
|
+
label,
|
|
51
|
+
...restProps,
|
|
52
|
+
readOnly: 'true'
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
'',
|
|
56
|
+
'',
|
|
57
|
+
{}
|
|
58
|
+
); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional;
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
if (['LABELS_LEFT', 'STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode)) {
|
|
62
|
+
const displayComp = (
|
|
63
|
+
<div>
|
|
64
|
+
<CommaSeparatedList items={items} />
|
|
65
|
+
</div>
|
|
66
|
+
);
|
|
67
|
+
return displayComp;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
const displayComp = <CommaSeparatedList items={items} />;
|
|
71
|
+
|
|
72
|
+
return <FieldValueList name={hideLabel ? '' : label} value={displayComp} variant='stacked' />;
|
|
73
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './ScalarList';
|