feat(FlipClock): add ShowMonth parameter #6222
Merged
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
Contributor
Reviewer's GuideIntroduce a new ShowMonth parameter for the FlipClock component, wiring it through the Razor UI, JS interop, unit tests, and sample/demo metadata to enable optional month display. Sequence diagram for FlipClock month updatesequenceDiagram
participant C as FlipClock.razor
participant JS as FlipClock.razor.js
participant DOM as DOM
C->>JS: init(id, options)
activate JS
JS->>DOM: querySelector('.bb-flip-clock-list.month')
Note right of JS: Get month element from DOM
deactivate JS
loop On timer tick
JS->>JS: go()
activate JS
JS->>JS: getDate()
Note right of JS: returns { months, days, hours, ... }
alt If month has changed
JS->>JS: setTime(listMonth, months, countDown)
activate JS
JS->>DOM: Update month display
deactivate JS
end
deactivate JS
end
Class diagram for FlipClock component updatesclassDiagram
class FlipClock {
+bool ShowMonth
}
File-Level Changes
Assessment against linked issues
Possibly linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Hey @ArgoZhang - I've reviewed your changes - here's some feedback:
- In FlipClock.razor, the month container is wrapped in an
@if (ShowDay)check instead ofShowMonth, so update the condition to use the newShowMonthparameter. - The JS
getDatefunction only calculatesmonthsin the non-countdown branch and still returns it for countdown, leading to an undefined value—compute and returnmonthsin both modes. - Wrap your
listMonthquerying andsetTimecalls in a guard (e.g. check iflistMonthexists) to prevent null reference errors when the month element isn’t present.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- In FlipClock.razor, the month container is wrapped in an `@if (ShowDay)` check instead of `ShowMonth`, so update the condition to use the new `ShowMonth` parameter.
- The JS `getDate` function only calculates `months` in the non-countdown branch and still returns it for countdown, leading to an undefined value—compute and return `months` in both modes.
- Wrap your `listMonth` querying and `setTime` calls in a guard (e.g. check if `listMonth` exists) to prevent null reference errors when the month element isn’t present.
## Individual Comments
### Comment 1
<location> `src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.js:53` </location>
<code_context>
const hours = Math.floor(totalMilliseconds / (1000 * 60 * 60)) % 24;
const days = Math.floor(totalMilliseconds / (1000 * 60 * 60 * 24));
- return { days, hours, minutes, seconds };
+ return { months, days, hours, minutes, seconds };
}
</code_context>
<issue_to_address>
The countdown branch returns a 'months' property that is never computed
'months' is returned without being calculated, so it will always be undefined. Please compute its value or remove it from the return object.
</issue_to_address>
### Comment 2
<location> `src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.js:80` </location>
<code_context>
setTime(listDay, days, countDown);
}
- return { days, hours, minutes, seconds }
+ if (lastMonth !== months) {
+ lastDay = days;
+ setTime(listMonth, months, countDown);
+ }
</code_context>
<issue_to_address>
Wrong variable assignment in month update block
Assign `lastMonth = months` after updating the UI to ensure month changes are tracked correctly.
</issue_to_address>
### Comment 3
<location> `src/BootstrapBlazor/Components/FlipClock/FlipClock.razor:6` </location>
<code_context>
@attribute [BootstrapModuleAutoLoader(JSObjectReference = true)]
<div @attributes="@AdditionalAttributes" class="@ClassString" style="@StyleString" id="@Id">
+ @if (ShowDay)
+ {
+ <div class="bb-flip-clock-list month">
</code_context>
<issue_to_address>
Month display block incorrectly gated by ShowDay
The month list should be rendered based on `ShowMonth`, not `ShowDay`. Update the condition to `@if (ShowMonth)` to fix this.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #6222 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 704 704
Lines 31099 31105 +6
Branches 4396 4397 +1
=========================================
+ Hits 31099 31105 +6
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Link issues
fixes #6221
Summary By Copilot
Regression?
Risk
Verification
Packaging changes reviewed?
☑️ Self Check before Merge
Summary by Sourcery
Add a new ShowMonth option to the FlipClock component to optionally display the month, including support in the Razor markup, underlying JavaScript logic, unit tests, samples, and documentation.
New Features:
Enhancements:
Documentation:
Tests: