From cfcd6d4505d5236e719620efe26ff9ae8324e9b6 Mon Sep 17 00:00:00 2001 From: barakamwakisha Date: Tue, 31 Oct 2023 23:49:02 +0300 Subject: [PATCH 1/2] refactor(admin-ui): Use generics in ReactDataTableComponentProps --- .../custom-data-table-components/index.md | 4 ++-- .../register-react-data-table-component.md | 2 +- .../react/src/register-react-data-table-component.ts | 12 ++++++------ .../experimental-ui/components/SlugWithLink.tsx | 4 ++-- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/docs/docs/guides/extending-the-admin-ui/custom-data-table-components/index.md b/docs/docs/guides/extending-the-admin-ui/custom-data-table-components/index.md index d38141c1c0..7902cb3b36 100644 --- a/docs/docs/guides/extending-the-admin-ui/custom-data-table-components/index.md +++ b/docs/docs/guides/extending-the-admin-ui/custom-data-table-components/index.md @@ -46,8 +46,8 @@ React components will receive the value of the current column as the `rowItem` p import { ReactDataTableComponentProps } from '@vendure/admin-ui/react'; import React from 'react'; -export function SlugLink({ rowItem }: ReactDataTableComponentProps) { - const slug: string = rowItem.slug; +export function SlugLink({ rowItem }: ReactDataTableComponentProps<{ slug: string }>) { + const slug = rowItem.slug; return ( {slug} diff --git a/docs/docs/reference/admin-ui-api/react-extensions/register-react-data-table-component.md b/docs/docs/reference/admin-ui-api/react-extensions/register-react-data-table-component.md index 21874fb6b8..a948d9de99 100644 --- a/docs/docs/reference/admin-ui-api/react-extensions/register-react-data-table-component.md +++ b/docs/docs/reference/admin-ui-api/react-extensions/register-react-data-table-component.md @@ -23,7 +23,7 @@ e.g. the `Product` object if used in the `product-list` table. import { ReactDataTableComponentProps } from '@vendure/admin-ui/react'; import React from 'react'; -export function SlugWithLink({ rowItem }: ReactDataTableComponentProps) { +export function SlugWithLink({ rowItem }: ReactDataTableComponentProps<{ slug: string }>) { return ( {rowItem.slug} diff --git a/packages/admin-ui/src/lib/react/src/register-react-data-table-component.ts b/packages/admin-ui/src/lib/react/src/register-react-data-table-component.ts index 740f2bf29e..517775cfd8 100644 --- a/packages/admin-ui/src/lib/react/src/register-react-data-table-component.ts +++ b/packages/admin-ui/src/lib/react/src/register-react-data-table-component.ts @@ -37,16 +37,16 @@ export interface ReactDataTableComponentConfig { * @description * Optional props to pass to the React component. */ - props?: Record; + props?: Record; } /** * @description * The props that will be passed to the React component registered via {@link registerReactDataTableComponent}. */ -export interface ReactDataTableComponentProps { - rowItem: any; - [prop: string]: any; +export interface ReactDataTableComponentProps { + rowItem: T; + [prop: string]: unknown; } /** @@ -60,7 +60,7 @@ export interface ReactDataTableComponentProps { * import { ReactDataTableComponentProps } from '\@vendure/admin-ui/react'; * import React from 'react'; * - * export function SlugWithLink({ rowItem }: ReactDataTableComponentProps) { + * export function SlugWithLink({ rowItem }: ReactDataTableComponentProps<{ slug: string }>) { * return ( * * {rowItem.slug} @@ -79,7 +79,7 @@ export interface ReactDataTableComponentProps { * tableId: 'product-list', * columnId: 'slug', * props: { - * foo: 'bar', + * foo: 'bar', * }, * }), * ]; diff --git a/packages/dev-server/test-plugins/experimental-ui/components/SlugWithLink.tsx b/packages/dev-server/test-plugins/experimental-ui/components/SlugWithLink.tsx index 8b74afb0ef..a9192a0cac 100644 --- a/packages/dev-server/test-plugins/experimental-ui/components/SlugWithLink.tsx +++ b/packages/dev-server/test-plugins/experimental-ui/components/SlugWithLink.tsx @@ -1,8 +1,8 @@ import { ReactDataTableComponentProps } from '@vendure/admin-ui/react'; import React from 'react'; -export function SlugWithLink({ rowItem }: ReactDataTableComponentProps) { - const slug: string = rowItem.slug; +export function SlugWithLink({ rowItem }: ReactDataTableComponentProps<{ slug: string }>) { + const slug = rowItem.slug; return ( {slug} From 54cf336a64b016bcd2c8b5654526e70129bb00bb Mon Sep 17 00:00:00 2001 From: barakamwakisha Date: Thu, 2 Nov 2023 23:57:51 +0300 Subject: [PATCH 2/2] refactor(admin-ui): Use any as default generic value in ReactDataTableComponentProps --- .../lib/react/src/register-react-data-table-component.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/admin-ui/src/lib/react/src/register-react-data-table-component.ts b/packages/admin-ui/src/lib/react/src/register-react-data-table-component.ts index 517775cfd8..9db002a241 100644 --- a/packages/admin-ui/src/lib/react/src/register-react-data-table-component.ts +++ b/packages/admin-ui/src/lib/react/src/register-react-data-table-component.ts @@ -37,16 +37,16 @@ export interface ReactDataTableComponentConfig { * @description * Optional props to pass to the React component. */ - props?: Record; + props?: Record; } /** * @description * The props that will be passed to the React component registered via {@link registerReactDataTableComponent}. */ -export interface ReactDataTableComponentProps { +export interface ReactDataTableComponentProps { rowItem: T; - [prop: string]: unknown; + [prop: string]: any; } /**