Skip to content

feat(FlipClock): add ShowDay parameter #6218

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Jun 13, 2025
Merged

feat(FlipClock): add ShowDay parameter #6218

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
62eb9fe
修改FlipClock
Mydashixiong Jun 12, 2025
374cdc6
Merge branch 'main' into FlipClock
ArgoZhang Jun 13, 2025
420b59b
refactor: 代码格式化
ArgoZhang Jun 13, 2025
433ea4a
doc: 增加 ShowDay 示例
ArgoZhang Jun 13, 2025
7afab2d
refactor: 精简代码
ArgoZhang Jun 13, 2025
d9bfbd2
refactor: 增加 Day 逻辑
ArgoZhang Jun 13, 2025
9c91309
feat: 增加容器 overflow 样式防止溢出
ArgoZhang Jun 13, 2025
a7bce59
doc: 增加 ShowDay 示例
ArgoZhang Jun 13, 2025
f1f5097
doc: 参数文档本地化
ArgoZhang Jun 13, 2025
ba6ca0d
test: 增加单元测试
ArgoZhang Jun 13, 2025
19e2fe3
chore: bump version 9.7.4-beta03
ArgoZhang Jun 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions src/BootstrapBlazor/Components/FlipClock/FlipClock.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,15 @@
@attribute [BootstrapModuleAutoLoader(JSObjectReference = true)]

<div @attributes="@AdditionalAttributes" class="@ClassString" style="@StyleString" id="@Id">

@if (ShowDay)
{

Check warning on line 8 in src/BootstrapBlazor/Components/FlipClock/FlipClock.razor

View check run for this annotation

Codecov / codecov/patch

src/BootstrapBlazor/Components/FlipClock/FlipClock.razor#L8 

Added line #L8 was not covered by tests
<div class="bb-flip-clock-list day">
@RenderItem(10)
@RenderItem(10)

Check warning on line 11 in src/BootstrapBlazor/Components/FlipClock/FlipClock.razor

View check run for this annotation

Codecov / codecov/patch

src/BootstrapBlazor/Components/FlipClock/FlipClock.razor#L10-L11 

Added lines #L10 - L11 were not covered by tests
</div>
}

Check warning on line 13 in src/BootstrapBlazor/Components/FlipClock/FlipClock.razor

View check run for this annotation

Codecov / codecov/patch

src/BootstrapBlazor/Components/FlipClock/FlipClock.razor#L13 

Added line #L13 was not covered by tests

@if (ShowHour)
{
<div class="bb-flip-clock-list hour">
Expand Down
5 changes: 5 additions & 0 deletions src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@ namespace BootstrapBlazor.Components;
/// </summary>
public partial class FlipClock
{
/// <summary>
/// 获得/设置 是否显示 Day 默认 false
/// </summary>
[Parameter]
public bool ShowDay { get; set; } = false;
/// <summary>
/// 获得/设置 是否显示 Hour 默认 true
/// </summary>
Expand Down
23 changes: 20 additions & 3 deletions src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,19 +21,36 @@ export function init(id, options) {

let counter = 0;
Copy link
Contributor

@sourcery-ai sourcery-ai bot Jun 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 += 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.

const getDate = () => {
let totalMilliseconds = 0;
let now;

if (options.viewMode === "Count") {
counter += 1000;
now = new Date(new Date().getTimezoneOffset() * 60 * 1000 - options.startValue + counter);
// 计算累计时间（单位：毫秒）
totalMilliseconds = counter - options.startValue;
}
else if (countDown) {
counter += 1000;
now = new Date(new Date().getTimezoneOffset() * 60 * 1000 + options.startValue - counter);
// 计算剩余时间（单位：毫秒）
totalMilliseconds = options.startValue - counter;
// 确保不会出现负数
if (totalMilliseconds < 0) totalMilliseconds = 0;
}
else {
now = new Date();
return {
days: now.getDate(), // 返回当前日期（月份中的第几天）
hours: now.getHours(),
minutes: now.getMinutes(),
seconds: now.getSeconds()
};
}
return { hours: now.getHours(), minutes: now.getMinutes(), seconds: now.getSeconds() };
// 将时间戳转换为天/时/分/秒
const seconds = Math.floor(totalMilliseconds / 1000) % 60;
const minutes = Math.floor(totalMilliseconds / (1000 * 60)) % 60;
const hours = Math.floor(totalMilliseconds / (1000 * 60 * 60)) % 24;
const days = Math.floor(totalMilliseconds / (1000 * 60 * 60 * 24));
return { days, hours, minutes, seconds };
}

let lastHour;
Expand Down