Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix radio button null element default prop to use correct input #10510

Merged
merged 4 commits into from
May 8, 2024
Merged

Fix radio button null element default prop to use correct input #10510

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
088818e
Fix radio button null element default prop to use correct input
jason-curtis Apr 24, 2024
ecc8730
add changesets entry
Josh-Walker-GM May 8, 2024
5974b52
add test for enums in forms
Josh-Walker-GM May 8, 2024
8fab210
Merge branch 'main' into radio-button-null-fix
Josh-Walker-GM May 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 3 additions & 0 deletions .changesets/10510.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
- Fix radio button null element default prop to use correct input (#10510) by @jason-curtis

This change fixes an issue with the `defaultChecked` field when using the scaffold generator with an enum. You should now see correct code generated to determine if the default is checked or unchecked.
313 changes: 313 additions & 0 deletions packages/cli/src/commands/generate/scaffold/__tests__/__snapshots__/scaffold.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1722,6 +1722,160 @@ export default PostsList
"
`;

exports[`in javascript (default) mode > generated form matches expectations 1`] = `
"import {
Form,
FormError,
FieldError,
Label,
RadioField,
Submit,
} from '@redwoodjs/forms'

const PixelForm = (props) => {
const onSubmit = (data) => {
if (data.geometry === '') {
data.geometry = null
}

props.onSave(data, props?.pixel?.id)
}

return (
<div className="rw-form-wrapper">
<Form onSubmit={onSubmit} error={props.error}>
<FormError
error={props.error}
wrapperClassName="rw-form-error-wrapper"
titleClassName="rw-form-error-title"
listClassName="rw-form-error-list"
/>

<Label
name="color"
className="rw-label"
errorClassName="rw-label rw-label-error"
>
Color
</Label>

<div className="rw-check-radio-items">
<RadioField
id="pixel-color-0"
name="color"
defaultValue="RED"
defaultChecked={props.pixel?.color?.includes('RED')}
className="rw-input"
errorClassName="rw-input rw-input-error"
/>

<div>Red</div>
</div>

<div className="rw-check-radio-items">
<RadioField
id="pixel-color-1"
name="color"
defaultValue="GREEN"
defaultChecked={props.pixel?.color?.includes('GREEN')}
className="rw-input"
errorClassName="rw-input rw-input-error"
/>

<div>Green</div>
</div>

<div className="rw-check-radio-items">
<RadioField
id="pixel-color-2"
name="color"
defaultValue="BLUE"
defaultChecked={props.pixel?.color?.includes('BLUE')}
className="rw-input"
errorClassName="rw-input rw-input-error"
/>

<div>Blue</div>
</div>

<FieldError name="color" className="rw-field-error" />

<Label
name="geometry"
className="rw-label"
errorClassName="rw-label rw-label-error"
>
Geometry
</Label>

<div className="rw-check-radio-items">
<RadioField
id="pixel-geometry-none"
name="geometry"
defaultValue=""
defaultChecked={!props.pixel?.geometry}
className="rw-input"
errorClassName="rw-input rw-input-error"
/>

<div className="rw-check-radio-item-none">None</div>
</div>

<div className="rw-check-radio-items">
<RadioField
id="pixel-geometry-0"
name="geometry"
defaultValue="TRIANGULAR"
defaultChecked={props.pixel?.geometry?.includes('TRIANGULAR')}
className="rw-input"
errorClassName="rw-input rw-input-error"
/>

<div>Triangular</div>
</div>

<div className="rw-check-radio-items">
<RadioField
id="pixel-geometry-1"
name="geometry"
defaultValue="STRIPES"
defaultChecked={props.pixel?.geometry?.includes('STRIPES')}
className="rw-input"
errorClassName="rw-input rw-input-error"
/>

<div>Stripes</div>
</div>

<div className="rw-check-radio-items">
<RadioField
id="pixel-geometry-2"
name="geometry"
defaultValue="DIAGONAL"
defaultChecked={props.pixel?.geometry?.includes('DIAGONAL')}
className="rw-input"
errorClassName="rw-input rw-input-error"
/>

<div>Diagonal</div>
</div>

<FieldError name="geometry" className="rw-field-error" />

<div className="rw-button-group">
<Submit disabled={props.loading} className="rw-button rw-button-blue">
Save
</Submit>
</div>
</Form>
</div>
)
}

export default PixelForm
"
`;

exports[`in typescript mode > creates a edit page 1`] = `
"import EditPostCell from 'src/components/Post/EditPostCell'

