@wordpress/dataviews 2.2.0 → 4.0.0

package/src/test/filter-and-sort-data-view.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import { filterSortAndPaginate } from '../filter-and-sort-data-view';
-import { data, fields } from '../stories/fixtures';
+import { data, fields } from '../components/dataviews/stories/fixtures';
 
 describe( 'filters', () => {
 	it( 'should return empty if the data is empty', () => {
@@ -233,7 +233,7 @@ describe( 'filters', () => {
 } );
 
 describe( 'sorting', () => {
-	it( 'should sort', () => {
+	it( 'should sort by string', () => {
 		const { data: result } = filterSortAndPaginate(
 			data,
 			{
@@ -252,6 +252,21 @@ describe( 'sorting', () => {
 		expect( result[ 0 ].title ).toBe( 'Uranus' );
 		expect( result[ 1 ].title ).toBe( 'Neptune' );
 	} );
+
+	it( 'should sort by number', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				sort: { field: 'satellites', direction: 'desc' },
+			},
+			fields
+		);
+
+		expect( result ).toHaveLength( 11 );
+		expect( result[ 0 ].title ).toBe( 'Saturn' );
+		expect( result[ 1 ].title ).toBe( 'Jupiter' );
+		expect( result[ 2 ].title ).toBe( 'Uranus' );
+	} );
 } );
 
 describe( 'pagination', () => {

package/src/types.ts

@@ -1,7 +1,12 @@
 /**
  * External dependencies
  */
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactElement, ComponentType } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { SetSelection } from './private-types';
 
 export type SortDirection = 'asc' | 'desc';
 
@@ -37,12 +42,19 @@ export type Operator =
 	| 'isAll'
 	| 'isNotAll';
 
-export type AnyItem = Record< string, any >;
+export type ItemRecord = Record< string, unknown >;
+
+export type FieldType = 'text';
 
 /**
  * A dataview field for a specific property of a data type.
  */
-export interface Field< Item extends AnyItem > {
+export type Field< Item > = {
+	/**
+	 * Type of the fields.
+	 */
+	type?: FieldType;
+
 	/**
 	 * The unique identifier of the field.
 	 */
@@ -51,33 +63,17 @@ export interface Field< Item extends AnyItem > {
 	/**
 	 * The label of the field. Defaults to the id.
 	 */
-	header?: string;
+	label?: string;
 
 	/**
-	 * Callback used to retrieve the value of the field from the item.
-	 * Defaults to `item[ field.id ]`.
+	 * Placeholder for the field.
 	 */
-	getValue?: ( args: { item: Item } ) => any;
+	placeholder?: string;
 
 	/**
 	 * Callback used to render the field. Defaults to `field.getValue`.
 	 */
-	render?: ( args: { item: Item } ) => ReactNode;
-
-	/**
-	 * The width of the field column.
-	 */
-	width?: string | number;
-
-	/**
-	 * The minimum width of the field column.
-	 */
-	maxWidth?: string | number;
-
-	/**
-	 * The maximum width of the field column.
-	 */
-	minWidth?: string | number;
+	render?: ComponentType< { item: Item } >;
 
 	/**
 	 * Whether the field is sortable.
@@ -103,17 +99,41 @@ export interface Field< Item extends AnyItem > {
 	 * Filter config for the field.
 	 */
 	filterBy?: FilterByConfig | undefined;
-}
-
-export type NormalizedField< Item extends AnyItem > = Field< Item > &
-	Required< Pick< Field< Item >, 'header' | 'getValue' | 'render' > >;
+} & ( Item extends ItemRecord
+	? {
+			/**
+			 * Callback used to retrieve the value of the field from the item.
+			 * Defaults to `item[ field.id ]`.
+			 */
+			getValue?: ( args: { item: Item } ) => any;
+	  }
+	: {
+			/**
+			 * Callback used to retrieve the value of the field from the item.
+			 * Defaults to `item[ field.id ]`.
+			 */
+			getValue: ( args: { item: Item } ) => any;
+	  } );
+
+export type NormalizedField< Item > = Field< Item > & {
+	label: string;
+	getValue: ( args: { item: Item } ) => any;
+	render: ComponentType< { item: Item } >;
+};
 
 /**
  * A collection of dataview fields for a data type.
  */
-export type Fields< Item extends AnyItem > = Field< Item >[];
+export type Fields< Item > = Field< Item >[];
+
+export type Data< Item > = Item[];
 
-export type Data< Item extends AnyItem > = Item[];
+/**
+ * The form configuration.
+ */
+export type Form = {
+	visibleFields?: string[];
+};
 
 /**
  * The filters applied to the dataset.
@@ -186,7 +206,7 @@ interface ViewBase {
 	/**
 	 * The filters to apply.
 	 */
-	filters: Filter[];
+	filters?: Filter[];
 
 	/**
 	 * The sorting configuration.
@@ -214,31 +234,69 @@ interface ViewBase {
 	perPage?: number;
 
 	/**
-	 * The hidden fields.
+	 * The fields to render
 	 */
-	hiddenFields: string[];
+	fields?: string[];
+}
+
+export interface CombinedField {
+	id: string;
+
+	label: string;
+
+	/**
+	 * The fields to use as columns.
+	 */
+	children: string[];
+
+	/**
+	 * The direction of the stack.
+	 */
+	direction: 'horizontal' | 'vertical';
+}
+
+export interface ColumnStyle {
+	/**
+	 * The width of the field column.
+	 */
+	width?: string | number;
+
+	/**
+	 * The minimum width of the field column.
+	 */
+	maxWidth?: string | number;
+
+	/**
+	 * The maximum width of the field column.
+	 */
+	minWidth?: string | number;
 }
 
 export interface ViewTable extends ViewBase {
 	type: 'table';
 
-	layout: {
+	layout?: {
 		/**
 		 * The field to use as the primary field.
 		 */
 		primaryField?: string;
 
 		/**
-		 * The field to use as the media field.
+		 * The fields to use as columns.
 		 */
-		mediaField?: string;
+		combinedFields?: CombinedField[];
+
+		/**
+		 * The styles for the columns.
+		 */
+		styles?: Record< string, ColumnStyle >;
 	};
 }
 
 export interface ViewList extends ViewBase {
 	type: 'list';
 
-	layout: {
+	layout?: {
 		/**
 		 * The field to use as the primary field.
 		 */
@@ -254,7 +312,7 @@ export interface ViewList extends ViewBase {
 export interface ViewGrid extends ViewBase {
 	type: 'grid';
 
-	layout: {
+	layout?: {
 		/**
 		 * The field to use as the primary field.
 		 */
@@ -279,7 +337,7 @@ export interface ViewGrid extends ViewBase {
 
 export type View = ViewList | ViewGrid | ViewTable;
 
-interface ActionBase< Item extends AnyItem > {
+interface ActionBase< Item > {
 	/**
 	 * The unique identifier of the action.
 	 */
@@ -325,8 +383,7 @@ interface ActionBase< Item extends AnyItem > {
 	supportsBulk?: boolean;
 }
 
-export interface ActionModal< Item extends AnyItem >
-	extends ActionBase< Item > {
+export interface ActionModal< Item > extends ActionBase< Item > {
 	/**
 	 * Modal to render when the action is triggered.
 	 */
@@ -351,8 +408,7 @@ export interface ActionModal< Item extends AnyItem >
 	modalHeader?: string;
 }
 
-export interface ActionButton< Item extends AnyItem >
-	extends ActionBase< AnyItem > {
+export interface ActionButton< Item > extends ActionBase< Item > {
 	/**
 	 * The callback to execute when the action is triggered.
 	 */
@@ -365,39 +421,41 @@ export interface ActionButton< Item extends AnyItem >
 	) => void;
 }
 
-export type Action< Item extends AnyItem > =
-	| ActionModal< Item >
-	| ActionButton< Item >;
+export type Action< Item > = ActionModal< Item > | ActionButton< Item >;
 
-export interface ViewBaseProps< Item extends AnyItem > {
+export interface ViewBaseProps< Item > {
 	actions: Action< Item >[];
 	data: Item[];
 	fields: NormalizedField< Item >[];
 	getItemId: ( item: Item ) => string;
 	isLoading?: boolean;
-	onChangeView( view: View ): void;
-	onSelectionChange: ( items: Item[] ) => void;
+	onChangeView: ( view: View ) => void;
+	onChangeSelection: SetSelection;
 	selection: string[];
 	setOpenedFilter: ( fieldId: string ) => void;
 	view: View;
+	density: number;
 }
 
-export interface ViewTableProps< Item extends AnyItem >
-	extends ViewBaseProps< Item > {
+export interface ViewTableProps< Item > extends ViewBaseProps< Item > {
 	view: ViewTable;
 }
 
-export interface ViewListProps< Item extends AnyItem >
-	extends ViewBaseProps< Item > {
+export interface ViewListProps< Item > extends ViewBaseProps< Item > {
 	view: ViewList;
 }
 
-export interface ViewGridProps< Item extends AnyItem >
-	extends ViewBaseProps< Item > {
+export interface ViewGridProps< Item > extends ViewBaseProps< Item > {
 	view: ViewGrid;
 }
 
-export type ViewProps< Item extends AnyItem > =
+export type ViewProps< Item > =
 	| ViewTableProps< Item >
 	| ViewGridProps< Item >
 	| ViewListProps< Item >;
+
+export interface SupportedLayouts {
+	list?: Omit< ViewList, 'type' >;
+	grid?: Omit< ViewGrid, 'type' >;
+	table?: Omit< ViewTable, 'type' >;
+}

package/src/utils.ts

@@ -8,11 +8,9 @@ import {
 	OPERATOR_IS_ANY,
 	OPERATOR_IS_NONE,
 } from './constants';
-import type { AnyItem, NormalizedField } from './types';
+import type { NormalizedField } from './types';
 
-export function sanitizeOperators< Item extends AnyItem >(
-	field: NormalizedField< Item >
-) {
+export function sanitizeOperators< Item >( field: NormalizedField< Item > ) {
 	let operators = field.filterBy?.operators;
 
 	// Assign default values.