Skip to content

Commit

Permalink
fix: add default value on nested inputs to avoid console errors (#974)
Browse files Browse the repository at this point in the history 
Co-authored-by: David Lopez <lopezbnd@amazon.com>
  • Loading branch information
@letsbelopez
letsbelopez and David Lopez authored Apr 4, 2023
1 parent cb4dba4 commit 7299042
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 17 deletions.
24 changes: 12 additions & 12 deletions ...s/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7657,7 +7657,7 @@ export default function HappyPathJSONCreate(props) {
></Heading>
<TextField
label=\\"First name\\"
value={basics[\\"firstName\\"]}
value={basics[\\"firstName\\"] ?? \\"\\"}
onChange={(e) => {
let { value } = e.target;
if (onChange) {
Expand All @@ -7684,7 +7684,7 @@ export default function HappyPathJSONCreate(props) {
></TextField>
<TextField
label=\\"Email address\\"
value={basics[\\"emailAddress\\"]}
value={basics[\\"emailAddress\\"] ?? \\"\\"}
onChange={(e) => {
let { value } = e.target;
if (onChange) {
Expand Down Expand Up @@ -7764,7 +7764,7 @@ export default function HappyPathJSONCreate(props) {
</ArrayField>
<TextField
label=\\"Month\\"
value={favoriteThings[\\"month\\"]}
value={favoriteThings[\\"month\\"] ?? \\"\\"}
onChange={(e) => {
let { value } = e.target;
if (onChange) {
Expand Down Expand Up @@ -7793,7 +7793,7 @@ export default function HappyPathJSONCreate(props) {
label=\\"Number\\"
type=\\"number\\"
step=\\"any\\"
value={favoriteThings[\\"number\\"]}
value={favoriteThings[\\"number\\"] ?? \\"\\"}
onChange={(e) => {
let { value } = e.target;
if (onChange) {
Expand Down Expand Up @@ -8254,7 +8254,7 @@ export default function HappyPathJSONUpdate(props) {
></Heading>
<TextField
label=\\"First name\\"
value={basics[\\"firstName\\"]}
value={basics[\\"firstName\\"] ?? \\"\\"}
onChange={(e) => {
let { value } = e.target;
if (onChange) {
Expand All @@ -8281,7 +8281,7 @@ export default function HappyPathJSONUpdate(props) {
></TextField>
<TextField
label=\\"Email address\\"
value={basics[\\"emailAddress\\"]}
value={basics[\\"emailAddress\\"] ?? \\"\\"}
onChange={(e) => {
let { value } = e.target;
if (onChange) {
Expand Down Expand Up @@ -8361,7 +8361,7 @@ export default function HappyPathJSONUpdate(props) {
</ArrayField>
<TextField
label=\\"Month\\"
value={favoriteThings[\\"month\\"]}
value={favoriteThings[\\"month\\"] ?? \\"\\"}
onChange={(e) => {
let { value } = e.target;
if (onChange) {
Expand Down Expand Up @@ -8390,7 +8390,7 @@ export default function HappyPathJSONUpdate(props) {
label=\\"Number\\"
type=\\"number\\"
step=\\"any\\"
value={favoriteThings[\\"number\\"]}
value={favoriteThings[\\"number\\"] ?? \\"\\"}
onChange={(e) => {
let { value } = e.target;
if (onChange) {
Expand Down Expand Up @@ -8917,7 +8917,7 @@ export default function NestedJson(props) {
></Heading>
<TextField
label=\\"favoriteQuote\\"
value={bio[\\"favorite Quote\\"]}
value={bio[\\"favorite Quote\\"] ?? \\"\\"}
onChange={(e) => {
let { value } = e.target;
if (onChange) {
Expand Down Expand Up @@ -8947,7 +8947,7 @@ export default function NestedJson(props) {
></TextField>
<TextField
label=\\"favoriteAnimal\\"
value={bio[\\"favorite-Animal\\"]}
value={bio[\\"favorite-Animal\\"] ?? \\"\\"}
onChange={(e) => {
let { value } = e.target;
if (onChange) {
Expand Down Expand Up @@ -9657,7 +9657,7 @@ export default function NestedJson(props) {
></Heading>
<TextField
label=\\"favoriteQuote\\"
value={bio[\\"favoriteQuote\\"]}
value={bio[\\"favoriteQuote\\"] ?? \\"\\"}
onChange={(e) => {
let { value } = e.target;
if (onChange) {
Expand All @@ -9684,7 +9684,7 @@ export default function NestedJson(props) {
></TextField>
<TextField
label=\\"favoriteAnimal\\"
value={bio[\\"favoriteAnimal\\"]}
value={bio[\\"favoriteAnimal\\"] ?? \\"\\"}
onChange={(e) => {
let { value } = e.target;
if (onChange) {
Expand Down
13 changes: 8 additions & 5 deletions packages/codegen-ui-react/lib/forms/form-renderer-helper/value-props.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
*/

import { FieldConfigMetadata, StudioDataSourceType, StudioFormActionType } from '@aws-amplify/codegen-ui';
import { factory, Identifier, JsxAttribute, SyntaxKind, ElementAccessExpression } from 'typescript';
import { factory, Identifier, JsxAttribute, SyntaxKind, Expression } from 'typescript';
import { getCurrentDisplayValueName, getCurrentValueName, resetValuesName } from './form-state';
import { shouldWrapInArrayField } from './render-checkers';
import { FIELD_TYPE_TO_TYPESCRIPT_MAP } from './typescript-type-map';
Expand Down Expand Up @@ -125,16 +125,19 @@ export const renderValueAttribute = ({
if (fieldConfig.isArray) {
renderedFieldName = getCurrentValueName(renderedFieldName);
}
let fieldNameIdentifier: Identifier | ElementAccessExpression = factory.createIdentifier(renderedFieldName);
let fieldNameIdentifier: Identifier | Expression = factory.createIdentifier(renderedFieldName);

// If a component has a '.', it's nested and needs an object ref.
// but if it's an array, it needs to use the currentArrayValue whether it's nested or not
// The ArrayField component will update the nested value.
if (componentName.includes('.') && !fieldConfig.isArray) {
const [parent, child] = componentName.split('.');
fieldNameIdentifier = factory.createElementAccessExpression(
factory.createIdentifier(parent),
factory.createStringLiteral(child),
// if it's nested default to an empty string because initial value is undefined.
// favoriteThings["animals"] ?? ""
fieldNameIdentifier = factory.createBinaryExpression(
factory.createElementAccessExpression(factory.createIdentifier(parent), factory.createStringLiteral(child)),
factory.createToken(SyntaxKind.QuestionQuestionToken),
factory.createStringLiteral(''),
);
}

Expand Down

0 comments on commit 7299042

Please sign in to comment.