-
-
Notifications
You must be signed in to change notification settings - Fork 932
/
register-react-data-table-component.ts
111 lines (108 loc) · 3.36 KB
/
register-react-data-table-component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import { APP_INITIALIZER } from '@angular/core';
import {
DataTableColumnId,
DataTableCustomComponentService,
DataTableLocationId,
} from '@vendure/admin-ui/core';
import { ElementType } from 'react';
import {
REACT_CUSTOM_COLUMN_COMPONENT_OPTIONS,
ReactCustomColumnComponent,
} from './components/react-custom-column.component';
/**
* @description
* Configures a {@link CustomDetailComponent} to be placed in the given location.
*
* @docsCategory react-extensions
*/
export interface ReactDataTableComponentConfig {
/**
* @description
* The location in the UI where the custom component should be placed.
*/
tableId: DataTableLocationId;
/**
* @description
* The column in the table where the custom component should be placed.
*/
columnId: DataTableColumnId;
/**
* @description
* The component to render in the table cell. This component will receive the `rowItem` prop
* which is the data object for the row, e.g. the `Product` object if used in the `product-list` table.
*/
component: ElementType;
/**
* @description
* Optional props to pass to the React component.
*/
props?: Record<string, any>;
}
/**
* @description
* The props that will be passed to the React component registered via {@link registerReactDataTableComponent}.
*/
export interface ReactDataTableComponentProps<T = any> {
rowItem: T;
[prop: string]: any;
}
/**
* @description
* Registers a React component to be rendered in a data table in the given location.
* The component will receive the `rowItem` prop which is the data object for the row,
* e.g. the `Product` object if used in the `product-list` table.
*
* @example
* ```ts title="components/SlugWithLink.tsx"
* import { ReactDataTableComponentProps } from '\@vendure/admin-ui/react';
* import React from 'react';
*
* export function SlugWithLink({ rowItem }: ReactDataTableComponentProps<{ slug: string }>) {
* return (
* <a href={`https://example.com/products/${rowItem.slug}`} target="_blank">
* {rowItem.slug}
* </a>
* );
* }
* ```
*
* ```ts title="providers.ts"
* import { registerReactDataTableComponent } from '\@vendure/admin-ui/react';
* import { SlugWithLink } from './components/SlugWithLink';
*
* export default [
* registerReactDataTableComponent({
* component: SlugWithLink,
* tableId: 'product-list',
* columnId: 'slug',
* props: {
* foo: 'bar',
* },
* }),
* ];
* ```
*
* @docsCategory react-extensions
*/
export function registerReactDataTableComponent(config: ReactDataTableComponentConfig) {
return {
provide: APP_INITIALIZER,
multi: true,
useFactory: (dataTableCustomComponentService: DataTableCustomComponentService) => () => {
dataTableCustomComponentService.registerCustomComponent({
...config,
component: ReactCustomColumnComponent,
providers: [
{
provide: REACT_CUSTOM_COLUMN_COMPONENT_OPTIONS,
useValue: {
component: config.component,
props: config.props,
},
},
],
});
},
deps: [DataTableCustomComponentService],
};
}