Skip to content

Commit 208bbf6

Browse files
JJK801JJK801
committed
fix(codegen-ui-react): prevent useless props forward to custom components
1 parent 5e23c0c commit 208bbf6

File tree

7 files changed

+117
-63
lines changed

7 files changed

+117
-63
lines changed

‎packages/codegen-ui-react/lib/react-component-renderer.ts‎

Lines changed: 49 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
StudioComponentChild,
2121
ComponentMetadata,
2222
StudioGenericEvent,
23+
StudioComponentProperty,
2324
} from '@aws-amplify/codegen-ui';
2425
import {
2526
JsxAttributeLike,
@@ -47,6 +48,7 @@ import { addFormAttributes } from './forms';
4748
import { shouldWrapInArrayField, renderArrayFieldComponent, getDecoratedLabel } from './forms/form-renderer-helper';
4849
import { getIsRequiredValue } from './forms/form-renderer-helper/label-decorator';
4950
import { renderStorageFieldComponent } from './utils/forms/storage-field-component';
51+
import { Primitive } from './primitive';
5052

5153
export class ReactComponentRenderer<TPropIn> extends ComponentRendererBase<
5254
TPropIn,
@@ -123,38 +125,56 @@ export class ReactComponentRenderer<TPropIn> extends ComponentRendererBase<
123125
this.componentMetadata.stateReferences,
124126
);
125127

126-
const propertyAttributes = Object.entries(this.component.properties).map(([key, value]) => {
127-
if (key in localStateReferences) {
128-
const stateName = getStateName({ componentName: this.component.name, property: key });
129-
return buildOpeningElementProperties(
130-
this.componentMetadata,
131-
{ bindingProperties: { property: stateName } },
132-
key,
133-
);
134-
}
135-
if (
136-
this.componentMetadata.formMetadata &&
137-
this.componentMetadata.formMetadata.fieldConfigs[this.component.name]
138-
) {
139-
const {
140-
labelDecorator,
141-
fieldConfigs: {
142-
[this.component.name]: { isArray },
143-
},
144-
} = this.componentMetadata.formMetadata;
145-
const isRequired = getIsRequiredValue(this.component.properties.isRequired);
128+
const primitivesTypes = Object.values(Primitive);
129+
130+
const isPrimitive = primitivesTypes.includes(this.component.componentType as Primitive);
131+
const isHTML = this.component.componentType[0].match(/[a-z]/);
132+
133+
const shouldForwardProperty = ([key, value]: [string, StudioComponentProperty]) => {
134+
return (
135+
isPrimitive ||
136+
isHTML ||
137+
key in localStateReferences ||
138+
'collectionBindingProperties' in value ||
139+
'concat' in value ||
140+
value.configured
141+
);
142+
};
143+
144+
const propertyAttributes = Object.entries(this.component.properties)
145+
.filter(shouldForwardProperty)
146+
.map(([key, value]) => {
147+
if (key in localStateReferences) {
148+
const stateName = getStateName({ componentName: this.component.name, property: key });
149+
return buildOpeningElementProperties(
150+
this.componentMetadata,
151+
{ bindingProperties: { property: stateName } },
152+
key,
153+
);
154+
}
146155
if (
147-
((key === 'children' && this.component.componentType === 'ToggleButton') || key === 'label') &&
148-
((labelDecorator && labelDecorator === 'required' && isRequired) ||
149-
(labelDecorator === 'optional' && !isRequired)) &&
150-
'value' in value &&
151-
!isArray
156+
this.componentMetadata.formMetadata &&
157+
this.componentMetadata.formMetadata.fieldConfigs[this.component.name]
152158
) {
153-
return getDecoratedLabel(key, value.value.toString(), labelDecorator);
159+
const {
160+
labelDecorator,
161+
fieldConfigs: {
162+
[this.component.name]: { isArray },
163+
},
164+
} = this.componentMetadata.formMetadata;
165+
const isRequired = getIsRequiredValue(this.component.properties.isRequired);
166+
if (
167+
((key === 'children' && this.component.componentType === 'ToggleButton') || key === 'label') &&
168+
((labelDecorator && labelDecorator === 'required' && isRequired) ||
169+
(labelDecorator === 'optional' && !isRequired)) &&
170+
'value' in value &&
171+
!isArray
172+
) {
173+
return getDecoratedLabel(key, value.value.toString(), labelDecorator);
174+
}
154175
}
155-
}
156-
return buildOpeningElementProperties(this.componentMetadata, value, key);
157-
});
176+
return buildOpeningElementProperties(this.componentMetadata, value, key);
177+
});
158178

159179
// Reverse, and create element properties for localStateReferences which are not yet defined props
160180
const unmodeledPropertyAttributes = Object.entries(localStateReferences)

‎packages/codegen-ui/example-schemas/collectionWithBindingWithoutPredicate.json‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,20 @@
77
"componentType": "ListingCard",
88
"properties": {
99
"marginRight": {
10-
"value": "0"
10+
"value": "0",
11+
"configured": true
1112
},
1213
"marginBottom": {
13-
"value": "0"
14+
"value": "0",
15+
"configured": true
1416
},
1517
"marginTop": {
16-
"value": "0"
18+
"value": "0",
19+
"configured": true
1720
},
1821
"marginLeft": {
19-
"value": "0"
22+
"value": "0",
23+
"configured": true
2024
}
2125
},
2226
"overrides": {},

‎packages/codegen-ui/example-schemas/complexTest3.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,10 +73,12 @@
7373
"name": "ReneButton",
7474
"properties": {
7575
"width": {
76-
"value": "293px"
76+
"value": "293px",
77+
"configured": true
7778
},
7879
"height": {
79-
"value": "45px"
80+
"value": "45px",
81+
"configured": true
8082
}
8183
}
8284
},

