scott/crabfit
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Use time format setting in tooltip

Browse source
This commit is contained in:
Ben Grant 2021-03-11 14:09:49 +11:00
parent d5508e9f99
commit 4503fa4bf2
1 changed files with 5 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx
View file

@ -3,6 +3,8 @@ import dayjs from 'dayjs';
import localeData from 'dayjs/plugin/localeData';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import { useSettingsStore } from 'stores';
import {
Wrapper,
Container,
@ -35,6 +37,7 @@ const AvailabilityViewer = ({
...props
}) => {
const [tooltip, setTooltip] = useState(null);
const timeFormat = useSettingsStore(state => state.timeFormat);
return (
<Wrapper>
@ -77,11 +80,12 @@ const AvailabilityViewer = ({
minPeople={min}
onMouseEnter={(e) => {
const cellBox = e.currentTarget.getBoundingClientRect();
const timeText = timeFormat === '12h' ? 'h:mma' : 'HH:mm';
setTooltip({
x: Math.round(cellBox.x + cellBox.width/2),
y: Math.round(cellBox.y + cellBox.height)+6,
available: `${peopleHere.length} / ${people.length} available`,
date: parsedDate.hour(time.slice(0, 2)).minute(time.slice(2, 4)).format(isSpecificDates ? 'h:mma ddd, D MMM YYYY' : 'h:mma ddd'),
date: parsedDate.hour(time.slice(0, 2)).minute(time.slice(2, 4)).format(isSpecificDates ? `${timeText} ddd, D MMM YYYY` : `${timeText} ddd`),
people: peopleHere.join(', '),
});
}}