@wordpress/dataviews 4.1.0 → 4.3.0

package/src/dataform-controls/select.tsx

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { SelectControl } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+
+export default function Select< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { id, label } = field;
+	const value = field.getValue( { item: data } ) ?? '';
+	const onChangeControl = useCallback(
+		( newValue: any ) =>
+			onChange( {
+				[ id ]: newValue,
+			} ),
+		[ id, onChange ]
+	);
+
+	const elements = [
+		/*
+		 * Value can be undefined when:
+		 *
+		 * - the field is not required
+		 * - in bulk editing
+		 *
+		 */
+		{ label: __( 'Select item' ), value: '' },
+		...( field?.elements ?? [] ),
+	];
+
+	return (
+		<SelectControl
+			label={ label }
+			value={ value }
+			options={ elements }
+			onChange={ onChangeControl }
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+			hideLabelFromVision={ hideLabelFromVision }
+		/>
+	);
+}

package/src/dataform-controls/style.scss

@@ -0,0 +1,4 @@
+.dataviews-controls__datetime {
+	border: none;
+	padding: 0;
+}

package/src/dataform-controls/text.tsx

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { TextControl } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+
+export default function Text< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { id, label, placeholder } = field;
+	const value = field.getValue( { item: data } );
+
+	const onChangeControl = useCallback(
+		( newValue: string ) =>
+			onChange( {
+				[ id ]: newValue,
+			} ),
+		[ id, onChange ]
+	);
+
+	return (
+		<TextControl
+			label={ label }
+			placeholder={ placeholder }
+			value={ value ?? '' }
+			onChange={ onChangeControl }
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+			hideLabelFromVision={ hideLabelFromVision }
+		/>
+	);
+}

package/src/dataforms-layouts/panel/index.tsx

@@ -17,7 +17,7 @@ import { closeSmall } from '@wordpress/icons';
  * Internal dependencies
  */
 import { normalizeFields } from '../../normalize-fields';
