@wordpress/dataviews 0.2.0 → 0.3.0

package/src/search.js

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

package/src/style.scss

@@ -10,15 +10,42 @@
 	}
 }
 
-.dataviews__filters-view-actions {
+.dataviews-filters__view-actions {
 	padding: $grid-unit-15 $grid-unit-40;
+	.components-search-control {
+		flex-grow: 1;
+		max-width: 240px;
+	}
+}
+
+.dataviews-filters-button {
+	position: relative;
+}
+
+.dataviews-filters-count {
+	position: absolute;
+	top: 0;
+	right: 0;
+	height: $grid-unit-20;
+	color: var(--wp-components-color-accent-inverted, $white);
+	background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+	border-radius: $grid-unit-10;
+	min-width: $grid-unit-20;
+	padding: 0 $grid-unit-05;
+	transform: translateX(40%) translateY(-40%);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 11px;
+	font-weight: 300;
 }
 
 .dataviews-pagination {
 	margin-top: auto;
 	position: sticky;
 	bottom: 0;
-	background-color: $white;
+	background-color: rgba($white, 0.8);
+	backdrop-filter: blur(6px);
 	padding: $grid-unit-15 $grid-unit-40;
 	border-top: $border-width solid $gray-100;
 	color: $gray-700;
@@ -28,7 +55,7 @@
 	margin: $grid-unit-40 0 $grid-unit-20;
 }
 
-.dataviews-table-view {
+.dataviews-view-table {
 	width: 100%;
 	text-indent: 0;
 	border-color: inherit;
@@ -58,9 +85,18 @@
 	tr {
 		border-bottom: 1px solid $gray-100;
 
+		.dataviews-view-table-header-button {
+			gap: $grid-unit-05;
+		}
+
 		td:first-child,
 		th:first-child {
 			padding-left: $grid-unit-40;
+
+			.dataviews-view-table-header-button,
+			.dataviews-view-table-header {
+				margin-left: - #{$grid-unit-10};
+			}
 		}
 
 		td:last-child,
@@ -71,6 +107,12 @@
 		&:last-child {
 			border-bottom: 0;
 		}
+
+		&:hover {
+			td {
+				background-color: #f8f8f8;
+			}
+		}
 	}
 	thead {
 		tr {
@@ -79,16 +121,43 @@
 		th {
 			position: sticky;
 			top: -1px;
-			background-color: lighten($gray-100, 4%);
+			background-color: $white;
 			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;
+			padding-top: $grid-unit-10;
+			padding-bottom: $grid-unit-10;
+			z-index: 1;
+			font-size: 11px;
+			text-transform: uppercase;
+			font-weight: 500;
+			padding-left: $grid-unit-05;
+		}
+	}
+
+	.dataviews-view-table-header-button {
+		padding: $grid-unit-05 $grid-unit-10;
+		font-size: 11px;
+		text-transform: uppercase;
+		font-weight: 500;
+
+		&:not(:hover) {
+			color: $gray-900;
+		}
+
+		span {
+			speak: none;
+
+			&:empty {
+				display: none;
+			}
 		}
 	}
+
+	.dataviews-view-table-header {
+		padding-left: $grid-unit-05;
+	}
 }
 
-.dataviews-grid-view {
+.dataviews-view-grid {
 	margin-bottom: $grid-unit-30;
 	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 	padding: 0 $grid-unit-40;
@@ -102,10 +171,22 @@
 	}
 
 	.dataviews-view-grid__card {
-		h3 { // Todo: A better way to target this
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
+		.dataviews-view-grid__primary-field {
+			.dataviews-view-grid__title-field {
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				display: block;
+				font-size: $default-font-size;
+				width: 100%;
+			}
+
+			.dataviews-view-grid__title-field a,
+			button.dataviews-view-grid__title-field {
+				font-weight: 500;
+				color: $gray-900;
+				text-decoration: none;
+			}
 		}
 	}
 
@@ -126,12 +207,6 @@
 
 	.dataviews-view-grid__primary-field {
 		min-height: $grid-unit-30;
-
-		a {
-			color: $gray-900;
-			text-decoration: none;
-			font-weight: 500;
-		}
 	}
 
 	.dataviews-view-grid__fields {
@@ -150,29 +225,71 @@
 	}
 }
 
-.dataviews-list-view {
+.dataviews-view-list {
 	margin: 0;
+	padding: $grid-unit-10;
 
 	li {
-		border-bottom: $border-width solid $gray-100;
 		margin: 0;
-		&:first-child {
-			border-top: $border-width solid $gray-100;
+
+		.dataviews-view-list__item-wrapper {
+			position: relative;
+			padding-right: $grid-unit-30;
+			border-radius: $grid-unit-05;
+
+			&::after {
+				position: absolute;
+				content: "";
+				top: 100%;
+				left: $grid-unit-30;
+				right: $grid-unit-30;
+				background: $gray-100;
+				height: 1px;
+			}
 		}
-		&:last-child {
-			border-bottom: 0;
+
+		&:not(.is-selected):hover {
+			color: var(--wp-admin-theme-color);
+
+			.dataviews-view-list__fields {
+				color: var(--wp-admin-theme-color);
+			}
 		}
 	}
 
-	.dataviews-list-view__item {
-		padding: $grid-unit-15 $grid-unit-40;
-		cursor: default;
-		&:focus,
-		&:hover {
-			background-color: lighten($gray-100, 3%);
+	li.is-selected,
+	li.is-selected:focus-within {
+		.dataviews-view-list__item-wrapper {
+			background-color: var(--wp-admin-theme-color);
+			color: $white;
+
+			.dataviews-view-list__fields,
+			.components-button {
+				color: $white;
+			}
+
+			&::after {
+				background: transparent;
+			}
 		}
+	}
+
+	.dataviews-view-list__item {
+		padding: $grid-unit-15 0 $grid-unit-15 $grid-unit-30;
+		width: 100%;
+		cursor: pointer;
 		&:focus {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			&::before {
+				position: absolute;
+				content: "";
+				top: -1px;
+				right: -1px;
+				bottom: -1px;
+				left: -1px;
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+				z-index: -1;
+				border-radius: $grid-unit-05;
+			}
 		}
 		h3 {
 			overflow: hidden;
@@ -181,16 +298,7 @@
 		}
 	}
 
-	.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 {
+	.dataviews-view-list__media-wrapper {
 		min-width: $grid-unit-40;
 		height: $grid-unit-40;
 		border-radius: $grid-unit-05;
@@ -209,23 +317,19 @@
 		}
 	}
 
-	.edit-site-page-pages__featured-image,
-	.dataviews-list-view__media-placeholder {
+	.dataviews-view-list__media-placeholder {
 		min-width: $grid-unit-40;
 		height: $grid-unit-40;
-	}
-
-	.dataviews-list-view__media-placeholder {
 		background-color: $gray-200;
 	}
 
-	.dataviews-list-view__fields {
+	.dataviews-view-list__fields {
 		color: $gray-700;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 
-		.dataviews-list-view__field {
+		.dataviews-view-list__field {
 			margin-right: $grid-unit-15;
 
 			&:last-child {
@@ -233,6 +337,31 @@
 			}
 		}
 	}
+
+	& + .dataviews-pagination {
+		justify-content: space-between;
+	}
+
+	.dataviews-view-list__details-button {
+		align-self: center;
+		opacity: 0;
+	}
+
+	li.is-selected,
+	li:hover,
+	li:focus-within {
+		.dataviews-view-list__details-button {
+			opacity: 1;
+		}
+	}
+
+	li.is-selected {
+		.dataviews-view-list__details-button {
+			&:focus {
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) currentColor;
+			}
+		}
+	}
 }
 
 .dataviews-action-modal {
@@ -243,3 +372,8 @@
 .dataviews-loading {
 	padding: 0 $grid-unit-40;
 }
+
+.dataviews-filters__custom-menu-radio-item-prefix {
+	display: block;
+	width: 24px;
+}

package/src/utils.js

@@ -0,0 +1,51 @@
+/**
+ * Helper util to sort data by text fields, when sorting is done client side.
+ *
+ * @param {Object}   params            Function params.
+ * @param {Object[]} params.data       Data to sort.
+ * @param {Object}   params.view       Current view object.
+ * @param {Object[]} params.fields     Array of available fields.
+ * @param {string[]} params.textFields Array of the field ids to sort.
+ *
+ * @return {Object[]} Sorted data.
+ */
+export const sortByTextFields = ( { data, view, fields, textFields } ) => {
+	const sortedData = [ ...data ];
+	const fieldId = view.sort.field;
+	if ( textFields.includes( fieldId ) ) {
+		const fieldToSort = fields.find( ( field ) => {
+			return field.id === fieldId;
+		} );
+		sortedData.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 );
+		} );
+	}
+	return sortedData;
+};
+
+/**
+ * Helper util to get the paginated data and the paginateInfo needed,
+ * when pagination is done client side.
+ *
+ * @param {Object}   params      Function params.
+ * @param {Object[]} params.data Available data.
+ * @param {Object}   params.view Current view object.
+ *
+ * @return {Object} Paginated data and paginationInfo.
+ */
+export function getPaginationResults( { data, view } ) {
+	const start = ( view.page - 1 ) * view.perPage;
+	const totalItems = data?.length || 0;
+	data = data?.slice( start, start + view.perPage );
+	return {
+		data,
+		paginationInfo: {
+			totalItems,
+			totalPages: Math.ceil( totalItems / view.perPage ),
+		},
+	};
+}