Skip to content

Commit 6296ab6

Browse files
mlaursenmlaursen
committed
temp
1 parent 9f89d9a commit 6296ab6

File tree

213 files changed

+23610
-7
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

213 files changed

+23610
-7
lines changed

‎apps/docs/src/app/(main)/(markdown)/(demos)/components/analog-clock/SimpleExample.tsx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { Box } from "@react-md/core/box/Box";
2+
import { Switch } from "@react-md/core/form/Switch";
3+
import { Typography } from "@react-md/core/typography/Typography";
4+
import { dateUtils } from "@react-md/datetime/DateUtils";
5+
import { AnalogClockV1 } from "@react-md/datetime/analog-clock-v1/AnalogClockV1";
6+
import { AnalogClock } from "@react-md/datetime/analog-clock/AnalogClock";
7+
import { type ReadonlyDate } from "@react-md/datetime/types";
8+
import { type ReactElement, useState } from "react";
9+
10+
export default function SimpleExample(): ReactElement {
11+
const [date, setDate] = useState<ReadonlyDate | null>(
12+
() => new Date("2025-05-01T00:00:00")
13+
);
14+
const [is24h, set24h] = useState(false);
15+
return (
16+
<Box align="start" stacked>
17+
<Typography>
18+
12h time: {date && dateUtils.format(date, "hh:mm a")}
19+
</Typography>
20+
<Typography>
21+
24h time: {date && dateUtils.format(date, "HH:mm")}
22+
</Typography>
23+
<Switch label="is24h" checked={is24h} onChange={() => set24h(!is24h)} />
24+
<AnalogClock
25+
date={date}
26+
onDateChange={setDate}
27+
is24h={is24h}
28+
views={["hour"]}
29+
/>
30+
<AnalogClockV1
31+
date={date}
32+
onDateChange={setDate}
33+
is24h={is24h}
34+
views={["hour"]}
35+
/>
36+
</Box>
37+
);
38+
}

‎apps/docs/src/app/(main)/(markdown)/(demos)/components/analog-clock/page.mdx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
title: Analog CLock
3+
description: Render a calendar
4+
docType: Demo
5+
docGroup: Components
6+
group: Date & Time
7+
components: [AnalogClock]
8+
---
9+
10+
# Analog Clock
11+
12+
## Simple Example
13+
14+
```demo source="./SimpleExample.tsx"
15+
16+
```

‎apps/docs/src/app/(main)/(markdown)/(demos)/components/calendar/DatePicker.tsx

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
"use client";
2+
3+
import { Button } from "@react-md/core/button/Button";
4+
import { FixedDialog } from "@react-md/core/dialog/FixedDialog";
5+
import { TextField } from "@react-md/core/form/TextField";
6+
import { getIcon } from "@react-md/core/icon/config";
7+
import { BELOW_CENTER_ANCHOR } from "@react-md/core/positioning/constants";
8+
import { DEFAULT_SCALE_Y_CLASSNAMES } from "@react-md/core/transition/useScaleTransition";
9+
import { useToggle } from "@react-md/core/useToggle";
10+
import { Calendar } from "@react-md/datetime/calendar/Calendar";
11+
import { type ReactElement, useRef } from "react";
12+
13+
export function DatePicker(): ReactElement {
14+
const containerRef = useRef<HTMLDivElement>(null);
15+
const { toggled: visible, enable: show, disable: hide } = useToggle();
16+
return (
17+
<div>
18+
<TextField
19+
label="Date"
20+
name="date"
21+
rightAddon={
22+
<Button
23+
onClick={show}
24+
buttonType="icon"
25+
aria-label="Show Date Picker"
26+
>
27+
{getIcon("date")}
28+
</Button>
29+
}
30+
containerProps={{
31+
ref: containerRef,
32+
}}
33+
disableRightAddonStyles
34+
messageProps={{
35+
children: "MM/DD/YYYY",
36+
}}
37+
messageContainerProps={{
38+
// ref: containerRef,
39+
style: { width: "22.5rem" },
40+
}}
41+
/>
42+
<FixedDialog
43+
aria-label="Date Picker"
44+
anchor={BELOW_CENTER_ANCHOR}
45+
fixedTo={containerRef}
46+
visible={visible}
47+
onRequestClose={hide}
48+
style={{
49+
height: "28.5rem",
50+
width: "22.5rem",
51+
}}
52+
classNames={DEFAULT_SCALE_Y_CLASSNAMES}
53+
getFixedPositionOptions={() => ({
54+
yMargin: 40,
55+
})}
56+
>
57+
<Calendar />
58+
</FixedDialog>
59+
</div>
60+
);
61+
}

