Skip to content

Commit

Permalink
remove dataConfig
Browse files Browse the repository at this point in the history
  • Loading branch information
@ntsekouras
ntsekouras committed Oct 18, 2023
1 parent 8c8debe commit 2f354f3
Show file tree
Hide file tree
Showing 3 changed files with 81 additions and 87 deletions.
7 changes: 2 additions & 5 deletions packages/edit-site/src/components/dataviews/dataviews.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,19 +22,16 @@ export default function DataViews( {
fields,
actions,
data,
dataConfig,
isLoading = false,
paginationInfo,
} ) {
const ViewComponent = view.type === 'list' ? ViewList : ViewGrid;
const _fields = useMemo( () => {
return fields.map( ( field ) => ( {
...field,
render:
dataConfig[ field.id ]?.view?.( field.getValue ) ||
field.getValue,
render: field.render?.( field.getValue ) || field.getValue,
} ) );
}, [ fields, dataConfig ] );
}, [ fields ] );
return (
<div className="dataviews-wrapper">
<VStack spacing={ 4 }>
Expand Down
8 changes: 5 additions & 3 deletions packages/edit-site/src/components/dataviews/field-types.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,18 @@ import Media from '../../components/media';

export const coreFieldTypes = {
string: {
view:
render:
( getValue ) =>
( { item } ) =>
getValue( { item } ),
},
date: {
view: ( { item, getValue } ) => <time>{ getValue( { item } ) }</time>,
render:
( getValue ) =>
( { item } ) => <time>{ getValue( { item } ) }</time>,
},
image: {
view:
render:
( getValue ) =>
( { item } ) => (
<Media id={ getValue( { item } ) } size={ [ 'thumbnail' ] } />
Expand Down
153 changes: 74 additions & 79 deletions packages/edit-site/src/components/page-pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,12 +96,64 @@ export default function PagePages() {
id: 'featured-image',
header: __( 'Featured Image' ),
getValue: ( { item } ) => item.featured_media,
...coreFieldTypes.image,
render:
( getValue ) =>
( { item, view: currentView } ) => {
const value = getValue( { item } );
if ( ! value ) {
return null;
}
return (
<Media
className="edit-site-page-pages__featured-image"
id={ value }
size={
currentView.type === 'list'
? [
'thumbnail',
'medium',
'large',
'full',
]
: [
'large',
'full',
'medium',
'thumbnail',
]
}
/>
);
},
enableSorting: false,
},
{
header: __( 'Title' ),
id: 'title',
getValue: ( { item } ) => item.title?.rendered || item.slug,
...coreFieldTypes.string,
render:
( getValue ) =>
( { item } ) => {
return (
<VStack spacing={ 1 }>
<Heading as="h3" level={ 5 }>
<Link
params={ {
postId: item.id,
postType: item.type,
canvas: 'edit',
} }
>
{ decodeEntities(
getValue( { item } )
) || __( '(no title)' ) }
</Link>
</Heading>
</VStack>
);
},
filters: [ { id: 'search', type: 'search' } ],
maxWidth: 400,
sortingFn: 'alphanumeric',
Expand All @@ -111,6 +163,17 @@ export default function PagePages() {
header: __( 'Author' ),
id: 'author',
getValue: ( { item } ) => item._embedded?.author[ 0 ]?.name,
...coreFieldTypes.string,
render:
( getValue ) =>
( { item } ) => {
const author = item._embedded?.author[ 0 ];
return (
<a href={ `user-edit.php?user_id=${ author.id }` }>
{ getValue( { item } ) }
</a>
);
},
filters: [ { id: 'author', type: 'enumeration' } ],
elements: [
{
Expand All @@ -128,6 +191,7 @@ export default function PagePages() {
id: 'status',
getValue: ( { item } ) =>
postStatuses[ item.status ] ?? item.status,
...coreFieldTypes.string,
filters: [ { type: 'enumeration', id: 'status' } ],
elements: [
{ label: __( 'All' ), value: 'publish,draft' },
Expand All @@ -148,90 +212,22 @@ export default function PagePages() {
header: __( 'Date' ),
id: 'date',
getValue: ( { item } ) => item.date,
...coreFieldTypes.date,
render:
( getValue ) =>
( { item } ) => {
const formattedDate = dateI18n(
getSettings().formats.datetimeAbbreviated,
getDate( getValue( { item } ) )
);
return <time>{ formattedDate }</time>;
},
enableSorting: false,
},
],
[ postStatuses, authors ]
);

const dataConfig = {
'featured-image': {
...coreFieldTypes.image,
view:
( getValue ) =>
( { item, view: currentView } ) => {
const value = getValue( { item } );
if ( ! value ) {
return null;
}
return (
<Media
className="edit-site-page-pages__featured-image"
id={ value }
size={
currentView.type === 'list'
? [ 'thumbnail', 'medium', 'large', 'full' ]
: [ 'large', 'full', 'medium', 'thumbnail' ]
}
/>
);
},
},
title: {
...coreFieldTypes.string,
view:
( getValue ) =>
( { item } ) => {
return (
<VStack spacing={ 1 }>
<Heading as="h3" level={ 5 }>
<Link
params={ {
postId: item.id,
postType: item.type,
canvas: 'edit',
} }
>
{ decodeEntities( getValue( { item } ) ) ||
__( '(no title)' ) }
</Link>
</Heading>
</VStack>
);
},
},
// For now we treat author as a string, but we should have a way
// to create a relation field type.
author: {
...coreFieldTypes.string,
view:
( getValue ) =>
( { item } ) => {
const author = item._embedded?.author[ 0 ];
return (
<a href={ `user-edit.php?user_id=${ author.id }` }>
{ getValue( { item } ) }
</a>
);
},
},
status: {
...coreFieldTypes.string,
},
date: {
...coreFieldTypes.date,
view:
( getValue ) =>
( { item } ) => {
const formattedDate = dateI18n(
getSettings().formats.datetimeAbbreviated,
getDate( getValue( { item } ) )
);
return <time>{ formattedDate }</time>;
},
},
};

const trashPostAction = useTrashPostAction();
const actions = useMemo( () => [ trashPostAction ], [ trashPostAction ] );
const onChangeView = useCallback(
Expand Down Expand Up @@ -262,7 +258,6 @@ export default function PagePages() {
fields={ fields }
actions={ actions }
data={ pages || EMPTY_ARRAY }
dataConfig={ dataConfig }
isLoading={ isLoadingPages }
view={ view }
onChangeView={ onChangeView }
Expand Down

0 comments on commit 2f354f3

Please sign in to comment.