diff --git a/src/PickerPanel.tsx b/src/PickerPanel.tsx index f4bf9f809..acf3af412 100644 --- a/src/PickerPanel.tsx +++ b/src/PickerPanel.tsx @@ -216,6 +216,8 @@ function PickerPanel(props: PickerPanelProps) { }, }); + const originalValue = React.useRef(value); + const setViewDate = (date: DateType) => { setInnerViewDate(date); if (onPickerValueChange) { @@ -334,8 +336,9 @@ function PickerPanel(props: PickerPanelProps) { // ============================ Effect ============================ React.useEffect(() => { - if (value && !initRef.current) { + if (value && !isEqual(generateConfig, value, originalValue.current) && !initRef.current) { setInnerViewDate(value); + originalValue.current = value; } }, [value]); diff --git a/tests/panel.spec.tsx b/tests/panel.spec.tsx index 19f15ef9e..541aac053 100644 --- a/tests/panel.spec.tsx +++ b/tests/panel.spec.tsx @@ -8,10 +8,13 @@ import zhCN from '../src/locale/zh_CN'; import { clickButton, confirmOK, + findCell, getMoment, + isOpen, isSame, MomentPickerPanel, selectCell, + Calendar } from './util/commonUtil'; jest.mock('../src/utils/uiUtil', () => { @@ -557,4 +560,37 @@ describe('Picker.Panel', () => { }); }); }); + + it('calendar', () => { + const { container } = render(); + expect(container.querySelector('.rc-picker-month-panel')).toBeTruthy(); + const inputElements: any = container.querySelectorAll('.rc-picker-month-panel input'); + expect(inputElements.length).toBe(12); + const inputElement = inputElements[0]; + expect(inputElement.value).toBe(""); + + fireEvent.mouseDown(inputElement); + fireEvent.focus(inputElement); + expect(isOpen()).toBeTruthy(); + const monthDOM = document.querySelector('.rc-picker-header-view > .rc-picker-month-btn') as HTMLElement; + const lastMonthBtnValue = monthDOM.innerHTML; + fireEvent.click(document.querySelector('.rc-picker-dropdown .rc-picker-header-prev-btn')); + const currentMonthBtnValue = monthDOM.innerHTML; + expect(lastMonthBtnValue !== currentMonthBtnValue).toBeTruthy(); + + const cell = findCell(2, 1); + fireEvent.click(cell); + jest.runAllTimers(); + expect(inputElement.value).not.toBeNull(); + expect(isOpen()).toBeFalsy(); + + fireEvent.mouseDown(inputElement); + fireEvent.focus(inputElement); + expect(isOpen()).toBeTruthy(); + const monthDOMNew = document.querySelector('.rc-picker-header-view > .rc-picker-month-btn') as HTMLElement; + const lastMonthBtnValueNew = monthDOMNew.innerHTML; + fireEvent.click(document.querySelector('.rc-picker-dropdown .rc-picker-header-prev-btn')); + const currentMonthBtnValueNew = monthDOMNew.innerHTML; + expect(lastMonthBtnValueNew !== currentMonthBtnValueNew).toBeTruthy(); + }); }); diff --git a/tests/util/commonUtil.tsx b/tests/util/commonUtil.tsx index 8e91df9a8..5f3afc1d2 100644 --- a/tests/util/commonUtil.tsx +++ b/tests/util/commonUtil.tsx @@ -1,10 +1,11 @@ -import React from 'react'; +import React, { useState } from 'react'; // import { mount as originMount, ReactWrapper } from 'enzyme'; import { fireEvent } from '@testing-library/react'; import moment, { Moment, unitOfTime } from 'moment'; import Picker, { PickerPanel, PickerProps } from '../../src'; import momentGenerateConfig from '../../src/generate/moment'; import enUS from '../../src/locale/en_US'; +import zhCN from '../../src/locale/zh_CN'; import { PickerBaseProps, PickerDateProps, PickerTimeProps } from '../../src/Picker'; import { PickerPanelBaseProps, @@ -95,6 +96,30 @@ export const MomentPickerPanel = (props: MomentPickerPanelProps) => ( generateConfig={momentGenerateConfig} locale={enUS} {...props} /> ); +export const Calendar = () => { + const [date, setDate] = useState(null); + return ( + + locale={zhCN} + mode="month" + generateConfig={momentGenerateConfig} + monthCellRender={(value) => { + return ( + + locale={zhCN} + generateConfig={momentGenerateConfig} + value={date ? moment(date) : null} + onChange={(dateValue) => { + setDate(dateValue); + }} + /> + ) + }} + hideHeader + /> + ) +} + // Moment Range Picker export type MomentRangePickerProps = | InjectDefaultProps>