@wordpress/dataviews 2.2.0 → 4.0.0

package/src/{view-actions.tsx → components/dataviews-view-config/index.tsx}

@@ -9,18 +9,20 @@ import type { ChangeEvent } from 'react';
 import {
 	Button,
 	privateApis as componentsPrivateApis,
+	__experimentalHStack as HStack,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { memo } from '@wordpress/element';
-import { settings } from '@wordpress/icons';
+import { __, _x } from '@wordpress/i18n';
+import { memo, useContext } from '@wordpress/element';
+import { cog } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { unlock } from './lock-unlock';
-import { SORTING_DIRECTIONS, sortLabels } from './constants';
-import { VIEW_LAYOUTS } from './layouts';
-import type { AnyItem, NormalizedField, View } from './types';
+import { unlock } from '../../lock-unlock';
+import { SORTING_DIRECTIONS, sortLabels } from '../../constants';
+import { VIEW_LAYOUTS, getMandatoryFields } from '../../layouts';
+import type { NormalizedField, View, SupportedLayouts } from '../../types';
+import DataViewsContext from '../dataviews-context';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -34,7 +36,7 @@ const {
 interface ViewTypeMenuProps {
 	view: View;
 	onChangeView: ( view: View ) => void;
-	supportedLayouts?: string[];
+	defaultLayouts?: SupportedLayouts;
 }
 
 interface PageSizeMenuProps {
@@ -42,84 +44,61 @@ interface PageSizeMenuProps {
 	onChangeView: ( view: View ) => void;
 }
 
-interface FieldsVisibilityMenuProps< Item extends AnyItem > {
+interface FieldsVisibilityMenuProps< Item > {
 	view: View;
 	onChangeView: ( view: View ) => void;
 	fields: NormalizedField< Item >[];
 }
 
-interface SortMenuProps< Item extends AnyItem > {
+interface SortMenuProps< Item > {
 	fields: NormalizedField< Item >[];
 	view: View;
 	onChangeView: ( view: View ) => void;
 }
 
-interface ViewActionsProps< Item extends AnyItem > {
-	fields: NormalizedField< Item >[];
-	view: View;
-	onChangeView: ( view: View ) => void;
-	supportedLayouts?: string[];
+interface ViewActionsProps {
+	defaultLayouts?: SupportedLayouts;
 }
 
 function ViewTypeMenu( {
 	view,
 	onChangeView,
-	supportedLayouts,
+	defaultLayouts = { list: {}, grid: {}, table: {} },
 }: ViewTypeMenuProps ) {
-	let _availableViews = VIEW_LAYOUTS;
-	if ( supportedLayouts ) {
-		_availableViews = _availableViews.filter( ( _view ) =>
-			supportedLayouts.includes( _view.type )
-		);
-	}
-	if ( _availableViews.length === 1 ) {
+	const availableLayouts = Object.keys( defaultLayouts );
+	if ( availableLayouts.length <= 1 ) {
 		return null;
 	}
-	const activeView = _availableViews.find( ( v ) => view.type === v.type );
-	return (
-		<DropdownMenu
-			trigger={
-				<DropdownMenuItem
-					suffix={
-						<span aria-hidden="true">{ activeView?.label }</span>
+	return availableLayouts.map( ( layout ) => {
+		const config = VIEW_LAYOUTS.find( ( v ) => v.type === layout );
+		if ( ! config ) {
+			return null;
+		}
+		return (
+			<DropdownMenuRadioItem
+				key={ layout }
+				value={ layout }
+				name="view-actions-available-view"
+				checked={ layout === view.type }
+				hideOnClick
+				onChange={ ( e: ChangeEvent< HTMLInputElement > ) => {
+					switch ( e.target.value ) {
+						case 'list':
+						case 'grid':
+						case 'table':
+							return onChangeView( {
+								...view,
+								type: e.target.value,
+								...defaultLayouts[ e.target.value ],
+							} );
 					}
-				>
-					<DropdownMenuItemLabel>
-						{ __( 'Layout' ) }
-					</DropdownMenuItemLabel>
-				</DropdownMenuItem>
-			}
-		>
-			{ _availableViews.map( ( availableView ) => {
-				return (
-					<DropdownMenuRadioItem
-						key={ availableView.type }
-						value={ availableView.type }
-						name="view-actions-available-view"
-						checked={ availableView.type === view.type }
-						hideOnClick
-						onChange={ ( e: ChangeEvent< HTMLInputElement > ) => {
-							switch ( e.target.value ) {
-								case 'list':
-								case 'grid':
-								case 'table':
-									return onChangeView( {
-										...view,
-										type: e.target.value,
-										layout: {},
-									} );
-							}
-							throw new Error( 'Invalid dataview' );
-						} }
-					>
-						<DropdownMenuItemLabel>
-							{ availableView.label }
-						</DropdownMenuItemLabel>
-					</DropdownMenuRadioItem>
-				);
-			} ) }
-		</DropdownMenu>
-	);
+					throw new Error( 'Invalid dataview' );
+				} }
+			>
+				<DropdownMenuItemLabel>{ config.label }</DropdownMenuItemLabel>
+			</DropdownMenuRadioItem>
+		);
+	} );
 }
 
 const PAGE_SIZE_VALUES = [ 10, 20, 50, 100 ];
@@ -161,15 +140,18 @@ function PageSizeMenu( { view, onChangeView }: PageSizeMenuProps ) {
 	);
 }
 
-function FieldsVisibilityMenu< Item extends AnyItem >( {
+function FieldsVisibilityMenu< Item >( {
 	view,
 	onChangeView,
 	fields,
 }: FieldsVisibilityMenuProps< Item > ) {
+	const mandatoryFields = getMandatoryFields( view );
 	const hidableFields = fields.filter(
 		( field ) =>
-			field.enableHiding !== false && field.id !== view.layout.mediaField
+			field.enableHiding !== false &&
+			! mandatoryFields.includes( field.id )
 	);
+	const viewFields = view.fields || fields.map( ( field ) => field.id );
 	if ( ! hidableFields?.length ) {
 		return null;
 	}
@@ -188,25 +170,20 @@ function FieldsVisibilityMenu< Item extends AnyItem >( {
 					<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 ],
 							} );
 						} }
 					>
 						<DropdownMenuItemLabel>
-							{ field.header }
+							{ field.label }
 						</DropdownMenuItemLabel>
 					</DropdownMenuCheckboxItem>
 				);
@@ -215,7 +192,7 @@ function FieldsVisibilityMenu< Item extends AnyItem >( {
 	);
 }
 
-function SortMenu< Item extends AnyItem >( {
+function SortMenu< Item >( {
 	fields,
 	view,
 	onChangeView,
@@ -235,7 +212,7 @@ function SortMenu< Item extends AnyItem >( {
 				<DropdownMenuItem
 					suffix={
 						<span aria-hidden="true">
-							{ currentSortedField?.header }
+							{ currentSortedField?.label }
 						</span>
 					}
 				>
@@ -253,7 +230,7 @@ function SortMenu< Item extends AnyItem >( {
 						trigger={
 							<DropdownMenuItem>
 								<DropdownMenuItemLabel>
-									{ field.header }
+									{ field.label }
 								</DropdownMenuItemLabel>
 							</DropdownMenuItem>
 						}
@@ -303,45 +280,65 @@ function SortMenu< Item extends AnyItem >( {
 	);
 }
 
-function _ViewActions< Item extends AnyItem >( {
-	fields,
-	view,
-	onChangeView,
-	supportedLayouts,
-}: ViewActionsProps< Item > ) {
+function _DataViewsViewConfig( { defaultLayouts }: ViewActionsProps ) {
+	const { view, fields, onChangeView } = useContext( DataViewsContext );
+	const activeView = VIEW_LAYOUTS.find( ( v ) => view.type === v.type );
 	return (
-		<DropdownMenu
-			trigger={
-				<Button
-					size="compact"
-					icon={ settings }
-					label={ __( 'View options' ) }
-				/>
-			}
-		>
-			<DropdownMenuGroup>
-				<ViewTypeMenu
-					view={ view }
-					onChangeView={ onChangeView }
-					supportedLayouts={ supportedLayouts }
-				/>
-				<SortMenu
-					fields={ fields }
-					view={ view }
-					onChangeView={ onChangeView }
-				/>
-				<FieldsVisibilityMenu
-					fields={ fields }
-					view={ view }
-					onChangeView={ onChangeView }
-				/>
-				<PageSizeMenu view={ view } onChangeView={ onChangeView } />
-			</DropdownMenuGroup>
-		</DropdownMenu>
+		<>
+			<HStack
+				spacing={ 1 }
+				expanded={ false }
+				style={ { flexShrink: 0 } }
+			>
+				<DropdownMenu
+					trigger={
+						<Button
+							size="compact"
+							icon={ activeView?.icon }
+							label={ __( 'Layout' ) }
+						/>
+					}
+				>
+					<ViewTypeMenu
+						view={ view }
+						onChangeView={ onChangeView }
+						defaultLayouts={ defaultLayouts }
+					/>
+				</DropdownMenu>
+				<DropdownMenu
+					trigger={
+						<Button
+							size="compact"
+							icon={ cog }
+							label={ _x(
+								'View options',
+								'View is used as a noun'
+							) }
+						/>
+					}
+				>
+					<DropdownMenuGroup>
+						<SortMenu
+							fields={ fields }
+							view={ view }
+							onChangeView={ onChangeView }
+						/>
+						<FieldsVisibilityMenu
+							fields={ fields }
+							view={ view }
+							onChangeView={ onChangeView }
+						/>
+						<PageSizeMenu
+							view={ view }
+							onChangeView={ onChangeView }
+						/>
+					</DropdownMenuGroup>
+				</DropdownMenu>
+			</HStack>
+		</>
 	);
 }
 
-// A type assertion is used here to keep the type argument.
-const ViewActions = memo( _ViewActions ) as typeof _ViewActions;
+const DataViewsViewConfig = memo( _DataViewsViewConfig );
 
-export default ViewActions;
+export default DataViewsViewConfig;

package/src/filter-and-sort-data-view.ts

@@ -15,7 +15,7 @@ import {
 	OPERATOR_IS_NOT_ALL,
 } from './constants';
 import { normalizeFields } from './normalize-fields';
-import type { Field, AnyItem, View } from './types';
+import type { Field, View } from './types';
 
 function normalizeSearchInput( input = '' ) {
 	return removeAccents( input.trim().toLowerCase() );
@@ -32,7 +32,7 @@ const EMPTY_ARRAY: [] = [];
  *
  * @return Filtered, sorted and paginated data.
  */
-export function filterSortAndPaginate< Item extends AnyItem >(
+export function filterSortAndPaginate< Item >(
 	data: Item[],
 	view: View,
 	fields: Field< Item >[]
@@ -61,7 +61,7 @@ export function filterSortAndPaginate< Item extends AnyItem >(
 		} );
 	}
 
-	if ( view.filters.length > 0 ) {
+	if ( view.filters && view.filters?.length > 0 ) {
 		view.filters.forEach( ( filter ) => {
 			const field = _fields.find(
 				( _field ) => _field.id === filter.field
@@ -142,6 +142,16 @@ export function filterSortAndPaginate< Item extends AnyItem >(
 			filteredData.sort( ( a, b ) => {
 				const valueA = fieldToSort.getValue( { item: a } ) ?? '';
 				const valueB = fieldToSort.getValue( { item: b } ) ?? '';
+
+				if (
+					typeof valueA === 'number' &&
+					typeof valueB === 'number'
+				) {
+					return view.sort?.direction === 'asc'
+						? valueA - valueB
+						: valueB - valueA;
+				}
+
 				return view.sort?.direction === 'asc'
 					? valueA.localeCompare( valueB )
 					: valueB.localeCompare( valueA );

package/src/index.ts

@@ -1,4 +1,5 @@
-export { default as DataViews } from './dataviews';
+export { default as DataViews } from './components/dataviews';
+export { default as DataForm } from './components/dataform';
 export { VIEW_LAYOUTS } from './layouts';
 export { filterSortAndPaginate } from './filter-and-sort-data-view';
 export type * from './types';

package/src/layouts/grid/density-picker.tsx

@@ -0,0 +1,136 @@
+/**
+ * WordPress dependencies
+ */
+import { RangeControl, Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useViewportMatch } from '@wordpress/compose';
+import { plus, lineSolid } from '@wordpress/icons';
+import { useEffect } from '@wordpress/element';
+
+const viewportBreaks = {
+	xhuge: { min: 3, max: 6, default: 5 },
+	huge: { min: 2, max: 4, default: 4 },
+	xlarge: { min: 2, max: 3, default: 3 },
+	large: { min: 1, max: 2, default: 2 },
+	mobile: { min: 1, max: 2, default: 2 },
+};
+
+function useViewPortBreakpoint() {
+	const isXHuge = useViewportMatch( 'xhuge', '>=' );
+	const isHuge = useViewportMatch( 'huge', '>=' );
+	const isXlarge = useViewportMatch( 'xlarge', '>=' );
+	const isLarge = useViewportMatch( 'large', '>=' );
+	const isMobile = useViewportMatch( 'mobile', '>=' );
+
+	if ( isXHuge ) {
+		return 'xhuge';
+	}
+	if ( isHuge ) {
+		return 'huge';
+	}
+	if ( isXlarge ) {
+		return 'xlarge';
+	}
+	if ( isLarge ) {
+		return 'large';
+	}
+	if ( isMobile ) {
+		return 'mobile';
+	}
+	return null;
+}
+
+// Value is number from 0 to 100 representing how big an item is in the grid
+// 100 being the biggest and 0 being the smallest.
+// The size is relative to the viewport size, if one a given viewport the
+// number of allowed items in a grid is 3 to 6 a 0 ( the smallest ) will mean that the grid will
+// have 6 items in a row, a 100 ( the biggest ) will mean that the grid will have 3 items in a row.
+// A value of 75 will mean that the grid will have 4 items in a row.
+function getRangeValue(
+	density: number,
+	breakValues: { min: number; max: number; default: number }
+) {
+	const inverseDensity = breakValues.max - density;
+	const max = breakValues.max - breakValues.min;
+	return Math.round( ( inverseDensity * 100 ) / max );
+}
+
+export default function DensityPicker( {
+	density,
+	setDensity,
+}: {
+	density: number;
+	setDensity: React.Dispatch< React.SetStateAction< number > >;
+} ) {
+	const viewport = useViewPortBreakpoint();
+	useEffect( () => {
+		setDensity( ( _density ) => {
+			if ( ! viewport || ! _density ) {
+				return 0;
+			}
+			const breakValues = viewportBreaks[ viewport ];
+			if ( _density < breakValues.min ) {
+				return breakValues.min;
+			}
+			if ( _density > breakValues.max ) {
+				return breakValues.max;
+			}
+			return _density;
+		} );
+	}, [ setDensity, viewport ] );
+	if ( ! viewport ) {
+		return null;
+	}
+	const breakValues = viewportBreaks[ viewport ];
+	const densityToUse = density || breakValues.default;
+	const rangeValue = getRangeValue( densityToUse, breakValues );
+
+	const step = 100 / ( breakValues.max - breakValues.min + 1 );
+	return (
+		<>
+			<Button
+				size="compact"
+				icon={ lineSolid }
+				disabled={ rangeValue <= 0 }
+				accessibleWhenDisabled
+				label={ __( 'Decrease size' ) }
+				onClick={ () => {
+					setDensity( densityToUse + 1 );
+				} }
+			/>
+			<RangeControl
+				__nextHasNoMarginBottom
+				showTooltip={ false }
+				className="dataviews-density-picker__range-control"
+				label={ __( 'Item size' ) }
+				hideLabelFromVision
+				value={ rangeValue }
+				min={ 0 }
+				max={ 100 }
+				withInputField={ false }
+				onChange={ ( value = 0 ) => {
+					const inverseValue = 100 - value;
+					setDensity(
+						Math.round(
+							( inverseValue *
+								( breakValues.max - breakValues.min ) ) /
+								100 +
+								breakValues.min
+						)
+					);
+				} }
+				step={ step }
+			/>
+			<Button
+				size="compact"
+				icon={ plus }
+				disabled={ rangeValue >= 100 }
+				accessibleWhenDisabled
+				label={ __( 'Increase size' ) }
+				onClick={ () => {
+					setDensity( densityToUse - 1 );
+				} }
+			/>
+		</>
+	);
+}