+ @if (ShowYear)
+ {
+
+ @RenderItem(10)
+ @RenderItem(10)
+ @RenderItem(10)
+ @RenderItem(10)
+
+ }
+
@if (ShowMonth)
{
diff --git a/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.cs b/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.cs
index 7b85496338a..39d423353f8 100644
--- a/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.cs
+++ b/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.cs
@@ -11,6 +11,12 @@ namespace BootstrapBlazor.Components;
///
public partial class FlipClock
{
+ ///
+ /// 获得/设置 是否显示 Year 默认 false
+ ///
+ [Parameter]
+ public bool ShowYear { get; set; }
+
///
/// 获得/设置 是否显示 Month 默认 false
///
diff --git a/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.js b/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.js
index 7b71dbf7ef4..9176f0f55c3 100644
--- a/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.js
+++ b/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.js
@@ -1,6 +1,4 @@
-import Data from "../../modules/data.js"
-
-export function init(id, options) {
+export function init(id, options) {
options = {
...{
viewMode: 'DateTime',
@@ -14,30 +12,17 @@ export function init(id, options) {
return;
}
- const listMonth = el.querySelector('.bb-flip-clock-list.month');
- const listDay = el.querySelector('.bb-flip-clock-list.day');
- const listHour = el.querySelector('.bb-flip-clock-list.hour');
- const listMinute = el.querySelector('.bb-flip-clock-list.minute');
- const listSecond = el.querySelector('.bb-flip-clock-list.second');
- const countDown = options.viewMode === "CountDown";
-
+ const lastValues = {};
let counter = 0;
+ let totalMilliseconds = 0;
+ let countDown = false;
const getDate = () => {
- let totalMilliseconds = 0;
- let now;
-
- if (options.viewMode === "Count") {
- counter += 1000;
- totalMilliseconds = counter - options.startValue;
- }
- else if (countDown) {
- counter += 1000;
- totalMilliseconds = options.startValue - counter;
- if (totalMilliseconds < 0) totalMilliseconds = 0;
- }
- else {
- now = new Date();
+ const view = options.viewMode;
+ countDown = false;
+ if (view === "DateTime") {
+ const now = new Date();
return {
+ years: now.getFullYear(),
months: now.getMonth() + 1,
days: now.getDate(),
hours: now.getHours(),
@@ -45,44 +30,59 @@ export function init(id, options) {
seconds: now.getSeconds()
};
}
+ else if (view === "Count") {
+ counter += 1000;
+ totalMilliseconds = counter - options.startValue;
+ }
+ else if (view === "CountDown") {
+ countDown = true;
+ counter += 1000;
+ totalMilliseconds = options.startValue - counter;
+ if (totalMilliseconds < 0) totalMilliseconds = 0;
+ }
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 { months, days, hours, minutes, seconds };
- }
+ const months = 0;
+ const years = 0;
+ return { years, months, days, hours, minutes, seconds };
+ };
+
+ const getConfig = () => [
+ { key: 'years', list: el.querySelector('.bb-flip-clock-list.year'), digits: 4 },
+ { key: 'months', list: el.querySelector('.bb-flip-clock-list.month'), digits: 2 },
+ { key: 'days', list: el.querySelector('.bb-flip-clock-list.day'), digits: 2 },
+ { key: 'hours', list: el.querySelector('.bb-flip-clock-list.hour'), digits: 2 },
+ { key: 'minutes', list: el.querySelector('.bb-flip-clock-list.minute'), digits: 2 },
+ { key: 'seconds', list: el.querySelector('.bb-flip-clock-list.second'), digits: 2 },
+ ];
+
+ const setDigits = (list, value, digits, countDown) => {
+ list.classList.remove('flip');
+ for (let i = 0; i < digits; i++) {
+ const place = digits - 1 - i;
+ const digit = Math.floor(value / 10 ** place) % 10;
+ setFlip(list.children[i], digit, countDown);
+ }
+ list.classList.add('flip');
+ };
- let lastMonth;
- let lastDay;
- let lastHour;
- let lastMinute;
- let lastSecond;
const go = () => {
- const { months, days, hours, minutes, seconds } = getDate();
-
- if (lastSecond !== seconds) {
- lastSecond = seconds;
- setTime(listSecond, seconds, countDown);
- }
- if (lastMinute !== minutes) {
- lastMinute = minutes;
- setTime(listMinute, minutes, countDown);
- }
- if (lastHour !== hours) {
- lastHour = hours;
- setTime(listHour, hours, countDown);
- }
- if (lastDay !== days) {
- lastDay = days;
- setTime(listDay, days, countDown);
- }
- if (lastMonth !== months) {
- lastDay = days;
- setTime(listMonth, months, countDown);
- }
- return { months, days, hours, minutes, seconds }
- }
+ const d = getDate();
+ const unitConfig = getConfig();
+ unitConfig.forEach(({ key, list, digits }) => {
+ if (list === null) return;
+
+ const v = d[key];
+ if (lastValues[key] !== v) {
+ lastValues[key] = v;
+ setDigits(list, v, digits, countDown);
+ }
+ });
+ return d;
+ };
let start = void 0
let current;
@@ -105,28 +105,6 @@ export function init(id, options) {
}
requestAnimationFrame(flip);
- Data.set(id, { el, options });
-}
-
-export function dispose(id) {
- const clock = Data.get(id)
- if (clock) {
-
- }
-}
-
-const setTime = (list, time, countDown) => {
- if (list) {
- const leftIndex = Math.floor(time / 10);
- const rightIndex = time % 10;
- const leftFlip = list.children[0];
- const rightFlip = list.children[1];
-
- list.classList.remove('flip');
- setFlip(leftFlip, leftIndex, countDown);
- setFlip(rightFlip, rightIndex, countDown);
- list.classList.add('flip');
- }
}
const setFlip = (flip, index, countDown) => {
diff --git a/test/UnitTest/Components/FlipClockTest.cs b/test/UnitTest/Components/FlipClockTest.cs
index eb1f4c65c1b..57a64a663ab 100644
--- a/test/UnitTest/Components/FlipClockTest.cs
+++ b/test/UnitTest/Components/FlipClockTest.cs
@@ -72,6 +72,19 @@ public void ShowMonth_Ok()
cut.Contains("bb-flip-clock-list month");
}
+ [Fact]
+ public void ShowYear_Ok()
+ {
+ var cut = Context.RenderComponent();
+ cut.DoesNotContain("bb-flip-clock-list year");
+
+ cut.SetParametersAndRender(pb =>
+ {
+ pb.Add(a => a.ShowYear, true);
+ });
+ cut.Contains("bb-flip-clock-list year");
+ }
+
[Fact]
public async Task ViewMode_Ok()
{