-
Notifications
You must be signed in to change notification settings - Fork 435
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(form): fix issue where FormInput was not rendering field when pas…
…sed 'includeField' (#7350) * chore(test-studio): add example schema + custom FormInput example/playground * fix(form): fix issue where FormInput was not rendering field when passed 'includeField'
- Loading branch information
Showing
5 changed files
with
164 additions
and
28 deletions.
There are no files selected for viewing
82 changes: 82 additions & 0 deletions
82
dev/test-studio/components/formBuilder/FormInputExample.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,82 @@ | ||
import {CloseIcon, EyeOpenIcon} from '@sanity/icons' | ||
import {Box, Button, Card, Checkbox, Flex, Inline, Stack, Text} from '@sanity/ui' | ||
import {useState} from 'react' | ||
import { | ||
FormInput, | ||
type ObjectInputProps, | ||
type Path, | ||
pathToString, | ||
type RenderInputCallback, | ||
} from 'sanity' | ||
|
||
export function FormInputExample(props: ObjectInputProps) { | ||
const [path, setPath] = useState<Path>([]) | ||
|
||
const [includeField, setIncludeField] = useState(false) | ||
const [includeItem, setIncludeItem] = useState(false) | ||
|
||
const renderDefaultForm = path.length === 0 | ||
|
||
const renderInput: RenderInputCallback = (inputProps) => { | ||
// wraps each input with a button that allows rendering only the selected input | ||
const selected = inputProps.path === path | ||
return ( | ||
<Flex> | ||
<Box flex={1}>{props.renderInput(inputProps)}</Box> | ||
<Flex marginLeft={2}> | ||
<Button | ||
mode="ghost" | ||
tone="primary" | ||
fontSize={1} | ||
onClick={() => setPath(selected ? [] : inputProps.path)} | ||
icon={selected ? CloseIcon : EyeOpenIcon} | ||
/> | ||
</Flex> | ||
</Flex> | ||
) | ||
} | ||
|
||
if (renderDefaultForm) { | ||
return ( | ||
<Stack space={2}> | ||
<Card shadow={2} margin={3} padding={4} radius={2}> | ||
{props.renderDefault({...props, renderInput})} | ||
</Card> | ||
</Stack> | ||
) | ||
} | ||
return ( | ||
<Stack space={2}> | ||
<Card padding={3} radius={2}> | ||
<Stack space={4}> | ||
<Stack space={4}> | ||
<Flex gap={2}> | ||
<Text weight="semibold"> | ||
Input at <code>{pathToString(path)}</code> | ||
</Text> | ||
</Flex> | ||
<Flex gap={4}> | ||
<Inline space={2}> | ||
<Checkbox checked={includeField} onChange={() => setIncludeField((v) => !v)} />{' '} | ||
<Text>Include field</Text> | ||
</Inline> | ||
<Inline space={2}> | ||
<Checkbox checked={includeItem} onChange={() => setIncludeItem((v) => !v)} />{' '} | ||
<Text>Include item</Text> | ||
</Inline> | ||
</Flex> | ||
</Stack> | ||
<Card shadow={2} padding={3} radius={2}> | ||
<FormInput | ||
{...props} | ||
renderInput={renderInput} | ||
absolutePath={path} | ||
includeField={includeField} | ||
includeItem={includeItem} | ||
/> | ||
</Card> | ||
</Stack> | ||
</Card> | ||
</Stack> | ||
) | ||
} |
46 changes: 46 additions & 0 deletions
46
dev/test-studio/schema/docs/v3/form-components-api/formInputTest.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
import {defineType} from '@sanity/types' | ||
|
||
import {FormInputExample} from '../../../../components/formBuilder/FormInputExample' | ||
import {structureGroupOptions} from '../../../../structure/groupByOption' | ||
|
||
export const formInputTest = defineType({ | ||
name: 'formInputTest', | ||
title: 'FormInput Test', | ||
type: 'document', | ||
options: structureGroupOptions({ | ||
structureGroup: 'v3', | ||
}), | ||
components: { | ||
input: FormInputExample, | ||
}, | ||
fields: [ | ||
{ | ||
name: 'title', | ||
title: 'Title', | ||
type: 'string', | ||
}, | ||
{ | ||
name: 'array', | ||
type: 'array', | ||
of: [ | ||
{ | ||
type: 'object', | ||
fields: [ | ||
{name: 'title', type: 'string'}, | ||
{name: 'text', type: 'string'}, | ||
], | ||
}, | ||
], | ||
}, | ||
{ | ||
name: 'description', | ||
title: 'Description', | ||
type: 'text', | ||
}, | ||
{ | ||
name: 'nested', | ||
type: 'object', | ||
fields: [{name: 'nested', type: 'string'}], | ||
}, | ||
], | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,2 @@ | ||
export * from './formInputTest' | ||
export * from './schema' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,7 @@ | ||
import {validationTest} from './async-functions/schemaType' | ||
import {example1SchemaType} from './example1' | ||
import {formComponentsSchema} from './form-components-api' | ||
import {formComponentsSchema, formInputTest} from './form-components-api' | ||
|
||
export const v3docs = { | ||
types: [example1SchemaType, validationTest, formComponentsSchema], | ||
types: [example1SchemaType, validationTest, formComponentsSchema, formInputTest], | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters