Skip to content

Commit

Permalink
feat: add custom ArrayField component to form renderer (#624)
Browse files Browse the repository at this point in the history 
* feat: add custom ArrayField component to form renderer

* feat: add support for nested json (#623)

* fix: merge conflicts for Array field component render

Co-authored-by: Justin Shih <jushih@amazon.com>
  • Loading branch information
@Jshhhh
Jshhhh and Justin Shih authored Sep 7, 2022
1 parent 36dad49 commit 66de235
Show file tree
Hide file tree
Showing 19 changed files with 1,459 additions and 266 deletions.
5 changes: 2 additions & 3 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

150 changes: 121 additions & 29 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 @@ -53,9 +53,20 @@ export default function CustomDataForm(props) {
category,
};
const validationResponses = await Promise.all(
Object.keys(validations).map((fieldName) =>
runValidationTasks(fieldName, modelFields[fieldName])
)
Object.keys(validations).reduce((promises, fieldName) => {
if (Array.isArray(modelFields[fieldName])) {
promises.push(
...modelFields[fieldName].map((item) =>
runValidationTasks(fieldName, item)
)
);
return promises;
}
promises.push(
runValidationTasks(fieldName, modelFields[fieldName])
);
return promises;
}, [])
);
if (validationResponses.some((r) => r.hasError)) {
return;
Expand Down Expand Up @@ -206,7 +217,7 @@ export default function CustomDataForm(props) {
children=\\"create\\"
type=\\"submit\\"
variation=\\"primary\\"
isDisabled={Object.values(errors).some((e) => e.hasError)}
isDisabled={Object.values(errors).some((e) => e?.hasError)}
{...getOverrideProps(overrides, \\"SubmitButton\\")}
></Button>
</Flex>
Expand Down Expand Up @@ -297,9 +308,20 @@ export default function NestedJson(props) {
bio,
};
const validationResponses = await Promise.all(
Object.keys(validations).map((fieldName) =>
runValidationTasks(fieldName, modelFields[fieldName])
)
Object.keys(validations).reduce((promises, fieldName) => {
if (Array.isArray(modelFields[fieldName])) {
promises.push(
...modelFields[fieldName].map((item) =>
runValidationTasks(fieldName, item)
)
);
return promises;
}
promises.push(
runValidationTasks(fieldName, modelFields[fieldName])
);
return promises;
}, [])
);
if (validationResponses.some((r) => r.hasError)) {
return;
Expand Down Expand Up @@ -423,7 +445,7 @@ export default function NestedJson(props) {
children=\\"Submit\\"
type=\\"submit\\"
variation=\\"primary\\"
isDisabled={Object.values(errors).some((e) => e.hasError)}
isDisabled={Object.values(errors).some((e) => e?.hasError)}
{...getOverrideProps(overrides, \\"SubmitButton\\")}
></Button>
</Flex>
Expand Down Expand Up @@ -519,9 +541,20 @@ export default function CustomWithSectionalElements(props) {
name,
};
const validationResponses = await Promise.all(
Object.keys(validations).map((fieldName) =>
runValidationTasks(fieldName, modelFields[fieldName])
)
Object.keys(validations).reduce((promises, fieldName) => {
if (Array.isArray(modelFields[fieldName])) {
promises.push(
...modelFields[fieldName].map((item) =>
runValidationTasks(fieldName, item)
)
);
return promises;
}
promises.push(
runValidationTasks(fieldName, modelFields[fieldName])
);
return promises;
}, [])
);
if (validationResponses.some((r) => r.hasError)) {
return;
Expand Down Expand Up @@ -613,7 +646,7 @@ export default function CustomWithSectionalElements(props) {
children=\\"Submit\\"
type=\\"submit\\"
variation=\\"primary\\"
isDisabled={Object.values(errors).some((e) => e.hasError)}
isDisabled={Object.values(errors).some((e) => e?.hasError)}
{...getOverrideProps(overrides, \\"SubmitButton\\")}
></Button>
</Flex>
Expand Down Expand Up @@ -706,9 +739,20 @@ export default function MyPostForm(props) {
profile_url,
};
const validationResponses = await Promise.all(
Object.keys(validations).map((fieldName) =>
runValidationTasks(fieldName, modelFields[fieldName])
)
Object.keys(validations).reduce((promises, fieldName) => {
if (Array.isArray(modelFields[fieldName])) {
promises.push(
...modelFields[fieldName].map((item) =>
runValidationTasks(fieldName, item)
)
);
return promises;
}
promises.push(
runValidationTasks(fieldName, modelFields[fieldName])
);
return promises;
}, [])
);
if (validationResponses.some((r) => r.hasError)) {
return;
Expand Down Expand Up @@ -756,7 +800,7 @@ export default function MyPostForm(props) {
children=\\"Submit\\"
type=\\"submit\\"
variation=\\"primary\\"
isDisabled={Object.values(errors).some((e) => e.hasError)}
isDisabled={Object.values(errors).some((e) => e?.hasError)}
{...getOverrideProps(overrides, \\"SubmitButton\\")}
></Button>
</Flex>
Expand Down Expand Up @@ -963,9 +1007,20 @@ export default function MyPostForm(props) {
post_url,
};
const validationResponses = await Promise.all(
Object.keys(validations).map((fieldName) =>
runValidationTasks(fieldName, modelFields[fieldName])
)
Object.keys(validations).reduce((promises, fieldName) => {
if (Array.isArray(modelFields[fieldName])) {
promises.push(
...modelFields[fieldName].map((item) =>
runValidationTasks(fieldName, item)
)
);
return promises;
}
promises.push(
runValidationTasks(fieldName, modelFields[fieldName])
);
return promises;
}, [])
);
if (validationResponses.some((r) => r.hasError)) {
return;
Expand Down Expand Up @@ -1017,7 +1072,7 @@ export default function MyPostForm(props) {
children=\\"Submit\\"
type=\\"submit\\"
variation=\\"primary\\"
isDisabled={Object.values(errors).some((e) => e.hasError)}
isDisabled={Object.values(errors).some((e) => e?.hasError)}
{...getOverrideProps(overrides, \\"SubmitButton\\")}
></Button>
</Flex>
Expand Down Expand Up @@ -1150,7 +1205,7 @@ export default function MyPostForm(props) {
children=\\"Submit\\"
type=\\"submit\\"
variation=\\"primary\\"
isDisabled={Object.values(errors).some((e) => e.hasError)}
isDisabled={Object.values(errors).some((e) => e?.hasError)}
{...getOverrideProps(overrides, \\"SubmitButton\\")}
></Button>
</Flex>
Expand Down Expand Up @@ -1239,6 +1294,7 @@ export default function InputGalleryCreateForm(props) {
const [attend, setAttend] = React.useState(undefined);
const [maybeSlide, setMaybeSlide] = React.useState(undefined);
const [maybeCheck, setMaybeCheck] = React.useState(undefined);
const [arrayTypeField, setArrayTypeField] = React.useState(undefined);
const [timestamp, setTimestamp] = React.useState(undefined);
const [ippy, setIppy] = React.useState(undefined);
const [timeisnow, setTimeisnow] = React.useState(undefined);
Expand All @@ -1249,6 +1305,7 @@ export default function InputGalleryCreateForm(props) {
attend: [{ type: \\"Required\\" }],
maybeSlide: [],
maybeCheck: [],
arrayTypeField: [],
timestamp: [],
ippy: [{ type: \\"IpAddress\\" }],
timeisnow: [],
Expand All @@ -1272,14 +1329,26 @@ export default function InputGalleryCreateForm(props) {
attend,
maybeSlide,
maybeCheck,
arrayTypeField,
timestamp,
ippy,
timeisnow,
};
const validationResponses = await Promise.all(
Object.keys(validations).map((fieldName) =>
runValidationTasks(fieldName, modelFields[fieldName])
)
Object.keys(validations).reduce((promises, fieldName) => {
if (Array.isArray(modelFields[fieldName])) {
promises.push(
...modelFields[fieldName].map((item) =>
runValidationTasks(fieldName, item)
)
);
return promises;
}
promises.push(
runValidationTasks(fieldName, modelFields[fieldName])
);
return promises;
}, [])
);
if (validationResponses.some((r) => r.hasError)) {
return;
Expand Down Expand Up @@ -1431,6 +1500,26 @@ export default function InputGalleryCreateForm(props) {
rowGap=\\"inherit\\"
templateColumns=\\"repeat(1, auto)\\"
{...getOverrideProps(overrides, \\"RowGrid5\\")}
>
<TextField
label=\\"Array type field\\"
isRequired={false}
isReadOnly={false}
onChange={async (e) => {
const { value } = e.target;
await runValidationTasks(\\"arrayTypeField\\", value);
setArrayTypeField(value);
}}
errorMessage={errors.arrayTypeField?.errorMessage}
hasError={errors.arrayTypeField?.hasError}
{...getOverrideProps(overrides, \\"arrayTypeField\\")}
></TextField>
</Grid>
<Grid
columnGap=\\"inherit\\"
rowGap=\\"inherit\\"
templateColumns=\\"repeat(1, auto)\\"
{...getOverrideProps(overrides, \\"RowGrid6\\")}
>
<TextField
label=\\"Timestamp\\"
Expand All @@ -1451,7 +1540,7 @@ export default function InputGalleryCreateForm(props) {
columnGap=\\"inherit\\"
rowGap=\\"inherit\\"
templateColumns=\\"repeat(1, auto)\\"
{...getOverrideProps(overrides, \\"RowGrid6\\")}
{...getOverrideProps(overrides, \\"RowGrid7\\")}
>
<TextField
label=\\"Ippy\\"
Expand All @@ -1471,7 +1560,7 @@ export default function InputGalleryCreateForm(props) {
columnGap=\\"inherit\\"
rowGap=\\"inherit\\"
templateColumns=\\"repeat(1, auto)\\"
{...getOverrideProps(overrides, \\"RowGrid7\\")}
{...getOverrideProps(overrides, \\"RowGrid8\\")}
>
<TextField
label=\\"Timeisnow\\"
Expand Down Expand Up @@ -1512,7 +1601,7 @@ export default function InputGalleryCreateForm(props) {
children=\\"Submit\\"
type=\\"submit\\"
variation=\\"primary\\"
isDisabled={Object.values(errors).some((e) => e.hasError)}
isDisabled={Object.values(errors).some((e) => e?.hasError)}
{...getOverrideProps(overrides, \\"SubmitButton\\")}
></Button>
</Flex>
Expand All @@ -1538,6 +1627,7 @@ export declare type InputGalleryCreateFormInputValues = {
attend?: ValidationFunction<boolean>;
maybeSlide?: ValidationFunction<boolean>;
maybeCheck?: ValidationFunction<boolean>;
arrayTypeField?: ValidationFunction<string>;
timestamp?: ValidationFunction<number>;
ippy?: ValidationFunction<string>;
timeisnow?: ValidationFunction<string>;
Expand All @@ -1555,10 +1645,12 @@ export declare type InputGalleryCreateFormOverridesProps = {
RowGrid4?: GridProps;
maybeCheck?: CheckboxFieldProps;
RowGrid5?: GridProps;
timestamp?: TextFieldProps;
arrayTypeField?: TextFieldProps;
RowGrid6?: GridProps;
ippy?: TextFieldProps;
timestamp?: TextFieldProps;
RowGrid7?: GridProps;
ippy?: TextFieldProps;
RowGrid8?: GridProps;
timeisnow?: TextFieldProps;
} & EscapeHatchProps;
export declare type InputGalleryCreateFormProps = React.PropsWithChildren<{
Expand Down
Loading

0 comments on commit 66de235

Please sign in to comment.