Open ddiasfront opened 8 months ago
The latest updates on your projects. Learn more about Vercel for Git ↗︎
Name | Status | Preview | Comments | Updated (UTC) |
---|---|---|---|---|
flowbite-react | ❌ Failed (Inspect) | Aug 13, 2024 11:40am | ||
flowbite-react-storybook | ✅ Ready (Inspect) | Visit Preview | 💬 Add feedback | Aug 13, 2024 11:40am |
Attention: Patch coverage is 80.55556%
with 7 lines
in your changes are missing coverage. Please review.
Project coverage is 97.36%. Comparing base (
7461173
) to head (baed714
). Report is 245 commits behind head on main.:exclamation: Current head baed714 differs from pull request most recent head 2070c8b
Please upload reports for the commit 2070c8b to get more accurate results.
:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.
Hey @rluders , I guess now it is ready for review, could please czech it out ?
@ddiasfront I see some formatting issues
@SutuSebastian Can you describe it, please? I didn't see any formatting issues regarding the date itself, is it on the date or another stuff?
@SutuSebastian Can you describe it, please? I didn't see any formatting issues regarding the date itself, is it on the date or another stuff?
Apparently u fixed it with the last commits :D
The build failed, and inside the build fail output there was the formatting issue AFAIR.
@rluders , @SutuSebastian Okay guys, now I've fixed the issues bellow as well, including the clear functionality:
In the clear functionality scenario, I had to add a label property to be rendered whenever there's no date selected, and i set it to default "No date selected", please check it out.
Thanks for looking at the issue I opened and hats off to you for the fix @ddiasfront 🚀
@ddiasfront could you rebase it with main branch?
@ddiasfront could you rebase it with main branch?
Dun
@ddiasfront Can you let us know when you're ready for a re-review? Just want to make sure before I dive in
@ddiasfront Can you let us know when you're ready for a re-review? Just want to make sure before I dive in
It is all set @tulup-conner, @rluders , @SutuSebastian
@tulup-conner Changes dun, check the last commit, please.
Please check it out when you have some time @rluders? Would be glad to receive any feedback, or even pair if you want to :)
It's been more than two weeks....Please help us
@SutuSebastian @rluders @tulup-conner any comments ?
i know that this issue is already been created here : https://github.com/themesberg/flowbite-react/issues/1187#issue-2041570898 Here is how i am using it and it is working great along with formik validation
<Datepicker
id={'start_date'}
name={'start_date'}
minDate={new Date()}
onSelectedDateChanged={(date) => {
if(date) {
setFormDefaultValues({
...formDefaultValues,
start_date: date ? moment(date).format('YYYY-MM-DD') : ''
});
formik.setFieldValue('start_date', moment(date).format('YYYY-MM-DD'));
formik.setFieldTouched('start_date');
}
}}
defaultDate={formDefaultValues.start_date ? new Date(moment(formDefaultValues.start_date).format('YYYY-MM-DD')) : new Date()}
className={`rounded-lg ${formik.touched.start_date && formik.errors.start_date ? 'bg-red-50 border border-red-500 text-red-900' : ''}`}
value={formDefaultValues.start_date ? new Date(moment(formDefaultValues.start_date).format('YYYY-MM-DD')).toDateString() : new Date().toDateString()}
/>
Now here is the problem :
So is it possible for us to improve this interface
export interface DatepickerProps extends Omit<TextInputProps, 'theme'> {
open?: boolean;
inline?: boolean;
autoHide?: boolean;
showClearButton?: boolean;
labelClearButton?: string;
showTodayButton?: boolean;
labelTodayButton?: string;
defaultDate?: Date;
minDate?: Date;
maxDate?: Date;
language?: string;
weekStart?: WeekStart;
theme?: DeepPartial<FlowbiteDatepickerTheme>;
onSelectedDateChanged?: (date: Date) => void;
}
and add few more attribute like format which is the most conmanly used and it is DATE picker so there is has nothing to do with the time as well, here is the little tip to anyone who is using prisma ORM along with mysql and want to store only date then update this
start_date DateTime @default(now()) @db.Date
end_date DateTime @default(now()) @db.Date
This feature is super crucial.. seems we cannot set a VALUE otherwise (e.g. for update scenarios)?
PLEASE.. can you folks review /re-merge it? :-)
Hey, @knom this PR still needs some extra work before getting merged. Hopefully, @ddiasfront didn't drop it. :)
Thanks @rluders.
Anything I can do to help? Like do some of the merges, fixes?
what's remaining here that's blocking a merge? the only unresolved comments don't appear to be blockers
I'm catchin up with @vipertecpro and @SutuSebastian to close this one asap
Latest commit: 2adc9694c05809308f7c474209bbd5897a7f854a
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
The Datepicker component has been enhanced to support controlled inputs via the value
and defaultValue
props, improving state management and customization options. These changes allow for programmatic updates to the selected date without requiring manual clicks, thus addressing various usability scenarios.
Files/Paths | Change Summary |
---|---|
apps/web/content/docs/components/datepicker.mdx |
Added a section on controlled <Datepicker /> usage with value prop and handling of null values. |
packages/ui/src/components/Datepicker/Datepicker.stories.tsx |
Improved Datepicker stories with new value , defaultValue , and label control types; adjusted logic for clarity and added new story variants. |
packages/ui/src/components/Datepicker/Datepicker.tsx |
Introduced customValue and label props; optimized state management with useMemo and useEffect for better handling of selected and view dates. |
packages/ui/src/components/Datepicker/DatepickerContext.tsx |
Changed selectedDate type to Date | null in DatepickerContextProps to allow representation of no date selected. |
packages/ui/src/components/Datepicker/Views/Days.tsx |
Enhanced isSelected logic to check if selectedDate is truthy before comparison with currentDate . |
packages/ui/src/components/Datepicker/Views/Decades.tsx |
Improved click handler to verify selectedDate exists before updating the view date. |
packages/ui/src/components/Datepicker/Views/Months.tsx |
Updated month selection logic to ensure selectedDate is not null before comparison using isDateEqual . |
packages/ui/src/components/Datepicker/Views/Years.tsx |
Enhanced year selection logic by checking if selectedDate is defined before comparison with newDate . |
src/components/Datepicker/Datepicker.spec.tsx |
Introduced comprehensive unit tests for various date handling scenarios in the Datepicker component. |
Objective | Addressed | Explanation |
---|---|---|
Datepicker only changes on manual click (#1187) | ✅ |
In fields of code, where dates now dance,
Controlled by props, they take their stance.
Withvalue
set, no click's demand,
The Datepicker's magic, at your command.
Null clears the way, like a gentle breeze,
A rabbit's touch, coding with ease. 🐇
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?
Hello @tulup-conner , @SutuSebastian , @rluders can you guys give the green light here ? I'm seeing tests failing at the main branch here, is that alright ?
It was added a new property called dateValue, which directly modifies the date inside of the datepicker whenever it's necessary, also the view is set to this selected date, automatically, independently from the type of view.
It closes #1187 #1055 #1039 #1167
The prop added is merely optional and will not cause any breaking change, test coverage is basically set and documentation is covered as well.
Summary by CodeRabbit
New Features
value
,defaultValue
, andlabel
controls for Datepicker customization.Improvements
customValue
.Bug Fixes
selectedDate
before performing operations.Documentation
value
prop.null
.Tests