@wordpress/dataviews 4.1.0 → 4.3.0

package/src/components/dataviews/stories/fixtures.js

@@ -1,222 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { trash } from '@wordpress/icons';
-import {
-	Button,
-	__experimentalText as Text,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { LAYOUT_TABLE } from '../../../constants';
-
-export const data = [
-	{
-		id: 1,
-		title: 'Apollo',
-		description: 'Apollo description',
-		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
-		type: 'Not a planet',
-		categories: [ 'Space', 'NASA' ],
-		satellites: 0,
-	},
-	{
-		id: 2,
-		title: 'Space',
-		description: 'Space description',
-		image: 'https://live.staticflickr.com/5678/21911065441_92e2d44708_b.jpg',
-		type: 'Not a planet',
-		categories: [ 'Space' ],
-		satellites: 0,
-	},
-	{
-		id: 3,
-		title: 'NASA',
-		description: 'NASA photo',
-		image: 'https://live.staticflickr.com/742/21712365770_8f70a2c91e_b.jpg',
-		type: 'Not a planet',
-		categories: [ 'NASA' ],
-		satellites: 0,
-	},
-	{
-		id: 4,
-		title: 'Neptune',
-		description: 'Neptune description',
-		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
-		type: 'Ice giant',
-		categories: [ 'Space', 'Planet', 'Solar system' ],
-		satellites: 14,
-	},
-	{
-		id: 5,
-		title: 'Mercury',
-		description: 'Mercury description',
-		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
-		type: 'Terrestrial',
-		categories: [ 'Space', 'Planet', 'Solar system' ],
-		satellites: 0,
-	},
-	{
-		id: 6,
-		title: 'Venus',
-		description: 'La planète Vénus',
-		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
-		type: 'Terrestrial',
-		categories: [ 'Space', 'Planet', 'Solar system' ],
-		satellites: 0,
-	},
-	{
-		id: 7,
-		title: 'Earth',
-		description: 'Earth description',
-		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
-		type: 'Terrestrial',
-		categories: [ 'Space', 'Planet', 'Solar system' ],
-		satellites: 1,
-	},
-	{
-		id: 8,
-		title: 'Mars',
-		description: 'Mars description',
-		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
-		type: 'Terrestrial',
-		categories: [ 'Space', 'Planet', 'Solar system' ],
-		satellites: 2,
-	},
-	{
-		id: 9,
-		title: 'Jupiter',
-		description: 'Jupiter description',
-		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
-		type: 'Gas giant',
-		categories: [ 'Space', 'Planet', 'Solar system' ],
-		satellites: 95,
-	},
-	{
-		id: 10,
-		title: 'Saturn',
-		description: 'Saturn description',
-		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
-		type: 'Gas giant',
-		categories: [ 'Space', 'Planet', 'Solar system' ],
-		satellites: 146,
-	},
-	{
-		id: 11,
-		title: 'Uranus',
-		description: 'Uranus description',
-		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
-		type: 'Ice giant',
-		categories: [ 'Space', 'Ice giant', 'Solar system' ],
-		satellites: 28,
-	},
-];
-
-export const DEFAULT_VIEW = {
-	type: LAYOUT_TABLE,
-	search: '',
-	page: 1,
-	perPage: 10,
-	fields: [ 'title', 'description', 'categories' ],
-	layout: {},
-	filters: [],
-};
-
-export const actions = [
-	{
-		id: 'delete',
-		label: 'Delete item',
-		isPrimary: true,
-		icon: trash,
-		hideModalHeader: true,
-		RenderModal: ( { item, closeModal } ) => {
-			return (
-				<VStack spacing="5">
-					<Text>
-						{ `Are you sure you want to delete "${ item.title }"?` }
-					</Text>
-					<HStack justify="right">
-						<Button variant="tertiary" onClick={ closeModal }>
-							Cancel
-						</Button>
-						<Button variant="primary" onClick={ closeModal }>
-							Delete
-						</Button>
-					</HStack>
-				</VStack>
-			);
-		},
-	},
-	{
-		id: 'secondary',
-		label: 'Secondary action',
-		callback() {},
-	},
-];
-
-export const fields = [
-	{
-		label: 'Image',
-		id: 'image',
-		render: ( { item } ) => {
-			return (
-				<img src={ item.image } alt="" style={ { width: '100%' } } />
-			);
-		},
-		enableSorting: false,
-	},
-	{
-		label: 'Title',
-		id: 'title',
-		enableHiding: false,
-		enableGlobalSearch: true,
-	},
-	{
-		label: 'Type',
-		id: 'type',
-		enableHiding: false,
-		elements: [
-			{ value: 'Not a planet', label: 'Not a planet' },
-			{ value: 'Ice giant', label: 'Ice giant' },
-			{ value: 'Terrestrial', label: 'Terrestrial' },
-			{ value: 'Gas giant', label: 'Gas giant' },
-		],
-	},
-	{
-		label: 'Satellites',
-		id: 'satellites',
-		type: 'integer',
-		enableSorting: true,
-	},
-	{
-		label: 'Description',
-		id: 'description',
-		enableSorting: false,
-		enableGlobalSearch: true,
-	},
-	{
-		label: 'Categories',
-		id: 'categories',
-		elements: [
-			{ value: 'Space', label: 'Space' },
-			{ value: 'NASA', label: 'NASA' },
-			{ value: 'Planet', label: 'Planet' },
-			{ value: 'Solar system', label: 'Solar system' },
-			{ value: 'Ice giant', label: 'Ice giant' },
-		],
-		filterBy: {
-			operators: [ 'isAny', 'isNone', 'isAll', 'isNotAll' ],
-		},
-		getValue: ( { item } ) => {
-			return item.categories;
-		},
-		render: ( { item } ) => {
-			return item.categories.join( ',' );
-		},
-		enableSorting: false,
-	},
-];

package/src/components/dataviews/stories/index.story.js

@@ -1,65 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState, useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import DataViews from '../index';
-import { DEFAULT_VIEW, actions, data, fields } from './fixtures';
-import { LAYOUT_GRID, LAYOUT_TABLE } from '../../../constants';
-import { filterSortAndPaginate } from '../../../filter-and-sort-data-view';
-
-const meta = {
-	title: 'DataViews/DataViews',
-	component: DataViews,
-};
-export default meta;
-
-export const Default = ( props ) => {
-	const [ view, setView ] = useState( DEFAULT_VIEW );
-	const { data: shownData, paginationInfo } = useMemo( () => {
-		return filterSortAndPaginate( data, view, fields );
-	}, [ view ] );
-	return (
-		<DataViews
-			{ ...props }
-			paginationInfo={ paginationInfo }
-			data={ shownData }
-			view={ view }
-			fields={ fields }
-			onChangeView={ setView }
-		/>
-	);
-};
-Default.args = {
-	actions,
-	defaultLayouts: {
-		[ LAYOUT_TABLE ]: {
-			layout: {
-				primaryField: 'title',
-				styles: {
-					image: {
-						width: 50,
-					},
-					title: {
-						maxWidth: 400,
-					},
-					type: {
-						maxWidth: 400,
-					},
-					description: {
-						maxWidth: 200,
-					},
-				},
-			},
-		},
-		[ LAYOUT_GRID ]: {
-			layout: {
-				mediaField: 'image',
-				primaryField: 'title',
-			},
-		},
-	},
-};

package/src/components/dataviews-bulk-actions-toolbar/index.tsx

@@ -1,288 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	ToolbarButton,
-	Toolbar,
-	ToolbarGroup,
-	__unstableMotion as motion,
-	__unstableAnimatePresence as AnimatePresence,
-} from '@wordpress/components';
-import { useMemo, useState, useRef, useContext } from '@wordpress/element';
-import { _n, sprintf, __ } from '@wordpress/i18n';
-import { closeSmall } from '@wordpress/icons';
-import { useReducedMotion } from '@wordpress/compose';
-import { useRegistry } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { useSomeItemHasAPossibleBulkAction } from '../dataviews-bulk-actions';
-import DataViewsContext from '../dataviews-context';
-import { ActionWithModal } from '../dataviews-item-actions';
-import { LAYOUT_GRID, LAYOUT_TABLE } from '../../constants';
-import type { Action } from '../../types';
-import type { ActionTriggerProps } from '../dataviews-item-actions';
-import type { SetSelection } from '../../private-types';
-
-interface ActionButtonProps< Item > {
-	action: Action< Item >;
-	selectedItems: Item[];
-	actionInProgress: string | null;
-	setActionInProgress: ( actionId: string | null ) => void;
-}
-
-interface ToolbarContentProps< Item > {
-	selection: string[];
-	actionsToShow: Action< Item >[];
-	selectedItems: Item[];
-	onChangeSelection: SetSelection;
-}
-
-const SNACKBAR_VARIANTS = {
-	init: {
-		bottom: -48,
-	},
-	open: {
-		bottom: 24,
-		transition: {
-			bottom: { type: 'tween', duration: 0.2, ease: [ 0, 0, 0.2, 1 ] },
-		},
-	},
-	exit: {
-		opacity: 0,
-		bottom: 24,
-		transition: {
-			opacity: { type: 'tween', duration: 0.2, ease: [ 0, 0, 0.2, 1 ] },
-		},
-	},
-};
-
-function ActionTrigger< Item >( {
-	action,
-	onClick,
-	isBusy,
-	items,
-}: ActionTriggerProps< Item > ) {
-	const label =
-		typeof action.label === 'string' ? action.label : action.label( items );
-	return (
-		<ToolbarButton
-			disabled={ isBusy }
-			label={ label }
-			icon={ action.icon }
-			isDestructive={ action.isDestructive }
-			size="compact"
-			onClick={ onClick }
-			isBusy={ isBusy }
-			tooltipPosition="top"
-		/>
-	);
-}
-
-const EMPTY_ARRAY: [] = [];
-
-function ActionButton< Item >( {
-	action,
-	selectedItems,
-	actionInProgress,
-	setActionInProgress,
-}: ActionButtonProps< Item > ) {
-	const registry = useRegistry();
-	const selectedEligibleItems = useMemo( () => {
-		return selectedItems.filter( ( item ) => {
-			return ! action.isEligible || action.isEligible( item );
-		} );
-	}, [ action, selectedItems ] );
-	if ( 'RenderModal' in action ) {
-		return (
-			<ActionWithModal
-				key={ action.id }
-				action={ action }
-				items={ selectedEligibleItems }
-				ActionTrigger={ ActionTrigger }
-			/>
-		);
-	}
-	return (
-		<ActionTrigger
-			key={ action.id }
-			action={ action }
-			onClick={ () => {
-				setActionInProgress( action.id );
-				action.callback( selectedItems, {
-					registry,
-				} );
-			} }
-			items={ selectedEligibleItems }
-			isBusy={ actionInProgress === action.id }
-		/>
-	);
-}
-
-function renderToolbarContent< Item >(
-	selection: string[],
-	actionsToShow: Action< Item >[],
-	selectedItems: Item[],
-	actionInProgress: string | null,
-	setActionInProgress: ( actionId: string | null ) => void,
-	onChangeSelection: SetSelection
-) {
-	return (
-		<>
-			<ToolbarGroup>
-				<div className="dataviews-bulk-actions-toolbar__selection-count">
-					{ selection.length === 1
-						? __( '1 item selected' )
-						: sprintf(
-								// translators: %s: Total number of selected items.
-								_n(
-									'%s item selected',
-									'%s items selected',
-									selection.length
-								),
-								selection.length
-						  ) }
-				</div>
-			</ToolbarGroup>
-			<ToolbarGroup>
-				{ actionsToShow.map( ( action ) => {
-					return (
-						<ActionButton
-							key={ action.id }
-							action={ action }
-							selectedItems={ selectedItems }
-							actionInProgress={ actionInProgress }
-							setActionInProgress={ setActionInProgress }
-						/>
-					);
-				} ) }
-			</ToolbarGroup>
-			<ToolbarGroup>
-				<ToolbarButton
-					icon={ closeSmall }
-					showTooltip
-					tooltipPosition="top"
-					label={ __( 'Cancel' ) }
-					disabled={ !! actionInProgress }
-					onClick={ () => {
-						onChangeSelection( EMPTY_ARRAY );
-					} }
-				/>
-			</ToolbarGroup>
-		</>
-	);
-}
-
-function ToolbarContent< Item >( {
-	selection,
-	actionsToShow,
-	selectedItems,
-	onChangeSelection,
-}: ToolbarContentProps< Item > ) {
-	const [ actionInProgress, setActionInProgress ] = useState< string | null >(
-		null
-	);
-	const buttons = useRef< JSX.Element | null >( null );
-	if ( ! actionInProgress ) {
-		if ( buttons.current ) {
-			buttons.current = null;
-		}
-		return renderToolbarContent(
-			selection,
-			actionsToShow,
-			selectedItems,
-			actionInProgress,
-			setActionInProgress,
-			onChangeSelection
-		);
-	} else if ( ! buttons.current ) {
-		buttons.current = renderToolbarContent(
-			selection,
-			actionsToShow,
-			selectedItems,
-			actionInProgress,
-			setActionInProgress,
-			onChangeSelection
-		);
-	}
-	return buttons.current;
-}
-
-function _BulkActionsToolbar() {
-	const {
-		data,
-		selection,
-		actions = EMPTY_ARRAY,
-		onChangeSelection,
-		getItemId,
-	} = useContext( DataViewsContext );
-	const isReducedMotion = useReducedMotion();
-	const selectedItems = useMemo( () => {
-		return data.filter( ( item ) =>
-			selection.includes( getItemId( item ) )
-		);
-	}, [ selection, data, getItemId ] );
-
-	const actionsToShow = useMemo(
-		() =>
-			actions.filter( ( action ) => {
-				return (
-					action.supportsBulk &&
-					action.icon &&
-					selectedItems.some(
-						( item ) =>
-							! action.isEligible || action.isEligible( item )
-					)
-				);
-			} ),
-		[ actions, selectedItems ]
-	);
-
-	if (
-		( selection && selection.length === 0 ) ||
-		actionsToShow.length === 0
-	) {
-		return null;
-	}
-
-	return (
-		<AnimatePresence>
-			<motion.div
-				layout={ ! isReducedMotion } // See https://www.framer.com/docs/animation/#layout-animations
-				initial="init"
-				animate="open"
-				exit="exit"
-				variants={ isReducedMotion ? undefined : SNACKBAR_VARIANTS }
-				className="dataviews-bulk-actions-toolbar"
-			>
-				<Toolbar label={ __( 'Bulk actions' ) }>
-					<div className="dataviews-bulk-actions-toolbar__wrapper">
-						<ToolbarContent
-							selection={ selection }
-							actionsToShow={ actionsToShow }
-							selectedItems={ selectedItems }
-							onChangeSelection={ onChangeSelection }
-						/>
-					</div>
-				</Toolbar>
-			</motion.div>
-		</AnimatePresence>
-	);
-}
-
-export default function BulkActionsToolbar() {
-	const { data, actions = [], view } = useContext( DataViewsContext );
-	const hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(
-		actions,
-		data
-	);
-	if (
-		! [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) ||
-		! hasPossibleBulkAction
-	) {
-		return null;
-	}
-
-	return <_BulkActionsToolbar />;
-}

package/src/components/dataviews-bulk-actions-toolbar/style.scss

@@ -1,45 +0,0 @@
-.dataviews-bulk-actions-toolbar {
-	position: sticky;
-	display: flex;
-	flex-direction: column;
-	align-content: center;
-	flex-wrap: wrap;
-	width: fit-content;
-	margin-left: auto;
-	margin-right: auto;
-	bottom: $grid-unit-30;
-	z-index: z-index(".dataviews-bulk-actions-toolbar");
-
-	.components-accessible-toolbar {
-		border-color: $gray-300;
-		box-shadow: $shadow-popover;
-
-		.components-toolbar-group {
-			border-color: $gray-200;
-
-			&:last-child {
-				border: 0;
-			}
-		}
-	}
-
-	.dataviews-bulk-actions-toolbar__selection-count {
-		display: flex;
-		align-items: center;
-		margin: 0 $grid-unit-10 0 $grid-unit-10;
-	}
-}
-
-.dataviews-bulk-actions-toolbar__wrapper {
-	display: flex;
-	flex-grow: 1;
-	width: 100%;
-
-	.components-toolbar-group {
-		align-items: center;
-	}
-
-	.components-button.is-busy {
-		max-height: $button-size;
-	}
-}