@wordpress/dataviews 0.2.0

package/src/view-actions.js

@@ -0,0 +1,298 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Icon,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { chevronRightSmall, check, arrowUp, arrowDown } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from './lock-unlock';
+import { VIEW_LAYOUTS, LAYOUT_TABLE } from './constants';
+
+const {
+	DropdownMenuV2: DropdownMenu,
+	DropdownMenuGroupV2: DropdownMenuGroup,
+	DropdownMenuItemV2: DropdownMenuItem,
+	DropdownSubMenuV2: DropdownSubMenu,
+	DropdownSubMenuTriggerV2: DropdownSubMenuTrigger,
+} = unlock( componentsPrivateApis );
+
+function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {
+	let _availableViews = VIEW_LAYOUTS;
+	if ( supportedLayouts ) {
+		_availableViews = _availableViews.filter( ( _view ) =>
+			supportedLayouts.includes( _view.type )
+		);
+	}
+	if ( _availableViews.length === 1 ) {
+		return null;
+	}
+	const activeView = _availableViews.find( ( v ) => view.type === v.type );
+	return (
+		<DropdownSubMenu
+			trigger={
+				<DropdownSubMenuTrigger
+					suffix={
+						<>
+							{ activeView.label }
+							<Icon icon={ chevronRightSmall } />
+						</>
+					}
+				>
+					{ __( 'Layout' ) }
+				</DropdownSubMenuTrigger>
+			}
+		>
+			{ _availableViews.map( ( availableView ) => {
+				return (
+					<DropdownMenuItem
+						key={ availableView.type }
+						role="menuitemradio"
+						aria-checked={ availableView.id === view.type }
+						prefix={
+							availableView.type === view.type && (
+								<Icon icon={ check } />
+							)
+						}
+						onSelect={ ( event ) => {
+							// We need to handle this on DropDown component probably..
+							event.preventDefault();
+							onChangeView( {
+								...view,
+								type: availableView.type,
+							} );
+						} }
+					>
+						{ availableView.label }
+					</DropdownMenuItem>
+				);
+			} ) }
+		</DropdownSubMenu>
+	);
+}
+
+const PAGE_SIZE_VALUES = [ 10, 20, 50, 100 ];
+function PageSizeMenu( { view, onChangeView } ) {
+	return (
+		<DropdownSubMenu
+			trigger={
+				<DropdownSubMenuTrigger
+					suffix={
+						<>
+							{ view.perPage }
+							<Icon icon={ chevronRightSmall } />
+						</>
+					}
+				>
+					{ /* TODO: probably label per view type. */ }
+					{ __( 'Rows per page' ) }
+				</DropdownSubMenuTrigger>
+			}
+		>
+			{ PAGE_SIZE_VALUES.map( ( size ) => {
+				return (
+					<DropdownMenuItem
+						key={ size }
+						role="menuitemradio"
+						aria-checked={ view.perPage === size }
+						prefix={
+							view.perPage === size && <Icon icon={ check } />
+						}
+						onSelect={ ( event ) => {
+							// We need to handle this on DropDown component probably..
+							event.preventDefault();
+							onChangeView( { ...view, perPage: size, page: 1 } );
+						} }
+					>
+						{ size }
+					</DropdownMenuItem>
+				);
+			} ) }
+		</DropdownSubMenu>
+	);
+}
+
+function FieldsVisibilityMenu( { view, onChangeView, fields } ) {
+	const hidableFields = fields.filter(
+		( field ) =>
+			field.enableHiding !== false && field.id !== view.layout.mediaField
+	);
+	if ( ! hidableFields?.length ) {
+		return null;
+	}
+	return (
+		<DropdownSubMenu
+			trigger={
+				<DropdownSubMenuTrigger
+					suffix={ <Icon icon={ chevronRightSmall } /> }
+				>
+					{ __( 'Fields' ) }
+				</DropdownSubMenuTrigger>
+			}
+		>
+			{ hidableFields?.map( ( field ) => {
+				return (
+					<DropdownMenuItem
+						key={ field.id }
+						role="menuitemcheckbox"
+						prefix={
+							! view.hiddenFields?.includes( field.id ) && (
+								<Icon icon={ check } />
+							)
+						}
+						onSelect={ ( event ) => {
+							event.preventDefault();
+							onChangeView( {
+								...view,
+								hiddenFields: view.hiddenFields?.includes(
+									field.id
+								)
+									? view.hiddenFields.filter(
+											( id ) => id !== field.id
+									  )
+									: [
+											...( view.hiddenFields || [] ),
+											field.id,
+									  ],
+							} );
+						} }
+					>
+						{ field.header }
+					</DropdownMenuItem>
+				);
+			} ) }
+		</DropdownSubMenu>
+	);
+}
+
+// This object is used to construct the sorting options per sortable field.
+const sortingItemsInfo = {
+	asc: { icon: arrowUp, label: __( 'Sort ascending' ) },
+	desc: { icon: arrowDown, label: __( 'Sort descending' ) },
+};
+function SortMenu( { fields, view, onChangeView } ) {
+	const sortableFields = fields.filter(
+		( field ) => field.enableSorting !== false
+	);
+	if ( ! sortableFields?.length ) {
+		return null;
+	}
+	const currentSortedField = fields.find(
+		( field ) => field.id === view.sort?.field
+	);
+	return (
+		<DropdownSubMenu
+			trigger={
+				<DropdownSubMenuTrigger
+					suffix={
+						<>
+							{ currentSortedField?.header }
+							<Icon icon={ chevronRightSmall } />
+						</>
+					}
+				>
+					{ __( 'Sort by' ) }
+				</DropdownSubMenuTrigger>
+			}
+		>
+			{ sortableFields?.map( ( field ) => {
+				const sortedDirection = view.sort?.direction;
+				return (
+					<DropdownSubMenu
+						key={ field.id }
+						trigger={
+							<DropdownSubMenuTrigger
+								suffix={ <Icon icon={ chevronRightSmall } /> }
+							>
+								{ field.header }
+							</DropdownSubMenuTrigger>
+						}
+						side="left"
+					>
+						{ Object.entries( sortingItemsInfo ).map(
+							( [ direction, info ] ) => {
+								const isActive =
+									currentSortedField &&
+									sortedDirection === direction &&
+									field.id === currentSortedField.id;
+								return (
+									<DropdownMenuItem
+										key={ direction }
+										role="menuitemradio"
+										aria-checked={ isActive }
+										prefix={ <Icon icon={ info.icon } /> }
+										suffix={
+											isActive && <Icon icon={ check } />
+										}
+										onSelect={ ( event ) => {
+											event.preventDefault();
+											onChangeView( {
+												...view,
+												sort: {
+													field: field.id,
+													direction,
+												},
+											} );
+										} }
+									>
+										{ info.label }
+									</DropdownMenuItem>
+								);
+							}
+						) }
+					</DropdownSubMenu>
+				);
+			} ) }
+		</DropdownSubMenu>
+	);
+}
+
+export default function ViewActions( {
+	fields,
+	view,
+	onChangeView,
+	supportedLayouts,
+} ) {
+	return (
+		<DropdownMenu
+			trigger={
+				<Button
+					variant="tertiary"
+					size="compact"
+					icon={
+						VIEW_LAYOUTS.find( ( v ) => v.type === view.type )
+							?.icon ||
+						VIEW_LAYOUTS.find( ( v ) => v.type === LAYOUT_TABLE )
+							.icon
+					}
+					label={ __( 'View options' ) }
+				/>
+			}
+		>
+			<DropdownMenuGroup>
+				<ViewTypeMenu
+					view={ view }
+					onChangeView={ onChangeView }
+					supportedLayouts={ supportedLayouts }
+				/>
+				<SortMenu
+					fields={ fields }
+					view={ view }
+					onChangeView={ onChangeView }
+				/>
+				<FieldsVisibilityMenu
+					fields={ fields }
+					view={ view }
+					onChangeView={ onChangeView }
+				/>
+				<PageSizeMenu view={ view } onChangeView={ onChangeView } />
+			</DropdownMenuGroup>
+		</DropdownMenu>
+	);
+}

