-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'update/dataform_combined_fields_api' of github.com:Word…
…Press/gutenberg into add/template-form
- Loading branch information
Showing
10 changed files
with
331 additions
and
56 deletions.
There are no files selected for viewing
41 changes: 41 additions & 0 deletions
41
packages/dataviews/src/components/dataform-context/index.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,41 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { createContext, useCallback } from '@wordpress/element'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import type { NormalizedField } from '../../types'; | ||
|
|
||
| type DataFormContextType< Item > = { | ||
| getFieldDefinition: ( | ||
| field: string | ||
| ) => NormalizedField< Item > | undefined; | ||
| }; | ||
|
|
||
| const DataFormContext = createContext< DataFormContextType< any > >( { | ||
| getFieldDefinition: () => undefined, | ||
| } ); | ||
|
|
||
| export function DataFormProvider< Item >( { | ||
| fields, | ||
| children, | ||
| }: React.PropsWithChildren< { fields: NormalizedField< Item >[] } > ) { | ||
| const getFieldDefinition = useCallback( | ||
| ( field: string ) => { | ||
| return fields.find( | ||
| ( fieldDefinition ) => fieldDefinition.id === field | ||
| ); | ||
| }, | ||
| [ fields ] | ||
| ); | ||
|
|
||
| return ( | ||
| <DataFormContext.Provider value={ { getFieldDefinition } }> | ||
| { children } | ||
| </DataFormContext.Provider> | ||
| ); | ||
| } | ||
|
|
||
| export default DataFormContext; |
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,17 +1,37 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { useMemo } from '@wordpress/element'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import type { DataFormProps } from '../../types'; | ||
| import { getFormLayout } from '../../dataforms-layouts'; | ||
| import { DataFormProvider } from '../dataform-context'; | ||
| import { normalizeFields } from '../../normalize-fields'; | ||
| import { DataFormLayout } from '../../dataforms-layouts/data-form-layout'; | ||
|
|
||
| export default function DataForm< Item >( { | ||
| form, | ||
| ...props | ||
| }: DataFormProps< Item > ) { | ||
| const layout = getFormLayout( form.type ?? 'regular' ); | ||
| if ( ! layout ) { | ||
| const normalizedFields = useMemo( | ||
| () => normalizeFields( props.fields ), | ||
| [ props.fields ] | ||
| ); | ||
|
|
||
| if ( ! form.fields ) { | ||
| return null; | ||
| } | ||
|
|
||
| return <layout.component form={ form } { ...props } />; | ||
| return ( | ||
| <DataFormProvider fields={ normalizedFields }> | ||
| <DataFormLayout | ||
| defaultLayout={ form.type } | ||
| data={ props.data } | ||
| fields={ form.fields } | ||
| onChange={ props.onChange } | ||
| /> | ||
| </DataFormProvider> | ||
| ); | ||
| } |
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
61 changes: 61 additions & 0 deletions
61
packages/dataviews/src/dataforms-layouts/data-form-layout.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,61 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { __experimentalVStack as VStack } from '@wordpress/components'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import type { FormField } from '../types'; | ||
| import { getFormFieldLayout } from './index'; | ||
|
|
||
| export function DataFormLayout< Item >( { | ||
| defaultLayout, | ||
| data, | ||
| fields, | ||
| onChange, | ||
| children, | ||
| }: { | ||
| defaultLayout?: string; | ||
| data: Item; | ||
| fields: FormField[]; | ||
| onChange: ( value: any ) => void; | ||
| children?: ( | ||
| FieldLayout: ( props: { | ||
| data: Item; | ||
| field: FormField; | ||
| onChange: ( value: any ) => void; | ||
| hideLabelFromVision?: boolean; | ||
| } ) => React.JSX.Element | null, | ||
| field: FormField | ||
| ) => React.JSX.Element; | ||
| } ) { | ||
| return ( | ||
| <VStack spacing={ 2 }> | ||
| { fields.map( ( field ) => { | ||
| const fieldLayoutId = | ||
| typeof field === 'string' ? defaultLayout : field.layout; | ||
| const FieldLayout = getFormFieldLayout( | ||
| fieldLayoutId ?? 'regular' | ||
| )?.component; | ||
|
|
||
| if ( ! FieldLayout ) { | ||
| return null; | ||
| } | ||
|
|
||
| if ( children ) { | ||
| return children( FieldLayout, field ); | ||
| } | ||
|
|
||
| return ( | ||
| <FieldLayout | ||
| key={ typeof field === 'string' ? field : field.id } | ||
| data={ data } | ||
| field={ field } | ||
| onChange={ onChange } | ||
| /> | ||
| ); | ||
| } ) } | ||
| </VStack> | ||
| ); | ||
| } |
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
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
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,47 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { __experimentalHStack as HStack } from '@wordpress/components'; | ||
| import { useContext } from '@wordpress/element'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import type { FormField } from '../../types'; | ||
| import DataFormContext from '../../components/dataform-context'; | ||
|
|
||
| interface FormFieldProps< Item > { | ||
| data: Item; | ||
| field: FormField; | ||
| onChange: ( value: any ) => void; | ||
| } | ||
|
|
||
| export function FormInlineField< Item >( { | ||
| data, | ||
| field, | ||
| onChange, | ||
| }: FormFieldProps< Item > ) { | ||
| const { getFieldDefinition } = useContext( DataFormContext ); | ||
| const fieldDefinition = getFieldDefinition( | ||
| typeof field === 'string' ? field : field.id | ||
| ); | ||
| if ( ! fieldDefinition ) { | ||
| return null; | ||
| } | ||
| return ( | ||
| <HStack className="dataforms-layouts-panel__field"> | ||
| <div className="dataforms-layouts-panel__field-label"> | ||
| { fieldDefinition.label } | ||
| </div> | ||
| <div> | ||
| <fieldDefinition.Edit | ||
| key={ fieldDefinition.id } | ||
| data={ data } | ||
| field={ fieldDefinition } | ||
| onChange={ onChange } | ||
| hideLabelFromVision | ||
| /> | ||
| </div> | ||
| </HStack> | ||
| ); | ||
| } |
Oops, something went wrong.