Fixed build error and refactor

This commit is contained in:
Tagaishi
2023-07-17 00:26:10 +02:00
parent b6df54c4c0
commit fec7d6db58
2 changed files with 18 additions and 14 deletions

View File

@@ -1,4 +1,4 @@
import { Container, Indicator, IndicatorProps, Popover, Center } from '@mantine/core'; import { Container, Indicator, IndicatorProps, Popover, useMantineTheme, Button } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks'; import { useDisclosure } from '@mantine/hooks';
import { MediaList } from './MediaList'; import { MediaList } from './MediaList';
import { MediasType } from './type'; import { MediasType } from './type';
@@ -12,6 +12,7 @@ interface CalendarDayProps {
export const CalendarDay = ({ date, medias, size }: CalendarDayProps) => { export const CalendarDay = ({ date, medias, size }: CalendarDayProps) => {
const [opened, { close, open }] = useDisclosure(false); const [opened, { close, open }] = useDisclosure(false);
const { radius, fn } = useMantineTheme();
var indicatorSize = 10; var indicatorSize = 10;
var indicatorOffset = -4; var indicatorOffset = -4;
switch(size){ switch(size){
@@ -54,18 +55,21 @@ export const CalendarDay = ({ date, medias, size }: CalendarDayProps) => {
}} }}
onClose={close} onClose={close}
opened={opened} opened={opened}
sx={(theme : any) => ({ >
<Popover.Target>
<Container
onClick={medias.totalCount > 0 ? open : undefined}
sx={{ root: {
padding:'18% !important', padding:'18% !important',
height: '100%', height: '100%',
width: '100%', width: '100%',
borderRadius: (size!=="xs" && size!=="sm")?theme.radius.lg:theme.radius.md, alignContent: 'center',
borderRadius: ['xs','sm'].includes(size) ? radius.md : radius.lg,
borderStyle: "solid", borderStyle: "solid",
borderWidth: "0.2rem", borderWidth: "0.2rem",
borderColor: opened? theme.fn.primaryColor() : '#00000000', borderColor: opened ? fn.primaryColor() : 'transparent',
})} }}}
> >
<Popover.Target>
<Container align="center" onClick={(medias.totalCount === 0)? undefined:open}>
<DayIndicator size={indicatorSize} offset={indicatorOffset} color="red" position="bottom-start" medias={medias.books}> <DayIndicator size={indicatorSize} offset={indicatorOffset} color="red" position="bottom-start" medias={medias.books}>
<DayIndicator size={indicatorSize} offset={indicatorOffset} color="yellow" position="top-start" medias={medias.movies}> <DayIndicator size={indicatorSize} offset={indicatorOffset} color="yellow" position="top-start" medias={medias.movies}>
<DayIndicator size={indicatorSize} offset={indicatorOffset} color="blue" position="top-end" medias={medias.tvShows}> <DayIndicator size={indicatorSize} offset={indicatorOffset} color="blue" position="top-end" medias={medias.tvShows}>
@@ -77,7 +81,7 @@ export const CalendarDay = ({ date, medias, size }: CalendarDayProps) => {
</DayIndicator> </DayIndicator>
</Container> </Container>
</Popover.Target> </Popover.Target>
<Popover.Dropdown disabled = {(medias.totalCount === 0)? false:true}> <Popover.Dropdown>
<MediaList medias={medias} /> <MediaList medias={medias} />
</Popover.Dropdown> </Popover.Dropdown>
</Popover> </Popover>

View File

@@ -91,7 +91,7 @@ function CalendarTile({ widget }: CalendarTileProps) {
size={widget.properties.fontSize} size={widget.properties.fontSize}
locale={i18n?.resolvedLanguage ?? 'en'} locale={i18n?.resolvedLanguage ?? 'en'}
firstDayOfWeek={widget.properties.sundayStart ? 0 : 1} firstDayOfWeek={widget.properties.sundayStart ? 0 : 1}
hideWeekdays={widget.properties.hideWeekDays ? true : false} hideWeekdays={widget.properties.hideWeekDays}
style={{ position: 'relative' }} style={{ position: 'relative' }}
date={month} date={month}
maxLevel="month" maxLevel="month"
@@ -129,7 +129,7 @@ function CalendarTile({ widget }: CalendarTileProps) {
flex: 1, flex: 1,
}, },
day:{ day:{
borderRadius: (widget.properties.fontSize !== "xs" && widget.properties.fontSize!=="sm")? radius.lg:radius.md, borderRadius: ['xs','sm'].includes(widget.properties.fontSize) ? radius.md : radius.lg,
}, },
}} }}
getDayProps={(date) => ({ getDayProps={(date) => ({