Expand Down Expand Up @@ -3421,6 +3575,165 @@ export default PostsList
"
`;

exports[`in typescript mode > generated form matches expectations 1`] = `
"import type { EditPixelById, UpdatePixelInput } from 'types/graphql'

import type { RWGqlError } from '@redwoodjs/forms'
import {
Form,
FormError,
FieldError,
Label,
RadioField,
Submit,
} from '@redwoodjs/forms'

type FormPixel = NonNullable<EditPixelById['pixel']>

interface PixelFormProps {
pixel?: EditPixelById['pixel']
onSave: (data: UpdatePixelInput, id?: FormPixel['id']) => void
error: RWGqlError
loading: boolean
}

const PixelForm = (props: PixelFormProps) => {
const onSubmit = (data: FormPixel) => {
if (data.geometry === '') {
data.geometry = null
}

props.onSave(data, props?.pixel?.id)
}

return (
<div className="rw-form-wrapper">
<Form<FormPixel> onSubmit={onSubmit} error={props.error}>
<FormError
error={props.error}
wrapperClassName="rw-form-error-wrapper"
titleClassName="rw-form-error-title"
listClassName="rw-form-error-list"
/>

<Label
name="color"
className="rw-label"
errorClassName="rw-label rw-label-error"
>
Color
</Label>

<div className="rw-check-radio-items">
<RadioField
id="pixel-color-0"
name="color"
defaultValue="RED"
defaultChecked={props.pixel?.color?.includes('RED')}
className="rw-input"
errorClassName="rw-input rw-input-error"
/>
<div>Red</div>
</div>

<div className="rw-check-radio-items">
<RadioField
id="pixel-color-1"
name="color"
defaultValue="GREEN"
defaultChecked={props.pixel?.color?.includes('GREEN')}
className="rw-input"
errorClassName="rw-input rw-input-error"
/>
<div>Green</div>
</div>

<div className="rw-check-radio-items">
<RadioField
id="pixel-color-2"
name="color"
defaultValue="BLUE"
defaultChecked={props.pixel?.color?.includes('BLUE')}
className="rw-input"
errorClassName="rw-input rw-input-error"
/>
<div>Blue</div>
</div>

<FieldError name="color" className="rw-field-error" />

<Label
name="geometry"
className="rw-label"
errorClassName="rw-label rw-label-error"
>
Geometry
</Label>

<div className="rw-check-radio-items">
<RadioField
id="pixel-geometry-none"
name="geometry"
defaultValue=""
defaultChecked={!props.pixel?.geometry}
className="rw-input"
errorClassName="rw-input rw-input-error"
/>
<div className="rw-check-radio-item-none">None</div>
</div>

<div className="rw-check-radio-items">
<RadioField
id="pixel-geometry-0"
name="geometry"
defaultValue="TRIANGULAR"
defaultChecked={props.pixel?.geometry?.includes('TRIANGULAR')}
className="rw-input"
errorClassName="rw-input rw-input-error"
/>
<div>Triangular</div>
</div>

<div className="rw-check-radio-items">
<RadioField
id="pixel-geometry-1"
name="geometry"
defaultValue="STRIPES"
defaultChecked={props.pixel?.geometry?.includes('STRIPES')}
className="rw-input"
errorClassName="rw-input rw-input-error"
/>
<div>Stripes</div>
</div>

<div className="rw-check-radio-items">
<RadioField
id="pixel-geometry-2"
name="geometry"
defaultValue="DIAGONAL"
defaultChecked={props.pixel?.geometry?.includes('DIAGONAL')}
className="rw-input"
errorClassName="rw-input rw-input-error"
/>
<div>Diagonal</div>
</div>

<FieldError name="geometry" className="rw-field-error" />

<div className="rw-button-group">
<Submit disabled={props.loading} className="rw-button rw-button-blue">
Save
</Submit>
</div>
</Form>
</div>
)
}

export default PixelForm
"
`;

exports[`tailwind flag > set to \`false\` generates a scaffold.css with raw CSS 1`] = `
"/*
normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
Expand Down
18 changes: 18 additions & 0 deletions packages/cli/src/commands/generate/scaffold/__tests__/fixtures/schema.prisma
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,3 +77,21 @@ model CustomIdField {
uuid String @id @default(uuid())
name String
}

model Pixel {
id Int @id @default(autoincrement())
color PixelColor
geometry PixelGeometry?
}

enum PixelColor {
RED
GREEN
BLUE
}

enum PixelGeometry {
TRIANGULAR
STRIPES
DIAGONAL
}