Skip to content

Commit 2a1ea75

Browse files
Hein Jeonghein-j
Hein Jeong
authored and
hein-j
committed
fix: change handlers and props for StorageField
1 parent aca2b7d commit 2a1ea75

File tree

4 files changed

+241
-61
lines changed

4 files changed

+241
-61
lines changed

‎packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap

Lines changed: 82 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -24936,20 +24936,33 @@ export default function CreateProductForm(props) {
2493624936
isReadOnly={false}
2493724937
>
2493824938
<StorageManager
24939-
onUploadSuccess={(files) => {
24940-
let value = files.map(({ key }) => key);
24941-
if (onChange) {
24942-
const modelFields = {
24943-
name,
24944-
imgKeys: value,
24945-
};
24946-
const result = onChange(modelFields);
24947-
value = result?.imgKeys ?? value;
24948-
}
24949-
if (errors.imgKeys?.hasError) {
24950-
runValidationTasks(\\"imgKeys\\", value);
24951-
}
24952-
setImgKeys(value);
24939+
onUploadSuccess={({ key }) => {
24940+
setImgKeys((prev) => {
24941+
let value = [...prev, key];
24942+
if (onChange) {
24943+
const modelFields = {
24944+
name,
24945+
imgKeys: value,
24946+
};
24947+
const result = onChange(modelFields);
24948+
value = result?.imgKeys ?? value;
24949+
}
24950+
return value;
24951+
});
24952+
}}
24953+
onFileRemove={({ key }) => {
24954+
setImgKeys((prev) => {
24955+
let value = prev.filter((f) => f !== key);
24956+
if (onChange) {
24957+
const modelFields = {
24958+
name,
24959+
imgKeys: value,
24960+
};
24961+
const result = onChange(modelFields);
24962+
value = result?.imgKeys ?? value;
24963+
}
24964+
return value;
24965+
});
2495324966
}}
2495424967
accessLevel={\\"protected\\"}
2495524968
acceptedFileTypes={[\\".txt\\", \\".pdf\\"]}
@@ -25150,20 +25163,33 @@ export default function UpdateProductForm(props) {
2515025163
>
2515125164
<StorageManager
2515225165
defaultFiles={imgKeys.map((key) => ({ key }))}
25153-
onUploadSuccess={(files) => {
25154-
let value = files.map(({ key }) => key);
25155-
if (onChange) {
25156-
const modelFields = {
25157-
name,
25158-
imgKeys: value,
25159-
};
25160-
const result = onChange(modelFields);
25161-
value = result?.imgKeys ?? value;
25162-
}
25163-
if (errors.imgKeys?.hasError) {
25164-
runValidationTasks(\\"imgKeys\\", value);
25165-
}
25166-
setImgKeys(value);
25166+
onUploadSuccess={({ key }) => {
25167+
setImgKeys((prev) => {
25168+
let value = [...prev, key];
25169+
if (onChange) {
25170+
const modelFields = {
25171+
name,
25172+
imgKeys: value,
25173+
};
25174+
const result = onChange(modelFields);
25175+
value = result?.imgKeys ?? value;
25176+
}
25177+
return value;
25178+
});
25179+
}}
25180+
onFileRemove={({ key }) => {
25181+
setImgKeys((prev) => {
25182+
let value = prev.filter((f) => f !== key);
25183+
if (onChange) {
25184+
const modelFields = {
25185+
name,
25186+
imgKeys: value,
25187+
};
25188+
const result = onChange(modelFields);
25189+
value = result?.imgKeys ?? value;
25190+
}
25191+
return value;
25192+
});
2516725193
}}
2516825194
accessLevel={\\"private\\"}
2516925195
acceptedFileTypes={[\\".doc\\", \\".pdf\\"]}
@@ -25367,21 +25393,34 @@ export default function UpdateProductForm(props) {
2536725393
isReadOnly={false}
2536825394
>
2536925395
<StorageManager
25370-
defaultFiles={[{ key: singleImgKey }]}
25371-
onUploadSuccess={(files) => {
25372-
let value = files?.[0]?.key;
25373-
if (onChange) {
25374-
const modelFields = {
25375-
name,
25376-
singleImgKey: value,
25377-
};
25378-
const result = onChange(modelFields);
25379-
value = result?.singleImgKey ?? value;
25380-
}
25381-
if (errors.singleImgKey?.hasError) {
25382-
runValidationTasks(\\"singleImgKey\\", value);
25383-
}
25384-
setSingleImgKey(value);
25396+
defaultFiles={singleImgKey ? [{ key: singleImgKey }] : undefined}
25397+
onUploadSuccess={({ key }) => {
25398+
setSingleImgKey((prev) => {
25399+
let value = key;
25400+
if (onChange) {
25401+
const modelFields = {
25402+
name,
25403+
singleImgKey: value,
25404+
};
25405+
const result = onChange(modelFields);
25406+
value = result?.singleImgKey ?? value;
25407+
}
25408+
return value;
25409+
});
25410+
}}
25411+
onFileRemove={({ key }) => {
25412+
setSingleImgKey((prev) => {
25413+
let value = initialValues?.singleImgKey;
25414+
if (onChange) {
25415+
const modelFields = {
25416+
name,
25417+
singleImgKey: value,
25418+
};
25419+
const result = onChange(modelFields);
25420+
value = result?.singleImgKey ?? value;
25421+
}
25422+
return value;
25423+
});
2538525424
}}
2538625425
accessLevel={\\"protected\\"}
2538725426
acceptedFileTypes={[\\".txt\\", \\".pdf\\"]}

‎packages/codegen-ui-react/lib/forms/form-renderer-helper/event-handler-props.ts

Lines changed: 135 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ import { getOnChangeValidationBlock } from './validation';
5454
import { buildModelFieldObject } from './model-fields';
5555
import { isModelDataType, shouldWrapInArrayField } from './render-checkers';
5656
import { extractModelAndKeys, getMatchEveryModelFieldCallExpression } from './model-values';
57-
import { COMPOSITE_PRIMARY_KEY_PROP_NAME } from '../../utils/constants';
57+
import { COMPOSITE_PRIMARY_KEY_PROP_NAME, STORAGE_FILE_KEY } from '../../utils/constants';
5858

5959
export const buildMutationBindings = (form: StudioForm, primaryKeys: string[] = []) => {
6060
const {
@@ -447,3 +447,137 @@ export function buildOnSelect({
447447
),
448448
);
449449
}
450+
451+
const storageManagerOnChangeHandlerMap = {
452+
onUploadSuccess: {
453+
value: {
454+
scalar: () => factory.createIdentifier('key'),
455+
array: () =>
456+
factory.createArrayLiteralExpression(
457+
[factory.createSpreadElement(factory.createIdentifier('prev')), factory.createIdentifier(STORAGE_FILE_KEY)],
458+
false,
459+
),
460+
},
461+
},
462+
onFileRemove: {
463+
value: {
464+
scalar: (fieldName?: string) =>
465+
fieldName ? buildAccessChain(['initialValues', fieldName]) : factory.createIdentifier('undefined'),
466+
array: () =>
467+
factory.createCallExpression(
468+
factory.createPropertyAccessExpression(factory.createIdentifier('prev'), factory.createIdentifier('filter')),
469+
undefined,
470+
[
471+
factory.createArrowFunction(
472+
undefined,
473+
undefined,
474+
[
475+
factory.createParameterDeclaration(
476+
undefined,
477+
undefined,
478+
undefined,
479+
factory.createIdentifier('f'),
480+
undefined,
481+
undefined,
482+
undefined,
483+
),
484+
],
485+
undefined,
486+
factory.createToken(SyntaxKind.EqualsGreaterThanToken),
487+
factory.createBinaryExpression(
488+
factory.createIdentifier('f'),
489+
factory.createToken(SyntaxKind.ExclamationEqualsEqualsToken),
490+
factory.createIdentifier(STORAGE_FILE_KEY),
491+
),
492+
),
493+
],
494+
),
495+
},
496+
},
497+
};
498+
499+
export const buildStorageManagerOnChangeStatement = (
500+
component: StudioComponent | StudioComponentChild,
501+
fieldConfigs: Record<string, FieldConfigMetadata>,
502+
handlerName: 'onUploadSuccess' | 'onFileRemove',
503+
) => {
504+
const { name: fieldName } = component;
505+
const fieldConfig = fieldConfigs[fieldName];
506+
const { sanitizedFieldName, isArray } = fieldConfig;
507+
const renderedFieldName = sanitizedFieldName || fieldName;
508+
509+
return factory.createJsxAttribute(
510+
factory.createIdentifier(handlerName),
511+
factory.createJsxExpression(
512+
undefined,
513+
factory.createArrowFunction(
514+
undefined,
515+
undefined,
516+
[
517+
factory.createParameterDeclaration(
518+
undefined,
519+
undefined,
520+
undefined,
521+
factory.createObjectBindingPattern([
522+
factory.createBindingElement(undefined, undefined, factory.createIdentifier(STORAGE_FILE_KEY), undefined),
523+
]),
524+
undefined,
525+
undefined,
526+
undefined,
527+
),
528+
],
529+
undefined,
530+
factory.createToken(SyntaxKind.EqualsGreaterThanToken),
531+
factory.createBlock(
532+
[
533+
factory.createExpressionStatement(
534+
factory.createCallExpression(getSetNameIdentifier(renderedFieldName), undefined, [
535+
factory.createArrowFunction(
536+
undefined,
537+
undefined,
538+
[
539+
factory.createParameterDeclaration(
540+
undefined,
541+
undefined,
542+
undefined,
543+
factory.createIdentifier('prev'),
544+
undefined,
545+
undefined,
546+
undefined,
547+
),
548+
],
549+
undefined,
550+
factory.createToken(SyntaxKind.EqualsGreaterThanToken),
551+
factory.createBlock(
552+
[
553+
factory.createVariableStatement(
554+
undefined,
555+
factory.createVariableDeclarationList(
556+
[
557+
factory.createVariableDeclaration(
558+
factory.createIdentifier('value'),
559+
undefined,
560+
undefined,
561+
storageManagerOnChangeHandlerMap[handlerName].value[isArray ? 'array' : 'scalar'](
562+
renderedFieldName,
563+
),
564+
),
565+
],
566+
NodeFlags.Let,
567+
),
568+
),
569+
buildOverrideOnChangeStatement(fieldName, fieldConfigs),
570+
factory.createReturnStatement(factory.createIdentifier('value')),
571+
],
572+
true,
573+
),
574+
),
575+
]),
576+
),
577+
],
578+
true,
579+
),
580+
),
581+
),
582+
);
583+
};

‎packages/codegen-ui-react/lib/react-required-dependency-provider.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export class ReactRequiredDependencyProvider extends RequiredDependencyProvider<
3434
},
3535
{
3636
dependencyName: '@aws-amplify/ui-react-storage',
37-
supportedSemVerPattern: '^1.0.2',
37+
supportedSemVerPattern: '^1.0.1',
3838
reason: 'Required to leverage StorageManager.',
3939
},
4040
];

‎packages/codegen-ui-react/lib/utils/forms/storage-field-component.ts

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import {
2424
} from '@aws-amplify/codegen-ui';
2525
import { factory, JsxAttribute, JsxAttributeLike, JsxElement, JsxExpression, SyntaxKind } from 'typescript';
2626
import { getDecoratedLabel } from '../../forms/form-renderer-helper';
27-
import { buildOnChangeStatement } from '../../forms/form-renderer-helper/event-handler-props';
27+
import { buildStorageManagerOnChangeStatement } from '../../forms/form-renderer-helper/event-handler-props';
2828
import { propertyToExpression } from '../../react-component-render-helper';
2929
import { STORAGE_FILE_KEY } from '../constants';
3030

@@ -78,7 +78,7 @@ export const renderStorageFieldComponent = (
7878
undefined,
7979
factory.createCallExpression(
8080
factory.createPropertyAccessExpression(
81-
factory.createIdentifier('imgKeys'),
81+
factory.createIdentifier(componentName),
8282
factory.createIdentifier('map'),
8383
),
8484
undefined,
@@ -118,19 +118,25 @@ export const renderStorageFieldComponent = (
118118
)
119119
: factory.createJsxExpression(
120120
undefined,
121-
factory.createArrayLiteralExpression(
122-
[
123-
factory.createObjectLiteralExpression(
124-
[
125-
factory.createPropertyAssignment(
126-
factory.createIdentifier(STORAGE_FILE_KEY),
127-
factory.createIdentifier('singleImgKey'),
128-
),
129-
],
130-
false,
131-
),
132-
],
133-
false,
121+
factory.createConditionalExpression(
122+
factory.createIdentifier(componentName),
123+
factory.createToken(SyntaxKind.QuestionToken),
124+
factory.createArrayLiteralExpression(
125+
[
126+
factory.createObjectLiteralExpression(
127+
[
128+
factory.createPropertyAssignment(
129+
factory.createIdentifier('key'),
130+
factory.createIdentifier(componentName),
131+
),
132+
],
133+
false,
134+
),
135+
],
136+
false,
137+
),
138+
factory.createToken(SyntaxKind.ColonToken),
139+
factory.createIdentifier('undefined'),
134140
),
135141
);
136142

@@ -139,7 +145,8 @@ export const renderStorageFieldComponent = (
139145
);
140146
}
141147

142-
storageManagerAttributes.push(buildOnChangeStatement(component, fieldConfigs));
148+
storageManagerAttributes.push(buildStorageManagerOnChangeStatement(component, fieldConfigs, 'onUploadSuccess'));
149+
storageManagerAttributes.push(buildStorageManagerOnChangeStatement(component, fieldConfigs, 'onFileRemove'));
143150
fieldAttributes.push(
144151
factory.createJsxAttribute(
145152
factory.createIdentifier('errorMessage'),

0 commit comments

Comments
 (0)