fix(Calendar): calendar should support uncontrolled mode, close #4491

alibaba-fusion · Oct 31, 2023 · 64396da · 64396da
1 parent fdcf494
commit 64396da
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/src/calendar/calendar.jsx b/src/calendar/calendar.jsx
@@ -183,6 +183,13 @@ class Calendar extends Component {
 
         this.changeVisibleMonth(date, 'cellClick');
 
+        if (!('value' in this.props)) {
+            // 非受控模式，直接修改当前state
+            this.setState({
+                value: date,
+            });
+        }
+
         // 当用户所在的面板为初始化面板时，则选择动作为触发 onSelect 回调
         if (this.state.mode === this.MODES[0]) {
             this.props.onSelect(date);

diff --git a/test/calendar/index-spec.js b/test/calendar/index-spec.js
@@ -64,6 +64,22 @@ describe('Calendar', () => {
             assert(wrapper.find('.next-calendar-card').length === 1);
         });
 
+        it('should render uncontrolled calendar', () => {
+            wrapper = mount(
+              <Calendar
+                  defaultValue={defaultVal}
+              />
+            );
+            assert(
+              wrapper.find('td[title="2017-10-01"]').hasClass('next-selected')
+            );
+            assert(wrapper.find('td[title="2017-10-02"]').length);
+            wrapper.find('td[title="2017-10-02"]').simulate('click');
+            assert(
+              wrapper.find('td[title="2017-10-02"]').hasClass('next-selected')
+            );
+        })
+
         it('should render controlled calendar', () => {
             wrapper = mount(
                 <Calendar
@@ -278,7 +294,7 @@ describe('Calendar', () => {
                 isClicked = true;
             };
             wrapper = mount(
-                <Calendar 
+                <Calendar
                     showOtherMonth={false}
                     defaultVisibleMonth={() => defaultVal}
                     onSelect={onSelect}
@@ -294,7 +310,7 @@ describe('Calendar', () => {
         it('should block click event from other month', () => {
             let isClicked = false;
             wrapper = mount(
-                <Calendar 
+                <Calendar
                     showOtherMonth={false}
                     defaultVisibleMonth={() => defaultVal}
                     onSelect={() => {