From 51ed3665698ad4dc79b64b5d04bc5629d657f8d1 Mon Sep 17 00:00:00 2001 From: Jenny <32821331+jenny-s51@users.noreply.github.com> Date: Fri, 20 Oct 2023 15:38:36 -0400 Subject: [PATCH] fix import errors, WIP build errors --- .../Toolbar/ConsoleLogViewerToolbar.tsx | 2 +- .../examples/TableStickyColumnsAndHeader.tsx | 10 +- .../react-table/src/{docs => }/demos/Table.md | 189 +-------- .../examples}/BulkSelect.tsx | 21 +- .../examples}/ColumnManagement.tsx | 374 +++++++++--------- .../examples}/Compact.tsx | 20 +- .../examples}/CompoundExpansion.tsx | 2 +- .../src/demos/examples/EmptyStateDefault.tsx | 60 +++ .../src/demos/examples/EmptyStateError.tsx | 53 +++ .../src/demos/examples/EmptyStateLoading.tsx | 43 ++ .../examples}/ExpandCollapseAll.tsx | 6 +- .../examples}/SortableResponsive.tsx | 17 +- .../examples}/StaticBottomPagination.tsx | 4 +- .../examples}/StickyFirstColumn.tsx | 0 .../examples}/StickyHeader.tsx | 2 +- packages/react-table/src/demos/index.ts | 1 + .../sampleData.ts => demos/sampleData.tsx} | 4 +- packages/react-table/src/index.ts | 1 + packages/react-table/tsconfig.json | 5 +- 19 files changed, 401 insertions(+), 413 deletions(-) rename packages/react-table/src/{docs => }/demos/Table.md (88%) rename packages/react-table/src/{docs/demos/table-demos => demos/examples}/BulkSelect.tsx (88%) rename packages/react-table/src/{docs/demos/table-demos => demos/examples}/ColumnManagement.tsx (57%) rename packages/react-table/src/{docs/demos/table-demos => demos/examples}/Compact.tsx (91%) rename packages/react-table/src/{docs/demos/table-demos => demos/examples}/CompoundExpansion.tsx (99%) create mode 100644 packages/react-table/src/demos/examples/EmptyStateDefault.tsx create mode 100644 packages/react-table/src/demos/examples/EmptyStateError.tsx create mode 100644 packages/react-table/src/demos/examples/EmptyStateLoading.tsx rename packages/react-table/src/{docs/demos/table-demos => demos/examples}/ExpandCollapseAll.tsx (97%) rename packages/react-table/src/{docs/demos/table-demos => demos/examples}/SortableResponsive.tsx (95%) rename packages/react-table/src/{docs/demos/table-demos => demos/examples}/StaticBottomPagination.tsx (96%) rename packages/react-table/src/{docs/demos/table-demos => demos/examples}/StickyFirstColumn.tsx (100%) rename packages/react-table/src/{docs/demos/table-demos => demos/examples}/StickyHeader.tsx (96%) create mode 100644 packages/react-table/src/demos/index.ts rename packages/react-table/src/{docs/demos/table-demos/sampleData.ts => demos/sampleData.tsx} (99%) diff --git a/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx b/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx index bf8d967765f..e5e867fc120 100644 --- a/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx +++ b/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { Badge, Button, + DashboardWrapper, MenuToggle, SearchInput, Select, @@ -20,7 +21,6 @@ import { DropdownList, MenuFooter } from '@patternfly/react-core'; -import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper'; import PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon'; import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon'; import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon'; diff --git a/packages/react-table/src/components/Table/examples/TableStickyColumnsAndHeader.tsx b/packages/react-table/src/components/Table/examples/TableStickyColumnsAndHeader.tsx index 68d39559119..eb2b42bdbdb 100644 --- a/packages/react-table/src/components/Table/examples/TableStickyColumnsAndHeader.tsx +++ b/packages/react-table/src/components/Table/examples/TableStickyColumnsAndHeader.tsx @@ -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(null); + const [activeSortIndex, setActiveSortIndex] = React.useState(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 @@ -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]; @@ -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); diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/demos/Table.md similarity index 88% rename from packages/react-table/src/docs/demos/Table.md rename to packages/react-table/src/demos/Table.md index 2f7be056bc6..f3f5f2457f3 100644 --- a/packages/react-table/src/docs/demos/Table.md +++ b/packages/react-table/src/demos/Table.md @@ -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'; @@ -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 -```ts isFullscreen file="./table-demos/BulkSelect.tsx" - +```js isFullscreen file="./examples/BulkSelect.tsx" ``` ### Expand/collapse all -```ts isFullscreen file="./table-demos/ExpandCollapseAll.tsx" +```js isFullscreen file="./examples/ExpandCollapseAll.tsx" ``` ### Compact -```ts isFullscreen file="./table-demos/Compact.tsx" +```js isFullscreen file="./examples/Compact.tsx" ``` ### Compound expansion -```ts isFullscreen file="./table-demos/CompoundExpansion.tsx" +```js isFullscreen file="./examples/CompoundExpansion.tsx" ``` ### Column management -```ts isFullscreen file="./table-demos/ColumnManagement.tsx" +```js isFullscreen file="./examples/ColumnManagement.tsx" ``` @@ -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) { @@ -1297,7 +1295,7 @@ class FilterTableDemo extends React.Component { ### Sortable - responsive -```ts isFullscreen file="./table-demos/SortableResponsive.tsx" +```js isFullscreen file="./examples/SortableResponsive.tsx" ``` @@ -1420,19 +1418,19 @@ class ComplexPaginationTableDemo extends React.Component { ### Static bottom pagination on mobile -```ts isFullscreen file="table-demos/StaticBottomPagination.tsx" +```ts isFullscreen file="./examples/StaticBottomPagination.tsx" ``` ### Sticky header -```ts isFullscreen file="./table-demos/StickyHeader.tsx" +```js isFullscreen file="./examples/StickyHeader.tsx" ``` ### Sticky first column -```ts isFullscreen file="./table-demos/StickyFirstColumn.tsx" +```js isFullscreen file="./examples/StickyFirstColumn.tsx" ``` @@ -1440,7 +1438,7 @@ class ComplexPaginationTableDemo extends React.Component { 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" ``` @@ -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 = () => ( - - - - - - - - - - - - - - - - - - -
RepositoriesBranchesPull requestsWorkspacesLast commit
- - - } - titleText="No results found" - headingLevel="h2" - /> - - No results match this filter criteria. Clear all filters and try again. - - - - - - - - -
- - - -); +```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 = () => ( - - - - - - - - - - - - - - - - - - -
RepositoriesBranchesPull requestsWorkspacesLast commit
- - - } /> - - -
- - - -); +```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 = () => ( - - - - - - - - - - - - - - - - - - -
RepositoriesBranchesPull requestsWorkspacesLast commit
- - - } - headingLevel="h2" - /> - - There was an error retrieving data. Check your connection and reload the page. - - - -
- - - -); +```js isFullscreen file="./examples/EmptyStateError.tsx" ``` diff --git a/packages/react-table/src/docs/demos/table-demos/BulkSelect.tsx b/packages/react-table/src/demos/examples/BulkSelect.tsx similarity index 88% rename from packages/react-table/src/docs/demos/table-demos/BulkSelect.tsx rename to packages/react-table/src/demos/examples/BulkSelect.tsx index 8d3a556d43e..55585336c94 100644 --- a/packages/react-table/src/docs/demos/table-demos/BulkSelect.tsx +++ b/packages/react-table/src/demos/examples/BulkSelect.tsx @@ -6,6 +6,7 @@ import { DropdownItem, MenuToggle, MenuToggleCheckbox, + MenuToggleElement, PageSection, Pagination, Toolbar, @@ -14,11 +15,10 @@ import { ToolbarItem, PaginationVariant } from '@patternfly/react-core'; -import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; +import { Table, Thead, Tr, Th, Tbody, Td, rows, columns, SampleDataRow } from '@patternfly/react-table'; import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper'; -import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData'; -const BulkSelectTableDemo: React.FC = () => { +export const BulkSelectTableDemo: React.FunctionComponent = () => { const [isBulkSelectDropdownOpen, setIsBulkSelectDropdownOpen] = useState(false); const [bulkSelection, setBulkSelection] = useState(''); const [page, setPage] = useState(1); @@ -49,16 +49,15 @@ const BulkSelectTableDemo: React.FC = () => { setPerPage(newPerPage); }; - const setRowSelected = (row: any, isSelecting: boolean = true) => + const setRowSelected = (row: SampleDataRow, isSelecting: boolean) => setSelectedRows((prevSelected) => { const otherSelectedRows = prevSelected.filter((r) => r !== row.name); return isSelecting ? [...otherSelectedRows, row.name] : otherSelectedRows; }); - const selectAllRows = (isSelecting: boolean = true) => setSelectedRows(isSelecting ? rows.map((r) => r.name) : []); + const selectAllRows = (isSelecting: boolean) => setSelectedRows(isSelecting ? rows.map((r) => r.name) : []); - const selectPageRows = (isSelecting: boolean = true) => - setSelectedRows(isSelecting ? paginatedRows.map((r) => r.name) : []); + const selectPageRows = (isSelecting: boolean) => setSelectedRows(isSelecting ? paginatedRows.map((r) => r.name) : []); const isRowSelected = (row: any) => selectedRows.includes(row.name); @@ -95,7 +94,7 @@ const BulkSelectTableDemo: React.FC = () => { return ( { + onSelect={(_ev: React.MouseEvent, value: string | number) => { if (value === 'all') { selectAllRows(bulkSelection !== 'all'); } else if (value === 'page') { @@ -106,8 +105,8 @@ const BulkSelectTableDemo: React.FC = () => { setBulkSelection(value); }} isOpen={isBulkSelectDropdownOpen} - onOpenChange={(isOpen) => setIsBulkSelectDropdownOpen(isOpen)} - toggle={(toggleRef) => ( + onOpenChange={(isOpen: boolean) => setIsBulkSelectDropdownOpen(isOpen)} + toggle={(toggleRef: React.Ref) => ( { ); }; - -export default BulkSelectTableDemo; diff --git a/packages/react-table/src/docs/demos/table-demos/ColumnManagement.tsx b/packages/react-table/src/demos/examples/ColumnManagement.tsx similarity index 57% rename from packages/react-table/src/docs/demos/table-demos/ColumnManagement.tsx rename to packages/react-table/src/demos/examples/ColumnManagement.tsx index d3234ab1d4b..3d23a282951 100644 --- a/packages/react-table/src/docs/demos/table-demos/ColumnManagement.tsx +++ b/packages/react-table/src/demos/examples/ColumnManagement.tsx @@ -28,9 +28,9 @@ import { import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon'; -import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper.js'; +import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper'; import { capitalize } from '@patternfly/react-table/src/components/Table/utils/utils'; -import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData'; +import { rows, columns } from '@patternfly/react-table/src/demos/examples/Table/sampleData'; export const ColumnManagementAction: React.FC = () => { const defaultColumns = columns; @@ -97,18 +97,18 @@ export const ColumnManagementAction: React.FC = () => { const handleSetPage = ( _evt: MouseEvent | React.MouseEvent | React.KeyboardEvent, newPage: number - ): void => { + ) => { setPage(newPage); }; const handlePerPageSelect = ( _evt: MouseEvent | React.MouseEvent | React.KeyboardEvent, newPerPage: number - ): void => { + ) => { setPerPage(newPerPage); }; - const renderPagination = (variant: 'top' | 'bottom' | PaginationVariant, isCompact: boolean = false) => ( + const renderPagination = (variant: 'top' | 'bottom' | PaginationVariant, isCompact: boolean) => ( { }, [managedRows, page, perPage]); // Removes attribute from each node object in Data.jsx - const removePropFromObject = (object: any, keys: string[]): any => { - return keys.reduce((obj, prop) => { + const removePropFromObject = (object: any, keys: string[]): any => + keys.reduce((obj, prop) => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars const { [prop]: _, ...keep } = obj; return keep; }, object); - }; // Filters columns out of table that are not selected in the column management modal - const filterData = (checked: boolean, name: string): void => { + const filterData = (checked: boolean, name: string) => { const selectedColumn: string = matchSelectedColumnNameToAttr(name); const filteredRows: any[] = []; @@ -155,7 +155,7 @@ export const ColumnManagementAction: React.FC = () => { setFilteredColumns(filteredColumns); setFilteredRows(filteredRows); } else { - let updatedFilters: string[] = [...filters]; + const updatedFilters: string[] = [...filters]; updatedFilters.push(selectedColumn); // Only show the names of columns that were selected in the modal @@ -172,13 +172,13 @@ export const ColumnManagementAction: React.FC = () => { } }; - const unfilterAllData = (): void => { + const unfilterAllData = () => { setFilters([]); setFilteredColumns(defaultColumns); setFilteredRows(defaultRows); }; - const handleChange = (event: React.FormEvent, checked: boolean): void => { + const handleChange = (event: React.FormEvent, checked: boolean) => { const target = event.currentTarget; const value = target.type === 'checkbox' ? target.checked : target.value; @@ -191,195 +191,193 @@ export const ColumnManagementAction: React.FC = () => { setCheckedState(updatedCheckedState); }; - const handleModalToggle = (event: React.MouseEvent | KeyboardEvent): void => { + const handleModalToggle = (_event: React.MouseEvent | KeyboardEvent) => { setIsModalOpen(!isModalOpen); }; - const onSave = (): void => { + const onSave = () => { setManagedColumns(filteredColumns); setManagedRows(filteredRows); setPaginatedRows(filteredRows); setIsModalOpen(!isModalOpen); }; - const selectAllColumns = (): void => { + const selectAllColumns = () => { unfilterAllData(); setCheckedState(Array(columns.length).fill(true)); }; - const renderModal = () => { - return ( - - Selected categories will be displayed in the table. - - - } - onClose={handleModalToggle} - actions={[ - , - - ]} - > - - - - - - - - ]} - /> - - - - - - - - - ]} - /> - - - - - - - - - ]} - /> - - - - - - - - - ]} - /> - - - - - - - - - ]} - /> - - - - - - - - - ]} - /> - - - - - - - - - ]} - /> - - - - - - - - - ]} - /> - - - - - ); - }; + + } + onClose={handleModalToggle} + actions={[ + , + + ]} + > + + + + + + + + ]} + /> + + + + + + + + + ]} + /> + + + + + + + + + ]} + /> + + + + + + + + + ]} + /> + + + + + + + + + ]} + /> + + + + + + + + + ]} + /> + + + + + + + + + ]} + /> + + + + + + + + + ]} + /> + + + + + ); const renderLabel = (labelText: string): JSX.Element => { switch (labelText) { @@ -452,7 +450,9 @@ export const ColumnManagementAction: React.FC = () => { <> {Object.entries(row).map(([key, value]) => + // eslint-disable-next-line no-nested-ternary key === 'status' ? ( + // eslint-disable-next-line react/jsx-key {renderLabel(value as string)} diff --git a/packages/react-table/src/docs/demos/table-demos/Compact.tsx b/packages/react-table/src/demos/examples/Compact.tsx similarity index 91% rename from packages/react-table/src/docs/demos/table-demos/Compact.tsx rename to packages/react-table/src/demos/examples/Compact.tsx index 247118b0e36..db841a6dad4 100644 --- a/packages/react-table/src/docs/demos/table-demos/Compact.tsx +++ b/packages/react-table/src/demos/examples/Compact.tsx @@ -17,33 +17,27 @@ import { } from '@patternfly/react-core'; import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; +import { rows, columns } from '@patternfly/react-table/src/demos/examples/Table/sampleData'; import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper'; -import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData'; -const CompactTable: React.FC = () => { +export const CompactTable: React.FC = () => { const [isSelectOpen, setIsSelectOpen] = useState(false); const [page, setPage] = useState(1); const [perPage, setPerPage] = useState(10); const [paginatedRows, setPaginatedRows] = useState(rows.slice(0, 10)); - const handleSetPage = (_evt: any, newPage: number, startIdx: number, endIdx: number): void => { + const handleSetPage = (_evt: any, newPage: number, startIdx: number, endIdx: number) => { setPaginatedRows(rows.slice(startIdx, endIdx)); setPage(newPage); }; - const handlePerPageSelect = ( - _evt: any, - newPerPage: number, - newPage: number, - startIdx: number, - endIdx: number - ): void => { + const handlePerPageSelect = (_evt: any, newPerPage: number, newPage: number, startIdx: number, endIdx: number) => { setPaginatedRows(rows.slice(startIdx, endIdx)); setPage(newPage); setPerPage(newPerPage); }; - const renderPagination = (variant: string, isCompact: boolean): JSX.Element => ( + const renderPagination = (variant: string, isCompact: boolean) => ( { )} isOpen={isSelectOpen} - onOpenChange={(isOpen) => setIsSelectOpen(isOpen)} + onOpenChange={(isOpen: boolean) => setIsSelectOpen(isOpen)} onSelect={() => setIsSelectOpen(!isSelectOpen)} > {[ @@ -100,7 +94,7 @@ const CompactTable: React.FC = () => { ); - const renderLabel = (labelText: string): JSX.Element => { + const renderLabel = (labelText: string) => { switch (labelText) { case 'Running': return ; diff --git a/packages/react-table/src/docs/demos/table-demos/CompoundExpansion.tsx b/packages/react-table/src/demos/examples/CompoundExpansion.tsx similarity index 99% rename from packages/react-table/src/docs/demos/table-demos/CompoundExpansion.tsx rename to packages/react-table/src/demos/examples/CompoundExpansion.tsx index f784c84d5df..a867a69861e 100644 --- a/packages/react-table/src/docs/demos/table-demos/CompoundExpansion.tsx +++ b/packages/react-table/src/demos/examples/CompoundExpansion.tsx @@ -95,7 +95,7 @@ export const CompoundExpandable: React.FC = () => { )} isOpen={isSelectOpen} - onOpenChange={(isOpen) => setIsSelectOpen(isOpen)} + onOpenChange={(isOpen: boolean) => setIsSelectOpen(isOpen)} onSelect={() => setIsSelectOpen(!isSelectOpen)} > {[ diff --git a/packages/react-table/src/demos/examples/EmptyStateDefault.tsx b/packages/react-table/src/demos/examples/EmptyStateDefault.tsx new file mode 100644 index 00000000000..92254c68bfa --- /dev/null +++ b/packages/react-table/src/demos/examples/EmptyStateDefault.tsx @@ -0,0 +1,60 @@ +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 EmptyStateDefaultDemo: React.FunctionComponent = () => ( + + + + + + + + + + + + + + + + + + +
RepositoriesBranchesPull requestsWorkspacesLast commit
+ + + } + titleText="No results found" + headingLevel="h2" + /> + + No results match this filter criteria. Clear all filters and try again. + + + + + + + + +
+ + + +); diff --git a/packages/react-table/src/demos/examples/EmptyStateError.tsx b/packages/react-table/src/demos/examples/EmptyStateError.tsx new file mode 100644 index 00000000000..355d5ac9d9b --- /dev/null +++ b/packages/react-table/src/demos/examples/EmptyStateError.tsx @@ -0,0 +1,53 @@ +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 = () => ( + + + + + + + + + + + + + + + + + + +
RepositoriesBranchesPull requestsWorkspacesLast commit
+ + + } + headingLevel="h2" + /> + + There was an error retrieving data. Check your connection and reload the page. + + + +
+ + + +); diff --git a/packages/react-table/src/demos/examples/EmptyStateLoading.tsx b/packages/react-table/src/demos/examples/EmptyStateLoading.tsx new file mode 100644 index 00000000000..834b0354371 --- /dev/null +++ b/packages/react-table/src/demos/examples/EmptyStateLoading.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; +import { + Bullseye, + Card, + EmptyState, + EmptyStateIcon, + EmptyStateHeader, + PageSection, + Spinner +} from '@patternfly/react-core'; +import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper'; + +export const EmptyStateLoadingDemo: React.FunctionComponent = () => ( + + + + + + + + + + + + + + + + + + +
RepositoriesBranchesPull requestsWorkspacesLast commit
+ + + } /> + + +
+ + + +); diff --git a/packages/react-table/src/docs/demos/table-demos/ExpandCollapseAll.tsx b/packages/react-table/src/demos/examples/ExpandCollapseAll.tsx similarity index 97% rename from packages/react-table/src/docs/demos/table-demos/ExpandCollapseAll.tsx rename to packages/react-table/src/demos/examples/ExpandCollapseAll.tsx index 713a2781ad4..b4207b648ec 100644 --- a/packages/react-table/src/docs/demos/table-demos/ExpandCollapseAll.tsx +++ b/packages/react-table/src/demos/examples/ExpandCollapseAll.tsx @@ -135,9 +135,7 @@ export const ExpandCollapseAllTableDemo: React.FC = () => { setExpandedServerNames(isExpanding ? [...otherExpandedServerNames, server.name] : otherExpandedServerNames); }; - const isServerExpanded = (server: Server) => { - return expandedServerNames.includes(server.name); - }; + const isServerExpanded = (server: Server) => expandedServerNames.includes(server.name); // We want to be able to reference the original data object based on row index. But because an expanded // row takes up two row indexes, servers[rowIndex] will not be accurate like it would in a normal table. @@ -163,7 +161,7 @@ export const ExpandCollapseAllTableDemo: React.FC = () => { diff --git a/packages/react-table/src/docs/demos/table-demos/SortableResponsive.tsx b/packages/react-table/src/demos/examples/SortableResponsive.tsx similarity index 95% rename from packages/react-table/src/docs/demos/table-demos/SortableResponsive.tsx rename to packages/react-table/src/demos/examples/SortableResponsive.tsx index 7c480ea8aa4..4b4338e3dd8 100644 --- a/packages/react-table/src/docs/demos/table-demos/SortableResponsive.tsx +++ b/packages/react-table/src/demos/examples/SortableResponsive.tsx @@ -41,15 +41,15 @@ import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amou import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; -import { rows, columns, IRow } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData'; +import { rows, columns, SampleDataRow } from '@patternfly/react-table/src/demos/examples/Table/sampleData'; type Direction = 'asc' | 'desc' | 'none'; export const ComposableTableSortable: React.FC = () => { const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false); - const sortRows = (rows: IRow[], sortIndex: number, sortDirection: Direction) => { - return [...rows].sort((a, b) => { + const sortRows = (rows: SampleDataRow[], sortIndex: number, sortDirection: Direction) => + [...rows].sort((a, b) => { let returnValue = 0; if (sortIndex === 0 || sortIndex === 7) { returnValue = 1; @@ -65,7 +65,6 @@ export const ComposableTableSortable: React.FC = () => { } return returnValue; }); - }; const [sortedData, setSortedData] = React.useState([...sortRows(rows, 0, 'asc')]); const [sortedRows, setSortedRows] = React.useState([...sortedData]); @@ -100,7 +99,7 @@ export const ComposableTableSortable: React.FC = () => { setPerPage(newPerPage); }; - const renderPagination = (variant: 'top' | 'bottom' | PaginationVariant, isCompact: boolean) => ( + const renderPagination = (variant: 'top' | 'bottom' | PaginationVariant) => ( {