@pega/custom-dx-components 0.23.14 → 0.23.16
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/Boolean/index.jsx.mustache +15 -3
- package/src/tasks/create/templates/Constellation/Field/Date/config.json.mustache +10 -1
- package/src/tasks/create/templates/Constellation/Field/Date/index.jsx.mustache +19 -3
- package/src/tasks/create/templates/Constellation/Field/DateTime/index.jsx.mustache +18 -3
- package/src/tasks/create/templates/Constellation/Field/Decimal/index.jsx.mustache +18 -3
- package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/index.jsx.mustache +18 -3
- package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/index.jsx.mustache +19 -3
- package/src/tasks/create/templates/Constellation/Field/Integer/index.jsx.mustache +20 -3
- package/src/tasks/create/templates/Constellation/Field/Picklist/index.jsx.mustache +25 -3
- package/src/tasks/create/templates/Constellation/Field/Text/index.jsx.mustache +4 -3
- package/src/tasks/create/templates/Constellation/Field/Text-Email/index.jsx.mustache +19 -3
- package/src/tasks/create/templates/Constellation/Field/Text-Input/index.jsx.mustache +15 -3
- package/src/tasks/create/templates/Constellation/Field/Text-Paragraph/index.jsx.mustache +15 -3
- package/src/tasks/create/templates/Constellation/Field/Text-Phone/index.jsx.mustache +18 -3
- package/src/tasks/create/templates/Constellation/Field/Text-URL/index.jsx.mustache +18 -3
- package/src/tasks/create/templates/Constellation/Field/TimeofDay/index.jsx.mustache +20 -4
- package/src/tasks/create/templates/Constellation/Template/FORM/index.jsx.mustache +18 -12
- package/src/tasks/create/templates/Constellation/Template/FORM-region/index.jsx.mustache +12 -9
- package/src/tasks/create/templates/Constellation/Widget/CASE/config.json.mustache +1 -1
- package/src/tasks/create/templates/Launchpad/Widget/CASE/config.json.mustache +1 -1
- package/src/tasks/init/index.js +5 -5
- package/src/tasks/init/template/jest.config.cjs +21 -0
- package/src/tasks/init/template/package.json.mustache +1 -1
- package/tests/assets/components/create/Pega_DXIL_MyTestText/index.jsx +5 -4
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyBoolean/index.jsx +17 -5
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyCaseWidget/config.json +1 -1
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyCurrency/index.jsx +19 -4
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDate/config.json +10 -1
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDate/index.jsx +20 -4
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDateTime/index.jsx +19 -4
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDecimal/index.jsx +19 -4
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyEmail/index.jsx +20 -4
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyForm/index.jsx +15 -9
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyInteger/index.jsx +21 -4
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyParagraph/index.jsx +16 -4
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPercentage/index.jsx +20 -4
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPhone/index.jsx +19 -4
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPicklist/index.jsx +26 -4
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyText/index.jsx +5 -4
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTextInput/index.jsx +16 -4
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTimeOfDay/index.jsx +21 -5
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnForm/index.jsx +12 -9
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyURL/index.jsx +19 -4
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyBoolean/index.jsx +17 -5
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyCaseWidget/config.json +1 -1
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyCurrency/index.jsx +19 -4
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyDate/config.json +10 -1
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyDate/index.jsx +20 -4
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyDateTime/index.jsx +19 -4
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyDecimal/index.jsx +19 -4
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyEmail/index.jsx +20 -4
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyForm/index.jsx +15 -9
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyInteger/index.jsx +21 -4
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPageCaseWidget/index.jsx +1 -1
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyParagraph/index.jsx +16 -4
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPercentage/index.jsx +20 -4
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPhone/index.jsx +19 -4
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPicklist/index.jsx +26 -4
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyText/index.jsx +5 -4
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTextInput/index.jsx +16 -4
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTimeOfDay/index.jsx +21 -5
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnForm/index.jsx +12 -9
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyURL/index.jsx +19 -4
- package/tests/functional/localCreateBuildAllDeleteAll.test.js +2 -2
- package/tests/functional/localCreateBuildDelete.test.js +1 -1
- package/tests/functional/localCreatePublishAllDeleteAll.test.js +2 -2
- package/tests/functional/localCreatePublishDelete.test.js +2 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Grid, Flex } from '@pega/cosmos-react-core';
|
|
1
|
+
import { Grid, Flex, FieldGroup } from '@pega/cosmos-react-core';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
|
|
4
4
|
import StyledPegaDxilMyTwoColumnFormWrapper from './styles';
|
|
@@ -11,7 +11,8 @@ import StyledPegaDxilMyTwoColumnFormWrapper from './styles';
|
|
|
11
11
|
export default function PegaDxilMyTwoColumnForm(props) {
|
|
12
12
|
|
|
13
13
|
|
|
14
|
-
const { children } = props;
|
|
14
|
+
const { children, label, showLabel, getPConnect } = props;
|
|
15
|
+
const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
|
|
15
16
|
|
|
16
17
|
const numRegions = children?.length;
|
|
17
18
|
const gridRepeat = "repeat(".concat(numRegions).concat(", 1fr)");
|
|
@@ -24,13 +25,15 @@ export default function PegaDxilMyTwoColumnForm(props) {
|
|
|
24
25
|
|
|
25
26
|
return (
|
|
26
27
|
<StyledPegaDxilMyTwoColumnFormWrapper>
|
|
27
|
-
<
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
28
|
+
<FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
|
|
29
|
+
<Grid container={gridContainer}>
|
|
30
|
+
{children.map((child, i) => (
|
|
31
|
+
<Flex container={flexContainer} key={`r-${i + 1}`}>
|
|
32
|
+
{child}
|
|
33
|
+
</Flex>
|
|
34
|
+
))}
|
|
35
|
+
</Grid>
|
|
36
|
+
</FieldGroup>
|
|
34
37
|
</StyledPegaDxilMyTwoColumnFormWrapper>
|
|
35
38
|
);
|
|
36
39
|
|
|
@@ -38,12 +38,15 @@ const PegaDxilMyUrl = props => {
|
|
|
38
38
|
propUrlLabel,
|
|
39
39
|
urlLabelSelection,
|
|
40
40
|
tableDisplayAs,
|
|
41
|
-
hasSuggestions
|
|
41
|
+
hasSuggestions,
|
|
42
|
+
fieldMetadata,
|
|
43
|
+
enableAdditionalInformation
|
|
42
44
|
} = props;
|
|
43
45
|
const { formatter } = props;
|
|
44
46
|
const pConn = getPConnect();
|
|
45
47
|
const actions = pConn.getActionsApi();
|
|
46
48
|
const propName = pConn.getStateProps().value;
|
|
49
|
+
const fieldDescription = fieldMetadata?.description;
|
|
47
50
|
const hasValueChange = useRef(false);
|
|
48
51
|
|
|
49
52
|
|
|
@@ -166,6 +169,14 @@ const PegaDxilMyUrl = props => {
|
|
|
166
169
|
}}
|
|
167
170
|
onFocus={actions.onFocus}
|
|
168
171
|
onResolveSuggestion={onResolveSuggestionHandler}
|
|
172
|
+
{...(enableAdditionalInformation && fieldDescription
|
|
173
|
+
? {
|
|
174
|
+
additionalInfo: {
|
|
175
|
+
heading: label,
|
|
176
|
+
content: fieldDescription
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
: {})}
|
|
169
180
|
/>
|
|
170
181
|
</StyledPegaDxilMyUrlWrapper>
|
|
171
182
|
);
|
|
@@ -180,7 +191,7 @@ PegaDxilMyUrl.defaultProps = {
|
|
|
180
191
|
disabled: false,
|
|
181
192
|
readOnly: false,
|
|
182
193
|
required: false,
|
|
183
|
-
testId:
|
|
194
|
+
testId: '',
|
|
184
195
|
displayMode: null,
|
|
185
196
|
additionalProps: {},
|
|
186
197
|
variant: 'inline',
|
|
@@ -196,7 +207,9 @@ PegaDxilMyUrl.defaultProps = {
|
|
|
196
207
|
propUrlLabel: '',
|
|
197
208
|
urlLabelSelection: 'constant',
|
|
198
209
|
tableDisplayAs: 'link',
|
|
199
|
-
hasSuggestions: false
|
|
210
|
+
hasSuggestions: false,
|
|
211
|
+
fieldMetadata: {},
|
|
212
|
+
enableAdditionalInformation: false
|
|
200
213
|
};
|
|
201
214
|
|
|
202
215
|
PegaDxilMyUrl.propTypes = {
|
|
@@ -226,7 +239,9 @@ PegaDxilMyUrl.propTypes = {
|
|
|
226
239
|
propUrlLabel: PropTypes.string,
|
|
227
240
|
urlLabelSelection: PropTypes.string,
|
|
228
241
|
tableDisplayAs: PropTypes.string,
|
|
229
|
-
hasSuggestions: PropTypes.bool
|
|
242
|
+
hasSuggestions: PropTypes.bool,
|
|
243
|
+
fieldMetadata: PropTypes.objectOf(PropTypes.any),
|
|
244
|
+
enableAdditionalInformation: PropTypes.bool
|
|
230
245
|
};
|
|
231
246
|
|
|
232
247
|
export default PegaDxilMyUrl;
|
|
@@ -29,12 +29,21 @@ const PegaDxilMyBoolean = props => {
|
|
|
29
29
|
displayMode,
|
|
30
30
|
variant,
|
|
31
31
|
trueLabel,
|
|
32
|
-
falseLabel
|
|
32
|
+
falseLabel,
|
|
33
|
+
fieldMetadata
|
|
33
34
|
} = props;
|
|
34
35
|
const pConn = getPConnect();
|
|
35
36
|
const actions = pConn.getActionsApi();
|
|
36
37
|
const propName = pConn.getStateProps().value;
|
|
37
38
|
|
|
39
|
+
const fieldAdditionalInfo = fieldMetadata?.additionalInformation;
|
|
40
|
+
const additionalInfo = fieldAdditionalInfo
|
|
41
|
+
? {
|
|
42
|
+
heading: caption,
|
|
43
|
+
content: fieldAdditionalInfo
|
|
44
|
+
}
|
|
45
|
+
: undefined;
|
|
46
|
+
|
|
38
47
|
let { readOnly, required, disabled } = props;
|
|
39
48
|
[readOnly, required, disabled] = [readOnly, required, disabled].map(
|
|
40
49
|
(prop) => prop === true || (typeof prop === 'string' && prop === 'true')
|
|
@@ -62,10 +71,11 @@ const PegaDxilMyBoolean = props => {
|
|
|
62
71
|
pConn.getValidationApi().validate(event.target.checked);
|
|
63
72
|
}}
|
|
64
73
|
data-testid={testId}
|
|
74
|
+
additionalInfo={additionalInfo}
|
|
65
75
|
/>
|
|
66
76
|
);
|
|
67
77
|
|
|
68
|
-
const parentTestId = testId ? `${testId}-parent` : testId;
|
|
78
|
+
const parentTestId = testId === '' ? `${testId}-parent` : testId;
|
|
69
79
|
|
|
70
80
|
let displayComponent;
|
|
71
81
|
if (displayMode) {
|
|
@@ -138,13 +148,14 @@ PegaDxilMyBoolean.defaultProps = {
|
|
|
138
148
|
disabled: false,
|
|
139
149
|
readOnly: false,
|
|
140
150
|
required: false,
|
|
141
|
-
testId:
|
|
151
|
+
testId: '',
|
|
142
152
|
additionalProps: {},
|
|
143
153
|
displayMode: null,
|
|
144
154
|
variant: 'inline',
|
|
145
155
|
displayValue: 'Yes/No',
|
|
146
156
|
trueLabel: '',
|
|
147
|
-
falseLabel: ''
|
|
157
|
+
falseLabel: '',
|
|
158
|
+
fieldMetadata: {}
|
|
148
159
|
};
|
|
149
160
|
|
|
150
161
|
PegaDxilMyBoolean.propTypes = {
|
|
@@ -164,7 +175,8 @@ PegaDxilMyBoolean.propTypes = {
|
|
|
164
175
|
variant: PropTypes.string,
|
|
165
176
|
displayValue: PropTypes.string,
|
|
166
177
|
trueLabel: PropTypes.string,
|
|
167
|
-
falseLabel: PropTypes.string
|
|
178
|
+
falseLabel: PropTypes.string,
|
|
179
|
+
fieldMetadata: PropTypes.objectOf(PropTypes.any)
|
|
168
180
|
};
|
|
169
181
|
|
|
170
182
|
export default PegaDxilMyBoolean;
|
|
@@ -46,13 +46,23 @@ const PegaDxilMyCurrency = props => {
|
|
|
46
46
|
negative,
|
|
47
47
|
notation,
|
|
48
48
|
isTableFormatter,
|
|
49
|
-
hasSuggestions
|
|
49
|
+
hasSuggestions,
|
|
50
|
+
fieldMetadata,
|
|
51
|
+
enableAdditionalInformation
|
|
50
52
|
} = props;
|
|
51
53
|
let { currencyDisplay } = props;
|
|
52
54
|
const pConn = getPConnect();
|
|
53
55
|
const actions = pConn.getActionsApi();
|
|
54
56
|
const propName = pConn.getStateProps().value;
|
|
55
57
|
const [currencyValue, setCurrencyValue] = useState(() => formatValue(value));
|
|
58
|
+
const fieldDescription = fieldMetadata?.description;
|
|
59
|
+
const additionalInfo =
|
|
60
|
+
enableAdditionalInformation && fieldDescription
|
|
61
|
+
? {
|
|
62
|
+
heading: label,
|
|
63
|
+
content: fieldDescription
|
|
64
|
+
}
|
|
65
|
+
: undefined;
|
|
56
66
|
|
|
57
67
|
let { readOnly, required, disabled } = props;
|
|
58
68
|
|
|
@@ -211,6 +221,7 @@ const PegaDxilMyCurrency = props => {
|
|
|
211
221
|
readOnly={readOnly}
|
|
212
222
|
required={required}
|
|
213
223
|
data-testid={testId}
|
|
224
|
+
additionalInfo={additionalInfo}
|
|
214
225
|
onChange={(enteredValue) => {
|
|
215
226
|
if (hasSuggestions) {
|
|
216
227
|
setStatus(undefined);
|
|
@@ -248,7 +259,7 @@ PegaDxilMyCurrency.defaultProps = {
|
|
|
248
259
|
allowDecimals: true,
|
|
249
260
|
currencyISOCode: 'USD',
|
|
250
261
|
isoCodeSelection: 'constant',
|
|
251
|
-
testId:
|
|
262
|
+
testId: '',
|
|
252
263
|
displayMode: null,
|
|
253
264
|
additionalProps: {},
|
|
254
265
|
variant: 'inline',
|
|
@@ -260,7 +271,9 @@ PegaDxilMyCurrency.defaultProps = {
|
|
|
260
271
|
currencyDecimalPrecision: 'auto',
|
|
261
272
|
isTableFormatter: false,
|
|
262
273
|
alwaysShowISOCode: false,
|
|
263
|
-
hasSuggestions: false
|
|
274
|
+
hasSuggestions: false,
|
|
275
|
+
fieldMetadata: {},
|
|
276
|
+
enableAdditionalInformation: false
|
|
264
277
|
};
|
|
265
278
|
|
|
266
279
|
PegaDxilMyCurrency.propTypes = {
|
|
@@ -290,7 +303,9 @@ PegaDxilMyCurrency.propTypes = {
|
|
|
290
303
|
currencyDecimalPrecision: PropTypes.string,
|
|
291
304
|
isTableFormatter: PropTypes.bool,
|
|
292
305
|
alwaysShowISOCode: PropTypes.bool,
|
|
293
|
-
hasSuggestions: PropTypes.bool
|
|
306
|
+
hasSuggestions: PropTypes.bool,
|
|
307
|
+
fieldMetadata: PropTypes.objectOf(PropTypes.any),
|
|
308
|
+
enableAdditionalInformation: PropTypes.bool
|
|
294
309
|
};
|
|
295
310
|
|
|
296
311
|
export default PegaDxilMyCurrency;
|
|
@@ -117,6 +117,11 @@
|
|
|
117
117
|
"name": "helperText",
|
|
118
118
|
"label": "Helper text",
|
|
119
119
|
"format": "TEXT"
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"name": "enableAdditionalInformation",
|
|
123
|
+
"label": "Enable additional information on field",
|
|
124
|
+
"format": "BOOLEAN"
|
|
120
125
|
}
|
|
121
126
|
]
|
|
122
127
|
},
|
|
@@ -141,7 +146,11 @@
|
|
|
141
146
|
},
|
|
142
147
|
{
|
|
143
148
|
"key": "DateTime-Long",
|
|
144
|
-
"value": "Date
|
|
149
|
+
"value": "Date (Long)"
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
"key": "DateTime-Short",
|
|
153
|
+
"value": "Date (Short)"
|
|
145
154
|
},
|
|
146
155
|
{
|
|
147
156
|
"key": "DateTime-Since",
|
|
@@ -38,7 +38,9 @@ const PegaDxilMyDate = props => {
|
|
|
38
38
|
additionalProps,
|
|
39
39
|
displayMode,
|
|
40
40
|
variant,
|
|
41
|
-
hasSuggestions
|
|
41
|
+
hasSuggestions,
|
|
42
|
+
fieldMetadata,
|
|
43
|
+
enableAdditionalInformation
|
|
42
44
|
} = props;
|
|
43
45
|
|
|
44
46
|
let {formatter} = props;
|
|
@@ -182,6 +184,15 @@ const PegaDxilMyDate = props => {
|
|
|
182
184
|
</StyledPegaDxilMyDateWrapper>
|
|
183
185
|
);
|
|
184
186
|
} else {
|
|
187
|
+
const fieldDescription = fieldMetadata?.description;
|
|
188
|
+
const additionalInfo =
|
|
189
|
+
enableAdditionalInformation && fieldDescription
|
|
190
|
+
? {
|
|
191
|
+
heading: label,
|
|
192
|
+
content: fieldDescription
|
|
193
|
+
}
|
|
194
|
+
: undefined;
|
|
195
|
+
|
|
185
196
|
dateComponent = (
|
|
186
197
|
<StyledPegaDxilMyDateWrapper>
|
|
187
198
|
<DateInput
|
|
@@ -189,6 +200,7 @@ const PegaDxilMyDate = props => {
|
|
|
189
200
|
label={label}
|
|
190
201
|
labelHidden={hideLabel}
|
|
191
202
|
info={validatemessage || helperText}
|
|
203
|
+
additionalInfo={additionalInfo}
|
|
192
204
|
status={status}
|
|
193
205
|
value={value || undefined}
|
|
194
206
|
disabled={disabled}
|
|
@@ -222,13 +234,15 @@ PegaDxilMyDate.defaultProps = {
|
|
|
222
234
|
showWeekNumber: false,
|
|
223
235
|
nextYearRange: "",
|
|
224
236
|
previousYearRange: "",
|
|
225
|
-
testId:
|
|
237
|
+
testId: "",
|
|
226
238
|
showAsFormattedText: false,
|
|
227
239
|
additionalProps: {},
|
|
228
240
|
displayMode: null,
|
|
229
241
|
variant: "inline",
|
|
230
242
|
formatter: "defaultDate",
|
|
231
|
-
hasSuggestions: false
|
|
243
|
+
hasSuggestions: false,
|
|
244
|
+
fieldMetadata: {},
|
|
245
|
+
enableAdditionalInformation: false
|
|
232
246
|
};
|
|
233
247
|
|
|
234
248
|
PegaDxilMyDate.propTypes = {
|
|
@@ -250,7 +264,9 @@ PegaDxilMyDate.propTypes = {
|
|
|
250
264
|
displayMode: PropTypes.string,
|
|
251
265
|
variant: PropTypes.string,
|
|
252
266
|
formatter: PropTypes.string,
|
|
253
|
-
hasSuggestions: PropTypes.bool
|
|
267
|
+
hasSuggestions: PropTypes.bool,
|
|
268
|
+
fieldMetadata: PropTypes.objectOf(PropTypes.any),
|
|
269
|
+
enableAdditionalInformation: PropTypes.bool
|
|
254
270
|
};
|
|
255
271
|
|
|
256
272
|
export default PegaDxilMyDate;
|
|
@@ -40,12 +40,22 @@ const PegaDxilMyDateTime = props => {
|
|
|
40
40
|
additionalProps,
|
|
41
41
|
displayMode,
|
|
42
42
|
variant,
|
|
43
|
-
hasSuggestions
|
|
43
|
+
hasSuggestions,
|
|
44
|
+
fieldMetadata,
|
|
45
|
+
enableAdditionalInformation
|
|
44
46
|
} = props;
|
|
45
47
|
let { formatter } = props;
|
|
46
48
|
const pConn = getPConnect();
|
|
47
49
|
const actions = pConn.getActionsApi();
|
|
48
50
|
const propName = pConn.getStateProps().value;
|
|
51
|
+
const fieldDescription = fieldMetadata?.description;
|
|
52
|
+
const additionalInfo =
|
|
53
|
+
enableAdditionalInformation && fieldDescription
|
|
54
|
+
? {
|
|
55
|
+
heading: label,
|
|
56
|
+
content: fieldDescription
|
|
57
|
+
}
|
|
58
|
+
: undefined;
|
|
49
59
|
|
|
50
60
|
const environmentInfo = PCore.getEnvironmentInfo();
|
|
51
61
|
const timezone = environmentInfo && environmentInfo.getTimeZone();
|
|
@@ -181,6 +191,7 @@ const PegaDxilMyDateTime = props => {
|
|
|
181
191
|
label={label}
|
|
182
192
|
labelHidden={hideLabel}
|
|
183
193
|
info={validatemessage || helperText}
|
|
194
|
+
additionalInfo={additionalInfo}
|
|
184
195
|
status={status}
|
|
185
196
|
value={DateTimeFormatter.convertToTimezone(value, { timezone }) || undefined}
|
|
186
197
|
withSeconds={withSeconds}
|
|
@@ -218,12 +229,14 @@ PegaDxilMyDateTime.defaultProps = {
|
|
|
218
229
|
showWeekNumber: false,
|
|
219
230
|
nextYearRange: "",
|
|
220
231
|
previousYearRange: "",
|
|
221
|
-
testId:
|
|
232
|
+
testId: "",
|
|
222
233
|
additionalProps: {},
|
|
223
234
|
displayMode: null,
|
|
224
235
|
variant: "inline",
|
|
225
236
|
Format: "defaultDateTime",
|
|
226
|
-
hasSuggestions: false
|
|
237
|
+
hasSuggestions: false,
|
|
238
|
+
fieldMetadata: {},
|
|
239
|
+
enableAdditionalInformation: false
|
|
227
240
|
};
|
|
228
241
|
|
|
229
242
|
PegaDxilMyDateTime.propTypes = {
|
|
@@ -248,7 +261,9 @@ PegaDxilMyDateTime.propTypes = {
|
|
|
248
261
|
variant: PropTypes.string,
|
|
249
262
|
formatter: PropTypes.string,
|
|
250
263
|
Format: PropTypes.string,
|
|
251
|
-
hasSuggestions: PropTypes.bool
|
|
264
|
+
hasSuggestions: PropTypes.bool,
|
|
265
|
+
fieldMetadata: PropTypes.objectOf(PropTypes.any),
|
|
266
|
+
enableAdditionalInformation: PropTypes.bool
|
|
252
267
|
};
|
|
253
268
|
|
|
254
269
|
export default PegaDxilMyDateTime;
|
|
@@ -30,7 +30,9 @@ const PegaDxilMyDecimal = props => {
|
|
|
30
30
|
notation,
|
|
31
31
|
currencyISOCode,
|
|
32
32
|
isTableFormatter,
|
|
33
|
-
hasSuggestions
|
|
33
|
+
hasSuggestions,
|
|
34
|
+
fieldMetadata,
|
|
35
|
+
enableAdditionalInformation
|
|
34
36
|
} = props;
|
|
35
37
|
let { showGroupSeparators } = props;
|
|
36
38
|
let { currencyDisplay } = props;
|
|
@@ -38,6 +40,14 @@ const PegaDxilMyDecimal = props => {
|
|
|
38
40
|
const actions = pConn.getActionsApi();
|
|
39
41
|
const propName = pConn.getStateProps().value;
|
|
40
42
|
const [decimalValue, setDecimalValue] = useState(value?.toString());
|
|
43
|
+
const fieldDescription = fieldMetadata?.description;
|
|
44
|
+
const additionalInfo =
|
|
45
|
+
enableAdditionalInformation && fieldDescription
|
|
46
|
+
? {
|
|
47
|
+
heading: label,
|
|
48
|
+
content: fieldDescription
|
|
49
|
+
}
|
|
50
|
+
: undefined;
|
|
41
51
|
const hasValueChange = useRef(false);
|
|
42
52
|
|
|
43
53
|
let { readOnly, required, disabled } = props;
|
|
@@ -187,6 +197,7 @@ const PegaDxilMyDecimal = props => {
|
|
|
187
197
|
numberOfDecimals={numberOfDecimals}
|
|
188
198
|
showGroupSeparators={showGroupSeparators}
|
|
189
199
|
data-testid={testId}
|
|
200
|
+
additionalInfo={additionalInfo}
|
|
190
201
|
onChange={(enteredValue) => {
|
|
191
202
|
if (hasSuggestions) {
|
|
192
203
|
setStatus(undefined);
|
|
@@ -222,7 +233,7 @@ PegaDxilMyDecimal.defaultProps = {
|
|
|
222
233
|
disabled: false,
|
|
223
234
|
readOnly: false,
|
|
224
235
|
required: false,
|
|
225
|
-
testId:
|
|
236
|
+
testId: "",
|
|
226
237
|
decimalPrecision: '',
|
|
227
238
|
showGroupSeparators: false,
|
|
228
239
|
displayMode: null,
|
|
@@ -236,7 +247,9 @@ PegaDxilMyDecimal.defaultProps = {
|
|
|
236
247
|
currencyDisplay: 'symbol',
|
|
237
248
|
currencyDecimalPrecision: 'auto',
|
|
238
249
|
isTableFormatter: false,
|
|
239
|
-
hasSuggestions: false
|
|
250
|
+
hasSuggestions: false,
|
|
251
|
+
fieldMetadata: {},
|
|
252
|
+
enableAdditionalInformation: false
|
|
240
253
|
};
|
|
241
254
|
|
|
242
255
|
PegaDxilMyDecimal.propTypes = {
|
|
@@ -264,7 +277,9 @@ PegaDxilMyDecimal.propTypes = {
|
|
|
264
277
|
currencyDisplay: PropTypes.string,
|
|
265
278
|
currencyDecimalPrecision: PropTypes.string,
|
|
266
279
|
isTableFormatter: PropTypes.bool,
|
|
267
|
-
hasSuggestions: PropTypes.bool
|
|
280
|
+
hasSuggestions: PropTypes.bool,
|
|
281
|
+
fieldMetadata: PropTypes.objectOf(PropTypes.any),
|
|
282
|
+
enableAdditionalInformation: PropTypes.bool
|
|
268
283
|
};
|
|
269
284
|
|
|
270
285
|
export default PegaDxilMyDecimal;
|
|
@@ -70,12 +70,23 @@ const PegaDxilMyEmail = props => {
|
|
|
70
70
|
additionalProps,
|
|
71
71
|
variant,
|
|
72
72
|
isTableFormatter,
|
|
73
|
-
hasSuggestions
|
|
73
|
+
hasSuggestions,
|
|
74
|
+
fieldMetadata,
|
|
75
|
+
enableAdditionalInformation
|
|
74
76
|
} = props;
|
|
75
77
|
const { formatter } = props;
|
|
76
78
|
const pConn = getPConnect();
|
|
77
79
|
const actions = pConn.getActionsApi();
|
|
78
80
|
const propName = pConn.getStateProps().value;
|
|
81
|
+
const fieldDescription = fieldMetadata?.description;
|
|
82
|
+
const additionalInfo =
|
|
83
|
+
enableAdditionalInformation && fieldDescription
|
|
84
|
+
? {
|
|
85
|
+
heading: label,
|
|
86
|
+
content: fieldDescription
|
|
87
|
+
}
|
|
88
|
+
: undefined;
|
|
89
|
+
|
|
79
90
|
const hasValueChange = useRef(false);
|
|
80
91
|
|
|
81
92
|
|
|
@@ -157,6 +168,7 @@ const PegaDxilMyEmail = props => {
|
|
|
157
168
|
label={label}
|
|
158
169
|
labelHidden={hideLabel}
|
|
159
170
|
info={validatemessage || helperText}
|
|
171
|
+
additionalInfo={additionalInfo}
|
|
160
172
|
value={inputValue}
|
|
161
173
|
status={status}
|
|
162
174
|
placeholder={placeholder}
|
|
@@ -199,13 +211,15 @@ PegaDxilMyEmail.defaultProps = {
|
|
|
199
211
|
disabled: false,
|
|
200
212
|
readOnly: false,
|
|
201
213
|
required: false,
|
|
202
|
-
testId:
|
|
214
|
+
testId: '',
|
|
203
215
|
displayMode: null,
|
|
204
216
|
additionalProps: {},
|
|
205
217
|
variant: 'inline',
|
|
206
218
|
formatter: '',
|
|
207
219
|
isTableFormatter: false,
|
|
208
|
-
hasSuggestions: false
|
|
220
|
+
hasSuggestions: false,
|
|
221
|
+
fieldMetadata: {},
|
|
222
|
+
enableAdditionalInformation: false
|
|
209
223
|
};
|
|
210
224
|
|
|
211
225
|
PegaDxilMyEmail.propTypes = {
|
|
@@ -225,7 +239,9 @@ PegaDxilMyEmail.propTypes = {
|
|
|
225
239
|
variant: PropTypes.string,
|
|
226
240
|
formatter: PropTypes.string,
|
|
227
241
|
isTableFormatter: PropTypes.bool,
|
|
228
|
-
hasSuggestions: PropTypes.bool
|
|
242
|
+
hasSuggestions: PropTypes.bool,
|
|
243
|
+
fieldMetadata: PropTypes.objectOf(PropTypes.any),
|
|
244
|
+
enableAdditionalInformation: PropTypes.bool
|
|
229
245
|
};
|
|
230
246
|
|
|
231
247
|
export default PegaDxilMyEmail;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Grid } from '@pega/cosmos-react-core';
|
|
1
|
+
import { Grid, FieldGroup } from '@pega/cosmos-react-core';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
|
|
4
4
|
import StyledPegaDxilMyFormWrapper from './styles';
|
|
@@ -11,24 +11,30 @@ import StyledPegaDxilMyFormWrapper from './styles';
|
|
|
11
11
|
export default function PegaDxilMyForm(props) {
|
|
12
12
|
|
|
13
13
|
|
|
14
|
-
const { children, NumCols } = props;
|
|
14
|
+
const { children, NumCols, label, showLabel, getPConnect } = props;
|
|
15
|
+
const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
|
|
15
16
|
|
|
16
17
|
const nCols = parseInt(NumCols, 10);
|
|
17
18
|
|
|
18
19
|
// console.log(`Rendering ${getPConnect()?.getComponentName()} with ${template} with ${children?.length} Region(s)`);
|
|
19
20
|
|
|
21
|
+
|
|
22
|
+
|
|
20
23
|
return (
|
|
21
24
|
<StyledPegaDxilMyFormWrapper>
|
|
22
|
-
<
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
25
|
+
<FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
|
|
26
|
+
<Grid container={{
|
|
27
|
+
cols: `repeat(${nCols}, minmax(0, 1fr))`,
|
|
28
|
+
gap: 2,
|
|
29
|
+
wrap: `wrap`
|
|
30
|
+
}}>
|
|
31
|
+
{children}
|
|
32
|
+
</Grid>
|
|
33
|
+
</FieldGroup>
|
|
29
34
|
</StyledPegaDxilMyFormWrapper>
|
|
30
35
|
);
|
|
31
36
|
|
|
37
|
+
|
|
32
38
|
}
|
|
33
39
|
|
|
34
40
|
PegaDxilMyForm.defaultProps = {
|
|
@@ -37,7 +37,9 @@ const PegaDxilMyInteger = props => {
|
|
|
37
37
|
negative,
|
|
38
38
|
notation,
|
|
39
39
|
isTableFormatter,
|
|
40
|
-
hasSuggestions
|
|
40
|
+
hasSuggestions,
|
|
41
|
+
fieldMetadata,
|
|
42
|
+
enableAdditionalInformation
|
|
41
43
|
} = props;
|
|
42
44
|
let { showGroupSeparators } = props;
|
|
43
45
|
let { currencyDisplay } = props;
|
|
@@ -46,6 +48,15 @@ const PegaDxilMyInteger = props => {
|
|
|
46
48
|
const propName = pConn.getStateProps().value;
|
|
47
49
|
const [integerValue, setIntegerValue] = useState(value?.toString());
|
|
48
50
|
const sliderDefaultValue = !defaultValue && defaultValue !== 0 ? max : defaultValue;
|
|
51
|
+
const fieldDescription = fieldMetadata?.description;
|
|
52
|
+
const additionalInfo =
|
|
53
|
+
enableAdditionalInformation && fieldDescription
|
|
54
|
+
? {
|
|
55
|
+
heading: label,
|
|
56
|
+
content: fieldDescription
|
|
57
|
+
}
|
|
58
|
+
: undefined;
|
|
59
|
+
|
|
49
60
|
const hasValueChange = useRef(false);
|
|
50
61
|
|
|
51
62
|
|
|
@@ -207,6 +218,7 @@ const PegaDxilMyInteger = props => {
|
|
|
207
218
|
label={label}
|
|
208
219
|
labelHidden={hideLabel}
|
|
209
220
|
info={validatemessage || helperText}
|
|
221
|
+
additionalInfo={additionalInfo}
|
|
210
222
|
value={!integerValue ? sliderDefaultValue : Number(integerValue)}
|
|
211
223
|
status={status}
|
|
212
224
|
placeholder={placeholder}
|
|
@@ -234,6 +246,7 @@ const PegaDxilMyInteger = props => {
|
|
|
234
246
|
label={label}
|
|
235
247
|
labelHidden={hideLabel}
|
|
236
248
|
info={validatemessage || helperText}
|
|
249
|
+
additionalInfo={additionalInfo}
|
|
237
250
|
value={integerValue}
|
|
238
251
|
status={status}
|
|
239
252
|
placeholder={displayAs === 'input' ? placeholder : ''}
|
|
@@ -272,7 +285,7 @@ PegaDxilMyInteger.defaultProps = {
|
|
|
272
285
|
disabled: false,
|
|
273
286
|
readOnly: false,
|
|
274
287
|
required: false,
|
|
275
|
-
testId:
|
|
288
|
+
testId: '',
|
|
276
289
|
showGroupSeparators: false,
|
|
277
290
|
displayMode: null,
|
|
278
291
|
displayAs: 'input',
|
|
@@ -292,7 +305,9 @@ PegaDxilMyInteger.defaultProps = {
|
|
|
292
305
|
currencyDisplay: 'symbol',
|
|
293
306
|
currencyDecimalPrecision: 'auto',
|
|
294
307
|
isTableFormatter: false,
|
|
295
|
-
hasSuggestions: false
|
|
308
|
+
hasSuggestions: false,
|
|
309
|
+
fieldMetadata: {},
|
|
310
|
+
enableAdditionalInformation: false
|
|
296
311
|
};
|
|
297
312
|
|
|
298
313
|
PegaDxilMyInteger.propTypes = {
|
|
@@ -327,7 +342,9 @@ PegaDxilMyInteger.propTypes = {
|
|
|
327
342
|
currencyDisplay: PropTypes.string,
|
|
328
343
|
currencyDecimalPrecision: PropTypes.string,
|
|
329
344
|
isTableFormatter: PropTypes.bool,
|
|
330
|
-
hasSuggestions: PropTypes.bool
|
|
345
|
+
hasSuggestions: PropTypes.bool,
|
|
346
|
+
fieldMetadata: PropTypes.objectOf(PropTypes.any),
|
|
347
|
+
enableAdditionalInformation: PropTypes.bool
|
|
331
348
|
};
|
|
332
349
|
|
|
333
350
|
export default PegaDxilMyInteger;
|
|
@@ -71,7 +71,8 @@ const PegaDxilMyParagraph = props => {
|
|
|
71
71
|
additionalProps,
|
|
72
72
|
variant,
|
|
73
73
|
isTableFormatter,
|
|
74
|
-
hasSuggestions
|
|
74
|
+
hasSuggestions,
|
|
75
|
+
enableAdditionalInformation
|
|
75
76
|
} = props;
|
|
76
77
|
const { formatter } = props;
|
|
77
78
|
const pConn = getPConnect();
|
|
@@ -79,6 +80,7 @@ const PegaDxilMyParagraph = props => {
|
|
|
79
80
|
const propName = pConn.getStateProps().value;
|
|
80
81
|
const maxLength = fieldMetadata?.maxLength;
|
|
81
82
|
const hasValueChange = useRef(false);
|
|
83
|
+
const fieldDescription = fieldMetadata?.description;
|
|
82
84
|
|
|
83
85
|
|
|
84
86
|
// BUG-547602: Temporary type coercion for 8.5 until DXAPIs are enhanced to pass original pxViewMetadata JSON, respecting boolean primitives
|
|
@@ -183,6 +185,14 @@ const PegaDxilMyParagraph = props => {
|
|
|
183
185
|
}
|
|
184
186
|
}}
|
|
185
187
|
onResolveSuggestion={onResolveSuggestionHandler}
|
|
188
|
+
{...(enableAdditionalInformation && fieldDescription
|
|
189
|
+
? {
|
|
190
|
+
additionalInfo: {
|
|
191
|
+
heading: label,
|
|
192
|
+
content: fieldDescription
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
: {})}
|
|
186
196
|
/>
|
|
187
197
|
</StyledPegaDxilMyParagraphWrapper>
|
|
188
198
|
);
|
|
@@ -197,14 +207,15 @@ PegaDxilMyParagraph.defaultProps = {
|
|
|
197
207
|
disabled: false,
|
|
198
208
|
readOnly: false,
|
|
199
209
|
required: false,
|
|
200
|
-
testId:
|
|
210
|
+
testId: '',
|
|
201
211
|
displayMode: null,
|
|
202
212
|
fieldMetadata: {},
|
|
203
213
|
additionalProps: {},
|
|
204
214
|
variant: 'inline',
|
|
205
215
|
formatter: '',
|
|
206
216
|
isTableFormatter: false,
|
|
207
|
-
hasSuggestions: false
|
|
217
|
+
hasSuggestions: false,
|
|
218
|
+
enableAdditionalInformation: false
|
|
208
219
|
};
|
|
209
220
|
|
|
210
221
|
PegaDxilMyParagraph.propTypes = {
|
|
@@ -225,7 +236,8 @@ PegaDxilMyParagraph.propTypes = {
|
|
|
225
236
|
variant: PropTypes.string,
|
|
226
237
|
formatter: PropTypes.string,
|
|
227
238
|
isTableFormatter: PropTypes.bool,
|
|
228
|
-
hasSuggestions: PropTypes.bool
|
|
239
|
+
hasSuggestions: PropTypes.bool,
|
|
240
|
+
enableAdditionalInformation: PropTypes.bool
|
|
229
241
|
};
|
|
230
242
|
|
|
231
243
|
export default PegaDxilMyParagraph;
|