package/src/view-grid.js

@@ -0,0 +1,100 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	FlexBlock,
+	__experimentalGrid as Grid,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useAsyncList } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import ItemActions from './item-actions';
+
+export default function ViewGrid( {
+	data,
+	fields,
+	view,
+	actions,
+	getItemId,
+	deferredRendering,
+} ) {
+	const mediaField = fields.find(
+		( field ) => field.id === view.layout.mediaField
+	);
+	const primaryField = fields.find(
+		( field ) => field.id === view.layout.primaryField
+	);
+	const visibleFields = fields.filter(
+		( field ) =>
+			! view.hiddenFields.includes( field.id ) &&
+			! [ view.layout.mediaField, view.layout.primaryField ].includes(
+				field.id
+			)
+	);
+	const shownData = useAsyncList( data, { step: 3 } );
+	const usedData = deferredRendering ? shownData : data;
+	return (
+		<Grid
+			gap={ 8 }
+			columns={ 2 }
+			alignment="top"
+			className="dataviews-grid-view"
+		>
+			{ usedData.map( ( item, index ) => (
+				<VStack
+					spacing={ 3 }
+					key={ getItemId?.( item ) || index }
+					className="dataviews-view-grid__card"
+				>
+					<div className="dataviews-view-grid__media">
+						{ mediaField?.render( { item } ) }
+					</div>
+					<HStack
+						className="dataviews-view-grid__primary-field"
+						justify="space-between"
+					>
+						<FlexBlock>
+							{ primaryField?.render( { item } ) }
+						</FlexBlock>
+						<ItemActions
+							item={ item }
+							actions={ actions }
+							isCompact
+						/>
+					</HStack>
+					<VStack
+						className="dataviews-view-grid__fields"
+						spacing={ 3 }
+					>
+						{ visibleFields.map( ( field ) => {
+							const renderedValue = field.render( {
+								item,
+							} );
+							if ( ! renderedValue ) {
+								return null;
+							}
+							return (
+								<VStack
+									className="dataviews-view-grid__field"
+									key={ field.id }
+									spacing={ 1 }
+								>
+									<div className="dataviews-view-grid__field-header">
+										{ field.header }
+									</div>
+									<div className="dataviews-view-grid__field-value">
+										{ field.render( { item } ) }
+									</div>
+								</VStack>
+							);
+						} ) }
+					</VStack>
+				</VStack>
+			) ) }
+		</Grid>
+	);
+}

