Показывать флажки на всех элементах TableRow после того, как один из них установлен

Question

У меня есть таблица material-ui, и я добавляю к ней возможность множественного выбора. Мои требования следующие:

• Checkbox es изначально скрыты. - DONE
• При наведении курсора на строку появляется ее флажок. DONE
• После проверки одного Checkbox все элементы Checkbox в других строках становятся постоянно видимыми.

У меня есть первые два требования выполнены, но я борюсь с последним.

Как сделать, чтобы все флажки были видны (изменив opacity) после того, как какой-либо из них будет отмечен?

Это то, что у меня получилось:

import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import Checkbox from "@material-ui/core/Checkbox";

const useStyles = makeStyles({
  rowIconStyle: {
    minWidth: 50,
    minHeight: 50
  },
  tableRowStyle: {
    cursor: "pointer",
    "&:hover": {
      backgroundColor: "darkGrey"
    }
  },
  rowSelectionCheckboxStyle: {
    //opacity: "calc(var(--oneRowSelected))",
    opacity: 0,
    "$tableRowStyle:hover &": {
      opacity: 1
    }
  }
});

export default function MyTableComponent(props) {
  const styles = useStyles();
  const DEFAULT_TABLE_ROW_ICON_COLOR = "grey";
  return (
    <TableContainer component={Paper}>
      <Table aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>
              <Checkbox className={styles.rowSelectionCheckboxStyle} />
            </TableCell>
            <TableCell>Icon</TableCell>
            <TableCell>Name</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {props.tableRowsData.map(row => {
            const RowIcon =
              row.icon && row.icon.iconElement
                ? row.icon.iconElement
                : () => <div />;
            let iconElement = (
              <RowIcon
                className={styles.rowIconStyle}
                style={{
                  color:
                    row.icon && row.icon.color
                      ? row.icon.color
                      : DEFAULT_TABLE_ROW_ICON_COLOR
                }}
              />
            );
            return (
              <TableRow key={row.name} className={styles.tableRowStyle}>
                <TableCell>
                  <Checkbox className={styles.rowSelectionCheckboxStyle} />
                </TableCell>
                <TableCell>{iconElement}</TableCell>
                <TableCell>{row.projectName}</TableCell>
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

MyTableComponent.propTypes = {
  tableRowsData: PropTypes.array
};

Answer 1

Имейте значение и onChange в вашем Checkbox. Поддерживать состояние, которое представляет выбранные флажки, и обновлять его до onChange. Отметьте массив флажков и присоедините класс styles.rowSelectionCheckboxStyle, только если установлен какой-либо один флажок.

Здесь находится рабочая копия вашего кода

export default function MyTableComponent(props) {
  const [checkedRows, setCheckedRows] = useState({});
  const styles = useStyles();
  const DEFAULT_TABLE_ROW_ICON_COLOR = "grey";

  const anyChecked = () => {
    let anyRowChecked = false;
    for (let key in checkedRows) {
      if (checkedRows[key]) {
        anyRowChecked = true;
      }
    }
    return anyRowChecked;
  };

  const checked = (checked, index) => {
    setCheckedRows(prev => ({ ...prev, [index]: checked }));
  };

...
...
return (
              <TableRow key={row.name} className={styles.tableRowStyle}>
                <TableCell>
                  <Checkbox
                    checked={checkedRows[index]}
                    onChange={e => checked(e.target.checked, index)}
                    className={
                      !anyChecked() && styles.rowSelectionCheckboxStyle
                    }
                  />
                </TableCell>
                <TableCell>{iconElement}</TableCell>
                <TableCell>
                  {checkedRows[index] ? "True" : "False"} {row.projectName}
                </TableCell>
              </TableRow>
            );
          })}
...