github.com/martinohmann/rfoutlet@v1.2.1-0.20220707195255-8a66aa411105/web/src/components/outlets/GroupHeader.js (about)

     1  import React from 'react';
     2  import PropTypes from 'prop-types';
     3  import { makeStyles } from '@material-ui/core/styles';
     4  import List from '@material-ui/core/List';
     5  import ListItem from '@material-ui/core/ListItem';
     6  import ListItemText from '@material-ui/core/ListItemText';
     7  import IconButton from '@material-ui/core/IconButton';
     8  import PowerIcon from '@material-ui/icons/Power';
     9  import PowerOffIcon from '@material-ui/icons/PowerOff';
    10  import SwapHorizIcon from '@material-ui/icons/SwapHoriz';
    11  
    12  const useStyles = makeStyles(theme => ({
    13    container: {
    14      padding: 0,
    15    },
    16    header: {
    17      paddingTop: 1,
    18      paddingBottom: 1,
    19      paddingRight: 6,
    20      background: theme.palette.grey[100],
    21    },
    22    groupName: {
    23      flexGrow: 1,
    24      fontWeight: 700,
    25      color: theme.palette.grey[800],
    26    },
    27    buttonOn: {
    28      color: theme.palette.primary.dark,
    29    },
    30    buttonOff: {
    31      color: theme.palette.secondary.light,
    32    },
    33  }));
    34  
    35  export default function GroupHeader(props) {
    36    const classes = useStyles();
    37  
    38    const { displayName, onActionOn, onActionOff, onActionToggle } = props;
    39  
    40    return (
    41      <List className={classes.container}>
    42        <ListItem className={classes.header}>
    43          <ListItemText className={classes.groupName} primary={displayName} disableTypography={true} />
    44          <IconButton className={classes.buttonOff} onClick={onActionOff}>
    45            <PowerOffIcon />
    46          </IconButton>
    47          <IconButton className={classes.buttonOn} onClick={onActionOn}>
    48            <PowerIcon />
    49          </IconButton>
    50          <IconButton onClick={onActionToggle}>
    51            <SwapHorizIcon />
    52          </IconButton>
    53        </ListItem>
    54      </List>
    55    );
    56  }
    57  
    58  GroupHeader.propTypes = {
    59    displayName: PropTypes.string.isRequired,
    60    onActionOn: PropTypes.func.isRequired,
    61    onActionOff: PropTypes.func.isRequired,
    62    onActionToggle: PropTypes.func.isRequired,
    63  };