diff --git a/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap b/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap index 1fe21fee..9d6e002a 100644 --- a/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap +++ b/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap @@ -24820,7 +24820,6 @@ export default function CreateProductForm(props) { }; const [name, setName] = React.useState(initialValues.name); const [imgKeys, setImgKeys] = React.useState(initialValues.imgKeys); - const imgKeysRef = React.useRef([]); const [errors, setErrors] = React.useState({}); const resetStateValues = () => { setName(initialValues.name); @@ -24937,9 +24936,8 @@ export default function CreateProductForm(props) { isReadOnly={false} > { - let value = files.map(({ s3Key }) => s3Key); + let value = files.map(({ key }) => key); if (onChange) { const modelFields = { name, @@ -25020,7 +25018,6 @@ export default function UpdateProductForm(props) { }; const [name, setName] = React.useState(initialValues.name); const [imgKeys, setImgKeys] = React.useState(initialValues.imgKeys); - const imgKeysRef = React.useRef([]); const [errors, setErrors] = React.useState({}); const resetStateValues = () => { const cleanValues = productRecord @@ -25152,10 +25149,9 @@ export default function UpdateProductForm(props) { isReadOnly={false} > ({ s3Key }))} + defaultFiles={imgKeys.map((key) => ({ key }))} onUploadSuccess={(files) => { - let value = files.map(({ s3Key }) => s3Key); + let value = files.map(({ key }) => key); if (onChange) { const modelFields = { name, @@ -25240,7 +25236,6 @@ export default function UpdateProductForm(props) { const [singleImgKey, setSingleImgKey] = React.useState( initialValues.singleImgKey ); - const singleImgKeyRef = React.useRef([]); const [errors, setErrors] = React.useState({}); const resetStateValues = () => { const cleanValues = productRecord @@ -25372,10 +25367,9 @@ export default function UpdateProductForm(props) { isReadOnly={false} > { - let value = files?.[0]?.s3Key; + let value = files?.[0]?.key; if (onChange) { const modelFields = { name, diff --git a/packages/codegen-ui-react/lib/forms/form-renderer-helper/event-targets.ts b/packages/codegen-ui-react/lib/forms/form-renderer-helper/event-targets.ts index af7963ff..0028c878 100644 --- a/packages/codegen-ui-react/lib/forms/form-renderer-helper/event-targets.ts +++ b/packages/codegen-ui-react/lib/forms/form-renderer-helper/event-targets.ts @@ -15,6 +15,7 @@ */ import { DataFieldDataType } from '@aws-amplify/codegen-ui'; import { factory, NodeFlags, Expression, SyntaxKind, Identifier } from 'typescript'; +import { STORAGE_FILE_KEY } from '../../utils/constants'; /* Builds the event target variable. Example: @@ -44,8 +45,8 @@ const expressionMap = { ), }; -// array: files.map(({ s3Key }) => s3Key) -// non-array: files?.[0]?.s3Key; +// array: files.map(({ key }) => key) +// non-array: files?.[0]?.key; export function extractKeyByMapping(array: string, key: string, isArray?: boolean) { if (isArray) { return factory.createCallExpression( @@ -82,7 +83,7 @@ export function extractKeyByMapping(array: string, key: string, isArray?: boolea factory.createNumericLiteral('0'), ), factory.createToken(SyntaxKind.QuestionDotToken), - factory.createIdentifier('s3Key'), + factory.createIdentifier(STORAGE_FILE_KEY), ); } @@ -126,7 +127,7 @@ export const buildTargetVariable = ( identifier: expressionMap.value, }, StorageField: { - expression: extractKeyByMapping('files', 's3Key', isArray), + expression: extractKeyByMapping('files', STORAGE_FILE_KEY, isArray), identifier: expressionMap.value, }, }; diff --git a/packages/codegen-ui-react/lib/forms/form-renderer-helper/form-state.ts b/packages/codegen-ui-react/lib/forms/form-renderer-helper/form-state.ts index bc2a4968..b75c76d5 100644 --- a/packages/codegen-ui-react/lib/forms/form-renderer-helper/form-state.ts +++ b/packages/codegen-ui-react/lib/forms/form-renderer-helper/form-state.ts @@ -46,7 +46,6 @@ import { getSetNameIdentifier, buildUseStateExpression, getControlledComponentDefaultValue, - buildUseRefExpression, } from '../../helpers'; import { getElementAccessExpression } from './invalid-variable-helpers'; import { shouldWrapInArrayField } from './render-checkers'; @@ -261,21 +260,6 @@ export const getUseStateHooks = (fieldConfigs: Record): Statement[] => { - return Object.entries(fieldConfigs) - .filter(([, { componentType }]) => { - return componentType === 'StorageField'; - }) - .map(([name]) => { - return buildUseRefExpression(`${name}Ref`, factory.createArrayLiteralExpression([], false)); - }); -}; - /** * function used by the Clear/ Reset button * it's a reset type but we also need to clear the state of the input fields as well diff --git a/packages/codegen-ui-react/lib/forms/react-form-renderer.ts b/packages/codegen-ui-react/lib/forms/react-form-renderer.ts index 2be7ac3d..cf7e5b6f 100644 --- a/packages/codegen-ui-react/lib/forms/react-form-renderer.ts +++ b/packages/codegen-ui-react/lib/forms/react-form-renderer.ts @@ -91,7 +91,6 @@ import { getUseStateHooks, resetStateFunction, getCanUnlinkModelName, - getUseRefHooks, } from './form-renderer-helper/form-state'; import { shouldWrapInArrayField } from './form-renderer-helper/render-checkers'; import { @@ -463,8 +462,6 @@ export abstract class ReactFormTemplateRenderer extends StudioTemplateRenderer< statements.push(...getUseStateHooks(formMetadata.fieldConfigs)); - statements.push(...getUseRefHooks(formMetadata.fieldConfigs)); - statements.push(buildUseStateExpression('errors', factory.createObjectLiteralExpression())); let defaultValueVariableName: undefined | string; diff --git a/packages/codegen-ui-react/lib/utils/constants.ts b/packages/codegen-ui-react/lib/utils/constants.ts index 039904e8..54ee0a3d 100644 --- a/packages/codegen-ui-react/lib/utils/constants.ts +++ b/packages/codegen-ui-react/lib/utils/constants.ts @@ -14,3 +14,5 @@ limitations under the License. */ export const COMPOSITE_PRIMARY_KEY_PROP_NAME = 'id'; + +export const STORAGE_FILE_KEY = 'key'; diff --git a/packages/codegen-ui-react/lib/utils/forms/storage-field-component.ts b/packages/codegen-ui-react/lib/utils/forms/storage-field-component.ts index 022ba286..fbddcbfe 100644 --- a/packages/codegen-ui-react/lib/utils/forms/storage-field-component.ts +++ b/packages/codegen-ui-react/lib/utils/forms/storage-field-component.ts @@ -26,6 +26,7 @@ import { factory, JsxAttribute, JsxAttributeLike, JsxElement, JsxExpression, Syn import { getDecoratedLabel } from '../../forms/form-renderer-helper'; import { buildOnChangeStatement } from '../../forms/form-renderer-helper/event-handler-props'; import { propertyToExpression } from '../../react-component-render-helper'; +import { STORAGE_FILE_KEY } from '../constants'; const fieldKeys = new Set(['label', 'isRequired', 'isReadOnly']); @@ -59,13 +60,6 @@ export const renderStorageFieldComponent = ( const storageManagerAttributes: JsxAttribute[] = []; const fieldAttributes: JsxAttribute[] = []; - storageManagerAttributes.push( - factory.createJsxAttribute( - factory.createIdentifier('ref'), - factory.createJsxExpression(undefined, factory.createIdentifier(`${component.name}Ref`)), - ), - ); - if (componentMetadata.formMetadata) { const errorKey = componentName.split('.').length > 1 || !isValidVariableName(componentName) @@ -98,7 +92,7 @@ export const renderStorageFieldComponent = ( undefined, undefined, undefined, - factory.createIdentifier('s3Key'), + factory.createIdentifier(STORAGE_FILE_KEY), undefined, undefined, undefined, @@ -108,7 +102,12 @@ export const renderStorageFieldComponent = ( factory.createToken(SyntaxKind.EqualsGreaterThanToken), factory.createParenthesizedExpression( factory.createObjectLiteralExpression( - [factory.createShorthandPropertyAssignment(factory.createIdentifier('s3Key'), undefined)], + [ + factory.createShorthandPropertyAssignment( + factory.createIdentifier(STORAGE_FILE_KEY), + undefined, + ), + ], false, ), ), @@ -124,7 +123,7 @@ export const renderStorageFieldComponent = ( factory.createObjectLiteralExpression( [ factory.createPropertyAssignment( - factory.createIdentifier('s3Key'), + factory.createIdentifier(STORAGE_FILE_KEY), factory.createIdentifier('singleImgKey'), ), ],