‎packages/codegen-ui/example-schemas/customChild.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,12 @@
1010
"name": "MyCustomButton",
1111
"properties": {
1212
"color": {
13-
"value": "#ff0000"
13+
"value": "#ff0000",
14+
"configured": true
1415
},
1516
"width": {
16-
"value": "20px"
17+
"value": "20px",
18+
"configured": true
1719
}
1820
}
1921
}

‎packages/codegen-ui/example-schemas/customChildMalformedProperty.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@
1818
{
1919
"value": "Value!"
2020
}
21-
]
21+
],
22+
"configured": true
2223
}
2324
}
2425
}

‎packages/codegen-ui/example-schemas/parsedFixedValues.json‎

Lines changed: 44 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,12 @@
1313
"name": "MyInputString",
1414
"properties": {
1515
"id": {
16-
"value": "string-value"
16+
"value": "string-value",
17+
"configured": true
1718
},
1819
"value": {
19-
"value": "raw string value"
20+
"value": "raw string value",
21+
"configured": true
2022
}
2123
}
2224
},
@@ -25,10 +27,12 @@
2527
"name": "MyInputNumber",
2628
"properties": {
2729
"id": {
28-
"value": "number-value"
30+
"value": "number-value",
31+
"configured": true
2932
},
3033
"value": {
31-
"value": "67548"
34+
"value": "67548",
35+
"configured": true
3236
}
3337
}
3438
},
@@ -37,11 +41,13 @@
3741
"name": "MyInputParsedNumber",
3842
"properties": {
3943
"id": {
40-
"value": "parsed-number-value"
44+
"value": "parsed-number-value",
45+
"configured": true
4146
},
4247
"value": {
4348
"value": "67548",
44-
"type": "Number"
49+
"type": "Number",
50+
"configured": true
4551
}
4652
}
4753
},
@@ -50,10 +56,12 @@
5056
"name": "MyInputBoolean",
5157
"properties": {
5258
"id": {
53-
"value": "boolean-value"
59+
"value": "boolean-value",
60+
"configured": true
5461
},
5562
"value": {
56-
"value": "true"
63+
"value": "true",
64+
"configured": true
5765
}
5866
}
5967
},
@@ -62,11 +70,13 @@
6270
"name": "MyInputPrasedBoolean",
6371
"properties": {
6472
"id": {
65-
"value": "parsed-boolean-value"
73+
"value": "parsed-boolean-value",
74+
"configured": true
6675
},
6776
"value": {
6877
"value": "true",
69-
"type": "Boolean"
78+
"type": "Boolean",
79+
"configured": true
7080
}
7181
}
7282
},
@@ -75,10 +85,12 @@
7585
"name": "MyInputJson",
7686
"properties": {
7787
"id": {
78-
"value": "json-value"
88+
"value": "json-value",
89+
"configured": true
7990
},
8091
"value": {
81-
"value": "{\"foo\": \"bar\"}"
92+
"value": "{\"foo\": \"bar\"}",
93+
"configured": true
8294
}
8395
}
8496
},
@@ -87,11 +99,13 @@
8799
"name": "MyInputParsedJson",
88100
"properties": {
89101
"id": {
90-
"value": "parsed-json-value"
102+
"value": "parsed-json-value",
103+
"configured": true
91104
},
92105
"value": {
93106
"value": "{\"foo\": \"bar\"}",
94-
"type": "Object"
107+
"type": "Object",
108+
"configured": true
95109
}
96110
}
97111
},
@@ -100,10 +114,12 @@
100114
"name": "MyInputArray",
101115
"properties": {
102116
"id": {
103-
"value": "array-value"
117+
"value": "array-value",
118+
"configured": true
104119
},
105120
"value": {
106-
"value": "[1,2,3]"
121+
"value": "[1,2,3]",
122+
"configured": true
107123
}
108124
}
109125
},
@@ -112,11 +128,13 @@
112128
"name": "MyInputParsedArray",
113129
"properties": {
114130
"id": {
115-
"value": "parsed-array-value"
131+
"value": "parsed-array-value",
132+
"configured": true
116133
},
117134
"value": {
118135
"value": "[1,2,3]",
119-
"type": "Object"
136+
"type": "Object",
137+
"configured": true
120138
}
121139
}
122140
},
@@ -125,10 +143,12 @@
125143
"name": "MyInputNull",
126144
"properties": {
127145
"id": {
128-
"value": "null-value"
146+
"value": "null-value",
147+
"configured": true
129148
},
130149
"value": {
131-
"value": "null"
150+
"value": "null",
151+
"configured": true
132152
}
133153
}
134154
},
@@ -137,11 +157,13 @@
137157
"name": "MyInputParsedNull",
138158
"properties": {
139159
"id": {
140-
"value": "parsed-null-value"
160+
"value": "parsed-null-value",
161+
"configured": true
141162
},
142163
"value": {
143164
"value": "null",
144-
"type": "Object"
165+
"type": "Object",
166+
"configured": true
145167
}
146168
}
147169
}

‎packages/codegen-ui/example-schemas/sampleCodeSnippet.json‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,17 @@
1414
"name": "MyCustomButton",
1515
"properties": {
1616
"color": {
17-
"value": "#ff0000"
17+
"value": "#ff0000",
18+
"configured": true
1819
},
1920
"width": {
20-
"value": "20px"
21+
"value": "20px",
22+
"configured": true
2123
},
2224
"buttonText": {
2325
"exposedAs": "buttonText",
24-
"value": "Click Me"
26+
"value": "Click Me",
27+
"configured": true
2528
}
2629
}
2730
}

0 commit comments

Comments
 (0)