feat: Add 'filterDate' prop function on Datepicker #1587
Conversation
🦋 Changeset detectedLatest commit: 4a3a9f2 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughA new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Datepicker
participant Context
participant Views (Days/Months/Years/Decades)
User->>Datepicker: Open datepicker
Datepicker->>Context: Provide filterDate (if any)
Views->>Context: Access filterDate
loop For each date/month/year/decade button
Views->>filterDate: Call filterDate(date, view)
alt filterDate returns false or out of range
Views->>Views: Disable button
else filterDate returns true
Views->>Views: Enable button
end
end
User->>Views: Select enabled date
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
apps/web/examples/datepicker/index.ts (1)
4-4: LGTM! Consider alphabetical ordering for consistency.The export addition is correct and follows existing patterns. Consider placing it after
inlineto maintain alphabetical order.apps/web/examples/datepicker/datepicker.filter.tsx (1)
4-18: Consider extracting the filter function to reduce code duplication.The filter function is duplicated between the code string and the actual implementation. While this is acceptable for documentation purposes, consider extracting it to a shared variable to maintain consistency.
+const filterFn = (date: Date, view: Views) => { + if (view === Views.Days) { + const day = date.getDay(); + return day >= 1 && day <= 5; + } + return true; +}; + const code = ` import { Datepicker, Views } from "flowbite-react"; -const filterFn = (date: Date, view: Views) => { - if (view === Views.Days) { - const day = date.getDay(); - return day >= 1 && day <= 5; - } - return true; -}; +const filterFn = (date: Date, view: Views) => { + if (view === Views.Days) { + const day = date.getDay(); + return day >= 1 && day <= 5; + } + return true; +}; export function Component() { return <Datepicker filterDate={filterFn} />; } `; -const filterFn = (date: Date, view: Views) => { - if (view === Views.Days) { - const day = date.getDay(); - return day >= 1 && day <= 5; - } - return true; -};
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (12)
apps/storybook/src/Datepicker.stories.tsx(2 hunks)apps/web/content/docs/components/datepicker.mdx(1 hunks)apps/web/examples/datepicker/datepicker.filter.tsx(1 hunks)apps/web/examples/datepicker/index.ts(1 hunks)packages/ui/src/components/Datepicker/Datepicker.test.tsx(2 hunks)packages/ui/src/components/Datepicker/Datepicker.tsx(3 hunks)packages/ui/src/components/Datepicker/DatepickerContext.tsx(1 hunks)packages/ui/src/components/Datepicker/Views/Days.tsx(3 hunks)packages/ui/src/components/Datepicker/Views/Decades.tsx(2 hunks)packages/ui/src/components/Datepicker/Views/Months.tsx(2 hunks)packages/ui/src/components/Datepicker/Views/Years.tsx(2 hunks)packages/ui/src/components/Datepicker/index.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (11)
packages/ui/src/components/Datepicker/DatepickerContext.tsx (1)
Learnt from: rluders
PR: themesberg/flowbite-react#1314
File: packages/ui/src/components/Datepicker/helpers.ts:112-119
Timestamp: 2024-07-27T04:19:32.056Z
Learning: The `getFormattedDate` function in `packages/ui/src/components/Datepicker/helpers.ts` should use `DateFNSFormat` directly with the date and format string for proper localization support, mapping language codes to locale objects from `date-fns/locale`.
packages/ui/src/components/Datepicker/Views/Decades.tsx (1)
Learnt from: rluders
PR: themesberg/flowbite-react#1314
File: packages/ui/src/components/Datepicker/helpers.ts:112-119
Timestamp: 2024-07-27T04:19:32.056Z
Learning: The `getFormattedDate` function in `packages/ui/src/components/Datepicker/helpers.ts` should use `DateFNSFormat` directly with the date and format string for proper localization support, mapping language codes to locale objects from `date-fns/locale`.
packages/ui/src/components/Datepicker/Datepicker.test.tsx (1)
Learnt from: rluders
PR: themesberg/flowbite-react#1314
File: packages/ui/src/components/Datepicker/helpers.ts:112-119
Timestamp: 2024-07-27T04:19:32.056Z
Learning: The `getFormattedDate` function in `packages/ui/src/components/Datepicker/helpers.ts` should use `DateFNSFormat` directly with the date and format string for proper localization support, mapping language codes to locale objects from `date-fns/locale`.
apps/web/examples/datepicker/index.ts (1)
Learnt from: rluders
PR: themesberg/flowbite-react#1314
File: packages/ui/src/components/Datepicker/helpers.ts:112-119
Timestamp: 2024-07-27T04:19:32.056Z
Learning: The `getFormattedDate` function in `packages/ui/src/components/Datepicker/helpers.ts` should use `DateFNSFormat` directly with the date and format string for proper localization support, mapping language codes to locale objects from `date-fns/locale`.
packages/ui/src/components/Datepicker/Datepicker.tsx (1)
Learnt from: rluders
PR: themesberg/flowbite-react#1314
File: packages/ui/src/components/Datepicker/helpers.ts:112-119
Timestamp: 2024-07-27T04:19:32.056Z
Learning: The `getFormattedDate` function in `packages/ui/src/components/Datepicker/helpers.ts` should use `DateFNSFormat` directly with the date and format string for proper localization support, mapping language codes to locale objects from `date-fns/locale`.
packages/ui/src/components/Datepicker/Views/Days.tsx (1)
Learnt from: rluders
PR: themesberg/flowbite-react#1314
File: packages/ui/src/components/Datepicker/helpers.ts:112-119
Timestamp: 2024-07-27T04:19:32.056Z
Learning: The `getFormattedDate` function in `packages/ui/src/components/Datepicker/helpers.ts` should use `DateFNSFormat` directly with the date and format string for proper localization support, mapping language codes to locale objects from `date-fns/locale`.
packages/ui/src/components/Datepicker/Views/Months.tsx (1)
Learnt from: rluders
PR: themesberg/flowbite-react#1314
File: packages/ui/src/components/Datepicker/helpers.ts:112-119
Timestamp: 2024-07-27T04:19:32.056Z
Learning: The `getFormattedDate` function in `packages/ui/src/components/Datepicker/helpers.ts` should use `DateFNSFormat` directly with the date and format string for proper localization support, mapping language codes to locale objects from `date-fns/locale`.
packages/ui/src/components/Datepicker/Views/Years.tsx (1)
Learnt from: rluders
PR: themesberg/flowbite-react#1314
File: packages/ui/src/components/Datepicker/helpers.ts:112-119
Timestamp: 2024-07-27T04:19:32.056Z
Learning: The `getFormattedDate` function in `packages/ui/src/components/Datepicker/helpers.ts` should use `DateFNSFormat` directly with the date and format string for proper localization support, mapping language codes to locale objects from `date-fns/locale`.
packages/ui/src/components/Datepicker/index.ts (1)
Learnt from: rluders
PR: themesberg/flowbite-react#1314
File: packages/ui/src/components/Datepicker/helpers.ts:112-119
Timestamp: 2024-07-27T04:19:32.056Z
Learning: The `getFormattedDate` function in `packages/ui/src/components/Datepicker/helpers.ts` should use `DateFNSFormat` directly with the date and format string for proper localization support, mapping language codes to locale objects from `date-fns/locale`.
apps/web/examples/datepicker/datepicker.filter.tsx (1)
Learnt from: rluders
PR: themesberg/flowbite-react#1314
File: packages/ui/src/components/Datepicker/helpers.ts:112-119
Timestamp: 2024-07-27T04:19:32.056Z
Learning: The `getFormattedDate` function in `packages/ui/src/components/Datepicker/helpers.ts` should use `DateFNSFormat` directly with the date and format string for proper localization support, mapping language codes to locale objects from `date-fns/locale`.
apps/storybook/src/Datepicker.stories.tsx (1)
Learnt from: rluders
PR: themesberg/flowbite-react#1314
File: packages/ui/src/components/Datepicker/helpers.ts:112-119
Timestamp: 2024-07-27T04:19:32.056Z
Learning: The `getFormattedDate` function in `packages/ui/src/components/Datepicker/helpers.ts` should use `DateFNSFormat` directly with the date and format string for proper localization support, mapping language codes to locale objects from `date-fns/locale`.
🧬 Code Graph Analysis (5)
packages/ui/src/components/Datepicker/Views/Decades.tsx (3)
packages/ui/src/components/Datepicker/DatepickerContext.tsx (1)
useDatePickerContext(27-35)packages/ui/src/components/Datepicker/index.ts (2)
useDatePickerContext(3-3)Views(5-5)packages/ui/src/components/Datepicker/helpers.ts (1)
isDateInRange(18-38)
packages/ui/src/components/Datepicker/Datepicker.test.tsx (1)
packages/ui/src/components/Datepicker/Datepicker.tsx (1)
Datepicker(111-386)
packages/ui/src/components/Datepicker/Views/Days.tsx (1)
packages/ui/src/components/Datepicker/helpers.ts (1)
isDateInRange(18-38)
packages/ui/src/components/Datepicker/Views/Years.tsx (3)
packages/ui/src/components/Datepicker/DatepickerContext.tsx (1)
useDatePickerContext(27-35)packages/ui/src/components/Datepicker/index.ts (2)
useDatePickerContext(3-3)Views(5-5)packages/ui/src/components/Datepicker/helpers.ts (1)
isDateInRange(18-38)
apps/web/examples/datepicker/datepicker.filter.tsx (3)
packages/ui/src/components/Datepicker/index.ts (1)
Views(5-5)apps/web/examples/datepicker/index.ts (1)
filter(4-4)apps/web/components/code-demo.tsx (1)
CodeData(48-48)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: 🧰 Build
🔇 Additional comments (22)
packages/ui/src/components/Datepicker/index.ts (1)
5-5: LGTM! Proper export addition for new filterDate functionality.The
Viewsenum export is necessary for thefilterDateprop's function signature, allowing users to access the enum for type-safe filtering logic.packages/ui/src/components/Datepicker/DatepickerContext.tsx (1)
13-13: LGTM! Clean context interface extension.The
filterDatefunction is properly typed and marked as optional, maintaining backward compatibility while enabling the new filtering functionality.packages/ui/src/components/Datepicker/Datepicker.tsx (3)
103-103: LGTM! Proper prop interface addition.The
filterDateprop is correctly typed and marked as optional, maintaining backward compatibility.
131-131: LGTM! Consistent prop extraction.The
filterDateprop is properly extracted from props following the existing destructuring pattern.
282-282: LGTM! Correct context provider integration.The
filterDateprop is properly passed through the context provider, enabling access in child components.apps/web/content/docs/components/datepicker.mdx (1)
30-37: LGTM! Clear and helpful documentation.The documentation section clearly explains the
filterDateprop functionality and appropriately references theViewsenum and example usage.packages/ui/src/components/Datepicker/Views/Years.tsx (2)
19-28: LGTM! Context destructuring properly includes filterDate.The addition of
filterDateto the context destructuring is consistent with the other view components and follows the established pattern.
41-42: LGTM! Filter logic is correctly implemented.The disabled logic properly combines the existing date range check with the new
filterDatefunction. The implementation correctly usesViews.Yearsas the view parameter and handles the case wherefilterDatemay be undefined.packages/ui/src/components/Datepicker/Datepicker.test.tsx (2)
7-7: LGTM! Import statement correctly includes Views enum.The
Viewsenum is needed for the new test to specify the view context in the filter function.
188-203: LGTM! Comprehensive test for filterDate functionality.The test effectively verifies that the
filterDateprop works correctly by:
- Creating a filter that disables today's date in the Days view
- Allowing all dates in other views (returning true)
- Verifying that today's date button is disabled after applying the filter
The test logic is sound and covers the core functionality of the new feature.
packages/ui/src/components/Datepicker/Views/Months.tsx (2)
23-23: LGTM! Context destructuring properly includes filterDate.The addition of
filterDateto the context destructuring is consistent with the other view components.
43-44: LGTM! Filter logic is correctly implemented.The disabled logic properly combines the existing date range check with the new
filterDatefunction, usingViews.Monthsas the view parameter. The implementation correctly handles the case wherefilterDatemay be undefined.packages/ui/src/components/Datepicker/Views/Days.tsx (3)
5-13: LGTM! Import statement correctly includes Views enum.The
Viewsenum is properly imported to support the new filterDate functionality in the disabled logic.
36-36: LGTM! Context destructuring properly includes filterDate.The addition of
filterDateto the context destructuring is consistent with the other view components.
63-64: LGTM! Filter logic is correctly implemented.The disabled logic properly combines the existing date range check with the new
filterDatefunction, usingViews.Daysas the view parameter. The implementation correctly handles the case wherefilterDatemay be undefined.packages/ui/src/components/Datepicker/Views/Decades.tsx (2)
19-28: LGTM! Context destructuring properly includes filterDate.The addition of
filterDateto the context destructuring is consistent with the other view components.
43-45: LGTM! Filter logic is correctly implemented.The disabled logic properly combines the existing complex decade range check with the new
filterDatefunction, usingViews.Decadesas the view parameter. The implementation correctly handles the case wherefilterDatemay be undefined and maintains the existing logic for checking both the first and last dates of the decade.apps/web/examples/datepicker/datepicker.filter.tsx (2)
20-26: Filter function logic is correct and well-implemented.The weekday filter logic correctly uses
date.getDay()where Monday=1 through Friday=5, and appropriately returnstruefor non-Days views to allow all dates in months/years views.
32-41: CodeData export structure is properly configured.The export follows the expected pattern with correct type, code metadata, and component reference for documentation purposes.
apps/storybook/src/Datepicker.stories.tsx (3)
3-3: Import statement correctly updated to include Views enum.The addition of
Viewsto the import statement enables the new filter functionality in the stories.
151-172: FilterWeekdaysOnly story is well-implemented.The story correctly demonstrates weekday filtering and is properly configured for showcase purposes with
open: trueandautoHide: false. The filter logic matches the example implementation.
174-194: FilterEvenDatesOnly story provides good alternative use case.The story demonstrates a different filtering approach using the modulo operator to filter even dates, showcasing the flexibility of the filterDate prop.
|
I see the CI unit tests are failing, but don't look related to ur changes 🤔 |
… for tomorrow's date
I oversaw it as well. In the end, there was a failed test related to the Datepicker. I made a mistake in comparing the date objects. Fixed with: 0fdcfe6. Should work now! ✨ Unrelated to the test, I had problems running |
|
Let's take care of |
|
Only thing left to do is create a changeset in order to version this PR and add a changelog, to do that:
|
2 participants
Summary
This PR implements an optional
filterDatefunction prop for the Datepicker, allowing specific dates to be disabled across different views. This functionality can be used in combination with the existing min and max date filtering.I require this behavior for a project, and I also noticed that it has been a long-requested feature (see issue #1201).
Demo
This demo filters only weekdays in the days view of the datepicker. All other views are left untouched. If defined, the filter function must return true to enable a date, month, or year. The function is called for each element across the different views.
Summary by CodeRabbit
New Features
Bug Fixes
Documentation
Tests