Skip to content

Commit

Permalink
chore(table) convert to TS
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@Dominik-Petrik @jenny-s51
Dominik-Petrik authored and jenny-s51 committed Oct 20, 2023
1 parent c1f452f commit e30e413
Show file tree
Hide file tree
Showing 19 changed files with 848 additions and 754 deletions.
10 changes: 5 additions & 5 deletions packages/react-table/src/components/Table/examples/TableStickyColumnsAndHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,10 @@ export const TableStickyColumnsAndHeader: React.FunctionComponent = () => {
// Index of the currently sorted column
// Note: if you intend to make columns reorderable, you may instead want to use a non-numeric key
// as the identifier of the sorted column. See the "Compound expandable" example.
const [activeSortIndex, setActiveSortIndex] = React.useState<number | null>(null);
const [activeSortIndex, setActiveSortIndex] = React.useState<number | null | undefined>(null);

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

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

const getSortParams = (columnIndex: number): ThProps['sort'] => ({
sortBy: {
index: activeSortIndex,
direction: activeSortDirection
index: activeSortIndex as number,
direction: activeSortDirection as any
},
onSort: (_event, index, direction) => {
setActiveSortIndex(index);
Expand Down
189 changes: 15 additions & 174 deletions packages/react-table/src/docs/demos/Table.md → packages/react-table/src/demos/Table.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ TextContent,
Text,
Divider } from '@patternfly/react-core';
import { Table as TableDeprecated, TableHeader, TableBody } from '@patternfly/react-table/deprecated';

import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
Expand All @@ -49,37 +48,36 @@ import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData';
import { rows, columns } from './sampleData';

## Demos

### Bulk select

```js isFullscreen file="./table-demos/BulkSelect.jsx"

```js isFullscreen file="./examples/BulkSelect.tsx"
```

### Expand/collapse all

```js isFullscreen file="./table-demos/ExpandCollapseAll.jsx"
```js isFullscreen file="./examples/ExpandCollapseAll.tsx"

```

### Compact

```js isFullscreen file="./table-demos/Compact.jsx"
```js isFullscreen file="./examples/Compact.tsx"

```

### Compound expansion

```js isFullscreen file="./table-demos/CompoundExpansion.jsx"
```js isFullscreen file="./examples/CompoundExpansion.tsx"

```

### Column management

```js isFullscreen file="./table-demos/ColumnManagement.jsx"
```js isFullscreen file="./examples/ColumnManagement.tsx"

```

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

class FilterTableDemo extends React.Component {
constructor(props) {
Expand Down Expand Up @@ -1297,7 +1295,7 @@ class FilterTableDemo extends React.Component {

### Sortable - responsive

```js isFullscreen file="./table-demos/SortableResponsive.jsx"
```js isFullscreen file="./examples/SortableResponsive.tsx"

```

Expand Down Expand Up @@ -1420,27 +1418,27 @@ class ComplexPaginationTableDemo extends React.Component {

### Static bottom pagination on mobile

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

```

### Sticky header

```js isFullscreen file="./table-demos/StickyHeader.jsx"
```js isFullscreen file="./examples/StickyHeader.tsx"

```

### Sticky first column

```js isFullscreen file="./table-demos/StickyFirstColumn.jsx"
```js isFullscreen file="./examples/StickyFirstColumn.tsx"

```

### Sticky columns and header with toolbar

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

```ts isFullscreen file="../../components/Table/examples/TableStickyColumnsAndHeader.tsx"
```js isFullscreen file="../components/Table/examples/TableStickyColumnsAndHeader.tsx"

```

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

### Empty

```js isFullscreen
import React from 'react';
import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
import {
Bullseye,
Button,
Card,
EmptyState,
EmptyStateVariant,
EmptyStateIcon,
EmptyStateBody,
EmptyStateHeader,
EmptyStateFooter,
EmptyStateActions,
PageSection
} from '@patternfly/react-core';
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';

export const TableEmptyState: React.FunctionComponent = () => (
<DashboardWrapper hasPageTemplateTitle>
<PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
<Card component="div">
<Table aria-label="Empty state table">
<Thead>
<Tr>
<Th>Repositories</Th>
<Th>Branches</Th>
<Th>Pull requests</Th>
<Th>Workspaces</Th>
<Th>Last commit</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td colSpan={8}>
<Bullseye>
<EmptyState variant={EmptyStateVariant.sm}>
<EmptyStateHeader
icon={<EmptyStateIcon icon={SearchIcon} />}
titleText="No results found"
headingLevel="h2"
/>
<EmptyStateBody>
No results match this filter criteria. Clear all filters and try again.
</EmptyStateBody>
<EmptyStateFooter>
<EmptyStateActions>
<Button variant="link">Clear all filters</Button>
</EmptyStateActions>
</EmptyStateFooter>
</EmptyState>
</Bullseye>
</Td>
</Tr>
</Tbody>
</Table>
</Card>
</PageSection>
</DashboardWrapper>
);
```js isFullscreen file="./examples/EmptyStateDefault.tsx"
```

### Loading

```js isFullscreen
import React from 'react';
import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
import {
Bullseye,
Card,
EmptyState,
EmptyStateIcon,
EmptyStateBody,
EmptyStateHeader,
PageSection,
Spinner
} from '@patternfly/react-core';
import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';

export const LoadingStateDemo: React.FunctionComponent = () => (
<DashboardWrapper hasPageTemplateTitle>
<PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
<Card component="div">
<Table aria-label="Loading table demo">
<Thead>
<Tr>
<Th>Repositories</Th>
<Th>Branches</Th>
<Th>Pull requests</Th>
<Th>Workspaces</Th>
<Th>Last commit</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td colSpan={8}>
<Bullseye>
<EmptyState>
<EmptyStateHeader titleText="Loading" headingLevel="h2" icon={<EmptyStateIcon icon={Spinner} />} />
</EmptyState>
</Bullseye>
</Td>
</Tr>
</Tbody>
</Table>
</Card>
</PageSection>
</DashboardWrapper>
);
```js isFullscreen file="./examples/EmptyStateLoading.tsx"
```

### Error

```js isFullscreen
import React from 'react';
import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
import {
Bullseye,
Card,
EmptyState,
EmptyStateVariant,
EmptyStateIcon,
EmptyStateBody,
EmptyStateHeader,
PageSection
} from '@patternfly/react-core';
import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
import globalDangerColor200 from '@patternfly/react-tokens/dist/esm/global_danger_color_200';
import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';

export const ErrorStateDemo: React.FunctionComponent = () => (
<DashboardWrapper hasPageTemplateTitle>
<PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
<Card component="div">
<Table aria-label="Loading table demo">
<Thead>
<Tr>
<Th>Repositories</Th>
<Th>Branches</Th>
<Th>Pull requests</Th>
<Th>Workspaces</Th>
<Th>Last commit</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td colSpan={8}>
<Bullseye>
<EmptyState variant={EmptyStateVariant.sm}>
<EmptyStateHeader
titleText="Unable to connect"
icon={<EmptyStateIcon icon={ExclamationCircleIcon} color={globalDangerColor200.value} />}
headingLevel="h2"
/>
<EmptyStateBody>
There was an error retrieving data. Check your connection and reload the page.
</EmptyStateBody>
</EmptyState>
</Bullseye>
</Td>
</Tr>
</Tbody>
</Table>
</Card>
</PageSection>
</DashboardWrapper>
);
```js isFullscreen file="./examples/EmptyStateError.tsx"
```
Loading

0 comments on commit e30e413

Please sign in to comment.