fix: Update display value when picker changed (#32)

Author: zombieJ

package.json

@@ -41,7 +41,8 @@
     "classnames": "^2.2.1",
     "moment": "^2.24.0",
     "rc-trigger": "^4.0.0",
-    "rc-util": "^4.17.0"
+    "rc-util": "^4.17.0",
+    "shallowequal": "^1.1.0"
   },
   "engines": {
     "node": ">=8.x"
@@ -52,6 +53,7 @@
     "@types/jest": "^24.0.23",
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.0",
+    "@types/shallowequal": "^1.1.1",
     "@umijs/fabric": "^1.1.10",
     "coveralls": "^3.0.6",
     "cross-env": "^6.0.0",

src/Picker.tsx

@@ -332,6 +332,13 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
     }
   }, [mergedOpen, valueTexts]);
 
+  // Change picker should sync back with text value
+  React.useEffect(() => {
+    if (!mergedOpen) {
+      resetText();
+    }
+  }, [picker]);
+
   // Sync innerValue with control mode
   React.useEffect(() => {
     // Sync select value

src/hooks/useValueTexts.ts

@@ -1,4 +1,5 @@
-import * as React from 'react';
+import shallowEqual from 'shallowequal';
+import useMemo from 'rc-util/lib/hooks/useMemo';
 import { GenerateConfig } from '../generate';
 import { Locale } from '../interface';
 
@@ -12,12 +13,16 @@ export default function useValueTexts<DateType>(
   value: DateType | null,
   { formatList, generateConfig, locale }: ValueTextConfig<DateType>,
 ) {
-  return React.useMemo<string[]>(() => {
-    if (!value) {
-      return [''];
-    }
-    return formatList.map(subFormat =>
-      generateConfig.locale.format(locale.locale, value, subFormat),
-    );
-  }, [value]);
+  return useMemo<string[]>(
+    () => {
+      if (!value) {
+        return [''];
+      }
+      return formatList.map(subFormat =>
+        generateConfig.locale.format(locale.locale, value, subFormat),
+      );
+    },
+    [value, formatList],
+    (prev, next) => prev[0] !== next[0] || !shallowEqual(prev[1], next[1]),
+  );
 }

tests/picker.spec.tsx

@@ -604,4 +604,23 @@ describe('Picker.Basic', () => {
     wrapper.closePicker();
     expect(wrapper.find('input').props().value).toEqual('2000-01-01');
   });
+
+  it('switch picker should change format', () => {
+    const wrapper = mount(
+      <MomentPicker
+        picker="date"
+        showTime
+        defaultValue={getMoment('1999-09-03')}
+      />,
+    );
+    expect(wrapper.find('input').props().value).toEqual('1999-09-03 00:00:00');
+
+    [['date', '1999-09-03'], ['month', '1999-09'], ['year', '1999']].forEach(
+      ([picker, text]) => {
+        wrapper.setProps({ picker, showTime: false });
+        wrapper.update();
+        expect(wrapper.find('input').props().value).toEqual(text);
+      },
+    );
+  });
 });