Skip to content

Commit

Permalink
fix: use correct syntax for conditonals as action parameter (#398)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dpilch
dpilch committed Feb 10, 2022
1 parent 8fe6004 commit 5ade452
Show file tree
Hide file tree
Showing 10 changed files with 306 additions and 104 deletions.
166 changes: 78 additions & 88 deletions ...s/codegen-ui-react/lib/__tests__/__snapshots__/react-component-render-helper.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,21 +88,45 @@ NodeObject {
"dotDotDotToken": undefined,
"end": -1,
"expression": NodeObject {
"dotDotDotToken": undefined,
"end": -1,
"expression": NodeObject {
"colonToken": TokenObject {
"colonToken": TokenObject {
"end": -1,
"flags": 8,
"kind": 58,
"modifierFlagsCache": 0,
"parent": undefined,
"pos": -1,
"transformFlags": 0,
},
"condition": NodeObject {
"end": -1,
"expression": NodeObject {
"end": -1,
"flags": 8,
"kind": 58,
"kind": 219,
"left": IdentifierObject {
"end": -1,
"escapedText": "prop",
"flags": 8,
"kind": 79,
"modifierFlagsCache": 0,
"originalKeywordKind": undefined,
"parent": undefined,
"pos": -1,
"transformFlags": 0,
},
"modifierFlagsCache": 0,
"operatorToken": TokenObject {
"end": -1,
"flags": 8,
"kind": 55,
"modifierFlagsCache": 0,
"parent": undefined,
"pos": -1,
"transformFlags": 0,
},
"parent": undefined,
"pos": -1,
"transformFlags": 0,
},
"condition": NodeObject {
"end": -1,
"expression": NodeObject {
"right": NodeObject {
"end": -1,
"flags": 8,
"kind": 219,
Expand All @@ -121,110 +145,76 @@ NodeObject {
"operatorToken": TokenObject {
"end": -1,
"flags": 8,
"kind": 55,
"kind": 34,
"modifierFlagsCache": 0,
"parent": undefined,
"pos": -1,
"transformFlags": 0,
},
"parent": undefined,
"pos": -1,
"right": NodeObject {
"right": TokenObject {
"end": -1,
"flags": 8,
"kind": 219,
"left": IdentifierObject {
"end": -1,
"escapedText": "prop",
"flags": 8,
"kind": 79,
"modifierFlagsCache": 0,
"originalKeywordKind": undefined,
"parent": undefined,
"pos": -1,
"transformFlags": 0,
},
"kind": 8,
"modifierFlagsCache": 0,
"operatorToken": TokenObject {
"end": -1,
"flags": 8,
"kind": 34,
"modifierFlagsCache": 0,
"parent": undefined,
"pos": -1,
"transformFlags": 0,
},
"numericLiteralFlags": 0,
"parent": undefined,
"pos": -1,
"right": TokenObject {
"end": -1,
"flags": 8,
"kind": 8,
"modifierFlagsCache": 0,
"numericLiteralFlags": 0,
"parent": undefined,
"pos": -1,
"text": "0",
"transformFlags": 0,
},
"text": "0",
"transformFlags": 0,
},
"transformFlags": 0,
},
"flags": 8,
"kind": 210,
"modifierFlagsCache": 0,
"parent": undefined,
"pos": -1,
"transformFlags": 0,
},
"end": -1,
"flags": 8,
"kind": 220,
"kind": 210,
"modifierFlagsCache": 0,
"parent": undefined,
"pos": -1,
"questionToken": TokenObject {
"end": -1,
"flags": 8,
"kind": 57,
"modifierFlagsCache": 0,
"parent": undefined,
"pos": -1,
"transformFlags": 0,
},
"transformFlags": 0,
"whenFalse": TokenObject {
"end": -1,
"flags": 8,
"hasExtendedUnicodeEscape": undefined,
"kind": 10,
"modifierFlagsCache": 0,
"parent": undefined,
"pos": -1,
"singleQuote": undefined,
"text": "bar",
"transformFlags": 0,
},
"whenTrue": TokenObject {
"end": -1,
"flags": 8,
"hasExtendedUnicodeEscape": undefined,
"kind": 10,
"modifierFlagsCache": 0,
"parent": undefined,
"pos": -1,
"singleQuote": undefined,
"text": "foo",
"transformFlags": 0,
},
},
"end": -1,
"flags": 8,
"kind": 286,
"kind": 220,
"modifierFlagsCache": 0,
"parent": undefined,
"pos": -1,
"transformFlags": 2,
"questionToken": TokenObject {
"end": -1,
"flags": 8,
"kind": 57,
"modifierFlagsCache": 0,
"parent": undefined,
"pos": -1,
"transformFlags": 0,
},
"transformFlags": 0,
"whenFalse": TokenObject {
"end": -1,
"flags": 8,
"hasExtendedUnicodeEscape": undefined,
"kind": 10,
"modifierFlagsCache": 0,
"parent": undefined,
"pos": -1,
"singleQuote": undefined,
"text": "bar",
"transformFlags": 0,
},
"whenTrue": TokenObject {
"end": -1,
"flags": 8,
"hasExtendedUnicodeEscape": undefined,
"kind": 10,
"modifierFlagsCache": 0,
"parent": undefined,
"pos": -1,
"singleQuote": undefined,
"text": "foo",
"transformFlags": 0,
},
},
"flags": 8,
"kind": 286,
Expand Down Expand Up @@ -260,9 +250,9 @@ NodeObject {
}
`;

exports[`react-component-render-helper buildContionalExpression operandType does not exist 1`] = `"{(user?.age && user?.age > \\"18\\") ? \\"Vote\\" : \\"Sorry you cannot vote\\"}"`;
exports[`react-component-render-helper buildContionalExpression operandType does not exist 1`] = `"(user?.age && user?.age > \\"18\\") ? \\"Vote\\" : \\"Sorry you cannot vote\\""`;

exports[`react-component-render-helper buildContionalExpression operandType exists 1`] = `"{(user?.age && user?.age > 18) ? \\"Vote\\" : \\"Sorry you cannot vote\\"}"`;
exports[`react-component-render-helper buildContionalExpression operandType exists 1`] = `"(user?.age && user?.age > 18) ? \\"Vote\\" : \\"Sorry you cannot vote\\""`;

exports[`react-component-render-helper buildFixedJsxExpression boolean 1`] = `"{true}"`;

Expand Down
67 changes: 67 additions & 0 deletions packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -335,6 +335,73 @@ export default function ReloadButton(
}
`;

exports[`amplify render tests actions with conditional in parameters 1`] = `
Object {
"componentText": "/* eslint-disable */
import React from \\"react\\";
import { User } from \\"../models\\";
import {
EscapeHatchProps,
createDataStorePredicate,
getOverrideProps,
useDataStoreBinding,
useStateMutationAction,
} from \\"@aws-amplify/ui-react/internal\\";
import { Button, Flex, FlexProps, Text } from \\"@aws-amplify/ui-react\\";

export type ConditionalInMutationProps = React.PropsWithChildren<
Partial<FlexProps> & {
user?: User;
} & {
overrides?: EscapeHatchProps | undefined | null;
}
>;
export default function ConditionalInMutation(
props: ConditionalInMutationProps
): React.ReactElement {
const { user: userProp, overrides, ...rest } = props;
const [mutatedValueChildren, setMutatedValueChildren] =
useStateMutationAction(\\"Default Value\\");
const userFilterObj = {
field: \\"firstName\\",
operand: \\"Johnny\\",
operator: \\"eq\\",
};
const userFilter = createDataStorePredicate<User>(userFilterObj);
const userDataStore = useDataStoreBinding({
type: \\"collection\\",
model: User,
criteria: userFilter,
}).items[0];
const user = userProp !== undefined ? userProp : userDataStore;
const conditionalPropertyMutationClick = () => {
setMutatedValueChildren(
user?.age && user?.age == 45 ? \\"Conditional Value\\" : \\"Unconditional Value\\"
);
};
return (
/* @ts-ignore: TS2322 */
<Flex {...rest} {...getOverrideProps(overrides, \\"ConditionalInMutation\\")}>
<Text
children={mutatedValueChildren}
{...getOverrideProps(overrides, \\"MutatedValue\\")}
></Text>
<Button
children=\\"Apply Conditional Property Mutation\\"
onClick={() => {
conditionalPropertyMutationClick();
}}
{...getOverrideProps(overrides, \\"ConditionalPropertyMutation\\")}
></Button>
</Flex>
);
}
",
"declaration": undefined,
"renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests basic component tests should generate a simple button component 1`] = `
"/* eslint-disable */
import React from \\"react\\";
Expand Down
4 changes: 4 additions & 0 deletions packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -323,6 +323,10 @@ describe('amplify render tests', () => {
expect(generateWithAmplifyRenderer('workflow/dataStoreDeleteItem')).toMatchSnapshot();
});
});

it('with conditional in parameters', () => {
expect(generateWithAmplifyRenderer('workflow/conditionalInMutation')).toMatchSnapshot();
});
});

it('should render events', () => {
Expand Down
29 changes: 13 additions & 16 deletions packages/codegen-ui-react/lib/react-component-render-helper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -460,7 +460,7 @@ function typedValueToJsxLiteral(value: any): PrimaryExpression {
}
}

export function buildConditionalExpression(prop: ConditionalStudioComponentProperty): JsxExpression {
export function buildConditionalExpression(prop: ConditionalStudioComponentProperty): Expression {
const { property, field, operand, operandType, operator, then } = prop.condition;
const elseBlock = prop.condition.else;
const operatorToken = getSyntaxKindToken(operator);
Expand All @@ -478,31 +478,28 @@ export function buildConditionalExpression(prop: ConditionalStudioComponentPrope
)
: factory.createIdentifier(property);

return factory.createJsxExpression(
undefined,
factory.createConditionalExpression(
factory.createParenthesizedExpression(
return factory.createConditionalExpression(
factory.createParenthesizedExpression(
factory.createBinaryExpression(
propertyAccess,
factory.createToken(SyntaxKind.AmpersandAmpersandToken),
factory.createBinaryExpression(
propertyAccess,
factory.createToken(SyntaxKind.AmpersandAmpersandToken),
factory.createBinaryExpression(
propertyAccess,
operatorToken,
getConditionalOperandExpression(operand, operandType),
),
operatorToken,
getConditionalOperandExpression(operand, operandType),
),
),
factory.createToken(SyntaxKind.QuestionToken),
resolvePropToExpression(then),
factory.createToken(SyntaxKind.ColonToken),
resolvePropToExpression(elseBlock),
),
factory.createToken(SyntaxKind.QuestionToken),
resolvePropToExpression(then),
factory.createToken(SyntaxKind.ColonToken),
resolvePropToExpression(elseBlock),
);
}

export function buildConditionalAttr(prop: ConditionalStudioComponentProperty, propName: string): JsxAttribute {
const expr = buildConditionalExpression(prop);
return factory.createJsxAttribute(factory.createIdentifier(propName), expr);
return factory.createJsxAttribute(factory.createIdentifier(propName), factory.createJsxExpression(undefined, expr));
}

export function buildChildElement(prop?: StudioComponentProperty): JsxChild | undefined {
Expand Down
Loading

0 comments on commit 5ade452

Please sign in to comment.