Skip to content

Commit 22ab30a

Browse files
oandregaloandregal
committed
Rename displayFormat to format
1 parent 027c341 commit 22ab30a

File tree

9 files changed

+54
-61
lines changed

9 files changed

+54
-61
lines changed

‎packages/dataviews/CHANGELOG.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
### Enhancements
66

7-
- Field API: introduce the `displayFormat` prop to format the `date` field type. [#72999](https://github.com/WordPress/gutenberg/pull/72999)
7+
- Field API: introduce the `format` prop to format the `date` field type. [#72999](https://github.com/WordPress/gutenberg/pull/72999)
88
- DataForm: add new details layout. [#72355](https://github.com/WordPress/gutenberg/pull/72355)
99
- DatViews list layout: remove link variant from primary actions's button. [#72920](https://github.com/WordPress/gutenberg/pull/72920)
1010
- DataForm: simplify form normalization. [#72848](https://github.com/WordPress/gutenberg/pull/72848)

‎packages/dataviews/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1644,7 +1644,7 @@ Example:
16441644
}
16451645
```
16461646
1647-
### `displayFormat`
1647+
### `format`
16481648
16491649
Display format configuration for fields. Currently supported for date fields. This configuration affects how the field is displayed in the `render` method, the `Edit` control, and filter controls.
16501650
@@ -1661,7 +1661,7 @@ Example:
16611661
id: 'publishDate',
16621662
type: 'date',
16631663
label: 'Publish Date',
1664-
displayFormat: {
1664+
format: {
16651665
date: 'F j, Y',
16661666
weekStartsOn: 'monday',
16671667
},

‎packages/dataviews/src/components/dataviews-filters/filter.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -503,7 +503,7 @@ export default function Filter( {
503503
try {
504504
const dateValue = parseDateTime( label );
505505
if ( dateValue !== null ) {
506-
label = dateI18n( field.displayFormat.date, label );
506+
label = dateI18n( field.format.date, label );
507507
}
508508
} catch ( e ) {
509509
label = filterInView.value;

‎packages/dataviews/src/dataform-controls/date.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
*/
44
import clsx from 'clsx';
55
import {
6-
format,
6+
format as formatDateFns,
77
isValid as isValidDate,
88
subMonths,
99
subDays,
@@ -148,7 +148,9 @@ const formatDate = ( date?: Date | string ): string => {
148148
if ( ! date ) {
149149
return '';
150150
}
151-
return typeof date === 'string' ? date : format( date, 'yyyy-MM-dd' );
151+
return typeof date === 'string'
152+
? date
153+
: formatDateFns( date, 'yyyy-MM-dd' );
152154
};
153155

154156
function ValidatedDateControl< Item >( {
@@ -258,15 +260,14 @@ function CalendarDateControl< Item >( {
258260
hideLabelFromVision,
259261
validity,
260262
}: DataFormControlProps< Item > ) {
261-
const { id, type, label, setValue, getValue, isValid, displayFormat } =
262-
field;
263+
const { id, type, label, setValue, getValue, isValid, format } = field;
263264
const [ selectedPresetId, setSelectedPresetId ] = useState< string | null >(
264265
null
265266
);
266267

267268
let weekStartsOn;
268269
if ( type === 'date' ) {
269-
weekStartsOn = weekStartsOnToNumber( displayFormat.weekStartsOn );
270+
weekStartsOn = weekStartsOnToNumber( format.weekStartsOn );
270271
}
271272

272273
const fieldValue = getValue( { item: data } );
@@ -288,7 +289,7 @@ function CalendarDateControl< Item >( {
288289
const onSelectDate = useCallback(
289290
( newDate: Date | undefined | null ) => {
290291
const dateValue = newDate
291-
? format( newDate, 'yyyy-MM-dd' )
292+
? formatDateFns( newDate, 'yyyy-MM-dd' )
292293
: undefined;
293294
onChangeCallback( dateValue );
294295
setSelectedPresetId( null );
@@ -417,7 +418,7 @@ function CalendarDateRangeControl< Item >( {
417418
hideLabelFromVision,
418419
validity,
419420
}: DataFormControlProps< Item > ) {
420-
const { id, type, label, getValue, setValue, displayFormat } = field;
421+
const { id, type, label, getValue, setValue, format } = field;
421422
let value: DateRange;
422423
const fieldValue = getValue( { item: data } );
423424
if (
@@ -430,7 +431,7 @@ function CalendarDateRangeControl< Item >( {
430431

431432
let weekStartsOn;
432433
if ( type === 'date' ) {
433-
weekStartsOn = weekStartsOnToNumber( displayFormat.weekStartsOn );
434+
weekStartsOn = weekStartsOnToNumber( format.weekStartsOn );
434435
}
435436

436437
const onChangeCallback = useCallback(

‎packages/dataviews/src/field-types/date.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export default {
4848
return '';
4949
}
5050

51-
// Not all fields have displayFormat, but date fields do.
51+
// Not all fields have format, but date fields do.
5252
//
5353
// At runtime, this method will never be called for non-date fields.
5454
// However, the type system does not know this, so we need to check it.
@@ -57,7 +57,7 @@ export default {
5757
return '';
5858
}
5959

60-
return dateI18n( field.displayFormat.date, value );
60+
return dateI18n( field.format.date, value );
6161
},
6262
enableSorting: true,
6363
filterBy: {

‎packages/dataviews/src/stories/field-types.story.tsx‎

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -832,14 +832,14 @@ export const DateComponent = ( {
832832
type,
833833
Edit,
834834
asyncElements,
835-
displayFormatDate,
836-
displayFormatWeekStartsOn,
835+
formatDate,
836+
formatWeekStartsOn,
837837
}: {
838838
type: PanelTypes;
839839
Edit: ControlTypes;
840840
asyncElements: boolean;
841-
displayFormatDate?: string;
842-
displayFormatWeekStartsOn?:
841+
formatDate?: string;
842+
formatWeekStartsOn?:
843843
| 'sunday'
844844
| 'monday'
845845
| 'tuesday'
@@ -853,11 +853,8 @@ export const DateComponent = ( {
853853
fields
854854
.filter( ( field ) => field.type === 'date' )
855855
.map( ( field ) => {
856-
if (
857-
displayFormatDate ||
858-
displayFormatWeekStartsOn !== undefined
859-
) {
860-
const displayFormat: {
856+
if ( formatDate || formatWeekStartsOn !== undefined ) {
857+
const format: {
861858
date?: string;
862859
weekStartsOn?:
863860
| 'sunday'
@@ -868,21 +865,20 @@ export const DateComponent = ( {
868865
| 'friday'
869866
| 'saturday';
870867
} = {};
871-
if ( displayFormatDate ) {
872-
displayFormat.date = displayFormatDate;
868+
if ( formatDate ) {
869+
format.date = formatDate;
873870
}
874-
if ( displayFormatWeekStartsOn !== undefined ) {
875-
displayFormat.weekStartsOn =
876-
displayFormatWeekStartsOn;
871+
if ( formatWeekStartsOn !== undefined ) {
872+
format.weekStartsOn = formatWeekStartsOn;
877873
}
878874
return {
879875
...field,
880-
displayFormat,
876+
format,
881877
};
882878
}
883879
return field;
884880
} ),
885-
[ displayFormatDate, displayFormatWeekStartsOn ]
881+
[ formatDate, formatWeekStartsOn ]
886882
);
887883

888884
return (
@@ -896,16 +892,16 @@ export const DateComponent = ( {
896892
};
897893
DateComponent.storyName = 'date';
898894
DateComponent.args = {
899-
displayFormatDate: '',
900-
displayFormatWeekStartsOn: undefined,
895+
formatDate: '',
896+
formatWeekStartsOn: undefined,
901897
};
902898
DateComponent.argTypes = {
903-
displayFormatDate: {
899+
formatDate: {
904900
control: 'text',
905901
description:
906902
'Custom PHP date format string (e.g., "F j, Y" for "November 6, 2010"). Leave empty to use WordPress default.',
907903
},
908-
displayFormatWeekStartsOn: {
904+
formatWeekStartsOn: {
909905
control: 'select',
910906
options: {
911907
Default: undefined,

‎packages/dataviews/src/test/normalize-fields.ts‎

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -334,7 +334,7 @@ describe( 'normalizeFields: default getValue', () => {
334334
} );
335335
} );
336336

337-
describe( 'displayFormat normalization', () => {
337+
describe( 'format normalization', () => {
338338
it( 'applies default format when not provided for date fields', () => {
339339
const fields: Field< {} >[] = [
340340
{
@@ -343,38 +343,34 @@ describe( 'normalizeFields: default getValue', () => {
343343
},
344344
];
345345
const normalizedFields = normalizeFields( fields );
346-
expect( normalizedFields[ 0 ].displayFormat ).toBeDefined();
347-
expect( normalizedFields[ 0 ].displayFormat.date ).toBeDefined();
348-
expect( typeof normalizedFields[ 0 ].displayFormat.date ).toBe(
346+
expect( normalizedFields[ 0 ].format ).toBeDefined();
347+
expect( normalizedFields[ 0 ].format.date ).toBeDefined();
348+
expect( typeof normalizedFields[ 0 ].format.date ).toBe( 'string' );
349+
expect( normalizedFields[ 0 ].format.weekStartsOn ).toBeDefined();
350+
expect( typeof normalizedFields[ 0 ].format.weekStartsOn ).toBe(
349351
'string'
350352
);
351-
expect(
352-
normalizedFields[ 0 ].displayFormat.weekStartsOn
353-
).toBeDefined();
354-
expect(
355-
typeof normalizedFields[ 0 ].displayFormat.weekStartsOn
356-
).toBe( 'string' );
357353
} );
358354

359355
it( 'preserves custom format when provided', () => {
360356
const fields: Field< {} >[] = [
361357
{
362358
id: 'publishDate',
363359
type: 'date',
364-
displayFormat: {
360+
format: {
365361
date: 'F j, Y',
366362
weekStartsOn: 'monday',
367363
},
368364
},
369365
];
370366
const normalizedFields = normalizeFields( fields );
371-
expect( normalizedFields[ 0 ].displayFormat.date ).toBe( 'F j, Y' );
372-
expect( normalizedFields[ 0 ].displayFormat.weekStartsOn ).toBe(
367+
expect( normalizedFields[ 0 ].format.date ).toBe( 'F j, Y' );
368+
expect( normalizedFields[ 0 ].format.weekStartsOn ).toBe(
373369
'monday'
374370
);
375371
} );
376372

377-
it( 'adds empty displayFormat for non-date field types', () => {
373+
it( 'adds empty format for non-date field types', () => {
378374
const fields: Field< {} >[] = [
379375
{
380376
id: 'title',
@@ -386,8 +382,8 @@ describe( 'normalizeFields: default getValue', () => {
386382
},
387383
];
388384
const normalizedFields = normalizeFields( fields );
389-
expect( normalizedFields[ 0 ].displayFormat ).toEqual( {} );
390-
expect( normalizedFields[ 1 ].displayFormat ).toEqual( {} );
385+
expect( normalizedFields[ 0 ].format ).toEqual( {} );
386+
expect( normalizedFields[ 1 ].format ).toEqual( {} );
391387
} );
392388
} );
393389
} );

‎packages/dataviews/src/types/field-api.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -312,7 +312,7 @@ export type Field< Item > = {
312312
/**
313313
* Display format configuration for fields.
314314
*/
315-
displayFormat?: DisplayFormatDate;
315+
format?: FormatDate;
316316
};
317317

318318
/**
@@ -323,7 +323,7 @@ export type Field< Item > = {
323323
*
324324
* If not provided, defaults to WordPress date format settings.
325325
*/
326-
type DisplayFormatDate = {
326+
type FormatDate = {
327327
date?: string;
328328
weekStartsOn?:
329329
| 'sunday'
@@ -353,12 +353,12 @@ type NormalizedFieldBase< Item > = Omit< Field< Item >, 'Edit' > & {
353353

354354
export type NormalizedFieldDate< Item > = NormalizedFieldBase< Item > & {
355355
type: 'date';
356-
displayFormat: Required< DisplayFormatDate >;
356+
format: Required< FormatDate >;
357357
};
358358

359359
export type NormalizedFieldGeneric< Item > = NormalizedFieldBase< Item > & {
360360
type?: Exclude< FieldType, 'date' >;
361-
displayFormat: {};
361+
format: {};
362362
};
363363

364364
export type NormalizedField< Item > =

‎packages/dataviews/src/utils/normalize-fields.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -219,15 +219,15 @@ export default function normalizeFields< Item >(
219219
return {
220220
...baseField,
221221
type: 'date' as const,
222-
displayFormat: {
222+
format: {
223223
date:
224-
field.displayFormat?.date !== undefined &&
225-
typeof field.displayFormat.date === 'string'
226-
? field.displayFormat.date
224+
field.format?.date !== undefined &&
225+
typeof field.format.date === 'string'
226+
? field.format.date
227227
: getSettings().formats.date,
228228
weekStartsOn:
229-
field.displayFormat?.weekStartsOn !== undefined
230-
? field.displayFormat.weekStartsOn
229+
field.format?.weekStartsOn !== undefined
230+
? field.format.weekStartsOn
231231
: numberToWeekStartsOn(
232232
getSettings().l10n.startOfWeek
233233
),
@@ -238,7 +238,7 @@ export default function normalizeFields< Item >(
238238
return {
239239
...baseField,
240240
type: field.type,
241-
displayFormat: {},
241+
format: {},
242242
};
243243
} );
244244
}

0 commit comments

Comments
 (0)