fix: picker change won't change panel (#121)

* fix: picker change won't change type

* fix: test

Author: 07akioni

examples/switchType.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import { Moment } from 'moment';
+import Picker from '../src/Picker';
+import momentGenerateConfig from '../src/generate/moment';
+import zhCN from '../src/locale/zh_CN';
+import '../assets/index.less';
+
+const sharedProps = {
+  generateConfig: momentGenerateConfig,
+};
+
+function PickerWithType({ type, onChange }) {
+  if (type === 'date') return <Picker<Moment> {...sharedProps} onChange={onChange} locale={zhCN} />;
+  return <Picker<Moment> {...sharedProps} picker={type} onChange={onChange} locale={zhCN} />;
+}
+
+export default function SwitchablePicker() {
+  const [type, setType] = useState('date');
+  return (
+    <>
+      <select
+        value={type}
+        onChange={event => {
+          setType(event.target.value);
+        }}
+      >
+        <option value="date">Date</option>
+        <option value="week">Week</option>
+        <option value="month">Month</option>
+        <option value="quarter">Quarter</option>
+        <option value="year">Year</option>
+      </select>
+      <PickerWithType type={type} onChange={value => console.log(value)} />
+    </>
+  );
+}

src/PickerPanel.tsx

@@ -238,6 +238,10 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
     },
   );
 
+  React.useEffect(() => {
+    setInnerMode(picker);
+  }, [picker]);
+
   const [sourceMode, setSourceMode] = React.useState<PanelMode>(() => mergedMode);
 
   const onInternalPanelChange = (newMode: PanelMode | null, viewValue: DateType) => {

tests/picker.spec.tsx

@@ -730,6 +730,15 @@ describe('Picker.Basic', () => {
     expect(wrapper.render()).toMatchSnapshot();
   });
 
+  it('change panel when `picker` changed', () => {
+    const wrapper = mount(<MomentPicker open picker="week" />);
+    expect(wrapper.find('.rc-picker-week-panel').length).toEqual(1);
+    wrapper.setProps({ picker: 'month' });
+    wrapper.update();
+    expect(wrapper.find('.rc-picker-week-panel').length).toEqual(0);
+    expect(wrapper.find('.rc-picker-month-panel').length).toEqual(1);
+  });
+
   describe('hover value', () => {
     it('should restore when leave', () => {
       const wrapper = mount(<MomentPicker open defaultValue={getMoment('2020-07-22')} />);