@wordpress/dataviews 0.4.0 → 0.5.0

package/src/add-filter.js

@@ -5,261 +5,70 @@ import {
 	privateApis as componentsPrivateApis,
 	Button,
 } from '@wordpress/components';
-import { funnel } from '@wordpress/icons';
-import { __, sprintf } from '@wordpress/i18n';
-import { Children, Fragment } from '@wordpress/element';
+import { plus } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { unlock } from './lock-unlock';
-import { LAYOUT_LIST, OPERATORS } from './constants';
-import { DropdownMenuRadioItemCustom } from './dropdown-menu-helper';
 
 const {
 	DropdownMenuV2: DropdownMenu,
-	DropdownMenuGroupV2: DropdownMenuGroup,
 	DropdownMenuItemV2: DropdownMenuItem,
-	DropdownMenuRadioItemV2: DropdownMenuRadioItem,
-	DropdownMenuSeparatorV2: DropdownMenuSeparator,
 	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
-	DropdownMenuItemHelpTextV2: DropdownMenuItemHelpText,
 } = unlock( componentsPrivateApis );
 
-function WithSeparators( { children } ) {
-	return Children.toArray( children )
-		.filter( Boolean )
-		.map( ( child, i ) => (
-			<Fragment key={ i }>
-				{ i > 0 && <DropdownMenuSeparator /> }
-				{ child }
-			</Fragment>
-		) );
-}
-
-export default function AddFilter( { filters, view, onChangeView } ) {
-	if ( filters.length === 0 ) {
+function AddFilter( { filters, view, onChangeView, setOpenedFilter }, ref ) {
+	if ( ! filters.length || filters.every( ( { isPrimary } ) => isPrimary ) ) {
 		return null;
 	}
-
-	const filterCount = view.filters.reduce( ( acc, filter ) => {
-		if ( filter.value !== undefined ) {
-			return acc + 1;
-		}
-		return acc;
-	}, 0 );
-
+	const inactiveFilters = filters.filter( ( filter ) => ! filter.isVisible );
 	return (
 		<DropdownMenu
 			trigger={
 				<Button
 					__experimentalIsFocusable
-					label={ __( 'Filters' ) }
 					size="compact"
-					icon={ funnel }
+					icon={ plus }
 					className="dataviews-filters-button"
+					variant="tertiary"
+					disabled={ ! inactiveFilters.length }
+					ref={ ref }
 				>
-					{ view.type === LAYOUT_LIST && filterCount > 0 ? (
-						<span className="dataviews-filters-count">
-							{ filterCount }
-						</span>
-					) : null }
+					{ __( 'Add filter' ) }
 				</Button>
 			}
-			style={ {
-				minWidth: '230px',
-			} }
 		>
-			<WithSeparators>
-				<DropdownMenuGroup>
-					{ filters.map( ( filter ) => {
-						const filterInView = view.filters.find(
-							( f ) => f.field === filter.field
-						);
-						const otherFilters = view.filters.filter(
-							( f ) => f.field !== filter.field
-						);
-						const activeElement = filter.elements.find(
-							( element ) => element.value === filterInView?.value
-						);
-						const activeOperator =
-							filterInView?.operator || filter.operators[ 0 ];
-						return (
-							<DropdownMenu
-								key={ filter.field }
-								trigger={
-									<DropdownMenuItem
-										suffix={
-											activeElement && (
-												<span aria-hidden="true">
-													{ activeOperator in
-														OPERATORS &&
-														`${ OPERATORS[ activeOperator ].label } ` }
-													{ activeElement.label }
-												</span>
-											)
-										}
-									>
-										<DropdownMenuItemLabel>
-											{ filter.name }
-										</DropdownMenuItemLabel>
-									</DropdownMenuItem>
-								}
-								style={ {
-									minWidth: '200px',
-								} }
-							>
-								<WithSeparators>
-									<DropdownMenuGroup>
-										{ filter.elements.map( ( element ) => {
-											const isActive =
-												activeElement?.value ===
-												element.value;
-											return (
-												<DropdownMenuRadioItemCustom
-													key={ element.value }
-													name={ `add-filter-${ filter.field }` }
-													value={ element.value }
-													checked={ isActive }
-													onChange={ ( e ) => {
-														onChangeView( {
-															...view,
-															page: 1,
-															filters: [
-																...otherFilters,
-																{
-																	field: filter.field,
-																	operator:
-																		activeOperator,
-																	value: isActive
-																		? undefined
-																		: e
-																				.target
-																				.value,
-																},
-															],
-														} );
-													} }
-												>
-													<DropdownMenuItemLabel>
-														{ element.label }
-													</DropdownMenuItemLabel>
-													{ !! element.description && (
-														<DropdownMenuItemHelpText>
-															{
-																element.description
-															}
-														</DropdownMenuItemHelpText>
-													) }
-												</DropdownMenuRadioItemCustom>
-											);
-										} ) }
-									</DropdownMenuGroup>
-									{ filter.operators.length > 1 && (
-										<DropdownMenu
-											trigger={
-												<DropdownMenuItem
-													suffix={
-														<span aria-hidden="true">
-															{
-																OPERATORS[
-																	activeOperator
-																]?.label
-															}
-														</span>
-													}
-												>
-													<DropdownMenuItemLabel>
-														{ __( 'Conditions' ) }
-													</DropdownMenuItemLabel>
-												</DropdownMenuItem>
-											}
-										>
-											{ Object.entries( OPERATORS ).map(
-												( [
-													operator,
-													{ label, key },
-												] ) => (
-													<DropdownMenuRadioItem
-														key={ key }
-														name={ `add-filter-${ filter.field }-conditions` }
-														value={ operator }
-														checked={
-															activeOperator ===
-															operator
-														}
-														onChange={ ( e ) => {
-															onChangeView( {
-																...view,
-																page: 1,
-																filters: [
-																	...otherFilters,
-																	{
-																		field: filter.field,
-																		operator:
-																			e
-																				.target
-																				.value,
-																		value: filterInView?.value,
-																	},
-																],
-															} );
-														} }
-													>
-														<DropdownMenuItemLabel>
-															{ label }
-														</DropdownMenuItemLabel>
-													</DropdownMenuRadioItem>
-												)
-											) }
-										</DropdownMenu>
-									) }
-									<DropdownMenuItem
-										key={ 'reset-filter-' + filter.name }
-										disabled={ ! activeElement }
-										hideOnClick={ false }
-										onClick={ () => {
-											onChangeView( {
-												...view,
-												page: 1,
-												filters: view.filters.filter(
-													( f ) =>
-														f.field !== filter.field
-												),
-											} );
-										} }
-									>
-										<DropdownMenuItemLabel>
-											{ sprintf(
-												/* translators: 1: Filter name. e.g.: "Reset Author". */
-												__( 'Reset %1$s' ),
-												filter.name.toLowerCase()
-											) }
-										</DropdownMenuItemLabel>
-									</DropdownMenuItem>
-								</WithSeparators>
-							</DropdownMenu>
-						);
-					} ) }
-				</DropdownMenuGroup>
-				<DropdownMenuItem
-					disabled={
-						view.search === '' && view.filters?.length === 0
-					}
-					hideOnClick={ false }
-					onClick={ () => {
-						onChangeView( {
-							...view,
-							page: 1,
-							filters: [],
-						} );
-					} }
-				>
-					<DropdownMenuItemLabel>
-						{ __( 'Reset filters' ) }
-					</DropdownMenuItemLabel>
-				</DropdownMenuItem>
-			</WithSeparators>
+			{ inactiveFilters.map( ( filter ) => {
+				return (
+					<DropdownMenuItem
+						key={ filter.field }
+						onClick={ () => {
+							setOpenedFilter( filter.field );
+							onChangeView( {
+								...view,
+								page: 1,
+								filters: [
+									...( view.filters || [] ),
+									{
+										field: filter.field,
+										value: undefined,
+										operator: filter.operators[ 0 ],
+									},
+								],
+							} );
+						} }
+					>
+						<DropdownMenuItemLabel>
+							{ filter.name }
+						</DropdownMenuItemLabel>
+					</DropdownMenuItem>
+				);
+			} ) }
 		</DropdownMenu>
 	);
 }
+
+export default forwardRef( AddFilter );

package/src/dataviews.js

@@ -14,7 +14,7 @@ import Pagination from './pagination';
 import ViewActions from './view-actions';
 import Filters from './filters';
 import Search from './search';
-import { VIEW_LAYOUTS, LAYOUT_TABLE } from './constants';
+import { VIEW_LAYOUTS, LAYOUT_TABLE, LAYOUT_GRID } from './constants';
 import BulkActions from './bulk-actions';
 
 const defaultGetItemId = ( item ) => item.id;
@@ -37,30 +37,33 @@ export default function DataViews( {
 	deferredRendering = false,
 } ) {
 	const [ selection, setSelection ] = useState( [] );
+	const [ openedFilter, setOpenedFilter ] = useState( null );
 
 	useEffect( () => {
 		if (
 			selection.length > 0 &&
 			selection.some(
-				( id ) => ! data.some( ( item ) => item.id === id )
+				( id ) => ! data.some( ( item ) => getItemId( item ) === id )
 			)
 		) {
 			const newSelection = selection.filter( ( id ) =>
-				data.some( ( item ) => item.id === id )
+				data.some( ( item ) => getItemId( item ) === id )
 			);
 			setSelection( newSelection );
 			onSelectionChange(
-				data.filter( ( item ) => newSelection.includes( item.id ) )
+				data.filter( ( item ) =>
+					newSelection.includes( getItemId( item ) )
+				)
 			);
 		}
-	}, [ selection, data, onSelectionChange ] );
+	}, [ selection, data, getItemId, onSelectionChange ] );
 
 	const onSetSelection = useCallback(
 		( items ) => {
-			setSelection( items.map( ( item ) => item.id ) );
+			setSelection( items.map( ( item ) => getItemId( item ) ) );
 			onSelectionChange( items );
 		},
-		[ setSelection, onSelectionChange ]
+		[ setSelection, getItemId, onSelectionChange ]
 	);
 
 	const ViewComponent = VIEW_LAYOUTS.find(
@@ -74,26 +77,20 @@ export default function DataViews( {
 	}, [ fields ] );
 	return (
 		<div className="dataviews-wrapper">
-			<VStack spacing={ 0 } justify="flex-start">
+			<VStack spacing={ 3 } justify="flex-start">
 				<HStack
 					alignment="flex-start"
+					justify="start"
 					className="dataviews-filters__view-actions"
 				>
-					<HStack justify="start" wrap>
-						{ search && (
-							<Search
-								label={ searchLabel }
-								view={ view }
-								onChangeView={ onChangeView }
-							/>
-						) }
-						<Filters
-							fields={ _fields }
+					{ search && (
+						<Search
+							label={ searchLabel }
 							view={ view }
 							onChangeView={ onChangeView }
 						/>
-					</HStack>
-					{ view.type === LAYOUT_TABLE && (
+					) }
+					{ [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) && (
 						<BulkActions
 							actions={ actions }
 							data={ data }
@@ -109,6 +106,19 @@ export default function DataViews( {
 						supportedLayouts={ supportedLayouts }
 					/>
 				</HStack>
+				<HStack
+					justify="start"
+					className="dataviews-filters__container"
+					wrap
+				>
+					<Filters
+						fields={ _fields }
+						view={ view }
+						onChangeView={ onChangeView }
+						openedFilter={ openedFilter }
+						setOpenedFilter={ setOpenedFilter }
+					/>
+				</HStack>
 				<ViewComponent
 					fields={ _fields }
 					view={ view }
@@ -121,6 +131,7 @@ export default function DataViews( {
 					onDetailsChange={ onDetailsChange }
 					selection={ selection }
 					deferredRendering={ deferredRendering }
+					setOpenedFilter={ setOpenedFilter }
 				/>
 				<Pagination
 					view={ view }