Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DataViews: Replace hiddenFields config with fields property instead #63127

Merged
merged 1 commit into from
Jul 4, 2024
Merged

DataViews: Replace hiddenFields config with fields property instead #63127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/dataviews/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@

## Unreleased


### Breaking Changes

- Replace the `hiddenFields` property in the view prop of `DataViews` with a `fields` property that accepts an array of visible fields instead.

### New features

- Added a new `DataForm` component to render controls from a given configuration (fields, form), and data.
Expand Down
6 changes: 3 additions & 3 deletions packages/dataviews/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ const view = {
field: 'date',
direction: 'desc',
},
hiddenFields: [ 'date', 'featured-image' ],
fields: [ 'author', 'status' ],
layout: {},
};
```
Expand All @@ -167,7 +167,7 @@ Properties:
- `sort`:
- `field`: the field used for sorting the dataset.
- `direction`: the direction to use for sorting, one of `asc` or `desc`.
- `hiddenFields`: the `id` of the fields that are hidden in the UI.
- `fields`: the `id` of the fields that are visible in the UI.
- `layout`: config that is specific to a particular layout type.
- `mediaField`: used by the `grid` and `list` layouts. The `id` of the field to be used for rendering each card's media.
- `primaryField`: used by the `table`, `grid` and `list` layouts. The `id` of the field to be highlighted in each row/card/item.
Expand Down Expand Up @@ -199,7 +199,7 @@ function MyCustomPageTable() {
value: [ 'publish', 'draft' ],
},
],
hiddenFields: [ 'date', 'featured-image' ],
fields: [ 'author', 'status' ],
layout: {},
} );

Expand Down
2 changes: 1 addition & 1 deletion packages/dataviews/src/stories/fixtures.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ export const DEFAULT_VIEW = {
search: '',
page: 1,
perPage: 10,
hiddenFields: [ 'image', 'type' ],
fields: [ 'title', 'description', 'categories' ],
layout: {},
filters: [],
};
Expand Down
2 changes: 1 addition & 1 deletion packages/dataviews/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,7 @@ interface ViewBase {
/**
* The hidden fields.
*/
hiddenFields?: string[];
fields?: string[];
}

export interface ViewTable extends ViewBase {
Expand Down
14 changes: 5 additions & 9 deletions packages/dataviews/src/view-actions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,7 @@ function FieldsVisibilityMenu< Item >( {
( field ) =>
field.enableHiding !== false && field.id !== view.layout.mediaField
);
const viewFields = view.fields || fields.map( ( field ) => field.id );
if ( ! hidableFields?.length ) {
return null;
}
Expand All @@ -188,20 +189,15 @@ function FieldsVisibilityMenu< Item >( {
<DropdownMenuCheckboxItem
key={ field.id }
value={ field.id }
checked={ ! view.hiddenFields?.includes( field.id ) }
checked={ viewFields.includes( field.id ) }
onChange={ () => {
onChangeView( {
...view,
hiddenFields: view.hiddenFields?.includes(
field.id
)
? view.hiddenFields.filter(
fields: viewFields.includes( field.id )
? viewFields.filter(
( id ) => id !== field.id
)
: [
...( view.hiddenFields || [] ),
field.id,
],
: [ ...viewFields, field.id ],
} );
} }
>
Expand Down
3 changes: 2 additions & 1 deletion packages/dataviews/src/view-grid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,10 +185,11 @@ export default function ViewGrid< Item >( {
const primaryField = fields.find(
( field ) => field.id === view.layout.primaryField
);
const viewFields = view.fields || fields.map( ( field ) => field.id );
const { visibleFields, badgeFields } = fields.reduce(
( accumulator: Record< string, NormalizedField< Item >[] >, field ) => {
if (
view.hiddenFields?.includes( field.id ) ||
! viewFields.includes( field.id ) ||
[ view.layout.mediaField, view.layout.primaryField ].includes(
field.id
)
Expand Down
3 changes: 2 additions & 1 deletion packages/dataviews/src/view-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -325,9 +325,10 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
const primaryField = fields.find(
( field ) => field.id === view.layout.primaryField
);
const viewFields = view.fields || fields.map( ( field ) => field.id );
const visibleFields = fields.filter(
( field ) =>
! view.hiddenFields?.includes( field.id ) &&
viewFields.includes( field.id ) &&
! [ view.layout.primaryField, view.layout.mediaField ].includes(
field.id
)
Expand Down
17 changes: 12 additions & 5 deletions packages/dataviews/src/view-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ const {
interface HeaderMenuProps< Item > {
field: NormalizedField< Item >;
view: ViewTableType;
fields: NormalizedField< Item >[];
onChangeView: ( view: ViewTableType ) => void;
onHide: ( field: NormalizedField< Item > ) => void;
setOpenedFilter: ( fieldId: string ) => void;
Expand Down Expand Up @@ -105,6 +106,7 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
{
field,
view,
fields,
onChangeView,
onHide,
setOpenedFilter,
Expand Down Expand Up @@ -219,12 +221,14 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
<DropdownMenuItem
prefix={ <Icon icon={ unseen } /> }
onClick={ () => {
const viewFields =
view.fields || fields.map( ( f ) => f.id );
onHide( field );
onChangeView( {
...view,
hiddenFields: (
view.hiddenFields ?? []
).concat( field.id ),
fields: viewFields.filter(
( fieldId ) => fieldId !== field.id
),
} );
} }
>
Expand Down Expand Up @@ -454,10 +458,12 @@ function ViewTable< Item >( {
: undefined;
setNextHeaderMenuToFocus( fallback?.node );
};

const viewFields = view.fields || fields.map( ( f ) => f.id );
const visibleFields = fields.filter(
( field ) =>
! view.hiddenFields?.includes( field.id ) &&
! [ view.layout.mediaField ].includes( field.id )
viewFields.includes( field.id ) ||
[ view.layout.mediaField ].includes( field.id )
);
const hasData = !! data?.length;

Expand Down Expand Up @@ -531,6 +537,7 @@ function ViewTable< Item >( {
} }
field={ field }
view={ view }
fields={ fields }
onChangeView={ onChangeView }
onHide={ onHide }
setOpenedFilter={ setOpenedFilter }
Expand Down
4 changes: 1 addition & 3 deletions packages/edit-site/src/components/page-templates/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,9 +78,7 @@ const DEFAULT_VIEW = {
field: 'title',
direction: 'asc',
},
// All fields are visible by default, so it's
// better to keep track of the hidden ones.
hiddenFields: [ 'preview' ],
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question: what if you hide the preview field, but it's required in another layout?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's still shown in the other layout (there's special treatment for media and primary fields). That said, we've been discussing with @jameskoster and @oandregal and we'll be following-up with a PR where the visible fields and fields rendering config resets when you switch layout. We found that it makes little sense to keep these when you switch layouts (as opposed to filters...)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Related #57596 (comment)

fields: [ 'title', 'description', 'author' ],
layout: defaultConfigPerViewType[ LAYOUT_GRID ],
filters: [],
};
Expand Down
4 changes: 1 addition & 3 deletions packages/edit-site/src/components/sidebar-dataviews/default-views.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,7 @@ const DEFAULT_POST_BASE = {
field: 'date',
direction: 'desc',
},
// All fields are visible by default, so it's
// better to keep track of the hidden ones.
hiddenFields: [ 'date', 'featured-image' ],
fields: [ 'title', 'author', 'status' ],
layout: {
...DEFAULT_CONFIG_PER_VIEW_TYPE[ LAYOUT_LIST ],
},
Expand Down
Loading