Skip to content

Commit

Permalink
Reactive form preview (#8663)
Browse files Browse the repository at this point in the history
## Description

This PR fixes issues with field previews not updating immediately when
settings are changed in the Data Model Editor. The changes affect number
field types, ensuring that the preview updates in real-time as settings
are modified.

### Fixed Issues
- Number field preview not updating when changing decimals or number
type (e.g., percentage)

Recording

https://www.loom.com/share/14a30f67266d4a08a694c759ae06b0f3?sid=c0de35ef-9982-438b-b822-94ed106f6891

~~Fixes #8663~~
Fixes #8556

---------

Co-authored-by: Charles Bochet <[email protected]>
nklmantey and charlesBochet authored Dec 19, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 32fef06 commit e84176d
Showing 4 changed files with 19 additions and 4 deletions.
Original file line number Diff line number Diff line change
@@ -117,7 +117,7 @@ export const settingsDataModelFieldSettingsFormSchema = z.discriminatedUnion(
type SettingsDataModelFieldSettingsFormCardProps = {
fieldMetadataItem: Pick<
FieldMetadataItem,
'icon' | 'label' | 'type' | 'isCustom'
'icon' | 'label' | 'type' | 'isCustom' | 'settings'
> &
Partial<Omit<FieldMetadataItem, 'icon' | 'label' | 'type'>>;
} & Pick<SettingsDataModelFieldPreviewCardProps, 'objectMetadataItem'>;
Original file line number Diff line number Diff line change
@@ -8,6 +8,7 @@ import {
SettingsDataModelFieldPreviewCard,
SettingsDataModelFieldPreviewCardProps,
} from '@/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard';
import { useFormContext } from 'react-hook-form';

type SettingsDataModelFieldTextSettingsFormCardProps = {
disabled?: boolean;
@@ -26,11 +27,16 @@ export const SettingsDataModelFieldTextSettingsFormCard = ({
fieldMetadataItem,
objectMetadataItem,
}: SettingsDataModelFieldTextSettingsFormCardProps) => {
const { watch } = useFormContext();

return (
<SettingsDataModelPreviewFormCard
preview={
<StyledFieldPreviewCard
fieldMetadataItem={fieldMetadataItem}
fieldMetadataItem={{
...fieldMetadataItem,
settings: watch('settings'),
}}
objectMetadataItem={objectMetadataItem}
/>
}
Original file line number Diff line number Diff line change
@@ -7,12 +7,13 @@ import {
SettingsDataModelFieldPreviewCard,
SettingsDataModelFieldPreviewCardProps,
} from '@/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard';
import { useFormContext } from 'react-hook-form';

type SettingsDataModelFieldNumberSettingsFormCardProps = {
disabled?: boolean;
fieldMetadataItem: Pick<
FieldMetadataItem,
'icon' | 'label' | 'type' | 'defaultValue'
'icon' | 'label' | 'type' | 'defaultValue' | 'settings'
>;
} & Pick<SettingsDataModelFieldPreviewCardProps, 'objectMetadataItem'>;

@@ -26,11 +27,18 @@ export const SettingsDataModelFieldNumberSettingsFormCard = ({
fieldMetadataItem,
objectMetadataItem,
}: SettingsDataModelFieldNumberSettingsFormCardProps) => {
const { watch } = useFormContext();

return (
<SettingsDataModelPreviewFormCard
preview={
<StyledFieldPreviewCard
fieldMetadataItem={fieldMetadataItem}
fieldMetadataItem={{
icon: watch('icon'),
label: watch('label') || 'New Field',
settings: watch('settings') || null,
type: fieldMetadataItem.type,
}}
objectMetadataItem={objectMetadataItem}
/>
}
Original file line number Diff line number Diff line change
@@ -227,6 +227,7 @@ export const SettingsObjectNewFieldConfigure = () => {
fieldMetadataItem={{
icon: formConfig.watch('icon'),
label: formConfig.watch('label') || 'New Field',
settings: formConfig.watch('settings') || null,
type: fieldType as FieldMetadataType,
}}
objectMetadataItem={activeObjectMetadataItem}

0 comments on commit e84176d

Please sign in to comment.