Skip to content

Commit c40ecf1

Browse files
Dominik-Petrikjenny-s51
Dominik-Petrik
authored and
jenny-s51
committed
chore(table) convert to TS
chore(DashboardWrapper) convert to TS chore(Table) convert demos to TS delete superfluous dashboard components declare as ts files remove duplicate ids fix import errors, WIP build errors sync toolbar demo with main
1 parent 8c784c2 commit c40ecf1

19 files changed

+848
-754
lines changed

‎packages/react-table/src/components/Table/examples/TableStickyColumnsAndHeader.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,10 @@ export const TableStickyColumnsAndHeader: React.FunctionComponent = () => {
5353
// Index of the currently sorted column
5454
// Note: if you intend to make columns reorderable, you may instead want to use a non-numeric key
5555
// as the identifier of the sorted column. See the "Compound expandable" example.
56-
const [activeSortIndex, setActiveSortIndex] = React.useState<number | null>(null);
56+
const [activeSortIndex, setActiveSortIndex] = React.useState<number | null | undefined>(null);
5757

5858
// Sort direction of the currently sorted column
59-
const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | null>(null);
59+
const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | null | undefined>(null);
6060

6161
// Since OnSort specifies sorted columns by index, we need sortable values for our object by column index.
6262
// This example is trivial since our data objects just contain strings, but if the data was more complex
@@ -69,7 +69,7 @@ export const TableStickyColumnsAndHeader: React.FunctionComponent = () => {
6969
// Note that we perform the sort as part of the component's render logic and not in onSort.
7070
// We shouldn't store the list of data in state because we don't want to have to sync that with props.
7171
let sortedFacts = facts;
72-
if (activeSortIndex !== null) {
72+
if (activeSortIndex) {
7373
sortedFacts = facts.sort((a, b) => {
7474
const aValue = getSortableRowValues(a)[activeSortIndex];
7575
const bValue = getSortableRowValues(b)[activeSortIndex];
@@ -86,8 +86,8 @@ export const TableStickyColumnsAndHeader: React.FunctionComponent = () => {
8686

8787
const getSortParams = (columnIndex: number): ThProps['sort'] => ({
8888
sortBy: {
89-
index: activeSortIndex,
90-
direction: activeSortDirection
89+
index: activeSortIndex as number,
90+
direction: activeSortDirection as any
9191
},
9292
onSort: (_event, index, direction) => {
9393
setActiveSortIndex(index);

‎packages/react-table/src/docs/demos/Table.md renamed to ‎packages/react-table/src/demos/Table.md

Lines changed: 15 additions & 174 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ TextContent,
2525
Text,
2626
Divider } from '@patternfly/react-core';
2727
import { Table as TableDeprecated, TableHeader, TableBody } from '@patternfly/react-table/deprecated';
28-
2928
import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
3029
import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
3130
import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
@@ -49,37 +48,36 @@ import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
4948
import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
5049
import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon';
5150
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
52-
import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData';
51+
import { rows, columns } from './sampleData';
5352

5453
## Demos
5554

5655
### Bulk select
5756

58-
```js isFullscreen file="./table-demos/BulkSelect.jsx"
59-
57+
```js isFullscreen file="./examples/BulkSelect.tsx"
6058
```
6159

6260
### Expand/collapse all
6361

64-
```js isFullscreen file="./table-demos/ExpandCollapseAll.jsx"
62+
```js isFullscreen file="./examples/ExpandCollapseAll.tsx"
6563

6664
```
6765

6866
### Compact
6967

70-
```js isFullscreen file="./table-demos/Compact.jsx"
68+
```js isFullscreen file="./examples/Compact.tsx"
7169

7270
```
7371

7472
### Compound expansion
7573

76-
```js isFullscreen file="./table-demos/CompoundExpansion.jsx"
74+
```js isFullscreen file="./examples/CompoundExpansion.tsx"
7775

7876
```
7977

8078
### Column management
8179

82-
```js isFullscreen file="./table-demos/ColumnManagement.jsx"
80+
```js isFullscreen file="./examples/ColumnManagement.tsx"
8381

8482
```
8583

@@ -855,7 +853,7 @@ import {
855853
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
856854
import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
857855
import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
858-
import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData';
856+
import { rows, columns } from './sampleData';
859857

860858
class FilterTableDemo extends React.Component {
861859
constructor(props) {
@@ -1297,7 +1295,7 @@ class FilterTableDemo extends React.Component {
12971295

12981296
### Sortable - responsive
12991297

1300-
```js isFullscreen file="./table-demos/SortableResponsive.jsx"
1298+
```js isFullscreen file="./examples/SortableResponsive.tsx"
13011299

13021300
```
13031301

@@ -1420,27 +1418,27 @@ class ComplexPaginationTableDemo extends React.Component {
14201418

14211419
### Static bottom pagination on mobile
14221420

1423-
```js isFullscreen file="table-demos/StaticBottomPagination.jsx"
1421+
```ts isFullscreen file="./examples/StaticBottomPagination.tsx"
14241422

14251423
```
14261424

14271425
### Sticky header
14281426

1429-
```js isFullscreen file="./table-demos/StickyHeader.jsx"
1427+
```js isFullscreen file="./examples/StickyHeader.tsx"
14301428

14311429
```
14321430

14331431
### Sticky first column
14341432

1435-
```js isFullscreen file="./table-demos/StickyFirstColumn.jsx"
1433+
```js isFullscreen file="./examples/StickyFirstColumn.tsx"
14361434

14371435
```
14381436

14391437
### Sticky columns and header with toolbar
14401438

14411439
A toolbar may be added above a sticky table either inside or outside the `OuterScrollContainer`.
14421440

1443-
```ts isFullscreen file="../../components/Table/examples/TableStickyColumnsAndHeader.tsx"
1441+
```js isFullscreen file="../components/Table/examples/TableStickyColumnsAndHeader.tsx"
14441442

14451443
```
14461444

@@ -1450,172 +1448,15 @@ These examples demonstrate the use of an [Empty State component](/components/emp
14501448

14511449
### Empty
14521450

1453-
```js isFullscreen
1454-
import React from 'react';
1455-
import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
1456-
import {
1457-
Bullseye,
1458-
Button,
1459-
Card,
1460-
EmptyState,
1461-
EmptyStateVariant,
1462-
EmptyStateIcon,
1463-
EmptyStateBody,
1464-
EmptyStateHeader,
1465-
EmptyStateFooter,
1466-
EmptyStateActions,
1467-
PageSection
1468-
} from '@patternfly/react-core';
1469-
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
1470-
import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
1471-
1472-
export const TableEmptyState: React.FunctionComponent = () => (
1473-
<DashboardWrapper hasPageTemplateTitle>
1474-
<PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
1475-
<Card component="div">
1476-
<Table aria-label="Empty state table">
1477-
<Thead>
1478-
<Tr>
1479-
<Th>Repositories</Th>
1480-
<Th>Branches</Th>
1481-
<Th>Pull requests</Th>
1482-
<Th>Workspaces</Th>
1483-
<Th>Last commit</Th>
1484-
</Tr>
1485-
</Thead>
1486-
<Tbody>
1487-
<Tr>
1488-
<Td colSpan={8}>
1489-
<Bullseye>
1490-
<EmptyState variant={EmptyStateVariant.sm}>
1491-
<EmptyStateHeader
1492-
icon={<EmptyStateIcon icon={SearchIcon} />}
1493-
titleText="No results found"
1494-
headingLevel="h2"
1495-
/>
1496-
<EmptyStateBody>
1497-
No results match this filter criteria. Clear all filters and try again.
1498-
</EmptyStateBody>
1499-
<EmptyStateFooter>
1500-
<EmptyStateActions>
1501-
<Button variant="link">Clear all filters</Button>
1502-
</EmptyStateActions>
1503-
</EmptyStateFooter>
1504-
</EmptyState>
1505-
</Bullseye>
1506-
</Td>
1507-
</Tr>
1508-
</Tbody>
1509-
</Table>
1510-
</Card>
1511-
</PageSection>
1512-
</DashboardWrapper>
1513-
);
1451+
```js isFullscreen file="./examples/EmptyStateDefault.tsx"
15141452
```
15151453

15161454
### Loading
15171455

1518-
```js isFullscreen
1519-
import React from 'react';
1520-
import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
1521-
import {
1522-
Bullseye,
1523-
Card,
1524-
EmptyState,
1525-
EmptyStateIcon,
1526-
EmptyStateBody,
1527-
EmptyStateHeader,
1528-
PageSection,
1529-
Spinner
1530-
} from '@patternfly/react-core';
1531-
import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
1532-
1533-
export const LoadingStateDemo: React.FunctionComponent = () => (
1534-
<DashboardWrapper hasPageTemplateTitle>
1535-
<PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
1536-
<Card component="div">
1537-
<Table aria-label="Loading table demo">
1538-
<Thead>
1539-
<Tr>
1540-
<Th>Repositories</Th>
1541-
<Th>Branches</Th>
1542-
<Th>Pull requests</Th>
1543-
<Th>Workspaces</Th>
1544-
<Th>Last commit</Th>
1545-
</Tr>
1546-
</Thead>
1547-
<Tbody>
1548-
<Tr>
1549-
<Td colSpan={8}>
1550-
<Bullseye>
1551-
<EmptyState>
1552-
<EmptyStateHeader titleText="Loading" headingLevel="h2" icon={<EmptyStateIcon icon={Spinner} />} />
1553-
</EmptyState>
1554-
</Bullseye>
1555-
</Td>
1556-
</Tr>
1557-
</Tbody>
1558-
</Table>
1559-
</Card>
1560-
</PageSection>
1561-
</DashboardWrapper>
1562-
);
1456+
```js isFullscreen file="./examples/EmptyStateLoading.tsx"
15631457
```
15641458

15651459
### Error
15661460

1567-
```js isFullscreen
1568-
import React from 'react';
1569-
import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
1570-
import {
1571-
Bullseye,
1572-
Card,
1573-
EmptyState,
1574-
EmptyStateVariant,
1575-
EmptyStateIcon,
1576-
EmptyStateBody,
1577-
EmptyStateHeader,
1578-
PageSection
1579-
} from '@patternfly/react-core';
1580-
import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
1581-
import globalDangerColor200 from '@patternfly/react-tokens/dist/esm/global_danger_color_200';
1582-
import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
1583-
1584-
export const ErrorStateDemo: React.FunctionComponent = () => (
1585-
<DashboardWrapper hasPageTemplateTitle>
1586-
<PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
1587-
<Card component="div">
1588-
<Table aria-label="Loading table demo">
1589-
<Thead>
1590-
<Tr>
1591-
<Th>Repositories</Th>
1592-
<Th>Branches</Th>
1593-
<Th>Pull requests</Th>
1594-
<Th>Workspaces</Th>
1595-
<Th>Last commit</Th>
1596-
</Tr>
1597-
</Thead>
1598-
<Tbody>
1599-
<Tr>
1600-
<Td colSpan={8}>
1601-
<Bullseye>
1602-
<EmptyState variant={EmptyStateVariant.sm}>
1603-
<EmptyStateHeader
1604-
titleText="Unable to connect"
1605-
icon={<EmptyStateIcon icon={ExclamationCircleIcon} color={globalDangerColor200.value} />}
1606-
headingLevel="h2"
1607-
/>
1608-
<EmptyStateBody>
1609-
There was an error retrieving data. Check your connection and reload the page.
1610-
</EmptyStateBody>
1611-
</EmptyState>
1612-
</Bullseye>
1613-
</Td>
1614-
</Tr>
1615-
</Tbody>
1616-
</Table>
1617-
</Card>
1618-
</PageSection>
1619-
</DashboardWrapper>
1620-
);
1461+
```js isFullscreen file="./examples/EmptyStateError.tsx"
16211462
```

0 commit comments

Comments
 (0)