diff --git a/packages/dataviews/src/components/dataform-controls/array.tsx b/packages/dataviews/src/components/dataform-controls/array.tsx
index a70f8a72634996..cba60d00915419 100644
--- a/packages/dataviews/src/components/dataform-controls/array.tsx
+++ b/packages/dataviews/src/components/dataform-controls/array.tsx
@@ -20,9 +20,11 @@ export default function ArrayControl< Item >( {
onChange,
hideLabelFromVision,
validity,
+ config,
}: DataFormControlProps< Item > ) {
const { label, placeholder, getValue, setValue, isValid } = field;
const value = getValue( { item: data } );
+ const { disabled = false } = config || {};
const { elements, isLoading } = useElements( {
elements: field.elements,
@@ -71,6 +73,7 @@ export default function ArrayControl< Item >( {
onChange={ onChangeControl }
placeholder={ placeholder }
suggestions={ elements?.map( ( element ) => element.value ) }
+ disabled={ disabled }
__experimentalValidateInput={ ( token: string ) => {
// If elements validation is required, check if token is valid
if ( field.isValid?.elements && elements ) {
diff --git a/packages/dataviews/src/components/dataform-controls/checkbox.tsx b/packages/dataviews/src/components/dataform-controls/checkbox.tsx
index 10c03d038add04..089c2d27ae194e 100644
--- a/packages/dataviews/src/components/dataform-controls/checkbox.tsx
+++ b/packages/dataviews/src/components/dataform-controls/checkbox.tsx
@@ -19,8 +19,10 @@ export default function Checkbox< Item >( {
data,
hideLabelFromVision,
validity,
+ config,
}: DataFormControlProps< Item > ) {
const { getValue, setValue, label, description, isValid } = field;
+ const { disabled = false } = config || {};
const onChangeControl = useCallback( () => {
onChange(
@@ -37,6 +39,7 @@ export default function Checkbox< Item >( {
help={ description }
checked={ getValue( { item: data } ) }
onChange={ onChangeControl }
+ disabled={ disabled }
/>
);
}
diff --git a/packages/dataviews/src/components/dataform-controls/color.tsx b/packages/dataviews/src/components/dataform-controls/color.tsx
index b6ef590c4f5341..35e54d9241064a 100644
--- a/packages/dataviews/src/components/dataform-controls/color.tsx
+++ b/packages/dataviews/src/components/dataform-controls/color.tsx
@@ -25,9 +25,11 @@ const { ValidatedInputControl, Picker } = unlock( privateApis );
const ColorPicker = ( {
color,
onColorChange,
+ disabled,
}: {
color: string;
onColorChange: ( colorObject: any ) => void;
+ disabled?: boolean;
} ) => {
const validColor = color && colord( color ).isValid() ? color : '#ffffff';
@@ -38,13 +40,14 @@ const ColorPicker = ( {
@@ -76,8 +80,10 @@ export default function Color< Item >( {
onChange,
hideLabelFromVision,
validity,
+ config,
}: DataFormControlProps< Item > ) {
const { label, placeholder, description, setValue, isValid } = field;
+ const { disabled = false } = config || {};
const value = field.getValue( { item: data } ) || '';
const handleColorChange = useCallback(
@@ -105,10 +111,12 @@ export default function Color< Item >( {
onChange={ handleInputChange }
hideLabelFromVision={ hideLabelFromVision }
type="text"
+ disabled={ disabled }
prefix={
}
/>
diff --git a/packages/dataviews/src/components/dataform-controls/date.tsx b/packages/dataviews/src/components/dataform-controls/date.tsx
index bdbb121587b94c..8e69e2fd397ad5 100644
--- a/packages/dataviews/src/components/dataform-controls/date.tsx
+++ b/packages/dataviews/src/components/dataform-controls/date.tsx
@@ -256,6 +256,7 @@ function CalendarDateControl< Item >( {
onChange,
hideLabelFromVision,
validity,
+ config,
}: DataFormControlProps< Item > ) {
const {
id,
@@ -265,6 +266,7 @@ function CalendarDateControl< Item >( {
isValid,
format: fieldFormat,
} = field;
+ const { disabled = false } = config || {};
const [ selectedPresetId, setSelectedPresetId ] = useState< string | null >(
null
);
@@ -368,6 +370,8 @@ function CalendarDateControl< Item >( {
variant="tertiary"
isPressed={ isSelected }
size="small"
+ disabled={ disabled }
+ accessibleWhenDisabled={ false }
onClick={ () =>
handlePresetClick( preset )
}
@@ -381,7 +385,7 @@ function CalendarDateControl< Item >( {
variant="tertiary"
isPressed={ ! selectedPresetId }
size="small"
- disabled={ !! selectedPresetId }
+ disabled={ !! selectedPresetId || disabled }
accessibleWhenDisabled={ false }
>
{ __( 'Custom' ) }
@@ -398,6 +402,7 @@ function CalendarDateControl< Item >( {
value={ value }
onChange={ handleManualDateChange }
required={ !! field.isValid?.required }
+ disabled={ disabled }
/>
{ /* Calendar widget */ }
@@ -411,6 +416,7 @@ function CalendarDateControl< Item >( {
onMonthChange={ setCalendarMonth }
timeZone={ timezoneString || undefined }
weekStartsOn={ weekStartsOn }
+ disabled={ disabled }
/>
@@ -424,8 +430,10 @@ function CalendarDateRangeControl< Item >( {
onChange,
hideLabelFromVision,
validity,
+ config,
}: DataFormControlProps< Item > ) {
const { id, label, getValue, setValue, format: fieldFormat } = field;
+ const { disabled = false } = config || {};
let value: DateRange;
const fieldValue = getValue( { item: data } );
if (
@@ -576,6 +584,8 @@ function CalendarDateRangeControl< Item >( {
variant="tertiary"
isPressed={ isSelected }
size="small"
+ disabled={ disabled }
+ accessibleWhenDisabled={ false }
onClick={ () =>
handlePresetClick( preset )
}
@@ -590,7 +600,7 @@ function CalendarDateRangeControl< Item >( {
isPressed={ ! selectedPresetId }
size="small"
accessibleWhenDisabled={ false }
- disabled={ !! selectedPresetId }
+ disabled={ !! selectedPresetId || disabled }
>
{ __( 'Custom' ) }
@@ -614,6 +624,7 @@ function CalendarDateRangeControl< Item >( {
handleManualDateChange( 'from', newValue )
}
required={ !! field.isValid?.required }
+ disabled={ disabled }
/>
( {
handleManualDateChange( 'to', newValue )
}
required={ !! field.isValid?.required }
+ disabled={ disabled }
/>
@@ -637,6 +649,7 @@ function CalendarDateRangeControl< Item >( {
onMonthChange={ setCalendarMonth }
timeZone={ timezone.string || undefined }
weekStartsOn={ weekStartsOn }
+ disabled={ disabled }
/>
@@ -651,6 +664,7 @@ export default function DateControl< Item >( {
hideLabelFromVision,
operator,
validity,
+ config,
}: DataFormControlProps< Item > ) {
if ( operator === OPERATOR_IN_THE_PAST || operator === OPERATOR_OVER ) {
return (
@@ -661,6 +675,7 @@ export default function DateControl< Item >( {
onChange={ onChange }
hideLabelFromVision={ hideLabelFromVision }
operator={ operator }
+ config={ config }
/>
);
}
@@ -673,6 +688,7 @@ export default function DateControl< Item >( {
onChange={ onChange }
hideLabelFromVision={ hideLabelFromVision }
validity={ validity }
+ config={ config }
/>
);
}
@@ -684,6 +700,7 @@ export default function DateControl< Item >( {
onChange={ onChange }
hideLabelFromVision={ hideLabelFromVision }
validity={ validity }
+ config={ config }
/>
);
}
diff --git a/packages/dataviews/src/components/dataform-controls/datetime.tsx b/packages/dataviews/src/components/dataform-controls/datetime.tsx
index 28adaf75f6e3eb..8a5f1a5d8a7391 100644
--- a/packages/dataviews/src/components/dataform-controls/datetime.tsx
+++ b/packages/dataviews/src/components/dataform-controls/datetime.tsx
@@ -44,8 +44,10 @@ function CalendarDateTimeControl< Item >( {
onChange,
hideLabelFromVision,
validity,
+ config,
}: DataFormControlProps< Item > ) {
const { id, label, description, setValue, getValue, isValid } = field;
+ const { disabled = false } = config || {};
const fieldValue = getValue( { item: data } );
const value = typeof fieldValue === 'string' ? fieldValue : undefined;
@@ -179,6 +181,7 @@ function CalendarDateTimeControl< Item >( {
onMonthChange={ setCalendarMonth }
timeZone={ timezoneString || undefined }
weekStartsOn={ weekStartsOn }
+ disabled={ disabled }
/>
{ /* Manual datetime input */ }
( {
: ''
}
onChange={ handleManualDateTimeChange }
+ disabled={ disabled }
/>
@@ -210,6 +214,7 @@ export default function DateTime< Item >( {
hideLabelFromVision,
operator,
validity,
+ config,
}: DataFormControlProps< Item > ) {
if ( operator === OPERATOR_IN_THE_PAST || operator === OPERATOR_OVER ) {
return (
@@ -220,6 +225,7 @@ export default function DateTime< Item >( {
onChange={ onChange }
hideLabelFromVision={ hideLabelFromVision }
operator={ operator }
+ config={ config }
/>
);
}
@@ -231,6 +237,7 @@ export default function DateTime< Item >( {
onChange={ onChange }
hideLabelFromVision={ hideLabelFromVision }
validity={ validity }
+ config={ config }
/>
);
}
diff --git a/packages/dataviews/src/components/dataform-controls/email.tsx b/packages/dataviews/src/components/dataform-controls/email.tsx
index 96b20dfcf2480e..ae5e9f1d0341dd 100644
--- a/packages/dataviews/src/components/dataform-controls/email.tsx
+++ b/packages/dataviews/src/components/dataform-controls/email.tsx
@@ -19,7 +19,9 @@ export default function Email< Item >( {
onChange,
hideLabelFromVision,
validity,
+ config,
}: DataFormControlProps< Item > ) {
+ const { disabled = false } = config || {};
return (
( {
onChange,
hideLabelFromVision,
validity,
+ disabled,
type: 'email',
prefix: (
diff --git a/packages/dataviews/src/components/dataform-controls/number.tsx b/packages/dataviews/src/components/dataform-controls/number.tsx
index 9c5db3892a99f0..4a484863894bfb 100644
--- a/packages/dataviews/src/components/dataform-controls/number.tsx
+++ b/packages/dataviews/src/components/dataform-controls/number.tsx
@@ -5,5 +5,5 @@ import type { DataFormControlProps } from '../../types';
import ValidatedNumber from './utils/validated-number';
export default function Number< Item >( props: DataFormControlProps< Item > ) {
- return ;
+ return ;
}
diff --git a/packages/dataviews/src/components/dataform-controls/password.tsx b/packages/dataviews/src/components/dataform-controls/password.tsx
index 155c7b3544d070..e484749f8b874e 100644
--- a/packages/dataviews/src/components/dataform-controls/password.tsx
+++ b/packages/dataviews/src/components/dataform-controls/password.tsx
@@ -20,8 +20,10 @@ export default function Password< Item >( {
onChange,
hideLabelFromVision,
validity,
+ config,
}: DataFormControlProps< Item > ) {
const [ isVisible, setIsVisible ] = useState( false );
+ const { disabled = false } = config || {};
const toggleVisibility = useCallback( () => {
setIsVisible( ( prev ) => ! prev );
@@ -35,6 +37,7 @@ export default function Password< Item >( {
onChange,
hideLabelFromVision,
validity,
+ disabled,
type: isVisible ? 'text' : 'password',
suffix: (
diff --git a/packages/dataviews/src/components/dataform-controls/radio.tsx b/packages/dataviews/src/components/dataform-controls/radio.tsx
index 42a45c45c6441e..e72839ab2e0c3d 100644
--- a/packages/dataviews/src/components/dataform-controls/radio.tsx
+++ b/packages/dataviews/src/components/dataform-controls/radio.tsx
@@ -20,8 +20,10 @@ export default function Radio< Item >( {
onChange,
hideLabelFromVision,
validity,
+ config,
}: DataFormControlProps< Item > ) {
const { label, description, getValue, setValue, isValid } = field;
+ const { disabled = false } = config || {};
const { elements, isLoading } = useElements( {
elements: field.elements,
getElements: field.getElements,
@@ -48,6 +50,7 @@ export default function Radio< Item >( {
options={ elements }
selected={ value }
hideLabelFromVision={ hideLabelFromVision }
+ disabled={ disabled }
/>
);
}
diff --git a/packages/dataviews/src/components/dataform-controls/select.tsx b/packages/dataviews/src/components/dataform-controls/select.tsx
index fbecde88d2271c..fb39df169d0ff0 100644
--- a/packages/dataviews/src/components/dataform-controls/select.tsx
+++ b/packages/dataviews/src/components/dataform-controls/select.tsx
@@ -20,8 +20,10 @@ export default function Select< Item >( {
onChange,
hideLabelFromVision,
validity,
+ config,
}: DataFormControlProps< Item > ) {
const { type, label, description, getValue, setValue, isValid } = field;
+ const { disabled = false } = config || {};
const isMultiple = type === 'array';
const value = getValue( { item: data } ) ?? ( isMultiple ? [] : '' );
@@ -53,6 +55,7 @@ export default function Select< Item >( {
__next40pxDefaultSize
hideLabelFromVision={ hideLabelFromVision }
multiple={ isMultiple }
+ disabled={ disabled }
/>
);
}
diff --git a/packages/dataviews/src/components/dataform-controls/telephone.tsx b/packages/dataviews/src/components/dataform-controls/telephone.tsx
index d075394e03b841..12cc40aca9b300 100644
--- a/packages/dataviews/src/components/dataform-controls/telephone.tsx
+++ b/packages/dataviews/src/components/dataform-controls/telephone.tsx
@@ -19,7 +19,9 @@ export default function Telephone< Item >( {
onChange,
hideLabelFromVision,
validity,
+ config,
}: DataFormControlProps< Item > ) {
+ const { disabled = false } = config || {};
return (
( {
onChange,
hideLabelFromVision,
validity,
+ disabled,
type: 'tel',
prefix: (
diff --git a/packages/dataviews/src/components/dataform-controls/text.tsx b/packages/dataviews/src/components/dataform-controls/text.tsx
index 158db52e5d4f32..7cf7237105dc37 100644
--- a/packages/dataviews/src/components/dataform-controls/text.tsx
+++ b/packages/dataviews/src/components/dataform-controls/text.tsx
@@ -17,7 +17,7 @@ export default function Text< Item >( {
config,
validity,
}: DataFormControlProps< Item > ) {
- const { prefix, suffix } = config || {};
+ const { prefix, suffix, disabled = false } = config || {};
return (
( {
onChange,
hideLabelFromVision,
validity,
+ disabled,
prefix: prefix ? createElement( prefix ) : undefined,
suffix: suffix ? createElement( suffix ) : undefined,
} }
diff --git a/packages/dataviews/src/components/dataform-controls/textarea.tsx b/packages/dataviews/src/components/dataform-controls/textarea.tsx
index df64dd636757b7..cf9280be0cd479 100644
--- a/packages/dataviews/src/components/dataform-controls/textarea.tsx
+++ b/packages/dataviews/src/components/dataform-controls/textarea.tsx
@@ -21,7 +21,7 @@ export default function Textarea< Item >( {
config,
validity,
}: DataFormControlProps< Item > ) {
- const { rows = 4 } = config || {};
+ const { rows = 4, disabled = false } = config || {};
const { label, placeholder, description, setValue, isValid } = field;
const value = field.getValue( { item: data } );
@@ -41,6 +41,7 @@ export default function Textarea< Item >( {
help={ description }
onChange={ onChangeControl }
rows={ rows }
+ disabled={ disabled }
minLength={
isValid.minLength ? isValid.minLength.constraint : undefined
}
diff --git a/packages/dataviews/src/components/dataform-controls/toggle-group.tsx b/packages/dataviews/src/components/dataform-controls/toggle-group.tsx
index c0b63bb93b39bb..061a58735bee5e 100644
--- a/packages/dataviews/src/components/dataform-controls/toggle-group.tsx
+++ b/packages/dataviews/src/components/dataform-controls/toggle-group.tsx
@@ -24,8 +24,10 @@ export default function ToggleGroup< Item >( {
onChange,
hideLabelFromVision,
validity,
+ config,
}: DataFormControlProps< Item > ) {
const { getValue, setValue, isValid } = field;
+ const { disabled = false } = config || {};
const value = getValue( { item: data } );
const onChangeControl = useCallback(
@@ -65,6 +67,7 @@ export default function ToggleGroup< Item >( {
key={ el.value }
label={ el.label }
value={ el.value }
+ disabled={ disabled }
/>
) ) }
diff --git a/packages/dataviews/src/components/dataform-controls/toggle.tsx b/packages/dataviews/src/components/dataform-controls/toggle.tsx
index 3cfeabff549125..88dfa5e2be46fb 100644
--- a/packages/dataviews/src/components/dataform-controls/toggle.tsx
+++ b/packages/dataviews/src/components/dataform-controls/toggle.tsx
@@ -19,8 +19,10 @@ export default function Toggle< Item >( {
data,
hideLabelFromVision,
validity,
+ config,
}: DataFormControlProps< Item > ) {
const { label, description, getValue, setValue, isValid } = field;
+ const { disabled = false } = config || {};
const onChangeControl = useCallback( () => {
onChange(
@@ -37,6 +39,7 @@ export default function Toggle< Item >( {
help={ description }
checked={ getValue( { item: data } ) }
onChange={ onChangeControl }
+ disabled={ disabled }
/>
);
}
diff --git a/packages/dataviews/src/components/dataform-controls/url.tsx b/packages/dataviews/src/components/dataform-controls/url.tsx
index 98580b95dbc06b..dbe9bb4879bab7 100644
--- a/packages/dataviews/src/components/dataform-controls/url.tsx
+++ b/packages/dataviews/src/components/dataform-controls/url.tsx
@@ -19,7 +19,9 @@ export default function Url< Item >( {
onChange,
hideLabelFromVision,
validity,
+ config,
}: DataFormControlProps< Item > ) {
+ const { disabled = false } = config || {};
return (
( {
onChange,
hideLabelFromVision,
validity,
+ disabled,
type: 'url',
prefix: (
diff --git a/packages/dataviews/src/components/dataform-controls/utils/relative-date-control.tsx b/packages/dataviews/src/components/dataform-controls/utils/relative-date-control.tsx
index b6ccac9ef45a47..2bd5c1989c1a19 100644
--- a/packages/dataviews/src/components/dataform-controls/utils/relative-date-control.tsx
+++ b/packages/dataviews/src/components/dataform-controls/utils/relative-date-control.tsx
@@ -50,6 +50,7 @@ export default function RelativeDateControl< Item >( {
onChange,
hideLabelFromVision,
operator,
+ config,
}: DataFormControlProps< Item > & {
className: string;
} ) {
@@ -59,6 +60,7 @@ export default function RelativeDateControl< Item >( {
];
const { id, label, getValue, setValue } = field;
+ const { disabled = false } = config || {};
const fieldValue = getValue( { item: data } );
const { value: relValue = '', unit = options[ 0 ].value } =
fieldValue && typeof fieldValue === 'object' ? fieldValue : {};
@@ -101,6 +103,7 @@ export default function RelativeDateControl< Item >( {
step={ 1 }
value={ relValue }
onChange={ onChangeValue }
+ disabled={ disabled }
/>
( {
options={ options }
onChange={ onChangeUnit }
hideLabelFromVision
+ disabled={ disabled }
/>
diff --git a/packages/dataviews/src/components/dataform-controls/utils/validated-input.tsx b/packages/dataviews/src/components/dataform-controls/utils/validated-input.tsx
index b30f8eaba497e2..5e84d779d2d226 100644
--- a/packages/dataviews/src/components/dataform-controls/utils/validated-input.tsx
+++ b/packages/dataviews/src/components/dataform-controls/utils/validated-input.tsx
@@ -27,6 +27,10 @@ export type DataFormValidatedTextControlProps< Item > =
* Optional suffix element to display after the input.
*/
suffix?: React.ReactElement;
+ /**
+ * Whether the control is disabled.
+ */
+ disabled?: boolean;
};
export default function ValidatedText< Item >( {
@@ -38,6 +42,7 @@ export default function ValidatedText< Item >( {
prefix,
suffix,
validity,
+ disabled,
}: DataFormValidatedTextControlProps< Item > ) {
const { label, placeholder, description, getValue, setValue, isValid } =
field;
@@ -67,6 +72,7 @@ export default function ValidatedText< Item >( {
type={ type }
prefix={ prefix }
suffix={ suffix }
+ disabled={ disabled }
pattern={ isValid.pattern ? isValid.pattern.constraint : undefined }
minLength={
isValid.minLength ? isValid.minLength.constraint : undefined
diff --git a/packages/dataviews/src/components/dataform-controls/utils/validated-number.tsx b/packages/dataviews/src/components/dataform-controls/utils/validated-number.tsx
index 35ba5223a8b4da..51159aa88ec2b6 100644
--- a/packages/dataviews/src/components/dataform-controls/utils/validated-number.tsx
+++ b/packages/dataviews/src/components/dataform-controls/utils/validated-number.tsx
@@ -90,11 +90,13 @@ export default function ValidatedNumber< Item >( {
hideLabelFromVision,
operator,
validity,
+ config,
}: DataFormControlProps< Item > ) {
const decimals = ( field.format as FormatNumber )?.decimals ?? 0;
const step = Math.pow( 10, Math.abs( decimals ) * -1 );
const { label, description, getValue, setValue, isValid } = field;
const value = getValue( { item: data } ) ?? '';
+ const { disabled = false } = config || {};
const onChangeControl = useCallback(
( newValue: string | undefined ) => {
@@ -159,6 +161,7 @@ export default function ValidatedNumber< Item >( {
step={ step }
min={ isValid.min ? isValid.min.constraint : undefined }
max={ isValid.max ? isValid.max.constraint : undefined }
+ disabled={ disabled }
/>
);
}
diff --git a/packages/dataviews/src/components/dataviews-filters/input-widget.tsx b/packages/dataviews/src/components/dataviews-filters/input-widget.tsx
index 65ed2a4685c880..03157d0113ac80 100644
--- a/packages/dataviews/src/components/dataviews-filters/input-widget.tsx
+++ b/packages/dataviews/src/components/dataviews-filters/input-widget.tsx
@@ -60,8 +60,14 @@ export default function InputWidget( {
const field = useMemo( () => {
const currentField = fields.find( ( f ) => f.id === filter.field );
if ( currentField ) {
+ // In filter mode we reuse the field edit control, but without allowing
+ // EditConfig.disabled to make the filter UI non-interactive.
+ // NormalizedField.filter is created at normalization time for that purpose.
+ const FilterEdit = currentField.filter ?? currentField.Edit;
+
return {
...currentField,
+ Edit: FilterEdit,
// Deactivate validation for filters.
isValid: {} satisfies NormalizedRules< any >,
// Configure getValue/setValue as if Item was a plain object.
diff --git a/packages/dataviews/src/dataform/stories/index.story.tsx b/packages/dataviews/src/dataform/stories/index.story.tsx
index 20db7e8b803fd7..94b9a08f35c7d0 100644
--- a/packages/dataviews/src/dataform/stories/index.story.tsx
+++ b/packages/dataviews/src/dataform/stories/index.story.tsx
@@ -73,6 +73,13 @@ export const LayoutRegular = {
description: 'Chooses the label position.',
options: [ 'default', 'top', 'side', 'none' ],
},
+ disabled: {
+ control: { type: 'boolean' },
+ description: 'Disable all fields in the form.',
+ },
+ },
+ args: {
+ disabled: false,
},
};
diff --git a/packages/dataviews/src/dataform/stories/layout-regular.tsx b/packages/dataviews/src/dataform/stories/layout-regular.tsx
index 4c6a1b8a646f40..d5baeaae8e2098 100644
--- a/packages/dataviews/src/dataform/stories/layout-regular.tsx
+++ b/packages/dataviews/src/dataform/stories/layout-regular.tsx
@@ -312,8 +312,10 @@ const getLayoutFromStoryArgs = ( {
const LayoutRegularComponent = ( {
labelPosition,
+ disabled = false,
}: {
labelPosition: 'default' | 'top' | 'side' | 'none';
+ disabled?: boolean;
} ) => {
const [ post, setPost ] = useState( {
title: 'Hello, World!',
@@ -332,6 +334,47 @@ const LayoutRegularComponent = ( {
description: 'This is a sample description.',
} );
+ // Create modified fields with disabled config.
+ const modifiedFields: Field< SamplePost >[] = useMemo( () => {
+ if ( ! disabled ) {
+ return fields;
+ }
+
+ return fields.map( ( field ) => {
+ // Add disabled config to the field
+ const editConfig = field.Edit;
+ let newEdit: any;
+
+ if ( typeof editConfig === 'string' ) {
+ newEdit = {
+ control: editConfig as any,
+ disabled: true,
+ };
+ } else if (
+ typeof editConfig === 'object' &&
+ editConfig !== null
+ ) {
+ newEdit = {
+ ...editConfig,
+ disabled: true,
+ };
+ } else {
+ // No Edit config - infer control type based on field properties
+ // Fields with elements default to select, otherwise use the field type
+ const controlType = field.elements ? 'select' : field.type;
+ newEdit = {
+ control: controlType as any,
+ disabled: true,
+ };
+ }
+
+ return {
+ ...field,
+ Edit: newEdit,
+ } as Field< SamplePost >;
+ } );
+ }, [ disabled ] );
+
const form: Form = useMemo(
() => ( {
layout: getLayoutFromStoryArgs( {
@@ -363,7 +406,7 @@ const LayoutRegularComponent = ( {
return (
data={ post }
- fields={ fields }
+ fields={ modifiedFields }
form={ form }
onChange={ ( edits ) =>
setPost( ( prev ) => ( {
diff --git a/packages/dataviews/src/field-types/index.tsx b/packages/dataviews/src/field-types/index.tsx
index f967ccf036e35f..81c79a5a932f38 100644
--- a/packages/dataviews/src/field-types/index.tsx
+++ b/packages/dataviews/src/field-types/index.tsx
@@ -4,6 +4,7 @@
import type {
Field,
FieldTypeName,
+ EditConfig,
NormalizedField,
SortDirection,
} from '../types';
@@ -62,6 +63,39 @@ function getFieldTypeByName< Item >( type?: FieldTypeName ): FieldType< Item > {
return noType;
}
+function isEditConfig( value: unknown ): value is EditConfig {
+ return (
+ !! value &&
+ typeof value === 'object' &&
+ typeof ( value as EditConfig ).control === 'string'
+ );
+}
+
+function getFilterControl< Item >(
+ field: Field< Item >,
+ fallback: string | null
+) {
+ if ( ! isEditConfig( field.Edit ) ) {
+ return getControl( field, fallback );
+ }
+
+ // Filters should never be disabled via EditConfig.
+ // Remove the disabled flag before creating the configured control component.
+ // Note: getControl() will turn EditConfig into a component that closes over config.
+ // If we don't strip it here, we can't override it later in filter UI.
+ const filterConfig = { ...field.Edit } as EditConfig & {
+ disabled?: boolean;
+ };
+ delete filterConfig.disabled;
+ return getControl(
+ {
+ ...field,
+ Edit: filterConfig as EditConfig,
+ },
+ fallback
+ );
+}
+
/**
* Apply default values and normalize the fields config.
*
@@ -101,6 +135,7 @@ export default function normalizeFields< Item >(
type: fieldType.type,
render: field.render ?? fieldType.render,
Edit: getControl( field, fieldType.Edit ),
+ filter: getFilterControl( field, fieldType.Edit ),
sort,
enableSorting: field.enableSorting ?? fieldType.enableSorting,
enableGlobalSearch:
diff --git a/packages/dataviews/src/field-types/stories/index.story.tsx b/packages/dataviews/src/field-types/stories/index.story.tsx
index 1bb36f820cf0fd..5d9c88e6804c5d 100644
--- a/packages/dataviews/src/field-types/stories/index.story.tsx
+++ b/packages/dataviews/src/field-types/stories/index.story.tsx
@@ -174,6 +174,10 @@ const fields: Field< DataType >[] = [
type: 'text',
label: 'Text',
description: 'Help for text.',
+ Edit: {
+ control: 'text',
+ disabled: true,
+ },
},
{
id: 'textWithElements',
diff --git a/packages/dataviews/src/types/field-api.ts b/packages/dataviews/src/types/field-api.ts
index bdea28b55a55b3..1a10b6fe649ddb 100644
--- a/packages/dataviews/src/types/field-api.ts
+++ b/packages/dataviews/src/types/field-api.ts
@@ -129,6 +129,10 @@ export type EditConfigTextarea = {
* Number of rows for the textarea.
*/
rows?: number;
+ /**
+ * Whether the control is disabled.
+ */
+ disabled?: boolean;
};
/**
@@ -144,13 +148,25 @@ export type EditConfigText = {
* Suffix component to display after the input.
*/
suffix?: React.ComponentType;
+ /**
+ * Whether the control is disabled.
+ */
+ disabled?: boolean;
};
/**
- * Edit configuration for other control types (excluding 'text' and 'textarea').
+ * Edit configuration for other control types.
+ * Includes all available dataform control types beyond text and textarea.
*/
export type EditConfigGeneric = {
- control: Exclude< FieldTypeName, 'text' | 'textarea' >;
+ control:
+ | FieldTypeName
+ | 'checkbox'
+ | 'radio'
+ | 'select'
+ | 'toggle'
+ | 'toggleGroup';
+ disabled?: boolean;
};
/**
@@ -350,6 +366,7 @@ export type NormalizedField< Item > = Omit<
setValue: ( args: { item: Item; value: any } ) => DeepPartial< Item >;
render: ComponentType< DataViewRenderFieldProps< Item > >;
Edit: ComponentType< DataFormControlProps< Item > > | null;
+ filter: ComponentType< DataFormControlProps< Item > > | null;
hasElements: boolean;
sort: ( a: Item, b: Item, direction: SortDirection ) => number;
isValid: NormalizedRules< Item >;
@@ -434,6 +451,7 @@ export type DataFormControlProps< Item > = {
prefix?: React.ComponentType;
suffix?: React.ComponentType;
rows?: number;
+ disabled?: boolean;
};
};
diff --git a/packages/react-native-editor/sass-transformer.js b/packages/react-native-editor/sass-transformer.js
index 5d3f8337f455b3..9127035408e307 100644
--- a/packages/react-native-editor/sass-transformer.js
+++ b/packages/react-native-editor/sass-transformer.js
@@ -32,9 +32,7 @@
const fs = require( 'fs' );
const path = require( 'path' );
-// eslint-disable-next-line import/no-extraneous-dependencies
const sass = require( 'sass' );
-// eslint-disable-next-line import/no-extraneous-dependencies
const css2rn = require( 'css-to-react-native-transform' ).default;
const upstreamTransformer = require( '@react-native/metro-babel-transformer' );