chore(wizard, date picker): update tags and examples from js to ts #12208
+53
−53
Conversation
This file contains hidden or 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
WalkthroughExtracted an inline DatePicker range example into an external TypeScript component and updated documentation code fences from JavaScript to TypeScript. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant DatePickerRange
participant StartPicker
participant EndPicker
User->>DatePickerRange: open demo
DatePickerRange->>StartPicker: render (from,state)
DatePickerRange->>EndPicker: render (to,state, disabled if no from)
User->>StartPicker: select start date
StartPicker-->>DatePickerRange: onFromChange(date)
DatePickerRange->>EndPicker: enable and set to = nextDay(date) if valid
User->>EndPicker: select end date
EndPicker-->>DatePickerRange: onToChange(date) (validated against from)
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Suggested reviewers
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
📜 Recent review detailsConfiguration used: Organization UI Review profile: CHILL Plan: Pro 📒 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). (2)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Fix all issues with AI agents
In @packages/react-core/src/demos/DatePicker/examples/DatePickerRange.tsx:
- Around line 1-4: The component DatePickerRange uses the
React.FunctionComponent type but React is not imported; add an import for React
(e.g., import React from 'react') at the top of the file or replace the explicit
React-prefixed type with a locally imported type (e.g., import {
FunctionComponent } from 'react' and use FunctionComponent) so the
React.FunctionComponent annotation resolves and TypeScript compiles.
- Around line 11-19: onFromChange mutates the incoming date parameter via
date.setDate(...), causing side effects; fix by cloning the date before
modifying and using that clone when calling setFrom and when computing the
next-day value for setTo (e.g., create a new Date(date) or Date.from copy),
preserve the isValidDate check, call setFrom with the cloned date, increment the
clone for yyyyMMddFormat, and avoid mutating the original parameter so callers
are not affected.
- Around line 5-6: Add explicit type parameters to the two useState hooks so
their state types match what you pass to the setters: annotate the `from` state
in the DatePickerRange example as Date | undefined (used with `setFrom`
receiving a Date) and annotate the `to` state as string | undefined (used with
`setTo` receiving a string); update the `const [from, setFrom] = useState()` and
`const [to, setTo] = useState()` lines to include these type arguments so
TypeScript infers the correct types for `setFrom` and `setTo`.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/react-core/src/demos/DatePicker/DatePicker.mdpackages/react-core/src/demos/DatePicker/examples/DatePickerRange.tsxpackages/react-core/src/demos/Wizard/WizardDemo.md
🧰 Additional context used
🧬 Code graph analysis (1)
packages/react-core/src/demos/DatePicker/examples/DatePickerRange.tsx (4)
packages/react-core/src/helpers/datetimeUtils.ts (1)
isValidDate(4-4)packages/react-core/src/components/DatePicker/DatePicker.tsx (2)
yyyyMMddFormat(89-93)DatePicker(357-357)packages/react-core/src/layouts/Split/Split.tsx (1)
Split(17-39)packages/react-core/src/layouts/Split/SplitItem.tsx (1)
SplitItem(15-28)
⏰ 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). (2)
- GitHub Check: Build
- GitHub Check: Build, test & deploy
🔇 Additional comments (3)
packages/react-core/src/demos/Wizard/WizardDemo.md (1)
17-42: LGTM!The language specifier updates from
jstotsare appropriate since the referenced files have.tsxextensions. This improves documentation consistency.packages/react-core/src/demos/DatePicker/examples/DatePickerRange.tsx (1)
21-45: LGTM!The
onToChangehandler correctly validates the date before updating state, and the JSX structure properly uses PatternFly's Split layout components with appropriate props for the date range picker behavior.packages/react-core/src/demos/DatePicker/DatePicker.md (1)
16-17: LGTM!The update correctly references the new external TypeScript file, aligning with the PR objective of migrating examples from JavaScript to TypeScript.
packages/react-core/src/demos/DatePicker/examples/DatePickerRange.tsx
Outdated
Show resolved
Hide resolved
Comment on lines
+11
to
+19
| const onFromChange = (_event: React.MouseEvent<HTMLElement>, _value: string, date: Date) => { | ||
| setFrom(new Date(date)); | ||
| if (isValidDate(date)) { | ||
| date.setDate(date.getDate() + 1); | ||
| setTo(yyyyMMddFormat(date)); | ||
| } else { | ||
| setTo(''); | ||
| } | ||
| }; |
There was a problem hiding this comment.
Avoid mutating the input date parameter.
Line 14 mutates the date object passed as a parameter using setDate(). This side effect modifies the caller's date object, which can cause unexpected behavior. Create a copy before modifying.
🔧 Proposed fix
const onFromChange = (_event: React.MouseEvent<HTMLElement>, _value: string, date: Date) => {
setFrom(new Date(date));
if (isValidDate(date)) {
- date.setDate(date.getDate() + 1);
- setTo(yyyyMMddFormat(date));
+ const nextDay = new Date(date);
+ nextDay.setDate(nextDay.getDate() + 1);
+ setTo(yyyyMMddFormat(nextDay));
} else {
setTo('');
}
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const onFromChange = (_event: React.MouseEvent<HTMLElement>, _value: string, date: Date) => { | |
| setFrom(new Date(date)); | |
| if (isValidDate(date)) { | |
| date.setDate(date.getDate() + 1); | |
| setTo(yyyyMMddFormat(date)); | |
| } else { | |
| setTo(''); | |
| } | |
| }; | |
| const onFromChange = (_event: React.MouseEvent<HTMLElement>, _value: string, date: Date) => { | |
| setFrom(new Date(date)); | |
| if (isValidDate(date)) { | |
| const nextDay = new Date(date); | |
| nextDay.setDate(nextDay.getDate() + 1); | |
| setTo(yyyyMMddFormat(nextDay)); | |
| } else { | |
| setTo(''); | |
| } | |
| }; |
🤖 Prompt for AI Agents
In @packages/react-core/src/demos/DatePicker/examples/DatePickerRange.tsx around
lines 11 - 19, onFromChange mutates the incoming date parameter via
date.setDate(...), causing side effects; fix by cloning the date before
modifying and using that clone when calling setFrom and when computing the
next-day value for setTo (e.g., create a new Date(date) or Date.from copy),
preserve the isValidDate check, call setFrom with the cloned date, increment the
clone for yyyyMMddFormat, and avoid mutating the original parameter so callers
are not affected.
Collaborator
|
Preview: https://pf-react-pr-12208.surge.sh A11y report: https://pf-react-pr-12208-a11y.surge.sh |
thatblindgeye
approved these changes
Jan 12, 2026
gitdallas
approved these changes
Jan 12, 2026
Collaborator
|
Your changes have been released in:
Thanks for your contribution! 🎉 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
6 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Towards #11952
Summary by CodeRabbit
New Features
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.