‎apps/docs/src/app/(main)/(markdown)/(demos)/components/calendar/SimpleCoreExample.tsx

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
"use client";
2+
3+
import { Box } from "@react-md/core/box/Box";
4+
import { Button } from "@react-md/core/button/Button";
5+
import { Calendar } from "@react-md/core/calendar/Calendar";
6+
import { type DayOfWeek } from "@react-md/core/calendar/types";
7+
import { Dialog } from "@react-md/core/dialog/Dialog";
8+
import { Switch } from "@react-md/core/form/Switch";
9+
import { TextField } from "@react-md/core/form/TextField";
10+
import { useNumberField } from "@react-md/core/form/useNumberField";
11+
import { useAppSize } from "@react-md/core/media-queries/AppSizeProvider";
12+
import { Typography } from "@react-md/core/typography/Typography";
13+
import { useToggle } from "@react-md/core/useToggle";
14+
import { type ReactElement, useState } from "react";
15+
16+
const noop = (): void => {
17+
// do nothing
18+
};
19+
20+
function ConditionalDialog({ children }): ReactElement {
21+
const { isPhone } = useAppSize();
22+
if (!isPhone) {
23+
return <>{children}</>;
24+
}
25+
26+
return (
27+
<Dialog
28+
aria-label="Boop"
29+
visible
30+
onRequestClose={noop}
31+
//containerProps={{
32+
// style: { "--rmd-dialog-horizontal-margin": "0.5rem" },
33+
//}}
34+
>
35+
{children}
36+
</Dialog>
37+
);
38+
}
39+
40+
export default function SimpleExample(): ReactElement {
41+
const [date, setDate] = useState(() => new Date());
42+
const {
43+
toggle: toggleShowDaysInOtherMonths,
44+
toggled: showDaysInOtherMonths,
45+
} = useToggle();
46+
const { toggle: toggleShowWeekNumbers, toggled: showWeekNumbers } =
47+
useToggle();
48+
const { toggle: toggleDisableWeekends, toggled: disableWeekends } =
49+
useToggle();
50+
const { toggle: toggleDisableFutureDates, toggled: disableFutureDates } =
51+
useToggle();
52+
const { toggle: toggleDisablePastDates, toggled: disablePastDates } =
53+
useToggle();
54+
const { fieldProps, value: firstDayOfWeek } = useNumberField({
55+
name: "firstDayOfWeek",
56+
min: 0,
57+
max: 6,
58+
defaultValue: 0,
59+
});
60+
return (
61+
<>
62+
<Box stacked fullWidth align="start">
63+
<Switch
64+
label="Show days in other months"
65+
checked={showDaysInOtherMonths}
66+
onChange={toggleShowDaysInOtherMonths}
67+
/>
68+
<Switch
69+
label="Show week numbers"
70+
checked={showWeekNumbers}
71+
onChange={toggleShowWeekNumbers}
72+
/>
73+
<Switch
74+
label="Disable weekends"
75+
checked={disableWeekends}
76+
onChange={toggleDisableWeekends}
77+
/>
78+
<Switch
79+
label="Disable future dates"
80+
checked={disableFutureDates}
81+
onChange={toggleDisableFutureDates}
82+
/>
83+
<Switch
84+
label="Disable past dates"
85+
checked={disablePastDates}
86+
onChange={toggleDisablePastDates}
87+
/>
88+
<TextField label="first day of week" {...fieldProps} />
89+
</Box>
90+
<Box>
91+
<Button
92+
onClick={() => {
93+
setDate((prev) => {
94+
const d = new Date(prev);
95+
d.setUTCMonth(d.getUTCMonth() - 1);
96+
return d;
97+
});
98+
}}
99+
>
100+
Prev
101+
</Button>
102+
<Typography>{date.toLocaleDateString()}</Typography>
103+
<Button onClick={() => setDate(new Date())}>Today</Button>
104+
<Button
105+
onClick={() => {
106+
setDate((prev) => {
107+
const d = new Date(prev);
108+
d.setUTCMonth(d.getUTCMonth() + 1);
109+
return d;
110+
});
111+
}}
112+
>
113+
Next
114+
</Button>
115+
</Box>
116+
<ConditionalDialog>
117+
<Calendar
118+
referenceDate={date}
119+
setReferenceDate={setDate}
120+
firstDayOfWeek={firstDayOfWeek as DayOfWeek}
121+
showWeekNumbers={showWeekNumbers}
122+
showDaysInOtherMonths={showDaysInOtherMonths}
123+
disableFutureDates={disableFutureDates}
124+
disablePastDates={disablePastDates}
125+
disableWeekends={disableWeekends}
126+
/>
127+
</ConditionalDialog>
128+
{false && (
129+
<>
130+
<Calendar date={date} firstDayOfWeek={1} />
131+
<Calendar date={date} firstDayOfWeek={2} />
132+
<Calendar date={date} firstDayOfWeek={3} />
133+
<Calendar date={date} firstDayOfWeek={4} />
134+
<Calendar date={date} firstDayOfWeek={5} />
135+
<Calendar date={date} firstDayOfWeek={6} />
136+
</>
137+
)}
138+
</>
139+
);
140+
}

0 commit comments

Comments
 (0)