@pega/react-sdk-overrides 8.23.11 → 23.1.11

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.
Files changed (233) hide show
  1. package/LICENSE +201 -0
  2. package/README.md +17 -0
  3. package/SECURITY.md +10 -0
  4. package/lib/designSystemExtension/AlertBanner/AlertBanner.tsx +12 -16
  5. package/lib/designSystemExtension/Banner/Banner.tsx +21 -7
  6. package/lib/designSystemExtension/CaseSummaryFields/CaseSummaryFields.css +0 -1
  7. package/lib/designSystemExtension/CaseSummaryFields/CaseSummaryFields.tsx +36 -26
  8. package/lib/designSystemExtension/DetailsFields/DetailsFields.tsx +21 -28
  9. package/lib/designSystemExtension/DetailsFields/index.tsx +1 -1
  10. package/lib/designSystemExtension/FieldGroup/FieldGroup.tsx +50 -18
  11. package/lib/designSystemExtension/FieldGroupList/FieldGroupList.tsx +14 -11
  12. package/lib/designSystemExtension/FieldValueList/FieldValueList.tsx +18 -27
  13. package/lib/designSystemExtension/Operator/Operator.tsx +100 -84
  14. package/lib/designSystemExtension/Pulse/Pulse.tsx +21 -19
  15. package/lib/designSystemExtension/RichTextEditor/RichTextEditor.tsx +122 -0
  16. package/lib/designSystemExtension/RichTextEditor/index.tsx +1 -0
  17. package/lib/designSystemExtension/WssQuickCreate/WssQuickCreate.tsx +21 -12
  18. package/lib/field/AutoComplete/AutoComplete.tsx +33 -16
  19. package/lib/field/AutoComplete/config-ext.json +2 -3
  20. package/lib/field/CancelAlert/CancelAlert.tsx +100 -81
  21. package/lib/field/CancelAlert/index.tsx +1 -1
  22. package/lib/field/Checkbox/Checkbox.tsx +27 -16
  23. package/lib/field/Checkbox/config-ext.json +2 -3
  24. package/lib/field/Currency/Currency.tsx +30 -47
  25. package/lib/field/Currency/config-ext.json +2 -3
  26. package/lib/field/Currency/currency-utils.ts +10 -21
  27. package/lib/field/Date/Date.tsx +24 -13
  28. package/lib/field/Date/config-ext.json +2 -3
  29. package/lib/field/DateTime/DateTime.tsx +21 -10
  30. package/lib/field/DateTime/config-ext.json +1 -2
  31. package/lib/field/Decimal/Decimal.tsx +31 -40
  32. package/lib/field/Decimal/config-ext.json +1 -2
  33. package/lib/field/Decimal/index.tsx +1 -1
  34. package/lib/field/Dropdown/Dropdown.tsx +128 -31
  35. package/lib/field/Dropdown/config-ext.json +1 -2
  36. package/lib/field/Email/Email.tsx +16 -7
  37. package/lib/field/Email/config-ext.json +1 -2
  38. package/lib/field/Email/index.tsx +1 -1
  39. package/lib/field/Group/Group.tsx +39 -0
  40. package/lib/field/Group/config-ext.json +7 -0
  41. package/lib/field/Group/index.tsx +1 -0
  42. package/lib/field/Integer/Integer.tsx +15 -6
  43. package/lib/field/Integer/config-ext.json +1 -2
  44. package/lib/field/Percentage/Percentage.tsx +52 -39
  45. package/lib/field/Percentage/config-ext.json +1 -2
  46. package/lib/field/Phone/Phone.tsx +15 -6
  47. package/lib/field/Phone/index.tsx +1 -1
  48. package/lib/field/RadioButtons/RadioButtons.tsx +26 -34
  49. package/lib/field/RadioButtons/config-ext.json +1 -2
  50. package/lib/field/RichText/RichText.tsx +96 -0
  51. package/lib/field/RichText/index.tsx +1 -0
  52. package/lib/field/ScalarList/ScalarList.tsx +63 -0
  53. package/lib/field/ScalarList/config-ext.json +7 -0
  54. package/lib/field/ScalarList/index.tsx +1 -0
  55. package/lib/field/SemanticLink/SemanticLink.tsx +26 -25
  56. package/lib/field/SemanticLink/config-ext.json +1 -2
  57. package/lib/field/SemanticLink/utils.ts +8 -11
  58. package/lib/field/TextArea/TextArea.tsx +15 -5
  59. package/lib/field/TextArea/config-ext.json +1 -2
  60. package/lib/field/TextContent/TextContent.tsx +9 -2
  61. package/lib/field/TextContent/config-ext.json +1 -2
  62. package/lib/field/TextInput/TextInput.tsx +18 -7
  63. package/lib/field/TextInput/config-ext.json +1 -2
  64. package/lib/field/TextInput/index.tsx +1 -1
  65. package/lib/field/Time/Time.tsx +14 -19
  66. package/lib/field/Time/config-ext.json +1 -2
  67. package/lib/field/URL/URL.tsx +15 -6
  68. package/lib/field/URL/config-ext.json +1 -2
  69. package/lib/field/URL/index.tsx +1 -1
  70. package/lib/field/UserReference/UserReference.tsx +52 -60
  71. package/lib/field/UserReference/UserReferenceUtils.ts +2 -2
  72. package/lib/field/UserReference/config-ext.json +1 -2
  73. package/lib/helpers/attachmentHelpers.ts +15 -10
  74. package/lib/helpers/case-utils.tsx +5 -10
  75. package/lib/helpers/common-utils.ts +6 -2
  76. package/lib/helpers/data_page.ts +3 -7
  77. package/lib/helpers/date-format-utils.ts +4 -4
  78. package/lib/helpers/event-utils.ts +4 -4
  79. package/lib/helpers/field-group-utils.ts +6 -8
  80. package/lib/helpers/formatters/Boolean.ts +9 -26
  81. package/lib/helpers/formatters/Currency.ts +22 -28
  82. package/lib/helpers/formatters/CurrencyMap.ts +512 -505
  83. package/lib/helpers/formatters/Date.ts +20 -26
  84. package/lib/helpers/formatters/common.ts +2 -7
  85. package/lib/helpers/formatters/index.ts +29 -22
  86. package/lib/helpers/reactContextHelpers.ts +2 -2
  87. package/lib/helpers/simpleTableHelpers.ts +63 -87
  88. package/lib/helpers/state-utils.tsx +5 -12
  89. package/lib/helpers/template-utils.ts +4 -10
  90. package/lib/helpers/utils.ts +5 -5
  91. package/lib/helpers/versionHelpers.ts +1 -7
  92. package/lib/infra/ActionButtons/ActionButtons.tsx +44 -45
  93. package/lib/infra/ActionButtons/index.tsx +1 -1
  94. package/lib/infra/Assignment/Assignment.tsx +102 -86
  95. package/lib/infra/Assignment/index.tsx +1 -1
  96. package/lib/infra/AssignmentCard/AssignmentCard.tsx +19 -26
  97. package/lib/infra/AssignmentCard/index.tsx +1 -1
  98. package/lib/infra/Containers/FlowContainer/FlowContainer.tsx +93 -240
  99. package/lib/infra/Containers/FlowContainer/helpers.ts +34 -48
  100. package/lib/infra/Containers/FlowContainer/index.tsx +1 -1
  101. package/lib/infra/Containers/ModalViewContainer/ListViewActionButtons/ListViewActionButtons.tsx +65 -0
  102. package/lib/infra/Containers/ModalViewContainer/ListViewActionButtons/index.tsx +1 -0
  103. package/lib/infra/Containers/ModalViewContainer/ModalViewContainer.tsx +229 -223
  104. package/lib/infra/Containers/ModalViewContainer/index.tsx +1 -1
  105. package/lib/infra/Containers/SimpleView/SimpleView.tsx +48 -0
  106. package/lib/infra/Containers/SimpleView/helper.ts +125 -0
  107. package/lib/infra/Containers/SimpleView/index.tsx +1 -0
  108. package/lib/infra/Containers/ViewContainer/ViewContainer.tsx +47 -64
  109. package/lib/infra/Containers/helpers.ts +6 -0
  110. package/lib/infra/DashboardFilter/DashboardFilter.tsx +25 -54
  111. package/lib/infra/DashboardFilter/filterUtils.tsx +12 -42
  112. package/lib/infra/DeferLoad/DeferLoad.tsx +21 -33
  113. package/lib/infra/DeferLoad/index.tsx +1 -1
  114. package/lib/infra/ErrorBoundary/ErrorBoundary.tsx +21 -39
  115. package/lib/infra/MultiStep/MultiStep.css +11 -15
  116. package/lib/infra/MultiStep/MultiStep.tsx +180 -216
  117. package/lib/infra/MultiStep/index.tsx +1 -1
  118. package/lib/infra/NavBar/NavBar.css +103 -105
  119. package/lib/infra/NavBar/NavBar.tsx +26 -45
  120. package/lib/infra/Reference/Reference.tsx +16 -22
  121. package/lib/infra/Region/Region.tsx +9 -9
  122. package/lib/infra/RootContainer/RootContainer.tsx +75 -120
  123. package/lib/infra/RootContainer/index.tsx +1 -1
  124. package/lib/infra/Stages/Stages.tsx +36 -41
  125. package/lib/infra/VerticalTabs/LeftAlignVerticalTabs/LeftAlignVerticalTabs.tsx +17 -10
  126. package/lib/infra/VerticalTabs/VerticalTabs/VerticalTabs.tsx +29 -36
  127. package/lib/infra/View/View.tsx +25 -29
  128. package/lib/template/AppShell/AppShell.css +22 -23
  129. package/lib/template/AppShell/AppShell.tsx +47 -71
  130. package/lib/template/BannerPage/BannerPage.tsx +26 -33
  131. package/lib/template/CaseSummary/CaseSummary.tsx +66 -19
  132. package/lib/template/CaseSummary/config-ext.json +1 -2
  133. package/lib/template/CaseView/CaseView.tsx +44 -74
  134. package/lib/template/CaseView/config-ext.json +1 -2
  135. package/lib/template/CaseViewActionsMenu/CaseViewActionsMenu.tsx +66 -31
  136. package/lib/template/Confirmation/Confirmation.tsx +24 -55
  137. package/lib/template/Confirmation/config-ext.json +1 -2
  138. package/lib/template/DataReference/DataReference.tsx +112 -142
  139. package/lib/template/DataReference/config-ext.json +1 -2
  140. package/lib/template/DefaultForm/DefaultForm.css +7 -3
  141. package/lib/template/DefaultForm/DefaultForm.tsx +15 -16
  142. package/lib/template/DefaultForm/config-ext.json +1 -2
  143. package/lib/template/Details/Details/Details.tsx +24 -28
  144. package/lib/template/Details/DetailsSubTabs/DetailsSubTabs.tsx +15 -22
  145. package/lib/template/Details/DetailsSubTabs/config-ext.json +1 -2
  146. package/lib/template/Details/DetailsThreeColumn/DetailsThreeColumn.tsx +25 -29
  147. package/lib/template/Details/DetailsThreeColumn/config-ext.json +1 -2
  148. package/lib/template/Details/DetailsTwoColumn/DetailsTwoColumn.tsx +25 -29
  149. package/lib/template/Details/DetailsTwoColumn/config-ext.json +1 -2
  150. package/lib/template/Details/DetailsTwoColumn/index.tsx +1 -1
  151. package/lib/template/Details/DynamicTabs/DynamicTabs.tsx +79 -0
  152. package/lib/template/Details/DynamicTabs/config.json +36 -0
  153. package/lib/template/Details/DynamicTabs/index.tsx +1 -0
  154. package/lib/template/FieldGroupTemplate/FieldGroupTemplate.tsx +22 -35
  155. package/lib/template/InlineDashboard/InlineDashboard.tsx +16 -14
  156. package/lib/template/InlineDashboardPage/InlineDashboardPage.tsx +19 -21
  157. package/lib/template/ListPage/ListPage.tsx +12 -16
  158. package/lib/template/ListPage/config-ext.json +1 -2
  159. package/lib/template/ListView/DefaultViewMeta.ts +1 -3
  160. package/lib/template/ListView/ListView.tsx +247 -309
  161. package/lib/template/ListView/config-ext.json +1 -2
  162. package/lib/template/ListView/hooks.ts +24 -26
  163. package/lib/template/ListView/utils.ts +205 -94
  164. package/lib/template/MultiReferenceReadOnly/MultiReferenceReadOnly.tsx +25 -34
  165. package/lib/template/NarrowWide/NarrowWide/NarrowWide.css +0 -2
  166. package/lib/template/NarrowWide/NarrowWide/NarrowWide.tsx +31 -29
  167. package/lib/template/NarrowWide/NarrowWideDetails/NarrowWideDetails.tsx +27 -31
  168. package/lib/template/NarrowWide/NarrowWideDetails/config-ext.json +1 -2
  169. package/lib/template/NarrowWide/NarrowWideForm/NarrowWideForm.css +0 -2
  170. package/lib/template/NarrowWide/NarrowWideForm/NarrowWideForm.tsx +17 -19
  171. package/lib/template/NarrowWide/NarrowWideForm/config-ext.json +1 -2
  172. package/lib/template/NarrowWide/NarrowWidePage/NarrowWidePage.tsx +16 -26
  173. package/lib/template/NarrowWide/NarrowWidePage/config-ext.json +1 -2
  174. package/lib/template/OneColumn/OneColumn/OneColumn.tsx +17 -17
  175. package/lib/template/OneColumn/OneColumn/config-ext.json +1 -2
  176. package/lib/template/OneColumn/OneColumnPage/OneColumnPage.tsx +9 -16
  177. package/lib/template/OneColumn/OneColumnPage/config-ext.json +1 -2
  178. package/lib/template/OneColumn/OneColumnTab/OneColumnTab.tsx +8 -14
  179. package/lib/template/OneColumn/OneColumnTab/config-ext.json +1 -2
  180. package/lib/template/PromotedFilters/PromotedFilters.css +1 -1
  181. package/lib/template/PromotedFilters/PromotedFilters.tsx +39 -33
  182. package/lib/template/SimpleTable/SimpleTable/SimpleTable.tsx +113 -15
  183. package/lib/template/SimpleTable/SimpleTable/config-ext.json +1 -2
  184. package/lib/template/SimpleTable/SimpleTableManual/SimpleTableManual.tsx +187 -104
  185. package/lib/template/SimpleTable/SimpleTableSelect/SimpleTableSelect.tsx +33 -44
  186. package/lib/template/SingleReferenceReadOnly/SingleReferenceReadOnly.tsx +45 -48
  187. package/lib/template/SubTabs/SubTabs.tsx +26 -45
  188. package/lib/template/SubTabs/config-ext.json +1 -2
  189. package/lib/template/SubTabs/tabUtils.ts +2 -9
  190. package/lib/template/TwoColumn/TwoColumn/TwoColumn.css +0 -1
  191. package/lib/template/TwoColumn/TwoColumn/TwoColumn.tsx +33 -36
  192. package/lib/template/TwoColumn/TwoColumn/config-ext.json +1 -2
  193. package/lib/template/TwoColumn/TwoColumnPage/TwoColumnPage.tsx +9 -16
  194. package/lib/template/TwoColumn/TwoColumnPage/config-ext.json +1 -2
  195. package/lib/template/TwoColumn/TwoColumnTab/TwoColumnTab.tsx +33 -33
  196. package/lib/template/TwoColumn/TwoColumnTab/config-ext.json +1 -2
  197. package/lib/template/WideNarrow/WideNarrow/WideNarrow.css +0 -2
  198. package/lib/template/WideNarrow/WideNarrow/WideNarrow.tsx +29 -27
  199. package/lib/template/WideNarrow/WideNarrowDetails/WideNarrowDetails.tsx +39 -33
  200. package/lib/template/WideNarrow/WideNarrowDetails/config-ext.json +1 -2
  201. package/lib/template/WideNarrow/WideNarrowForm/WideNarrowForm.css +0 -2
  202. package/lib/template/WideNarrow/WideNarrowForm/WideNarrowForm.tsx +16 -18
  203. package/lib/template/WideNarrow/WideNarrowForm/config-ext.json +1 -2
  204. package/lib/template/WideNarrow/WideNarrowPage/WideNarrowPage.tsx +15 -25
  205. package/lib/template/WideNarrow/WideNarrowPage/config-ext.json +1 -2
  206. package/lib/template/WideNarrow/WideNarrowPage/index.tsx +1 -1
  207. package/lib/template/WssNavBar/WssNavBar.tsx +24 -10
  208. package/lib/widget/AppAnnouncement/AppAnnouncement.tsx +34 -41
  209. package/lib/widget/AppAnnouncement/config-ext.json +1 -2
  210. package/lib/widget/Attachment/Attachment.css +60 -1
  211. package/lib/widget/Attachment/Attachment.tsx +379 -394
  212. package/lib/widget/Attachment/index.tsx +1 -1
  213. package/lib/widget/CaseHistory/CaseHistory.tsx +67 -67
  214. package/lib/widget/CaseHistory/config-ext.json +1 -2
  215. package/lib/widget/CaseHistory/index.tsx +1 -1
  216. package/lib/widget/FileUtility/ActionButtonsForFileUtil/ActionButtonsForFileUtil.tsx +19 -9
  217. package/lib/widget/FileUtility/FileUtility/FileUtility.css +2 -2
  218. package/lib/widget/FileUtility/FileUtility/FileUtility.tsx +322 -245
  219. package/lib/widget/FileUtility/FileUtility/config-ext.json +1 -2
  220. package/lib/widget/Followers/Followers.tsx +27 -25
  221. package/lib/widget/Followers/config-ext.json +1 -2
  222. package/lib/widget/QuickCreate/QuickCreate.tsx +71 -39
  223. package/lib/widget/SummaryItem/SummaryItem.css +9 -9
  224. package/lib/widget/SummaryItem/SummaryItem.tsx +62 -52
  225. package/lib/widget/SummaryItem/index.tsx +1 -1
  226. package/lib/widget/SummaryList/SummaryList.tsx +15 -4
  227. package/lib/widget/ToDo/ToDo.css +4 -4
  228. package/lib/widget/ToDo/ToDo.tsx +72 -116
  229. package/lib/widget/ToDo/config-ext.json +1 -2
  230. package/package.json +5 -2
  231. package/lib/helpers/auth.js +0 -483
  232. package/lib/helpers/authManager.js +0 -634
  233. package/lib/helpers/config_access.js +0 -259
