Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | 3x 3x 3x 3x 9x 9x 9x 15x 9x 3x | import * as React from 'react';
import PropTypes from 'prop-types';
import { Checkmark } from 'components/checkmark';
import { makeStyles, TableCell, TableRow, Typography } from '@material-ui/core';
import { getDay, parseISO } from 'date-fns';
import { EMPTY } from 'data/constants';
const useStyles = makeStyles((theme) => ({
minWidth: {
width: '1%',
whiteSpace: 'nowrap',
},
}));
function HabitRow({ habit, dates, checkmarks }) {
const classes = useStyles();
const { id, name, frequency /* position */ } = habit;
return (
<TableRow hover>
<TableCell
component="th"
scope="row"
align="left"
className={classes.minWidth}
>
<Typography variant="body1">{name}</Typography>
</TableCell>
{dates.map((date) => {
const dateObj = parseISO(date);
const disabled = !frequency.includes((getDay(dateObj)-1)%7);
console.log(frequency);
const checkmark = checkmarks.find((d) => d.date === date);
return (
<TableCell align="center" key={date} className={classes.minWidth}>
<Checkmark
id={checkmark?.id || null}
initialValue={checkmark?.value || EMPTY}
habitId={id}
date={date}
disabled={disabled}
/>
</TableCell>
);
})}
</TableRow>
);
}
HabitRow.propTypes = {
habit: PropTypes.shape({
id: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
frequency: PropTypes.arrayOf(PropTypes.number).isRequired,
}).isRequired,
dates: PropTypes.arrayOf(PropTypes.string).isRequired,
};
export { HabitRow };
|