@wordpress/dataviews 4.1.0 → 4.3.0

package/src/components/dataviews/stories/index.story.tsx

@@ -0,0 +1,164 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViews from '../index';
+import {
+	DEFAULT_VIEW,
+	actions,
+	data,
+	fields,
+	themeData,
+	themeFields,
+} from './fixtures';
+import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../../../constants';
+import { filterSortAndPaginate } from '../../../filter-and-sort-data-view';
+import type { View } from '../../../types';
+
+const meta = {
+	title: 'DataViews/DataViews',
+	component: DataViews,
+};
+export default meta;
+
+const defaultLayouts = {
+	[ LAYOUT_TABLE ]: {
+		layout: {
+			primaryField: 'title',
+			styles: {
+				image: {
+					width: 50,
+				},
+				title: {
+					maxWidth: 400,
+				},
+				type: {
+					maxWidth: 400,
+				},
+				description: {
+					maxWidth: 200,
+				},
+			},
+		},
+	},
+	[ LAYOUT_GRID ]: {
+		layout: {
+			mediaField: 'image',
+			primaryField: 'title',
+		},
+	},
+	[ LAYOUT_LIST ]: {
+		layout: {
+			mediaField: 'image',
+			primaryField: 'title',
+		},
+	},
+};
+
+export const Default = () => {
+	const [ view, setView ] = useState< View >( {
+		...DEFAULT_VIEW,
+		fields: [ 'title', 'description', 'categories' ],
+	} );
+	const { data: shownData, paginationInfo } = useMemo( () => {
+		return filterSortAndPaginate( data, view, fields );
+	}, [ view ] );
+	return (
+		<DataViews
+			getItemId={ ( item ) => item.id.toString() }
+			paginationInfo={ paginationInfo }
+			data={ shownData }
+			view={ view }
+			fields={ fields }
+			onChangeView={ setView }
+			actions={ actions }
+			defaultLayouts={ defaultLayouts }
+		/>
+	);
+};
+
+export const Empty = () => {
+	const [ view, setView ] = useState< View >( {
+		...DEFAULT_VIEW,
+		fields: [ 'title', 'description', 'categories' ],
+	} );
+
+	return (
+		<DataViews
+			getItemId={ ( item ) => item.id.toString() }
+			paginationInfo={ { totalItems: 0, totalPages: 0 } }
+			data={ [] }
+			view={ view }
+			fields={ fields }
+			onChangeView={ setView }
+			actions={ actions }
+			defaultLayouts={ defaultLayouts }
+		/>
+	);
+};
+
+export const FieldsNoSortableNoHidable = () => {
+	const [ view, setView ] = useState< View >( {
+		...DEFAULT_VIEW,
+		fields: [ 'title', 'description', 'categories' ],
+	} );
+	const { data: shownData, paginationInfo } = useMemo( () => {
+		return filterSortAndPaginate( data, view, fields );
+	}, [ view ] );
+
+	const _fields = fields.map( ( field ) => ( {
+		...field,
+		enableSorting: false,
+		enableHiding: false,
+	} ) );
+
+	return (
+		<DataViews
+			getItemId={ ( item ) => item.id.toString() }
+			paginationInfo={ paginationInfo }
+			data={ shownData }
+			view={ view }
+			fields={ _fields }
+			onChangeView={ setView }
+			defaultLayouts={ {
+				table: {},
+			} }
+		/>
+	);
+};
+
+export const CombinedFields = () => {
+	const [ view, setView ] = useState< View >( {
+		...DEFAULT_VIEW,
+		fields: [ 'theme', 'requires', 'tested' ],
+		layout: {
+			combinedFields: [
+				{
+					id: 'theme',
+					label: 'Theme',
+					children: [ 'name', 'description' ],
+					direction: 'vertical',
+				},
+			],
+		},
+	} );
+	const { data: shownData, paginationInfo } = useMemo( () => {
+		return filterSortAndPaginate( themeData, view, themeFields );
+	}, [ view ] );
+
+	return (
+		<DataViews
+			getItemId={ ( item ) => item.name }
+			paginationInfo={ paginationInfo }
+			data={ shownData }
+			view={ view }
+			fields={ themeFields }
+			onChangeView={ setView }
+			defaultLayouts={ { table: {} } }
+		/>
+	);
+};

package/src/components/dataviews/style.scss

@@ -7,6 +7,8 @@
 	container: dataviews-wrapper / inline-size;
 	display: flex;
 	flex-direction: column;
+	font-size: $default-font-size;
+	line-height: $default-line-height;
 }
 
 .dataviews__view-actions,
@@ -18,12 +20,6 @@
 	left: 0;
 	transition: padding ease-out 0.1s;
 	@include reduce-motion("transition");
-
-	.components-search-control {
-		.components-base-control__field {
-			max-width: 240px;
-		}
-	}
 }
 
 .dataviews-view-list__primary-field,
@@ -82,12 +78,6 @@
 	.dataviews__view-actions,
 	.dataviews-filters__container {
 		padding: $grid-unit-15 $grid-unit-30;
-
-		.components-search-control {
-			.components-base-control__field {
-				max-width: 112px;
-			}
-		}
 	}
 
 	.dataviews-view-grid,