@@ -1,12 +1,13 @@
1
- import React, { useEffect, useState } from 'react';
1
+ import { useEffect, useState } from 'react';
2
2
  import { TextField } from '@material-ui/core';
3
3
  import Autocomplete from '@material-ui/lab/Autocomplete';
4
- import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
5
- import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
6
4
  import isDeepEqual from 'fast-deep-equal/react';
5
+
6
+ import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
7
7
  import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/data_page';
8
8
  import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
9
- import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
9
+ import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
10
+ import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
10
11
 
11
12
  interface IOption {
12
13
  key: string;
@@ -36,7 +37,25 @@ const getDisplayFieldsMetaData = columnList => {
36
37
  return metaDataObj;
37
38
  };
38
39
 
39
- export default function AutoComplete(props) {
40
+ interface AutoCompleteProps extends PConnFieldProps {
41
+ // If any, enter additional props that only exist on AutoComplete here'
42
+ displayMode?: string;
43
+ deferDatasource?: boolean;
44
+ datasourceMetadata?: any;
45
+ status?: string;
46
+ onRecordChange?: any;
47
+ additionalProps?: object;
48
+ listType: string;
49
+ parameters?: any;
50
+ datasource: any;
51
+ columns: any[];
52
+ }
53
+
54
+ export default function AutoComplete(props: AutoCompleteProps) {
55
+ // Get emitted components from map (so we can get any override that may exist)
56
+ const TextInput = getComponentFromMap('TextInput');
57
+ const FieldValueList = getComponentFromMap('FieldValueList');
58
+
40
59
  const {
41
60
  getPConnect,
42
61
  label,
@@ -54,17 +73,18 @@ export default function AutoComplete(props) {
54
73
  hideLabel,
55
74
  onRecordChange
56
75
  } = props;
76
+
57
77
  const context = getPConnect().getContextName();
58
78
  let { listType, parameters, datasource = [], columns = [] } = props;
59
79
  const [inputValue, setInputValue] = useState('');
60
- const [options, setOptions] = useState<Array<IOption>>([]);
80
+ const [options, setOptions] = useState<IOption[]>([]);
61
81
  const [theDatasource, setDatasource] = useState(null);
62
82
  let selectedValue: any = '';
63
83
  const helperTextToDisplay = validatemessage || helperText;
64
84
 
65
85
  const thePConn = getPConnect();
66
86
  const actionsApi = thePConn.getActionsApi();
67
- const propName = thePConn.getStateProps().value;
87
+ const propName = (thePConn.getStateProps() as any).value;
68
88
 
69
89
  if (!isDeepEqual(datasource, theDatasource)) {
70
90
  // inbound datasource is different, so update theDatasource (to trigger useEffect)
@@ -86,13 +106,10 @@ export default function AutoComplete(props) {
86
106
  if (deferDatasource && datasourceMetadata?.datasource?.name) {
87
107
  listType = 'datapage';
88
108
  datasource = datasourceMetadata.datasource.name;
89
- parameters = flattenParameters(datasourceMetadata?.datasource?.parameters);
90
- const displayProp = datasourceMetadata.datasource.propertyForDisplayText.startsWith('@P')
91
- ? datasourceMetadata.datasource.propertyForDisplayText.substring(3)
92
- : datasourceMetadata.datasource.propertyForDisplayText;
93
- const valueProp = datasourceMetadata.datasource.propertyForValue.startsWith('@P')
94
- ? datasourceMetadata.datasource.propertyForValue.substring(3)
95
- : datasourceMetadata.datasource.propertyForValue;
109
+ const { parameters: dataSourceParameters, propertyForDisplayText, propertyForValue } = datasourceMetadata.datasource;
110
+ parameters = flattenParameters(dataSourceParameters);
111
+ const displayProp = propertyForDisplayText.startsWith('@P') ? propertyForDisplayText.substring(3) : propertyForDisplayText;
112
+ const valueProp = propertyForValue.startsWith('@P') ? propertyForValue.substring(3) : propertyForValue;
96
113
  columns = [
97
114
  {
98
115
  key: 'true',
@@ -111,14 +128,14 @@ export default function AutoComplete(props) {
111
128
 
112
129
  useEffect(() => {
113
130
  if (listType === 'associated') {
114
- setOptions(Utils.getOptionList(props, getPConnect().getDataObject()));
131
+ setOptions(Utils.getOptionList(props, getPConnect().getDataObject('')));
115
132
  }
116
133
  }, [theDatasource]);
117
134
 
118
135
  useEffect(() => {
119
136
  if (!displayMode && listType !== 'associated') {
120
137
  getDataPage(datasource, parameters, context).then((results: any) => {
121
- const optionsData: Array<any> = [];
138
+ const optionsData: any[] = [];
122
139
  const displayColumn = getDisplayFieldsMetaData(columns);
123
140
  results?.forEach(element => {
124
141
  const val = element[displayColumn.primary]?.toString();
@@ -4,8 +4,7 @@
4
4
  "description": "Picklist",
5
5
  "type": "Field",
6
6
  "subtype": "Picklist",
7
- "componentKey" : "AutoComplete",
7
+ "componentKey": "AutoComplete",
8
8
  "icon": "",
9
- "properties": [
10
- ]
9
+ "properties": []
11
10
  }
@@ -2,36 +2,90 @@ import React, { useState } from 'react';
2
2
  import { Button, Grid, IconButton, Snackbar } from '@material-ui/core';
3
3
  import CloseIcon from '@material-ui/icons/Close';
4
4
 
5
+ import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
5
6
  import './CancelAlert.css';
6
7
 
7
- // Remove this and use "real" PCore type once .d.ts is fixed (currently shows 2 errors)
8
- declare const PCore: any;
8
+ interface CancelAlertProps extends PConnFieldProps {
9
+ // If any, enter additional props that only exist on CancelAlert here
10
+ heading: string;
11
+ content: string;
12
+ itemKey: string;
13
+ hideDelete: boolean;
14
+ isDataObject: boolean;
15
+ skipReleaseLockRequest: any;
16
+ dismiss: Function;
17
+ }
18
+
19
+ export default function CancelAlert(props: CancelAlertProps) {
20
+ const { heading, content, getPConnect, itemKey: containerItemID, hideDelete, isDataObject, skipReleaseLockRequest, dismiss } = props;
21
+ const actionsAPI = getPConnect().getActionsApi();
22
+ const containerManagerAPI = getPConnect().getContainerManager();
23
+ const isLocalAction = getPConnect().getValue(PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION);
24
+ const isBulkAction = getPConnect()?.options?.isBulkAction;
25
+ const localizedVal = PCore.getLocaleUtils().getLocaleValue;
26
+ const broadCastUtils: any = PCore.getCoexistenceManager().getBroadcastUtils();
27
+ const isReverseCoexistence = broadCastUtils.isReverseCoexistenceCaseLoaded();
28
+ const localeCategory = 'ModalContainer';
29
+ const btnIds = {
30
+ SAVE_AND_CLOSE: 'saveAndClose',
31
+ CONTINUE_WORKING: 'continueWorking',
32
+ DELETE: 'delete'
33
+ };
9
34
 
35
+ const [buttonsState, setButtonsState] = useState({
36
+ [btnIds.SAVE_AND_CLOSE]: false,
37
+ [btnIds.DELETE]: false
38
+ });
10
39
 
11
- const CancelAlert = props => {
12
- const { pConn, updateAlertState } = props;
13
40
  const [showSnackbar, setShowSnackbar] = useState(false);
14
41
  const [snackbarMessage, setSnackbarMessage] = useState('');
15
42
 
16
- const itemKey = pConn.getContextName();
17
- const caseInfo = pConn.getCaseInfo();
18
- const caseName = caseInfo.getName();
19
- const ID = caseInfo.getID();
20
- const localizedVal = PCore.getLocaleUtils().getLocaleValue;
21
- const localeCategory = 'ModalContainer';
22
-
23
- function showToast(message: string) {
24
- setSnackbarMessage(message);
25
- setShowSnackbar(true);
43
+ function disableButton(id) {
44
+ setButtonsState(prevState => ({
45
+ ...prevState,
46
+ [id]: true
47
+ }));
26
48
  }
27
49
 
28
- const dismissCancelAlertOnly = () => {
29
- updateAlertState(true);
30
- };
50
+ function enableButton(id) {
51
+ setButtonsState(prevState => ({
52
+ ...prevState,
53
+ [id]: false
54
+ }));
55
+ }
31
56
 
32
- const dismissModal = () => {
33
- updateAlertState(false);
34
- };
57
+ function cancelHandler() {
58
+ if (isReverseCoexistence) {
59
+ dismiss(true);
60
+ // @ts-ignore - An argument for 'payload' was not provided.
61
+ PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.REVERSE_COEXISTENCE_EVENTS.HANDLE_DISCARD);
62
+ } else if (!isDataObject && !isLocalAction && !isBulkAction) {
63
+ disableButton(btnIds.DELETE);
64
+ actionsAPI
65
+ .deleteCaseInCreateStage(containerItemID, hideDelete)
66
+ .then(() => {
67
+ // @ts-ignore - An argument for 'payload' was not provided.
68
+ PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL);
69
+ })
70
+ .catch(() => {
71
+ setSnackbarMessage(localizedVal('Delete failed.', localeCategory));
72
+ setShowSnackbar(true);
73
+ })
74
+ .finally(() => {
75
+ enableButton(btnIds.DELETE);
76
+ dismiss(true);
77
+ });
78
+ } else if (isLocalAction) {
79
+ dismiss(true);
80
+ actionsAPI.cancelAssignment(containerItemID);
81
+ } else if (isBulkAction) {
82
+ dismiss(true);
83
+ actionsAPI.cancelBulkAction(containerItemID);
84
+ } else {
85
+ dismiss(true);
86
+ containerManagerAPI.removeContainerItem({ containerItemID, skipReleaseLockRequest });
87
+ }
88
+ }
35
89
 
36
90
  function handleSnackbarClose(event: React.SyntheticEvent | React.MouseEvent, reason?: string) {
37
91
  if (reason === 'clickaway') {
@@ -40,74 +94,41 @@ const CancelAlert = props => {
40
94
  setShowSnackbar(false);
41
95
  }
42
96
 
43
- const buttonClick = action => {
44
- const actionsAPI = pConn.getActionsApi();
45
-
46
- switch (action) {
47
- case 'save':
48
- // eslint-disable-next-line no-case-declarations
49
- const savePromise = actionsAPI.saveAndClose(itemKey);
50
-
51
- savePromise
52
- .then(() => {
53
- dismissModal();
54
-
55
- PCore.getPubSubUtils().publish(
56
- PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CASE_CREATED
57
- );
58
- })
59
- .catch(() => {
60
- showToast(localizedVal('Save failed', localeCategory));
61
- });
62
- break;
63
-
64
- case 'continue':
65
- dismissCancelAlertOnly();
66
- break;
67
-
68
- case 'delete':
69
- // eslint-disable-next-line no-case-declarations
70
- const deletePromise = actionsAPI.deleteCaseInCreateStage(itemKey);
71
-
72
- deletePromise
73
- .then(() => {
74
- dismissModal();
75
- PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL);
76
- })
77
- .catch(() => {
78
- showToast(localizedVal('Delete failed.', localeCategory));
79
- });
80
- break;
97
+ const leftButton = (
98
+ <Button
99
+ name={btnIds.CONTINUE_WORKING}
100
+ variant='contained'
101
+ color='secondary'
102
+ onClick={() => {
103
+ dismiss();
104
+ if (isReverseCoexistence) {
105
+ broadCastUtils.setCallBackFunction(null);
106
+ broadCastUtils.setIsDirtyDialogActive(false);
107
+ }
108
+ }}
109
+ >
110
+ {localizedVal('Go back', localeCategory)}
111
+ </Button>
112
+ );
81
113
 
82
- default:
83
- break;
84
- }
85
- };
114
+ const rightButton = (
115
+ <Button name={btnIds.DELETE} variant='contained' color='primary' disabled={buttonsState[btnIds.DELETE]} onClick={cancelHandler}>
116
+ {localizedVal('Discard', localeCategory)}
117
+ </Button>
118
+ );
86
119
 
87
120
  return (
88
121
  <>
89
122
  <div className='cancel-alert-background'>
90
123
  <div className='cancel-alert-top'>
91
- <h3>{`Delete ${caseName}(${ID})`}</h3>
124
+ <h3>{localizedVal(heading, localeCategory)}</h3>
92
125
  <div>
93
- <p>{`${localizedVal('Are you sure you want to delete', localeCategory)} ${caseName} (${ID})?`}</p>
94
- <p>{localizedVal('Alternatively, you can continue working or save your work for later.', localeCategory)}</p>
126
+ <p>{localizedVal(content, localeCategory)}</p>
95
127
  </div>
96
128
  <div className='action-controls'>
97
129
  <Grid container spacing={4} justifyContent='space-between'>
98
- <Grid item>
99
- <Button variant='outlined' color='primary' onClick={() => buttonClick('save')}>
100
- {localizedVal('Save for later', localeCategory)}
101
- </Button>
102
- </Grid>
103
- <Grid item>
104
- <Button variant='outlined' color='primary' onClick={() => buttonClick('continue')}>
105
- {localizedVal('Continue Working', localeCategory)}
106
- </Button>
107
- <Button variant='contained' color='primary' onClick={() => buttonClick('delete')}>
108
- {localizedVal('Delete', localeCategory)}
109
- </Button>
110
- </Grid>
130
+ <Grid item>{leftButton}</Grid>
131
+ <Grid item>{rightButton}</Grid>
111
132
  </Grid>
112
133
  </div>
113
134
  </div>
@@ -125,6 +146,4 @@ const CancelAlert = props => {
125
146
  />
126
147
  </>
127
148
  );
128
- };
129
-
130
- export default CancelAlert;
149
+ }
@@ -1 +1 @@
1
- export { default } from './CancelAlert';
1
+ export { default } from './CancelAlert';
@@ -1,15 +1,23 @@
1
- import React, { useState, useEffect } from 'react';
2
- import {
3
- Checkbox,
4
- FormControl,
5
- FormControlLabel,
6
- FormGroup,
7
- FormHelperText
8
- } from '@material-ui/core';
1
+ import { useState, useEffect } from 'react';
2
+ import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel } from '@material-ui/core';
3
+
9
4
  import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
10
- 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';
6
+ import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
7
+
8
+ interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
9
+ // If any, enter additional props that only exist on Checkbox here
10
+ value?: boolean;
11
+ // eslint-disable-next-line react/no-unused-prop-types
12
+ caption?: string;
13
+ trueLabel?: string;
14
+ falseLabel?: string;
15
+ }
16
+
17
+ export default function CheckboxComponent(props: CheckboxProps) {
18
+ // Get emitted components from map (so we can get any override that may exist)
19
+ const FieldValueList = getComponentFromMap('FieldValueList');
11
20
 
12
- export default function CheckboxComponent(props) {
13
21
  const {
14
22
  getPConnect,
15
23
  label,
@@ -22,15 +30,17 @@ export default function CheckboxComponent(props) {
22
30
  helperText,
23
31
  validatemessage,
24
32
  displayMode,
25
- hideLabel
33
+ hideLabel,
34
+ trueLabel,
35
+ falseLabel
26
36
  } = props;
27
37
  const helperTextToDisplay = validatemessage || helperText;
28
38
 
29
39
  const thePConn = getPConnect();
30
- const theConfigProps = thePConn.getConfigProps();
31
- const { caption } = theConfigProps;
40
+ const theConfigProps = thePConn.getConfigProps() as CheckboxProps;
41
+ const caption = theConfigProps.caption;
32
42
  const actionsApi = thePConn.getActionsApi();
33
- const propName = thePConn.getStateProps().value;
43
+ const propName = (thePConn.getStateProps() as any).value;
34
44
 
35
45
  const [checked, setChecked] = useState(false);
36
46
  useEffect(() => {
@@ -39,11 +49,11 @@ export default function CheckboxComponent(props) {
39
49
  }, [value]);
40
50
 
41
51
  if (displayMode === 'LABELS_LEFT') {
42
- return <FieldValueList name={hideLabel ? '' : label} value={value} />;
52
+ return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} />;
43
53
  }
44
54
 
45
55
  if (displayMode === 'STACKED_LARGE_VAL') {
46
- return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
56
+ return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} variant='stacked' />;
47
57
  }
48
58
 
49
59
  const handleChange = event => {
@@ -64,6 +74,7 @@ export default function CheckboxComponent(props) {
64
74
 
65
75
  return (
66
76
  <FormControl required={required} error={status === 'error'}>
77
+ {!hideLabel && <FormLabel component='legend'>{label}</FormLabel>}
67
78
  <FormGroup>
68
79
  <FormControlLabel
69
80
  control={theCheckbox}
@@ -4,7 +4,6 @@
4
4
  "description": "Boolean",
5
5
  "type": "Field",
6
6
  "subtype": "Boolean",
7
- "componentKey" : "Checkbox",
8
- "properties": [
9
- ]
7
+ "componentKey": "Checkbox",
8
+ "properties": []
10
9
  }
@@ -1,14 +1,24 @@
1
- import React, { useState, useEffect } from 'react';
2
- // import { TextField } from "@material-ui/core";
3
1
  import CurrencyTextField from '@unicef/material-ui-currency-textfield';
2
+
3
+ import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
4
+ import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
4
5
  import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
5
- import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
6
- import { format } from "@pega/react-sdk-components/lib/components/helpers/formatters";
6
+ import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
7
7
  import { getCurrencyCharacters, getCurrencyOptions } from './currency-utils';
8
8
 
9
- // Using control from: https://github.com/unicef/material-ui-currency-textfield
9
+ /* Using @unicef/material-ui-currency-textfield component here, since it allows formatting decimal values,
10
+ as per the locale.
11
+ */
12
+
13
+ interface CurrrencyProps extends PConnFieldProps {
14
+ // If any, enter additional props that only exist on Currency here
15
+ currencyISOCode?: string;
16
+ }
17
+
18
+ export default function Currency(props: CurrrencyProps) {
19
+ // Get emitted components from map (so we can get any override that may exist)
20
+ const FieldValueList = getComponentFromMap('FieldValueList');
10
21
 
11
- export default function Currency(props) {
12
22
  const {
13
23
  getPConnect,
14
24
  label,
@@ -23,45 +33,26 @@ export default function Currency(props) {
23
33
  helperText,
24
34
  displayMode,
25
35
  hideLabel,
26
- currencyISOCode = "USD"
36
+ currencyISOCode = 'USD',
37
+ placeholder
27
38
  } = props;
28
39
 
29
40
  const pConn = getPConnect();
30
41
  const actions = pConn.getActionsApi();
31
- const propName = pConn.getStateProps().value;
42
+ const propName = (pConn.getStateProps() as any).value;
32
43
  const helperTextToDisplay = validatemessage || helperText;
33
44
 
34
45
  // console.log(`Currency: label: ${label} value: ${value}`);
35
46
 
36
- let readOnlyProp = {}; // Note: empty if NOT ReadOnly
37
-
38
- if (readOnly) {
39
- readOnlyProp = { readOnly: true };
40
- }
41
-
42
- let testProp = {};
43
-
44
- testProp = {
47
+ const testProp = {
45
48
  'data-test-id': testId
46
49
  };
47
50
 
48
- const [currValue, setCurrValue] = useState();
49
- const [theCurrSym, setCurrSym] = useState("$");
50
- const [theCurrDec, setCurrDec] = useState(".");
51
- const [theCurrSep, setCurrSep] = useState(",");
52
-
53
- useEffect(() => {
54
- // currencySymbols looks like this: { theCurrencySymbol: '$', theDecimalIndicator: '.', theSeparator: ',' }
55
- const theSymbols = getCurrencyCharacters(currencyISOCode);
56
- setCurrSym(theSymbols.theCurrencySymbol);
57
- setCurrDec(theSymbols.theDecimalIndicator);
58
- setCurrSep(theSymbols.theDigitGroupSeparator);
59
- }, [currencyISOCode]);
60
-
61
- useEffect(() => {
62
- // const testVal = value;
63
- setCurrValue(value.toString());
64
- }, [value]);
51
+ // currencySymbols looks like this: { theCurrencySymbol: '$', theDecimalIndicator: '.', theSeparator: ',' }
52
+ const theSymbols = getCurrencyCharacters(currencyISOCode);
53
+ const theCurrSym = theSymbols.theCurrencySymbol;
54
+ const theCurrDec = theSymbols.theDecimalIndicator;
55
+ const theCurrSep = theSymbols.theDigitGroupSeparator;
65
56
 
66
57
  const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
67
58
  const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
@@ -74,14 +65,6 @@ export default function Currency(props) {
74
65
  return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
75
66
  }
76
67
 
77
- // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
78
- function currOnChange(event, inValue) {
79
- // console.log(`Currency currOnChange inValue: ${inValue}`);
80
-
81
- // update internal value
82
- setCurrValue(event?.target?.value);
83
- }
84
-
85
68
  function currOnBlur(event, inValue) {
86
69
  // console.log(`Currency currOnBlur inValue: ${inValue}`);
87
70
  handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);
@@ -94,22 +77,22 @@ export default function Currency(props) {
94
77
  fullWidth
95
78
  variant={readOnly ? 'standard' : 'outlined'}
96
79
  helperText={helperTextToDisplay}
97
- placeholder=''
80
+ placeholder={placeholder ?? ''}
98
81
  size='small'
99
82
  required={required}
100
83
  disabled={disabled}
101
- onChange={currOnChange}
102
- onBlur={!readOnly ? currOnBlur : undefined}
84
+ readOnly={!!readOnly}
103
85
  error={status === 'error'}
104
86
  label={label}
105
- value={currValue}
87
+ value={value}
106
88
  type='text'
107
89
  outputFormat='number'
108
90
  textAlign='left'
109
- InputProps={{ ...readOnlyProp, inputProps: { ...testProp, value: currValue } }}
91
+ InputProps={{ inputProps: { ...testProp } }}
110
92
  currencySymbol={theCurrSym}
111
93
  decimalCharacter={theCurrDec}
112
94
  digitGroupSeparator={theCurrSep}
95
+ onBlur={!readOnly ? currOnBlur : undefined}
113
96
  />
114
97
  );
115
98
  }
@@ -4,7 +4,6 @@
4
4
  "description": "Currency",
5
5
  "type": "Field",
6
6
  "subtype": "Decimal-Currency",
7
- "componentKey" : "Currency",
8
- "properties": [
9
- ]
7
+ "componentKey": "Currency",
8
+ "properties": []
10
9
  }
@@ -1,16 +1,10 @@
1
1
  // eslint-disable-next-line import/no-named-default
2
- import { default as CurrencyAlias} from '@pega/react-sdk-components/lib/components/helpers/formatters/Currency';
2
+ import { default as CurrencyAlias } from '@pega/react-sdk-components/lib/components/helpers/formatters/Currency';
3
3
  // eslint-disable-next-line import/no-named-default
4
4
  import { default as CurrencyMapAlias } from '@pega/react-sdk-components/lib/components/helpers/formatters/CurrencyMap';
5
5
 
6
- import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
7
-
8
- declare const PCore: typeof PCoreType;
9
-
10
-
11
6
  export const getCurrencyOptions = (inISOCode: string) => {
12
-
13
- const operatorLocale = PCore.getEnvironmentInfo().getUseLocale() || 'en-US';
7
+ const operatorLocale = PCore.getEnvironmentInfo().getUseLocale() || PCore.getEnvironmentInfo().getLocale() || 'en-US';
14
8
 
15
9
  let currMapToUse = CurrencyMapAlias.US;
16
10
  let localeToUse = operatorLocale;
@@ -19,12 +13,12 @@ export const getCurrencyOptions = (inISOCode: string) => {
19
13
  // If no ISO code, use locale
20
14
  // If no locale, default to US
21
15
  if (inISOCode) {
22
- if (inISOCode === "EUR") {
16
+ if (inISOCode === 'EUR') {
23
17
  currMapToUse = CurrencyMapAlias.NL;
24
- localeToUse = "nl-NL";
18
+ localeToUse = 'nl-NL';
25
19
  } else {
26
20
  // For all other ISO codes, use first 2 characters as the lookup from CurrencyMap
27
- const countryCode = inISOCode.substring(0,2);
21
+ const countryCode = inISOCode.substring(0, 2);
28
22
  currMapToUse = CurrencyMapAlias[countryCode];
29
23
  }
30
24
  } else if (operatorLocale) {
@@ -38,23 +32,19 @@ export const getCurrencyOptions = (inISOCode: string) => {
38
32
 
39
33
  // If no currMapToUse at this point, default to US as a failsafe
40
34
  if (!currMapToUse) {
41
- currMapToUse = CurrencyMapAlias['US'];
35
+ currMapToUse = CurrencyMapAlias.US;
42
36
  }
43
37
 
44
38
  const theCode = currMapToUse.currencyCode.substring(0, 3);
45
- const currencyOptions = { locale: localeToUse, style: "currency", currency: theCode }
46
-
47
- return currencyOptions;
48
-
49
- }
50
-
39
+ return { locale: localeToUse, style: 'currency', currency: theCode };
40
+ };
51
41
 
52
42
  export const getCurrencyCharacters = (inISOCode: string) => {
53
43
  const theCurrencyChars = {
54
44
  theCurrencySymbol: '$',
55
45
  theDecimalIndicator: '.',
56
46
  theDigitGroupSeparator: ','
57
- }
47
+ };
58
48
 
59
49
  const theCurrencyOptions = getCurrencyOptions(inISOCode);
60
50
 
@@ -75,5 +65,4 @@ export const getCurrencyCharacters = (inISOCode: string) => {
75
65
  // console.log(`theCurrencyChars: symbol: ${theCurrencyChars.theCurrencySymbol} | theDigitGroupSeparator: ${theCurrencyChars.theDigitGroupSeparator} | theDecimalIndicator: ${theCurrencyChars.theDecimalIndicator}`);
76
66
 
77
67
  return theCurrencyChars;
78
-
79
- }
68
+ };