Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DataViews: remove the AnyItem type #62856

Merged
merged 1 commit into from
Jun 27, 2024
+119 −115
Merged

DataViews: remove the AnyItem type #62856

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions packages/dataviews/src/bulk-actions-toolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,24 +18,24 @@ import { useRegistry } from '@wordpress/data';
* Internal dependencies
*/
import { ActionWithModal } from './item-actions';
import type { Action, AnyItem } from './types';
import type { Action } from './types';
import type { ActionTriggerProps } from './item-actions';

interface ActionButtonProps< Item extends AnyItem > {
interface ActionButtonProps< Item > {
action: Action< Item >;
selectedItems: Item[];
actionInProgress: string | null;
setActionInProgress: ( actionId: string | null ) => void;
}

interface ToolbarContentProps< Item extends AnyItem > {
interface ToolbarContentProps< Item > {
selection: string[];
actionsToShow: Action< Item >[];
selectedItems: Item[];
onSelectionChange: ( selection: Item[] ) => void;
}

interface BulkActionsToolbarProps< Item extends AnyItem > {
interface BulkActionsToolbarProps< Item > {
data: Item[];
selection: string[];
actions: Action< Item >[];
Expand All @@ -62,7 +62,7 @@ const SNACKBAR_VARIANTS = {
},
};

function ActionTrigger< Item extends AnyItem >( {
function ActionTrigger< Item >( {
action,
onClick,
isBusy,
Expand All @@ -87,7 +87,7 @@ function ActionTrigger< Item extends AnyItem >( {

const EMPTY_ARRAY: [] = [];

function ActionButton< Item extends AnyItem >( {
function ActionButton< Item >( {
action,
selectedItems,
actionInProgress,
Expand Down Expand Up @@ -125,7 +125,7 @@ function ActionButton< Item extends AnyItem >( {
);
}

function renderToolbarContent< Item extends AnyItem >(
function renderToolbarContent< Item >(
selection: string[],
actionsToShow: Action< Item >[],
selectedItems: Item[],
Expand Down Expand Up @@ -179,7 +179,7 @@ function renderToolbarContent< Item extends AnyItem >(
);
}

function ToolbarContent< Item extends AnyItem >( {
function ToolbarContent< Item >( {
selection,
actionsToShow,
selectedItems,
Expand Down Expand Up @@ -214,7 +214,7 @@ function ToolbarContent< Item extends AnyItem >( {
return buttons.current;
}

export default function BulkActionsToolbar< Item extends AnyItem >( {
export default function BulkActionsToolbar< Item >( {
data,
selection,
actions = EMPTY_ARRAY,
Expand Down
22 changes: 11 additions & 11 deletions packages/dataviews/src/bulk-actions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { useRegistry } from '@wordpress/data';
* Internal dependencies
*/
import { unlock } from './lock-unlock';
import type { Action, ActionModal, AnyItem } from './types';
import type { Action, ActionModal } from './types';

const {
DropdownMenuV2: DropdownMenu,
Expand All @@ -23,34 +23,34 @@ const {
DropdownMenuSeparatorV2: DropdownMenuSeparator,
} = unlock( componentsPrivateApis );

interface ActionWithModalProps< Item extends AnyItem > {
interface ActionWithModalProps< Item > {
action: ActionModal< Item >;
selectedItems: Item[];
setActionWithModal: ( action?: ActionModal< Item > ) => void;
onMenuOpenChange: ( isOpen: boolean ) => void;
}

interface BulkActionsItemProps< Item extends AnyItem > {
interface BulkActionsItemProps< Item > {
action: Action< Item >;
selectedItems: Item[];
setActionWithModal: ( action?: ActionModal< Item > ) => void;
}

interface ActionsMenuGroupProps< Item extends AnyItem > {
interface ActionsMenuGroupProps< Item > {
actions: Action< Item >[];
selectedItems: Item[];
setActionWithModal: ( action?: ActionModal< Item > ) => void;
}

interface BulkActionsProps< Item extends AnyItem > {
interface BulkActionsProps< Item > {
data: Item[];
actions: Action< Item >[];
selection: string[];
onSelectionChange: ( selection: Item[] ) => void;
getItemId: ( item: Item ) => string;
}

export function useHasAPossibleBulkAction< Item extends AnyItem >(
export function useHasAPossibleBulkAction< Item >(
actions: Action< Item >[],
item: Item
) {
Expand All @@ -64,7 +64,7 @@ export function useHasAPossibleBulkAction< Item extends AnyItem >(
}, [ actions, item ] );
}

export function useSomeItemHasAPossibleBulkAction< Item extends AnyItem >(
export function useSomeItemHasAPossibleBulkAction< Item >(
actions: Action< Item >[],
data: Item[]
) {
Expand All @@ -80,7 +80,7 @@ export function useSomeItemHasAPossibleBulkAction< Item extends AnyItem >(
}, [ actions, data ] );
}

function ActionWithModal< Item extends AnyItem >( {
function ActionWithModal< Item >( {
action,
selectedItems,
setActionWithModal,
Expand Down Expand Up @@ -115,7 +115,7 @@ function ActionWithModal< Item extends AnyItem >( {
);
}

function BulkActionItem< Item extends AnyItem >( {
function BulkActionItem< Item >( {
action,
selectedItems,
setActionWithModal,
Expand Down Expand Up @@ -150,7 +150,7 @@ function BulkActionItem< Item extends AnyItem >( {
);
}

function ActionsMenuGroup< Item extends AnyItem >( {
function ActionsMenuGroup< Item >( {
actions,
selectedItems,
setActionWithModal,
Expand All @@ -172,7 +172,7 @@ function ActionsMenuGroup< Item extends AnyItem >( {
);
}

export default function BulkActions< Item extends AnyItem >( {
export default function BulkActions< Item >( {
data,
actions,
selection,
Expand Down
18 changes: 11 additions & 7 deletions packages/dataviews/src/dataviews.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,17 +21,18 @@ import { VIEW_LAYOUTS } from './layouts';
import BulkActions from './bulk-actions';
import { normalizeFields } from './normalize-fields';
import BulkActionsToolbar from './bulk-actions-toolbar';
import type { Action, AnyItem, Field, View, ViewBaseProps } from './types';
import type { Action, Field, View, ViewBaseProps } from './types';

interface DataViewsProps< Item extends AnyItem > {
type ItemWithId = { id: string };

type DataViewsProps< Item > = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not really familiar with any of this. Where is Item defined? Below in Item extends ItemWithId right? I thought an Item was an item in the data array? Those don't have a getItemId function?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess I'm not getting this part

( Item extends ItemWithId
 	? { getItemId?: ( item: Item ) => string }
 	: { getItemId: ( item: Item ) => string } )

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Item is a type parameter, it's completely generic. DataViews can work with any data type whatsoever, you can have a dataview of numbers. As long as you provide functions to extract IDs and field values from the item.

The Item extends ItemWithId part says that if the Item is an object that has an id field, the getItemId prop is optional, because we have a suitable default for it.

But if Item is not compatible with ItemWithId, then getItemId is mandatory. Because the default (item => item.id) is not going to work with such a type.

view: View;
onChangeView: ( view: View ) => void;
fields: Field< Item >[];
search?: boolean;
searchLabel?: string;
actions?: Action< Item >[];
data: Item[];
getItemId?: ( item: Item ) => string;
isLoading?: boolean;
paginationInfo: {
totalItems: number;
Expand All @@ -41,12 +42,15 @@ interface DataViewsProps< Item extends AnyItem > {
selection?: string[];
setSelection?: ( selection: string[] ) => void;
onSelectionChange?: ( items: Item[] ) => void;
}
} & ( Item extends ItemWithId
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TIL conditions wow :P

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, with this the type system is Turing complete and you can build any program with it 😄

? { getItemId?: ( item: Item ) => string }
: { getItemId: ( item: Item ) => string } );

const defaultGetItemId = ( item: ItemWithId ) => item.id;

const defaultGetItemId = ( item: AnyItem ) => item.id;
const defaultOnSelectionChange = () => {};

function useSomeItemHasAPossibleBulkAction< Item extends AnyItem >(
function useSomeItemHasAPossibleBulkAction< Item >(
actions: Action< Item >[],
data: Item[]
) {
Expand All @@ -62,7 +66,7 @@ function useSomeItemHasAPossibleBulkAction< Item extends AnyItem >(
}, [ actions, data ] );
}

export default function DataViews< Item extends AnyItem >( {
export default function DataViews< Item >( {
view,
onChangeView,
fields,
Expand Down
4 changes: 2 additions & 2 deletions packages/dataviews/src/filter-and-sort-data-view.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
OPERATOR_IS_NOT_ALL,
} from './constants';
import { normalizeFields } from './normalize-fields';
import type { Field, AnyItem, View } from './types';
import type { Field, View } from './types';

function normalizeSearchInput( input = '' ) {
return removeAccents( input.trim().toLowerCase() );
Expand All @@ -32,7 +32,7 @@ const EMPTY_ARRAY: [] = [];
*
* @return Filtered, sorted and paginated data.
*/
export function filterSortAndPaginate< Item extends AnyItem >(
export function filterSortAndPaginate< Item >(
data: Item[],
view: View,
fields: Field< Item >[]
Expand Down
6 changes: 3 additions & 3 deletions packages/dataviews/src/filters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,17 @@ import AddFilter from './add-filter';
import ResetFilters from './reset-filters';
import { sanitizeOperators } from './utils';
import { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT } from './constants';
import type { AnyItem, NormalizedField, NormalizedFilter, View } from './types';
import type { NormalizedField, NormalizedFilter, View } from './types';

interface FiltersProps< Item extends AnyItem > {
interface FiltersProps< Item > {
fields: NormalizedField< Item >[];
view: View;
onChangeView: ( view: View ) => void;
openedFilter: string | null;
setOpenedFilter: ( openedFilter: string | null ) => void;
}

function _Filters< Item extends AnyItem >( {
function _Filters< Item >( {
fields,
view,
onChangeView,
Expand Down
29 changes: 14 additions & 15 deletions packages/dataviews/src/item-actions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { useRegistry } from '@wordpress/data';
* Internal dependencies
*/
import { unlock } from './lock-unlock';
import type { Action, ActionModal as ActionModalType, AnyItem } from './types';
import type { Action, ActionModal as ActionModalType } from './types';

const {
DropdownMenuV2: DropdownMenu,
Expand All @@ -31,42 +31,41 @@ const {
kebabCase,
} = unlock( componentsPrivateApis );

export interface ActionTriggerProps< Item extends AnyItem > {
export interface ActionTriggerProps< Item > {
action: Action< Item >;
onClick: MouseEventHandler;
isBusy?: boolean;
items: Item[];
}

interface ActionModalProps< Item extends AnyItem > {
interface ActionModalProps< Item > {
action: ActionModalType< Item >;
items: Item[];
closeModal?: () => void;
}

interface ActionWithModalProps< Item extends AnyItem >
extends ActionModalProps< Item > {
interface ActionWithModalProps< Item > extends ActionModalProps< Item > {
ActionTrigger: ( props: ActionTriggerProps< Item > ) => ReactElement;
isBusy?: boolean;
}

interface ActionsDropdownMenuGroupProps< Item extends AnyItem > {
interface ActionsDropdownMenuGroupProps< Item > {
actions: Action< Item >[];
item: Item;
}

interface ItemActionsProps< Item extends AnyItem > {
interface ItemActionsProps< Item > {
item: Item;
actions: Action< Item >[];
isCompact?: boolean;
}

interface CompactItemActionsProps< Item extends AnyItem > {
interface CompactItemActionsProps< Item > {
item: Item;
actions: Action< Item >[];
}

function ButtonTrigger< Item extends AnyItem >( {
function ButtonTrigger< Item >( {
action,
onClick,
items,
Expand All @@ -84,7 +83,7 @@ function ButtonTrigger< Item extends AnyItem >( {
);
}

function DropdownMenuItemTrigger< Item extends AnyItem >( {
function DropdownMenuItemTrigger< Item >( {
action,
onClick,
items,
Expand All @@ -101,7 +100,7 @@ function DropdownMenuItemTrigger< Item extends AnyItem >( {
);
}

export function ActionModal< Item extends AnyItem >( {
export function ActionModal< Item >( {
action,
items,
closeModal,
Expand All @@ -124,7 +123,7 @@ export function ActionModal< Item extends AnyItem >( {
);
}

export function ActionWithModal< Item extends AnyItem >( {
export function ActionWithModal< Item >( {
action,
items,
ActionTrigger,
Expand Down Expand Up @@ -153,7 +152,7 @@ export function ActionWithModal< Item extends AnyItem >( {
);
}

export function ActionsDropdownMenuGroup< Item extends AnyItem >( {
export function ActionsDropdownMenuGroup< Item >( {
actions,
item,
}: ActionsDropdownMenuGroupProps< Item > ) {
Expand Down Expand Up @@ -186,7 +185,7 @@ export function ActionsDropdownMenuGroup< Item extends AnyItem >( {
);
}

export default function ItemActions< Item extends AnyItem >( {
export default function ItemActions< Item >( {
item,
actions,
isCompact,
Expand Down Expand Up @@ -247,7 +246,7 @@ export default function ItemActions< Item extends AnyItem >( {
);
}

function CompactItemActions< Item extends AnyItem >( {
function CompactItemActions< Item >( {
item,
actions,
}: CompactItemActionsProps< Item > ) {
Expand Down
8 changes: 5 additions & 3 deletions packages/dataviews/src/normalize-fields.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,21 @@
/**
* Internal dependencies
*/
import type { Field, AnyItem, NormalizedField } from './types';
import type { Field, NormalizedField, ItemRecord } from './types';

/**
* Apply default values and normalize the fields config.
*
* @param fields Fields config.
* @return Normalized fields config.
*/
export function normalizeFields< Item extends AnyItem >(
export function normalizeFields< Item >(
fields: Field< Item >[]
): NormalizedField< Item >[] {
return fields.map( ( field ) => {
const getValue = field.getValue || ( ( { item } ) => item[ field.id ] );
const getValue =
field.getValue ||
( ( { item }: { item: ItemRecord } ) => item[ field.id ] );

return {
...field,
Expand Down
Loading
Loading