package/src/view-list.js

@@ -0,0 +1,99 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useAsyncList } from '@wordpress/compose';
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { ENTER, SPACE } from '@wordpress/keycodes';
+
+export default function ViewList( {
+	view,
+	fields,
+	data,
+	getItemId,
+	onSelectionChange,
+	selection,
+	deferredRendering,
+} ) {
+	const shownData = useAsyncList( data, { step: 3 } );
+	const usedData = deferredRendering ? shownData : data;
+	const mediaField = fields.find(
+		( field ) => field.id === view.layout.mediaField
+	);
+	const primaryField = fields.find(
+		( field ) => field.id === view.layout.primaryField
+	);
+	const visibleFields = fields.filter(
+		( field ) =>
+			! view.hiddenFields.includes( field.id ) &&
+			! [ view.layout.primaryField, view.layout.mediaField ].includes(
+				field.id
+			)
+	);
+
+	const onEnter = ( item ) => ( event ) => {
+		const { keyCode } = event;
+		if ( [ ENTER, SPACE ].includes( keyCode ) ) {
+			onSelectionChange( [ item ] );
+		}
+	};
+
+	return (
+		<ul className="dataviews-list-view">
+			{ usedData.map( ( item, index ) => {
+				return (
+					<li key={ getItemId?.( item ) || index }>
+						<div
+							role="button"
+							tabIndex={ 0 }
+							aria-pressed={ selection.includes( item.id ) }
+							onKeyDown={ onEnter( item ) }
+							className={ classNames(
+								'dataviews-list-view__item',
+								{
+									'dataviews-list-view__item-selected':
+										selection.includes( item.id ),
+								}
+							) }
+							onClick={ () => onSelectionChange( [ item ] ) }
+						>
+							<HStack spacing={ 3 }>
+								<div className="dataviews-list-view__media-wrapper">
+									{ mediaField?.render( { item } ) || (
+										<div className="dataviews-list-view__media-placeholder"></div>
+									) }
+								</div>
+								<HStack>
+									<VStack spacing={ 1 }>
+										{ primaryField?.render( { item } ) }
+										<div className="dataviews-list-view__fields">
+											{ visibleFields.map( ( field ) => {
+												return (
+													<span
+														key={ field.id }
+														className="dataviews-list-view__field"
+													>
+														{ field.render( {
+															item,
+														} ) }
+													</span>
+												);
+											} ) }
+										</div>
+									</VStack>
+								</HStack>
+							</HStack>
+						</div>
+					</li>
+				);
+			} ) }
+		</ul>
+	);
+}