feat(FlipClock): add ShowDay parameter #6218
Conversation
增加ShowDay参数
Reviewer's GuideIntroduces a ShowDay toggle in the FlipClock component and refactors its JavaScript timer logic to compute a unified days/hours/minutes/seconds breakdown based on elapsed or remaining milliseconds. Class diagram for FlipClock componentclassDiagram
class FlipClock {
+bool ShowDay
+bool ShowHour
}
File-Level Changes
Possibly linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
|
Thanks for your PR, @Mydashixiong. Someone from the team will get assigned to your PR shortly and we'll get it reviewed. |
|
@microsoft-github-policy-service agree |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #6218 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 704 704
Lines 31093 31099 +6
Branches 4395 4396 +1
=========================================
+ Hits 31093 31099 +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:
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey @Mydashixiong - I've reviewed your changes and they look great!
Prompt for AI Agents
Please address the comments from this code review:
## Individual Comments
### Comment 1
<location> `src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.js:22` </location>
<code_context>
let counter = 0;
const getDate = () => {
+ let totalMilliseconds = 0;
</code_context>
<issue_to_address>
Consider refactoring the time calculation logic to use a single helper and unified return shape for all branches.
You can collapse the three branches, pull your `counter += 1000` out of each branch, and unify all of the “ms → days/hours/min/sec” logic into a single helper. This both removes duplication and guarantees you always return the same shape (`{days,hours,minutes,seconds}`).
```js
// 1) single helper to break ms into parts
const splitMs = totalMs => {
const days = Math.floor(totalMs / 86_400_000);
const hours = Math.floor(totalMs / 3_600_000) % 24;
const minutes = Math.floor(totalMs / 60_000) % 60;
const seconds = Math.floor(totalMs / 1_000) % 60;
return { days, hours, minutes, seconds };
};
let counter = 0;
const getDate = () => {
// 2) increment once if we're in Count or CountDown
if (options.viewMode === "Count" || options.viewMode === "CountDown") {
counter += 1000;
}
let totalMs;
switch (options.viewMode) {
case "Count":
// elapsed since start
totalMs = counter - options.startValue;
break;
case "CountDown":
// remaining until zero
totalMs = Math.max(options.startValue - counter, 0);
break;
default:
// real-time: ms since midnight, days will always be 0
const now = new Date();
const midnight = new Date(now).setHours(0, 0, 0, 0);
totalMs = now - midnight;
}
return splitMs(totalMs);
};
```
With this:
- `counter += 1000` lives in one place.
- You only do “ms → parts” once.
- You always return `{days,hours,minutes,seconds}` so your rendering logic doesn’t need two shapes.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
| const listSecond = el.querySelector('.bb-flip-clock-list.second'); | ||
| const countDown = options.viewMode === "CountDown"; | ||
|
|
||
| let counter = 0; |
There was a problem hiding this comment.
issue (complexity): Consider refactoring the time calculation logic to use a single helper and unified return shape for all branches.
You can collapse the three branches, pull your counter += 1000 out of each branch, and unify all of the “ms → days/hours/min/sec” logic into a single helper. This both removes duplication and guarantees you always return the same shape ({days,hours,minutes,seconds}).
// 1) single helper to break ms into parts
const splitMs = totalMs => {
const days = Math.floor(totalMs / 86_400_000);
const hours = Math.floor(totalMs / 3_600_000) % 24;
const minutes = Math.floor(totalMs / 60_000) % 60;
const seconds = Math.floor(totalMs / 1_000) % 60;
return { days, hours, minutes, seconds };
};
let counter = 0;
const getDate = () => {
// 2) increment once if we're in Count or CountDown
if (options.viewMode === "Count" || options.viewMode === "CountDown") {
counter += 1000;
}
let totalMs;
switch (options.viewMode) {
case "Count":
// elapsed since start
totalMs = counter - options.startValue;
break;
case "CountDown":
// remaining until zero
totalMs = Math.max(options.startValue - counter, 0);
break;
default:
// real-time: ms since midnight, days will always be 0
const now = new Date();
const midnight = new Date(now).setHours(0, 0, 0, 0);
totalMs = now - midnight;
}
return splitMs(totalMs);
};With this:
counter += 1000lives in one place.- You only do “ms → parts” once.
- You always return
{days,hours,minutes,seconds}so your rendering logic doesn’t need two shapes.
Co-Authored-By: Mydashixiong <[email protected]>
|
@Mydashixiong please read the following Contributor License Agreement(CLA). If you agree with the CLA, please reply with the following information.
Contributor License AgreementContribution License AgreementThis Contribution License Agreement ( “Agreement” ) is agreed to by the party signing below ( “You” ), 1. Definitions. “Code” means the computer software code, whether in human-readable or machine-executable form, “Project” means any of the projects owned or managed by .NET Foundation and offered under a license “Submit” is the act of uploading, submitting, transmitting, or distributing code or other content to any “Submission” means the Code and any other copyrightable material Submitted by You, including any 2. Your Submission. You must agree to the terms of this Agreement before making a Submission to any 3. Originality of Work. You represent that each of Your Submissions is entirely Your 4. Your Employer. References to “employer” in this Agreement include Your employer or anyone else 5. Licenses. a. Copyright License. You grant .NET Foundation, and those who receive the Submission directly b. Patent License. You grant .NET Foundation, and those who receive the Submission directly or c. Other Rights Reserved. Each party reserves all rights not expressly granted in this Agreement. 6. Representations and Warranties. You represent that You are legally entitled to grant the above 7. Notice to .NET Foundation. You agree to notify .NET Foundation in writing of any facts or 8. Information about Submissions. You agree that contributions to Projects and information about 9. Governing Law/Jurisdiction. This Agreement is governed by the laws of the State of Washington, and 10. Entire Agreement/Assignment. This Agreement is the entire agreement between the parties, and .NET Foundation dedicates this Contribution License Agreement to the public domain according to the Creative Commons CC0 1. |
|
@dotnet-policy-service agree |
Link issues
fixes #6219
Summary By Copilot
Regression?
Risk
Verification
Packaging changes reviewed?
☑️ Self Check before Merge
Summary by Sourcery
Enable day display in FlipClock by adding a ShowDay parameter and extending the time computation to include days alongside hours, minutes, and seconds.
New Features: