update bulk select demo

Author: nicolethoen

packages/react-table/src/docs/demos/Table.md

@@ -56,258 +56,8 @@ import { rows, columns } from '../examples/Data.jsx';
 
 ### Bulk select
 
-```js isFullscreen
-import React from 'react';
-import {
-  Dropdown,
-  DropdownItem,
-  DropdownList,
-  MenuToggle,
-  MenuToggleCheckbox,
-  PageSection,
-  Pagination,
-  Title,
-  Toolbar,
-  ToolbarContent,
-  ToolbarGroup,
-  ToolbarItem
-} from '@patternfly/react-core';
-import { Table as TableDeprecated, TableHeader, TableBody } from '@patternfly/react-table/deprecated';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-
-class BulkSelectTableDemo extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      res: [],
-      perPage: 20,
-      page: 1,
-      error: null,
-      loading: true,
-      selectedItems: [],
-      numSelected: 0,
-      isDropDownOpen: false,
-      isKebabOpen: false,
-      searchValue: ''
-    };
-
-    this.onSelect = (event, isSelected, rowId) => {
-      const { selectedItems } = this.state;
-      const rows = [...this.state.res];
-      const id = rows[rowId].id;
-      rows[rowId].selected = isSelected;
-      this.setState((prevState, props) => {
-        return {
-          res: rows,
-          selectedItems: isSelected
-            ? [...prevState.selectedItems, id]
-            : prevState.selectedItems.filter((itemId) => itemId !== id)
-        };
-      });
-    };
-
-    this.updateSelected = () => {
-      const { res, selectedItems } = this.state;
-      let rows = res.map((post) => {
-        post.selected = selectedItems.includes(post.id);
-        return post;
-      });
-
-      this.setState({
-        res: rows
-      });
-    };
-
-    this.handleSelectClick = (newState) => {
-      if (newState === 'none') {
-        this.setState(
-          {
-            selectedItems: []
-          },
-          this.updateSelected
-        );
-      } else if (newState === 'page') {
-        let newRows = [];
-        let rows = this.state.res.map((post) => {
-          const isSelected = post.selected;
-          newRows = isSelected ? [...newRows] : [...newRows, post.id];
-          post.selected = true;
-          return post;
-        });
-
-        this.setState((prevState, props) => {
-          return {
-            selectedItems: prevState.selectedItems.concat(newRows)
-          };
-        }, this.updateSelected);
-      } else {
-        let newRows = [];
-        for (var i = 1; i <= 100; i++) newRows = [...newRows, i];
-
-        this.setState(
-          {
-            selectedItems: newRows
-          },
-          this.updateSelected
-        );
-      }
-    };
-
-    this.onDropDownToggle = (isOpen) => {
-      this.setState({
-        isDropDownOpen: isOpen
-      });
-    };
-
-    this.onDropDownSelect = (event) => {
-      this.setState((prevState, props) => {
-        return { isDropDownOpen: !prevState.isDropDownOpen };
-      });
-    };
-  }
+```js isFullscreen file="./table-demos/BulkSelect.jsx"
 
-  fetch(page, perPage) {
-    this.setState({ loading: true });
-    fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=${perPage}`)
-      .then((resp) => resp.json())
-      .then((resp) => this.setState({ res: resp, perPage, page, loading: false }))
-      .then(() => this.updateSelected())
-      .catch((err) => this.setState({ error: err, loading: false }));
-  }
-
-  componentDidMount() {
-    this.fetch(this.state.page, this.state.perPage);
-  }
-
-  renderPagination(variant) {
-    const { page, perPage } = this.state;
-    return (
-      <Pagination
-        isCompact
-        itemCount={100}
-        page={page}
-        perPage={perPage}
-        onSetPage={(_evt, value) => {
-          this.fetch(value, perPage);
-        }}
-        onPerPageSelect={(_evt, value) => {
-          this.fetch(1, value);
-        }}
-        variant={variant}
-        titles={{
-          paginationAriaLabel: `${variant} pagination`
-        }}
-      />
-    );
-  }
-
-  buildSelectDropdown() {
-    const { isDropDownOpen, selectedItems } = this.state;
-    const numSelected = selectedItems.length;
-    const allSelected = numSelected === 100;
-    const anySelected = numSelected > 0;
-    const someChecked = anySelected ? null : false;
-    const isChecked = allSelected ? true : someChecked;
-
-    const items = (
-      <>
-        <DropdownItem key="item-1" onClick={() => this.handleSelectClick('none')}>
-          Select none (0 items)
-        </DropdownItem>
-        <DropdownItem key="item-2" onClick={() => this.handleSelectClick('page')}>
-          Select page ({this.state.perPage} items)
-        </DropdownItem>
-        <DropdownItem key="item-3" onClick={() => this.handleSelectClick('all')}>
-          Select all (100 items)
-        </DropdownItem>
-      </>
-    );
-    return (
-      <Dropdown
-        onSelect={this.onDropDownSelect}
-        isOpen={isDropDownOpen}
-        onOpenChange={(isOpen) => this.setState({ isDropDownOpen: isOpen })}
-        toggle={(toggleRef) => (
-          <MenuToggle
-            ref={toggleRef}
-            isExpanded={isDropDownOpen}
-            onClick={this.onDropDownToggle}
-            aria-label="Select cards"
-            splitButtonOptions={{
-              items: [
-                <MenuToggleCheckbox
-                  id="split-dropdown-checkbox"
-                  key="split-dropdown-checkbox"
-                  aria-label={anySelected ? 'Deselect all cards' : 'Select all cards'}
-                  isChecked={allSelected}
-                  onClick={() => {
-                    anySelected ? this.handleSelectClick('none') : this.handleSelectClick('all');
-                  }}
-                >
-                  {numSelected !== 0 && `${numSelected} selected`}
-                </MenuToggleCheckbox>
-              ]
-            }}
-          ></MenuToggle>
-        )}
-      >
-        <DropdownList>{items}</DropdownList>
-      </Dropdown>
-    );
-  }
-
-  renderToolbar() {
-    return (
-      <React.Fragment>
-        <Toolbar>
-          <ToolbarContent>
-            <ToolbarGroup>
-              <ToolbarItem variant="bulk-select">{this.buildSelectDropdown()}</ToolbarItem>
-            </ToolbarGroup>
-            <ToolbarItem variant="pagination">{this.renderPagination('top')}</ToolbarItem>
-          </ToolbarContent>
-        </Toolbar>
-      </React.Fragment>
-    );
-  }
-
-  render() {
-    const { loading, res } = this.state;
-    const rows = res.map((post) => ({
-      cells: [post.title, post.body],
-      selected: post.selected
-    }));
-
-    return (
-      <DashboardWrapper hasPageTemplateTitle>
-        <PageSection isWidthLimited>
-          {this.renderToolbar()}
-          {!loading && (
-            <TableDeprecated
-              aria-label="Bulk Select Table Demo"
-              cells={['Title', 'Body']}
-              rows={rows}
-              onSelect={this.onSelect}
-              canSelectAll={false}
-            >
-              <TableHeader />
-              <TableBody />
-            </TableDeprecated>
-          )}
-
-          {loading && (
-            <div className="pf-v5-l-bullseye">
-              <Title headingLevel="h2" size="3xl">
-                Please wait while loading data
-              </Title>
-            </div>
-          )}
-          {this.renderPagination('bottom')}
-        </PageSection>
-      </DashboardWrapper>
-    );
-  }
-}
 ```
 
 ### Expand/collapse all