Visualize hierarchy

WordPress · Dec 3, 2024 · f42e9fe · f42e9fe
1 parent 2086203
commit f42e9fe
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 0 deletions.
diff --git a/packages/dataviews/src/dataviews-layouts/table/index.tsx b/packages/dataviews/src/dataviews-layouts/table/index.tsx
@@ -43,6 +43,7 @@ interface TableColumnFieldProps< Item > {
 	item: Item;
 	isItemClickable: ( item: Item ) => boolean;
 	onClickItem?: ( item: Item ) => void;
+	level?: number;
 }
 
 interface TableColumnCombinedProps< Item > {
@@ -59,6 +60,7 @@ interface TableColumnProps< Item > {
 	primaryField?: NormalizedField< Item >;
 	fields: NormalizedField< Item >[];
 	item: Item;
+	level?: number;
 	column: string;
 	view: ViewTableType;
 	isItemClickable: ( item: Item ) => boolean;
@@ -68,6 +70,7 @@ interface TableColumnProps< Item > {
 interface TableRowProps< Item > {
 	hasBulkActions: boolean;
 	item: Item;
+	level?: number;
 	actions: Action< Item >[];
 	fields: NormalizedField< Item >[];
 	id: string;
@@ -109,6 +112,7 @@ function TableColumn< Item >( {
 
 function TableColumnField< Item >( {
 	primaryField,
+	level,
 	item,
 	field,
 	isItemClickable,
@@ -131,6 +135,11 @@ function TableColumnField< Item >( {
 				'dataviews-view-table__primary-field': isPrimaryField,
 			} ) }
 		>
+			{ isPrimaryField && level !== undefined && (
+				<span className="dataviews-view-table__level">
+					{ '—'.repeat( level ) }
+				</span>
+			) }
 			<div { ...clickableProps }>
 				<field.render { ...{ item } } />
 			</div>
@@ -159,6 +168,7 @@ function TableColumnCombined< Item >( {
 function TableRow< Item >( {
 	hasBulkActions,
 	item,
+	level,
 	actions,
 	fields,
 	id,
@@ -247,6 +257,7 @@ function TableRow< Item >( {
 							onClickItem={ onClickItem }
 							fields={ fields }
 							item={ item }
+							level={ level }
 							column={ column }
 							view={ view }
 						/>
@@ -273,6 +284,14 @@ function TableRow< Item >( {
 	);
 }
 
+const getItemLevel = ( view: ViewTableType, item: any ) => {
+	if ( ! view.layout?.hierarchical || ! view.layout?.hierarchicalSort ) {
+		return;
+	}
+
+	return item?.level;
+};
+
 function ViewTable< Item >( {
 	actions,
 	data,
@@ -422,6 +441,7 @@ function ViewTable< Item >( {
 							<TableRow
 								key={ getItemId( item ) }
 								item={ item }
+								level={ getItemLevel( view, item ) }
 								hasBulkActions={ hasBulkActions }
 								actions={ actions }
 								fields={ fields }

diff --git a/packages/dataviews/src/dataviews-layouts/table/style.scss b/packages/dataviews/src/dataviews-layouts/table/style.scss
@@ -201,6 +201,7 @@
 			}
 		}
 	}
+
 }
 
 /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */

diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
@@ -354,6 +354,11 @@ export interface ViewTable extends ViewBase {
 		 * The density of the view.
 		 */
 		density?: Density;
+
+		/**
+		 * The field to visualize hierarchical data.
+		 */
+		hierarchical?: string;
 	};
 }
 

diff --git a/packages/edit-site/src/components/sidebar-dataviews/default-views.js b/packages/edit-site/src/components/sidebar-dataviews/default-views.js
@@ -30,6 +30,7 @@ export const defaultLayouts = {
 	[ LAYOUT_TABLE ]: {
 		layout: {
 			primaryField: 'title',
+			hierarchical: 'parent',
 			styles: {
 				title: {
 					maxWidth: 300,
@@ -41,12 +42,14 @@ export const defaultLayouts = {
 		layout: {
 			mediaField: 'featured_media',
 			primaryField: 'title',
+			hierarchical: 'parent', // TODO: remove this
 		},
 	},
 	[ LAYOUT_LIST ]: {
 		layout: {
 			primaryField: 'title',
 			mediaField: 'featured_media',
+			hierarchical: 'parent', // TODO: remove this
 		},
 	},
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -201,6 +201,7 @@ @@
     			}
     		}
     	}
     }
     /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
@@ Expand Down @@