|
1 |
| -import { Badge, Label, Table, TableCell, TableColumn, TableRow, Text, ThemeProvider } from '@ui5/webcomponents-react'; |
| 1 | +import { Badge, Label, Table, TableCell, TableColumn, TableRow, Text } from '@ui5/webcomponents-react'; |
2 | 2 | import React from 'react';
|
3 | 3 |
|
4 | 4 | const columns = [
|
5 |
| - <TableColumn key="name" header={<Label>Prop</Label>} width="150px" />, |
6 |
| - <TableColumn key="propType" header={<Label>PropType</Label>} width="150px" />, |
7 |
| - <TableColumn key="required" header={<Label>Required</Label>} width="80px" />, |
8 |
| - <TableColumn key="defaultValue" header={<Label>Default Value</Label>} width="100px" />, |
9 |
| - <TableColumn key="desc" header={<Label>Description</Label>} /> |
| 5 | + <TableColumn key="name" width="150px"> |
| 6 | + <Label>Prop</Label> |
| 7 | + </TableColumn>, |
| 8 | + <TableColumn key="propType" width="150px"> |
| 9 | + <Label>PropType</Label> |
| 10 | + </TableColumn>, |
| 11 | + <TableColumn key="required" width="80px"> |
| 12 | + <Label>Required</Label> |
| 13 | + </TableColumn>, |
| 14 | + <TableColumn key="defaultValue" width="100px"> |
| 15 | + <Label>Default Value</Label> |
| 16 | + </TableColumn>, |
| 17 | + <TableColumn key="desc"> |
| 18 | + <Label>Description</Label> |
| 19 | + </TableColumn> |
10 | 20 | ];
|
11 | 21 |
|
12 | 22 | export const TableComponent = (props) => {
|
13 | 23 | const info = props.type.__docgenInfo;
|
14 |
| - if (!info || !info.props) { |
15 |
| - return ( |
16 |
| - <ThemeProvider> |
17 |
| - <Text>Unfortunately, there are no prop types available for this component.</Text> |
18 |
| - </ThemeProvider> |
19 |
| - ); |
20 |
| - } |
| 24 | + |
| 25 | + const componentProps = info && info.props; |
| 26 | + |
21 | 27 | return (
|
22 |
| - <ThemeProvider> |
23 |
| - <Table |
24 |
| - columns={columns} |
25 |
| - rows={Object.values(info.props).map((componentInfo: any) => ( |
26 |
| - <TableRow key={componentInfo.name}> |
27 |
| - <TableCell> |
28 |
| - <Text>{componentInfo.name}</Text> |
29 |
| - </TableCell> |
30 |
| - <TableCell> |
31 |
| - <Text>{componentInfo.type.name}</Text> |
32 |
| - </TableCell> |
33 |
| - <TableCell>{componentInfo.required && <Badge colorScheme="8">Yes</Badge>}</TableCell> |
34 |
| - <TableCell>{componentInfo.defaultValue && <Text>{componentInfo.defaultValue.value}</Text>}</TableCell> |
35 |
| - <TableCell> |
36 |
| - <Text>{componentInfo.description}</Text> |
37 |
| - </TableCell> |
38 |
| - </TableRow> |
39 |
| - ))} |
40 |
| - /> |
41 |
| - </ThemeProvider> |
| 28 | + <Table |
| 29 | + showNoData={componentProps === undefined} |
| 30 | + noDataText="Unfortunately, there are no prop types available for this component" |
| 31 | + columns={columns} |
| 32 | + > |
| 33 | + {Object.values(componentProps || {}).map((componentInfo: any) => ( |
| 34 | + <TableRow key={componentInfo.name}> |
| 35 | + <TableCell> |
| 36 | + <Text>{componentInfo.name}</Text> |
| 37 | + </TableCell> |
| 38 | + <TableCell> |
| 39 | + <Text>{componentInfo.type.name}</Text> |
| 40 | + </TableCell> |
| 41 | + <TableCell>{componentInfo.required && <Badge colorScheme="8">Yes</Badge>}</TableCell> |
| 42 | + <TableCell>{componentInfo.defaultValue && <Text>{componentInfo.defaultValue.value}</Text>}</TableCell> |
| 43 | + <TableCell> |
| 44 | + <Text>{componentInfo.description}</Text> |
| 45 | + </TableCell> |
| 46 | + </TableRow> |
| 47 | + ))} |
| 48 | + </Table> |
42 | 49 | );
|
43 | 50 | };
|
0 commit comments