Skip to content

Commit

Permalink
Add view config control to switch on/off hierarchical vizualization
Browse files Browse the repository at this point in the history
  • Loading branch information
oandregal committed Dec 10, 2024
1 parent 747f4f9 commit 39c8176
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 2 deletions.
4 changes: 2 additions & 2 deletions packages/dataviews/src/dataviews-layouts/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,15 @@ import ViewGrid from './grid';
import ViewList from './list';
import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../constants';
import PreviewSizePicker from './grid/preview-size-picker';
import DensityPicker from './table/density-picker';
import TableViewConfigOptions from './table/view-config-options';

export const VIEW_LAYOUTS = [
{
type: LAYOUT_TABLE,
label: __( 'Table' ),
component: ViewTable,
icon: blockTable,
viewConfigOptions: DensityPicker,
viewConfigOptions: TableViewConfigOptions,
},
{
type: LAYOUT_GRID,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
/**
* WordPress dependencies
*/
import { ToggleControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useContext } from '@wordpress/element';

/**
* Internal dependencies
*/
import DataViewsContext from '../../components/dataviews-context';
import type { ViewTable } from '../../types';

function SortHierarchicalControl() {
const context = useContext( DataViewsContext );
const view = context.view as ViewTable;
const onChangeView = context.onChangeView;

return (
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Show hierarchy' ) }
checked={ !! view.layout?.hierarchicalSort }
onChange={ ( checked: boolean ) => {
onChangeView( {
...view,
layout: {
...view.layout,
hierarchicalSort: checked,
},
} );
} }
/>
);
}

export default SortHierarchicalControl;
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/**
* Internal dependencies
*/
import DensityPicker from './density-picker';
import SortHierarchical from './sort-hierarchical';

function ViewConfigOptions() {
return (
<>
<SortHierarchical />
<DensityPicker />
</>
);
}

export default ViewConfigOptions;

0 comments on commit 39c8176

Please sign in to comment.