Skip to content

Commit

Permalink
fix: remove defaultValue if value is added to component
Browse files Browse the repository at this point in the history
  • Loading branch information
@dpilch @alharris-at
dpilch authored and alharris-at committed Feb 25, 2022
1 parent 510880f commit 7e26b20
Show file tree
Hide file tree
Showing 4 changed files with 114 additions and 87 deletions.
70 changes: 33 additions & 37 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 @@ -9,8 +9,8 @@ import {
getOverrideProps,
useDataStoreCreateAction,
} from \\"@aws-amplify/ui-react/internal\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";
import { Customer } from \\"../models\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";

export type CreateCustomerButtonProps = React.PropsWithChildren<
Partial<ButtonProps> & {
Expand Down Expand Up @@ -52,8 +52,8 @@ import {
getOverrideProps,
useDataStoreDeleteAction,
} from \\"@aws-amplify/ui-react/internal\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";
import { Customer } from \\"../models\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";

export type DeleteCustomerButtonProps = React.PropsWithChildren<
Partial<ButtonProps> & {
Expand Down Expand Up @@ -95,8 +95,8 @@ import {
getOverrideProps,
useDataStoreUpdateAction,
} from \\"@aws-amplify/ui-react/internal\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";
import { Customer } from \\"../models\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";

export type UpdateCustomerButtonProps = React.PropsWithChildren<
Partial<ButtonProps> & {
Expand Down Expand Up @@ -339,14 +339,14 @@ 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 { User } from \\"../models\\";
import { Button, Flex, FlexProps, Text } from \\"@aws-amplify/ui-react\\";

export type ConditionalInMutationProps = React.PropsWithChildren<
Expand Down Expand Up @@ -502,8 +502,8 @@ import {
useAuth,
useDataStoreCreateAction,
} from \\"@aws-amplify/ui-react/internal\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";
import { Customer } from \\"../models\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";

export type ComponentWithAuthEventBindingProps = React.PropsWithChildren<
Partial<ButtonProps> & {
Expand Down Expand Up @@ -540,19 +540,19 @@ export default function ComponentWithAuthEventBinding(
exports[`amplify render tests collection should render collection with data binding 1`] = `
"/* eslint-disable */
import React from \\"react\\";
import {
EscapeHatchProps,
createDataStorePredicate,
getOverrideProps,
useDataStoreBinding,
} from \\"@aws-amplify/ui-react/internal\\";
import { User, UserPreferences } from \\"../models\\";
import {
Button,
Collection,
CollectionProps,
Flex,
} from \\"@aws-amplify/ui-react\\";
import {
EscapeHatchProps,
createDataStorePredicate,
getOverrideProps,
useDataStoreBinding,
} from \\"@aws-amplify/ui-react/internal\\";

export type CollectionOfCustomButtonsProps = React.PropsWithChildren<
Partial<CollectionProps<any>> & {
Expand Down Expand Up @@ -641,20 +641,20 @@ exports[`amplify render tests collection should render collection with data bind
Object {
"componentText": "/* eslint-disable */
import React from \\"react\\";
import { User, UserPreferences } from \\"../models\\";
import {
Button,
Collection,
CollectionProps,
Flex,
} from \\"@aws-amplify/ui-react\\";
import {
EscapeHatchProps,
createDataStorePredicate,
getOverrideProps,
useDataStoreBinding,
} from \\"@aws-amplify/ui-react/internal\\";
import { SortDirection, SortPredicate } from \\"@aws-amplify/datastore\\";
import { User, UserPreferences } from \\"../models\\";
import {
Button,
Collection,
CollectionProps,
Flex,
} from \\"@aws-amplify/ui-react\\";

export type CollectionOfCustomButtonsProps = React.PropsWithChildren<
Partial<CollectionProps<any>> & {
Expand Down Expand Up @@ -750,19 +750,19 @@ export default function CollectionOfCustomButtons(
exports[`amplify render tests collection should render collection with data binding if binding name is items 1`] = `
"/* eslint-disable */
import React from \\"react\\";
import {
EscapeHatchProps,
createDataStorePredicate,
getOverrideProps,
useDataStoreBinding,
} from \\"@aws-amplify/ui-react/internal\\";
import { User, UserPreferences } from \\"../models\\";
import {
Button,
Collection,
CollectionProps,
Flex,
} from \\"@aws-amplify/ui-react\\";
import {
EscapeHatchProps,
createDataStorePredicate,
getOverrideProps,
useDataStoreBinding,
} from \\"@aws-amplify/ui-react/internal\\";

export type CollectionOfCustomButtonsProps = React.PropsWithChildren<
Partial<CollectionProps<any>> & {
Expand Down Expand Up @@ -850,14 +850,14 @@ export default function CollectionOfCustomButtons(
exports[`amplify render tests collection should render collection with data binding with no predicate 1`] = `
"/* eslint-disable */
import React from \\"react\\";
import ListingCard from \\"./ListingCard\\";
import { UntitledModel } from \\"../models\\";
import {
EscapeHatchProps,
getOverrideProps,
useDataStoreBinding,
} from \\"@aws-amplify/ui-react/internal\\";
import ListingCard from \\"./ListingCard\\";
import { Collection, CollectionProps } from \\"@aws-amplify/ui-react\\";
import { UntitledModel } from \\"../models\\";

export type ListingCardCollectionProps = React.PropsWithChildren<
Partial<CollectionProps<any>> & {
Expand Down Expand Up @@ -4845,13 +4845,13 @@ exports[`amplify render tests default value should render collection default val
Object {
"componentText": "/* eslint-disable */
import React from \\"react\\";
import { Collection, CollectionProps, Text } from \\"@aws-amplify/ui-react\\";
import { User } from \\"../models\\";
import {
EscapeHatchProps,
getOverrideProps,
useDataStoreBinding,
} from \\"@aws-amplify/ui-react/internal\\";
import { User } from \\"../models\\";
import { Collection, CollectionProps, Text } from \\"@aws-amplify/ui-react\\";

export type CollectionDefaultValueProps = React.PropsWithChildren<
Partial<CollectionProps<any>> & {
Expand Down Expand Up @@ -4881,8 +4881,8 @@ export default function CollectionDefaultValue(
>
{(item, index) => (
<Text
key={item.id}
children={item.username || \\"Collection Default Value\\"}
key={item.id}
{...(overrideItems && overrideItems({ item, index }))}
></Text>
)}
Expand Down Expand Up @@ -5330,8 +5330,8 @@ import {
useDataStoreUpdateAction,
useStateMutationAction,
} from \\"@aws-amplify/ui-react/internal\\";
import { Button, Flex, FlexProps, TextField } from \\"@aws-amplify/ui-react\\";
import { Customer } from \\"../models\\";
import { Button, Flex, FlexProps, TextField } from \\"@aws-amplify/ui-react\\";

export type MyFormProps = React.PropsWithChildren<
Partial<FlexProps> & {
Expand Down Expand Up @@ -5540,7 +5540,7 @@ export default function StepperControlledElement(
props: StepperControlledElementProps
): React.ReactElement {
const { overrides, ...rest } = props;
const [inputValue, setInputValue] = useStateMutationAction(undefined);
const [inputValue, setInputValue] = useStateMutationAction(0);
return (
/* @ts-ignore: TS2322 */
<Flex
Expand All @@ -5549,7 +5549,6 @@ export default function StepperControlledElement(
>
<StepperField
label=\\"Stepper\\"
defaultValue={0}
min={0}
max={10}
step={1}
Expand Down Expand Up @@ -5991,9 +5990,9 @@ export default function TwoWayBindings(
const [selectFieldInputValue, setSelectFieldInputValue] =
useStateMutationAction(undefined);
const [sliderFieldInputValue, setSliderFieldInputValue] =
useStateMutationAction(undefined);
useStateMutationAction(50);
const [stepperFieldInputValue, setStepperFieldInputValue] =
useStateMutationAction(undefined);
useStateMutationAction(0);
const [switchFieldInputIsChecked, setSwitchFieldInputIsChecked] =
useStateMutationAction(false);
const [textFieldInputValue, setTextFieldInputValue] =
Expand Down Expand Up @@ -6143,7 +6142,6 @@ export default function TwoWayBindings(
<RadioGroupField
label=\\"Language\\"
name=\\"language\\"
defaultValue=\\"html\\"
value={radioGroupFieldInputValue}
onChange={(event: SyntheticEvent) => {
setRadioGroupFieldInputValue(event.target.value);
Expand Down Expand Up @@ -6265,7 +6263,6 @@ export default function TwoWayBindings(
></Heading>
<SliderField
label=\\"Slider\\"
defaultValue={50}
min={0}
max={100}
step={1}
Expand Down Expand Up @@ -6297,7 +6294,6 @@ export default function TwoWayBindings(
></Heading>
<StepperField
label=\\"Stepper\\"
defaultValue={0}
min={0}
max={10}
step={1}
Expand Down
24 changes: 0 additions & 24 deletions packages/codegen-ui-react/lib/react-component-with-children-renderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ import {
buildOpeningElementEvents,
filterStateReferencesForComponent,
} from './workflow';
import Primitive, { PrimitiveChildrenPropMapping } from './primitive';

export class ReactComponentWithChildrenRenderer<TPropIn> extends ComponentWithChildrenRendererBase<
TPropIn,
Expand All @@ -47,7 +46,6 @@ export class ReactComponentWithChildrenRenderer<TPropIn> extends ComponentWithCh
protected parent?: StudioNode,
) {
super(component, parent);
this.mapSyntheticProps();
addBindingPropertiesImports(component, importCollection);
}

Expand Down Expand Up @@ -194,26 +192,4 @@ export class ReactComponentWithChildrenRenderer<TPropIn> extends ComponentWithCh

attributes.push(attr);
}

/* Some additional props are added to Amplify primitives in Studio. These "sythetic" props are mapped to real props
* on the primitives.
*
* Example: Text prop label is mapped to to Text prop Children
*
* This is done so that nonadvanced users of Studio do not need to interact with props that might confuse them.
*/
private mapSyntheticProps() {
// properties.children will take precedent over mapped children prop
if (this.component.properties.children === undefined) {
const childrenPropMapping = PrimitiveChildrenPropMapping[Primitive[this.component.componentType as Primitive]];

if (childrenPropMapping !== undefined) {
const mappedChildrenProp = this.component.properties[childrenPropMapping];
if (mappedChildrenProp !== undefined) {
this.component.properties.children = mappedChildrenProp;
delete this.component.properties[childrenPropMapping];
}
}
}
}
}

0 comments on commit 7e26b20

Please sign in to comment.