@pega/custom-dx-components 0.24.12 → 0.24.14
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/build-all/helper.js +6 -0
- package/src/tasks/build-comp/helper.js +8 -0
- package/src/tasks/create/templates/Constellation/Template/DETAILS/{DetailsRender.tsx → DetailsRender.tsx.mustache} +7 -10
- package/src/tasks/create/templates/Constellation/Template/DETAILS/{HighlightRender.tsx → HighlightRender.tsx.mustache} +12 -13
- package/src/tasks/create/templates/Constellation/Template/DETAILS/demo.stories.tsx.mustache +27 -7
- package/src/tasks/create/templates/Constellation/Template/DETAILS/index.tsx.mustache +26 -33
- package/src/tasks/create/templates/Constellation/Template/DETAILS/mock.ts.mustache +13 -14
- package/src/tasks/create/templates/Constellation/Template/DETAILS/styles.ts.mustache +16 -0
- package/src/tasks/create/templates/Constellation/Template/DETAILS-region/{DetailsRender.tsx → DetailsRender.tsx.mustache} +7 -10
- package/src/tasks/create/templates/Constellation/Template/DETAILS-region/{HighlightRender.tsx → HighlightRender.tsx.mustache} +12 -13
- package/src/tasks/create/templates/Constellation/Template/DETAILS-region/demo.stories.tsx.mustache +45 -10
- package/src/tasks/create/templates/Constellation/Template/DETAILS-region/index.tsx.mustache +19 -41
- package/src/tasks/create/templates/Constellation/Template/DETAILS-region/mock.ts.mustache +13 -10
- package/src/tasks/create/templates/Constellation/Template/DETAILS-region/styles.ts.mustache +15 -0
- package/src/tasks/create/templates/Constellation/Template/PAGE/localizations.json.mustache +4 -2
- package/src/tasks/create/templates/Constellation/Widget/PAGE/demo.stories.tsx.mustache +5 -5
- package/src/tasks/create/templates/Constellation/Widget/PAGE/index.tsx.mustache +1 -1
- package/src/tasks/create/templates/Launchpad/Widget/PAGE/demo.stories.tsx.mustache +1 -1
- package/src/tasks/create/templates/Launchpad/Widget/PAGE/index.tsx.mustache +1 -1
- package/src/tasks/init/template/package.json.mustache +1 -1
- package/src/tasks/publish/helper.js +6 -0
- package/src/tasks/publish-all/helper.js +6 -0
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/DetailsRender.tsx +4 -10
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/HighlightRender.tsx +9 -13
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/demo.stories.tsx +27 -7
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/index.tsx +26 -33
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/mock.ts +13 -14
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/styles.ts +16 -0
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPage/localizations.json +4 -2
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPageWidget/demo.stories.tsx +5 -5
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPageWidget/index.tsx +1 -1
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/DetailsRender.tsx +4 -10
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/HighlightRender.tsx +9 -13
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/demo.stories.tsx +45 -10
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/index.tsx +19 -41
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/mock.ts +13 -10
- package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/styles.ts +15 -0
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyDetails/DetailsRender.tsx +4 -10
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyDetails/HighlightRender.tsx +9 -13
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyDetails/demo.stories.tsx +27 -7
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyDetails/index.tsx +26 -33
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyDetails/mock.ts +13 -14
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyDetails/styles.ts +16 -0
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPage/localizations.json +4 -2
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPageWidget/demo.stories.tsx +1 -1
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPageWidget/index.tsx +1 -1
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/DetailsRender.tsx +4 -10
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/HighlightRender.tsx +9 -13
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/demo.stories.tsx +45 -10
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/index.tsx +19 -41
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/mock.ts +13 -10
- package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/styles.ts +15 -0
|
@@ -6,3 +6,19 @@ export default styled.div(() => {
|
|
|
6
6
|
margin: 0px 0;
|
|
7
7
|
`;
|
|
8
8
|
});
|
|
9
|
+
|
|
10
|
+
export const StyledDetailsGridContainer = styled.div(() => {
|
|
11
|
+
return css`
|
|
12
|
+
margin-line-start: 1;
|
|
13
|
+
`;
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
export const StyledHighlightedFieldsHrLine = styled.hr(() => {
|
|
18
|
+
return css`
|
|
19
|
+
line: {
|
|
20
|
+
margin: '0.75rem 0';
|
|
21
|
+
opacity: '50%'
|
|
22
|
+
}
|
|
23
|
+
`;
|
|
24
|
+
});
|
package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPageWidget/demo.stories.tsx
CHANGED
|
@@ -97,11 +97,11 @@ export const BasePegaDxilMyPageWidget: Story = args => {
|
|
|
97
97
|
}
|
|
98
98
|
};
|
|
99
99
|
|
|
100
|
-
return (
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
100
|
+
return (
|
|
101
|
+
<>
|
|
102
|
+
<PegaDxilMyPageWidget {...props} {...args} />
|
|
103
|
+
</>
|
|
104
|
+
);
|
|
105
105
|
};
|
|
106
106
|
|
|
107
107
|
BasePegaDxilMyPageWidget.args = {
|
|
@@ -13,7 +13,7 @@ const DetailsRender = (props: DetailsRenderProps) => {
|
|
|
13
13
|
|
|
14
14
|
const displayCompArr: ReactElement[] = [];
|
|
15
15
|
|
|
16
|
-
Object.values(kids).forEach((value: any) => {
|
|
16
|
+
Object.values(kids).forEach((value: any, i :number) => {
|
|
17
17
|
const { type } = value.getPConnect().getRawMetadata();
|
|
18
18
|
const { hideLabel, variant, testId, label } = value
|
|
19
19
|
.getPConnect()
|
|
@@ -21,6 +21,7 @@ const DetailsRender = (props: DetailsRenderProps) => {
|
|
|
21
21
|
|
|
22
22
|
let displayComp;
|
|
23
23
|
const key = JSON.stringify(value.getPConnect());
|
|
24
|
+
const key1 = key.concat(`-${i}`);
|
|
24
25
|
|
|
25
26
|
if (type === 'reference') {
|
|
26
27
|
const refElement = value.getPConnect().getComponent();
|
|
@@ -30,17 +31,10 @@ const DetailsRender = (props: DetailsRenderProps) => {
|
|
|
30
31
|
const element = value.getPConnect().getComponent();
|
|
31
32
|
const displayEl = <Fragment key={key}>{element}</Fragment>;
|
|
32
33
|
|
|
33
|
-
const fvlStyle = {
|
|
34
|
-
myColGap: {
|
|
35
|
-
columnGap: '0'
|
|
36
|
-
}
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
// const myEl = <div>boo</div>;
|
|
40
34
|
displayComp = (
|
|
41
|
-
<Fragment key={
|
|
35
|
+
<Fragment key={key1}>
|
|
42
36
|
<FieldValueList
|
|
43
|
-
style={
|
|
37
|
+
style={{ columnGap: '0'}}
|
|
44
38
|
variant={hideLabel ? 'stacked' : variant}
|
|
45
39
|
data-testid={testId}
|
|
46
40
|
fields={[{ id: '1', name: hideLabel ? '' : label, value: displayEl }]}
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { FieldValueList, Text } from '@pega/cosmos-react-core';
|
|
4
|
+
import type { PConnProps } from './PConnProps';
|
|
4
5
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
interface HighlightRenderProps extends PConnProps {
|
|
7
|
+
field?: any;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
const HighlightRender = (props: HighlightRenderProps) => {
|
|
11
|
+
const { getPConnect, field } = props;
|
|
8
12
|
|
|
9
13
|
field.config['displayMode'] = 'DISPLAY_ONLY';
|
|
10
14
|
|
|
@@ -16,20 +20,12 @@ const HighlightRender = (data: any) => {
|
|
|
16
20
|
|
|
17
21
|
const configProps = getPConnect().resolveConfigProps(field.config);
|
|
18
22
|
|
|
19
|
-
//
|
|
20
|
-
|
|
23
|
+
// @ts-ignore
|
|
21
24
|
const reactField = getPConnect().createComponent(field);
|
|
22
|
-
// const reactField = field.getPConnect().getComponent();
|
|
23
|
-
|
|
24
|
-
const styles = {
|
|
25
|
-
myWidth: {
|
|
26
|
-
width: 'auto'
|
|
27
|
-
}
|
|
28
|
-
};
|
|
29
25
|
|
|
30
26
|
return (
|
|
31
27
|
<FieldValueList
|
|
32
|
-
style={
|
|
28
|
+
style={{ width: 'auto' }}
|
|
33
29
|
variant='stacked'
|
|
34
30
|
data-testid={field.testId}
|
|
35
31
|
fields={[
|
|
@@ -18,6 +18,11 @@ const meta: Meta<typeof PegaDxilMyTwoColumnDetails> = {
|
|
|
18
18
|
|
|
19
19
|
export default meta;
|
|
20
20
|
type Story = StoryObj<typeof PegaDxilMyTwoColumnDetails>;
|
|
21
|
+
|
|
22
|
+
const Region = props => {
|
|
23
|
+
return <></>;
|
|
24
|
+
};
|
|
25
|
+
|
|
21
26
|
const renderField = resolvedProps => {
|
|
22
27
|
const {
|
|
23
28
|
displayAsStatus = false,
|
|
@@ -122,24 +127,54 @@ export const BasePegaDxilMyTwoColumnDetails: Story = args => {
|
|
|
122
127
|
setInheritedProp: () => {
|
|
123
128
|
/* nothing */
|
|
124
129
|
},
|
|
125
|
-
resolveConfigProps:
|
|
126
|
-
|
|
130
|
+
resolveConfigProps: config => {
|
|
131
|
+
return config;
|
|
127
132
|
}
|
|
128
133
|
};
|
|
129
134
|
}
|
|
130
135
|
};
|
|
131
136
|
|
|
132
|
-
const regionAChildren = pyReviewRaw.children[0].children.map(child => {
|
|
133
|
-
return props.getPConnect().createComponent(child);
|
|
134
|
-
});
|
|
135
|
-
const regionBChildren = pyReviewRaw.children[1].children.map(child => {
|
|
136
|
-
return props.getPConnect().createComponent(child);
|
|
137
|
-
});
|
|
138
137
|
|
|
139
138
|
return (
|
|
140
139
|
<PegaDxilMyTwoColumnDetails {...props} {...args}>
|
|
141
|
-
|
|
142
|
-
|
|
140
|
+
<Region
|
|
141
|
+
{...{
|
|
142
|
+
getPConnect: () => ({
|
|
143
|
+
setInheritedProp: () => {},
|
|
144
|
+
getChildren: () =>
|
|
145
|
+
pyReviewRaw.children[0].children.map((child, index) => {
|
|
146
|
+
return {
|
|
147
|
+
getPConnect: () => ({
|
|
148
|
+
getRawMetadata: () => pyReviewRaw.children[0].children[index],
|
|
149
|
+
getConfigProps: () => {},
|
|
150
|
+
resolveConfigProps: () => regionChildrenResolved[index],
|
|
151
|
+
getComponent: config =>
|
|
152
|
+
props.getPConnect().createComponent(pyReviewRaw.children[0].children[index])
|
|
153
|
+
})
|
|
154
|
+
};
|
|
155
|
+
})
|
|
156
|
+
})
|
|
157
|
+
}}
|
|
158
|
+
/>
|
|
159
|
+
<Region
|
|
160
|
+
{...{
|
|
161
|
+
getPConnect: () => ({
|
|
162
|
+
setInheritedProp: () => {},
|
|
163
|
+
getChildren: () =>
|
|
164
|
+
pyReviewRaw.children[1].children.map((child, index) => {
|
|
165
|
+
return {
|
|
166
|
+
getPConnect: () => ({
|
|
167
|
+
getRawMetadata: () => pyReviewRaw.children[1].children[index],
|
|
168
|
+
getConfigProps: () => {},
|
|
169
|
+
resolveConfigProps: () => regionChildrenResolved[index],
|
|
170
|
+
getComponent: config =>
|
|
171
|
+
props.getPConnect().createComponent(pyReviewRaw.children[1].children[index])
|
|
172
|
+
})
|
|
173
|
+
};
|
|
174
|
+
})
|
|
175
|
+
})
|
|
176
|
+
}}
|
|
177
|
+
/>
|
|
143
178
|
</PegaDxilMyTwoColumnDetails>
|
|
144
179
|
);
|
|
145
180
|
};
|
package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/index.tsx
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { Fragment } from 'react';
|
|
2
|
-
import { Grid, Flex, FieldGroup, withConfiguration } from '@pega/cosmos-react-core';
|
|
1
|
+
import { Fragment, Children, ReactElement } from 'react';
|
|
2
|
+
import { Grid, Flex, FieldGroup, withConfiguration, GridContainerProps } from '@pega/cosmos-react-core';
|
|
3
3
|
import type { PConnFieldProps } from './PConnProps';
|
|
4
4
|
import DetailsRender from './DetailsRender';
|
|
5
5
|
import HighlightRender from './HighlightRender';
|
|
6
6
|
|
|
7
|
-
import StyledPegaDxilMyTwoColumnDetailsWrapper from './styles';
|
|
7
|
+
import StyledPegaDxilMyTwoColumnDetailsWrapper, { StyledDetailsGridContainer, StyledHighlightedFieldsHrLine } from './styles';
|
|
8
8
|
|
|
9
9
|
// includes in bundle
|
|
10
10
|
import { getAllFields } from './utils';
|
|
@@ -14,40 +14,31 @@ interface PegaDxilMyTwoColumnDetailsProps extends PConnFieldProps {
|
|
|
14
14
|
// If any, enter additional props that only exist on TextInput here
|
|
15
15
|
showLabel: boolean;
|
|
16
16
|
showHighlightedData: boolean;
|
|
17
|
-
children:
|
|
17
|
+
children: ReactElement[];
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
// props passed in combination of props from property panel (config.json) and run time props from Constellation
|
|
21
21
|
// any default values in config.pros should be set in defaultProps at bottom of this file
|
|
22
22
|
function PegaDxilMyTwoColumnDetails(props: PegaDxilMyTwoColumnDetailsProps) {
|
|
23
23
|
|
|
24
|
-
const { getPConnect,
|
|
24
|
+
const { getPConnect, label, children, showLabel = true, showHighlightedData = false } = props;
|
|
25
25
|
const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
|
|
26
26
|
|
|
27
27
|
// update children with readonly
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
}
|
|
28
|
+
Children.toArray(children).forEach(child => {
|
|
29
|
+
// @ts-ignore
|
|
30
|
+
child.props.getPConnect().setInheritedProp('readOnly', true);
|
|
31
|
+
// @ts-ignore
|
|
32
|
+
child.props.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
|
|
33
|
+
});
|
|
34
34
|
|
|
35
35
|
const numRegions = getAllFields(getPConnect)?.length;
|
|
36
36
|
const gridRepeat = "repeat(".concat(numRegions).concat(", 1fr)");
|
|
37
|
-
|
|
38
|
-
|
|
37
|
+
|
|
38
|
+
const gridContainer: GridContainerProps = { colGap: 0 };
|
|
39
39
|
gridContainer.cols = gridRepeat;
|
|
40
|
-
// @ts-ignore
|
|
41
40
|
gridContainer.alignItems = 'start';
|
|
42
41
|
|
|
43
|
-
const gridHighlightContainer = { "gap": 2};
|
|
44
|
-
// @ts-ignore
|
|
45
|
-
gridHighlightContainer.cols = gridRepeat;
|
|
46
|
-
// @ts-ignore
|
|
47
|
-
gridHighlightContainer.alignItems = 'flex-start';
|
|
48
|
-
// @ts-ignore
|
|
49
|
-
gridHighlightContainer.pad = [0, 0, 2, 0];
|
|
50
|
-
|
|
51
42
|
// Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
|
|
52
43
|
let highlightedDataArr = [];
|
|
53
44
|
if (showHighlightedData) {
|
|
@@ -55,26 +46,10 @@ function PegaDxilMyTwoColumnDetails(props: PegaDxilMyTwoColumnDetailsProps) {
|
|
|
55
46
|
const { highlightedData = [] } = getPConnect().getRawMetadata().config;
|
|
56
47
|
// @ts-ignore
|
|
57
48
|
highlightedDataArr = highlightedData.map((field) => {
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
// // Mark as status display when using pyStatusWork
|
|
61
|
-
// if (field.config.value === '@P .pyStatusWork') {
|
|
62
|
-
// field.type = 'TextInput';
|
|
63
|
-
// field.config.displayAsStatus = true;
|
|
64
|
-
// }
|
|
65
|
-
// // @ts-ignore
|
|
66
|
-
// return getPConnect().createComponent(field);
|
|
67
|
-
return <HighlightRender field={field} props={props} />;
|
|
49
|
+
return <HighlightRender field={field} getPConnect={props.getPConnect} />;
|
|
68
50
|
});
|
|
69
51
|
}
|
|
70
52
|
|
|
71
|
-
const hrStyle = {
|
|
72
|
-
line: {
|
|
73
|
-
margin: '0.75rem 0',
|
|
74
|
-
opacity: '50%'
|
|
75
|
-
}
|
|
76
|
-
};
|
|
77
|
-
|
|
78
53
|
return (
|
|
79
54
|
<StyledPegaDxilMyTwoColumnDetailsWrapper>
|
|
80
55
|
<FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
|
|
@@ -88,10 +63,13 @@ function PegaDxilMyTwoColumnDetails(props: PegaDxilMyTwoColumnDetailsProps) {
|
|
|
88
63
|
<Fragment key={`hf-${i + 1}`}>{child}</Fragment>
|
|
89
64
|
))}
|
|
90
65
|
</Flex>
|
|
91
|
-
<
|
|
66
|
+
<StyledHighlightedFieldsHrLine />
|
|
92
67
|
</>
|
|
93
68
|
)}
|
|
94
|
-
<Grid
|
|
69
|
+
<Grid
|
|
70
|
+
as={StyledDetailsGridContainer}
|
|
71
|
+
container={gridContainer}
|
|
72
|
+
data-testid={`column-count-${numRegions}`} >
|
|
95
73
|
{children.map((child: any, i: number) => (
|
|
96
74
|
<Flex
|
|
97
75
|
// @ts-ignore
|
package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/mock.ts
CHANGED
|
@@ -16,6 +16,7 @@ export const pyReviewRaw = {
|
|
|
16
16
|
config: {
|
|
17
17
|
value: '@P .pyStatusWork',
|
|
18
18
|
label: '@L Work Status',
|
|
19
|
+
hideLabel: true,
|
|
19
20
|
displayMode: 'STACKED_LARGE_VAL',
|
|
20
21
|
displayAsStatus: true,
|
|
21
22
|
key: 'pyStatusWork'
|
|
@@ -26,6 +27,7 @@ export const pyReviewRaw = {
|
|
|
26
27
|
config: {
|
|
27
28
|
value: '@P .pyID',
|
|
28
29
|
label: '@L Case ID',
|
|
30
|
+
hideLabel: true,
|
|
29
31
|
displayMode: 'STACKED_LARGE_VAL',
|
|
30
32
|
key: 'pyID'
|
|
31
33
|
}
|
|
@@ -35,6 +37,7 @@ export const pyReviewRaw = {
|
|
|
35
37
|
config: {
|
|
36
38
|
value: '@P .pxCreateDateTime',
|
|
37
39
|
label: '@L Create date/time',
|
|
40
|
+
hideLabel: true,
|
|
38
41
|
displayMode: 'STACKED_LARGE_VAL',
|
|
39
42
|
key: 'pxCreateDateTime'
|
|
40
43
|
}
|
|
@@ -43,6 +46,7 @@ export const pyReviewRaw = {
|
|
|
43
46
|
type: 'UserReference',
|
|
44
47
|
config: {
|
|
45
48
|
label: '@L Create Operator',
|
|
49
|
+
hideLabel: true,
|
|
46
50
|
value: '@USER .pxCreateOperator',
|
|
47
51
|
placeholder: 'Select...',
|
|
48
52
|
displayMode: 'STACKED_LARGE_VAL',
|
|
@@ -160,7 +164,6 @@ export const pyReviewResolved = {
|
|
|
160
164
|
config: {
|
|
161
165
|
value: 'New',
|
|
162
166
|
label: 'Work Status',
|
|
163
|
-
displayMode: 'STACKED_LARGE_VAL',
|
|
164
167
|
displayAsStatus: true
|
|
165
168
|
}
|
|
166
169
|
},
|
|
@@ -168,16 +171,14 @@ export const pyReviewResolved = {
|
|
|
168
171
|
type: 'TextInput',
|
|
169
172
|
config: {
|
|
170
173
|
value: 'M-1002',
|
|
171
|
-
label: 'Case ID'
|
|
172
|
-
displayMode: 'STACKED_LARGE_VAL'
|
|
174
|
+
label: 'Case ID'
|
|
173
175
|
}
|
|
174
176
|
},
|
|
175
177
|
{
|
|
176
178
|
type: 'DateTime',
|
|
177
179
|
config: {
|
|
178
180
|
value: '2022-12-11T20:06:27.232Z',
|
|
179
|
-
label: 'Create date/time'
|
|
180
|
-
displayMode: 'STACKED_LARGE_VAL'
|
|
181
|
+
label: 'Create date/time'
|
|
181
182
|
}
|
|
182
183
|
},
|
|
183
184
|
{
|
|
@@ -188,8 +189,7 @@ export const pyReviewResolved = {
|
|
|
188
189
|
userId: 'conns',
|
|
189
190
|
userName: 'Sara Connor'
|
|
190
191
|
},
|
|
191
|
-
placeholder: 'Select...'
|
|
192
|
-
displayMode: 'STACKED_LARGE_VAL'
|
|
192
|
+
placeholder: 'Select...'
|
|
193
193
|
}
|
|
194
194
|
}
|
|
195
195
|
],
|
|
@@ -199,22 +199,25 @@ export const pyReviewResolved = {
|
|
|
199
199
|
export const regionChildrenResolved = [
|
|
200
200
|
{
|
|
201
201
|
readOnly: true,
|
|
202
|
-
value: '',
|
|
202
|
+
value: 'Deadline',
|
|
203
203
|
label: 'SLA Deadline',
|
|
204
|
+
hideLabel: true,
|
|
204
205
|
displayMode: 'LABELS_LEFT',
|
|
205
206
|
key: 'SLA Deadline'
|
|
206
207
|
},
|
|
207
208
|
{
|
|
208
209
|
readOnly: true,
|
|
209
|
-
value: '',
|
|
210
|
+
value: 'Goal',
|
|
210
211
|
label: 'SLA Goal',
|
|
212
|
+
hideLabel: true,
|
|
211
213
|
displayMode: 'LABELS_LEFT',
|
|
212
214
|
key: 'SLA Goal'
|
|
213
215
|
},
|
|
214
216
|
{
|
|
215
217
|
readOnly: true,
|
|
216
|
-
value: '',
|
|
218
|
+
value: 'Start Time',
|
|
217
219
|
label: 'SLA Start Time',
|
|
220
|
+
hideLabel: true,
|
|
218
221
|
listType: 'associated',
|
|
219
222
|
datasource: [
|
|
220
223
|
{
|
package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/styles.ts
CHANGED
|
@@ -6,3 +6,18 @@ export default styled.div(() => {
|
|
|
6
6
|
margin: 0px 0;
|
|
7
7
|
`;
|
|
8
8
|
});
|
|
9
|
+
|
|
10
|
+
export const StyledDetailsGridContainer = styled.div(() => {
|
|
11
|
+
return css`
|
|
12
|
+
margin-line-start: 1;
|
|
13
|
+
`;
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
export const StyledHighlightedFieldsHrLine = styled.hr(() => {
|
|
17
|
+
return css`
|
|
18
|
+
line: {
|
|
19
|
+
margin: '0.75rem 0';
|
|
20
|
+
opacity: '50%'
|
|
21
|
+
}
|
|
22
|
+
`;
|
|
23
|
+
});
|
|
@@ -13,7 +13,7 @@ const DetailsRender = (props: DetailsRenderProps) => {
|
|
|
13
13
|
|
|
14
14
|
const displayCompArr: ReactElement[] = [];
|
|
15
15
|
|
|
16
|
-
Object.values(kids).forEach((value: any) => {
|
|
16
|
+
Object.values(kids).forEach((value: any, i :number) => {
|
|
17
17
|
const { type } = value.getPConnect().getRawMetadata();
|
|
18
18
|
const { hideLabel, variant, testId, label } = value
|
|
19
19
|
.getPConnect()
|
|
@@ -21,6 +21,7 @@ const DetailsRender = (props: DetailsRenderProps) => {
|
|
|
21
21
|
|
|
22
22
|
let displayComp;
|
|
23
23
|
const key = JSON.stringify(value.getPConnect());
|
|
24
|
+
const key1 = key.concat(`-${i}`);
|
|
24
25
|
|
|
25
26
|
if (type === 'reference') {
|
|
26
27
|
const refElement = value.getPConnect().getComponent();
|
|
@@ -30,17 +31,10 @@ const DetailsRender = (props: DetailsRenderProps) => {
|
|
|
30
31
|
const element = value.getPConnect().getComponent();
|
|
31
32
|
const displayEl = <Fragment key={key}>{element}</Fragment>;
|
|
32
33
|
|
|
33
|
-
const fvlStyle = {
|
|
34
|
-
myColGap: {
|
|
35
|
-
columnGap: '0'
|
|
36
|
-
}
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
// const myEl = <div>boo</div>;
|
|
40
34
|
displayComp = (
|
|
41
|
-
<Fragment key={
|
|
35
|
+
<Fragment key={key1}>
|
|
42
36
|
<FieldValueList
|
|
43
|
-
style={
|
|
37
|
+
style={{ columnGap: '0'}}
|
|
44
38
|
variant={hideLabel ? 'stacked' : variant}
|
|
45
39
|
data-testid={testId}
|
|
46
40
|
fields={[{ id: '1', name: hideLabel ? '' : label, value: displayEl }]}
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { FieldValueList, Text } from '@pega/cosmos-react-core';
|
|
4
|
+
import type { PConnProps } from './PConnProps';
|
|
4
5
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
interface HighlightRenderProps extends PConnProps {
|
|
7
|
+
field?: any;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
const HighlightRender = (props: HighlightRenderProps) => {
|
|
11
|
+
const { getPConnect, field } = props;
|
|
8
12
|
|
|
9
13
|
field.config['displayMode'] = 'DISPLAY_ONLY';
|
|
10
14
|
|
|
@@ -16,20 +20,12 @@ const HighlightRender = (data: any) => {
|
|
|
16
20
|
|
|
17
21
|
const configProps = getPConnect().resolveConfigProps(field.config);
|
|
18
22
|
|
|
19
|
-
//
|
|
20
|
-
|
|
23
|
+
// @ts-ignore
|
|
21
24
|
const reactField = getPConnect().createComponent(field);
|
|
22
|
-
// const reactField = field.getPConnect().getComponent();
|
|
23
|
-
|
|
24
|
-
const styles = {
|
|
25
|
-
myWidth: {
|
|
26
|
-
width: 'auto'
|
|
27
|
-
}
|
|
28
|
-
};
|
|
29
25
|
|
|
30
26
|
return (
|
|
31
27
|
<FieldValueList
|
|
32
|
-
style={
|
|
28
|
+
style={{ width: 'auto' }}
|
|
33
29
|
variant='stacked'
|
|
34
30
|
data-testid={field.testId}
|
|
35
31
|
fields={[
|
|
@@ -20,6 +20,10 @@ const meta: Meta<typeof PegaDxilMyDetails> = {
|
|
|
20
20
|
export default meta;
|
|
21
21
|
type Story = StoryObj<typeof PegaDxilMyDetails>;
|
|
22
22
|
|
|
23
|
+
const Region = props => {
|
|
24
|
+
return <></>;
|
|
25
|
+
};
|
|
26
|
+
|
|
23
27
|
const renderField = resolvedProps => {
|
|
24
28
|
const {
|
|
25
29
|
displayAsStatus = false,
|
|
@@ -124,20 +128,36 @@ export const BasePegaDxilMyDetails: Story = args => {
|
|
|
124
128
|
setInheritedProp: () => {
|
|
125
129
|
/* nothing */
|
|
126
130
|
},
|
|
127
|
-
resolveConfigProps:
|
|
128
|
-
|
|
131
|
+
resolveConfigProps: config => {
|
|
132
|
+
return config;
|
|
129
133
|
}
|
|
130
134
|
};
|
|
131
135
|
}
|
|
132
136
|
};
|
|
133
137
|
|
|
134
|
-
const regionAChildren = pyReviewRaw.children[0].children.map(child => {
|
|
135
|
-
return props.getPConnect().createComponent(child);
|
|
136
|
-
});
|
|
137
|
-
|
|
138
138
|
return (
|
|
139
139
|
<>
|
|
140
|
-
<PegaDxilMyDetails {...props} {...args}>
|
|
140
|
+
<PegaDxilMyDetails {...props} {...args}>
|
|
141
|
+
<Region
|
|
142
|
+
{...{
|
|
143
|
+
getPConnect: () => ({
|
|
144
|
+
setInheritedProp: () => {},
|
|
145
|
+
getChildren: () =>
|
|
146
|
+
pyReviewRaw.children[0].children.map((child, index) => {
|
|
147
|
+
return {
|
|
148
|
+
getPConnect: () => ({
|
|
149
|
+
getRawMetadata: () => pyReviewRaw.children[0].children[index],
|
|
150
|
+
getConfigProps: () => {},
|
|
151
|
+
resolveConfigProps: () => regionChildrenResolved[index],
|
|
152
|
+
getComponent: config =>
|
|
153
|
+
props.getPConnect().createComponent(pyReviewRaw.children[0].children[index])
|
|
154
|
+
})
|
|
155
|
+
};
|
|
156
|
+
})
|
|
157
|
+
})
|
|
158
|
+
}}
|
|
159
|
+
/>
|
|
160
|
+
</PegaDxilMyDetails>
|
|
141
161
|
</>
|
|
142
162
|
);
|
|
143
163
|
};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { Fragment } from 'react';
|
|
2
|
-
import { Grid, Flex, FieldGroup, withConfiguration } from '@pega/cosmos-react-core';
|
|
1
|
+
import { Fragment, Children, ReactElement } from 'react';
|
|
2
|
+
import { Grid, Flex, FieldGroup, withConfiguration, GridContainerProps } from '@pega/cosmos-react-core';
|
|
3
3
|
import type { PConnFieldProps } from './PConnProps';
|
|
4
4
|
import DetailsRender from './DetailsRender';
|
|
5
5
|
import HighlightRender from './HighlightRender';
|
|
6
6
|
|
|
7
|
-
import StyledPegaDxilMyDetailsWrapper from './styles';
|
|
7
|
+
import StyledPegaDxilMyDetailsWrapper, { StyledDetailsGridContainer, StyledHighlightedFieldsHrLine } from './styles';
|
|
8
8
|
|
|
9
9
|
// includes in bundle
|
|
10
10
|
import { getAllFields } from './utils';
|
|
@@ -21,33 +21,30 @@ interface PegaDxilMyDetailsProps extends PConnFieldProps {
|
|
|
21
21
|
// any default values in config.pros should be set in defaultProps at bottom of this file
|
|
22
22
|
function PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
|
|
23
23
|
|
|
24
|
-
const { getPConnect,
|
|
24
|
+
const { getPConnect, label, showLabel = true, showHighlightedData = false } = props;
|
|
25
25
|
const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
|
|
26
26
|
|
|
27
|
-
//
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
kid.props.getPConnect().setInheritedProp('readOnly', true);
|
|
32
|
-
kid.props.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
|
|
27
|
+
// storybook doesn't get children of 1 as an array of 1
|
|
28
|
+
let { children } = props;
|
|
29
|
+
if (!Array.isArray(children)) {
|
|
30
|
+
children = Children.toArray(children);
|
|
33
31
|
}
|
|
34
32
|
|
|
33
|
+
// update children with readonly
|
|
34
|
+
Children.toArray(children).forEach(child => {
|
|
35
|
+
// @ts-ignore
|
|
36
|
+
child.props.getPConnect().setInheritedProp('readOnly', true);
|
|
37
|
+
// @ts-ignore
|
|
38
|
+
child.props.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
|
|
39
|
+
});
|
|
40
|
+
|
|
35
41
|
const numRegions = getAllFields(getPConnect)?.length;
|
|
36
42
|
const gridRepeat = "repeat(".concat(numRegions).concat(", 1fr)");
|
|
37
|
-
|
|
38
|
-
|
|
43
|
+
|
|
44
|
+
const gridContainer: GridContainerProps = { colGap: 0 };
|
|
39
45
|
gridContainer.cols = gridRepeat;
|
|
40
|
-
// @ts-ignore
|
|
41
46
|
gridContainer.alignItems = 'start';
|
|
42
47
|
|
|
43
|
-
const gridHighlightContainer = { "gap": 2};
|
|
44
|
-
// @ts-ignore
|
|
45
|
-
gridHighlightContainer.cols = gridRepeat;
|
|
46
|
-
// @ts-ignore
|
|
47
|
-
gridHighlightContainer.alignItems = 'flex-start';
|
|
48
|
-
// @ts-ignore
|
|
49
|
-
gridHighlightContainer.pad = [0, 0, 2, 0];
|
|
50
|
-
|
|
51
48
|
// Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
|
|
52
49
|
let highlightedDataArr = [];
|
|
53
50
|
if (showHighlightedData) {
|
|
@@ -55,17 +52,10 @@ function PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
|
|
|
55
52
|
const { highlightedData = [] } = getPConnect().getRawMetadata().config;
|
|
56
53
|
// @ts-ignore
|
|
57
54
|
highlightedDataArr = highlightedData.map((field) => {
|
|
58
|
-
|
|
59
|
-
return <HighlightRender field={field} props={props} />;
|
|
55
|
+
return <HighlightRender field={field} getPConnect={props.getPConnect} />;
|
|
60
56
|
});
|
|
61
57
|
}
|
|
62
58
|
|
|
63
|
-
const hrStyle = {
|
|
64
|
-
line: {
|
|
65
|
-
margin: '0.75rem 0',
|
|
66
|
-
opacity: '50%'
|
|
67
|
-
}
|
|
68
|
-
};
|
|
69
59
|
|
|
70
60
|
return (
|
|
71
61
|
<StyledPegaDxilMyDetailsWrapper>
|
|
@@ -77,15 +67,18 @@ function PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
|
|
|
77
67
|
container={{ direction: 'row', alignItems: 'normal', colGap: 10 }}
|
|
78
68
|
data-testid={`highlighted-column-count-${numRegions}`}
|
|
79
69
|
>
|
|
80
|
-
{highlightedDataArr.map((child:
|
|
70
|
+
{highlightedDataArr.map((child: ReactElement, i: number) => (
|
|
81
71
|
<Fragment key={`hf-${i + 1}`}>{child}</Fragment>
|
|
82
72
|
))}
|
|
83
73
|
</Flex>
|
|
84
|
-
<
|
|
74
|
+
<StyledHighlightedFieldsHrLine />
|
|
85
75
|
</>
|
|
86
76
|
)}
|
|
87
|
-
<Grid
|
|
88
|
-
|
|
77
|
+
<Grid
|
|
78
|
+
as={StyledDetailsGridContainer}
|
|
79
|
+
container={gridContainer}
|
|
80
|
+
data-testid={`column-count-${numRegions}`} >
|
|
81
|
+
{children.map((child: ReactElement, i: number) => (
|
|
89
82
|
|
|
90
83
|
<Flex
|
|
91
84
|
// @ts-ignore
|