watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-06 21:57:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Zen components conversion.

Browse source
This commit is contained in:
Mike Cao 2025-03-07 03:11:58 -08:00
parent aac1a12e51
commit 5999bf6256
142 changed files with 1235 additions and 1454 deletions
Download patch file Download diff file Expand all files Collapse all files

88
src/components/input/MonthSelect.tsx
View file

@ -1,14 +1,6 @@
import { useRef } from 'react';
import {
Text,
Icon,
CalendarMonthSelect,
CalendarYearSelect,
Button,
PopupTrigger,
Popup,
} from 'react-basics';
import { startOfMonth, endOfMonth } from 'date-fns';
import { Row, Text, Icon, Button, MenuTrigger, Popover, Menu, MenuItem } from '@umami/react-zen';
import { startOfMonth, endOfMonth, startOfYear, addMonths, subYears } from 'date-fns';
import { Icons } from '@/components/icons';
import { useLocale } from '@/components/hooks';
import { formatDate } from '@/lib/date';
@ -25,40 +17,48 @@ export function MonthSelect({ date = new Date(), onChange }) {
close();
};
const start = startOfYear(date);
const months: Date[] = [];
for (let i = 0; i < 12; i++) {
months.push(addMonths(start, i));
}
const years: number[] = [];
for (let i = 0; i < 10; i++) {
years.push(subYears(start, 10 - i).getFullYear());
}
return (
<>
<div ref={ref} className={styles.container}>
<PopupTrigger>
<Button className={styles.input} variant="quiet">
<Text>{month}</Text>
<Icon size="sm">
<Icons.ChevronDown />
</Icon>
</Button>
<Popup className={styles.popup} alignment="start">
{close => (
<CalendarMonthSelect
date={date}
locale={dateLocale}
onSelect={handleChange.bind(null, close)}
/>
)}
</Popup>
</PopupTrigger>
<PopupTrigger>
<Button className={styles.input} variant="quiet">
<Text>{year}</Text>
<Icon size="sm">
<Icons.ChevronDown />
</Icon>
</Button>
<Popup className={styles.popup} alignment="start">
{(close: any) => (
<CalendarYearSelect date={date} onSelect={handleChange.bind(null, close)} />
)}
</Popup>
</PopupTrigger>
</div>
</>
<Row>
<MenuTrigger>
<Button className={styles.input} variant="quiet">
<Text>{month}</Text>
<Icon size="sm">
<Icons.Chevron />
</Icon>
</Button>
<Popover>
<Menu items={months}>
{month => {
return <MenuItem id={month}>{month.getDay()}</MenuItem>;
}}
</Menu>
</Popover>
</MenuTrigger>
<MenuTrigger>
<Button className={styles.input} variant="quiet">
<Text>{year}</Text>
<Icon size="sm">
<Icons.Chevron />
</Icon>
</Button>
<Popover>
<Menu items={years}>
{year => {
return <MenuItem id={year}>{year}</MenuItem>;
}}
</Menu>
</Popover>
</MenuTrigger>
</Row>
);
}