[arvados-workbench2] updated: 2.6.0-11-gccc29ca7

git repository hosting git at public.arvados.org
Wed Apr 26 23:19:29 UTC 2023


Summary of changes:
 src/components/data-table/data-table.tsx | 71 ++++++++++++++++++--------------
 1 file changed, 41 insertions(+), 30 deletions(-)

       via  ccc29ca7f0afff5b6d038553e1feb2c4b1666392 (commit)
      from  7ff688a46feb12ff62afcc35a287048f3e49fb27 (commit)

Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.


commit ccc29ca7f0afff5b6d038553e1feb2c4b1666392
Author: Lisa Knox <lisaknox83 at gmail.com>
Date:   Wed Apr 26 19:19:24 2023 -0400

    15768: single selector working  Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox at curii.com>

diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index 57753c05..265b0986 100644
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -3,7 +3,20 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import React from 'react';
-import { Table, TableBody, TableRow, TableCell, TableHead, TableSortLabel, StyleRulesCallback, Theme, WithStyles, withStyles, IconButton } from '@material-ui/core';
+import {
+    Table,
+    TableBody,
+    TableRow,
+    TableCell,
+    TableHead,
+    TableSortLabel,
+    StyleRulesCallback,
+    Theme,
+    WithStyles,
+    withStyles,
+    IconButton,
+    Tooltip,
+} from '@material-ui/core';
 import classnames from 'classnames';
 import { DataColumn, SortDirection } from './data-column';
 import { DataTableDefaultView } from '../data-table-default-view/data-table-default-view';
@@ -89,21 +102,26 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     },
 });
 
-type DataTableState = Record<string, boolean>;
+type DataTableState = {
+    isSelected: boolean;
+    checkedList: Record<string, boolean>;
+};
 
 type DataTableProps<T> = DataTableDataProps<T> & WithStyles<CssRules>;
 
 export const DataTable = withStyles(styles)(
     class Component<T> extends React.Component<DataTableProps<T>> {
-        state: DataTableState = {};
+        state: DataTableState = {
+            isSelected: false,
+            checkedList: {},
+        };
 
         componentDidMount(): void {
             this.initializeCheckedList(this.props.items);
         }
 
         componentDidUpdate(prevProps: Readonly<DataTableProps<T>>) {
-            console.log(prevProps.items, this.props.items, this.state);
-            console.log(this.props.currentRoute);
+            console.log(this.state);
             if (!arraysAreCongruent(prevProps.items, this.props.items)) {
                 this.initializeCheckedList(this.props.items);
             }
@@ -123,7 +141,7 @@ export const DataTable = withStyles(styles)(
                     type='checkbox'
                     name={uuid}
                     color='primary'
-                    checked={this.state[uuid] ?? false}
+                    checked={this.state.checkedList[uuid] ?? false}
                     onChange={() => this.handleCheck(uuid)}
                     onDoubleClick={(ev) => ev.stopPropagation()}
                 ></input>
@@ -131,7 +149,7 @@ export const DataTable = withStyles(styles)(
         };
 
         initializeCheckedList = (uuids: any[]): void => {
-            const checkedList = this.state;
+            const { checkedList } = this.state;
             uuids.forEach((uuid) => {
                 if (!checkedList.hasOwnProperty[uuid]) {
                     checkedList[uuid] = false;
@@ -139,35 +157,28 @@ export const DataTable = withStyles(styles)(
             });
         };
 
-        handleCheck = (uuid: string): void => {
-            const newCheckedList = { ...this.state };
-            newCheckedList[uuid] = !this.state[uuid];
-            this.setState(newCheckedList);
-            console.log(newCheckedList);
-        };
-
-        handleSelectAll = (): void => {
-            const newCheckedList = { ...this.state };
+        handleSelectorSelect = (): void => {
+            const { isSelected, checkedList } = this.state;
+            const newCheckedList = { ...checkedList };
             for (const key in newCheckedList) {
-                newCheckedList[key] = true;
+                newCheckedList[key] = !isSelected;
             }
-            this.setState(newCheckedList);
+            this.setState({ isSelected: !isSelected, checkedList: newCheckedList });
         };
 
-        handleDeselectAll = (): void => {
-            const newCheckedList = { ...this.state };
-            for (const key in newCheckedList) {
-                newCheckedList[key] = false;
-            }
-            this.setState(newCheckedList);
+        handleCheck = (uuid: string): void => {
+            const newCheckedList = { ...this.state.checkedList };
+            newCheckedList[uuid] = !this.state.checkedList[uuid];
+            this.setState({ checkedList: newCheckedList });
+            console.log(newCheckedList);
         };
 
         handleInvertSelect = (): void => {
-            const newCheckedList = { ...this.state };
+            const newCheckedList = { ...this.state.checkedList };
             for (const key in newCheckedList) {
-                newCheckedList[key] = !this.state[key];
+                newCheckedList[key] = !this.state.checkedList[key];
             }
-            this.setState(newCheckedList);
+            this.setState({ checkedList: newCheckedList });
         };
 
         render() {
@@ -205,9 +216,9 @@ export const DataTable = withStyles(styles)(
             const { onSortToggle, onFiltersChange, classes } = this.props;
             return index === 0 ? (
                 <TableCell key={key || index} className={classes.checkBoxCell}>
-                    <div onClick={this.handleSelectAll}>select all</div>
-                    <div onClick={this.handleDeselectAll}>deselect all</div>
-                    <div onClick={this.handleInvertSelect}>invert selection</div>
+                    <Tooltip title={this.state.isSelected ? 'Deselect All' : 'Select All'}>
+                        <input type='checkbox' checked={this.state.isSelected} onChange={this.handleSelectorSelect}></input>
+                    </Tooltip>
                 </TableCell>
             ) : (
                 <TableCell className={classes.tableCell} key={key || index}>

-----------------------------------------------------------------------


hooks/post-receive
-- 




More information about the arvados-commits mailing list