diff --git a/packages/dataviews/src/lock-unlock.js b/packages/dataviews/src/lock-unlock.ts similarity index 100% rename from packages/dataviews/src/lock-unlock.js rename to packages/dataviews/src/lock-unlock.ts diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts index ef6b0773a2138c..8244992a1f5f87 100644 --- a/packages/dataviews/src/types.ts +++ b/packages/dataviews/src/types.ts @@ -3,8 +3,6 @@ */ import type { ReactNode } from 'react'; -type Item = Record< string, any >; - interface Option { value: any; label: string; @@ -17,6 +15,8 @@ interface filterByConfig { type Operator = 'is' | 'isNot' | 'isAny' | 'isNone' | 'isAll' | 'isNotAll'; +export type Item = Record< string, any >; + export interface Field { /** * The unique identifier of the field. @@ -101,7 +101,7 @@ export interface Filter { value: any; } -export interface View { +interface ViewBase { /** * The layout of the view. */ @@ -141,4 +141,26 @@ export interface View { * The number of items per page */ perPage?: number; + + /** + * The hidden fields. + */ + hiddenFields: string[]; +} +export interface ViewList extends ViewBase { + type: 'list'; + + layout: { + /** + * The field to use as the primary field. + */ + primaryField: string; + + /** + * The field to use as the media field. + */ + mediaField: string; + }; } + +export type View = ViewList | ViewBase; diff --git a/packages/dataviews/src/view-list.js b/packages/dataviews/src/view-list.tsx similarity index 82% rename from packages/dataviews/src/view-list.js rename to packages/dataviews/src/view-list.tsx index 14799a9b941675..d88f11de59eedd 100644 --- a/packages/dataviews/src/view-list.js +++ b/packages/dataviews/src/view-list.tsx @@ -21,6 +21,33 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import { unlock } from './lock-unlock'; +import type { + Data, + Item, + NormalizedField, + ViewList as ViewListType, +} from './types'; + +interface ListViewProps { + view: ViewListType; + fields: NormalizedField[]; + data: Data; + isLoading: boolean; + getItemId: ( item: Item ) => string; + onSelectionChange: ( selection: Item[] ) => void; + selection: Item[]; + id: string; +} + +interface ListViewItemProps { + id: string; + item: Item; + isSelected: boolean; + onSelect: ( item: Item ) => void; + mediaField?: NormalizedField; + primaryField?: NormalizedField; + visibleFields: NormalizedField[]; +} const { useCompositeStoreV2: useCompositeStore, @@ -37,8 +64,8 @@ function ListItem( { mediaField, primaryField, visibleFields, -} ) { - const itemRef = useRef( null ); +}: ListViewItemProps ) { + const itemRef = useRef< HTMLElement >( null ); const labelId = `${ id }-label`; const descriptionId = `${ id }-description`; @@ -120,16 +147,17 @@ function ListItem( { ); } -export default function ViewList( { - view, - fields, - data, - isLoading, - getItemId, - onSelectionChange, - selection, - id: preferredId, -} ) { +export default function ViewList( props: ListViewProps ) { + const { + view, + fields, + data, + isLoading, + getItemId, + onSelectionChange, + selection, + id: preferredId, + } = props; const baseId = useInstanceId( ViewList, 'view-list', preferredId ); const selectedItem = data?.findLast( ( item ) => selection.includes( item.id ) @@ -150,12 +178,12 @@ export default function ViewList( { ); const onSelect = useCallback( - ( item ) => onSelectionChange( [ item ] ), + ( item: Item ) => onSelectionChange( [ item ] ), [ onSelectionChange ] ); const getItemDomId = useCallback( - ( item ) => ( item ? `${ baseId }-${ getItemId( item ) }` : undefined ), + ( item?: Item ) => ( item ? `${ baseId }-${ getItemId( item ) }` : '' ), [ baseId, getItemId ] ); diff --git a/packages/dataviews/tsconfig.json b/packages/dataviews/tsconfig.json index 119035ffe7be37..60122ee152c80e 100644 --- a/packages/dataviews/tsconfig.json +++ b/packages/dataviews/tsconfig.json @@ -3,7 +3,9 @@ "extends": "../../tsconfig.base.json", "compilerOptions": { "rootDir": "src", - "declarationDir": "build-types" + "declarationDir": "build-types", + "skipLibCheck": true, + "checkJs": false }, "references": [ { "path": "../a11y" }, @@ -16,5 +18,5 @@ { "path": "../primitives" }, { "path": "../private-apis" } ], - "include": [ "src/**/*.ts", "src/**/*.tsx" ] + "include": [ "src" ] }