rename to previewSize

WordPress · Nov 21, 2024 · d53a798 · d53a798
1 parent 07ecbe1
commit d53a798
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 19 deletions.
diff --git a/packages/dataviews/src/dataviews-layouts/grid/index.tsx b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
@@ -25,7 +25,7 @@ import { useHasAPossibleBulkAction } from '../../components/dataviews-bulk-actio
 import type { Action, NormalizedField, ViewGridProps } from '../../types';
 import type { SetSelection } from '../../private-types';
 import getClickableItemProps from '../utils/get-clickable-item-props';
-import { useChangeGridColumnsOnViewportChange } from './preview-size-picker';
+import { useChangePreviewSizeOnViewportChange } from './preview-size-picker';
 
 interface GridItemProps< Item > {
 	selection: string[];
@@ -194,7 +194,7 @@ export default function ViewGrid< Item >( {
 	selection,
 	view,
 }: ViewGridProps< Item > ) {
-	useChangeGridColumnsOnViewportChange();
+	useChangePreviewSizeOnViewportChange();
 	const mediaField = fields.find(
 		( field ) => field.id === view.layout?.mediaField
 	);
@@ -224,9 +224,9 @@ export default function ViewGrid< Item >( {
 		{ visibleFields: [], badgeFields: [] }
 	);
 	const hasData = !! data?.length;
-	const gridStyle = view.layout?.gridColumns
+	const gridStyle = view.layout?.previewSize
 		? {
-				gridTemplateColumns: `repeat(${ view.layout.gridColumns }, minmax(0, 1fr))`,
+				gridTemplateColumns: `repeat(${ view.layout.previewSize }, minmax(0, 1fr))`,
 		  }
 		: {};
 	return (

diff --git a/packages/dataviews/src/dataviews-layouts/grid/preview-size-picker.tsx b/packages/dataviews/src/dataviews-layouts/grid/preview-size-picker.tsx
@@ -45,29 +45,29 @@ function useViewPortBreakpoint() {
 	return null;
 }
 
-export function useChangeGridColumnsOnViewportChange() {
+export function useChangePreviewSizeOnViewportChange() {
 	const viewport = useViewPortBreakpoint();
 	const context = useContext( DataViewsContext );
 	const view = context.view as ViewGrid;
 	useEffect( () => {
-		const gridColumns = view.layout?.gridColumns;
-		let newGridColumns;
-		if ( ! viewport || ! gridColumns ) {
+		const previewSize = view.layout?.previewSize;
+		let newPreviewSize;
+		if ( ! viewport || ! previewSize ) {
 			return;
 		}
 		const breakValues = viewportBreaks[ viewport ];
-		if ( gridColumns < breakValues.min ) {
-			newGridColumns = breakValues.min;
+		if ( previewSize < breakValues.min ) {
+			newPreviewSize = breakValues.min;
 		}
-		if ( gridColumns > breakValues.max ) {
-			newGridColumns = breakValues.max;
+		if ( previewSize > breakValues.max ) {
+			newPreviewSize = breakValues.max;
 		}
-		if ( newGridColumns ) {
+		if ( newPreviewSize ) {
 			context.onChangeView( {
 				...view,
 				layout: {
 					...view.layout,
-					gridColumns: newGridColumns,
+					previewSize: newPreviewSize,
 				},
 			} );
 		}
@@ -79,7 +79,7 @@ export default function PreviewSizePicker() {
 	const context = useContext( DataViewsContext );
 	const view = context.view as ViewGrid;
 	const breakValues = viewportBreaks[ viewport || 'mobile' ];
-	const densityToUse = view.layout?.gridColumns || breakValues.default;
+	const previewSizeToUse = view.layout?.previewSize || breakValues.default;
 
 	const marks = useMemo(
 		() =>
@@ -104,7 +104,7 @@ export default function PreviewSizePicker() {
 			__next40pxDefaultSize
 			showTooltip={ false }
 			label={ __( 'Preview size' ) }
-			value={ breakValues.max + breakValues.min - densityToUse }
+			value={ breakValues.max + breakValues.min - previewSizeToUse }
 			marks={ marks }
 			min={ breakValues.min }
 			max={ breakValues.max }
@@ -114,7 +114,7 @@ export default function PreviewSizePicker() {
 					...view,
 					layout: {
 						...view.layout,
-						gridColumns: breakValues.max + breakValues.min - value,
+						previewSize: breakValues.max + breakValues.min - value,
 					},
 				} );
 			} }

diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
@@ -398,9 +398,9 @@ export interface ViewGrid extends ViewBase {
 		badgeFields?: string[];
 
 		/**
-		 * The number of grid columns.
+		 * The preview size of the grid.
 		 */
-		gridColumns?: number;
+		previewSize?: number;
 	};
 }