From aabed87e8091a5f875d6edd417744b058a769b4e Mon Sep 17 00:00:00 2001 From: Dane Pilcher Date: Tue, 14 Sep 2021 11:40:54 -0600 Subject: [PATCH] fix: remove text value from props and render bound property (#70) Resolves #67 --- .../studio-ui-codegen-react.test.ts.snap | 33 ++++++++++++++++++- .../__tests__/studio-ui-codegen-react.test.ts | 7 ++++ .../studio-ui-json/textWithDataBinding.json | 23 +++++++++++++ .../lib/amplify-ui-renderers/text.ts | 29 ++++++++++++---- packages/test-generator/lib/index.ts | 1 + .../lib/textWithDataBinding.json | 23 +++++++++++++ 6 files changed, 109 insertions(+), 7 deletions(-) create mode 100644 packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/textWithDataBinding.json create mode 100644 packages/test-generator/lib/textWithDataBinding.json diff --git a/packages/studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap b/packages/studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap index 292dd02de..b27f512ee 100644 --- a/packages/studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap +++ b/packages/studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap @@ -67,7 +67,6 @@ export default function CustomText(props: CustomTextProps): JSX.Element { @@ -162,6 +161,38 @@ export default function BoxWithButton(props: BoxWithButtonProps): JSX.Element { " `; +exports[`amplify render tests component with binding should render build property on Text 1`] = ` +"/* eslint-disable */ +import React from \\"react\\"; +import { + EscapeHatchProps, + Text, + getOverrideProps, +} from \\"@aws-amplify/ui-react\\"; + +export type TextWithDataBindingProps = { + textValue?: String, +} & { + overrides?: EscapeHatchProps | undefined | null, +}; +export default function TextWithDataBinding( + props: TextWithDataBindingProps +): JSX.Element { + const { textValue } = props; + return ( + + {textValue} + + ); +} +" +`; + exports[`amplify render tests component with data binding should add model imports 1`] = ` "/* eslint-disable */ import React from \\"react\\"; diff --git a/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-codegen-react.test.ts b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-codegen-react.test.ts index 297b2bfd7..291aa78bb 100644 --- a/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-codegen-react.test.ts +++ b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-codegen-react.test.ts @@ -92,6 +92,13 @@ describe('amplify render tests', () => { }); }); + describe('component with binding', () => { + it('should render build property on Text', () => { + const generatedCode = generateWithAmplifyRenderer('textWithDataBinding'); + expect(generatedCode).toMatchSnapshot(); + }); + }); + describe('custom render config', () => { it('should render ES5', () => { expect( diff --git a/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/textWithDataBinding.json b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/textWithDataBinding.json new file mode 100644 index 000000000..e55d4e59c --- /dev/null +++ b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/textWithDataBinding.json @@ -0,0 +1,23 @@ +{ + "id": "1234-5678-9010", + "componentType": "Text", + "name": "TextWithDataBinding", + "properties": { + "color": { + "value": "#ff0000" + }, + "width": { + "value": "20px" + }, + "value": { + "bindingProperties": { + "property": "textValue" + } + } + }, + "bindingProperties": { + "textValue": { + "type": "String" + } + } +} diff --git a/packages/studio-ui-codegen-react/lib/amplify-ui-renderers/text.ts b/packages/studio-ui-codegen-react/lib/amplify-ui-renderers/text.ts index b95c5c8c9..c8ec92838 100644 --- a/packages/studio-ui-codegen-react/lib/amplify-ui-renderers/text.ts +++ b/packages/studio-ui-codegen-react/lib/amplify-ui-renderers/text.ts @@ -6,22 +6,39 @@ import { StudioComponentProperties, } from '@amzn/amplify-ui-codegen-schema'; -import { factory, JsxElement } from 'typescript'; +import { factory, JsxElement, JsxChild } from 'typescript'; import { ReactComponentRenderer } from '../react-component-renderer'; +import { isBoundProperty } from '../react-component-render-helper'; export default class TextRenderer extends ReactComponentRenderer { renderElement(): JsxElement { const tagName = 'Text'; - const textValue = this.component.properties.value - ? (this.component.properties.value as FixedStudioComponentProperty).value ?? '' - : ''; + + // value should be child of Text, not a prop + const { value, ...properties } = this.component.properties; + const element = factory.createJsxElement( - this.renderOpeningElement(factory, this.component.properties, tagName), - [factory.createJsxText(textValue.toString())], + this.renderOpeningElement(factory, properties, tagName), + this.getChildren(), factory.createJsxClosingElement(factory.createIdentifier(tagName)), ); this.importCollection.addImport('@aws-amplify/ui-react', tagName); return element; } + + getChildren(): JsxChild[] { + const { value } = this.component.properties; + if (isBoundProperty(value)) { + const { + bindingProperties: { property }, + } = value; + return [factory.createJsxExpression(undefined, factory.createIdentifier(property))]; + } + return [ + factory.createJsxText( + (value ? (this.component.properties.value as FixedStudioComponentProperty).value ?? '' : '').toString(), + ), + ]; + } } diff --git a/packages/test-generator/lib/index.ts b/packages/test-generator/lib/index.ts index bbedb0432..1fefa2eef 100644 --- a/packages/test-generator/lib/index.ts +++ b/packages/test-generator/lib/index.ts @@ -9,3 +9,4 @@ export { default as SampleCodeSnippet } from './sampleCodeSnippet.json'; export { default as TextGolden } from './textGolden.json'; export { default as CollectionWithBinding } from './collectionWithBinding.json'; export { default as ComponentWithDataBinding } from './componentWithDataBinding.json'; +export { default as TextWithDataBinding } from './textWithDataBinding.json'; diff --git a/packages/test-generator/lib/textWithDataBinding.json b/packages/test-generator/lib/textWithDataBinding.json new file mode 100644 index 000000000..e55d4e59c --- /dev/null +++ b/packages/test-generator/lib/textWithDataBinding.json @@ -0,0 +1,23 @@ +{ + "id": "1234-5678-9010", + "componentType": "Text", + "name": "TextWithDataBinding", + "properties": { + "color": { + "value": "#ff0000" + }, + "width": { + "value": "20px" + }, + "value": { + "bindingProperties": { + "property": "textValue" + } + } + }, + "bindingProperties": { + "textValue": { + "type": "String" + } + } +}