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

     1  import React from 'react';
     2  import PropTypes from 'prop-types';
     3  import { List, ListItem } from '../List';
     4  import ListItemIcon from '@material-ui/core/ListItemIcon';
     5  import ListItemText from '@material-ui/core/ListItemText';
     6  import DateRangeIcon from '@material-ui/icons/DateRange';
     7  import TimerIcon from '@material-ui/icons/Timer';
     8  import TimerOffIcon from '@material-ui/icons/TimerOff';
     9  import { useTranslation } from 'react-i18next';
    10  import { formatDayTime, formatWeekdays } from '../../format';
    11  
    12  export default function IntervalSettingsList(props) {
    13    const {
    14      weekdays,
    15      fromDayTime,
    16      toDayTime,
    17      onWeekdaysClick,
    18      onFromDayTimeClick,
    19      onToDayTimeClick
    20    } = props;
    21  
    22    const { t } = useTranslation();
    23  
    24    return (
    25      <List>
    26        <ListItem onClick={onWeekdaysClick}>
    27          <ListItemIcon>
    28            <DateRangeIcon />
    29          </ListItemIcon>
    30          <ListItemText primary={t('weekdays')} secondary={formatWeekdays(weekdays, t)} />
    31        </ListItem>
    32        <ListItem onClick={onFromDayTimeClick}>
    33          <ListItemIcon>
    34            <TimerIcon />
    35          </ListItemIcon>
    36          <ListItemText primary={t('start-time')} secondary={formatDayTime(fromDayTime, t)} />
    37        </ListItem>
    38        <ListItem onClick={onToDayTimeClick}>
    39          <ListItemIcon>
    40            <TimerOffIcon />
    41          </ListItemIcon>
    42          <ListItemText primary={t('end-time')} secondary={formatDayTime(toDayTime, t)} />
    43        </ListItem>
    44      </List>
    45    );
    46  }
    47  
    48  IntervalSettingsList.propTypes = {
    49      weekdays: PropTypes.array,
    50      fromDayTime: PropTypes.object,
    51      toDayTime: PropTypes.object,
    52      onWeekdaysClick: PropTypes.func.isRequired,
    53      onFromDayTimeClick: PropTypes.func.isRequired,
    54      onToDayTimeClick: PropTypes.func.isRequired,
    55  };