diff --git a/compiled/alipay/demo/pages/Calendar/index.axml b/compiled/alipay/demo/pages/Calendar/index.axml index f00231032..14c3806f7 100644 --- a/compiled/alipay/demo/pages/Calendar/index.axml +++ b/compiled/alipay/demo/pages/Calendar/index.axml @@ -103,12 +103,15 @@ - + + selectionMode="single" + changedScrollIntoView /> @@ -120,5 +123,11 @@ onTap="demo9HandleNextDay"> 下一天 + + 回到初始化日期 + diff --git a/compiled/alipay/demo/pages/Calendar/index.js b/compiled/alipay/demo/pages/Calendar/index.js index 634c41ba1..80e2fee34 100644 --- a/compiled/alipay/demo/pages/Calendar/index.js +++ b/compiled/alipay/demo/pages/Calendar/index.js @@ -76,7 +76,6 @@ Page({ demo9: { visible: true, value: Date.now(), - monthRange: [new Date().getTime(), new Date().getTime()], }, }, demo3NextMonth() { @@ -112,4 +111,9 @@ Page({ 'demo9.value': this.data.demo9.value + 1000 * 24 * 3600, }); }, + demo9HandleInit() { + this.setData({ + 'demo9.value': Date.now(), + }); + }, }); diff --git a/compiled/alipay/src/Calendar/index.ts b/compiled/alipay/src/Calendar/index.ts index 88b14fa77..cef1c2adb 100644 --- a/compiled/alipay/src/Calendar/index.ts +++ b/compiled/alipay/src/Calendar/index.ts @@ -55,6 +55,16 @@ const Calendar = (props: ICalendarProps) => { const [scrollIntoViewId, setScrollIntoViewId] = useState(''); + // scroll 触发滚动之后需要重置 scrollIntoViewId + function updateScrollIntoViewId(id) { + setScrollIntoViewId(id); + + const timer = setTimeout(() => { + setScrollIntoViewId(''); + clearTimeout(timer); + }); + } + const selectionModeFromValue = getSelectionModeFromValue(value); const selectionMode = props.selectionMode ?? selectionModeFromValue ?? 'range'; @@ -183,7 +193,7 @@ const Calendar = (props: ICalendarProps) => { useEffect(() => { // 滚动到已选的位置 props.changedScrollIntoView && - setScrollIntoViewId(getScrollIntoViewId(value)); + updateScrollIntoViewId(getScrollIntoViewId(value)); }, [value]); useReady(() => { @@ -191,10 +201,10 @@ const Calendar = (props: ICalendarProps) => { // 初始化默认值时,滚动到选中位置 const isControl = hasValue(props.value); if (isControl) { - setScrollIntoViewId(getScrollIntoViewId(props.value)); + updateScrollIntoViewId(getScrollIntoViewId(props.value)); } else { props.defaultValue && - setScrollIntoViewId(getScrollIntoViewId(props.defaultValue)); + updateScrollIntoViewId(getScrollIntoViewId(props.defaultValue)); } }, []); @@ -223,4 +233,5 @@ mountComponent(Calendar, { weekStartsOn: 'Sunday', localeText: defaultLocaleText, onFormatter: null, + changedScrollIntoView: null, }); diff --git a/compiled/wechat/demo/pages/Calendar/index.js b/compiled/wechat/demo/pages/Calendar/index.js index 16b4006fa..060954d99 100644 --- a/compiled/wechat/demo/pages/Calendar/index.js +++ b/compiled/wechat/demo/pages/Calendar/index.js @@ -78,7 +78,6 @@ Page({ demo9: { visible: true, value: Date.now(), - monthRange: [new Date().getTime(), new Date().getTime()], }, }, demo3NextMonth() { @@ -114,4 +113,9 @@ Page({ 'demo9.value': this.data.demo9.value + 1000 * 24 * 3600, }); }, + demo9HandleInit() { + this.setData({ + 'demo9.value': Date.now(), + }); + }, }); diff --git a/compiled/wechat/demo/pages/Calendar/index.wxml b/compiled/wechat/demo/pages/Calendar/index.wxml index 25c0550c2..471e21cc1 100644 --- a/compiled/wechat/demo/pages/Calendar/index.wxml +++ b/compiled/wechat/demo/pages/Calendar/index.wxml @@ -89,12 +89,15 @@ - + + selectionMode="single" + changedScrollIntoView /> @@ -106,5 +109,11 @@ bind:tap="demo9HandleNextDay"> 下一天 + + 回到初始化日期 + diff --git a/compiled/wechat/src/Calendar/index.js b/compiled/wechat/src/Calendar/index.js index 694bba4d6..135ed896c 100644 --- a/compiled/wechat/src/Calendar/index.js +++ b/compiled/wechat/src/Calendar/index.js @@ -55,6 +55,14 @@ var Calendar = function (props) { value: props.value, }), value = _c[0], setValue = _c[1]; var _d = useState(''), scrollIntoViewId = _d[0], setScrollIntoViewId = _d[1]; + // scroll 触发滚动之后需要重置 scrollIntoViewId + function updateScrollIntoViewId(id) { + setScrollIntoViewId(id); + var timer = setTimeout(function () { + setScrollIntoViewId(''); + clearTimeout(timer); + }); + } var selectionModeFromValue = getSelectionModeFromValue(value); var selectionMode = (_b = (_a = props.selectionMode) !== null && _a !== void 0 ? _a : selectionModeFromValue) !== null && _b !== void 0 ? _b : 'range'; var triggerEvent = useComponentEvent(props).triggerEvent; @@ -158,18 +166,18 @@ var Calendar = function (props) { useEffect(function () { // 滚动到已选的位置 props.changedScrollIntoView && - setScrollIntoViewId(getScrollIntoViewId(value)); + updateScrollIntoViewId(getScrollIntoViewId(value)); }, [value]); useReady(function () { measurement(); // 初始化默认值时,滚动到选中位置 var isControl = hasValue(props.value); if (isControl) { - setScrollIntoViewId(getScrollIntoViewId(props.value)); + updateScrollIntoViewId(getScrollIntoViewId(props.value)); } else { props.defaultValue && - setScrollIntoViewId(getScrollIntoViewId(props.defaultValue)); + updateScrollIntoViewId(getScrollIntoViewId(props.defaultValue)); } }, []); useEvent('measurement', function () { @@ -195,4 +203,5 @@ mountComponent(Calendar, { weekStartsOn: 'Sunday', localeText: defaultLocaleText, onFormatter: null, + changedScrollIntoView: null, }); diff --git a/demo/pages/Calendar/index.axml.tsx b/demo/pages/Calendar/index.axml.tsx index 1fe42693c..b450aa3bc 100644 --- a/demo/pages/Calendar/index.axml.tsx +++ b/demo/pages/Calendar/index.axml.tsx @@ -119,12 +119,13 @@ export default ({ {/* 受控模式 */} {demo9.visible && ( - + 上一天 @@ -136,6 +137,13 @@ export default ({ > 下一天 + + 回到初始化日期 + )} diff --git a/demo/pages/Calendar/index.ts b/demo/pages/Calendar/index.ts index b79407f9d..b90bb8d38 100644 --- a/demo/pages/Calendar/index.ts +++ b/demo/pages/Calendar/index.ts @@ -88,7 +88,6 @@ Page({ demo9: { visible: true, value: Date.now(), - monthRange: [new Date().getTime(), new Date().getTime()], }, }, demo3NextMonth() { @@ -133,4 +132,9 @@ Page({ 'demo9.value': this.data.demo9.value + 1000 * 24 * 3600, }); }, + demo9HandleInit() { + this.setData({ + 'demo9.value': Date.now(), + }); + }, }); diff --git a/src/Calendar/index.ts b/src/Calendar/index.ts index 88b14fa77..cef1c2adb 100644 --- a/src/Calendar/index.ts +++ b/src/Calendar/index.ts @@ -55,6 +55,16 @@ const Calendar = (props: ICalendarProps) => { const [scrollIntoViewId, setScrollIntoViewId] = useState(''); + // scroll 触发滚动之后需要重置 scrollIntoViewId + function updateScrollIntoViewId(id) { + setScrollIntoViewId(id); + + const timer = setTimeout(() => { + setScrollIntoViewId(''); + clearTimeout(timer); + }); + } + const selectionModeFromValue = getSelectionModeFromValue(value); const selectionMode = props.selectionMode ?? selectionModeFromValue ?? 'range'; @@ -183,7 +193,7 @@ const Calendar = (props: ICalendarProps) => { useEffect(() => { // 滚动到已选的位置 props.changedScrollIntoView && - setScrollIntoViewId(getScrollIntoViewId(value)); + updateScrollIntoViewId(getScrollIntoViewId(value)); }, [value]); useReady(() => { @@ -191,10 +201,10 @@ const Calendar = (props: ICalendarProps) => { // 初始化默认值时,滚动到选中位置 const isControl = hasValue(props.value); if (isControl) { - setScrollIntoViewId(getScrollIntoViewId(props.value)); + updateScrollIntoViewId(getScrollIntoViewId(props.value)); } else { props.defaultValue && - setScrollIntoViewId(getScrollIntoViewId(props.defaultValue)); + updateScrollIntoViewId(getScrollIntoViewId(props.defaultValue)); } }, []); @@ -223,4 +233,5 @@ mountComponent(Calendar, { weekStartsOn: 'Sunday', localeText: defaultLocaleText, onFormatter: null, + changedScrollIntoView: null, }); diff --git a/tests/alipay/Calendar/__tests__/calendar.spec.ts b/tests/alipay/Calendar/__tests__/calendar.spec.ts index 579a12ddb..db2fa2309 100644 --- a/tests/alipay/Calendar/__tests__/calendar.spec.ts +++ b/tests/alipay/Calendar/__tests__/calendar.spec.ts @@ -314,15 +314,8 @@ describe('Calendar', () => { extendFunctions.clickCell( dayjs(defaultValue).add(1, 'd').format('YYYY-MM-DD') ); - await sleep(300); - expect(instance.getData().scrollIntoViewId).toEqual( - getScrollIntoViewId(dayjs(defaultValue).add(1, 'd').toDate().getTime()) - ); - extendFunctions.clickCell('2024-03-28'); await sleep(300); - expect(instance.getData().scrollIntoViewId).toEqual( - getScrollIntoViewId(dayjs('2024-03-28').toDate().getTime()) - ); + expect(instance.getData().scrollIntoViewId).toEqual(''); }); });