-import type { DataFormProps, NormalizedField } from '../../types';
+import type { DataFormProps, NormalizedField, Field } from '../../types';
 
 interface FormFieldProps< Item > {
 	data: Item;
@@ -44,6 +44,8 @@ function DropdownHeader( {
 				<Spacer />
 				{ onClose && (
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						className="dataforms-layouts-panel__dropdown-header-action"
 						label={ __( 'Close' ) }
 						icon={ closeSmall }
@@ -142,7 +144,11 @@ export default function FormPanel< Item >( {
 	const visibleFields = useMemo(
 		() =>
 			normalizeFields(
-				fields.filter( ( { id } ) => !! form.fields?.includes( id ) )
+				( form.fields ?? [] )
+					.map( ( fieldId ) =>
+						fields.find( ( { id } ) => id === fieldId )
+					)
+					.filter( ( field ): field is Field< Item > => !! field )
 			),
 		[ fields, form.fields ]
 	);

package/src/dataforms-layouts/regular/index.tsx

@@ -8,7 +8,7 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import { normalizeFields } from '../../normalize-fields';
-import type { DataFormProps } from '../../types';
+import type { DataFormProps, Field } from '../../types';
 
 export default function FormRegular< Item >( {
 	data,
@@ -19,7 +19,11 @@ export default function FormRegular< Item >( {
 	const visibleFields = useMemo(
 		() =>
 			normalizeFields(
-				fields.filter( ( { id } ) => !! form.fields?.includes( id ) )
+				( form.fields ?? [] )
+					.map( ( fieldId ) =>
+						fields.find( ( { id } ) => id === fieldId )
+					)
+					.filter( ( field ): field is Field< Item > => !! field )
 			),
 		[ fields, form.fields ]
 	);

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

@@ -1,11 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { RangeControl, Button } from '@wordpress/components';
+import { RangeControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
-import { plus, reset } from '@wordpress/icons';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useMemo } from '@wordpress/element';
 
 const viewportBreaks = {
 	xhuge: { min: 3, max: 6, default: 5 },
@@ -40,21 +39,6 @@ function useViewPortBreakpoint() {
 	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,
@@ -78,59 +62,41 @@ export default function DensityPicker( {
 			return _density;
 		} );
 	}, [ setDensity, viewport ] );
+	const breakValues = viewportBreaks[ viewport || 'mobile' ];
+	const densityToUse = density || breakValues.default;
+
+	const marks = useMemo(
+		() =>
+			Array.from(
+				{ length: breakValues.max - breakValues.min + 1 },
+				( _, i ) => {
+					return {
+						value: breakValues.min + i,
+					};
+				}
+			),
+		[ breakValues ]
+	);
+
 	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={ reset }
-				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 );
-				} }
-			/>
-		</>
+		<RangeControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			showTooltip={ false }
+			label={ __( 'Preview size' ) }
+			value={ breakValues.max + breakValues.min - densityToUse }
+			marks={ marks }
+			min={ breakValues.min }
+			max={ breakValues.max }
+			withInputField={ false }
+			onChange={ ( value = 0 ) => {
+				setDensity( breakValues.max + breakValues.min - value );
+			} }
+			step={ 1 }
+		/>
 	);
 }

package/src/dataviews-layouts/grid/index.tsx

@@ -145,7 +145,7 @@ function GridItem< Item >( {
 							>
 								<>
 									<FlexItem className="dataviews-view-grid__field-name">
-										{ field.label }
+										{ field.header }
 									</FlexItem>
 									<FlexItem
 										className="dataviews-view-grid__field-value"

package/src/dataviews-layouts/grid/style.scss

@@ -118,7 +118,7 @@
 			background: $gray-100;
 			padding: 0 $grid-unit-10;
 			min-height: $grid-unit-30;
-			border-radius: $radius-block-ui;
+			border-radius: $radius-small;
 			display: flex;
 			align-items: center;
 			font-size: 12px;
@@ -146,10 +146,6 @@
 	}
 }
 
-.dataviews-density-picker__range-control {
-	width: 200px;
-}
-
 .dataviews-view-grid__field-value:empty,
 .dataviews-view-grid__field:empty {
 	display: none;

package/src/dataviews-layouts/index.ts

@@ -16,7 +16,7 @@ import ViewTable from './table';
 import ViewGrid from './grid';
 import ViewList from './list';
 import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../constants';
-import type { View } from '../types';
+import type { View, Field } from '../types';
 
 export const VIEW_LAYOUTS = [
 	{
@@ -39,7 +39,7 @@ export const VIEW_LAYOUTS = [
 	},
 ];
 
-export function getMandatoryFields( view: View ): string[] {
+export function getNotHidableFieldIds( view: View ): string[] {
 	if ( view.type === 'table' ) {
 		return [ view.layout?.primaryField ]
 			.concat(
@@ -64,3 +64,64 @@ export function getMandatoryFields( view: View ): string[] {
 
 	return [];
 }
+
+function getCombinedFieldIds( view: View ): string[] {
+	const combinedFields: string[] = [];
+	if ( view.type === LAYOUT_TABLE && view.layout?.combinedFields ) {
+		view.layout.combinedFields.forEach( ( combination ) => {
+			combinedFields.push( ...combination.children );
+		} );
+	}
+	return combinedFields;
+}
+
+export function getVisibleFieldIds(
+	view: View,
+	fields: Field< any >[]
+): string[] {
+	const fieldsToExclude = getCombinedFieldIds( view );
+
+	if ( view.fields ) {
+		return view.fields.filter( ( id ) => ! fieldsToExclude.includes( id ) );
+	}
+
+	const visibleFields = [];
+	if ( view.type === LAYOUT_TABLE && view.layout?.combinedFields ) {
+		visibleFields.push(
+			...view.layout.combinedFields.map( ( { id } ) => id )
+		);
+	}
+	visibleFields.push(
+		...fields
+			.filter( ( { id } ) => ! fieldsToExclude.includes( id ) )
+			.map( ( { id } ) => id )
+	);
+
+	return visibleFields;
+}
+
+export function getHiddenFieldIds(
+	view: View,
+	fields: Field< any >[]
+): string[] {
+	const fieldsToExclude = [
+		...getCombinedFieldIds( view ),
+		...getVisibleFieldIds( view, fields ),
+	];
+
+	// The media field does not need to be in the view.fields to be displayed.
+	if ( view.type === LAYOUT_GRID && view.layout?.mediaField ) {
+		fieldsToExclude.push( view.layout?.mediaField );
+	}
+
+	if ( view.type === LAYOUT_LIST && view.layout?.mediaField ) {
+		fieldsToExclude.push( view.layout?.mediaField );
+	}
+
+	return fields
+		.filter(
+			( { id, enableHiding } ) =>
+				! fieldsToExclude.includes( id ) && enableHiding
+		)
+		.map( ( { id } ) => id );
+}