-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(docs): date-range-picker dx (#4104)
* refactor(docs): date-range-picker dx * fix(docs): date-range-picker dx
- Loading branch information
Showing
51 changed files
with
693 additions
and
806 deletions.
There are no files selected for viewing
36 changes: 36 additions & 0 deletions
36
apps/docs/content/components/date-range-picker/controlled.raw.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import {DateRangePicker} from "@nextui-org/react"; | ||
| import {parseDate, getLocalTimeZone} from "@internationalized/date"; | ||
| import {useDateFormatter} from "@react-aria/i18n"; | ||
|
|
||
| export default function App() { | ||
| const [value, setValue] = React.useState({ | ||
| start: parseDate("2024-04-01"), | ||
| end: parseDate("2024-04-08"), | ||
| }); | ||
|
|
||
| let formatter = useDateFormatter({dateStyle: "long"}); | ||
|
|
||
| return ( | ||
| <div className="flex flex-row gap-2"> | ||
| <div className="w-full flex flex-col gap-y-2"> | ||
| <DateRangePicker label="Date range (controlled)" value={value} onChange={setValue} /> | ||
| <p className="text-default-500 text-sm"> | ||
| Selected date:{" "} | ||
| {value | ||
| ? formatter.formatRange( | ||
| value.start.toDate(getLocalTimeZone()), | ||
| value.end.toDate(getLocalTimeZone()), | ||
| ) | ||
| : "--"} | ||
| </p> | ||
| </div> | ||
| <DateRangePicker | ||
| defaultValue={{ | ||
| start: parseDate("2024-04-01"), | ||
| end: parseDate("2024-04-08"), | ||
| }} | ||
| label="Date range (uncontrolled)" | ||
| /> | ||
| </div> | ||
| ); | ||
| } |
40 changes: 40 additions & 0 deletions
40
apps/docs/content/components/date-range-picker/controlled.raw.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import type {RangeValue} from "@react-types/shared"; | ||
| import type {DateValue} from "@react-types/datepicker"; | ||
|
|
||
| import React from "react"; | ||
| import {DateRangePicker} from "@nextui-org/react"; | ||
| import {parseDate, getLocalTimeZone} from "@internationalized/date"; | ||
| import {useDateFormatter} from "@react-aria/i18n"; | ||
|
|
||
| export default function App() { | ||
| const [value, setValue] = React.useState<RangeValue<DateValue>>({ | ||
| start: parseDate("2024-04-01"), | ||
| end: parseDate("2024-04-08"), | ||
| }); | ||
|
|
||
| let formatter = useDateFormatter({dateStyle: "long"}); | ||
|
|
||
| return ( | ||
| <div className="flex flex-row gap-2"> | ||
| <div className="w-full flex flex-col gap-y-2"> | ||
| <DateRangePicker label="Date range (controlled)" value={value} onChange={setValue} /> | ||
| <p className="text-default-500 text-sm"> | ||
| Selected date:{" "} | ||
| {value | ||
| ? formatter.formatRange( | ||
| value.start.toDate(getLocalTimeZone()), | ||
| value.end.toDate(getLocalTimeZone()), | ||
| ) | ||
| : "--"} | ||
| </p> | ||
| </div> | ||
| <DateRangePicker | ||
| defaultValue={{ | ||
| start: parseDate("2024-04-01"), | ||
| end: parseDate("2024-04-08"), | ||
| }} | ||
| label="Date range (uncontrolled)" | ||
| /> | ||
| </div> | ||
| ); | ||
| } |
85 changes: 2 additions & 83 deletions
85
apps/docs/content/components/date-range-picker/controlled.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
33 changes: 33 additions & 0 deletions
33
apps/docs/content/components/date-range-picker/custom-styles.raw.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import {DateRangePicker} from "@nextui-org/react"; | ||
|
|
||
| export default function App() { | ||
| return ( | ||
| <DateRangePicker | ||
| calendarProps={{ | ||
| classNames: { | ||
| base: "bg-background", | ||
| headerWrapper: "pt-4 bg-background", | ||
| prevButton: "border-1 border-default-200 rounded-small", | ||
| nextButton: "border-1 border-default-200 rounded-small", | ||
| gridHeader: "bg-background shadow-none border-b-1 border-default-100", | ||
| cellButton: [ | ||
| "data-[today=true]:bg-default-100 data-[selected=true]:bg-transparent rounded-small", | ||
| // start (pseudo) | ||
| "data-[range-start=true]:before:rounded-l-small", | ||
| "data-[selection-start=true]:before:rounded-l-small", | ||
| // end (pseudo) | ||
| "data-[range-end=true]:before:rounded-r-small", | ||
| "data-[selection-end=true]:before:rounded-r-small", | ||
| // start (selected) | ||
| "data-[selected=true]:data-[selection-start=true]:data-[range-selection=true]:rounded-small", | ||
| // end (selected) | ||
| "data-[selected=true]:data-[selection-end=true]:data-[range-selection=true]:rounded-small", | ||
| ], | ||
| }, | ||
| }} | ||
| className="max-w-xs" | ||
| label="Stay duration" | ||
| variant="bordered" | ||
| /> | ||
| ); | ||
| } |
34 changes: 1 addition & 33 deletions
34
apps/docs/content/components/date-range-picker/custom-styles.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
11 changes: 11 additions & 0 deletions
11
apps/docs/content/components/date-range-picker/description.raw.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import {DateRangePicker} from "@nextui-org/react"; | ||
|
|
||
| export default function App() { | ||
| return ( | ||
| <DateRangePicker | ||
| className="max-w-xs" | ||
| description="Please enter your stay duration" | ||
| label="Stay duration" | ||
| /> | ||
| ); | ||
| } |
12 changes: 1 addition & 11 deletions
12
apps/docs/content/components/date-range-picker/description.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
16 changes: 16 additions & 0 deletions
16
apps/docs/content/components/date-range-picker/disabled.raw.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import {DateRangePicker} from "@nextui-org/react"; | ||
| import {parseDate} from "@internationalized/date"; | ||
|
|
||
| export default function App() { | ||
| return ( | ||
| <DateRangePicker | ||
| isDisabled | ||
| className="max-w-xs" | ||
| defaultValue={{ | ||
| start: parseDate("2024-04-01"), | ||
| end: parseDate("2024-04-08"), | ||
| }} | ||
| label="Stay duration" | ||
| /> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 22 additions & 0 deletions
22
apps/docs/content/components/date-range-picker/error-message-function.raw.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import {DateRangePicker} from "@nextui-org/react"; | ||
| import {parseDate} from "@internationalized/date"; | ||
|
|
||
| export default function App() { | ||
| return ( | ||
| <DateRangePicker | ||
| isInvalid | ||
| className="max-w-xs" | ||
| defaultValue={{ | ||
| start: parseDate("2024-04-01"), | ||
| end: parseDate("2024-04-08"), | ||
| }} | ||
| errorMessage={(value) => { | ||
| if (value.isInvalid) { | ||
| return "Please enter your stay duration"; | ||
| } | ||
| }} | ||
| label="Stay duration" | ||
| variant="bordered" | ||
| /> | ||
| ); | ||
| } |
23 changes: 1 addition & 22 deletions
23
apps/docs/content/components/date-range-picker/error-message-function.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
18 changes: 18 additions & 0 deletions
18
apps/docs/content/components/date-range-picker/error-message.raw.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import {DateRangePicker} from "@nextui-org/react"; | ||
| import {parseDate} from "@internationalized/date"; | ||
|
|
||
| export default function App() { | ||
| return ( | ||
| <DateRangePicker | ||
| isInvalid | ||
| className="max-w-xs" | ||
| defaultValue={{ | ||
| start: parseDate("2024-04-01"), | ||
| end: parseDate("2024-04-08"), | ||
| }} | ||
| errorMessage="Please enter your stay duration" | ||
| label="Stay duration" | ||
| variant="bordered" | ||
| /> | ||
| ); | ||
| } |
19 changes: 1 addition & 18 deletions
19
apps/docs/content/components/date-range-picker/error-message.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.