@wordpress/dataviews 0.2.0

package/src/search.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useEffect, useRef } from '@wordpress/element';
+import { SearchControl } from '@wordpress/components';
+import { useDebouncedInput } from '@wordpress/compose';
+
+export default function Search( { label, view, onChangeView } ) {
+	const [ search, setSearch, debouncedSearch ] = useDebouncedInput(
+		view.search
+	);
+	useEffect( () => {
+		setSearch( view.search );
+	}, [ view ] );
+	const onChangeViewRef = useRef( onChangeView );
+	useEffect( () => {
+		onChangeViewRef.current = onChangeView;
+	}, [ onChangeView ] );
+	useEffect( () => {
+		onChangeViewRef.current( ( currentView ) => ( {
+			...currentView,
+			page: 1,
+			search: debouncedSearch,
+		} ) );
+	}, [ debouncedSearch ] );
+	const searchLabel = label || __( 'Filter list' );
+	return (
+		<SearchControl
+			__nextHasNoMarginBottom
+			onChange={ setSearch }
+			value={ search }
+			label={ searchLabel }
+			placeholder={ searchLabel }
+			size="compact"
+		/>
+	);
+}

package/src/stories/fixtures.js

@@ -0,0 +1,126 @@
+/**
+ * WordPress dependencies
+ */
+import { trash } from '@wordpress/icons';
+import {
+	Button,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { LAYOUT_TABLE } from '../constants';
+
+export const data = [
+	{
+		id: 1,
+		title: 'Apollo',
+		description: 'Apollo description',
+		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+	},
+	{
+		id: 2,
+		title: 'Space',
+		description: 'Space description',
+		image: 'https://live.staticflickr.com/5678/21911065441_92e2d44708_b.jpg',
+	},
+	{
+		id: 3,
+		title: 'NASA',
+		description: 'NASA photo',
+		image: 'https://live.staticflickr.com/742/21712365770_8f70a2c91e_b.jpg',
+	},
+	{
+		id: 4,
+		title: 'Neptune',
+		description: 'Neptune description',
+		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+	},
+	{
+		id: 5,
+		title: 'Mercury',
+		description: 'Mercury description',
+		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+	},
+	{
+		id: 6,
+		title: 'Venus',
+		description: 'Venus description',
+		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+	},
+	{
+		id: 7,
+		title: 'Earth',
+		description: 'Earth description',
+		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+	},
+	{
+		id: 8,
+		title: 'Mars',
+		description: 'Mars description',
+		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+	},
+	{
+		id: 9,
+		title: 'Jupiter',
+		description: 'Jupiter description',
+		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+	},
+	{
+		id: 10,
+		title: 'Saturn',
+		description: 'Saturn description',
+		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+	},
+	{
+		id: 11,
+		title: 'Uranus',
+		description: 'Uranus description',
+		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+	},
+];
+
+export const DEFAULT_VIEW = {
+	type: LAYOUT_TABLE,
+	search: '',
+	page: 1,
+	perPage: 10,
+	hiddenFields: [ 'image' ],
+	layout: {},
+	filters: [],
+};
+
+export const actions = [
+	{
+		id: 'delete',
+		label: 'Delete item',
+		isPrimary: true,
+		icon: trash,
+		hideModalHeader: true,
+		RenderModal: ( { item, closeModal } ) => {
+			return (
+				<VStack spacing="5">
+					<Text>
+						{ `Are you sure you want to delete "${ item.title }"?` }
+					</Text>
+					<HStack justify="right">
+						<Button variant="tertiary" onClick={ closeModal }>
+							Cancel
+						</Button>
+						<Button variant="primary" onClick={ closeModal }>
+							Delete
+						</Button>
+					</HStack>
+				</VStack>
+			);
+		},
+	},
+	{
+		id: 'secondary',
+		label: 'Secondary action',
+		callback() {},
+	},
+];

package/src/stories/index.story.js

@@ -0,0 +1,137 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useMemo, useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { DataViews, LAYOUT_GRID, LAYOUT_TABLE } from '../index';
+
+import { DEFAULT_VIEW, actions, data } from './fixtures';
+
+const meta = {
+	title: 'DataViews (Experimental)/DataViews',
+	component: DataViews,
+};
+export default meta;
+
+const defaultConfigPerViewType = {
+	[ LAYOUT_TABLE ]: {},
+	[ LAYOUT_GRID ]: {
+		mediaField: 'image',
+		primaryField: 'title',
+	},
+};
+
+function normalizeSearchInput( input = '' ) {
+	return input.trim().toLowerCase();
+}
+
+const fields = [
+	{
+		header: 'Image',
+		id: 'image',
+		render: ( { item } ) => {
+			return (
+				<img src={ item.image } alt="" style={ { width: '100%' } } />
+			);
+		},
+		width: 50,
+		enableSorting: false,
+	},
+	{
+		header: 'Title',
+		id: 'title',
+		getValue: ( { item } ) => item.title,
+		maxWidth: 400,
+		enableHiding: false,
+	},
+	{
+		header: 'Description',
+		id: 'description',
+		getValue: ( { item } ) => item.description,
+		maxWidth: 200,
+		enableSorting: false,
+	},
+];
+
+export const Default = ( props ) => {
+	const [ view, setView ] = useState( DEFAULT_VIEW );
+	const { shownData, paginationInfo } = useMemo( () => {
+		let filteredData = [ ...data ];
+		// Handle global search.
+		if ( view.search ) {
+			const normalizedSearch = normalizeSearchInput( view.search );
+			filteredData = filteredData.filter( ( item ) => {
+				return [
+					normalizeSearchInput( item.title ),
+					normalizeSearchInput( item.description ),
+				].some( ( field ) => field.includes( normalizedSearch ) );
+			} );
+		}
+		// Handle sorting.
+		if ( view.sort ) {
+			const stringSortingFields = [ 'title' ];
+			const fieldId = view.sort.field;
+			if ( stringSortingFields.includes( fieldId ) ) {
+				const fieldToSort = fields.find( ( field ) => {
+					return field.id === fieldId;
+				} );
+				filteredData.sort( ( a, b ) => {
+					const valueA = fieldToSort.getValue( { item: a } ) ?? '';
+					const valueB = fieldToSort.getValue( { item: b } ) ?? '';
+					return view.sort.direction === 'asc'
+						? valueA.localeCompare( valueB )
+						: valueB.localeCompare( valueA );
+				} );
+			}
+		}
+		// Handle pagination.
+		const start = ( view.page - 1 ) * view.perPage;
+		const totalItems = filteredData?.length || 0;
+		filteredData = filteredData?.slice( start, start + view.perPage );
+		return {
+			shownData: filteredData,
+			paginationInfo: {
+				totalItems,
+				totalPages: Math.ceil( totalItems / view.perPage ),
+			},
+		};
+	}, [ view ] );
+	const onChangeView = useCallback(
+		( viewUpdater ) => {
+			let updatedView =
+				typeof viewUpdater === 'function'
+					? viewUpdater( view )
+					: viewUpdater;
+			if ( updatedView.type !== view.type ) {
+				updatedView = {
+					...updatedView,
+					layout: {
+						...defaultConfigPerViewType[ updatedView.type ],
+					},
+				};
+			}
+
+			setView( updatedView );
+		},
+		[ view, setView ]
+	);
+	return (
+		<DataViews
+			{ ...props }
+			paginationInfo={ paginationInfo }
+			data={ shownData }
+			view={ view }
+			fields={ fields }
+			onChangeView={ onChangeView }
+		/>
+	);
+};
+Default.args = {
+	actions,
+	getItemId: ( item ) => item.id,
+	isLoading: false,
+	supportedLayouts: [ LAYOUT_TABLE, LAYOUT_GRID ],
+};

package/src/style.scss

@@ -0,0 +1,245 @@
+.dataviews-wrapper {
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+	box-sizing: border-box;
+	scroll-padding-bottom: $grid-unit-80;
+
+	> div {
+		min-height: 100%;
+	}
+}
+
+.dataviews__filters-view-actions {
+	padding: $grid-unit-15 $grid-unit-40;
+}
+
+.dataviews-pagination {
+	margin-top: auto;
+	position: sticky;
+	bottom: 0;
+	background-color: $white;
+	padding: $grid-unit-15 $grid-unit-40;
+	border-top: $border-width solid $gray-100;
+	color: $gray-700;
+}
+
+.dataviews-filters-options {
+	margin: $grid-unit-40 0 $grid-unit-20;
+}
+
+.dataviews-table-view {
+	width: 100%;
+	text-indent: 0;
+	border-color: inherit;
+	border-collapse: collapse;
+	position: relative;
+	color: $gray-700;
+
+	a {
+		text-decoration: none;
+		color: $gray-900;
+		font-weight: 500;
+	}
+	th {
+		text-align: left;
+		color: var(--wp-components-color-foreground, $gray-900);
+		font-weight: normal;
+		font-size: $default-font-size;
+	}
+	td,
+	th {
+		padding: $grid-unit-15;
+		min-width: 160px;
+		&[data-field-id="actions"] {
+			text-align: right;
+		}
+	}
+	tr {
+		border-bottom: 1px solid $gray-100;
+
+		td:first-child,
+		th:first-child {
+			padding-left: $grid-unit-40;
+		}
+
+		td:last-child,
+		th:last-child {
+			padding-right: $grid-unit-40;
+		}
+
+		&:last-child {
+			border-bottom: 0;
+		}
+	}
+	thead {
+		tr {
+			border: 0;
+		}
+		th {
+			position: sticky;
+			top: -1px;
+			background-color: lighten($gray-100, 4%);
+			box-shadow: inset 0 -#{$border-width} 0 $gray-100;
+			border-top: 1px solid $gray-100;
+			padding-top: $grid-unit-05;
+			padding-bottom: $grid-unit-05;
+		}
+	}
+}
+
+.dataviews-grid-view {
+	margin-bottom: $grid-unit-30;
+	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+	padding: 0 $grid-unit-40;
+
+	@include break-xlarge() {
+		grid-template-columns: repeat(3, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
+	}
+
+	@include break-huge() {
+		grid-template-columns: repeat(4, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
+	}
+
+	.dataviews-view-grid__card {
+		h3 { // Todo: A better way to target this
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
+
+	.dataviews-view-grid__media {
+		width: 100%;
+		min-height: 200px;
+		aspect-ratio: 1/1;
+		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+		border-radius: $radius-block-ui * 2;
+		overflow: hidden;
+
+		> * {
+			object-fit: cover;
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	.dataviews-view-grid__primary-field {
+		min-height: $grid-unit-30;
+
+		a {
+			color: $gray-900;
+			text-decoration: none;
+			font-weight: 500;
+		}
+	}
+
+	.dataviews-view-grid__fields {
+		position: relative;
+		font-size: 12px;
+		line-height: 16px;
+
+		.dataviews-view-grid__field {
+			.dataviews-view-grid__field-header {
+				color: $gray-700;
+			}
+			.dataviews-view-grid__field-value {
+				color: $gray-900;
+			}
+		}
+	}
+}
+
+.dataviews-list-view {
+	margin: 0;
+
+	li {
+		border-bottom: $border-width solid $gray-100;
+		margin: 0;
+		&:first-child {
+			border-top: $border-width solid $gray-100;
+		}
+		&:last-child {
+			border-bottom: 0;
+		}
+	}
+
+	.dataviews-list-view__item {
+		padding: $grid-unit-15 $grid-unit-40;
+		cursor: default;
+		&:focus,
+		&:hover {
+			background-color: lighten($gray-100, 3%);
+		}
+		&:focus {
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		}
+		h3 {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+
+	.dataviews-list-view__item-selected,
+	.dataviews-list-view__item-selected:hover {
+		background-color: $gray-100;
+
+		&:focus {
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		}
+	}
+
+	.dataviews-list-view__media-wrapper {
+		min-width: $grid-unit-40;
+		height: $grid-unit-40;
+		border-radius: $grid-unit-05;
+		overflow: hidden;
+		position: relative;
+
+		&::after {
+			content: "";
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.1);
+			border-radius: $grid-unit-05;
+		}
+	}
+
+	.edit-site-page-pages__featured-image,
+	.dataviews-list-view__media-placeholder {
+		min-width: $grid-unit-40;
+		height: $grid-unit-40;
+	}
+
+	.dataviews-list-view__media-placeholder {
+		background-color: $gray-200;
+	}
+
+	.dataviews-list-view__fields {
+		color: $gray-700;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+
+		.dataviews-list-view__field {
+			margin-right: $grid-unit-15;
+
+			&:last-child {
+				margin-right: 0;
+			}
+		}
+	}
+}
+
+.dataviews-action-modal {
+	z-index: z-index(".dataviews-action-modal");
+}
+
+.dataviews-no-results,
+.dataviews-loading {
+	padding: 0 $grid-unit-40;
+}