--- /dev/null
+import React, { forwardRef } from 'react';
+import { Menu, Box, Text, Chip } from 'folds';
+import dayjs from 'dayjs';
+import * as css from './styles.css';
+import { PickerColumn } from './PickerColumn';
+import { dateFor, daysInMonth, daysToMs } from '../../utils/time';
+
+type DatePickerProps = {
+ min: number;
+ max: number;
+ value: number;
+ onChange: (value: number) => void;
+};
+export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
+ ({ min, max, value, onChange }, ref) => {
+ const selectedYear = dayjs(value).year();
+ const selectedMonth = dayjs(value).month() + 1;
+ const selectedDay = dayjs(value).date();
+
+ const handleSubmit = (newValue: number) => {
+ onChange(Math.min(Math.max(min, newValue), max));
+ };
+
+ const handleDay = (day: number) => {
+ const seconds = daysToMs(day);
+ const lastSeconds = daysToMs(selectedDay);
+ const newValue = value + (seconds - lastSeconds);
+ handleSubmit(newValue);
+ };
+
+ const handleMonthAndYear = (month: number, year: number) => {
+ const mDays = daysInMonth(month, year);
+ const currentDate = dateFor(selectedYear, selectedMonth, selectedDay);
+ const time = value - currentDate;
+
+ const newDate = dateFor(year, month, mDays < selectedDay ? mDays : selectedDay);
+
+ const newValue = newDate + time;
+ handleSubmit(newValue);
+ };
+
+ const handleMonth = (month: number) => {
+ handleMonthAndYear(month, selectedYear);
+ };
+
+ const handleYear = (year: number) => {
+ handleMonthAndYear(selectedMonth, year);
+ };
+
+ const minYear = dayjs(min).year();
+ const maxYear = dayjs(max).year();
+ const yearsRange = maxYear - minYear + 1;
+
+ const minMonth = dayjs(min).month() + 1;
+ const maxMonth = dayjs(max).month() + 1;
+
+ const minDay = dayjs(min).date();
+ const maxDay = dayjs(max).date();
+ return (
+ <Menu className={css.PickerMenu} ref={ref}>
+ <Box direction="Row" gap="200" className={css.PickerContainer}>
+ <PickerColumn title="Day">
+ {Array.from(Array(daysInMonth(selectedMonth, selectedYear)).keys())
+ .map((i) => i + 1)
+ .map((day) => (
+ <Chip
+ key={day}
+ size="500"
+ variant={selectedDay === day ? 'Primary' : 'SurfaceVariant'}
+ fill="None"
+ radii="300"
+ aria-selected={selectedDay === day}
+ onClick={() => handleDay(day)}
+ disabled={
+ (selectedYear === minYear && selectedMonth === minMonth && day < minDay) ||
+ (selectedYear === maxYear && selectedMonth === maxMonth && day > maxDay)
+ }
+ >
+ <Text size="T300">{day}</Text>
+ </Chip>
+ ))}
+ </PickerColumn>
+ <PickerColumn title="Month">
+ {Array.from(Array(12).keys())
+ .map((i) => i + 1)
+ .map((month) => (
+ <Chip
+ key={month}
+ size="500"
+ variant={selectedMonth === month ? 'Primary' : 'SurfaceVariant'}
+ fill="None"
+ radii="300"
+ aria-selected={selectedMonth === month}
+ onClick={() => handleMonth(month)}
+ disabled={
+ (selectedYear === minYear && month < minMonth) ||
+ (selectedYear === maxYear && month > maxMonth)
+ }
+ >
+ <Text size="T300">
+ {dayjs()
+ .month(month - 1)
+ .format('MMM')}
+ </Text>
+ </Chip>
+ ))}
+ </PickerColumn>
+ <PickerColumn title="Year">
+ {Array.from(Array(yearsRange).keys())
+ .map((i) => minYear + i)
+ .map((year) => (
+ <Chip
+ key={year}
+ size="500"
+ variant={selectedYear === year ? 'Primary' : 'SurfaceVariant'}
+ fill="None"
+ radii="300"
+ aria-selected={selectedYear === year}
+ onClick={() => handleYear(year)}
+ >
+ <Text size="T300">{year}</Text>
+ </Chip>
+ ))}
+ </PickerColumn>
+ </Box>
+ </Menu>
+ );
+ }
+);
--- /dev/null
+import React, { ReactNode } from 'react';
+import { Box, Text, Scroll } from 'folds';
+import { CutoutCard } from '../cutout-card';
+import * as css from './styles.css';
+
+export function PickerColumn({ title, children }: { title: string; children: ReactNode }) {
+ return (
+ <Box direction="Column" gap="100">
+ <Text className={css.PickerColumnLabel} size="L400">
+ {title}
+ </Text>
+ <Box grow="Yes">
+ <CutoutCard variant="Background">
+ <Scroll variant="Background" size="300" hideTrack>
+ <Box className={css.PickerColumnContent} direction="Column" gap="100">
+ {children}
+ </Box>
+ </Scroll>
+ </CutoutCard>
+ </Box>
+ </Box>
+ );
+}
--- /dev/null
+import React, { forwardRef } from 'react';
+import { Menu, Box, Text, Chip } from 'folds';
+import dayjs from 'dayjs';
+import * as css from './styles.css';
+import { PickerColumn } from './PickerColumn';
+import { hour12to24, hour24to12, hoursToMs, inSameDay, minutesToMs } from '../../utils/time';
+
+type TimePickerProps = {
+ min: number;
+ max: number;
+ value: number;
+ onChange: (value: number) => void;
+};
+export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
+ ({ min, max, value, onChange }, ref) => {
+ const hour24 = dayjs(value).hour();
+
+ const selectedHour = hour24to12(hour24);
+ const selectedMinute = dayjs(value).minute();
+ const selectedPM = hour24 >= 12;
+
+ const handleSubmit = (newValue: number) => {
+ onChange(Math.min(Math.max(min, newValue), max));
+ };
+
+ const handleHour = (hour: number) => {
+ const seconds = hoursToMs(hour12to24(hour, selectedPM));
+ const lastSeconds = hoursToMs(hour24);
+ const newValue = value + (seconds - lastSeconds);
+ handleSubmit(newValue);
+ };
+
+ const handleMinute = (minute: number) => {
+ const seconds = minutesToMs(minute);
+ const lastSeconds = minutesToMs(selectedMinute);
+ const newValue = value + (seconds - lastSeconds);
+ handleSubmit(newValue);
+ };
+
+ const handlePeriod = (pm: boolean) => {
+ const seconds = hoursToMs(hour12to24(selectedHour, pm));
+ const lastSeconds = hoursToMs(hour24);
+ const newValue = value + (seconds - lastSeconds);
+ handleSubmit(newValue);
+ };
+
+ const minHour24 = dayjs(min).hour();
+ const maxHour24 = dayjs(max).hour();
+
+ const minMinute = dayjs(min).minute();
+ const maxMinute = dayjs(max).minute();
+ const minPM = minHour24 >= 12;
+ const maxPM = maxHour24 >= 12;
+
+ const minDay = inSameDay(min, value);
+ const maxDay = inSameDay(max, value);
+
+ return (
+ <Menu className={css.PickerMenu} ref={ref}>
+ <Box direction="Row" gap="200" className={css.PickerContainer}>
+ <PickerColumn title="Hour">
+ {Array.from(Array(12).keys())
+ .map((i) => {
+ if (i === 0) return 12;
+ return i;
+ })
+ .map((hour) => (
+ <Chip
+ key={hour}
+ size="500"
+ variant={hour === selectedHour ? 'Primary' : 'Background'}
+ fill="None"
+ radii="300"
+ aria-selected={hour === selectedHour}
+ onClick={() => handleHour(hour)}
+ disabled={
+ (minDay && hour12to24(hour, selectedPM) < minHour24) ||
+ (maxDay && hour12to24(hour, selectedPM) > maxHour24)
+ }
+ >
+ <Text size="T300">{hour < 10 ? `0${hour}` : hour}</Text>
+ </Chip>
+ ))}
+ </PickerColumn>
+ <PickerColumn title="Minutes">
+ {Array.from(Array(60).keys()).map((minute) => (
+ <Chip
+ key={minute}
+ size="500"
+ variant={minute === selectedMinute ? 'Primary' : 'Background'}
+ fill="None"
+ radii="300"
+ aria-selected={minute === selectedMinute}
+ onClick={() => handleMinute(minute)}
+ disabled={
+ (minDay && hour24 === minHour24 && minute < minMinute) ||
+ (maxDay && hour24 === maxHour24 && minute > maxMinute)
+ }
+ >
+ <Text size="T300">{minute < 10 ? `0${minute}` : minute}</Text>
+ </Chip>
+ ))}
+ </PickerColumn>
+ <PickerColumn title="Period">
+ <Chip
+ size="500"
+ variant={!selectedPM ? 'Primary' : 'SurfaceVariant'}
+ fill="None"
+ radii="300"
+ aria-selected={!selectedPM}
+ onClick={() => handlePeriod(false)}
+ disabled={minDay && minPM}
+ >
+ <Text size="T300">AM</Text>
+ </Chip>
+ <Chip
+ size="500"
+ variant={selectedPM ? 'Primary' : 'SurfaceVariant'}
+ fill="None"
+ radii="300"
+ aria-selected={selectedPM}
+ onClick={() => handlePeriod(true)}
+ disabled={maxDay && !maxPM}
+ >
+ <Text size="T300">PM</Text>
+ </Chip>
+ </PickerColumn>
+ </Box>
+ </Menu>
+ );
+ }
+);
--- /dev/null
+export * from './TimePicker';
+export * from './DatePicker';
--- /dev/null
+import { style } from '@vanilla-extract/css';
+import { config, toRem } from 'folds';
+
+export const PickerMenu = style({
+ padding: config.space.S200,
+});
+export const PickerContainer = style({
+ maxHeight: toRem(250),
+});
+export const PickerColumnLabel = style({
+ padding: config.space.S200,
+});
+export const PickerColumnContent = style({
+ padding: config.space.S200,
+ paddingRight: 0,
+});
getRoomNotificationModeIcon,
useRoomsNotificationPreferencesContext,
} from '../../hooks/useRoomsNotificationPreferences';
+import { JumpToTime } from './jump-to-time';
+import { useRoomNavigate } from '../../hooks/useRoomNavigate';
type RoomMenuProps = {
room: Room;
const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
const notificationPreferences = useRoomsNotificationPreferencesContext();
const notificationMode = getRoomNotificationMode(notificationPreferences, room.roomId);
+ const { navigateRoom } = useRoomNavigate();
const handleMarkAsRead = () => {
markAsRead(mx, room.roomId, hideActivity);
Room Settings
</Text>
</MenuItem>
+ <UseStateProvider initial={false}>
+ {(promptJump, setPromptJump) => (
+ <>
+ <MenuItem
+ onClick={() => setPromptJump(true)}
+ size="300"
+ after={<Icon size="100" src={Icons.RecentClock} />}
+ radii="300"
+ aria-pressed={promptJump}
+ >
+ <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
+ Jump to Time
+ </Text>
+ </MenuItem>
+ {promptJump && (
+ <JumpToTime
+ onSubmit={(eventId) => {
+ setPromptJump(false);
+ navigateRoom(room.roomId, eventId);
+ requestClose();
+ }}
+ onCancel={() => setPromptJump(false)}
+ />
+ )}
+ </>
+ )}
+ </UseStateProvider>
</Box>
<Line variant="Surface" size="300" />
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
--- /dev/null
+import React, { MouseEventHandler, useCallback, useMemo, useState } from 'react';
+import FocusTrap from 'focus-trap-react';
+import {
+ Dialog,
+ Overlay,
+ OverlayCenter,
+ OverlayBackdrop,
+ Header,
+ config,
+ Box,
+ Text,
+ IconButton,
+ Icon,
+ Icons,
+ color,
+ Button,
+ Spinner,
+ Chip,
+ PopOut,
+ RectCords,
+} from 'folds';
+import { Direction, MatrixError } from 'matrix-js-sdk';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { stopPropagation } from '../../../utils/keyboard';
+import { useAlive } from '../../../hooks/useAlive';
+import { useStateEvent } from '../../../hooks/useStateEvent';
+import { useRoom } from '../../../hooks/useRoom';
+import { StateEvent } from '../../../../types/matrix/room';
+import { getToday, getYesterday, timeDayMonthYear, timeHourMinute } from '../../../utils/time';
+import { DatePicker, TimePicker } from '../../../components/time-date';
+
+type JumpToTimeProps = {
+ onCancel: () => void;
+ onSubmit: (eventId: string) => void;
+};
+export function JumpToTime({ onCancel, onSubmit }: JumpToTimeProps) {
+ const mx = useMatrixClient();
+ const room = useRoom();
+ const alive = useAlive();
+ const createStateEvent = useStateEvent(room, StateEvent.RoomCreate);
+
+ const todayTs = getToday();
+ const yesterdayTs = getYesterday();
+ const createTs = useMemo(() => createStateEvent?.getTs() ?? 0, [createStateEvent]);
+ const [ts, setTs] = useState(() => Date.now());
+
+ const [timePickerCords, setTimePickerCords] = useState<RectCords>();
+ const [datePickerCords, setDatePickerCords] = useState<RectCords>();
+
+ const handleTimePicker: MouseEventHandler<HTMLButtonElement> = (evt) => {
+ setTimePickerCords(evt.currentTarget.getBoundingClientRect());
+ };
+ const handleDatePicker: MouseEventHandler<HTMLButtonElement> = (evt) => {
+ setDatePickerCords(evt.currentTarget.getBoundingClientRect());
+ };
+
+ const handleToday = () => {
+ setTs(todayTs < createTs ? createTs : todayTs);
+ };
+ const handleYesterday = () => {
+ setTs(yesterdayTs < createTs ? createTs : yesterdayTs);
+ };
+ const handleBeginning = () => setTs(createTs);
+
+ const [timestampState, timestampToEvent] = useAsyncCallback<string, MatrixError, [number]>(
+ useCallback(
+ async (newTs) => {
+ const result = await mx.timestampToEvent(room.roomId, newTs, Direction.Forward);
+ return result.event_id;
+ },
+ [mx, room]
+ )
+ );
+
+ const handleSubmit = () => {
+ timestampToEvent(ts).then((eventId) => {
+ if (alive()) {
+ onSubmit(eventId);
+ }
+ });
+ };
+
+ return (
+ <Overlay open backdrop={<OverlayBackdrop />}>
+ <OverlayCenter>
+ <FocusTrap
+ focusTrapOptions={{
+ initialFocus: false,
+ onDeactivate: onCancel,
+ clickOutsideDeactivates: true,
+ escapeDeactivates: stopPropagation,
+ }}
+ >
+ <Dialog variant="Surface">
+ <Header
+ style={{
+ padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
+ borderBottomWidth: config.borderWidth.B300,
+ }}
+ variant="Surface"
+ size="500"
+ >
+ <Box grow="Yes">
+ <Text size="H4">Jump to Time</Text>
+ </Box>
+ <IconButton size="300" onClick={onCancel} radii="300">
+ <Icon src={Icons.Cross} />
+ </IconButton>
+ </Header>
+ <Box style={{ padding: config.space.S400 }} direction="Column" gap="500">
+ <Box direction="Row" gap="300">
+ <Box direction="Column" gap="100">
+ <Text size="L400" priority="400">
+ Time
+ </Text>
+ <Box gap="100" alignItems="Center">
+ <Chip
+ size="500"
+ variant="Surface"
+ fill="None"
+ outlined
+ radii="300"
+ aria-pressed={!!timePickerCords}
+ after={<Icon size="50" src={Icons.ChevronBottom} />}
+ onClick={handleTimePicker}
+ >
+ <Text size="B300">{timeHourMinute(ts)}</Text>
+ </Chip>
+ <PopOut
+ anchor={timePickerCords}
+ offset={5}
+ position="Bottom"
+ align="Center"
+ content={
+ <FocusTrap
+ focusTrapOptions={{
+ initialFocus: false,
+ onDeactivate: () => setTimePickerCords(undefined),
+ clickOutsideDeactivates: true,
+ isKeyForward: (evt: KeyboardEvent) =>
+ evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
+ isKeyBackward: (evt: KeyboardEvent) =>
+ evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
+ escapeDeactivates: stopPropagation,
+ }}
+ >
+ <TimePicker min={createTs} max={Date.now()} value={ts} onChange={setTs} />
+ </FocusTrap>
+ }
+ />
+ </Box>
+ </Box>
+ <Box direction="Column" gap="100">
+ <Text size="L400" priority="400">
+ Date
+ </Text>
+ <Box gap="100" alignItems="Center">
+ <Chip
+ size="500"
+ variant="Surface"
+ fill="None"
+ outlined
+ radii="300"
+ aria-pressed={!!datePickerCords}
+ after={<Icon size="50" src={Icons.ChevronBottom} />}
+ onClick={handleDatePicker}
+ >
+ <Text size="B300">{timeDayMonthYear(ts)}</Text>
+ </Chip>
+ <PopOut
+ anchor={datePickerCords}
+ offset={5}
+ position="Bottom"
+ align="Center"
+ content={
+ <FocusTrap
+ focusTrapOptions={{
+ initialFocus: false,
+ onDeactivate: () => setDatePickerCords(undefined),
+ clickOutsideDeactivates: true,
+ isKeyForward: (evt: KeyboardEvent) =>
+ evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
+ isKeyBackward: (evt: KeyboardEvent) =>
+ evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
+ escapeDeactivates: stopPropagation,
+ }}
+ >
+ <DatePicker min={createTs} max={Date.now()} value={ts} onChange={setTs} />
+ </FocusTrap>
+ }
+ />
+ </Box>
+ </Box>
+ </Box>
+ <Box direction="Column" gap="100">
+ <Text size="L400">Preset</Text>
+ <Box gap="200">
+ {createTs < todayTs && (
+ <Chip
+ variant={ts === todayTs ? 'Success' : 'SurfaceVariant'}
+ radii="Pill"
+ aria-pressed={ts === todayTs}
+ onClick={handleToday}
+ >
+ <Text size="B300">Today</Text>
+ </Chip>
+ )}
+ {createTs < yesterdayTs && (
+ <Chip
+ variant={ts === yesterdayTs ? 'Success' : 'SurfaceVariant'}
+ radii="Pill"
+ aria-pressed={ts === yesterdayTs}
+ onClick={handleYesterday}
+ >
+ <Text size="B300">Yesterday</Text>
+ </Chip>
+ )}
+ <Chip
+ variant={ts === createTs ? 'Success' : 'SurfaceVariant'}
+ radii="Pill"
+ aria-pressed={ts === createTs}
+ onClick={handleBeginning}
+ >
+ <Text size="B300">Beginning</Text>
+ </Chip>
+ </Box>
+ </Box>
+ {timestampState.status === AsyncStatus.Error && (
+ <Text style={{ color: color.Critical.Main }} size="T300">
+ {timestampState.error.message}
+ </Text>
+ )}
+ <Button
+ type="submit"
+ variant="Primary"
+ before={
+ timestampState.status === AsyncStatus.Loading ? (
+ <Spinner fill="Solid" variant="Primary" size="200" />
+ ) : undefined
+ }
+ aria-disabled={
+ timestampState.status === AsyncStatus.Loading ||
+ timestampState.status === AsyncStatus.Success
+ }
+ onClick={handleSubmit}
+ >
+ <Text size="B400">Open Timeline</Text>
+ </Button>
+ </Box>
+ </Dialog>
+ </FocusTrap>
+ </OverlayCenter>
+ </Overlay>
+ );
+}
--- /dev/null
+export * from './JumpToTime';
export const yesterday = (ts: number): boolean => dayjs(ts).isYesterday();
+export const timeHour = (ts: number): string => dayjs(ts).format('hh');
+export const timeMinute = (ts: number): string => dayjs(ts).format('mm');
+export const timeAmPm = (ts: number): string => dayjs(ts).format('A');
+export const timeDay = (ts: number): string => dayjs(ts).format('D');
+export const timeMon = (ts: number): string => dayjs(ts).format('MMM');
+export const timeMonth = (ts: number): string => dayjs(ts).format('MMMM');
+export const timeYear = (ts: number): string => dayjs(ts).format('YYYY');
+
export const timeHourMinute = (ts: number): string => dayjs(ts).format('hh:mm A');
export const timeDayMonYear = (ts: number): string => dayjs(ts).format('D MMM YYYY');
export const timeDayMonthYear = (ts: number): string => dayjs(ts).format('D MMMM YYYY');
+export const daysInMonth = (month: number, year: number): number =>
+ dayjs(`${year}-${month}-1`).daysInMonth();
+
+export const dateFor = (year: number, month: number, day: number): number =>
+ dayjs(`${year}-${month}-${day}`).valueOf();
+
export const inSameDay = (ts1: number, ts2: number): boolean => {
const dt1 = new Date(ts1);
const dt2 = new Date(ts2);
diff /= 60;
return Math.abs(Math.round(diff));
};
+
+export const hour24to12 = (hour24: number): number => {
+ const h = hour24 % 12;
+
+ if (h === 0) return 12;
+ return h;
+};
+
+export const hour12to24 = (hour: number, pm: boolean): number => {
+ if (hour === 12) {
+ return pm ? 12 : 0;
+ }
+ return pm ? hour + 12 : hour;
+};
+
+export const secondsToMs = (seconds: number) => seconds * 1000;
+
+export const minutesToMs = (minutes: number) => minutes * secondsToMs(60);
+
+export const hoursToMs = (hour: number) => hour * minutesToMs(60);
+
+export const daysToMs = (days: number) => days * hoursToMs(24);
+
+export const getToday = () => {
+ const nowTs = Date.now();
+ const date = dayjs(nowTs);
+ return dateFor(date.year(), date.month() + 1, date.date());
+};
+
+export const getYesterday = () => {
+ const nowTs = Date.now() - daysToMs(1);
+ const date = dayjs(nowTs);
+ return dateFor(date.year(), date.month() + 1, date.date());
+};
projects / rainny.git / commitdiff